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 RepliesI'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 = Ɔ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 = Ɔ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.
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 RelatedI 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].....
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]...
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> .....
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>
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.
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]...
i am using jquery slider.i need to display the values on mouseover of the slider handle
View 4 Replies View RelatedI 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 RelatedI'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]....
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?
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]....
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 RelatedI'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]....
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]...
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]...
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 RelatedI 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.
Is there a plug in that makes a slider that goes off the page like this: [url]
View 1 Replies View RelatedUsing 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?
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 RelatedAdd 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...
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.
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