Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New to the CF scene
    Join Date
    Sep 2012
    Posts
    7
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Set <input> submission as global Javascript variable?

    I am a complete beginner at Javascript (just started learning it yesterday, but luckily, most of the syntax is similar to C, which I know), so try to bear with me here.

    Is there a way to take a user's text input (using <input type="text">) and set it as a global Javascript variable? Trying to make it so that the user can input a hex color into the box, press submit, and have the background-color in the stylesheet changed.

    Thank you very much in advance~

  • #2
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    Unless you think there will be a lot of people who disable cookies, use a cookie for setting the background-color.
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • #3
    New to the CF scene
    Join Date
    Sep 2012
    Posts
    7
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by WolfShade View Post
    Unless you think there will be a lot of people who disable cookies, use a cookie for setting the background-color.
    I proooobably should have been more specific lol.

    Essentially, what I'm trying to accomplish is a theme designer for vBulletin, but on a basic level (since I'm a basic programmer). I think a picture would describe it better than words:

    https://dl.dropbox.com/u/19599392/PU...RE/example.png

    The user submits their data, and then it gets placed inside a specific variable, while also altering the specified stylesheet in real-time using this. I need it to be in a variable mostly because I need some way of having the page print out all the changed variables so that the user can send that print out and the staff can go and make the changes in the ACP.
    Last edited by Flight; 09-07-2012 at 10:49 PM.

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 Posts
    generally speaking, it doesn't need to be a global variable (in fact it's preferable if it isn't), but if you are planning on doing something else with it, that's easy enough:

    Code:
    <body>
    <input type="text" id="col" value="red">
    <input type="button" value="click me!" onclick="changeBG()">
    <script type="text/javascript">
    var thecolor;
    function changeBG(){
    thecolor=document.getElementById("col").value;
    document.body.style.backgroundColor=thecolor;
    }
    </script>  
    </body>

  • Users who have thanked xelawho for this post:

    Flight (09-08-2012)

  • #5
    New to the CF scene
    Join Date
    Sep 2012
    Posts
    7
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thank you sooooo much, but is there a way to change it so that it changes the style rule in a linked stylesheet?
    Last edited by Flight; 09-08-2012 at 03:17 AM.

  • #6
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 Posts
    Can I just clarify for one second? Are you trying to write to the style sheet (so that it will be altered permanently and the next user to log into the page will see the changes made by the previous user)?

    Because as far as I am aware, that can't be done with javascript alone.

    If you just want to change the appearance of the page temporarily (as long as the user is logged in), then it can be done the way that the quirksmode link you gave describes, but as they also describe it is a very hit and miss operation, all to do with the fact that different browsers interpret the css rules object differently and there is no real transparency to the way that they do so (see the subhead "No Keys")

    For what you want to do there are simpler ways of changing the page's appearance by directly accessing the dom elements (as in my first example) - even with multiple elements you can access them with getElementsByTagName() and refine your search based on class names

    For kicks, here's what the function would look like using the quirksmode method (provided there is one style sheet and there is a rule for the body background and that rule is the last in the list):

    Code:
    function changeBG(){
    thecolor=document.getElementById("col").value;
    if (!document.styleSheets) {
    return;
    	}
    	var theRules = new Array();
    	if (document.styleSheets[0].cssRules) {
    		theRules = document.styleSheets[0].cssRules
    		} else if (document.styleSheets[0].rules) {
    		theRules = document.styleSheets[0].rules
    		} else {
    		return;
    		}
    	theRules[theRules.length-1].style.backgroundColor = thecolor;
    }
    but like I say this doesn't actually change the style sheet on the server - have a look at
    http://www.quirksmode.org/dom/test.css
    before and after clicking on the example link to see what I mean

    Disclaimer: I'm not 100% on any of the above - I've only ever used dom methods to change style attributes - so there may well be a way of doing what I vaguely think you might be trying to do.

    If the hurdle is getting the printout of changed variables, that is nothing really - once they are all set and the user has submitted their preferences you can print them out in any format you like.

  • #7
    New to the CF scene
    Join Date
    Sep 2012
    Posts
    7
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Alright so this is the 1st part of my stylesheet:

    Code:
    body
    {
    
    	background: #E1E1E2;
    
    	color: #000000;
    
    	font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
    
    	margin: 245px 10px 10px 10px;
    
    	padding: 0px;
    
    }
    This is the code I'm trying to use: (not worrying about the variables or input yet)

    Code:
    <script>
    function changeIt() {
    	if (!document.styleSheets) return;
    	var theRules = new Array();
    	if (document.styleSheets[1].cssRules)
    		theRules = document.styleSheets[1].cssRules
    	else if (document.styleSheets[1].rules)
    		theRules = document.styleSheets[1].rules
    	else return;
    	theRules[1].style.background = '#BDE2F9';
    }
    </script>
    Yet, when I try to activate it, I can't get it to work. I tried this in it's place and it worked fine:

    Code:
    <script>
    function changeIt(){
    document.body.style.backgroundColor="#BDE2F9";
    }
    </script>
    And my stylesheet declarations are like this: (ignore the /Ever Grande City Forums - Powered by vBulletin_files/, it's just because of the way I saved it, I'm running it on Dreamweaver)

    Code:
    <!-- CSS Stylesheet -->
    <style type="text/css" id="vbulletin_css">
    /**
    * vBulletin 3.8.7 CSS
    * Style: 'vBulletin Default'; Style ID: 1
    */
    @import url("./Ever Grande City Forums - Powered by vBulletin_files/style-3da1f2fa-00001.css");
    </style>
    <link rel="stylesheet" type="text/css" href="./Ever Grande City Forums - Powered by vBulletin_files/vbulletin_important.css">
    Is there something I'm doing wrong here? Do I have to use [theRules.length-#] instead of [#]?
    Last edited by Flight; 09-08-2012 at 06:25 PM.

  • #8
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 Posts
    this:
    Code:
    document.styleSheets[1]
    would imply that the style sheet that you are accessing is the second one that the page uses (remember that javscript indexes start at 0)

    that would be the first thing I would look at.

    similarly
    Code:
    theRules[1]
    refers to the second rule in your style sheet (text color in the example you have posted)... MAYBE... but read what quirksmode writes about the way different browsers interpret this... they use theRules[theRules.length-1] because they know that the rule they are trying to access is the last rule in the array, regardless. It may be a more consistent approach.

    Can I just ask from curiosity why you are going to all this trouble? If it were me, I would make a form that has a preview button, change the style properties by DOM methods and then have another button which submits that form directly to the server once the user is happy with their selections.

  • #9
    New to the CF scene
    Join Date
    Sep 2012
    Posts
    7
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by xelawho View Post
    Can I just ask from curiosity why you are going to all this trouble? If it were me, I would make a form that has a preview button, change the style properties by DOM methods and then have another button which submits that form directly to the server once the user is happy with their selections.
    Well basically, I'm trying to make a way for people to be able to experiment with skin customizations and see their results the way Administrators would be able to, since we're trying to host a competition to see who could come up with the best skin.

    And....um....I'm not sure what DOM methods are, nor do I know how to code php/asp to let our server accept submissions. I literally just know the basics of HTML/CSS and just started learning Javascript yesterday v__v

    Could you give an example of what you mean by DOM methods? That would be much appreciated.

  • #10
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 Posts
    this is the DOM method, by accessing the element's style property directly...
    Code:
    <script>
    function changeIt(){
    document.body.style.backgroundColor="#BDE2F9";
    }
    </script>

  • #11
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 Posts
    this is a brief example of what I would be doing, if I were you (of course, you might like to validate for appropriate inputs, but you'd have to do that anyway)...

    Code:
    <body> 
    <form name="myform">
    Background color:<input type="text" name="BGcol" value="red"/><br>
    Header background color:<input type="text" name="HBGcol" value="blue"/><br>
    Linked Paragraph text size:<input type="text" name="LpSize" value="24"/><br>
    Single Paragraph text size:<input type="text" name="spSize" value="18"/><br>
    <input type="button" value="see preview" onclick="preview()"/>
    Check box to approve changes and submit:<input type="checkbox" onchange="ableSub(this.checked)"/>
    <input type="submit" name="theSub" disabled=true/>
    </form>
    <div id="wrapper">
    <div id="header">This is the header</div>
    <p id="singpar">This paragraph has its own style</p>
    <p class="linkedpar">These paragraphs</p>
    <p class="linkedpar">are linked</p>
    <p class="linkedpar">by their class name</p>
    </div>
    <script type="text/javascript">
    function preview(){
    var frm=document.myform;
    document.getElementById("wrapper").style.backgroundColor=frm.BGcol.value;
    document.getElementById("header").style.backgroundColor=frm.HBGcol.value;
    var ps=document.getElementById("wrapper").getElementsByTagName("p");
    for (var i = 0; i < ps.length; i++) {
    if (ps[i].className=="linkedpar"){
    ps[i].style.fontSize=frm.LpSize.value+"px";
    		}
    	}
    document.getElementById("header").style.fontSize=frm.spSize.value+"px";	
    }
    
    function ableSub(state){
    document.myform.theSub.disabled=!state;
    }
    
    preview();
    </script> 
    </body>

  • #12
    New to the CF scene
    Join Date
    Sep 2012
    Posts
    7
    Thanks
    3
    Thanked 0 Times in 0 Posts
    But can that deal with things like classes and such? I was going to go that route until I found things like this:

    Code:
    a:hover, a:active, body_ahover
    
    {
    
    	color: #FF4400;
    
    }
    
    a.shade:active, a.shade:hover 
    
    { 
    
           color: #FF4400; 
    
           text-decoration: underline; 
    
    }
    And also, is there something wrong with this? I would imagine it working, but I must have my syntax messed up somewhere...

    Code:
    <script type="text/javascript">
    function changeBG( ident ){
            var p=ident;
            document.p.style.backgroundColor="#BDE2F9";
    }
    function resetBG( ident ){
    	var p=ident;
            document.p.style.backgroundColor="#E1E1E2";	
    }
    </script>
    
    ...<td bordercolor="#869BD1" width="55%" onmouseover="changeBG(body)" onmouseout="resetBG(body)">...
    It works when I get rid of the variable declaration and just replace p with body.
    Last edited by Flight; 09-08-2012 at 11:47 PM.

  • #13
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 Posts
    Quote Originally Posted by Flight View Post
    But can that deal with things like classes and such?
    yes - have a look at this bit:
    Code:
    var ps=document.getElementById("wrapper").getElementsByTagName("p");
    for (var i = 0; i < ps.length; i++) {
    if (ps[i].className=="linkedpar"){
    ps[i].style.fontSize=frm.LpSize.value+"px";
    		}
    	}
    the other code I suspect would work better like this:
    Code:
    onmouseover="changeBG('body')" //note apostrophes around 'body' to convert it to string
    
    function changeBG( ident ){
            document[ident].style.backgroundColor="#BDE2F9";
    }

  • Users who have thanked xelawho for this post:

    Flight (09-09-2012)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •