|
JavaScript - Javascript For Image Change At Refresh
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 Similar Tutorialswhen 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 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 I need a JavaScript image changer like this: When you mouse over photo1.jpg, it will change to photo2.jpg. When you mouse over photo2.jpg it will change to photo 3.jpg and so on untill photo5.jpg. Please keep this in JavaScript form :) Hi I am using the css image gallery I got from: http://www.dynamicdrive.com/style/cs...image-gallery/ I want to change the behaviour, currently an image is enlarged when a user hovers over the link/thumbail. I would like to change it so that the main image is instead shown onclick of the thumbnail, and remains enlarged until another click. Is this possible using some javascript? I am creating a photography website and am almost there with coding a very simple image viewer with clickable thumbnails etc. I have used the following script to change the images; Code: <script>
function changeImage(filename)
{
document.mainimage.src = filename;
}
</script>
the main image is like this; Code: <img name="mainimage" src="../Images/wedding-photo-01-bride-getting-ready.JPG" title="bride getting ready"/> And the links/images are like this..... Code: <a href="javascript:changeImage('../Images/wedding-photo-01-bride-getting-ready.JPG')">
<img class="thumbbox" id="mainimage" src="../Images/wedding-photo-01-bride-get-thumb.JPG" alt="wellis photography logo" title="bride getting ready">
</a>
This works fine, but I would also like a caption underneath the main image that changes at the same time. Is there a way to do this simply? Perhaps using some variation of the following script? Code: <script type="text/javascript">
document.write(document.getElementById('myimage').title);
</script>
Also, one other thing - is it possible to add a 'fade' transition to my 'changeimage' function? Thanks in advance Hi guys, I need some help. Im trying to make a navagation menu with images that need to be changed when someone hovers over the child category. So lets say I have a menu that looks like this: Code: <img src="notactiveimagemenu1.jpg" alt=""> <ul id="menu1"> <li>link</li> <li>link</li> <li>link</li> </ul> <img src="notactiveimagemenu2.jpg" alt=""> <ul id="menu2"> <li>link</li> <li>link</li> <li>link</li> </ul> Now what im trying to do is if someone hovers over the li items from menu1 to change the image src of menu1.jpg to active. I was hoping to do this with some javascript. Code: // i was thinking about something like this: // first put menu items in a array // then use document.getElementById(id).onmouseover = function() // and make some sort of check to see which src should be changed. Now I really have no clue how to do it. So if anyone knows a cool solution please let me know. I know I could add onmouseover events to each li item and changing the src of the category. But Im trying to find a better solution. And I think I should be able to use document.getElementById(id).onmouseover = function() for that. Anyway thanks for any tips. Please note I know I could use jquery to do all of this very easy but I consider this practice because I don't know that much javascript. Basically, i have an image that i want it to be resized when i maximize and change browser size, so it is always centered. I have to use only javascript. I tried many window.resize functions but nothing works. Lets say the image is called 0000.jpg. Anyone has any ideas how to make this? Thank you in advance. Hello. The code below lets a user select a drop down option and a picture changes depending on the selection. I am trying to make it so when you select an option on the dropdown the picture shows up in the center of the screen and in the background behind the text. Here is the code. Code: <html>
<head>
<style type='text/css'>
#txt {background-repeat:no-repeat;width:200px;height:200px;}
</style>
<script type='text/javascript'>
function div_bg(team){
document.getElementById('txt').style.backgroundImage="url(images/" + team + ".jpg)";
}
</script>
</head>
<body>
<select name='team' onChange='div_bg(this.value);'>
<option name='arsenal' value='arsenal'>Arsenal</option>
<option name='liverpool' value='liverpool'>Liverpool</option>
</select>
<div id='txt'></div>
</body>
Thanks in advance!! Is 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) 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? 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] 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];
}
Hi all, I have a question (probably simple, as I'm a novice) for you. I'm finishing a tumblr theme in which I have my menu stick to the top of the window as I scroll down, and unstick when I scroll back up. It's working fine, except that if I scroll down and then refresh the page, the menu goes back to the middle of the page. Hard to explain, but you can see for yourself on my test page. Is there any way to make the menu stay on top through a refresh? My complete code is included below (apologies for its ugliness). Thanks in advance. Jon Code: <html>
<head>
<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
{block:Description}
<meta name="description" content="{MetaDescription}" />
{/block:Description}
<meta name="color:Highlight" content="#ff0" />
<meta name="if:Show Portrait" content="0"/>
<meta name="if:Show RSS Link" content="0"/>
<meta name="if:Small Permalink" content="0"/>
<meta name="font:Title" content="Futura"/>
<meta name="font:Body" content="Courier New"/>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(window).scroll(function(e){
$el = $('.fixed');
if ($(this).scrollTop() > 320 && $el.css('position') != 'fixed'){
$('.fixed').css({'position': 'fixed', 'top': '0px'});
}
if ($(this).scrollTop() < 320 && $el.css('position') == 'fixed'){
$('.fixed').css({'position': 'relative', 'top': ''});
}
});
</script>
<style type="text/css">
body {
background: #fff;
margin-left: auto;
margin-right: auto;
width: 600px;
font: 13px {font:Body};
color: #000;
}
body a { color: #000; }
body a:hover {
background-color: {color:Highlight};
text-decoration:none;
}
#desc { font-size: 12px; }
.fixed {
background-color: #fff;
position:fixed;
top: 310;
width:100%;
z-index:100;
}
#footer {
text-align: center;
font-size: 11px;
color: #ccc;
padding-top: 20px;
padding-bottom: 20px;
}
#footer a { color: #ccc; }
#header {
{block:IfNotShowPortrait}
top: 140px;
{/block:IfNotShowPortrait}
{block:IfShowPortrait}
top: 100px;
{/block:IfShowPortrait}
text-align: center;
position: relative;
}
#menu {
width: 600px;
border-bottom: 1px dashed;
background: #fff;
font-size: 11px;
text-align: center;
position: absolute;
}
#menu a { text-decoration: none; }
#newer {
float: right;
margin-left: -60px;
}
#notes {
color: #ccc;
{block:IfNotSmallPermalink}
border-bottom: 1px dashed;
margin-bottom: 30px;
{/block:IfNotSmallPermalink}
{block:IfSmallPermalink}
margin-top: 20px;
margin-bottom: 45px;
text-align: center;
{/block:IfSmallPermalink}
font-size: 11px;
}
#notes a {
color: #ccc;
{block:IfSmallPermalink}
text-decoration: none;
{/block:IfSmallPermalink}
}
#notes a:hover, #footer a:hover { color: #000; }
#notes_page { margin-top: 30px; }
#notes_page ol {
list-style: none;
padding: 0px;
margin: 0px;
width: 600px;
}
#notes_page li {
padding: 2px;
background-color: #fff;
margin-top: 2px;
}
#older {
float: left;
margin-right: -60px;
}
#photo, #video { text-align: center; }
#photo img { max-width: 600px; }
#post_container {
{block:IfNotShowPortrait}
margin-top: 340px;
{/block:IfNotShowPortrait}
{block:IfShowPortrait}
margin-top: 260px;
{/block:IfShowPortrait}
}
#quote { font-size: 18px; }
#title a {
font: 36px {font:Title};
font-style: italic;
letter-spacing: 10px;
text-decoration: none;
}
{CustomCSS}
</style>
</head>
<body>
<div class="fixed"><p><div id="menu">
<div id="older">
{block:NextPage}
<a href="{NextPage}">← Older</a>
{/block:NextPage}
</div>
<a href="/">Home</a> /
<a href="/archive">Archive</a>
{block:IfShowRSSLink} /
<a href="{RSS}">RSS</a>
{/block:IfShowRSSLink}
{block:HasPages}
{block:Pages} / <a href="{URL}">{Label}</a>{/block:Pages}
{/block:HasPages}
{block:AskEnabled} / <a href="/ask">Ask</a>{/block:AskEnabled}
{block:SubmissionsEnabled} / <a href="/submit">Submit</a>{/block:SubmissionsEnabled}
<div id="newer">
{block:PreviousPage}
<a href="{PreviousPage}">Newer →</a>
{/block:PreviousPage}
</div><p>
</div></div>
<div id="header">
{block:IfShowPortrait}<img src={PortraitURL-64}>{/block:IfShowPortrait}<p>
<div id="title"><a href="/">{Title}</a></div><br>
{block:Description}<div id="desc">{description}</div>{/block:Description}<p>
</div><p>
<div id="post_container">
{block:Posts}
{block:Text}
{block:Title}<a href="{Permalink}">{Title}</a>{/block:Title}
{Body}
{/block:Text}
{block:Photo}
<div id="photo">{LinkOpenTag}<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"/>{LinkCloseTag}</div>
{block:Caption}{Caption}{/block:Caption}
{/block:Photo}
{block:Photoset}
{Photoset-500}
<div id="caption">{block:Caption}{Caption}{/block:Caption}</div>
{/block:Photoset}
{block:Quote}
<div id="quote">"{Quote}"</div><p>
{block:Source} ~ {Source}{/block:Source}
{/block:Quote}
{block:Link}
<a href="{URL}" class="link" {Target}>{Name}</a>
{block:Description}{Description}{/block:Description}
{/block:Link}
{block:Chat}
{block:Title}<h3><a href="{Permalink}">{Title}</a></h3>{/block:Title}
<ul class="chat">
{block:Lines}
<li class="{Alt} user_{UserNumber}">
{block:Label}
<span class="label">{Label}</span>
{/block:Label}
{Line}
</li>
{/block:Lines}
</ul>
{/block:Chat}
{block:Video}
<div id="video">{Video-500}</div>
{block:Caption}{Caption}{/block:Caption}
{/block:Video}
{block:Audio}
{AudioPlayerBlack}
{block:Caption}{Caption}{/block:Caption}
{/block:Audio}
{block:Answer}
<h3>{Asker} asked: {Question}</h3>
{Answer}
{/block:Answer}
<div id="notes">
{block:IfSmallPermalink}<a href="{Permalink}">↵</a>{/block:IfSmallPermalink}
{block:IfNotSmallPermalink}
<p><br>
{block:Date}<a href={Permalink}>{DayOfMonth} {ShortMonth} {Year}</a>{/block:Date}{/block:IfShowDate} {block:RebloggedFrom} / Reblogged from <a href="{ReblogParentURL}">{ReblogParentName}</a>{/block:RebloggedFrom}
{block:HasTags} / {block:Tags}<a href={TagUrl}>{Tag}</a> {/block:Tags}{/block:HasTags}
{/block:IfNotSmallPermalink}
</div>
{/block:Posts}</div>
{block:PermalinkPage}
<div id="notes_page">
{block:PostNotes}
{PostNotes}
{/block:PostNotes}
</div>
{/block:PermalinkPage}
<div id="footer">
Theme by <a href="http://toxicjungle.co">Jon</a>.
</div>
</p>
</body>
</html>
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 I'm finishing up an e-commerce website, and I can't quite figure out why the shopping cart feature is acting all screwy in Internet Explorer. It works fine in Firefox, but in IE, when you add a product to the cart it doesn't display the little pop-up notification, and when you click on the "my cart" at the top right the product quantities are incorrect about 70% of the time. For some reason IE keeps doubling the quantities; I think one of the scripts may be double refreshing the page I just can't figure out where. If anyone has any suggestions they would be much appreciated. The site I'm referring to is he www.tcatvs.com Thanks y'all! Also I'm using the jquery framework for much of the site. I am sorry if this is a stupid question. I have never really used javascript before. I found some code online that I tried to piece together so I might not even be going about this the right way. I want the background to take up 100% and resize with the browser. That works fine. I also want the text "welcome to the ahi life" stick to the bottom left hand corner and the enter button to stick to the bottom right. I would like these to resize with the browser as well. It all kind of works, except the first time you load the page the text and the button are much smaller than I would like them to be. If you refresh the page everything is correct. The url is http://www.ahiapparel.com/landing.html Code: <style>
* { margin: 0; padding: 0; }
#bg { position: fixed; top: 0; left: 0; }
.bgwidth { width: 100%; }
.bgheight { height: 100%; }
#page-wrap { position:absolute; bottom:0; left:20px; width: 700px; margin: 50px auto;}
#welcometext { position: fixed; bottom: 20px; left: 25px; }
.welcometextwidth { width: 7%; }
.welcometextheight { height: 7%; }
#entertext { position: fixed; bottom: 20px; right: 25px; }
.entertextwidth { width: 7%; }
.entertextheight { height: 7%; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(function funct1() {
var theWindow = $(window),
$bg = $("#bg"),
aspectRatio = $bg.width() / $bg.height();
function resizeBg() {
if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
$bg
.removeClass()
.addClass('bgheight');
} else {
$bg
.removeClass()
.addClass('bgwidth');
}
}
theWindow.resize(function() {
resizeBg();
}).trigger("resize");
});
$(function funct2() {
var theWindow = $(window),
$welcometext = $("#welcometext"),
aspectRatio = $welcometext.width() / $welcometext.height();
function resizewelcometext() {
if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
$welcometext
.removeClass()
.addClass('welcometextheight');
} else {
$welcometext
.removeClass()
.addClass('welcometextwidth');
}
}
theWindow.resize(function() {
resizewelcometext();
}).trigger("resize");
});
$(function funct3() {
var theWindow = $(window),
$entertext = $("#entertext"),
aspectRatio = $entertext.width() / $entertext.height();
function resizeentertext() {
if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
$entertext
.removeClass()
.addClass('entertextheight');
} else {
$entertext
.removeClass()
.addClass('entertextwidth');
}
}
theWindow.resize(function() {
resizeentertext();
}).trigger("resize");
});
</script>
My best guess is that either the functions or some of the variables are conflicting somehow, but I have tried just about everything to fix it. Any help would be much appreciated. Thanks! FF, Safari, Opera all execute this javascript code to refresh the page properly, but in IE version 8.0.6001.18904 the page doesn't seem to refresh on click of orange_refresh button. I have checked out a different version of IE8, don't recall exact version, but it did seem to work fine in that one, whatever version it was probably the latest now that I think of it. Check out code below any sug.'s could be helpful, though its probably a bug.. Code: <a href="javascript:document.location.reload();" onmouseover="window.status='Refresh'; return true" onmouseout="window.status='Page Refreshed'"><img src="image/orange_refresh.png" width="30" height="30" border="0" /></a> Hello Friends In my jsp,Struts project i am using the javascript calendar control for selecting the date and by using function calcage() i am calculating the age of the user but problem occurs when the page refreshes OR when user updated the other values such as name ,contact no. Then the value of the age is set as 0 in the textfield as 0 So can you please tell me why this problem occurs And please give me solution Thanks 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 |
|||||||