SitePoint Sponsor |
|
User Tag List
Results 1 to 5 of 5
-
Jun 13, 2007, 00:38 #1
- 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
SpikeMike Swiffin - Community Team Advisor
Only a woman can read between the lines of a one word answer.....
-
Jun 13, 2007, 12:45 #2
- 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.....
-
Jun 14, 2007, 00:26 #3
- 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.....
-
Jun 14, 2007, 18:11 #4
- Join Date
- Mar 2005
- Location
- USA
- Posts
- 5,482
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Is FleXcroll, Flexible and Accessible Custom Scroll Bars what you want?
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.
-
Jun 15, 2007, 01:04 #5
- 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 itMike Swiffin - Community Team Advisor
Only a woman can read between the lines of a one word answer.....
Bookmarks