JavaScript - Javascript Jquery Div Changer Animate Problem

I'm having a slight problem with php pagination and jquery/js. On the following page http://dev2.bluemuledesign.com/athletes.php you'll see an "athlete profile" area. Whenever an athlete photo is selected, javascript/php are used to switch out the athlete info. This works perfectly fine. The problem occurs if I use the left or right arrows to view more athletes (the left and right arrows are set with php pagination to switch to the next four records in the database). Whenever I do this, the athlete info defaults back to the first person from the initial load. Also, the javascript/jquery quits working and won't let me view the info for one of the newly displayed athletes. So I have two questions:

1) Can anyone tell me why it defaults back to the original athlete info? I'm assuming it has something to do with me not setting a cookie to remember the currently selected athlete.
2) Why does the javascript quit working when I view the next set of athletes?

Also, the jquery slideshow that I am implementing is an alteration of this: http://designm.ag/tutorials/image-rotator-css-jquery/

Any help would be greatly appreciated.

hi I am trying to play a video from youtube. What I have done so far is getting videos from my database and displaying all those videos thumbnails. So now what i want is to when i click any thumbnail it should play that video in my website. How can I do this?

Here is my code
Code:

function showResult(result) {
        $('#videosLoader').css('display','none');
            var videoId = result.split(" ");
            for(i = 0; i < videoId.length - 1; i++) {
            var vidId = $.trim(videoId[i]);
            vidLink = getScreen(vidId,"small");
            $('#videosList').append("<div class='playVid'>" + 
                                        "<img width=80 height=80 src=" + vidLink + " alt='' /> " + 
                                        "<input type='hidden' name='vidId' value='" + vidId + "' />" + 
                                    "</div>").addClass("playVid");
    }
    
    $('.playVid').click(function() {
        var val = $("input[name='vidId']").val();
        alert("val");
        $("#haveYourDefinition").append("<embed src='http://www.youtube.com/v/" + val + "&rel=1' pluginspage='http://adobe.com/go/getflashplayer' type='application/x-shockwave-flash' quality='high' width='450' height='376' bgcolor='#ffffff' loop='false'></embed>");
    });

When I click any thumbnail it does nothing. Why and please tell me how to do this? Help

First of all I really appreciate you reading this. Im going to try to be detailed so I can get help... I have wasted over 8 hours on this already and I'm going to (scuse my french) f'ing lose my mind. I'm about ready to pay someone... if youre intersted PM me.

So, I have a wordpress blog that came with several javascript includes already in the header related to the features of the blog. These features include a gallery which has little popups over the images on mouseover.

the includes were 'jquery.min.js', and 'script.js' (in that order) followed by a few other includes for other features.

That works fine, but then I wanted to replace the menu with a different menu which uses lavalamp jquery (he http://www.gmarwaha.com/blog/2007/08...jquery-lovers/ )

For the new menu, it requires jquery.min.js and 'custom.js'. I took out jquery.min because it was redundant and put custom underneath 'script.js' in the header.

I got the menu working, except then I noticed the gallery rollovers stopped working. I moved around the order of the different includes in the header, then neither worked. after I fiddled with it more, the menu stopped working but the gallery would work.

After Screwing with this for an awful long time, and a process of elimination, i found that wp_head was causing problems (where it hooks in the headers for all my wordpress plugins). I then realized 'cforms' was using jquery, as well as contact form 7, and I figured they must be conflicting somehow.

So I temporarily commented out wp_head so I could focus on the other elements first, and getting them working.

At this point (5 hours or so) I decided it must be something in script.js as well as custom.js which are conflicting. I have NO idea of anything about javascript so I started by going through script.js (for the gallery) and through a process of elimination i deleted all the functions that would stop it from working. my thought process was i could then do the same to custom.js (for the menu) and then hopefully with both of them trimmed everything would not conflict.

So.. i opened the js file, literally removed ONE function (completely unrelated) to the gallery.. it was something about validating a contact form, and was only like 5 lines of code, and suddenly the gallery doesnt work ... GRRRRRRRRRRRRRRRR

I am now at a complete loss of what to do.. i really need this working and I must not be doing something right. I dont understand how one function COMPLETELY unrelated to another will ruin everything.

Please PM me if interested, i'm willing to pay someone to fix this

here are the files in case you need them

heres my header first. I have tried every possible combination of wher to put the different files by the way, no dice

Code:

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
<link href="<?php bloginfo('template_directory'); ?>/menu.css" rel="stylesheet" type="text/css" />
<link href="<?php bloginfo('template_directory'); ?>/style1.css" rel="stylesheet" type="text/css" />

<!-- commented out while I try to figure this out 
<script type='text/javascript' src='<?php bloginfo('template_directory'); ?>/custom.js'></script>
-->

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/script/jquery.min.js"></script> 
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/script/script.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/script/superfish.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/script/fader.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/script/jquery.prettyPhoto.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/script/cufon-yui.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/script/Andika_Basic_400.font.js"></script>

I may be too close to this to see the answer but i have an image viewer with one big image and lots of little ones. What i need is that when you click on one of the smaller ones it grabs it's image src and sets the larger photo to that src. The small images are dynamic but the larger image will have a static id.

Hi
I have this code to change the color of elements in a div. But I cant code the active,followed and visited links .how to do that?
Code:

<html>
<head>
</head>
<body>
<script>
function fun()
{
var bg=document.getElementById("t1").value;
var txt=document.getElementById("t2").value;
var al=document.getElementById("t3").value;
var vl=document.getElementById("t4").value;
var hv=document.getElementById("t5").value;
document.getElementById("dv").style.backgroundColor=bg;
document.getElementById("dv").style.alinkcolor=txt;
document.getElementById("dv").style.vlinkcolor=al;
document.getElementById("dv").style.color=vl;
document.getElementById("dv").style.color=hv;
}
</script>
<h1>Enter Colors: </h1>
Background: <input type="text" id="t1" name="txt1"><br/><br/>
Text:  <input type="text" id="t2" name="txt2"><br/><br/>
Link:  <input type="text" id="t3" name="link"><br/><br/>
Active Link: <input type="text" id="t4" name="alink"><br/><br/>
Followed Link: <input type="text" id="t5" name="vlink"><br/><br/>
<input type="button" value="test" onclick="fun();"><br/><br/>
<div id="dv">&nbsp;hello
This is a Test<br/>
You Have Selected These Colors<br/>
<a href="#">This is a Test Link</a><br/></div>
</body>
</html>

Plz help me.
Thnx in advance

Hi, on my site, I have added Style 1 and Style 2 in my menu at the top right

http://www.thisisworthing.com/default.php#

when I click on Theme 2, it doesn't work?!

please help!

I have this working on my other site: http://www.mypubspace.com

what am i doing wrong?!

Hi,

I am no very little when it comes to Javascript but I have seen a few sites using pre populated text boxes for login forms. So Username and password appears in the boxes to save space.

The code below works fine onload of the site in all browsers, everything also works fine in firefox but ie the following doesn't seem to work.

When a user clicks to enter their password in i.e. it doesn't change the form to password characters so input plain text. Also when you click out of either box it doesn't seem to re-populate the boxes with my Username or Password text.

Any help would greatly be appreciated.

Code:

<script>
function HideLabel(txtField){
                if(txtField.name=='myusername'){
                                if(txtField.value==txtField.defaultValue)
                                                txtField.value = '';
                                else
                                                txtField.select();
                } else if(txtField.name=='mypassword'){
                                if(txtField.value==txtField.defaultValue){
                                                txtField.value = '';
                                                txtField.type = 'password';
                                }
                                else{
                                                txtField.type = 'password';
                                                txtField.select();
                                }
                }
}


function ShowLabel(txtField){
                if(txtField.name=='myusername'){
                                if(txtField.value.trim()=='')
                                                txtField.value = txtField.defaultValue;
                }else if(txtField.name=='mypassword'){
                                if(txtField.value.trim()==''){
                                                txtField.value = txtField.defaultValue;
                                                txtField.type = 'text';
                                }
                }
}
</script>

<input type="text" name="myusername" id="myusername" onfocus="HideLabel(this)" onblur="ShowLabel(this)" style="border:0;" value="Username" />

<input type="test" name="mypassword" id="mypassword" value="Password" onfocus="HideLabel(this)" onblur="ShowLabel(this)" style="border:0;" />

Can someone tell me why this short script won't work?

<script type="text/JavaScript">
<!--
function timedRefresh(timeoutPeriod) {
var number = rand(7);

if (number == 1) {
var bgcss = "theme1.css";
}
else if (number == 2) {
var bgcss = "theme2.css";
}
else if (number == 3) {
var bgcss = "theme3.css";
}
else if (number == 4) {
var bgcss = "theme4.css";
}
else if (number == 5) {
var bgcss = "theme5.css";
}
else if (number == 6) {
var bgcss = "theme6.css";
}
else if (number == 7) {
var bgcss = "theme7.css";
}

document.write('<link href="bgcss "'+ 'type=text/css rel=stylesheet>');
}
// -->
</script>

</head>

<body onload="JavaScript:timedRefresh(10000);">

Hi.
I have a JavaScript that resizes an image held within an Iframe. It works perfectly, BUT only works if there is an alert box in the code.

/*Image resizing scripts - Dependant on page size!*/
///////////////////////////////////
function Im_Resize()
{
var imheight = 550;

/*Change the IFrame CSS*/
iframeheight = imheight + 15; /* +15px for the x-axis scroll bar*/
var IFrame = document.getElementById('MainFrame');
IFrame.style.height = iframeheight + 'px';

alert('after iframe size - before im change');

/*Change the Image CSS*/
var innerdoc = IFrame.contentDocument || IFrame.contentWindow.document;

Image1 = innerdoc.getElementById('MainImg1');
Image1.style.height = imheight + 'px';
}

If I take the alert box out the code just doesn't work?? I thought that it was that during the loading of the page an element hadn't been loaded yet, but a delay doesn't work either. If I press 'ok' on the alert box too quick it doesn't work either.
In terms of HTML this script is run whenever the page is loaded and is also fired when a click event is detected on one of the divs on the page.
Any help would be great
Ed

hey guys
i downloaded the 'Content Slider v2.4', and this has a feature which will save a cookie used to remember and recall the last content viewed by the user when they return to the page. (click here for more information on the script.)


the only thing is that this is made for pages with URLs such as:
Quote:
www.mysite.com/gallery_album_1/content.php
but my URLS are set out like:
Quote:
www.mysite.com/content.php?gallery_album_1

is there a way to make to so the cookie remembers the page via the "php?gallery_album_1" part instead of the "content.php" part.

i need it to be like this simply because i have multiple galleries coming from the oe page, eg:
Quote:
www.mysite.com/content.php?gallery_album_1
www.mysite.com/content.php?gallery_album_2
www.mysite.com/content.php?gallery_album_3

the main code of the js is as follows:

Code:

//** Featured Content Slider script- (c) Dynamic Drive DHTML code library: http://www.dynamicdrive.com.
//** May 2nd, 08'- Script rewritten and updated to 2.0.
//** June 12th, 08'- Script updated to v 2.3, which adds the following features:
			//1) Changed behavior of script to actually collapse the previous content when the active one is shown, instead of just tucking it underneath the later.
			//2) Added setting to reveal a content either via "click" or "mouseover" of pagination links (default is former).
			//3) Added public function for jumping to a particular slide within a Featured Content instance using an arbitrary link, for example.

//** July 11th, 08'- Script updated to v 2.4:
			//1) Added ability to select a particular slide when the page first loads using a URL parameter (ie: mypage.htm?myslider=4 to select 4th slide in "myslider")
			//2) Fixed bug where the first slide disappears when the mouse clicks or mouses over it when page first loads.

var featuredcontentslider={

//3 variables below you can customize if desired:
ajaxloadingmsg: '<div style="margin: 20px 0 0 20px"><img src="../images/loading.gif" /> Fetching slider Contents. Please wait...</div>',
bustajaxcache: true, //bust caching of external ajax page after 1st request?
enablepersist: true, //persist to last content viewed when returning to page?

settingcaches: {}, //object to cache "setting" object of each script instance

jumpTo:function(fcsid, pagenumber){ //public function to go to a slide manually.
	this.turnpage(this.settingcaches[fcsid], pagenumber)
},

ajaxconnect:function(setting){
	var page_request = false
	if (window.ActiveXObject){ //Test for support for ActiveXObject in IE first (as XMLHttpRequest in IE7 is broken)
		try {
		page_request = new ActiveXObject("Msxml2.XMLHTTP")
		} 
		catch (e){
			try{
			page_request = new ActiveXObject("Microsoft.XMLHTTP")
			}
			catch (e){}
		}
	}
	else if (window.XMLHttpRequest) // if Mozilla, Safari etc
		page_request = new XMLHttpRequest()
	else
		return false
	var pageurl=setting.contentsource[1]
	page_request.onreadystatechange=function(){
		featuredcontentslider.ajaxpopulate(page_request, setting)
	}
	document.getElementById(setting.id).innerHTML=this.ajaxloadingmsg
	var bustcache=(!this.bustajaxcache)? "" : (pageurl.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
	page_request.open('GET', pageurl+bustcache, true)
	page_request.send(null)
},

ajaxpopulate:function(page_request, setting){
	if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)){
		document.getElementById(setting.id).innerHTML=page_request.responseText
		this.buildpaginate(setting)
	}
},

buildcontentdivs:function(setting){
	var alldivs=document.getElementById(setting.id).getElementsByTagName("div")
	for (var i=0; i<alldivs.length; i++){
		if (this.css(alldivs[i], "contentdiv", "check")){ //check for DIVs with class "contentdiv"
			setting.contentdivs.push(alldivs[i])
				alldivs[i].style.display="none" //collapse all content DIVs to begin with
		}
	}
},

buildpaginate:function(setting){
	this.buildcontentdivs(setting)
	var sliderdiv=document.getElementById(setting.id)
	var pdiv=document.getElementById("paginate-"+setting.id)
	var phtml=""
	var toc=setting.toc
	var nextprev=setting.nextprev
	if (typeof toc=="string" && toc!="markup" || typeof toc=="object"){
		for (var i=1; i<=setting.contentdivs.length; i++){
			phtml+='<a href="#'+i+'" class="toc">'+(typeof toc=="string"? toc.replace(/#increment/, i) : toc[i-1])+'</a> '
		}
		phtml=(nextprev[0]!=''? '<a href="#prev" class="prev">'+nextprev[0]+'</a> ' : '') + phtml + (nextprev[1]!=''? '<a href="#next" class="next">'+nextprev[1]+'</a>' : '')
		pdiv.innerHTML=phtml
	}
	var pdivlinks=pdiv.getElementsByTagName("a")
	var toclinkscount=0 //var to keep track of actual # of toc links
	for (var i=0; i<pdivlinks.length; i++){
		if (this.css(pdivlinks[i], "toc", "check")){
			if (toclinkscount>setting.contentdivs.length-1){ //if this toc link is out of range (user defined more toc links then there are contents)
				pdivlinks[i].style.display="none" //hide this toc link
				continue
			}
			pdivlinks[i].setAttribute("rel", ++toclinkscount) //store page number inside toc link
			pdivlinks[i][setting.revealtype]=function(){
				featuredcontentslider.turnpage(setting, this.getAttribute("rel"))
				return false
			}
			setting.toclinks.push(pdivlinks[i])
		}
		else if (this.css(pdivlinks[i], "prev", "check") || this.css(pdivlinks[i], "next", "check")){ //check for links with class "prev" or "next"
			pdivlinks[i].onclick=function(){
				featuredcontentslider.turnpage(setting, this.className)
				return false
			}
		}
	}
	this.turnpage(setting, setting.currentpage, true)
	if (setting.autorotate[0]){ //if auto rotate enabled
		pdiv[setting.revealtype]=function(){
			featuredcontentslider.cleartimer(setting, window["fcsautorun"+setting.id])
		}
		sliderdiv["onclick"]=function(){ //stop content slider when slides themselves are clicked on
			featuredcontentslider.cleartimer(setting, window["fcsautorun"+setting.id])
		}
		setting.autorotate[1]=setting.autorotate[1]+(1/setting.enablefade[1]*50) //add time to run fade animation (roughly) to delay between rotation
	 this.autorotate(setting)
	}
},

urlparamselect:function(fcsid){
	var result=window.location.search.match(new RegExp(fcsid+"=(\\d+)", "i")) //check for "?featuredcontentsliderid=2" in URL
	return (result==null)? null : parseInt(RegExp.$1) //returns null or index, where index (int) is the selected tab's index
},

turnpage:function(setting, thepage, autocall){
	var currentpage=setting.currentpage //current page # before change
	var totalpages=setting.contentdivs.length
	var turntopage=(/prev/i.test(thepage))? currentpage-1 : (/next/i.test(thepage))? currentpage+1 : parseInt(thepage)
	turntopage=(turntopage<1)? totalpages : (turntopage>totalpages)? 1 : turntopage //test for out of bound and adjust
	if (turntopage==setting.currentpage && typeof autocall=="undefined") //if a pagination link is clicked on repeatedly
		return
	setting.currentpage=turntopage
	setting.contentdivs[turntopage-1].style.zIndex=++setting.topzindex
	this.cleartimer(setting, window["fcsfade"+setting.id])
	setting.cacheprevpage=setting.prevpage
	if (setting.enablefade[0]==true){
		setting.curopacity=0
		this.fadeup(setting)
	}
	if (setting.enablefade[0]==false){ //if fade is disabled, fire onChange event immediately (verus after fade is complete)
		setting.contentdivs[setting.prevpage-1].style.display="none" //collapse last content div shown (it was set to "block")
		setting.onChange(setting.prevpage, setting.currentpage)
	}
	setting.contentdivs[turntopage-1].style.visibility="visible"
	setting.contentdivs[turntopage-1].style.display="block"
	if (setting.prevpage<=setting.toclinks.length) //make sure pagination link exists (may not if manually defined via "markup", and user omitted)
		this.css(setting.toclinks[setting.prevpage-1], "selected", "remove")
	if (turntopage<=setting.toclinks.length) //make sure pagination link exists (may not if manually defined via "markup", and user omitted)
		this.css(setting.toclinks[turntopage-1], "selected", "add")
	setting.prevpage=turntopage
	if (this.enablepersist)
		this.setCookie("fcspersist"+setting.id, turntopage)
},

setopacity:function(setting, value){ //Sets the opacity of targetobject based on the passed in value setting (0 to 1 and in between)
	var targetobject=setting.contentdivs[setting.currentpage-1]
	if (targetobject.filters && targetobject.filters[0]){ //IE syntax
		if (typeof targetobject.filters[0].opacity=="number") //IE6
			targetobject.filters[0].opacity=value*100
		else //IE 5.5
			targetobject.style.filter="alpha(opacity="+value*100+")"
	}
	else if (typeof targetobject.style.MozOpacity!="undefined") //Old Mozilla syntax
		targetobject.style.MozOpacity=value
	else if (typeof targetobject.style.opacity!="undefined") //Standard opacity syntax
		targetobject.style.opacity=value
	setting.curopacity=value
},

fadeup:function(setting){
	if (setting.curopacity<1){
		this.setopacity(setting, setting.curopacity+setting.enablefade[1])
		window["fcsfade"+setting.id]=setTimeout(function(){featuredcontentslider.fadeup(setting)}, 50)
	}
	else{ //when fade is complete
		if (setting.cacheprevpage!=setting.currentpage) //if previous content isn't the same as the current shown div (happens the first time the page loads/ script is run)
			setting.contentdivs[setting.cacheprevpage-1].style.display="none" //collapse last content div shown (it was set to "block")
		setting.onChange(setting.cacheprevpage, setting.currentpage)
	}
},

cleartimer:function(setting, timervar){
	if (typeof timervar!="undefined"){
		clearTimeout(timervar)
		clearInterval(timervar)
		if (setting.cacheprevpage!=setting.currentpage){ //if previous content isn't the same as the current shown div
			setting.contentdivs[setting.cacheprevpage-1].style.display="none"
		}
	}
},

css:function(el, targetclass, action){
	var needle=new RegExp("(^|\\s+)"+targetclass+"($|\\s+)", "ig")
	if (action=="check")
		return needle.test(el.className)
	else if (action=="remove")
		el.className=el.className.replace(needle, "")
	else if (action=="add")
		el.className+=" "+targetclass
},

autorotate:function(setting){
 window["fcsautorun"+setting.id]=setInterval(function(){featuredcontentslider.turnpage(setting, "next")}, setting.autorotate[1])
},

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){
	document.cookie = name+"="+value

},


init:function(setting){
	var persistedpage=this.getCookie("fcspersist"+setting.id) || 1
	var urlselectedpage=this.urlparamselect(setting.id) //returns null or index from: mypage.htm?featuredcontentsliderid=index
	this.settingcaches[setting.id]=setting //cache "setting" object
	setting.contentdivs=[]
	setting.toclinks=[]
	setting.topzindex=0
	setting.currentpage=urlselectedpage || ((this.enablepersist)? persistedpage : 1)
	setting.prevpage=setting.currentpage
	setting.revealtype="on"+(setting.revealtype || "click")
	setting.curopacity=0
	setting.onChange=setting.onChange || function(){}
	if (setting.contentsource[0]=="inline")
		this.buildpaginate(setting)
	if (setting.contentsource[0]=="ajax")
		this.ajaxconnect(setting)
}

}

as far as i can see, the parts of the code which are about the cookies are labeled "enablepersist"


thanks guys

I'm trying to get the menu divs' width to grow, extending to the right but am not getting any animation at all...

I'm not sure if I even have the right code...

Code:

<script type="text/javascript">
$(document).ready(function(){	
    $('#menu').mouseover(function(){
      
      $(this).stop().animate({"right": 20 }, 400);
    }).mouseout(function(){ 
      $(this).stop().animate({"right": 0 }, 400);
    });;
});
</script> 

<div id="menu" style="
	width:90px;height:24px;
    font: #C12026;
    text-align:right;
    padding-right:10px;
    padding-top: 5px;">

<a href="#top" class="scroll">Home</a></div>
<br />
<div id="menu" style="
	width:90px;height:24px;
    font: #C12026;
    text-align:right;
    padding-right:10px;
    padding-top: 5px;">
    
    <a href="#who" class="scroll">Who We Are</a>
    </div>
    <br />
<div id="menu" style="
	width:90px;height:24px;
    font: #C12026;
    text-align:right;
    padding-right:10px;
    padding-top: 5px;">
    
    <a href="#what" class="scroll">What we do</a>
    </div>
    <br />
<div id="menu" style="
	width:90px;height:24px;
    font: #C12026;
    text-align:right;
    padding-right:10px;
    padding-top: 5px;">
    
    <a href="#contact" class="scroll">Contact Us</a>
</div>

and here is the css

Code:

#menu {
	width:125px;
	height:24px;
    background:#C00;
    font: #C00;
}

#menu a {
color: #C00;

}

#menu a:visited {
color: #C00;
}

#menu a:hover {
color: #FFF;
}

right now I'm just trying to get it to grow but my original idea was to have the bars small with no words then when you mouse over it reveals the words when it grows to the right around 50px. When clicked it stays extended...

ANANANAY Help would be greatly appreciated!!!

here is the link to the temp site: http://sethwardallison.com/fargo/index.htm

So, I've built this navigation bar so far and I'm curious if it's even possible to achieve what I'm thinking.
Currently, when you hover over each of the links they drop down (padding is increased).

Now, what I'm curious in doing is if you hover over say "test1", test2-4 also drop with it but in the padding that has been created from the drop down, "test1" information shows up. Allowing the user to click or read whatever information is in there. Also, if the user would like to, they can move their mouse to test2 and everything would animate (opacity, this I can do I think) to whatever is in the test2 field, test3 doing the same and so on.

I haven't had much success with this, I've created a completely separate panel before, but that didn't exactly work or I wasn't doing it correctly.

Here is what I've been working on, ANY help would be appreciated! Thanks!

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
	$(function() { 
		$("#nav li > a").hover(function() {
			$(this).stop().animate({paddingTop: "100px"}, 100);
		}, 
		function() {
			$(this).stop().animate({paddingTop: "10px"}, 200);		
		});
	});
</script>

<style type="text/css">	
	#nav
	{
		position: absolute;
		top: 0;
		left: 60px;
		padding: 0;
		margin: 0;
		list-style: none;
	}
	
	#nav li
	{
		display: inline;
	}
	
	#nav li a
	{
		float: left;
		display: block;
		color: #555;
		text-decoration: none;
		padding: 10px 30px;
		background-color: #d1d1d1;
		border-top: none;
	}
</style>

</head>

<body>

<div id="wrap">

    <ul id="nav">
        <li><a href="">test1</a></li>
        <li><a href="">test2</a></li>
        <li><a href="">test3</a></li>
        <li><a href="">test4</a></li>

    </ul>
</div>
</body>
</html>

Hello.
I have my animation script working and I use setInterval to move by a number of pixels specified as 'this.gap', which defaults to 2 pixels (or 2/100's for opacity).

I would like to use a curve, such as the first half of a sine curve, for a more graceful effect.

Before the setInterval is begun I know the 'from' and 'to' position and believe I could use these initial values to work out the gaps to move on each iteration. (My code is slightly complicated by the fact that I change an x value and either the 'from' or 'to' value depending on whether I'm increasing or decreasing the left/top/opacity.)

My maths is a little rusty and any suggestion would be welcome

Here's a code snippet but I could provide more on request. Andy.
Code:

function animateIt(o) {
    if ( o.from < o.to ) {
        var y = ( o.type == 'opacity' ) ? 100 : 1;
        o.x = (o.positive) ? o.x + this.gap/y : o.x - this.gap/y;
        if ( o.type == 'opacity' ) {
            this.theObj.style.filter = "alpha(opacity=" + (o.x * 100) + ")";
            this.theObj.style.opacity = o.x;
        } else {
            this.theObj.style[o.type] = o.x + 'px';
        }
        (o.positive) ? o.from += this.gap/y : o.to -= this.gap/y;
    } else {
        this.stopIt();
    }   
}

PS i have posted elsewhere but no response as yet.

I'm using the below code to expand and collapse a DIV on alternative clicks


Quote:
Code:

<script>
 function Tog(id){
var x=document.getElementById(id);
if(x) {
        if(x.style.display=='none') 
                                          { x.style.visibility='visible';
                                           x.style.display='block';
                                          }
          else{ x.style.visibility='hidden';
                  x.style.display='none';
               }
         }
                          }
</script>

<a href="#" onclick="Tog('togme')" > Click me tog 'togme'</a>
<div id="togme">
Content inside this DIv will hide and show on alternative clicks
</div>

When you click on the link div togme drops down suddenly, I need to make it slow and animated, however I'm not able to make it animated yet.

I tried playing around with the below code

Code:

 
	 Quote:

	

	
		

			
				<script>
function show() {

var curheight=0;

var fullheight=document.getElementById("hidden").offsetHeight;
while(curheight<fullheight) {
curheight=curheight+10;
document.getElementById("hidden").style.height=curheight+"px";
document.getElementById("hidden").style.display="block";
// SET DELAY HERE FOR EVERY INCREMENT IN VALUE OF NEW HEIGHT
}
}
</script>
<i onclick="show()" >Click me</i>
<div id='hidden'  style="display:none;">
Hide me<br>
Hide me<br>
Hide me<br>
Hide me<br>
Hide me<br>
Hide me<br>
Hide me<br>
</div>
			
		

	
	

Still no luck, Something is wrong with the usage of display:block , It display whole of it in a click, Help me fix this

So I'm trying to modify this code to make it so a 1px border fades in on rollover of an image.

My CSS for the images has this class for an invisible border:
Code:

border: solid 1px rgba(242, 112, 17, .0);

I was assuming using this part of the Javascript code below that I could animate some kind of borderOpacity or something like that so the border would fade in from .0 to 1.

Code:

$('.item li img').animate({'opacity' : 1}).hover(function() {
					$(this).animate({'borderOpacity' : 1});
				}, function() {
					$(this).animate({'opacity' : 1});
				});

But I obviously am doing something wrong.

Any help would be greatly appreciated. Thanks!