Duplicating A CSS/ Javascript Slider

Jun 13, 2007

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? Code:

View 4 Replies


ADVERTISEMENT

Duplicating Javascript To Work Twice On A Page

Sep 10, 2007

I'm trying to get a bit of javascript to work twice one a single page, what I'm trying to do is get a bunch of images scrolling, in 2 sets. If you may take a look here (The images within the "recent" and random "tabs").

What I did was duplicate the original code and edited the function names by adding "3" onto the end.


JavaScript Code:
gOverCWScroller = false;
 
function CWScroller(ulId, speed) {
 
    this.container = document.getElementById(ulId);
    this.container.Scroller = this;
    this.speed = speed;
 
    this.container.onmouseover = function(e) {
        gOverCWScroller = true;
    }
 
    this.container.onmouseout = function(e) {
        gOverCWScroller = false;
    }
 
    this.scroll = function() {
        if (gOverCWScroller == false) {
            var c = this.container.firstChild;
            var first = null;
            while (c) {
                if (c.tagName == 'LI') {
                    first = c;
                    break;
                }
                c = c.nextSibling;
            }
            var nodeSize = 78;  // Default
            var px = 0;
            nodeSize = first.clientWidth;
            if (first.style.marginLeft != '') {
                px = parseInt(first.style.marginLeft);
            }
            first.style.marginLeft = ( px - 1 ) + 'px'
            if ( parseInt(first.style.marginLeft) <= -(nodeSize) ) {
                first.style.marginLeft = &#390;px'
                this.container.removeChild(first);
                this.container.appendChild(first);
            }
        }
        setTimeout('document.getElementById('' + this.container.id + '').Scroller.scroll()', this.speed); 
    }
 
    setTimeout('document.getElementById('' + ulId + '').Scroller.scroll()', this.speed);
 
}


JavaScript Code:
gOverCWScroller3 = false;
 
function CWScroller3(ulId, speed) {
 
    this.container = document.getElementById(ulId);
    this.container.Scroller3 = this;
    this.speed = speed;
 
    this.container.onmouseover = function(e) {
        gOverCWScroller3 = true;
    }
 
    this.container.onmouseout = function(e) {
        gOverCWScroller3 = false;
    }
 
    this.scroll3 = function() {
        if (gOverCWScroller3 == false) {
            var c = this.container.firstChild;
            var first = null;
            while (c) {
                if (c.tagName == 'LI') {
                    first = c;
                    break;
                }
                c = c.nextSibling;
            }
            var nodeSize = 78;  // Default
            var px = 0;
            nodeSize = first.clientWidth;
            if (first.style.marginLeft != '') {
                px = parseInt(first.style.marginLeft);
            }
            first.style.marginLeft = ( px - 1 ) + 'px'
            if ( parseInt(first.style.marginLeft) <= -(nodeSize) ) {
                first.style.marginLeft = &#390;px'
                this.container.removeChild(first);
                this.container.appendChild(first);
            }
        }
        setTimeout('document.getElementById('' + this.container.id + '').Scroller3.scroll3()', this.speed);   
    }
 
    setTimeout('document.getElementById('' + ulId + '').Scroller3.scroll3()', this.speed);
 
}

This all works fine and dandy, however, I can only get one of the image sections to scroll. It's something to do with this:


HTML4Strict Code:
<script language="javascript" type="text/javascript">
CWScroller('scroller', 30, 'horizontal');
CWScroller3('scroller3', 30, 'horizontal');
</script>

If I leave out "CWScroller3('scroller3', 30, 'horizontal');" the recent section of images will scroll but the random images wont. If I put in "CWScroller3('scroller3', 30, 'horizontal');" it'll overwrite the the original recent section, and that won't scroll.

View 2 Replies View Related

JQuery :: Duplicating A Flash Gallery

Dec 8, 2010

I was just hoping that someone might be able to point me in the right direction of what to use? Or if it is even possible - I have seen many galleries but not one quite liek this - but surely it must be doable?

View 1 Replies View Related

Duplicating Sets Of Triple Drop Down Menu?

Jul 11, 2011

I need another few more sets of the triple drop down menu same as the below script... (Scenario: creating like a online shopping order form, where customers can have multiple orders.)

<script type="text/javascript">
/*
Triple Combo Script Credit

[code].....

View 14 Replies View Related

JQuery :: Form Wizard Not Working After Duplicating Steps?

Sep 2, 2010

I had a problem with the jquery formwizard plugin, when trying to add new steps by this code creates error in a sense that I can't click next, because the validate plugin validates the next form, even though the user didn't go to the next step yet.

Then all the other ajax drop down forms won't function properly in the new duplicated steps eventhough I used the .live() function What's wrong with my code? About form wizard, it divides your one form into alot of parts using span id as the name of the separate page and the class = step or step_submit as next step or submit page

<div id="frmWrapper">
<form id="signupForm" method="post" action="" class="bbq">
<div id="fieldWrapper">
<span class="stepinfo">Registration</span><br />
<span class="step" id="personal">

[Code]...

View 1 Replies View Related

Duplicating And Adding Show More Link Inside Hidden DIVs

Sep 6, 2009

I am trying to create a tell a friend script and add the ability for the users to send the email to more recipients than what is hard coded into the form. I have come up with this so far but is wont allow me to let the user 'show more email fields' a second time. I dont know how to write the javascript to allow this? When I tried duplicating the divs and adding a 'show more' link inside the first hidden div it just showed both sets when I clicked.

PHP Code:
<html><head><title>Example</title>
<script type="text/javascript">
function showDivs(){
var arr = document.getElementsByTagName('div')
for(var i=0; i<arr.length;i++){
arr[i].style.display = (arr[i].style.display == 'none')? 'block':'none';
}}
</script> .....

View 3 Replies View Related

JQuery :: UI Slider - Form With Two Slider On It So The User Can Select An Amount

Dec 16, 2011

I have a form with two slider on it so the user can select an amount. The slider works fine and passes the values to email ok etc. but when the page is loaded there is "[object Object]" in box of the second slider. I can't find the problem with the code as it is the same for the first slider.

Here is a link to the form: [url]

<script>

View 1 Replies View Related

JQuery :: Slider - Making Slider Call Function?

Jun 27, 2011

I got 2 sliders in a List:

<li data-role="fieldcontain">
<label for="slider_year"><big>Jahr auswählen</big></label>
<input type="range" name="slider_year" id="slider_year" value="2000" min="2000" max="2011" />

[Code]....

Both alerts wont get called...

I know this should be very easy, but i dont get it.

View 1 Replies View Related

JQuery :: Slider Toggle - Slider Div To Be Visible If Js Was Disabled

Oct 12, 2009

1.I found a Slider Toggle thats demonstrated here [URL] and it seems to work fine but only if the link is placed above the div that slides down.. im trying to make the div slide down from above my menu and i want 1 of the links on my menu to toggle the slider. how do i get it work to where I can place the link below the sliding div? 2. the script originally used .fader{opacity:0;display:none;} but I wanted the slider div to be visible if javascript was disabled so I added

jQuery(".fader").hide(); so its now
<script type="text/javascript">
$(document).ready(function() {
jQuery(".fader").hide();
$(".fadeNext").click(function(){
$(this).next().fadeSliderToggle()
[Code]...

View 4 Replies View Related

JQuery :: Get The Slider Values On Mouseover In Slider?

Feb 16, 2011

i am using jquery slider.i need to display the values on mouseover of the slider handle

View 4 Replies View Related

JQuery :: [slider] How To Change Slider Color

Aug 11, 2010

I have to change the slider color depending on its value, but I didn't manage to do it, I changed the attribute "background" of the class "ui-slider-range" this way : $("#slider.ui-slider-range").css("background","red"); Since I have three states (red, orange and green) I have to use three sliders, each one has one color, all hidden at the beginning then I show the appropriate slider when the value changes.

View 1 Replies View Related

Jquery :: Slider Disable Click On Slider

Nov 2, 2010

I've got the following problem: I have a Jquery slider and I want to disable the click on the slider. I only want to change the slider when I click and drag the pointer. Standard you can also click everywhere on the slider and the pointer will go to that point. That I don't want. .

Code HTML4Strict:
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
[Code]....

View 4 Replies View Related

Jquery :: Slider (transform Selectbox Into Slider)

Jun 9, 2011

I have a php code that creates a select combo box depending on some values stored in a database and I am trying to make it look nicer I found the jquery slider I found this but it does not work in the environment I am working (joomla) well, it does but it disappears as soon as I move the slider. so if I had

Code HTML4Strict:
<select id="someId" >
<option>1</option>
<option>1</option>
<option>1</option>
</select>

is there an easy way to transform that into a slider?

View 1 Replies View Related

JQuery :: Use Next() For A Slider With Last Div?

Sep 6, 2010

I want to write a small script for my slider for my website. My HTML part looks like:

<img src="images/leftarrow.png" id="leftarrow" alt="leftarrow"/>
<div class="slider">
<div class="active">

[code]....

View 2 Replies View Related

Photo Slider II

Dec 22, 2006

How can I have it keep the photos in their original proportions. All photos are under 640 x 480 though not all the same size. When they are viewed in the slider the are streteched to the 640 x 480 regardless of their original size.

View 2 Replies View Related

Slider Go To <div> Instead Of Image?

Sep 20, 2011

I'm using a javascript image slider right now, but the first image is the only one, and I want the slider to move to a new <div> instead of a new image. Here is the code I am using:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

[code]....

View 1 Replies View Related

Possible To Remove Slider?

Nov 7, 2011

I have code for moving boxes but it have slider to control speed and tilt of boxes.

I want to remove these sliders without stopping auto move effect.[code]...

View 4 Replies View Related

JQuery :: 2 Slider, Max Of Second Is Actual Value Of The First?

Oct 24, 2011

I am new to jquery and i will need a script for 2 jquery Slider, where the Max value of the second slider is the actual of the first slider. If the first slider will be changed the max should be changed too.

[Code]...

View 1 Replies View Related

JQuery :: Changing URL With Slider

Aug 28, 2009

is there a way (using a specific plugin or doing some hacking) to change the page URL when I change the viewed panel within a slider? Right now I'm using tabSwitch (URL...) but I can change it if a plugin lets me do that.

View 2 Replies View Related

JQuery :: Slider Not Sliding In IE9?

Apr 8, 2011

I have use the following Jquery plugin selectToUISlider on my web site which has worked fine in IE8,FF, Chrome however when viwing the same site in IE9 the slider doesn't slide when using the mouse to drag the slider. I can still click on each value and the slider will move/jump to the required value. I've debugged the javascript in both FF and IE9 and I can see that in IE9 the slide event doesn't get fired, where in FF it does.

unfortunatly I don't have external web access on a machine with IE9 to try the slider demo pages out to ensure that the demos work in IE9.

View 4 Replies View Related

JQuery :: Slider That Goes Off The Page?

Jan 6, 2011

Is there a plug in that makes a slider that goes off the page like this: [url]

View 1 Replies View Related

DHTML Slider Widget

Aug 5, 2002

Using ViewLink behaviors (IE5.5+) and XBL bindings (Gecko-only - NS6+, Mozilla, etc), I basically created an encapsuled widget. That means you can infinitely reuse it with no conflicts.

To implement on a page, you'll need to add this attribute to the <html> tag to make IE happy:

xmlns:rdhtml="http://rdhtml.resource-locator.com/xmlns"

As well as add another thing to keep IE happy - a proprietary import processing instruction, before the <head> tag:

<?import namespace="rdhtml" implementation="slider.htc"?>

And define this style somewhere and apply it to the page:

rdhtml:slider {
-moz-binding: url(slider.xml#slider);
-moz-user-focus: normal;
-moz-user-input: enabled;
display: block;
padding: 0;
margin: 0;
position: relative;
}

After all of that, to add as many as you want to a page:

<rdhtml:slider width="width in pixels - defaults to 150 if not present" onvaluechange="event to fire when the gripper is moved"></rdhtml:slider>

If I feel the need, I will also implement a "value" attribute which sets the default value of the slider.

Speaking of which, the value property of the element is 0 - 100, reflecting the percentage of the slid amount. And is read/write. :)

(In Mozilla, I implemented a read/write width property as well, and intend to eventually add that in the IE implementation)

You can manipulate the value and position of the gripper by dragging the gripper, clicking on the track (really an hr), or focusing it, and using arrow keys, page up/down, or home/end.

To customize the look, slider.css is applied to every slider.

Required files are:
slider.css (styles the sliders)
slider.xml (XBL binding for Gecko)
slider.htc (ViewLink behavior for IE5.5+)

I've only had it tested in Win2k, XP Home, XP Pro in IE6, and in Win2k and WinXP Pro in a 1.1 trunk Mozilla.

I've been told that it is "sluggish" in IE6, but on my pc it is very smooth. Is it just me where it performs satisfactorily in IE6?

And I'm aware of a weird bug in my implemention of it in Mozilla where clicking on a slider bar sometimes moves the last focused slider instead...

If an IE5 user could confirm that it doesn't work for them, that would be great, and I still need someone in IE5.5 to tell me it works....
Someone with a 1.0 trunk of Mozilla would be much appreciated too. :)

Any ideas for additions would be cool too, though I'm not sure what other attributes I could add that would be useful?

View 6 Replies View Related

Show And Hide The Slider?

May 9, 2009

I need to show and hide functionality through javascript , how can I achieve this.If I click on a dash link then show particular section and if I click again then it should be hide.

View 2 Replies View Related

Jquery :: Add Xml File To Slider?

Aug 11, 2010

Add xml file to jquery slider. I want to show image from xml file.

For example I have Nivo slider because they have a good transition effect.

I'm a noob in Javascript and because I here.And xml file should look like this code...

View 1 Replies View Related

Lightbox Affecting JS Slider

Apr 26, 2010

I was just wondering why the use of lightbox is affecting the javascript slider.

Take a look at this page:

[URL]

The images down the right are clickable(lightbox)

Now the header should be a JS slider like on this page: [URL]

Notice the slider works on this page.

View 1 Replies View Related

Trying To Get Content Slider On Top Of Page?

Jun 17, 2010

I'm trying to build a javascript content slider. It slides content like that of techcrunch site on the top of the page. It wouldn't have to be a feed, but I'd need to be able to enter the links manually each time I edit the code. I'm trying to get it, so I can get rid of tables and be able to post many different pages with the ease of just entering the photo url, link url, and content into it for a short message. I know html and I'm decent at css, but I'm bad with javascript.

View 10 Replies View Related







Copyrights 2005-15 www.BigResource.com, All rights reserved