www.webdeveloper.com
Results 1 to 8 of 8

Thread: [RESOLVED] Why won't my dear input sliders cohere to javascript properly ?

  1. #1
    Join Date
    Jun 2012
    Posts
    13

    resolved [RESOLVED] Why won't my dear input sliders cohere to javascript properly ?

    I'm having difficulty assigning separate connections between the javascript and input range sliders. I realize there's no designation call to the sliders as needed. My knowledge is limited.

    Only one function works. Where and how do I add that class name into the javascript so that each slider operates according to it's getElementID?

    SEE Troubled Example ~ :
    http://codepen.io/anon/pen/yLKcu

    Thanks i'll unobtrusively await your feedback.
    abcdefghijklmnopqrstuvwxyz

  2. #2
    Join Date
    Jan 2005
    Posts
    369
    I assume that what you want is the top slider to be "coupled" to the top box, and the bottom one only to affect the bottom box?
    If so, the simplest starting point is to change the name of one or both of the functions, and to match that change in your HTML file - you cannot have two JS functions with the same name, (not in the same scope, at least).

    Ideally, since the two functions are so similar, you probably want to re-write one of them to accept a pointer to the appropriate DIV as an extra parameter, but I suspect that is one step too far right now.

  3. #3
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,366
    The problem is twofold, one your function currently only binds to one object and secondly, codepen is inducing problems as well and also note that most people (including myself) generally don't follow links.

    In future you should post your code wrapped in the appropriate forum tags, eg [CODE][/CODE] for JavaScript and other scripting codes.

    In answer to your problem

    Change your rotate to this
    Code:
    function rotate(o) {
      var target = document.getElementById(o.name).style;
      target.webkitTransform="rotate(" + o.value + "deg)";
      target.msTransform="rotate(" + o.value + "deg)";
      target.MozTransform="rotate(" + o.value + "deg)";
      target.OTransform="rotate(" + o.value + "deg)";
      target.transform="rotate(" + o.value + "deg)";
    }
    Change your HTML to this
    HTML Code:
    <div id="cats"></div>
    
    <input name="cats" type="range" min="-360" max="360" value="7" class='' onchange="rotate(this)" /><br>
    
    
    <div id="dogs"></div>
    
    <input name="dogs" type="range" min="-360" max="360" value="7" class='' onchange="rotate(this)" /><br>
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  4. #4
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,683
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    #cats {
      width:120px;
      height:100px;
      background-color:yellow;
      border:1px solid black;
    
    }
    
    
    #dogs {
      width:120px;
      height:100px;
      background-color:yellow;
      border:1px solid black;
    
    }
    /*]]>*/
    </style>
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function rotate(id,value) {
     var o=document.getElementById(id);
     if (o&&isFinite(value*1)){
      o.style.webkitTransform=o.style.msTransform=o.style.MozTransform=o.style.OTransform=o.style.transform="rotate(" + value + "deg)";
     }
    }
    
    /*]]>*/
    </script>
    
    </head>
    
    <body>
    <div id="cats"></div>
    
    <input type="range" min="-360" max="360" value="7" class='' onchange="rotate('cats',this.value)" /><br>
    
    
    <input type="button" name="" value="TEST" onclick="rotate('cats',50);" />
    
    
    
    <div id="dogs"></div>
    
    <input type="range" min="-360" max="360" value="7" class='' onchange="rotate('dogs',this.value)" /><br>
    </body>
    
    </html>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  5. #5
    Join Date
    Jun 2012
    Posts
    13

    Mercy Mercy ME!

    Thanks for the alternative working example. I see a single function that targets the element's id designated in the onchange="rotate('#ID',this.value)" of each button element instead of the javascript. This is efficient. GREAT!


    I'll share my webapp when I figure out temporary public image uploading.

    ----
    .




    Quote Originally Posted by vwphillips View Post
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    #cats {
      width:120px;
      height:100px;
      background-color:yellow;
      border:1px solid black;
    
    }
    
    
    #dogs {
      width:120px;
      height:100px;
      background-color:yellow;
      border:1px solid black;
    
    }
    /*]]>*/
    </style>
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function rotate(id,value) {
     var o=document.getElementById(id);
     if (o&&isFinite(value*1)){
      o.style.webkitTransform=o.style.msTransform=o.style.MozTransform=o.style.OTransform=o.style.transform="rotate(" + value + "deg)";
     }
    }
    
    /*]]>*/
    </script>
    
    </head>
    
    <body>
    <div id="cats"></div>
    
    <input type="range" min="-360" max="360" value="7" class='' onchange="rotate('cats',this.value)" /><br>
    
    
    <input type="button" name="" value="TEST" onclick="rotate('cats',50);" />
    
    
    
    <div id="dogs"></div>
    
    <input type="range" min="-360" max="360" value="7" class='' onchange="rotate('dogs',this.value)" /><br>
    </body>
    
    </html>

  6. #6
    Join Date
    Jun 2012
    Posts
    13
    Changing the function NAMEHERE(value) {
    and onchange="namehere(this.value)" of the sliders
    did the trick. So simple, theres a pattern to reading javascript
    I must figure out.

    THANKS!!!!!

  7. #7
    Join Date
    Jun 2012
    Posts
    13
    THANKS for the HELP!

    Quote Originally Posted by \\.\ View Post
    The problem is twofold, one your function currently only binds to one object and secondly, codepen is inducing problems as well and also note that most people (including myself) generally don't follow links.

    In future you should post your code wrapped in the appropriate forum tags, eg [CODE][/CODE] for JavaScript and other scripting codes.

    In answer to your problem

    Change your rotate to this
    Code:
    function rotate(o) {
      var target = document.getElementById(o.name).style;
      target.webkitTransform="rotate(" + o.value + "deg)";
      target.msTransform="rotate(" + o.value + "deg)";
      target.MozTransform="rotate(" + o.value + "deg)";
      target.OTransform="rotate(" + o.value + "deg)";
      target.transform="rotate(" + o.value + "deg)";
    }
    Change your HTML to this
    HTML Code:
    <div id="cats"></div>
    
    <input name="cats" type="range" min="-360" max="360" value="7" class='' onchange="rotate(this)" /><br>
    
    
    <div id="dogs"></div>
    
    <input name="dogs" type="range" min="-360" max="360" value="7" class='' onchange="rotate(this)" /><br>

  8. #8
    Join Date
    Jul 2014
    Posts
    6
    It is due to problem in code.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles