|
JavaScript - Need Help Adding Fadein Effect.
Greetings everyone; Jesse here. Long time reader, first time poster.
I have a personal website, currently in development, located at: http://www.jesselang.ca If you click the right-facing arrows along the right side you'll open a side-bar column, clicking a left-facing arrow will then close the side-bar. This functionality is "OK" at best. What I would like to see is clicking the right-facing arrow causes the current sidebar to fade-in, and simultaneously have the arrow flip to a left-facing icon; the idea being to add a toggle function to the arrows. The code I'm using at the moment is shown below, this string works for me because it only allows 1 sidebar container to be displayed at a time... which is ideal. Code: <script type="text/javascript">
lastone='empty';
function showIt(lyr)
{if (lastone!='empty') lastone.style.display='none';
lastone=document.getElementById(lyr);
lastone.style.display='block';}
</script>
The respective html looks something like this: Code: <a onclick="javascript:showIt('interestcontainer')" class="arrow"><span>show interests sidebar</span></a>
The coresponding html for the container to display looks like this. This code also shows the "hide container" button: Code: <div id="interestcontainer" style='display:none;'>
<h4>interests<a onclick="interestcontainer.style.display='none';" class="back"><span>back</span></a></h4>
And the CSS looks like this: Code: a.arrow{
display:block;
float:right;
background:url(../images/ico-arrow.gif) top no-repeat;
text-decoration:none;
overflow:hidden;
width:13px;
height:11px;
margin-left:3px;}
------------------ Would it be asking to much to have someone help me achieve the following functionality? -load page with all side containers hidden -display only 1 side container at a time -fadein and fadeout effects -same button displays and hides -button swaps images for displat/hide commands Again, my code can be seen at: http://www.jesselang.ca http://jesselang.ca/files/style.css I'd very much appreciate the help. Thank you in advance. *j Similar TutorialsHello 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()
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> 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> I want to insert this star trail effect script to page below but star trail doesn't appear on most areas and script corrupts several objects' position. How can I insert it successfully? http://www.orkinosfilm.com/melissa/index.html Code: <head>
<style type="text/css">
body {overflow: scroll; overflow-x: hidden;}
.anyClass {
position: relative;
visibility: hidden;
left: -5000px;
}
</style>
</head>
<body bgcolor="#000000">
<p><!--webbot bot="HTMLMarkup" startspan --><script language="JavaScript1.2">
<!--
/*
Submitted by Marcin Wojtowicz [one_spook@hotmail.com]
Featured on JavaScript Kit (http://javascriptkit.com)
Modified by JK to be IE7+/ Firefox compatible
For this and over 400+ free scripts, visit http://javascriptkit.com
*/
var trailLength = 10 // The length of trail (8 by default; put more for longer "tail")
var path = "cursor_star.png" // URL of your image
var standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body //create reference to common "body" across doctypes
var i,d = 0
function initTrail() { // prepares the script
images = new Array() // prepare the image array
for (i = 0; i < parseInt(trailLength); i++) {
images[i] = new Image()
images[i].src = path
}
storage = new Array() // prepare the storage for the coordinates
for (i = 0; i < images.length*3; i++) {
storage[i] = 0
}
for (i = 0; i < images.length; i++) { // make divs for IE and layers for Navigator
document.write('<div id="obj' + i + '" style="position: absolute; z-Index: 100; height: 0; width: 0"><img src="' + images[i].src + '" width='+(16-i)+' height='+(16-i)+'></div>')
}
trail()
}
function trail() { // trailing function
for (i = 0; i < images.length; i++) { // for every div/layer
document.getElementById("obj" + i).style.top = storage[d]+'px' // the Y-coordinate
document.getElementById("obj" + i).style.left = + storage[d+1]+'px' // the X-coordinate
d = d+2
}
for (i = storage.length; i >= 2; i--) { // save the coordinate for the div/layer that's behind
storage[i] = storage[i-2]
}
d = 0 // reset for future use
var timer = setTimeout("trail()",10) // call recursively
}
function processEvent(e) { // catches and processes the mousemove event
if (window.event) { // for IE
storage[0] = window.event.y+standardbody.scrollTop+10
storage[1] = window.event.x+standardbody.scrollLeft+10
} else {
storage[0] = e.pageY+12
storage[1] = e.pageX+12
}
}
initTrail()
document.onmousemove = processEvent // start capturing
//-->
</script><!--webbot bot="HTMLMarkup" endspan --></p>
</body>
Hi everyone, Im new to the whole website thing as a whole but my mate got me onto joomla which has been great and iv got a site up im almost happy with and have learnt quite alot about coding etc. My problem is: Im utilising a vertical menu, just simple text as links, i want to add an effect on hover and clicking on that makes the text slide elegantly to the right about 16pixels. I have another unpublished template that iv bought (that doesnt quite work at all, module position all messed up etc) but it does this hover effect perfectly on the menu. So i have the .js file from that template and iv read some tutorials on how to add a js file to my template but its just not doing anything. Is it a good idea to try to add this file from a different template to my template or is there a easier way to do this (what i think is a) simple effect. Thanks. ps i can post the js code if wanted hi, i am trying to have the homepage of my website fade in, kind of like an intro to the site. I only want this fade in to happen on the home page when the website is initially visited, not every time the user clicks home. I am new to jquery but have had much success using plugins for effects. If anyone can help me figure out the code to create a fade in intro i would be very thankful! Richard Hi all, I have set my sprite on this page http://www.kylehouston.com/portfolio.html to fade in, my problem is when the page loads the images appear and then they fade in, how can i set them to fade in without showing them first of all? Thanks in advance Kyle http://dannycremers.com/menus.html i've been experimenting with random images floating in the background that i now want to turn into links to other images, the code i have right now is the following: Code: <div id="div2"><a href="#sub_target" onclick="return togg_sibl(this)"><img src="http://dannycremers.com/img/2.png" alt="" /></a>
<div><a href="#" onclick="return togg_sibl(this)"><img src="http://dannycremers.com/inprogress/img/koekoek.jpg" alt="" /></a></div></div>
image 2.png is the image with the black border, onclick of that image i want the orange picture to become visible in the center of the page which sort of works.. but for some reason when the page loads an extra version of the orange image shows up as well, any idea how i can get rid of this while also maintaining the orange image showing up onclick?? another issue i've been having is with the fadein code, it always used to work but after adding the onclick/toggle script it stopped working, does anybody have any idea why that is and how i can work around that? tnxxx! Ok super new to Jquery here. I finally got talked into trying it. Ok so... I have Code: function windowOpen() {
windowSize()
document.getElementById("action1").innerHTML = '';
action1.style.filter = "alpha(opacity=" + (0*100) + ")";
action1.style.opacity = 0;
var si = setInterval(function() {
io+=0.05;
action1.style.filter = "alpha(opacity=" + (io*100) + ")";
action1.style.opacity = io;
}, 100);
io = 0;
if(io==1) {
window.clearInterval(si);
}
clearMenu();
}
I would love to know how to replace that with the fadein() function. I'm looking for something like this Code: function windowOpen() {
windowSize()
document.getElementById("action1").innerHTML = '';
//THE FADE IN GOES HERE but how?
clearMenu();
}
ok last question. Do I need to hide my elements somehow differently in CSS before I can use this? update: ok so far trying this and its not working Code: function windowOpen() {
windowSize()
document.getElementById("action1").innerHTML = '';
action1.fadeIn('slow');
clearMenu();
}
finally made it work with Code: function windowOpen() {
windowSize()
action1.innerHTML = '';
action1.style.display = "none";
$("#action1").fadeIn(1300);
clearMenu();
}
I want it to fade out if the window is open then fade in... the fade in is working wonderfully but the fade out isn't doing a thing =[ and I get no errors =[ Code: var windowState = false;
action1 = document.getElementById("action1");
function requestWindow(url) {
if(windowState==false) {
windowOpen();
}
else if(windowState==true) {
windowClose();
}
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
}
else {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET",url,false);
xmlhttp.send(null);
document.getElementById('action1').innerHTML=xmlhttp.responseText;
}
function windowOpen() {
windowState = true;
windowSize()
action1.style.display = "none";
$("#action1").fadeIn(1300);
clearMenu();
}
function windowClose() {
windowState = false;
action1.style.display = "inline";
$("#action1").fadeOut(1300);
clearMenu();
windowOpen();
}
It's functional and works, it just doesnt "fade in". Anyone know why it's not fading in? Code: function addPerson() {
//current keeps track of how many people we have.
var strToAdd = '<div id="input" class="ideaInput"><label class="idea">Another Name</label><input name="idea[]" class="idea" type="text"/>'
strToAdd += '<label class="description">Description (optional)</label><textarea name="description[]" class="description"></textarea></div>'
$('#all-inputs').append(strToAdd);
};
$(document).ready(function() {
$('#btnAdd').click(function () {
$(addPerson).fadeIn('slow')
});
});
Hi guys, Im trying to get the hover to fade in the 'hover.png' image and to fade out when leaving the 'hovering' item. The code I am using is the following Code: <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js' type='text/javascript'></script>
<script type="text/javascript">
function mainmenu(){
$("#neon li.root").hover(function(){
$(this).fadeOut('500');
},function(){
$(this).fadeIn('500');
});
}
$(document).ready(function () {
mainmenu();
});
</script>
<style type="text/css">
/* remove the margin and bullets, set the padding and margin for this demo only*/
.neon {margin:50px auto 200px auto; padding:25px 0 100px 15px; list-style:none; background:#000; width:720px;}
/* display the list items inline with a right margin to space the buttons. Use this to pre-load the hover image */
.neon li {display:inline; float:left; background:url(hover.png);}
/* style the links and place the background image to start from left edge */
.neon li a {display:block; height:32px; float:left; background:url(menu.png); text-decoration:none; font-size:10px; font-family:arial, sans-serif; letter-spacing:1px; line-height:36px;}
/* style the b element to posiition it to the right by 20 pixels and even out the text with 20 pixel right padding */
.neon li a b {margin:0 0 0 40px; display:inline; float:left; height:32px; background:url(menu.png) right top; padding:0 40px 0 0; color:#fff;}
/* style the link hover and the link hover b to replace the background image - border:0 needed for IE6 to work */
.neon li a:hover, .neon li a:hover b {border:0; background-image:url(hover.png); cursor:pointer; color:#000;}
.neon li a.current, .neon li a.current b, .neon li a.current:hover , .neon li a.current:hover b {background-image:url(hover.png); color:#000; cursor:default;}
</style>
<ul id="neon" class="neon">
<li class="root"><a href="#nogo"><b>MENU ITEM1</b></a></li>
<li class="root"><a href="#nogo"><b>MENU ITEM2</b></a></li>
<li class="root"><a href="#nogo"><b>MENU ITEM3</b></a></li>
<li class="root"><a href="#nogo" class="current"><b>MENU ITEM4</b></a></li>
<li class="root"><a href="#nogo"><b>MENU ITEM5</b></a></li>
</ul>
Any help would be appreciated! Thanks! I am using fadein and out of jquery, but size of jquery file is high for me. so i should replace it do anyone know, how can i write fadein and fadeout functions? is anyone know its source code? Best Morteza Hi, I am looking for a script which could do picture animation like in this page But there is other problem: When you put your mouse on them, they appear colored. I need that this appearing action would take 5 seconds. 5 sek. to become colored, 5 sek. to become grey when you put away your mouse. If you need more info, ask.. Thanks a lot. Quick question, I need to get the hover effect that Templatemonster has, for example click here and hover over a template image see how you get that larger pop-up image that disappears instantly after you remove you mouse from the template thumbnail image. How would I get that effect? Thanks!!! Hi friends, Im new with JS. How to make the roll over effect in JS. An image, on roll over, the big size of the same image needs to appear. regards anoop 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? Hi, Does anyone knows how to use this effect using javascript? http://www.modonline.com/ Really appreciate if someone can help me. Thank You, Nadun I really like the lightbox2 effect (http://www.huddletogether.com/projec...tbox2/#example) but I need help doing what I'm trying to do, for some reason I cannot get it to work, maybe you have a better recommendation? I have one large image, its a tear out of a magazine, I want the initial image to be the entire page, but I want the user to be able to click on the text area of the page and have that enlarge so the viewer can read it clearly. Any ideas? Thank you, Dustin I 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 |
|||||||