Thread titleFromLast replied
Now searching...
Neoseeker Forums » » Web Coding » Style picker » Post Reply

Note to Guests: For the enjoyment of other visitors, and to help keep this forum tidy and working smoothly, please make sure you search the forum before posting your question.
REPLY TO A THREAD
Name:* Members, please LOGIN before posting
Email: We use this to display your Gravatar

Sign in with
Subject:*
Message:*


HTML is not allowed
markup is allowed

Help with markup tags

Enabling Buttons in IE7




Smilies:
  ·all smilies here
:) :P ;) :( :| ;( :D :confused: :cool: :# :o ^_^ :colored: :thick:

hideOriginal Post

Aug 07, 12 at 9:09amhiigaran


...nope, not picking CSS styles to change the look of a website here. i just couldnt think of a better title. anyway...

on a page, i have multiple images. each of these images are exactly the same in the information they display, but their colours are different, and controlled by changing variables in their URL (i dont think thats relevant though). currently, i have each image with its corresponding URL underneath it. what i would like to try is some kind of javascript where the user can click on one of the images that he or she likes, and then have the URL for that particular image output somewhere underneath everything.

the point of this is to reduce the length of the page by putting all the images close to eachother, and eliminating all the image URLs so they arent seen, save for the one that is clicked on. whether or not the url is automatically copied to the clipboard doesnt matter (and i dont think its possible in JS anyway).

ideas? im horrible with JS, but im guessing theres going to be some kind of onClick or something...yeah, real helpful, i am

Thread Recap (last 10 posts from newest to oldest)

Aug 11, 12 at 3:48am
hiigaran


yeah thats why i was confused. it sounded as if there was more to it. oh well, never mind!



Aug 10, 12 at 9:42pm
BeZ


I did use an object in my code on the previous page to store all the colour values

Objects are good because they are associative, you can match values to keys so you can say what each colours value is.



Aug 10, 12 at 3:39pm
hiigaran


okay, so whats the advantage to creating an object, as opposed to doing it the way you have done it in the code on the previous page? it looks simple enough right now, especially if i want to add more, or modify existing ones.

also, the u= to t= bit worked. cheers.



Aug 10, 12 at 2:08pm
BeZ


An object is something that contains information, lots of things in JavaScript are objects, when you do something like "user = document.getElementById('user_number').value;" you're creating an object containing information about the user_number element then getting the value of it from that object.

You create objects using curly brackets like

var myObject = {
   "key" : "value",
   5 : value2"
}


Then you can access the data by calling the object and the key, if you use a number for the key then it'll act similarly to an array so you put the key inside brackets, if you use a string you use a period then the key

//string key
myObject.key;

//integer key
myObject[5];


As for printing a different url if the user number is empty you can do something like this

var image = 'http://folding.extremeoverclocking.com/sigs/sigimage.php?'+(user=="" ? "t=" : "u=") + user + '&c1=' + styles[style].c1 + '&c2=' + styles[style].c2 + '&c3=' + styles[style].c3 + '&c4=' + styles[style].c4 + '&c5=' + styles[style].c5 + '&bg=' + type;


That uses what's known as a ternary operator, it's basically a short inline if statement

(user == "" ? "t=" : "u=")


It checks if user is empty, if it is it puts in "t=", if it isn't it puts in "u=".



Aug 10, 12 at 8:00am
hiigaran


sorry i didnt reply sooner. the script works perfectly! my final two questions...you mentioned creating an object called styles. what is that, and how do i use it? also, for outputting the right URL, can i change:

http://folding.extremeoverclocking.com/sigs/sigimage.php?u=


to:

http://folding.extremeoverclocking.com/sigs/sigimage.php?t=


if user_number contains no text?



Aug 08, 12 at 2:11am
hiigaran


ill give that a whirl when i get home tonight. cheers.

...and i thought i had to have a lot of patience making builds for people in the computer hardware forums...



Aug 08, 12 at 12:19am
BeZ


Got it working! Basically the easiest way I can see of doing it is by putting the different radio groups in divs so they are easier to select (would probably be more semantic to wrap them in fieldsets but I did this pretty quickly).

Then you loop through all the inputs to find the one that's checked, I used an object to store all the different colour values cause it's the most efficient way I can think of to match numbers to a colour set

<form>
	User Number: <input type="text" id="user_number" /><br /><br />
	<div id="types">
		Team & User Info: <input type="radio" name="banner_type" checked value="0" /><br /><br />
		Team Info Only: <input type="radio" name="banner_type" value="1" /><br /><br />
		User Info Only: <input type="radio" name="banner_type" value="2" /><br /><br />
	</div>
	<div id="styles">
		1: <input type="radio" checked name="banner_style" value="1" /><br /><br />
		2: <input type="radio" name="banner_style" value="2" /><br /><br />
		3: <input type="radio" name="banner_style" value="3" /><br /><br />
		4: <input type="radio" name="banner_style" value="4" /><br /><br />
		5: <input type="radio" name="banner_style" value="5" /><br /><br />
		6: <input type="radio" name="banner_style" value="6" /><br /><br />
		7: <input type="radio" name="banner_style" value="7" /><br /><br />
		8: <input type="radio" name="banner_style" value="8" /><br /><br />
		9: <input type="radio" name="banner_style" value="9" /><br /><br />
		10: <input type="radio" name="banner_style" value="10" /><br /><br />
		11: <input type="radio" name="banner_style" value="11" /><br /><br />
		12: <input type="radio" name="banner_style" value="12" /><br /><br />
		13: <input type="radio" name="banner_style" value="13" /><br /><br />
		14: <input type="radio" name="banner_style" value="14" /><br /><br />
		15: <input type="radio" name="banner_style" value="15" /><br /><br />
		16: <input type="radio" name="banner_style" value="16" /><br /><br />
	</div>
	<input type="button" id="Generate" value="Generate" />
</form>
 
Image URL: <span id="URL" ></span>
 
<script type="text/javascript">
	/*
		create an object called styles that contains all the styles and colours that can be chosen,
		makes it easier later when we select all the different colours we need
	*/
	var styles = {
			1 : { 
					c1: "#fff",
					c2: "#fff",
					c3: "#fff",
					c4: "#fff",
					c5: "#fff"
				},
			2 : { 
					c1: "#fff",
					c2: "#fff",
					c3: "#fff",
					c4: "#fff",
					c5: "#fff"
				},
			3 : { 
					c1: "#fff",
					c2: "#fff",
					c3: "#fff",
					c4: "#fff",
					c5: "#fff"
				},
			4 : { 
					c1: "#fff",
					c2: "#fff",
					c3: "#fff",
					c4: "#fff",
					c5: "#fff"
				},
			5 : { 
					c1: "#fff",
					c2: "#fff",
					c3: "#fff",
					c4: "#fff",
					c5: "#fff"
				},
			6 : { 
					c1: "#fff",
					c2: "#fff",
					c3: "#fff",
					c4: "#fff",
					c5: "#fff"
				}, //etc for all the different colour schemes
			
		}

	function getCheckedValue(radioArray) {
		//takes an array of radio inputs, loops through them and returns the value of the one that is checked
		for(i=0;i<radioArray.length;i++) {
                        //if the radio input at this point in the array is checked return its value
			if(radioArray[i].checked) {
				return radioArray[i].value;
				break;
			}
		}
		return false;
	}
	document.getElementById('Generate').addEventListener('click',function() {	
		//get the user number
		var user = document.getElementById('user_number').value;
		
		//get all the radio inputs that are inside the styles element
		var styleRadios = document.getElementById('styles').getElementsByTagName('input');
		
		//find the checked style
		var style = getCheckedValue(styleRadios);
		
		//get all the radio inputs that are inside the types element
		var typeRadios = document.getElementById('types').getElementsByTagName('input');
		
		//find the checked type
		var type = getCheckedValue(typeRadios);
		
		
		//create the image url, uses the styles object created above to output the different colours
		var image = 'http://folding.extremeoverclocking.com/sigs/sigimage.php?u=' + user + '&c1=' + styles[style].c1 + '&c2=' + styles[style].c2 + '&c3=' + styles[style].c3 + '&c4=' + styles[style].c4 + '&c5=' + styles[style].c5 + '&bg=' + type;

		document.getElementById("URL").innerHTML = image;
	});
	
</script>




Aug 07, 12 at 4:31pm
hiigaran


EDIT: what i have so far (and not working, of course):

<form>
    User Number: <input type="text" id="user_number" /><br /><br />
    Team & User Info: <input type="radio" name="banner_type" value="type0" /><br /><br />
    Team Info Only: <input type="radio" name="banner_type" value="type1" /><br /><br />
    User Info Only: <input type="radio" name="banner_type" value="type2" /><br /><br />
    1: <input type="radio" name="banner_style" value="1" /><br /><br />
    2: <input type="radio" name="banner_style" value="2" /><br /><br />
    3: <input type="radio" name="banner_style" value="3" /><br /><br />
    4: <input type="radio" name="banner_style" value="4" /><br /><br />
    5: <input type="radio" name="banner_style" value="5" /><br /><br />
    6: <input type="radio" name="banner_style" value="6" /><br /><br />
    7: <input type="radio" name="banner_style" value="7" /><br /><br />
    8: <input type="radio" name="banner_style" value="8" /><br /><br />
    9: <input type="radio" name="banner_style" value="9" /><br /><br />
    10: <input type="radio" name="banner_style" value="10" /><br /><br />
    11: <input type="radio" name="banner_style" value="11" /><br /><br />
    12: <input type="radio" name="banner_style" value="12" /><br /><br />
    13: <input type="radio" name="banner_style" value="13" /><br /><br />
    14: <input type="radio" name="banner_style" value="14" /><br /><br />
    15: <input type="radio" name="banner_style" value="15" /><br /><br />
    16: <input type="radio" name="banner_style" value="16" /><br /><br />
    <input type="button" id="Generate" value="Generate" />
    </form>
     
    Image URL: <div id="URL" style=display:inline;></div>
     
    <script type="text/javascript">
    function getCheckedValue(radioObj) {
    if(!radioObj)
        return "";
    var radioLength = radioObj.length;
    if(radioLength == undefined)
        if(radioObj.checked)
            return radioObj.value;
        else
            return "";
    for(var i = 0; i < radioLength; i++) {
        if(radioObj[i].checked) {
            return radioObj[i].value;
        }
    }
    return "";
    }
    var user = document.getElementById('user_number').value;
    var style = getCheckedValue('banner_style');
    var type = getCheckedValue('banner_type');

    var image = "http://folding.extremeoverclocking.com/sigs/sigimage.php?u=" + user + style + type;

    document.getElementById("URL").innerHTML = image;
    </script>




Aug 07, 12 at 2:37pm
hiigaran


i dont think ill need it for the direction im heading in, anyway.

heres what i have so far...

<form>
User Number: <input type="text" id="user_number" /><br /><br />
Team & User Info: <input type="radio" name="banner_type" value="type0" /><br /><br />
Team Info Only: <input type="radio" name="banner_type" value="type1" /><br /><br />
User Info Only: <input type="radio" name="banner_type" value="type2" /><br /><br />
1: <input type="radio" name="banner_style" value="1" /><br /><br />
2: <input type="radio" name="banner_style" value="2" /><br /><br />
3: <input type="radio" name="banner_style" value="3" /><br /><br />
4: <input type="radio" name="banner_style" value="4" /><br /><br />
5: <input type="radio" name="banner_style" value="5" /><br /><br />
6: <input type="radio" name="banner_style" value="6" /><br /><br />
7: <input type="radio" name="banner_style" value="7" /><br /><br />
8: <input type="radio" name="banner_style" value="8" /><br /><br />
9: <input type="radio" name="banner_style" value="9" /><br /><br />
10: <input type="radio" name="banner_style" value="10" /><br /><br />
11: <input type="radio" name="banner_style" value="11" /><br /><br />
12: <input type="radio" name="banner_style" value="12" /><br /><br />
13: <input type="radio" name="banner_style" value="13" /><br /><br />
14: <input type="radio" name="banner_style" value="14" /><br /><br />
15: <input type="radio" name="banner_style" value="15" /><br /><br />
16: <input type="radio" name="banner_style" value="16" /><br /><br />
<input type="button" id="Generate" value="Generate" />
</form>

Image URL: <div id="URL" style=display:inline;></div>

<script type="text/javascript">
document.getElementById('Generate').addEventListener('click',function() {

document.getElementById('URL').innerHTML = 'http://folding.extremeoverclocking.com/sigs/sigimage.php?u=' + user_number + '&c1=' + c_var + '&bg=' + bg_var;
});
</script>


this is where im stuck, as i dont know the language well. so i have the clicking part done, which will begin the script. i dont know what i put between the two lines of the script, though. all i know at this stage is that im supposed to have three variables, which are added to the output. also, im not sure what the 'value' on the radio buttons is supposed to be there for. could this be where i put the string for each option?

EDIT: oh and ill be rearranging things of course, but im not going to do that until i have the script working, so i can keep things a little simpler.



Aug 07, 12 at 2:27pm
tekmosis


Chances are that a person already has jQuery loaded in their browsers cache. In fact, you already have it loaded now because you're on Neoseeker. Most people use the hosted jQuery from Google API's so there's no real overhead. Seems like BeZ's got you covered for all your JS though so I'll leave it at what I posted.



Powered by neoforums v2.3.0 (Bolieve)
Copyright Neo Era Media, Inc. 1999-2014

Neoseeker.com   |   Forum Rules   |   Forum FAQ   |   Neoseeker Terms of Use   |   Supermods On Duty [ server id: web6 ··· elapsed: 0.2921]
Chat and Lounges
Game Platforms
Mobile Platforms