|
JavaScript - Slider Menu
I made a sliding drop down menu and I am having a couple issues.
#1) The image that i use as a separator in my nav bar slides down with the slide menu, I would like to try and make that stay in place without sliding with the drop down and sliding back up with the collapse. #2) The very top line in every drop down is not aligning correctly. After the first line the rest of the <li> content below it aligns just fine to the left. Is there something with the very top line of a drop down menu that needs its own styling? Any help is appreciated. Similar TutorialsI have a drop down menu and an image slider that both use javascript code to function. The image slider appears right below the menu but when the actual menu drops down, the drop down part of the menu goes behind the image slider. How do I make it so that the menu drops above the image slider and not behind it? I have a problem with a drop down menu showing behind image slider (not flash), as the menu shows up behind the large image slider, and was hoping someone can help me: http://bedrockstoneanddesign.com/ It only happens in FireFox..... any help is appreciated. thanks I am using a JQuery Slider function in one of my forms that has the folowing code: Code: <script>
$(function() {
$( "#slider" ).slider({
value:100,
min: 0,
max: 100,
step: 1,
slide: function( event, ui ) {
$( "#amount" ).val( ui.value + "% Clear" );
}
});
$( "#amount" ).val( $( "#slider" ).slider( "value" ) + "% Clear" );
});
</script>
And the form looks like: Code: <form method=POST etc...>
<div id="slider"></div>
<span><input type="text" id="amount" name="Percentage" style="border:0; color:#f6931f; font-weight:bold;" /></span>
</form>
Now, in the php, I have an error system set up, so that if one of the items in the form are left blank etc., an error will generate without posting the form. However, I am using <?php echo ?> in the form to repopulate the fields that were entered, so user does not have to fill them again. However, the slider always resets back to 100%... How can I fix this so that if the form does not POST, the slider will keep the value that the user set it at. Is this possible, I am having trouble figuring it out. Thanks! ANy programmer can help me to insert this slider script into my website? http://sorgalla.com/projects/jcarous..._vertical.html im using interspire shopping cart. advance thanks I use offshore coding service, which failed with superior PSD to WP conversion with basic JS Slider. I know the task is complex, but do not want to hire superficial coders any more. What software can completely replace freelancers to create excellent JS Slider on WordPress engine?
Hi there, There appears to be some sort of distortion issue with the slider on my client's website. The website is www.tranzaura.com and for some reason some of the slides on the home page appear distorted when viewed in some browsers. See attached image. Can you please check the website on your computer and please let me know if there is distortion. I'd appreciate if you could vote in the poll. Note that there are 9 slides. You can scroll through them if you wish. I have no idea why this is happening. Any thoughts or advice would be appreciated. Thank you I am looking for a slider. Can anybody help me? This is the design of the slider. I would like to make a Coda Slider for my blog website, Natalie's World http://natalie-nataliesworld.blogspot.com/ and I would like it right below the nav menu bar. But I am unsure of where how to go abouts making it and where to put it in the template and everything. Can somebody help me? Here is one I want to make, http://sixrevisions.com/tutorials/ja...-using-jquery/ Or something like this 1, http://thenewreview.net/ Hi. I'm trying to make a news slider for a website in js. This is what I currently have: Code: <script type="text/javascript">
var refresh = setInterval("refresh()", 5000);
function refresh()
{
$('#top_news').load('top_ten.php').fadeIn("slow");
}
</script>
The id #top_news is an empty div, in which the news are shown, and the file top_ten.php gets top 10 news from the database, and outputs a random one. The script is working fine, but what I want is, for news to slide in and when a new article slides in, the old one slides out. It would be even better, if there is an excistant script, for news or divs (a small image and text). ALSO, when I refresh/load the site, it takes the time from setInterval, to load the news. Thanks I'm trying to make a div slider go left to right. In as much detail this is what I would like: -The div to be hidden on first page load -Have the div slide left to right AND BACK by the click of an image NOT a button -When the image (of a right arrow) is clicked, let the arrow slide out with the div (and IF possible when div is fully extended have image of a left arrow enabling a slide back and vice-versa) Here's what I got so far. (Don't need to use) Code: <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="TestSite/js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#slideleft button').click(function() {
var $lefty = $(this).next();
$lefty.animate({
left: parseInt($lefty.css('left'),10) == 0 ?
-$lefty.outerWidth() :
0
});
});
});
</script>
<style>
.slide {
position: relative;
overflow: hidden;
height: 120px;
width: 350px;
margin: 1em 0;
background-color: #FFF;
border: 1px solid #999;
}
.slide .inner {
position: absolute;
left: 0;
bottom: 0;
width: 338px;
height: 36px;
padding: 6px;
background-color: #F00;
color: #333;
}
.slide button {
margin: .7em 0 0 .7em;
}
.js #slidebottom .inner {
display: none;
}
</style>
</head>
<div id="slideleft" class="slide">
<button><img src="TestSite/js/fancy_nav_right.png" /></button>
<div class="inner">Slide from bottom</div>
</div>
<body>
</body>
</html>
Hi i am very new to javascript. i want the slider type effect where i can show some images. Please see here in this site www.indiabazaaronline.com i want this kind of slider effect. Plzz any body help me. Thx in advance Hi, I cant get the following to work... help would be very much appreciated, thank you. I also have it uploaded on pagemaster.co.za/_test/ <!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 charset="utf-8"> <title>Test Slider</title> <link href="test.css" rel="stylesheet" type="text/css" media="screen" /> </head> <body onLoad="slideA()"> <div id="container"> <img src="images/img1.jpg" id="imgslide" /> <div id="left_holder"><img onClick="slide(-1)" class="left" src="images/arrow-left.png" /></div> <div id="right_holder"><img onClick="slide(1)" class="right" src="images/arrow-right.png" /></div> </div> <script type="text/javascript" src="test.js"></script> </body> </html> #container { height: 360px; width: 960px; margin: 20px auto; position: relative } #imgslide { height: 360px; width: 960px; position: absolute } #left_holder { height: 360px; width: 100px; position: absolute; left: 0px; top: 0px; } #right_holder { height: 360px; width: 100px; position: absolute; right: 0px; top: 0px; } .left { height: 48px; width: 48px; position: absolute; top: 40%; left: 0px; } .right { height: 48px; width: 48px; position: absolute; top: 40%; right: 0px; } and the js... var imagecount = 1; var total = 8; function slide(x) { "use strict"; var Image = document.getElementById('img'); imagecount = imagecount + x; if (imagecount > total) { imagecount = 1; } if (imagecount < 1) { imagecount = total; } Image.src = "images/img" + imagecount + ".jpg"; } window.setInterval(function slideA() { "use strict"; var Image = document.getElementById('img'); imagecount = imagecount + 1; if (imagecount > total) { imagecount = 1; } if (imagecount < 1) { imagecount = total; } Image.src = "images/img" + imagecount + ".jpg"; }, 5000); if you look on my website here you will see a slider on the front page. works fine on all browsers except for internet explorer. on IE, when each picture scrolls, the page will scroll itself down to the bottom. also, after about 4 pictures are scrolled, the slider stops and is just a white box for the rest of the time. does anyone have any ideas??? thanks (if you check the validator it says something about not understanding the value "allowTransparency") thanks again! Hey What do I need to do, for this to work both ways without all the bugs? http://kaspernordkvist.dk/slider/ Thanks I would like to change the variable of an object with a slider. For example, I have an object with variable zoom, how would I add a slider function to the script to change this variable? I am a little confused about event handling. Any help would be much appreciated. I am posting the code (which actually was done by one of this forum's members) in case it may make understanding/explanation simpler. 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" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
.tstparent {
position:relative;overflow:hidden;left:50px;top:50px;width:800px;height:500px;border:solid red 1px;
}
#tst {
position:relative;left:0px;top:0px;width:700px;height:500px;
}
.window {
width:200px;height:150px;border:solid white 2px;
}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
// Zoom Image (28-August-2011)
// by Vic Phillips http://www.vicsjavascripts.org.uk/
function zxcZoomImage(o){
var img = document.getElementById(o.ID);
var obj = img.parentNode;
var window = document.createElement('DIV');
var zimg = document.createElement('IMG');
var src = o.ZoomSRC;
var zoom = o.Zoom;
zoom = typeof(zoom)=='number'?zoom:2;
var os=o.ZoomWindowOffset;
window.style.position = 'absolute';
window.style.overflow = 'hidden';
window.style.visibility = 'hidden';
window.style.zIndex= '2' ;
window.className = o.WindowClassName;
zimg.style.position = 'absolute';
zimg.style.width = img.width*zoom+'px';
zimg.style.height = img.height*zoom+'px';
zimg.src = typeof(src)=='string'?src:img.src;
window.appendChild(zimg);
obj.appendChild(window);
this.window = window;
this.zimg = zimg;
this.wh = [obj.offsetWidth,obj.offsetHeight];
this.zoom = zoom;
this.os = typeof(os)=='object'&& os.constructor==Array && typeof(os[0])=='number'&& typeof(os[1])=='number'?os:[-window.offsetWidth/2,-window.offsetHeight/2];
this.wos = [-(zoom-1)*window.offsetWidth/2,-(zoom-1)*window.offsetHeight/2]; // to center the zoom on the pointer
this.addevt(document,'mousemove','imgzoom',obj);
}
zxcZoomImage.prototype={
imgzoom:function(e,obj){
var mse=this.mse(e);
var pos=this.pos(obj);
var x=mse[0]-pos[0];
var y=mse[1]-pos[1];
var wh=this.wh;
var os=this.os;
var wos=this.wos;
var window=this.window;
var zimg=this.zimg;
var zoom=this.zoom;
if (x>0&&x<wh[0]&&y>0&&y<wh[1]){
x+=os[0];
y+=os[1];
window.style.left=x+'px';
window.style.top=y+'px';
zimg.style.left=-x*zoom+wos[0]+'px';
zimg.style.top=-y*zoom+wos[1]+'px';
window.style.visibility='visible';
}
else {
window.style.visibility='hidden';
}
},
mse:function(e){
if (window.event){
var docs=[document.body.scrollLeft,document.body.scrollTop];
if (!document.body.scrollTop){
docs=[document.documentElement.scrollLeft,document.documentElement.scrollTop];
}
return [e.clientX+docs[0],e.clientY+docs[1]];
}
return [e.pageX,e.pageY];
},
pos:function(obj){
var rtn=[0,0];
while(obj){
rtn[0]+=obj.offsetLeft;
rtn[1]+=obj.offsetTop;
obj=obj.offsetParent;
}
return rtn;
},
addevt:function(o,t,f,p){
var oop=this;
if (o.addEventListener)
o.addEventListener(t,function(e){ return oop[f](e,p);}, false);
else if
(o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](e,p); });
}
} // end of prototype declarations
/*]]>*/
</script>
<script type="text/javascript">
/*<![CDATA[*/
function Init(){
new zxcZoomImage({
ID:'tst', // the unique ID name of the image to zoom. (string)
WindowClassName:'window', // the class name of the zoom window DIV element. (string)
Zoom:4, //(optional) the zoom factor. (number, default = 2)
ZoomSRC:'scia_no2_trop_2009.gif', //(optional) the file path and name of the zoom image.
//... (string, default = the src of the image to zoom)
ZoomWindowOffset:[-100,-75] //(optional) the zoom window x and y offsets from the mouse position.
//... (array, default = centered on the mouse position)
});
}
if (window.addEventListener){
window.addEventListener('load',Init, false);
}
else if (window.attachEvent){
window.attachEvent('onload',Init);
}
/*]]>*/
</script>
</head>
<body>
<noscript>
<!-- <meta http-equiv="refresh" content="0;url=index2.htm;" /> -->
<b>Your browser does not support JavaScript or it is disabled. <br>
Please enable JavaScript to be able to zoom the map. </b>
</noscript>
<div class="tstparent" >
<img id="tst" src="scia_no2_trop_2009.gif" alt="img" />
</div>
</body>
</html>
Hello, Need some help with a slider, In our website we are to display a list of places in a city and show them on the home page using a slider so that users can scroll through the list of places using right or left button in a bunch of 5 places at a time something like this ----Prev Place1 Place2 Place3 Place4 Place5 Next --- when the user clicks on Next it should go to the next set of 5 places. this sounds simple and i have coded it myself using ajax with php and also implemented this with many of the online js scripts available for scrollers. but somehow either the code is too heavy due to jquery js inclusion or not able to retain the selected place in the home page. Another requirement that i coded was that if a place is selected in the second bunch of 5 places then when i come back to the home page the slider must display the second bunch of 5 places with the selected place no basically using the $_GET /$_SESSION(which resets every time a new place is selcted) need some help guys!. as i am fairly good at use of php and ajax, but js burns my fingers Thanks a tonne for stopping by... Jay I am trying to create a mobile safari compatible "slide to unlock" type deal, like the one on jailbreakme.com, i have found many that are compatible with google chrome, or firefox, but none with mobile safari, any help?
HI every one I'm looking for a numeric slider , some thing that I define the min and max numbers . the attached file is something that I want . Any suggest ? thanks I have a question, How do you create a slider for a website? I am not familiar with anything but html and css, but I would like to create a simple image slider for my site. How would I go about doing that? Any help is appreciated Thanks Hi All members i need helping in creating content slider look like this; http://wpclassipress.com/demo/ note; I ask for creating slider look like this (Thumbnail imge and Title under it) plz any tips to do that, My new WP site depends on this part...plz help |
|||||||