I found this link on Dynamic Drive for an image slider but the client says that it has a jerky motion. Can anyone think of how to EASE this animation? I can see settings for speed but nothing for easing. code...
View 3 RepliesI'm using the jquery ui tabs, and right now, if you click on the tab heading, the content just appears below right quick. I'm wondering if it's possible to make it ease in when a tab heading is clicked, like easeInOutCubic like in the JQueryUI development easing folder examples (a whole bunch of visual examples of vertical easing algorithms) ?
[Code]...
I am trying to use slideToggle to drop down a hidden DIV.This hidden div is in the footer.As the div drops down, I would like that the window scrolls down with the div rather than just opening the div and forcing the user to then scroll down with their mouse.I tried setting the button to an element below the DIV as follows <a href="#element below hidden div"></a>And it works sorta, but not completely.
View 2 Replies View RelatedThis script creates a motion blur effect of a moving object - Downgrades very well with others.
You must look at a sample to see what it is and how nice it is.
All you need to do is put the code bellow in the body section of your page... Instructions are in the code to change properties...
Go to http://free.7host04.com/logocurve/index.html for the LogoCurve generator to view samples and work out what you need
- It makes life a LOT easier!! :)
Hope you enjoy!
David :thumbsup:
<script language="JavaScript">
<!--Hide
/*
LOGO CURVE Version 3.2
24.01.2003
Writen by David Bann - South Africa
e-mail: david@ftgconsulting.co.za
Feel free to use this code, but please email me the website it is used on,
and leave this commenting in tact. Thank you!
Please let me know of any bugs or if you edit the script.
Additions since version 3.1:
- Added chengeable formulas for curve.
- Added changeable event at which the script is initiated.
Things to come:
- Better use of layers - will use less layers, but still get same
effect... (User will be able to specify how many layers to be used,
adding more functionality and effects, as well as performance)
- I want to add an option of document boundaries for the curve,as to stop
the logo from going out of the document and dissapearing totaly.
- Fade to work in browsers other then IE.
*/
//----------------------- Start Customizable Variables -----------------------//
//=== Positioning ===//
var left = 0;// Starting left position
var top = 20;// Starting left position
//=== Curve and Distance ===//
var topInc = 5;// Incriment of top position
var leftInc = 5;// Incriment of left position
/* Make both the horizontal curve and the vertical curve the same to..
.. get an increasing gap with no curve. */
var hor_curve = 20;// Horizontal curve - 0 for no curve
var ver_curve = -20;// Vertical curve - 0 for no curve
//=== Timing and Other ===//
var noTimes = 50;// Number of times the picture is shown
var waitTime = 1;// Time delay
var layer = 2;// Layer level
var picture = 'smalllogo.gif'// Picture to display (Smaller images work better)
var start_retracted= true;// Start the image retracted (true / false)
var retract= true;// Retract from behind after expanding (true / false)
//=== Fade options (Only IEusers see fade) ===//
var fade = true;// Gradual Fade (true / false) - Only works if retract =true
var fd_destop = 0;// Destination transparency level (ie 80, for mostly solid)
var fd_rate = 10;// Time in milliseconds between trasparency changes (best under 100)
var fd_delta = 5;// Amount of change each time (ie 5, for 5% change in transparency)
var event_init = 'onClick'// Event at which the script is initiated
var left_formula = '(left + leftInc) + ((count/100) * hor_curve)'// Left position formula
var top_formula = '(top + topInc) + ((count/100) * ver_curve)'// Top position formula
//----------------------- End Customizable Variables -----------------------//
//--------------------- DO NOT EDIT BEYOND THIS POINT! ---------------------//
var count = 0;
var count2 = 0;
var timeOutVal = waitTime * 10;
var txt;
var image;
var imageName;
var lay = new Array;
function addLayer(){
left = eval(left_formula);
top = eval(top_formula);
txt = "<div id='Layer" + count + "' style='position:absolute; visibility:hidden; left:" + left + "; top:" + top + "; z-index:" + layer + "'>";
txt += "<a href='#' " + event_init + "='replay()'><img src='" + picture + "' border=0 style='filter:alpha(opacity=100)' name = 'Image" + count + "'></a>";
txt += "</div>";
document.write(txt);
lay[count]=new lib_obj("Layer"+count);
}
function logoCurveInit(){
while (count < noTimes) {
addLayer();
count++;
}
count = 0;
lay[0].showIt();
if (!start_retracted)
animate();
}
function animate(){
if (start_retracted) {
if (!retract){
if (count > 0){
setTimeout('animate()',timeOutVal);
lay[count].hideIt();
count--;
}
}
else{
if (count >= 0){
setTimeout('animate()',timeOutVal);
lay[count].showIt();
if (count != 0)
fadeImage();
count--;
}
}
if (retract){
if(count==0)
retractIt();
}
}
else{
if (count < noTimes){
setTimeout('animate()',timeOutVal);
lay[count].showIt();
if (count != noTimes-1 && retract)
fadeImage();
count++;
}
if (retract){
if (count == noTimes)
retractIt();
}
}
}
function replay(){
if ((count == noTimes || (count == 0 || count == -1)) &&(count2 == noTimes-1 || count2 == 0)){
start_retracted = !start_retracted; // Make the value opposite of what it is
make_all_visible();
if (start_retracted){
count = noTimes-1;
}
else {
count = 0;
}
animate();
}
}
function retractIt(){
if (start_retracted) { // If the logo is not retracted (showing all the layers)
if (count2 > 0){
setTimeout('retractIt()',timeOutVal);
lay[count2].hideIt();
count2--;
}
}
else{ // If the logo is retracted (Only showing the first layer)
if (count2 < noTimes-1){
setTimeout('retractIt()',timeOutVal);
lay[count2].hideIt();
count2++;
}
}
}
function fadeImage(){
if (fade){
if (count >= 0 && count <= noTimes){
image = document.images['Image' + count];
nereidFade(image,fd_destop,fd_rate,fd_delta);
}
}
}
function make_all_visible(){
for (var i = 0; i< noTimes ; i++){
if (document.images['Image' + i].style.MozOpacity){
document.images['Image' + i].style.MozOpacity=100;
}
else if (document.images['Image' + i].filters) {
document.images['Image' + i].filters.alpha.opacity = 100;
}
}
}
////***************(DHTMLCentral.com)****************////
function check_browser(){
this.ver=navigator.appVersion
this.agent=navigator.userAgent
this.dom=document.getElementById?1:0
this.opera5=this.agent.indexOf("Opera 5")>-1
this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0;
this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0;
this.ie4=(document.all && !this.dom && !this.opera5)?1:0;
this.ie=this.ie4||this.ie5||this.ie6
this.mac=this.agent.indexOf("Mac")>-1
this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0;
this.ns4=(document.layers && !this.dom)?1:0;
this.bw=(this.ie6||this.ie5||this.ie4||this.ns4||this.ns6||this.opera5)
return this
}
bw=new check_browser()
function show_message(txt){alert(txt); return false}
function lib_obj(obj,nest){
if(!bw.bw) return show_message('Old browser')
nest=(!nest) ? "":'document.'+nest+'.'
this.evnt=bw.dom? document.getElementById(obj):
bw.ie4?document.all[obj]:bw.ns4?eval(nest+"document.layers." +obj):0;
if(!this.evnt) return show_message('The layer does not exist ('+obj+')'
+'- If your using Netscape please check the nesting of your tags!')
this.css=bw.dom||bw.ie4?this.evnt.style:this.evnt;
this.ref=bw.dom||bw.ie4?document:this.css.document;
this.x=parseInt(this.css.left)||this.css.pixelLeft||this.evnt.offsetLeft||0;
this.y=parseInt(this.css.top)||this.css.pixelTop||this.evnt.offsetTop||0
this.w=this.evnt.offsetWidth||this.css.clip.width|| this.ref.width||this.css.pixelWidth||0;
this.h=this.evnt.offsetHeight||this.css.clip.height|| this.ref.height||this.css.pixelHeight||0
this.c=0
if((bw.dom || bw.ie4) && this.css.clip) {
this.c=this.css.clip; this.c=this.c.slice(5,this.c.length-1);
this.c=this.c.split(' ');
for(var i=0;i<4;i++){this.c[i]=parseInt(this.c[i])}
}
this.ct=this.css.clip.top||this.c[0]||0;
this.cr=this.css.clip.right||this.c[1]||this.w||0
this.cb=this.css.clip.bottom||this.c[2]||this.h||0;
this.cl=this.css.clip.left||this.c[3]||0
this.obj = obj + "Object"; eval(this.obj + "=this")
return this
}
lib_obj.prototype.showIt = function(){this.css.visibility="visible"}
lib_obj.prototype.hideIt = function(){this.css.visibility="hidden"}
lib_obj.prototype.writeIt = function(text,startHTML,endHTML){
if(bw.ns4){
if(!startHTML){startHTML=""; endHTML=""} this.ref.open("text/html");
this.ref.write(startHTML+text+endHTML);
this.ref.close()
}else this.evnt.innerHTML=text
}
////***************(DHTMLCentral.com)****************////
/* Code taken from DynamicDrive.com (Start)-->
Gradual-Highlight Image Script II-
By J. Mark Birenbaum (birenbau@ugrad.cs.ualberta.ca)
For full source to script, visit http://dynamicdrive.com */
nereidFadeObjects = new Object();nereidFadeTimers = new Object();
function nereidFade(object, destOp, rate, delta){
if (!document.all)return
if (object != "[object]"){ setTimeout("nereidFade("+object+","+destOp+","+rate+","+delta+")",0); return;}
clearTimeout(nereidFadeTimers[object.sourceIndex]); diff = destOp-object.filters.alpha.opacity;
direction = 1; if (object.filters.alpha.opacity > destOp){direction = -1;}
delta=Math.min(direction*diff,delta); object.filters.alpha.opacity+=direction*delta;
if (object.filters.alpha.opacity != destOp){ nereidFadeObjects[object.sourceIndex]=object;
nereidFadeTimers[object.sourceIndex]=setTimeout("nereidFade(nereidFadeObjects["+object.sourceIndex+"],"+destOp+","+rate+","+delta+")",rate);
}
}
// <-- Code taken from DynamicDrive.com (End)
window.onload=new logoCurveInit();
//-->End Hide
</script>
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]....
I am trying to use a program called WOW Slider, found at [URL] It's supposed to create a slider pretty easily.
I can get the slider to work great on my local machine, but when I uploaded it to my host server, it does not work.
Obviously I do not have things in the correct directories?
I have a test page of my output that's live, that you can see.
I'm asking a lot, but this slider was the icing on the cake for a site redesign that I've been working on for months. I'm sad that I have hit a glitch this close to launching. Grrr.
I've built this slider, but I can't get it to line up. The link is [URL]...
View 2 Replies View Relatedtake a look at this link for me? For some reason this works perfectly in everything but IE.I am sure there is some simple fix for this alignment issue, I just can't figure it out
View 1 Replies View RelatedIt's like for page top area where you can have multiple pictures and at the sides you have vertical text links to slide in that next image. Image explains. If you have seen this and know it's name
View 1 Replies View RelatedI just need something that rotates/slides a few images when a page loads. I'd guess Jquery would work best? But it needs to work in all browsers, and I have read some horror stories about ones that don't. Any good recommendations?
View 1 Replies View RelatedI 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? [URL]
View 1 Replies View Related[URL]There should be three images in the top right blue shape that scroll repeatedly but only one image is showing. The page was operating fine until I added the dropdown menu that was created in Adobe Fireworks. Is there a conflict between the image slider and the dropdown?
[URL]
I have an imagemap that I am using to collect user ratings (the image is of a gradient, and the more to the right they click, the higher the rating). I want to essentially keep the same functionality with a small addition:
I want a slider image to display under the user's mouse when the user is hovering over the imagemap, and I want it to move horizontall whenever the user's mouse moves over the imagemap. This would make the imagemap look like a slider, except the user would still be able to instantly rate without needing to drag a slider (it would simply follow his/her mouse).
I'm not very familiar with JavaScript, though. If anyone could give me an idea how to write something like this or possibly write some sample code, I would be very grateful. I imagine that something like this is very simple (i.e. just taking the user's horizontal mouse coordinates and overlaying an image), but I really do need help writing it. I don't want to sound lazy, but the project I'm working on has more to do with server-side programming, so it wouldn't be a good idea for me to spend a few days learning all about JavaScript in order to accomplish this small bit of functionality.
I'm having a little bit of trouble with an image slider I am doing. I need it to loop to the beginning of the slide show when it reaches the end of the images
Here is my markup:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL]">
<html xmlns="[URL]">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Twin Tiers Technologies - Image Slider</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<script src="jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="scripts.js" type="text/javascript"></script> .....
Trying to set up a simple slider and it works perfectly in everything but IE. Every time I reset the x/y coordinates it looks different in every browser.
View 6 Replies View RelatedNew to jQuery.
I have a jquery slider in use on my site;[url]. (at the top of the page), and have a very simple question for you.
How do I make each slide image a clickable image? I'd like to link each separate slide to it's own [url]..
I created that function for an image slider:
$(document).ready(function(){
$("#gallery").click(function(){
$(this).find("li.third").fadeOut(800).removeClass("third").next().addClass("third").fadeIn(800);
$(this).find("li.second").fadeOut(800).removeClass("second").next().addClass("second").fadeIn(800);
$(this).find("li.first").next().addClass("first").fadeIn(800); $($(this).find("li.first")[0]).removeAttr("class").hide().appendTo($(this)).fadeIn(800);
});
});
Actually I want to fade in the first picture first. Than the second and at the end the third. To achieve that I changed the order of these following three lines:
$(this).find("li.first").next().addClass("first").fadeIn(800);
$(this).find("li.second").fadeOut(800).removeClass("second").next().addClass("second").fadeIn(800);
$(this).find("li.third").fadeOut(800).removeClass("third").next().addClass("third").fadeIn(800);Unfortunately it doesn't work.
I have a working version of a jQuery image slider that can be seen here. I am trying to implement this into a new website and have copied the code exactly but for some reason the images are not rotating or switching when the thumbnails are clicked. The new slider can be see here - I have it in a test page so that there is no possibility of any other scripts conflicting.
View 2 Replies View RelatedI have a site built in CI and I have integrated a js/jq image slider into the index page. I linked all the files to the correct places but for some reason the js isnt working? Some of the fonts in the slider are controlled by js files, and they are displaying correctly, so i know the files are linked ok, but for some reason its not grabbing the code to control the slider. I am not sure if its something to do with the file structure used in ci? Is there something I need to be adding in any config files to make js work in ci? I also tried nivo slider and had similar results. and ive had no luck at all finding a slider built for use in ci....
View 2 Replies View RelatedI need to build a slider. which is not there in the page when it loads. then after few seconds it appears and slides from the right hand side of the window and stops at some position on the screen. then after few seconds it changes its image into another one. each and every one of the images has a different displaying time. that time is a database data and i have to specify it accordingly... I have no idea how to do this and i am a newbie to javascript. i don't know whether javascript can do this, maybe another technology..
View 6 Replies View RelatedThe script is written in Jquery, it's a simple piece of code which I've seen on another website here [URL]. I modified the code a bit to work with a website I made for my portfolio. The problem with the code is that is works fine in firefox but it doesn't on chrome. the code doesn't break entirely but on chrome the images doesn't slide, it just jumps from image to image. here's the code
Code:
var settings = {
startingPosition : 0, //--------------------------------set starting position for images, 0 for first image
slideSpeed : 550, //---------------------------speed of slide, seconds/fast/slow
easing : 'linear', //-------------------------easing type
navigationClass : 'slider_navigation', //--------------class of navigation (the prev and next)
activeItemClass : 'slider-current-active-element', //--name of class to be added to first element
repeat : true, //-----------------------------make gallery neverending .....
Most of it works fine but I'm guessing the animate part in the problem
Code:
//the slide animation
elContainer.animate({
'marginLeft' : animateToWidth
}, opt.slideSpeed, opt.easing,
function(){
//if forward is clicked
if(opt.repeat && direction == 'forward'){
$("> :first", elContainer).appendTo(elContainer).css({opacity : 0}).animate({opacity : 1}, 400);
elPosition += imgWidth;
elContainer.css({
'marginLeft' : elPosition
});}
Here's the dummy site I made [URL]. I'm no expert on javascript so how to make the code better?
I am trying to create an image slider than when hovered over shows a div with text relating to the image...here is the code:
Code JavaScript:
$(document).ready(function(){
//Image slider behaviour
rotateImages(1);
[Code]....
Something similar to the navigation menu on [URL].. You hover over a link and a box appears below that spreads the width of the menu itself. Friend of mine told me it was using actionscript but I have no idea how to create a drop down box (not menu). My friend told me Dreamweaver has the ability t create a drop down box but I have no idea.
Also does anyone know how to create an image slider similar to the one on that site? A slider that fades from one image to the next with the navigation arrows on the left and right side and the dots on top left?
I'm trying to "smooth" ("ease") mouse movement while dragging orscrolling.Is there any jquery plugins for managing something like this?
View 1 Replies View RelatedI have a client request I need a little advise on with an image slider.Client says;"There will be 4 photos that roll over two times each then stop on the Home Page photo then opens a text box over the left of the image"The part I'm not sure how to do is how to set the slider to stop on the Home Page image after the 4 images go through the animation two times.
View 2 Replies View RelatedI'm using this jQuery slider code that my coworker and I manipulated so that 3 images slide at a time. It worked great till we updated our jQuery to 1.6.2 from 1.3.2 (we were going to go with 1.7.1 but now that we've encountered this problem we have to hold off). I went all the way back to 1.4.1 and it works okay but not as bad as the latest versions.
I included ALL the code. You can literally copy this whole thing into a blank page, save it and test it. It's not really working as expected right now. It doesn't slide all the way back to 1 and there's an empty slide after 9. I will work with my coworker to debug it more but I want to know why versions 1.4.3 through 1.7.1 break it.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.4.1.min.js" language="javascript" type="text/javascript"></script>
[Code].....