|
JavaScript - Changing A Slide Effect To A Fade Help?
I am currently trying to convert a relatively simple slide effect in javascript to a fade effect, I have attached the code below and be grateful if anyone can help,
var slider = null; var slider_next = null; $(function () { var interval = setInterval('rotate_slider()', 11000); pos = (window.location.pathname == "/" || window.location.pathname == "/home" ? '1280' : '1280'); $('#featuredSlider > div:not(:first)').attr('style','position:absolute;left:'+ pos +'px;width:1280px'); $('#featuredSlider > div:first').next().attr('style','position:absolute;left:0px;width:1280px'); $('#featuredShortcuts > div').click( function() { clearInterval(interval); sliders = $('#featuredSlider > div:not(:first)'); sliders.css({"left": "1280px", "opacity": 0}); var curr_div = $(this); var selected_div = $('#featuredShortcuts > div.selected'); selected_div.toggleClass('selected'); curr_div.toggleClass('selected'); sliders.eq( parseInt(selected_div.attr('id').substr(1, 1)) ).animate({"left": "-=1280px", "opacity": 0}, 1000); sliders.eq( parseInt(curr_div.attr('id').substr(1, 1)) ).animate({"left": "0px", "width": "1280px", "opacity": 1}, 1000); }); }); function rotate_slider() { var next = null; var curr_div = $('#featuredShortcuts > div.selected'); if( $('#featuredShortcuts > div:last').hasClass('selected') ) { next = $('#featuredShortcuts > div:first'); } else { next = curr_div.next(); } curr_div.toggleClass('selected'); next.toggleClass('selected'); if( ! slider ) { slider = $('#featuredShortcuts').next(); slider_next = slider.next(); } else if ( slider_next.html() == $('#featuredSlider > div:last').html() ) { slider = slider.next(); slider_next = $('#featuredShortcuts').next(); } else if ( slider.html() == $('#featuredSlider > div:last').html() ) { slider = $('#featuredShortcuts').next() slider_next = slider_next.next(); } else { slider = slider.next(); slider_next = slider.next(); } slider.animate({"left": "-=1280px", "opacity": 0}, 1000); slider_next.animate({"left": "0px", "width": "1280px","opacity": 1}, 1000, function () { slider.css('left', '1280px') }); } Similar TutorialsI need to have an image hyperlinked to a js function that fades text elswhere on the page. I imagine it looks something like <a href="(some js function or somethingrather"><img src="theimg.png"></a>, but how do I do it exactly? I would like code that I can just copy and paste in my header that is set to fade a specific line of text, and be able to hyperlink and image to initiate the js. Please help. Carson www.carsonkahn.com Hi, Please see URL http://backstageweb.net/Salon/indexslides2.htm. (code is below, original source: http://javascript.internet.com/misce...lide-show.html The slide show cross-fade effect in this script works in IE, but not in FF. I know there are better scripts I could use, but I like this one because of its simplicity (doesn't require any accompanying CSS, etc). But I need it to work in all browsers. Is there a simple fix here? Thanks, John Code: <head>
<script type="text/JavaScript">
<!-- Original: CodeLifter.com (support@codelifter.com) -->
<!-- Web Site: http://www.codelifter.com -->
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Begin
// Set slideShowSpeed (milliseconds)
var slideShowSpeed = 5000;
// Duration of crossfade (seconds)
var crossFadeDuration = 3;
// Specify the image files
var Pic = new Array();
// to add more images, just continue
// the pattern, adding to the array below
Pic[0] = 'images/01.jpg'
Pic[1] = 'images/02.jpg'
Pic[2] = 'images/03.jpg'
Pic[3] = 'images/04.jpg'
Pic[4] = 'images/05.jpg'
// do not edit anything below this line
var t;
var j = 0;
var p = Pic.length;
var preLoad = new Array();
for (i = 0; i < p; i++) {
preLoad[i] = new Image();
preLoad[i].src = Pic[i];
}
function runSlideShow() {
if (document.all) {
document.images.SlideShow.style.filter="blendTrans(duration=2)";
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)";
document.images.SlideShow.filters.blendTrans.Apply();
}
document.images.SlideShow.src = preLoad[j].src;
if (document.all) {
document.images.SlideShow.filters.blendTrans.Play();
}
j = j + 1;
if (j > (p - 1)) j = 0;
t = setTimeout('runSlideShow()', slideShowSpeed);
}
// End -->
</script>
</head>
Code: <body onLoad="runSlideShow()"> Code: <div id="slides">
<img src="images/01.jpg" name='SlideShow' width="380" height="541">
</div>
Hi, I have problem with javascript for image effects... Here is the LINK... login with theese nick and pass: nick: google pass: googleads the problem: When you log into, on the top of the page are 4 images with fade effect... But effect is wrong. When I came first I see those images in full collors. How to change my script to show them in grey when I first came? Thanks in advance... I am using ASP.NET and AJAX here. basically what I want is a nice little slide effect to show the next batch of images in a mini slide show. Example: << prev [image1] [image2] [image3] [image4] Next >> << prev [image5] [image6] [image7] [image8] Next >> so when the user presses next or previous, it will SLIDE to the left/right. the databinding is done at the server side end and in an update panel so it does an async postback when they press next/prev. how can I go about doing this type of effect? okay i have a problem...i get the content of my rows from my database... the problem is when there is 4 rows... and i try to click on the 1st row... instead of it being deleted the 3rd row is deleted.. when i click on the 2nd row... the 4th row is delete... the moveicon.gif is the image for deleting the row.. there is no problem when i remove the javascript...but when i applied it i noticed the poblem Code: <table width="759" border="0">
<tr>
<td colspan="5"><span class="style8">Confirmed Request</span> </td>
</tr>
<tr>
<td width="105" bgcolor="#408080"><span class="style5">Type</span></td>
<td width="463" bgcolor="#408080"><span class="style5">Topic</span></td>
<td width="108" bgcolor="#408080"><span class="style5">Date</span></td>
<td width="25" bgcolor="#408080"><div align="center"></div></td>
<td width="36" bgcolor="#408080"><div align="center"></div></td>
</tr>
<%@ page import="com.sun.rowset.CachedRowSetImpl;" %>
<%
int i = 0;
CachedRowSetImpl crset3 = new CachedRowSetImpl();
crset3 = view.home2();
while (crset3.next())
{
String day3 = crset3.getString("dep_date");
String[] monthcol2= day3.split("-");
year = Integer.parseInt(monthcol2[0]);
month = Integer.parseInt(monthcol2[1]);
day= Integer.parseInt(monthcol2[2]);
m="";
if(month==1)
{
m="Jan";
}
else if (month==2)
{
m="Feb";
}
else if (month==3)
{
m="March";
}
else if (month==4)
{
m="April";
}
else if (month==5)
{
m="May";
}
else if (month==6)
{
m="June";
}
else if (month==7)
{
m="July";
}
else if (month==8)
{
m="Aug";
}
else if (month==9)
{
m="Sept";
}
else if (month==10)
{
m="Oct";
}
else if (month==11)
{
m="Nov";
}
else if (month==12)
{
m="Dec";
}
if(i==0)
{
%>
<tr>
<script src="images/jquery-latest.js"></script>
<script type="text/javascript">
<!--
function confirmation1(){
var answer = confirm("Do you want to move this to archives?")
if (answer){
$("#movieIcon").parents("tr").fadeOut("slow");
window.location = "http://localhost:8080/ICTPROJ/deployment/archiver.jsp?r=<%=crset3.getString("ref_num")%>&t=<%=crset3.getString("dep_time")%>&l=<%= crset3.getString("dep_location") %>&d=<%= crset3.getString("dep_date") %>";
}
else{
}
}
//-->
</script>
<td scope="row"><fade1><div align="left" class="style22"><span class="style7"> <%= crset3.getString("dep_type") %> </span> </div></fade1></td>
<td scope="row"><div align="left" class="style22"><span class="style7"> <%= crset3.getString("dep_name")%></a>
</span> </div></td>
<td > <span class="style7">
<% out.println(day);%>
<% out.println("-");%>
<% out.println(m);%>
<% out.println("-");%>
<% out.println(year);%>
</span></td>
<td ><div align="center"><a href="http://localhost:8080/ICTPROJ/deployment/reports_2.jsp?t=<%=crset3.getString("dep_time")%>&l=<%= crset3.getString("dep_location") %>&d=<%= crset3.getString("dep_date") %>" onClick="chw=window.open('http://localhost:8080/ICTPROJ/deployment/reports_2.jsp?t=<%=crset3.getString("dep_time")%>&l=<%= crset3.getString("dep_location") %>&d=<%= crset3.getString("dep_date") %>','NewWindow','resizable=yes,scrollbars=yes,status=yes,width=640,height=500'); if (chw != null) chw.focus(); return false"><img src="../Chapters/images/reporticon.gif" border="0"></a></div></td>
<td ><div align="center"><img id="movieIcon" src="images/moveicon.gif" width="29" height="29" border="0" onClick="confirmation1()"/></div></td>
</tr>
<%
i=1;
}
else
{
%>
<tr>
<script type="text/javascript">
<!--
<!--
function confirmation(){
var answer = confirm("Do you want to move this to archives?")
if (answer){
$("#movieIcon1").parents("tr").fadeOut("slow");
window.location = "http://localhost:8080/ICTPROJ/deployment/archiver.jsp?r=<%=crset3.getString("ref_num")%>&t=<%=crset3.getString("dep_time")%>&l=<%= crset3.getString("dep_location") %>&d=<%= crset3.getString("dep_date") %>";
}
else{
}
}
//-->
//-->
</script>
<td bgcolor="#CCCCCC" scope="row"><div align="left" class="style22"><span class="style7"> <%= crset3.getString("dep_type") %></span> </div></td>
<td bgcolor="#CCCCCC" scope="row"><div align="left" class="style22"><span class="style7"><%= crset3.getString("dep_name")%>
</span> </div></td>
<td bgcolor="#CCCCCC"> <span class="style7">
<% out.println(day);%>
<% out.println("-");%>
<% out.println(m);%>
<% out.println("-");%>
<% out.println(year);%>
</span></td>
<td bgcolor="#CCCCCC"> <a href="http://localhost:8080/ICTPROJ/deployment/reports_2.jsp?t=<%=crset3.getString("dep_time")%>&l=<%= crset3.getString("dep_location") %>&d=<%= crset3.getString("dep_date") %>" onClick="chw=window.open('http://localhost:8080/ICTPROJ/deployment/reports_2.jsp?t=<%=crset3.getString("dep_time")%>&l=<%= crset3.getString("dep_location") %>&d=<%= crset3.getString("dep_date") %>','NewWindow','resizable=no,scrollbars=yes,status=no,width=640,height=500'); if (chw != null) chw.focus(); return false"><div align="center"><img src="../Chapters/images/reporticon.gif" border="0"></div>
</a></td>
<td bgcolor="#CCCCCC" ><div align="center"><img id="movieIcon1" src="images/moveicon.gif" width="29" height="29" border="0" onClick="confirmation()"></div></td>
</tr>
<%
i=0;
}
}
%>
</table>
Hello all! This is my first time in the forum and I have been reading for a while. The information in here appears to be very accurate and useful. I am new to JavaScript. I have been programming sites for a while but have been using Flash for most of my animation and never really got into the ActionScript. Thanks to Apple... I can no longer use that crutch. So as I post in this forum please understand 2 things: 1 I am a beginner in JavaScript and 2. I want to learn not just copy, paste and move on! Here is my issue: I have made a VERY SIMPLE slide show and it works perfectly. However, Now I want to add a fade in and out effect to the code. I have seen this done with the CSS opacity(alpha) and that seems to be the simplist way. However, I am having trouble fitting this into my code. Any direction in this matter would be great! Thanks so much! Code:
var step=1
function switchImg()
{
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
if (step<9)
step++
else
step=1
setTimeout("switchImg()",3500)
}
switchImg()
hi all hope someone can help me out here. The code below i found online and it works well but I would like it to slide rather than jump into posistion. Anyone know how I can adapt this or have another way of doing it?? what i like about this script is that it wont allow you to go beyond the bounds of the content when pressing the forward and back links but the transition needs a nice slide!!!. Example of how it works here Link Code: <head>
<style>
#contents{ position: relative; top: 0; left: 0; width: 786px; height: auto;}
#scrollable{ overflow: hidden; width: 786px; height: 400px; border: 1px
solid black;}
</style>
<script>
var t = 0;
function myback()
{
t += 786;
with(document.getElementById("contents"))
{
if (t > 0)
t = 0;
if(style)
style.left = t + "px";
else
setAttribute("style", "left: " + t + "px");
}
}
function myforward()
{
t -= 786;
with(document.getElementById("contents"))
{
if(t < -clientWidth)
t = -clientWidth;
if(style)
style.left = t + "px";
else
setAttribute("style", "left: " + t + "px");
}
}
</script>
</head>
<body>
<table>
<tr>
<td rowspan="2">
<div id="scrollable"><div id="contents">
<table width="1572" border="0" cellspacing="0" cellpadding="5">
<tr>
<td width="776" valign="top" bgcolor="#FFFF99">Some text!!!</td>
<td width="776" valign="top" bgcolor="#66FFFF"> Some Text!!!</td>
</tr>
</table>
</div>
</div>
</td>
</tr>
</table>
<a href="javascript:void(0)" onclick="myback()">back</a>
<a href="javascript:void(0)" onclick="myforward()">forward</a>
</body>
Hope this is clear. Thanks. I found a very intressting JS function at this webpage: http://www.dynamicdrive.com/dynamici...edcollapse.htm I wonder if someone knows wihich part from the JS-file i should change/delete so i only get the fade at exempel 1 and not the slide/rolling effect. I only want the fade. The JS is: Code: //** Animated Collapsible DIV v2.0- (c) Dynamic Drive DHTML code library: http://www.dynamicdrive.com.
//** May 24th, 08'- Script rewritten and updated to 2.0.
//** June 4th, 08'- Version 2.01: Bug fix to work with jquery 1.2.6 (which changed the way attr() behaves).
//** March 5th, 09'- Version 2.2, which adds the following:
//1) ontoggle($, divobj, state) event that fires each time a DIV is expanded/collapsed, including when the page 1st loads
//2) Ability to expand a DIV via a URL parameter string, ie: index.htm?expanddiv=jason or index.htm?expanddiv=jason,kelly
//** March 9th, 09'- Version 2.2.1: Optimized ontoggle event handler slightly.
//** July 3rd, 09'- Version 2.4, which adds the following:
//1) You can now insert rel="expand[divid] | collapse[divid] | toggle[divid]" inside arbitrary links to act as DIV togglers
//2) For image toggler links, you can insert the attributes "data-openimage" and "data-closedimage" to update its image based on the DIV state
var animatedcollapse={
divholders: {}, //structu {div.id, div.attrs, div.$divref, div.$togglerimage}
divgroups: {}, //structu {groupname.count, groupname.lastactivedivid}
lastactiveingroup: {}, //structu {lastactivediv.id}
preloadimages: [],
show:function(divids){ //public method
if (typeof divids=="object"){
for (var i=0; i<divids.length; i++)
this.showhide(divids[i], "show")
}
else
this.showhide(divids, "show")
},
hide:function(divids){ //public method
if (typeof divids=="object"){
for (var i=0; i<divids.length; i++)
this.showhide(divids[i], "hide")
}
else
this.showhide(divids, "hide")
},
toggle:function(divid){ //public method
if (typeof divid=="object")
divid=divid[0]
this.showhide(divid, "toggle")
},
addDiv:function(divid, attrstring){ //public function
this.divholders[divid]=({id: divid, $divref: null, attrs: attrstring})
this.divholders[divid].getAttr=function(name){ //assign getAttr() function to each divholder object
var attr=new RegExp(name+"=([^,]+)", "i") //get name/value config pair (ie: width=400px,)
return (attr.test(this.attrs) && parseInt(RegExp.$1)!=0)? RegExp.$1 : null //return value portion (string), or 0 (false) if none found
}
this.currentid=divid //keep track of current div object being manipulated (in the event of chaining)
return this
},
showhide:function(divid, action){
var $divref=this.divholders[divid].$divref //reference collapsible DIV
if (this.divholders[divid] && $divref.length==1){ //if DIV exists
var targetgroup=this.divgroups[$divref.attr('groupname')] //find out which group DIV belongs to (if any)
if ($divref.attr('groupname') && targetgroup.count>1 && (action=="show" || action=="toggle" && $divref.css('display')=='none')){ //If current DIV belongs to a group
if (targetgroup.lastactivedivid && targetgroup.lastactivedivid!=divid) //if last active DIV is set
this.slideengine(targetgroup.lastactivedivid, 'hide') //hide last active DIV within group first
this.slideengine(divid, 'show')
targetgroup.lastactivedivid=divid //remember last active DIV
}
else{
this.slideengine(divid, action)
}
}
},
slideengine:function(divid, action){
var $divref=this.divholders[divid].$divref
var $togglerimage=this.divholders[divid].$togglerimage
if (this.divholders[divid] && $divref.length==1){ //if this DIV exists
var animateSetting={height: action}
if ($divref.attr('fade'))
animateSetting.opacity=action
$divref.animate(animateSetting, $divref.attr('speed')? parseInt($divref.attr('speed')) : 500, function(){
if ($togglerimage){
$togglerimage.attr('src', ($divref.css('display')=="none")? $togglerimage.data('srcs').closed : $togglerimage.data('srcs').open)
}
if (animatedcollapse.ontoggle){
try{
animatedcollapse.ontoggle(jQuery, $divref.get(0), $divref.css('display'))
}
catch(e){
alert("An error exists inside your \"ontoggle\" function:\n\n"+e+"\n\nAborting execution of function.")
}
}
})
return false
}
},
generatemap:function(){
var map={}
for (var i=0; i<arguments.length; i++){
if (arguments[i][1]!=null){ //do not generate name/value pair if value is null
map[arguments[i][0]]=arguments[i][1]
}
}
return map
},
init:function(){
var ac=this
jQuery(document).ready(function($){
animatedcollapse.ontoggle=animatedcollapse.ontoggle || null
var urlparamopenids=animatedcollapse.urlparamselect() //Get div ids that should be expanded based on the url (['div1','div2',etc])
var persistopenids=ac.getCookie('acopendivids') //Get list of div ids that should be expanded due to persistence ('div1,div2,etc')
var groupswithpersist=ac.getCookie('acgroupswithpersist') //Get list of group names that have 1 or more divs with "persist" attribute defined
if (persistopenids!=null) //if cookie isn't null (is null if first time page loads, and cookie hasnt been set yet)
persistopenids=(persistopenids=='nada')? [] : persistopenids.split(',') //if no divs are persisted, set to empty array, else, array of div ids
groupswithpersist=(groupswithpersist==null || groupswithpersist=='nada')? [] : groupswithpersist.split(',') //Get list of groups with divs that are persisted
jQuery.each(ac.divholders, function(){ //loop through each collapsible DIV object
this.$divref=$('#'+this.id)
if ((this.getAttr('persist') || jQuery.inArray(this.getAttr('group'), groupswithpersist)!=-1) && persistopenids!=null){ //if this div carries a user "persist" setting, or belong to a group with at least one div that does
var cssdisplay=(jQuery.inArray(this.id, persistopenids)!=-1)? 'block' : 'none'
}
else{
var cssdisplay=this.getAttr('hide')? 'none' : null
}
if (urlparamopenids[0]=="all" || jQuery.inArray(this.id, urlparamopenids)!=-1){ //if url parameter string contains the single array element "all", or this div's ID
cssdisplay='block' //set div to "block", overriding any other setting
}
else if (urlparamopenids[0]=="none"){
cssdisplay='none' //set div to "none", overriding any other setting
}
this.$divref.css(ac.generatemap(['height', this.getAttr('height')], ['display', cssdisplay]))
this.$divref.attr(ac.generatemap(['groupname', this.getAttr('group')], ['fade', this.getAttr('fade')], ['speed', this.getAttr('speed')]))
if (this.getAttr('group')){ //if this DIV has the "group" attr defined
var targetgroup=ac.divgroups[this.getAttr('group')] || (ac.divgroups[this.getAttr('group')]={}) //Get settings for this group, or if it no settings exist yet, create blank object to store them in
targetgroup.count=(targetgroup.count||0)+1 //count # of DIVs within this group
if (jQuery.inArray(this.id, urlparamopenids)!=-1){ //if url parameter string contains this div's ID
targetgroup.lastactivedivid=this.id //remember this DIV as the last "active" DIV (this DIV will be expanded). Overrides other settings
targetgroup.overridepersist=1 //Indicate to override persisted div that would have been expanded
}
if (!targetgroup.lastactivedivid && this.$divref.css('display')!='none' || cssdisplay=="block" && typeof targetgroup.overridepersist=="undefined") //if this DIV was open by default or should be open due to persistence
targetgroup.lastactivedivid=this.id //remember this DIV as the last "active" DIV (this DIV will be expanded)
this.$divref.css({display:'none'}) //hide any DIV that's part of said group for now
}
}) //end divholders.each
jQuery.each(ac.divgroups, function(){ //loop through each group
if (this.lastactivedivid && urlparamopenids[0]!="none") //show last "active" DIV within each group (one that should be expanded), unless url param="none"
ac.divholders[this.lastactivedivid].$divref.show()
})
if (animatedcollapse.ontoggle){
jQuery.each(ac.divholders, function(){ //loop through each collapsible DIV object and fire ontoggle event
animatedcollapse.ontoggle(jQuery, this.$divref.get(0), this.$divref.css('display'))
})
}
//Parse page for links containing rel attribute
var $allcontrols=$('a[rel]').filter('[rel^="collapse["], [rel^="expand["], [rel^="toggle["]') //get all elements on page with rel="collapse[]", "expand[]" and "toggle[]"
$allcontrols.each(function(){ //loop though each control link
this._divids=this.getAttribute('rel').replace(/(^\w+)|(\s+)/g, "").replace(/[\[\]']/g, "") //cache value 'div1,div2,etc' within identifier[div1,div2,etc]
if (this.getElementsByTagName('img').length==1 && ac.divholders[this._divids]){ //if control is an image link that toggles a single DIV (must be one to one to update status image)
animatedcollapse.preloadimage(this.getAttribute('data-openimage'), this.getAttribute('data-closedimage')) //preload control images (if defined)
$togglerimage=$(this).find('img').eq(0).data('srcs', {open:this.getAttribute('data-openimage'), closed:this.getAttribute('data-closedimage')}) //remember open and closed images' paths
ac.divholders[this._divids].$togglerimage=$(this).find('img').eq(0) //save reference to toggler image (to be updated inside slideengine()
ac.divholders[this._divids].$togglerimage.attr('src', (ac.divholders[this._divids].$divref.css('display')=="none")? $togglerimage.data('srcs').closed : $togglerimage.data('srcs').open)
}
$(this).click(function(){ //assign click behavior to each control link
var relattr=this.getAttribute('rel')
var divids=(this._divids=="")? [] : this._divids.split(',') //convert 'div1,div2,etc' to array
if (divids.length>0){
animatedcollapse[/expand/i.test(relattr)? 'show' : /collapse/i.test(relattr)? 'hide' : 'toggle'](divids) //call corresponding public function
return false
}
}) //end control.click
})// end control.each
$(window).bind('unload', function(){
ac.uninit()
})
}) //end doc.ready()
},
uninit:function(){
var opendivids='', groupswithpersist=''
jQuery.each(this.divholders, function(){
if (this.$divref.css('display')!='none'){
opendivids+=this.id+',' //store ids of DIVs that are expanded when page unloads: 'div1,div2,etc'
}
if (this.getAttr('group') && this.getAttr('persist'))
groupswithpersist+=this.getAttr('group')+',' //store groups with which at least one DIV has persistance enabled: 'group1,group2,etc'
})
opendivids=(opendivids=='')? 'nada' : opendivids.replace(/,$/, '')
groupswithpersist=(groupswithpersist=='')? 'nada' : groupswithpersist.replace(/,$/, '')
this.setCookie('acopendivids', opendivids)
this.setCookie('acgroupswithpersist', groupswithpersist)
},
getCookie:function(Name){
var re=new RegExp(Name+"=[^;]*", "i"); //construct RE to search for target name/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re)[0].split("=")[1] //return its value
return null
},
setCookie:function(name, value, days){
if (typeof days!="undefined"){ //if set persistent cookie
var expireDate = new Date()
expireDate.setDate(expireDate.getDate()+days)
document.cookie = name+"="+value+"; path=/; expires="+expireDate.toGMTString()
}
else //else if this is a session only cookie
document.cookie = name+"="+value+"; path=/"
},
urlparamselect:function(){
window.location.search.match(/expanddiv=([\w\-_,]+)/i) //search for expanddiv=divid or divid1,divid2,etc
return (RegExp.$1!="")? RegExp.$1.split(",") : []
},
preloadimage:function(){
var preloadimages=this.preloadimages
for (var i=0; i<arguments.length; i++){
if (arguments[i] && arguments[i].length>0){
preloadimages[preloadimages.length]=new Image()
preloadimages[preloadimages.length-1].src=arguments[i]
}
}
}
}
Hello - I'm trying to add a fade effect between slideshow transitions. The script I'm building from is the Rich HTML Slideshow script which appears below. The slides that rotate are wrapped in <div> tags with a class of "dyncontent" and I've managed to make the slideshow transition just fine, but not with any kind of fade effect. It just "snaps" from one slide to the next. Is this a fairly simple addition? Thanks! <script type="text/javascript"> if (document.all || document.getElementById){ //if IE4 or NS6+ document.write('<style type="text/css">\n') document.write('.dyncontent{display: none; width: 250px; height: 60px;}\n') document.write('</style>') } var curcontentindex=0 var messages=new Array() function getElementByClass(classname){ var inc=0 var alltags=document.all? document.all : document.getElementsByTagName("*") for (i=0; i<alltags.length; i++){ if (alltags[i].className==classname) messages[inc++]=alltags[i] } } function rotatecontent(){ //get current message index (to show it): curcontentindex=(curcontentindex<messages.length-1)? curcontentindex+1 : 0 //get previous message index (to hide it): prevcontentindex=(curcontentindex==0)? messages.length-1 : curcontentindex-1 messages[prevcontentindex].style.display="none" //hide previous message messages[curcontentindex].style.display="block" //show current message } window.onload=function(){ if (document.all || document.getElementById){ getElementByClass("dyncontent") setInterval("rotatecontent()", 2000) } } </script> PHP 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" /> <title>Untitled Document</title> <script type="text/javascript"> <!-- var image1=new Image() image1.src="images/slideshow/image001.jpg" var image2=new Image() image2.src="images/slideshow/image002.jpg" var image3=new Image() image3.src="images/slideshow/image003.jpg" var image4=new Image() image4.src="images/slideshow/image004.jpg" var image5=new Image() image5.src="images/slideshow/image005.jpg" var image6=new Image() image6.src="images/slideshow/image006.jpg" var image7=new Image() image7.src="images/slideshow/image007.jpg" var image8=new Image() image8.src="images/slideshow/image008.jpg" var image9=new Image() image9.src="images/slideshow/image009.jpg" var image10=new Image() image10.src="images/slideshow/image010.jpg" var image11=new Image() image11.src="images/slideshow/image011.jpg" var image12=new Image() image12.src="images/slideshow/image012.jpg" var image13=new Image() image13.src="images/slideshow/image013.jpg" var image14=new Image() image14.src="images/slideshow/image014.jpg" var image15=new Image() image15.src="images/slideshow/image015.jpg" var image16=new Image() image16.src="images/slideshow/image016.jpg" var image17=new Image() image17.src="images/slideshow/image017.jpg" var image18=new Image() image18.src="images/slideshow/image018.jpg" var image19=new Image() image19.src="images/slideshow/image019.jpg" var image20=new Image() image20.src="images/slideshow/image020.jpg" //--> </script> </head> <body> <img src="images/slideshow/image001.jpg" name="slide"> <script type="text/javascript"> <!-- //variable that will increment through the images var step=1 function slideit(){ //if browser does not support the image object, exit. if (!document.images) return document.images.slide.src=eval("image"+step+".src" ) if (step<20) step++ else step=1 //call function "slideit()" every 2.5 seconds setTimeout("slideit()",2500) } slideit() //--> </script> </body> </html> Hi everyone, I was wondering if jQuery or mootools has a set of scripts that creates a page slide effect with a stationary menu? What I mean is instead of loading a page when you click a link, all pages of the website are loaded at first, and then when a link is clicked, the corresponding page slides onto the screen. The navigation menu remains unchanged (except for dropdown menus) throughout everything. This is a perfect example of what I'm looking for: www.mimeartist.com Can anyone point me to the right direction? I tried to search for this but didn't come up with too many great results, and I searched the jQuery documentation and wasn't able to find a slider feature. Thanks. Hello everybody! This is my first post at CodingForums! I'm currently designing a wordpress theme, and I require a bit of javascript for a hover effect. I'm using Wordpress Jquery + Jquery Color Animations plugin. The structu I use a div (class="post") as a container for the wordpress post, and within the "post" div, I have a span (class="title") which I use to display the title of the post. What I want to do is: when the user hovers over (OnMouseOver) "post" div: ".title" spans's background color fades from black to red. when the user hovers out (OnMouserOut) "post" div: ".title" spans's background color fades back to black. The Code Code: $j(document).ready(function(){
$j(".posts").hover(function(){
$j (".posts .title").animate({ backgroundColor: "#FF0062" }, 300);
},function(){
$j(".posts .title").animate({ backgroundColor: "#231F20" }, 300);
});
});
The Problem The code works, except when the user hovers over any "post" div, all "title" span change color. So my question is, how do I target the code to address ONLY the "title" span in the "post" div that is in hover state? Any help would be greatly appreciated, Cheers, Drew. http://www.javascriptkit.com/javatut...rnalphp2.shtml Anyone have a decent way of adding a fade affect to this script? the following script works great in Chrome. very smooth... but in Firefox and IE it is very jittery/jumpy from 0 to 100 opacity too quickly... Code: function changeFadeLevel(newval){
document.getElementById("redbg").style.opacity=newval/100;
document.getElementById("redbg").style.filter = "alpha(opacity=" + newval + ")";
}
function changeBg(state){
if(state==1){
for(var i=0; i<=100; i++){
setTimeout("changeFadeLevel("+i+")",i*3);
}
document.getElementById("overlaystatus").value='on';
}else{
for(var i=0; i<=100; i++){
setTimeout("changeFadeLevel("+(100-i)+")",i*3);
}
document.getElementById("overlaystatus").value='off';
}
}
Code: <input type="hidden" id="overlaystatus" value="off" /> <img src="/bg.jpg" id="bg" border"0" /> <img src="/redbg.jpg" id="redbg" border="0" /> the images are 1596x1057 resolution stretched to 100% width with css Code: html, body {
height: 100%;
margin: 0;
padding: 0;
background:#000;
font-family:Arial, Helvetica, sans-serif;
}
img#bg{
left: 0px;
min-width: 1000px;
position: absolute;
top: 0px;
width: 100%;
z-index: 1;
}
img#redbg{
left: 0px;
min-width: 1000px;
position: absolute;
top: 0px;
width: 100%;
z-index: 5;
opacity:0.0;
filter:alpha(opacity=0);
}
This is a really awesome script that I'm sure all of you can put to use if you haven't yet heard of it. However, I'm trying to get it to fade a background image on my css styled navigation for my a:hover. Here is the script with a little simple tutorial on how to set it up: http://bavotasan.com/tutorials/creat...r-fade-effect/ My only other knowledge is in PHP, so after about 2 hours of fail in this client-side language, I decided it was about time I should post where some experienced people can help. I really appreciate all time you spend on this, and don't think it will take a moderate Javascript programmer very long. This is the link to my site so far: http://matt.mw/help-request You can see the script working as it is on my little yellow MW logo on the right side of the navigation. So in my scenario, I am looking to fade button.png to button-hover.png (both repeating on the x axis). Any ideas? Hello, I'm learning javascript, and was wondering if it was Possible to have buttons/links that you click, the whole page fades out, and then fade's in, with different stuff. here are my ideas for just changing the stuff Text: 1. having a javascript src file to start, and then when the button is clicked, that is formatted to white, the text layer is moved down, and a new javascript file is loaded? 2.variables? any help would be appreciated! Thanks, Cookies, whatever this forum gives out, you may receive! Hi, I'm a complete novice using javascript. I'm trying to get a mootools plugin to work with a slide in/slide out javascript using multiple divs. Here's the page: http://pawsdogs.com/test/Site/work2.htm The mootools code (Noobslide) slides a main image on the right when you click thumbnails on the left, which are wrapped in a thumb mask using CSS. The first row of thumbnails works perfectly, but when it's passed on to the next div the mask isn't passed on and the effect breaks down. Thanks so much if anyone can help! Here's the html: Code: <li><a href="#" id="slidecontrol_2" class="slidecontrol">Click Here</a>
<div id="slidedisplay_2" style="display:none;">
<div id="thumbs7">
<div class="thumbs">
<div><img src="images2/img4.jpg" alt="Photo Thumb" /></div>
<div><img src="images2/img5.jpg" alt="Photo Thumb" /></div>
<div><img src="images2/img6.jpg" alt="Photo Thumb" /></div>
</div>
<div id="thumbs_mask7"></div>
<p id="thumbs_handles7">
<span></span>
<span></span>
<span></span>
</p>
</div>
</div></li>
<li><a href="#" id="slidecontrol_3" class="slidecontrol">asdf</a>
<div id="slidedisplay_3" style="display:none;">
<div id="thumbs7">
<div class="thumbs">
<div><img src="images2/img2.jpg" alt="Photo Thumb" /></div>
<div><img src="images2/img3.jpg" alt="Photo Thumb" /></div>
</div>
<div id="thumbs_mask7"></div>
<p id="thumbs_handles7">
<span></span>
<span></span>
</p>
</div>
</div>
The javascript: Code: $(document).ready(function () {
$('a.slidecontrol').click(function(){
var $this = $(this);
var divID = $this.attr("id").replace("slidecontrol_", "slidedisplay_");
var $div = $('#'+divID);
if ($div.is(':visible')) {
$div.slideUp(500);
} else {
$div.slideDown(500);
}
return false;
});
});
The CSS: Code: #thumbs7{
position:relative;
width:200px;
clear:both;
height:41px;
overflow:hidden;
}
#thumbs7 .thumbs, #thumbs_handles7, #thumbs_mask7{
position:absolute;
top:0;
width:100%;
height:41px;
}
#thumbs7 .thumbs div, #thumbs_handles7 span{
display:block;
width:60px;
height:41px;
margin:0;
float:left;
cursor:pointer;
}
#thumbs7 .thumbs div img{
width:54px;
float:right;
}
#thumbs_handles7 span{
background:url(../images2/thumb_invisible.gif) no-repeat;
}
#thumbs_mask7{
width:1200px;
background:url(../images2/thumbs_mask.gif) no-repeat center top;
}
Hi I have this code: <script type="text/javascript"> function Ajax() { var $http, $self = arguments.callee; if (window.XMLHttpRequest) { $http = new XMLHttpRequest(); } else if (window.ActiveXObject) { try { $http = new ActiveXObject('Msxml2.XMLHTTP'); } catch(e) { $http = new ActiveXObject('Microsoft.XMLHTTP'); } } if ($http) { $http.onreadystatechange = function() { if (/4|^complete$/.test($http.readyState)) { document.getElementById('ReloadThis').innerHTML = $http.responseText; setTimeout(function(){$self();}, 20000); } }; $http.open('GET', '../inc/record_count.php' + '?' + new Date().getTime(), true); $http.send(null); } } </script> <script type="text/javascript"> setTimeout(function() {Ajax();}, 1000); </script> Can you help me make this make a fade in effect?? is it possible if you have a div with child divs inside , so i fade out the parent div but the opacity of the child divs stays at 100% ? thank you |
|||||||