|
JavaScript - Funny Glitch In Slider.
Hey yall Im finishing up my uncles site... fritzhoffmann.com
when you click on the pictures button in the nav the slider glitches. I didn't write the slider script so I know if this is something in the jQuery or what. any ideas would be awesome! ty Similar TutorialsI 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! Hi there, I have an issue with my slideshow in IE7. There is a transparent grey box that slides upwards with text on the bottom of the slideshow. In IE7 the grey box does not go right across to the right hand side it leaves a small gap. It does this in IE7 compatability mode in IE9 and i've tried the proper version of IE7 too. My site is located at http://www.passmarkdrivinglessons.co.uk The slideshow I used in my site is from here http://www.queness.com/resources/htm...slideshow.html Can any help me to solve this issue, thanks Hi, I have been working on a hangman game and I have run into a glitch. I have it coded so that when the user guesses a letter correct, the letter is filled into the corresponding text spot. Like this: Code:
if (randomword.indexOf(guess1) == 0)
{
document.form1.letter1.value = guess1
letter1 = guess1
}
if (randomword.indexOf(guess1) == 1)
{
document.form1.letter2.value = guess1
letter2 = guess1
}
if (randomword.indexOf(guess1) ==2)
{
document.form1.letter3.value = guess1
letter3 = guess1
}
if (randomword.indexOf(guess1) == 3)
{
document.form1.letter4.value = guess1
letter4 = guess1
}
if (randomword.indexOf(guess1) == 4)
{
document.form1.letter5.value = guess1
letter5 = guess1
}
if (randomword.indexOf(guess1) == 5)
{
document.form1.letter6.value = guess1
letter6 = guess1
}
if (randomword.indexOf(guess1) == 6)
{
document.form1.letter7.value = guess1
letter7 = guess1
}
if (randomword.indexOf(guess1) == 7)
{
document.form1.letter8.value = guess1
letter8 = guess1
}
if (randomword.indexOf(guess1) == 8)
{
document.form1.letter9.value == guess1
letter9 = guess1
}
if (randomword.indexOf(guess1) == 9)
{
document.form1.letter10.value = guess1
letter10 = guess1
}
if (randomword.indexOf(guess1) == 10)
{
document.form1.letter11.value = guess1
letter11 = guess1
}
The variable randomword is the randomly selected word from an array. The guess1 is the users guess. The letter variables are just to check to see if all the spots are filled to win the game. It works fine if the the word doesnt have repeating letters in it such as "Lucky". However words such as "Happy" do not work. If you guess 'p' code fills in the 3 text box with a 'P' but it leaves the 4 spot empty. Even if you guess 'p' again, it still leaves the 4 box empty. Thanks for the help! If you need to see the full code i can post it. Thanks again! I had this filterable thing working perfectly but seem to have done something that just makes all the items flash constantly when you try and filter (click the blue section All | Illustration | Animation). Can someone take a look and help at all? http://bit.ly/4yWiDZ 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 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 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?
I am looking for a slider. Can anybody help me? This is the design of the slider. 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 So I have this timeline that runs from 1991 to 2011, and it's broken into two parts. What I want to happen is when a user clicks the links to each section the slider will respond. This is an example of how I want it to function: http://www.stevenserna.com/test2 And after some modification and implementation this is what I have so far(the links to change the timeline are in the top left): http://www.stevenserna.com/test It seems like the second section doesn't want come up and stay next to the first section and instead stays below it. If you increase the height of the mask in the style file you can see the second section hanging out below. This kind of seems more like a CSS issue but I thought I would post it in here since has to do with a javascript based slider. Any help would be awesome! Thanks! 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 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'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>
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>
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); 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. 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! 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/ |
|||||||