SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,807
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)

    Duplicating a CSS/ Javascript Slider

    Morning all,

    I have a nifty little slider hacked and slashed in a frankenstein sort of fashion that does exactly what I want..... BUT..... I need 4 on a page and the scripts just arent playing ball

    The problem I have is that on it's own my slider is perfectly happy sliding up and down and firing values off via an AJAX call, but how can I logically duplicate the slider and relevant code so that I can have more than 1?

    Here is some code:

    Javascript:
    Code JavaScript:
    /* slider functions - contrast */
    var setPct = 100; 
    var curPct = null; 
    var activeSlide = null; 
    var slideLeft = null; 
     
    document.onmousemove = doMove; 
     
    function doMove(e) { 
    if (!activeSlide) 
    return; 
     
    var e = (e)? e : ((event)? event : null); 
     
    if (e.pageX) { 
    myX = e.pageX; 
    } else if (e.clientX) { 
    myX = e.clientX; 
    } 
     
    var myLeft = (myX - slideLeft); 
    curPct = parseInt(myLeft/2); 
    if (curPct > 100) 
    return hideStuff(activeSlide); 
     
    pctShow(curPct); 
     
    var slider = document.getElementById(activeSlide); 
    	slider.style.left = myLeft + "px"; 
    } 
     
    function showStuff(myID, theID) { 
    	activeSlide = theID; 
     
    	var myNode = document.getElementById(myID); 
    	slideLeft = findX(myNode); 
     
    var slider = document.getElementById(theID); 
    	slider.style.display = "block"; 
    } 
     
    function hideStuff(theID) { 
    	activeSlide = null; 
    	slideLeft = null; 
    	pctShow(setPct); 
     
    	var slider = document.getElementById(theID); 
    	slider.style.display = "none"; 
    } 
     
    function pctShow(theNum) { 
    	var label = document.getElementById("pctLabel"); 
    	label.innerHTML = theNum + "%"; 
    } 
     
    function pctSet(myID, theID) { 
    	var theNode = document.getElementById(myID); 
    	var myWidth = theNode.offsetWidth; 
    	var myLeft = parseInt(myWidth * (curPct/100)); 
     
    	var setNode = document.getElementById(theID); 
    	setNode.style.display = "block"; 
    	setNode.style.left = myLeft +"px"; 
    	setPct = curPct; 
    } 
     
    function findX(obj) { 
    	var curleft = 0; 
    	while (obj.offsetParent) { 
    	curleft += obj.offsetLeft 
    	obj = obj.offsetParent; 
    	} 
     
    	return curleft; 
    }

    and here is the slider:
    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
    <html> 
    <head> 
    <style> 
    * { 
    	color: #333333; 
    	font-family: Arial, Verdana, Helvetica, sans-serif; 
    	font-size: 12px; 
    	font-weight: normal; 
    	font-variant: normal; 
    	letter-spacing: normal; 
    	text-decoration: none; 
    	margin: 0px; 
    	padding: 0px; 
    } 
     
    body { 
    	margin: 25px; 
    } 
     
    .outerSlide { 
    	width: 200px; 
    	_width: 202px; 
    	height: 10px; 
    	_height: 12px; 
    	line-height: 10px; 
    	font-size: 1px; 
    	background: url('slider_bg.png') repeat-x center left; 
    	float: left; 
    } 
     
    .innerSlide { 
    	width: 100%; 
    	height: 100%; 
    	font-size: 1px; 
    	background-color: transparent; 
    	position: relative; 
    	left: 0px; 
    	top: 0px; 
    } 
     
    .slideBar { 
    	display: none; 
    	width: 5px;
    	border-left: 1px groove #909090; 
    	border-bottom: 1px solid #909090; 
    	height: 10px; 
    	line-height: 10px; 
    	font-size: 1px; 
    	background-color: #a4a4a4; 
    	position: relative; 
    	left: 0px; 
    	top: 0px; 
    	_margin-left: -2px; 
    } 
     
    #slideSet { 
    	background:  #ff00ff;
    	width: 2px;
    	margin-top: -10px; 
    } 
    #slideSet_g { 
    	background:  #ff00ff;
    	width: 2px;
    	margin-top: -10px; 
    }
    </style> 
    <script type="text/javascript" src="js/ajaxFunction.js"></script> 
    </head> 
    <body> 
    <div id="slideWrap" class="outerSlide" onmouseout="hideStuff('slider')"> 
    <div id="slideMain" class="innerSlide" onmouseover="showStuff(this.id, 'slider')" onmouseout="hideStuff('slider')" onclick="pctSet(this.id, 'slideSet'); getText();"> 
    <div class="slideBar" id="slider"></div> 
    </div> 
    <div class="slideBar" id="slideSet"></div> 
    </div> 
    <div id="pctLabel">100%</div>
    <br />GGGGG<br />
     
    <div id="slideWrap_g" class="outerSlide" onmouseout="hideStuff('slider_g')"> 
    <div id="slideMain_g" class="innerSlide" onmouseover="showStuff(this.id, 'slider_g')" onmouseout="hideStuff('slider_g')" onclick="pctSet(this.id, 'slideSet_g'); getText_g();"> 
    <div class="slideBar" id="slider_g"></div> 
    </div> 
    <div class="slideBar" id="slideSet_g"></div> 
    </div> 
    <div id="pctLabel_g">100%</div>
     
     
    <div id="displayImg">img</div>
    </body>
    </html>

    Sorry for the length of it but if anyone else is looking for something similar they can get it all

    Cheers folks
    Spike
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  2. #2
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,807
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    I think I just saw Elvis in here
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  3. #3
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,807
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Ladies and Gentlemen, Elvis has left the building......





    anyone?!
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  4. #4
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  5. #5
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,807
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi Kravvitz and thanks for replying

    Unfortunately no, the FleXroll is the scroll bar adaptation for div elements etc. What I have is a slider input control for selecting a value from 1 - 100 on a sliding scale.
    similar to http://webfx.eae.net/dhtml/slider/slider.html but not that one as I didnt get on with it
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....


Bookmarks

Posting Permissions

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