Learn VBA & Macros in 1 Week!

JavaScript - Sliders!!!

Full Excel VBA Course - Beginner to Expert

Sliders!!!	View Content

Ok so the following code is basically the style of form I would like to have on my website. I was wondering however how you make the options on a sliding scale. So all the visitor has to do is slide the button along a scale to get their answer. I would basically like something found on stylepilot.com on their dna generator or like something on wonga.com (stupid adverts!!!!). Any help or pointing in the right direction would be great.

<?php

print_r($_POST);

?>

<html xmlns="http://www.w3.org/1999/xhtml">

<head></head>

<body>

<script type="text/javascript">

function setOptions(chosen){

var selbox = document.formName.table;
selbox.options.length = 0;

if (chosen == " ") {
selbox.options[selbox.options.length] = new Option('No database selected',' ');
}
if (chosen == "1") {
selbox.options[selbox.options.length] = new Option('first choice - option one','oneone');
selbox.options[selbox.options.length] = new Option('first choice - option two','onetwo');
}
if (chosen == "2") {
selbox.options[selbox.options.length] = new Option('second choice - option one','twoone');
selbox.options[selbox.options.length] = new Option('second choice - option two','twotwo');
selbox.options[selbox.options.length] = new Option('second choice - option three','twothree');
selbox.options[selbox.options.length] = new Option('second choice - option four','twofour');
}
if (chosen == "3") {
selbox.options[selbox.options.length] = new Option('third choice - option one','threeone');
selbox.options[selbox.options.length] = new Option('third choice - option two','threetwo');
}
}

</script>

<form name="formName" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">

<select name="optone" size="1" onchange="setOptions(document.formName.optone.options[document.formName.optone.selectedIndex].value);">
<option value=" " selected="selected"></option>
<option value="1">First Choice</option>
<option value="2">Second Choice</option>
<option value="3">Third Choice</option>
</select>

<select name="table" size="1">
<option value=" " selected="selected">No database selected</option>
</select>

<input type="submit" />

</form>

</body>

</html>

Full Excel VBA Course - Beginner to Expert

Anyone Know Of Any Mobile Sliders?

Similar Tutorials

View Content

Similiar to that of CBS.com or AOL.com when you visit them on the iphone. Something that responds to the swipe gesture within the iphone.

I've been searching google, but mobile web resourses are far and few. Also tried to check out their source and it only shows it as one long line of text, not ideal for trying to read code.

Multiple Image Sliders: Almost There!

Similar Tutorials

View Content

Good morning all.

I am looking to have multiple image sliders (javascript / jquery) on one page.
I have built the framework and have gotten one slider to work.

However, when adding in another slider, I have only confused the situation.
Below is the html and css. Let me know where I've gone wrong here.

Will I need another set of css classes for each slider?
How do I call a second slider?

Thanks!

The html/javascript

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link media="screen" type="text/css" link rel="stylesheet" href="style.css" />
<link media="screen" type="text/css" link rel="stylesheet" href="stylework.css" />
<link media="screen" link rel="stylesheet" type="text/css" href="wt-scroller.css" />
<link media="screen" link rel="stylesheet" type="text/css" href="wt-lightbox.css" />
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.10.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.wt-lightbox.min.js"></script>
<script type="text/javascript" src="js/jquery.wt-scroller.min.js"></script>


<title>idigify</title>
</head>

<body>
<div class="main">
<div class="container">
<div class="header">
<ul class="nav">
<ul>
<div class="allbuttons">
	<div class="navabout"><li>about</li></div>
    <div class="navwork"><li>work</li></div>
    <div class="navcontact"><li>contact</li></div>
</div><!--end of all buttons-->
</ul><!--end of nav list-->
</ul><!--end of nav-->
</div>
<!--end of header-->
<div class="headeraboutme">the work</div>
<div class="sitemainfeature">
	<div class="aboutme_text">
    	<h2>Just for Fun</h2>
    	<div class="workslider_justforfun">
        	<div class="workslider_justforfun_container">
            	<div class="wt-scroller">
                	<div class="prev-btn"></div>
            			<div class="slides">
                    		<ul>
                    			<li>
                        		<a href="images/triworks_abstract27.jpg" rel="scroller">
                        		<img src="images/thumbs/triworks_abstract27.jpg"/>                        </a>
                        		<p> this is just a test.this is just a test.this is just a test.</p>
                        		</li>
                        		<li>
                        		<a href="images/triworks_abstract27.jpg" rel="scroller">
                        		<img src="images/thumbs/triworks_abstract27.jpg"/>                        </a>
                        		<p> this is just a test.this is just a test.this is just a test.</p>
                        		</li>
                           	 	<li>
                        		<a href="images/triworks_abstract27.jpg" rel="scroller">
                        		<img src="images/thumbs/triworks_abstract27.jpg"/>                        </a>
                        		<p> this is just a test.this is just a test.this is just a test.</p>
                        		</li>
                    		</ul>
                    	</div><!--end of slider-->
                    <div class="next-btn"></div>
                    	<div class="lower-panel">
                   			 <div class="scroll-bar">
                             	<div class="thumb">
                                </div><!--end of thumb-->
                    		 </div><!--end of scroll-bar-->
                    	</div><!--end of lower panel-->
                </div><!--end of wt scroller just for fun-->
        	</div><!--end of just for fun container-->
   	 	</div><!--end of workslider-->
    	<h2>Ads/Advertising</h2>
   		<div class="workslider_justforfun">
			<div class="workslider_justforfun_container">
            	<div class="wt-scroller2">
                	<div class="prev-btn"></div>
            			<div class="slides">
                    		<ul>
                    			<li>
                        		<a href="images/triworks_abstract27.jpg" rel="scroller">
                        		<img src="images/thumbs/triworks_abstract27.jpg"/>                        </a>
                        		<p> this is just a test.this is just a test.this is just a test.</p>
                        		</li>
                        		<li>
                        		<a href="images/triworks_abstract27.jpg" rel="scroller">
                        		<img src="images/thumbs/triworks_abstract27.jpg"/>                        </a>
                        		<p> this is just a test.this is just a test.this is just a test.</p>
                        		</li>
                           	 	<li>
                        		<a href="images/triworks_abstract27.jpg" rel="scroller">
                        		<img src="images/thumbs/triworks_abstract27.jpg"/>                        </a>
                        		<p> this is just a test.this is just a test.this is just a test.</p>
                        		</li>
                    		</ul>
                    	</div><!--end of slider-->
                    <div class="next-btn"></div>
                    	<div class="lower-panel">
                   			 <div class="scroll-bar">
                             	<div class="thumb">
                                </div><!--end of thumb-->
                    		 </div><!--end of scroll-bar-->
                    	</div><!--end of lower panel-->
                </div><!--end of wt scroller just for fun-->
        	</div><!--end of just for fun container-->
    	</div><!--end of workslider-->
        <h2>Logos</h2>
   		<div class="workslider_justforfun">
			<div class="workslider_justforfun_container">
            	<div class="wt-scroller">
                	<div class="prev-btn"></div>
            			<div class="slides">
                    		<ul>
                    			<li>
                        		<a href="images/triworks_abstract27.jpg" rel="scroller">
                        		<img src="images/thumbs/triworks_abstract27.jpg"/>                        </a>
                        		<p> this is just a test.this is just a test.this is just a test.</p>
                        		</li>
                        		<li>
                        		<a href="images/triworks_abstract27.jpg" rel="scroller">
                        		<img src="images/thumbs/triworks_abstract27.jpg"/>                        </a>
                        		<p> this is just a test.this is just a test.this is just a test.</p>
                        		</li>
                           	 	<li>
                        		<a href="images/triworks_abstract27.jpg" rel="scroller">
                        		<img src="images/thumbs/triworks_abstract27.jpg"/>                        </a>
                        		<p> this is just a test.this is just a test.this is just a test.</p>
                        		</li>
                    		</ul>
                    	</div><!--end of slider-->
                    <div class="next-btn"></div>
                    	<div class="lower-panel">
                   			 <div class="scroll-bar">
                             	<div class="thumb">
                                </div><!--end of thumb-->
                    		 </div><!--end of scroll-bar-->
                    	</div><!--end of lower panel-->
                </div><!--end of wt scroller just for fun-->
        	</div><!--end of just for fun container-->
    	</div><!--end of workslider-->
        <h2>Billboards</h2>
    	<div class="workslider_billboard">
    	</div><!--end of workslider-->
    	<h2>Business Cards</h2>
    	<div class="workslider_businesscard">
    	</div><!--end of workslider-->
        <h2>Resumes</h2>
    	<div class="workslider_resume">
    	</div><!--end of workslider-->
        <h2>Sales Pieces</h2>
    	<div class="workslider_salespiece">
    	</div><!--end of workslider-->
    </div><!--end of about me text-->
</div><!--end of site main feature-->
<div class="worksplash"></div><!--end of background splash-->
</div><!--end of container-->
</div><!--end of main-->
<div class="footercontainer">
<ul class="nav">
<ul>
	<div class="navabout"><li>about</li></div>
    <div class="navwork"><li>work</li></div>
    <div class="navcontact"><li>contact</li></div>
</ul><!--end of nav list-->
</ul><!--end of nav-->
</div>
<!--end of footer container-->
<script type="text/javascript">
$(document).ready(	
    function() {
    	//initialize scroller
        $(".container").wtScroller({
            num_display:3,
            slide_width:240,
            slide_height:180,
            slide_margin:1,
            button_width:25,
            ctrl_height:15,
            margin:1,    
            auto_scroll:false,
            delay:4000,
            scroll_speed:1000,
            easing:"",
            auto_scale:true,
            move_one:false,
            ctrl_type:"scrollbar",
            display_buttons:true,
            display_caption:true,
            mouseover_caption:false,
            caption_align:"bottom",
            caption_position:"inside",                    
            cont_nav:true,
            shuffle:false
        });
		
        //initialize lightbox for scroller	
        $("a[rel='scroller']").wtLightBox({
            rotate:true,
            delay:4000,
            transition_speed:600,
            display_number:true,
            display_dbuttons:true,
            display_timer:true,
            display_caption:true,
            caption_align:"bottom",
            cont_nav:true,
            auto_fit:true,
            easing:""
        });
    }
);
</script>
</body>
</html>

the css
Code:

.wt-scroller{
position:relative;	
display:block;
font-family:Arial,Helvetica,sans-serif;
background-color:#CCCCCC;
width:720px;
height:180px;
}

.wt-scroller .slides{
position:relative;
width:700px;
height:200px;
float:left;
overflow:hidden;
z-index:1;
}

.wt-scroller .slides ul{
list-style:none;
position:relative;
width:999999px;
margin:0px;
padding:0px;
z-index:0;
overflow:hidden;
}

.wt-scroller .slides ul li{
position:relative;
display:block;
float:left;
overflow:hidden;
width:240px;
height:200px;
margin-left:5px;
}

.wt-scroller .slides ul li img{
position:absolute;
top:0;
left:0;
z-index:0;
border:0;
}

.wt-scroller .slides ul li p{
position:absolute;
top:0;
left:0;
z-index:1;
color:#FFF;
font-size:12px;	
width:200px;
padding:5px;
margin:0;
visibility:hidden;
}

.wt-scroller .outside{
background-color:#222;
}

.wt-scroller .inside{
-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#BF000000,endColorstr=#BF000000);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#BF000000,endColorstr=#BF000000);
background-color:rgba(0,0,0,0.75);
}

.wt-scroller .prev-btn{
float:left;
position:relative;
width:20px;
height:170px;	
cursor:pointer;
}

.wt-scroller .next-btn{
float:right;
position:relative;
width:20px;
height:170px;	
cursor:pointer;
}
.wt-scroller .prev-btn{
background:url(assets/prev.png) center no-repeat;
}
.wt-scroller .next-btn{
background:url(assets/next.png) center no-repeat;
}
.wt-scroller .lower-panel{
display:block;
position:relative;
clear:both;
text-align:center;
font-size:0;
}
.wt-scroller .scroll-bar{
position:relative;
background-color:#999;
background:-moz-linear-gradient(top, #999 0%, #666 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#999), color-stop(100%,#666));
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#999999', endColorstr='#666666', GradientType=0);
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
width:100%;
height:5px;
cursor:pointer;
overflow:hidden;
}
.wt-scroller .thumb{
position:absolute;
top:0;
left:0;
width:100px;
height:5px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
background-color:#FFF;
background:-moz-linear-gradient(top, #FFF 0%, #CCC 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFF), color-stop(100%,#CCC));
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#CCCCCC', GradientType=0);
}

.wt-scroller .index,
.wt-scroller .index-hl{
position:relative;
display:inline-block;
width:7px;
height:7px;
margin:0 4px;
background-image:url(assets/circle.png);
background-repeat:no-repeat;
}
.wt-scroller .index{
background-position:0 0;
cursor:pointer;
}
.wt-scroller .index-hl{
background-position:-7px 0;
cursor:default;
}


/*start of scroller2 */
.wt-scroller2{
position:relative;	
display:block;
font-family:Arial,Helvetica,sans-serif;
background-color:#CCCCCC;
width:720px;
height:180px;
}

.wt-scroller2 .slides{
position:relative;
width:700px;
height:200px;
float:left;
overflow:hidden;
z-index:1;
}

.wt-scroller2 .slides ul{
list-style:none;
position:relative;
width:999999px;
margin:0px;
padding:0px;
z-index:0;
overflow:hidden;
}

.wt-scroller2 .slides ul li{
position:relative;
display:block;
float:left;
overflow:hidden;
width:240px;
height:200px;
margin-left:5px;
}

.wt-scroller2 .slides ul li img{
position:absolute;
top:0;
left:0;
z-index:0;
border:0;
}

.wt-scroller2 .slides ul li p{
position:absolute;
top:0;
left:0;
z-index:1;
color:#FFF;
font-size:12px;	
width:200px;
padding:5px;
margin:0;
visibility:hidden;
}

.wt-scroller2 .outside{
background-color:#222;
}

.wt-scroller2 .inside{
-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#BF000000,endColorstr=#BF000000);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#BF000000,endColorstr=#BF000000);
background-color:rgba(0,0,0,0.75);
}

.wt-scroller2 .prev-btn{
float:left;
position:relative;
width:20px;
height:170px;	
cursor:pointer;
}

.wt-scroller2 .next-btn{
float:right;
position:relative;
width:20px;
height:170px;	
cursor:pointer;
}
.wt-scroller2 .prev-btn{
background:url(assets/prev.png) center no-repeat;
}
.wt-scroller .next-btn{
background:url(assets/next.png) center no-repeat;
}
.wt-scroller2 .lower-panel{
display:block;
position:relative;
clear:both;
text-align:center;
font-size:0;
}
.wt-scroller2 .scroll-bar{
position:relative;
background-color:#999;
background:-moz-linear-gradient(top, #999 0%, #666 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#999), color-stop(100%,#666));
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#999999', endColorstr='#666666', GradientType=0);
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
width:100%;
height:5px;
cursor:pointer;
overflow:hidden;
}
.wt-scroller2 .thumb{
position:absolute;
top:0;
left:0;
width:100px;
height:5px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
background-color:#FFF;
background:-moz-linear-gradient(top, #FFF 0%, #CCC 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFF), color-stop(100%,#CCC));
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#CCCCCC', GradientType=0);
}

.wt-scroller2 .index,
.wt-scroller2 .index-hl{
position:relative;
display:inline-block;
width:7px;
height:7px;
margin:0 4px;
background-image:url(assets/circle.png);
background-repeat:no-repeat;
}
.wt-scroller2 .index{
background-position:0 0;
cursor:pointer;
}
.wt-scroller2 .index-hl{
background-position:-7px 0;
cursor:default;
}

/*end of scroller2 */

2 Sliders Conflicting On The Same Page

Similar Tutorials

View Content

Hi there,

Having a problem on a clients website incorporating two js sliders in the same page. The scripts before editing were the TinySlider and TinyFader from http://forum.leigeber.com/

The parsers in Internet Explorer, Firefox and Chrome cannot seem to differentiate between the two scripts, although I tried altering various defined names for script control it didn't make much difference.
The problems are the controls of the first slider operate the second and only the second slider works. Also, I'm getting validation errors (document type does not allow element "li" here; missing one of "ul", "ol" start-tag) where the showroom (second) script content lies. Not sure if this is related or not but either way if I try to fix it the only working slider is broken.

Here is the testing url.
http://www . bellsdomestics.co.uk/testing/index . html

Can anyone point me in the right direction?

Thanks.

Change Navigationpanels On Two Different Sliders In Same Page

Similar Tutorials

View Content

Hi there.

I've been working on how to use the AnythingSlider (Github)
And I have a problem, when I want to use 2 or more sliders on the same page.
I want to change the green navigationpanels, and they should be different on each slider:

When I have one slider I use this:
Code:

<script type="text/javascript">

var slider1 = ['april', 'maj', 'juni', 'Quote #2', 'Image #2'];
function formatText(index, panel) {
	return slider1[index - 1] || index;
}
 

</script>

But when I have more sliders, I can't use this:
Code:

<script>
$(function(){
  var slider1 = ['april', 'maj', 'juni', 'Quote #2', 'Image #2'],
      slider2 = ['jul', 'aug', 'sept', 'Quote #3', 'Image #3'];

  $('#slider1').anythingSlider({
    navigationFormatter : function(index, panel){
      return slider1[index - 1] || index;
    }
  });
  $('#slider2').anythingSlider({
    navigationFormatter : function(index, panel){
      return slider2[index - 1] || index;
    }
  });
});
</script>

It somehow conflicts with the slider.js I think.
I'll post the HTML and the slider.js in the next two replies.

Will you check it out and help me find the fault?
Thanks

Update The Sliders's Value After A Submit Button

Similar Tutorials

View Content

Hi All,

I am new to html and javascript. I am doing a webpage where i need to get the value from a slider and send it across the from client to server side. I need to inform the server side about the value (done) and also update the sliders's value after a submission button.
Anyone have any idea how to do the latter part. Here is my code.
Code:

<html>
<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
		<script type="text/javascript" src="js/range.js"></script>
		<script type="text/javascript" src="js/timer.js"></script>
		<script type="text/javascript" src="js/slider.js"></script>
</head>
<body>
<p>Current Value:</p>
		<div class="slider" id="slider-1" tabIndex="1">
		<input class="slider-input" id="slider-input-1"/>
		</div>
		<form  name="hMess" action="" onsubmit="return convertURL(this);">  <input name="w"  type="number" id="h-value" onchange="s.setValue(parseInt(this.value))"> <input name="1" id="1" type="submit" value="Update"></form> 

<script type="text/javascript">
var s1 = new Slider(document.getElementById("slider-1"), document.getElementById("slider-input-1"));

s1.onchange = function () 
{
document.getElementById("h-value1").value = s1.getValue();
};
var a=document.getElementById("h-value1").value
s1.setValue(a);

var locate = window.location
document.hmess.burns.value = locate
var text = document.hmess.burns.value

function delineate(str)
{
	theleft = str.indexOf("=") + 1;
	theright = str.indexOf("&");
	return(str.substring(theleft, theright));
}	
</script>

body>
</html>

Thanks in advance.