|
JavaScript - Help Required - More Than One Simultaneous Image Change On Page Refresh...
Hi all!
My first post here, searched around for a good website to get some assistance and chose CodingForums.com! I'm a graphic designer, and trying my best at web design too although it's not my profession so I'm still beginner level in a sense I guess. Anyway, my dilemma at the moment is that I have produced a site where the client would like the logo colour/image to change on refresh which I have achieved by scouring the net for codes and altering them. Now, the client wants the shapes behind the sub-headings to match the current logo colour/image on refresh as well. This would mean if the logo changed to the blue logo, I'd need all the sub-headings to be blue, and vice versa for another 3 colours. I'm struggling to understand how I can achieve this. At the moment, I have a javascript inside the code of the index page allowing logo image change on refresh but need the sub-headings to change in sync too. Can anyone help me out here? Any help is greatly appreciated. Thanks all! WxMx Similar TutorialsIs it possible to change the URL when a page refreshes? E.G Someone clicks a link on index.php to page1.php. When you refresh page1.php it actually loads page2.php The reason i ask my site uses AJAX to change pages (therefore doesnt refresh and stays on the index.php page). So if someone has followed 3-4 links and refreshes the page it will go back to the homepage, i want it so it reloads the currently page (i can use query strings to get the relevant page) I just wrote an essay to discover it had logged me out and I lost everything. Grrrrrrr. Here goes again, simplified this time. I've got a sticky footer at the bottom of the page and a spry collapsible panel which expands to reveal content on mouse over. The problem I'm facing is that the page doesn't scroll down with it, only the scroll bar gets larger to accommodate for a manual scroll down. This is kind of useless because the user might not even realise that there's extra content there in the first place if it's not automatic. My question is, what's the best javascript code to use to automatically scroll the page down when the spry tab is opened and where would I insert it? I've tried all morning with no success so far! Thanks, Nick, I'm copy pasting this post this time round, I don't trust this website now Hello, my name is Paula an I am making a website where I have an image changing on my homepage each time it is reloaded. I found a code that lets me do this. This is the script: <HEAD> <SCRIPT LANGUAGE="JavaScript"> <!-- Begin // Set up the image files to be used. var theImages = new Array() // do not change this // To add more image files, continue with the // pattern below, adding to the array. theImages[0] = '1.gif' theImages[1] = '2.gif' theImages[2] = '3.gif' theImages[3] = '4.gif' var j = 0 var p = theImages.length; var preBuffer = new Array() for (i = 0; i < p; i++){ preBuffer[i] = new Image() preBuffer[i].src = theImages[i] } var whichImage = Math.round(Math.random()*(p-1)); function showImage(){ document.write('<img src="'+theImages[whichImage]+'">'); } </script> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> <!-- Begin showImage(); // End --> </script> It worked fine, with four images. The thing is I wanted to put up to 16 in it. So I tried ad up to 16 numbers with images but as soon as I put more than four, it would not work. Finally what I did was to copy four times the same numbers and then it worked (0-3 , four times)... so then I had many images shown randomly but the problem now is that the random is very uneven among the images. Meaning, I get variation among very few, and many time repeating one. This is what my script looks like now: <SCRIPT LANGUAGE="JavaScript"> <!-- Begin // Set up the image files to be used. var theImages = new Array() // do not change this // To add more image files, continue with the // pattern below, adding to the array. theImages[0]='http://elenacliment.tomosfactory.fr/userfiles/image/ImagesElena/ElenaPaintingsHome2/Alacenaconcajadegalletes-pgWShadow3.jpg' theImages[1]='http://elenacliment.tomosfactory.fr/userfiles/image/ImagesElena/ElenaPaintingsHome2/AltarinGasStation-pgSH.jpg' theImages[2]='http://elenacliment.tomosfactory.fr/userfiles/image/ImagesElena/ElenaPaintingsHome2/AltaroftheDeadwithEmbroideredTablecloth-pgSH.jpg' theImages[3]='http://elenacliment.tomosfactory.fr/userfiles/image/ImagesElena/ElenaPaintingsHome2/Altarsobreparedverde-pgSH.jpg' theImages[0]='http://elenacliment.tomosfactory.fr/userfiles/image/ImagesElena/ElenaPaintingsHome2/BricksandClotheslineSH-pg.jpg' theImages[1]='http://elenacliment.tomosfactory.fr/userfiles/image/ImagesElena/ElenaPaintingsHome2/Cocinaamarilla-pgSH.jpg' theImages[2]='http://elenacliment.tomosfactory.fr/userfiles/image/ImagesElena/ElenaPaintingsHome2/LatadeTecateconenchufes-pgSH.jpg' theImages[3]='http://elenacliment.tomosfactory.fr/userfiles/image/ImagesElena/ElenaPaintingsHome2/LedgewithTecates-wcSH.jpg' theImages[0]='http://elenacliment.tomosfactory.fr/userfiles/image/ImagesElena/ElenaPaintingsHome2/Mesaamarilla-pgSH-pg.jpg' theImages[1]='http://elenacliment.tomosfactory.fr/userfiles/image/ImagesElena/ElenaPaintingsHome2/MosaicwithPhotographofVictorianInterior-pgSH.jpg' theImages[2]='http://elenacliment.tomosfactory.fr/userfiles/image/ImagesElena/ElenaPaintingsHome2/Paredrojaconjualas-pg.jpg' theImages[3]='http://elenacliment.tomosfactory.fr/userfiles/image/ImagesElena/ElenaPaintingsHome2/red_cupboardSH.jpg' theImages[0]='http://elenacliment.tomosfactory.fr/userfiles/image/ImagesElena/ElenaPaintingsHome2/RoomwithLandscapeofBurgundy-pgSH.jpg' theImages[1]='http://elenacliment.tomosfactory.fr/userfiles/image/ImagesElena/ElenaPaintingsHome2/Cocinaamarilla-pgSH.jpg' theImages[2]='http://elenacliment.tomosfactory.fr/userfiles/image/ImagesElena/ElenaPaintingsHome2/YellowandRedPorch-wcSH.jpg' theImages[3]='http://elenacliment.tomosfactory.fr/userfiles/image/ImagesElena/ElenaPaintingsHome2/LedgewithTecates-wcSH.jpg' var j = 0 var p = theImages.length; var preBuffer = new Array() for (i = 0; i < p; i++){ preBuffer[i] = new Image() preBuffer[i].src = theImages[i] } var whichImage = Math.round(Math.random()*(p-1)); function showImage(){ document.write('<img src="'+theImages[whichImage]+'">'); } // End --> </script> So my question is: How can I manage with this script to have all my images showing up equally when they change in refresh? I don not mind if they are not random, I also tried to remove the random property but could not manage either. Any ideas? Thank you so much, I really appreciate your help. Paula when I upload a new javascript file to the server and refresh the webpage, the webpage behaves as if the old script is on the server, this happens with IE and firefox, even if I shut the programs down and restart them, can anyone help? Hi. I am new here. I wanted help for a JavaScript code. You might think I'm lazy for not writing it myself, but the truth is I am not a JavaScript coder. I just have a really simple website and I am trying to do something for which I know JS is required but I don't know how to do it. I've also searched around but couldn't find the appropriate code. What I want to do is to make an html page load a different background image every time it refreshes. I will have a list of background images and I want to be able to add in this list, without having to change anything else in the codes after I do this (I think this is made by making an array of images and by putting .length somewhere in the codes, but I don't know exactly how I should do this). I already know how to do an external file (.js) and link to it from my .html page. Now I want the code to put in the .js file, and the code to put in the <body> of my .html file. Please help me Thanks Hey everyone, I'm making a bit of a weird site on a server with no php, mysql etc. To save me work, I've included the header and footer using AJAX but would like to change the relevant nav bar image to the rollover image if the visitor is on that page. My javascript skills are TERRIBLE, but I came up with this anyway and was going to put it inbetween the <a> tags where the image currently sits. Probably for a very obvious reason unknown to me, the page just loads indefinitely making nothing work. Here's what I've got: Code: if (window.location='index.html') {
document.write('<img src="images/key/home-r.jpg" name="home" onMouseOver="over(5)" onMouseOut="out(5)">')
}
else {document.write('<img src="images/key/home.jpg" name="home" onMouseOver="over(5)" onMouseOut="out(5)">')}
Thanks so much for any help at all. It must be a simple thing... I am trying to change an image source on page load depending on the contents of a cookie: Code: function goVisited(cookiename,img_name,img_src) {
var visited = readCookie(cookiename);
if (visited == "1"){
//alert("visited!");
document[img_name].src=img_src;
}}
<img onload="goVisited('main1','Introduction','img/Yellow.gif');" name="Introduction" border="0" src="img/Green.gif" width="250" height="18">
I need the page to check the cookie "main1" and if its value is 1, then change the image src from Green.gif to Yellow.gif. It almost works, but I get a stack overflow. Hi, I have this simple code for gallery on my page. And everything working fine but when i click on small picture to change big picture if I'm page scroll up to top of page. So i scroll to the gallery change picture ad page scroll up to the top. What could be the reason? Here is live axample: http://www.galerija-galiotovic.kus-s...test-hrvatski# Code: <table id="Table_galerija">
<tr>
<td style="width:520px;height:445px;vertical-align:top;padding:20px;">
<h2 style="position:absolute;top:200px;color:#FFF;" id="naslov">Test hrvatski</h2>
<div id="slika_velika"><img id="glavna_slika" style="max-height:390px;max-width:520px;vertical-align:middle;" src="/slike/10012012_7119092522.jpg" alt="KUS Sinj" /></div></td>
<td>
<div class="slikica"><a href="#" onclick="document.getElementById('glavna_slika').src='/slike/10012012_7119092522.jpg'"><img src="/slike/thumbnails/10012012_7119092522.jpg" style="max-height:88px;max-width:125px;vertical-align:middle;" alt="KUS Sinj" /></a></div>
<div style="height:14px;"></div>
<div class="slikica"><a href="#" onclick="document.getElementById('glavna_slika').src='/slike/12012012_7509043961.jpg'"><img src="/slike/thumbnails/12012012_7509043961.jpg" style="max-height:88px;max-width:125px;vertical-align:middle;" alt="KUS Sinj" /></a></div>
<div style="height:14px;"></div>
<div class="slikica"><a href="#" onclick="document.getElementById('glavna_slika').src='/slike/12012012_9295689431.jpg'"><img src="/slike/thumbnails/12012012_9295689431.jpg" style="max-height:88px;max-width:125px;vertical-align:middle;" alt="KUS Sinj" /></a></div>
<div style="height:14px;"></div>
<div class="slikica"><a href="#" onclick="document.getElementById('glavna_slika').src='/slike/12012012_8527430603.jpg'"><img src="/slike/thumbnails/12012012_8527430603.jpg" style="max-height:88px;max-width:125px;vertical-align:middle;" alt="KUS Sinj" /></a></div>
<div style="height:14px;"></div>
<div class="slikica"><a href="#" onclick="document.getElementById('glavna_slika').src='/slike/12012012_2126924535.jpg'"><img src="/slike/thumbnails/12012012_2126924535.jpg" style="max-height:88px;max-width:125px;vertical-align:middle;" alt="KUS Sinj" /></a></div>
<div style="height:14px;"></div>
<div id="gori"><a href="#" onmousedown="moveup()" onmouseup="clearTimeout(moveupvar)"><img src="/images/gori.png" width="119" height="23" alt="Top Sport" /></a></div>
<div id="doli"><a href="#" onmousedown="movedown()" onmouseup="clearTimeout(movedownvar)"><img src="/images/doli.png" width="119" height="23" alt="Top Sport" /></a></div></td>
</tr>
</table>
I am using the jquery megamenu from the javascriptkit.com site, for multiple buttons, and I am having an issue where one menu on the right hand side of the page wants to start the menu at the left end of the button, heading right (which is the default), and ends up forcing a 3 column menu into a 2 column one when the resolution is set to 1024 wide, because it would disappear off the page otherwise. I want instead for that one menu to END at the right hand side of the button so that the 3 columns remain intact. I do not know enough about javascript to totally follow the logic of the code and my attempts to fix this issue have produced mixed results. Any one any suggstions? [CODE] alignmenu:function($, e, megamenu_pos){ var megamenu=this.megamenus[megamenu_pos] var $anchor=megamenu.$anchorobj var $menu=megamenu.$menuobj var menuleft=($(window).width()-(megamenu.offsetx-$(document).scrollLeft())>megamenu.actualwidth)? megamenu.offsetx : megamenu.offsetx-megamenu.actualwidth+megamenu.anchorwidth //get x coord of menu //var menutop=($(window).height()-(megamenu.offsety-$(document).scrollTop()+megamenu.anchorheight)>megamenu.actualheight)? megamenu.offsety+megamenu.anchorheight : megamenu.offsety-megamenu.actualheight var menutop=megamenu.offsety+megamenu.anchorheight //get y coord of menu $menu.css({left:menuleft+"px", top:menutop+"px"}) this.$shimobj.css({width:megamenu.actualwidth+"px", height:megamenu.actualheight+"px", left:menuleft+"px", top:menutop+"px", display:"block"}) }, [CODE] -Removed due to solution found-
http://www.***.com/5.html i cant get a caption specific to each image to display under the arrows when the image changes. it is especially hard for me because i have to edit the javascript which confuses the **** out of me. it seemed so simple.... thanks for any help ps i cant start an id with a digit? it doesnt seem to cause any problems...why is it stated that this cannot or shouldnot be done? Hi, I'm have set up a gallery site, pretty standard stuff with thumbnails to the right and big image to the left. I would like to add a fade in on the big image when the thumbnail is clicked and don't really know how to implement it. The big images are contained in a div called <#left> while the thumbs are within a div called <div class="gallery"> I have searched Google and these forums for a solution but haven't had any luck...can anyone help me out with this? Thanks J i have a page named pck_rates.php which contains a form that go to the page update_pck_rates.php when i press updade data button in the second page i want the first page to be refreshed to show the new data's. i want to know if i can set a name to the page pck_rates.php and after the update query in the second page i will refresh the pck_rates.php page using this name?? i don't know what is the function and how to make this idea. can anyone help me please Hi Guys, Our company own a lot of domains and want to put a short page of copy on each address along with keywords before redirecting the user to our main site. I have been able to get the page to load the main site after the desired time using this code in the head... Quote: <META HTTP-EQUIV="refresh" CONTENT="40;URL=http://webaddress.com/"> That works perfectly, I am now trying to display a countdown timer from 40 seconds down to 0, and on 0 redirect the user. Saying something like "You will be redirected in XX seconds". Is there anyway of doing this? I've been searching google for the answers with no luck and can only seem to find timers that countdown to a set date. Thanks in advance! Ria Hi, For the last few day's i've been searching for a js/ajax div refresh. I need a js/ajax script that refresh a div every 10 seconds or gets menu.php file and updates it. Thanks. <HEAD><TITLE>main</TITLE> <meta http-equiv="refresh" content="5;url=http://localhost/php_basic/short_pro/php/main.php"> <!--<script language="JavaScript"> var i=0; function validat() { setTimeout("moretext()",5000); alert("santosh"); } function moretext() { if(i==0) { alert(window.location); window.location.reload(); i++; } else { } } </script>--> </head> <BODY onload="validat();"> i hav written dis code to auto refresh page only once but it is refreshing after every 5 seconds. Earlier i hav wriiten meta tag but it is refreshing page after every 5 seconds & after that i hav wriiten script to auto reffresh page only once but they both r doin the same work,so can u plz help me in solvin my problem Is this possible? I am writing a script that will display an alert box that reads "your play was saved" after a user clicks the submit button on a form. The only problem is that after clicking save, the page refreshes. Here is the code I tried to use Code: function savedMessage(){
document.getElementById("CmdFinish").addEventListener("click",function(e) {
GM_setValue("Saved", 1); }, false);
if (GM_getValue("saved", 0) == 1) {
alert("Your play has been saved");
GM_setValue("saved", 0); // or GM_deleteValue("saved"); }
}
The button ID is "CmdFinish" and the value is "saved". Is there ANY way i can make the script run only on a page refresh? **Note** The script is for a specific page and not the whole site, so it wont run on every refresh on the site, only when it's needed on 1 page. How can I write a JavaScript for the following requirement. I have to go to a link say
Quote: www.google.com and refresh it for every 5 seconds continuously. Thanks |
|||||||