|
JavaScript - Image Refresh In Sequence Help
I want the images to change in sequence when the page is refreshed not random like i have below. Can someone help me with this please? Also I also need text to change on refresh to because I am going to have a descritption of the image below. Thanks
[CODE] <script type="text/javascript" language="JavaScript"> var imgs = new Array('<a href="VW_1.shtml"><img border=0 src="img/samples/VW/large_1.jpg" width=165 height=109" class="thumbnail_img">', '<a href="fortshelby1.shtml"><img border=0 src="img/samples/Fort Shelby/image1-large.jpg" width=165 height=109 class="thumbnail_img">', '<a href="jaguar1.shtml"><img border=0 src="img/samples/Jag_of_Novi/large_1.jpg" width=165 height=109 class="thumbnail_img">', '<a href="harley1.shtml"><img border=0 src="img/samples/wolverine_harley/large_1.jpg" width=165 height=109 class="thumbnail_img">', '<a href="bc1.shtml"><img border=0 src="img/samples/BC_Coney_Island/large_1.jpg" width=165 height=109 class="thumbnail_img">', '<a href="mama1.shtml"><img border=0 src="img/samples/Pozios_Retail_Mama_Vickys_Coney_Island/large_1.jpg" width=165 height=109 class="thumbnail_img">', '<a href="children1.shtml"><img border=0 src="img/samples/Detroit_Childrens_Museum/large_1.jpg" width=165 height=109 class="thumbnail_img">', '<a href="harper1.shtml"><img border=0 src="img/samples/Harper_Woods_Library/large_1.jpg" width=165 height=109 class="thumbnail_img">', '<a href="dps1.shtml"><img border=0 src="img/samples/DPS_Facilities_building/large_1.jpg" width=165 height=109 class="thumbnail_img">', '<a href="lakeland1.shtml"><img border=0 src="img/samples/Lakeland_School_Huron_Valley/large_1.jpg" width=165 height=109 class="thumbnail_img">', '<a href="auto1.shtml"><img border=0 src="img/samples/Manhattan_Auto_Group/large_1.jpg" width=165 height=109 class="thumbnail_img">', '<a href="maxey1.shtml"><img border=0 src="img/samples/Maxey_Ford/large_1.jpg" width=165 height=109 class="thumbnail_img">', '<a href="benz1.shtml"><img border=0 src="img/samples/Mercedes_Benz_of_St_Clair_Shores/large_1.jpg" width=165 height=109 class="thumbnail_img">', '<a href="metro_lofts1.shtml"><img border=0 src="img/samples/Metro_Lofts/large_1.jpg" width=165 height=109 class="thumbnail_img">', '<a href="mtclemens1.shtml"><img border=0 src="img/samples/Mt_Clemens_Library/large_1.jpg" width=165 height=109 class="thumbnail_img">', '<a href="st_gertrudes.shtml"><img border=0 src="img/samples/st_gertrudes/large_1.jpg" width=165 height=109 class="thumbnail_img">', '<a href="rayconnect1.shtml"><img border=0 src="img/samples/Rayconnect/large 1.jpg" width=165 height=109 class="thumbnail_img">', '<a href="faulhauber1.shtml"><img border=0 src="img/samples/Faulhauber/large1.jpg" width=165 height=109 class="thumbnail_img">'); var max = imgs.length; var num = Math.floor((Math.random() * max)); document.writeln(imgs[num]); </script> [CODE] Similar TutorialsHi! I'm very new to Javascript so first I want to apologize for my lack of knowledge, what I'm asking is probably really simple to do. Im have a folder full of images. Each image is named with an incrementing number like vidseq000001, vidseq000002, vidseq000003 and so on. I'm trying to use a jQuery plugin called "reel" to make the sequence animate. For that it seems I need to put the images inside an array. I know how to manually enter each image inside the array like var [ vidseq000001, vidseq000002, vidseq000003, ] But this becomes quite tedious with over thousand images. What would be a smarter way to put all my images inside an array? hi guys. i'm having a weird racing condition where an image wont show up the first time but will if you click the trigger again. to refresh the image I use : Code: function updatePieImg(){
document.getElementById('pie_chart').src = "./lib/php/pie_generator/pie_draw.php?c=" + randomString();
}
function randomString() {
return new Date().valueOf();
}
I know the drawing receives the correct data because I generate an image map area before to draw which works perfectly. What should I consider? using a break point in updatePieImg() makes the image pop correctly. Hello. I need some help with refreshing an image(cgi chart) onclick. This is because the chart changes every minute(due to database update) and i want whenever you click on it to refresh. My code so far is: HTML: Code:
<label for="choseChart">Change chart!</label>
<select id="choseChart" onchange="changeChart('choseChart');">
<option value="0" selected="selected">Chart of Months(column)</option>
<option value="1">Chart of Branches(column)</option>
<option value="2">Chart of Months(pie)</option>
<option value="3">Chart of Branches(pie)</option>
</select><br/>
<img id="chartType" style="cursor: pointer; cursor: hand" onclick="" alt="Chart" src="1.cgi"/>
Javascript: Code: function changeChart(chartid)
{
var chart = document.getElementById(chartid).selectedIndex;
document.getElementById("chartType").src=changeImage[chart];
}
All, I am trying to create a page for a application that uses a technique where a page refresh is generated by an ajax call followed by an innerhtml replace on the main page div. Unfortunately this strange way of refreshing pages is leading to an issue with an image I am trying to display. Every time it refreshes the images flashes off and then is redisplayed, there are other elements on the page( smaller images, text etc... ) and they do not seem to be affected. The image is not large, only 23 k, but it is the only one affected. If I run the page on firefox I do not encounter this issue which makes me think that is a lovely IE feature that forces the image to be retrived from the server on every innerhtml replace instead of from the cache. I am using IE8 to test this, any suggestions are greatly appreciated as I have been trying to fix this for a while. Thanks, N 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 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 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 Hi, I need some advice. I wanted to create a 4 by 4 grid in a webpage. Then i want to select a specific box in the grid to flash a certain colour. There will always be a set sequence of the same sections lighting up with the same colours. So row 2 col 2 flashes green, then row 4 col 1 flashes pink etc. With around 5 boxes being used out of 16. How would i go about doing this? Is using Javascript the best thing to use? Any advice would be greatly appreciated. Thanks. Hi, I am using several Javascripts into a html file. Individually all scripts working fine, however when I put them on the onclick event someof them not works. Example: <html> <head> <script> function one; </script> <script> function two; </script> <script> function three; </script> </head> <body> <form type=post action=newfile.asp> .................... ................... ................... <input type=submit onclick="one(); two(); three();"> </form> </body> </html The schema is right? How is the best way to force many scripts working fine? Bob This textbook is complete garbage, there is nothing in this thing about this topic at all. Here is the question I am trying to do: "Suppose you have a sequence of numbers Where every number is the previous number plus 3 1, 4, 7, 10, 13, 16, 19, 22 Write a program to output the first 10 number s of the sequence. You must calculate the numbers, you cannot just hard-code them into an array." Its a question on a test study guide. Heres what I got so far: Code: <html> <head> <script type="text/javascript"> VarX = 1 i = 3 VarY = VarX + i count++ do varY while count < 10 </script> </head> <body> </body> </html> Hi there. I'm trying to make a little valentines website 'card' for my ladyfriend. I was going to be clever about it and use javascript, but as it turns out I'm really not that clever with it anymore. I need a single image to change into a different image on each following mouseover event. A planned 'route' of images, for exameple A -> B -> C -> D -> E -> A -> F - > B -> .. and so on. I thought I could do this, but I'm getting nowhere. I did try to look for similar attempts to make this, but it's kind of hard to find since 'mouseover' is such a generic search term. Thanks. Edit: there's little point for me in posting my code so far.. it's just a long list of imagecodes and a little mousover script that would probably make you laugh. I have an autocomplete script but it's currently returning results in a character is in the name anywhere at all, what I need it to do is only return matches if the characters are in sequence only. Example of how it is now if you type S it will return: Science Host Pass What I need it to do is only return a match if the first character is an S, and so on down the line in order. So if you type sam it should only return matches where the first 3 letter are sam in the order it's typed. Here's how the regexp is now: return value.replace(new RegExp("(?![^&;]+(?!<[^<>]*)(" + term.replace(/([\^\$\(\)\[\]\{\}\*\.\+\?\|\\])/gi, "\\$1") + ")(?![^<>]*>)(?![^&;]+", "gi"), "<strong>$1</strong>"); I built some pages that uses a Flash widget to play mp3 files on my server and show album covers at the same time. However, for people without Flash (like iPhone/Safari), I accommodate them by using a JavaScript that offers a list of simple links to the mp3 files. What I would really like, in the case of a page where there are several songs by the same artist, is a script that when activated, will play all the files in order. Possible? Where would I look for such a script?
Hi, I have the below code: Code: <script type="text/javascript">
function loadQuickMessageCheck(File,ID){
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
}
else {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById(ID).innerHTML=xmlhttp.responseText;
eucalyptus = setInterval(function(){loadQuickMessageCheck(File,ID)},20000);
}
}
xmlhttp.open("POST",File,true);
xmlhttp.send();
}
</script>
But I am overloading the server and crashing it. I've googled the issue and have found people with similar problems who talk about the need to cancel the last refresh request before they send the next refresh. I even found this nice piece of code which worked for someone else. Quote: try{window.clearTimeout(tRefresh)} catch(err) {} tRefresh = setInterval(setContext, varInterval*60*1000); } I am not sure if this is the solution that I am looking for but if it is all my attempts at applying this code has been a bit of a disaster. I have an essoteric question about javascript and how DOM/javascript stores divs that are created and displayed in succession by absolute positioning. I have a series of divs that are assigned absolute top and left values to form a grid. The grid tiles are programmed to swap coordinates in pairs when one of the pairs is clicked. Then if I do a sampling of the divs by: Code: //returns the same string on every call.
//regardless of the coordinate values. which change
var GM = document.getElementById('TP');
if(GM.hasChildNodes)
{
var GMC = GM.getElementsByTagName('div');
var str = '';
for(i = 0; i < GMC.length; i++)
{
if(GMC[i].hasChildNodes)
{
for(var j = 0; j < GMC[i].childNodes.length; j++)
{
var gmc = GMC[i].childNodes[j];
var gmcTxt = gmc.childNodes[0].data;
str += gmcTxt;
}
}
}
}
alert(str);
The list does not represent the positions of the divs as they appear in the browser, but in a sequence that is saved in another array when the divs are created. The same is true for document.getElementById('[id assigned each div]') The only way to detect the sequence is to do a long drawn out loop looking for coordinate values, and comparing them to a prestablish template set of values, then looping back through to compare the contents of each div and decide if they are in the right place (visually). The problem is that some divs may have the same content. If the same content appears to be in the right place, the coordinates can be wrong. So I need to detect the content and decide if it is right, regard- less of the coordinates. This has to be done by the program (of course). So the question is: What is javascript doing when it is asked to Code: document.getElementByTagName('[elem]');
In this case are the divs children of the document? (in the case of my project, children of a container div) And why would they not be detected in the order apparent in the browser window? I will post the current version and return and post a reply with the url. http://www.jekillen.com/jekillen/con..._wise_dev.html I have no js experience or coding experience of any kind other than the last few hours of reading a book called 'object-oriented javascript', and all was well until loops. firstly, this is how he teaches the while loop... var i = 0; while (i <10) {i++;} which results in 9 we move on to for loops... var res =''; for( var i = 0; i <10; i++) {res += 'sometext' ;} which repeats, but I'd like to be able to make that into a sequence of numbers... 123456789. how do I do that? thanks. Hey, I'm writing a piece of code, using a given code as an example, but few things are confusing to me, if you could just explain me step by step what it does, I would really appreciated. Code: function getGeneticCodeString (type) {
if ((type.toLowerCase() == "standard") || (type.toLowerCase() == "transl_table=1"))
{
return "/gc[acgturyswkmbdhvn]/=A," +
// Here I know that the three letter combination HAS to begin with 'gc'
// can be followed by a,c,t,g or u.
// What do the other letter represent?
"/[tu]g[ctuy]/=C," +
// Begins with either 't' or 'u', middle symbol is 'g'
// third symbol can be c, t, or u ('u' can be used only if it begins with 'u'.
// what is the 'y' for in the second square brackets for??
"/ga[agr]/=E " ;
// Must start with 'ga' followed by 'a' or 'g'.
// What is 'r' for?
}
}
Hope, I didn't confuse anybody. Thank you. Hi I need some help. I have a link that opens in a new window which allows the user to perform an update to a record. On submit I want it to obviously update (which it does), then close the page and update the main page (where we opened the link from initially). I seem to have this working using an function which is called off the submit button using onclick........the function is: <script type="text/javascript"> function windowclose() { window.opener.location.href = window.opener.location.href; window.close() } </script> Now, the update happens as I say, and the page closes, and the main page looks like it refreshes but the update is not reflected....if I hit f5 the update appears. Is it to do with the speed of writing to the database and updating the screen? I have also been playing around with trying to add a settimeout to add a delay between update and close/refresh but couldnt get it to work. Any help would be appreciated. Cheers! Okay, I assume many will think I must have missed the previous thread, but I did look at it, and I am not sure if that one comes close to answering my idea here. I was looking at NHL.com, and I noticed the scoreboard changed without me reloading the page. So... I looked at the code, and this is where I got completely lost: Code: <div id="scoreboard">
<style type="text/css">
#masthead #richMedia, #scoreboard { margin-left: 0px; width: 817px; }
</style> <script src="/js/hdr_scoreboard.js?v=6" language="JavaScript" type="text/javascript"></script> <script language="JavaScript" type="text/javascript">
var dataSource = "http://live.nhle.com/GameData/PlayoffScoreboard.jsonp?loadScoreboard=?";
jQuery(document).ready(function() { initScoreboard(5, 'cc0000', '000000'); });
</script>
What I am interested in doing is reloading an iframe that has a total visitor counter. That way say every 5 minutes or so, it gets updated without any interaction needed. I tried the meta refresh on the iframe's target page long ago, but that forced a reload on the main page as well, and I am totally against doing that. So, does anyone here have any tips to provide? |
|||||||