|
JavaScript - Webpage Menu Not Playing Well With Image Loading Code
I am using this fancy box code to smoothly pop up an image on click, I got it working on my main index page but that's not where I want to put it. My site has a menu where it loads webpages inside the main index one, I would like to use the code on one of those pages but something is not working.
I am not able to use the specified DOCTYPE but find that it works all the same with my current one, however if I use the given one in addition to the one I have now (and need) then my site does not work properly, further if I replace it I get the same results. My existing doctype: Code: <DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> What the code uses: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> I'm not sure what the differences are but I've been advised that I need to run the code in "standards mode" before I try to fix it. As I see it the code works, just not where I need it to, nothing unusual on my site and nothing unusual that I may be wrong. On my site you can see at the bottom right a blue text link called "aaaa" this is the code that works, however (clicking the dome to the left of that to scroll the page down and selecting the "met.a has guts" menu option diagram) you'll see the "aaaa" link again at the bottom left of that page and that is where I need it to work from. I even tried using the exact code from the example in that linked .htm page but it doesn't make a difference, it probably even hinders the code as it looks at the main html page. But if loading the page on its own the code will work, so its related to the menu and the way that works. If anybody can help that would be brilliant, I'm sure its something simple. Thanks! Similar TutorialsHi! i am working on a facebook like photo viewer. I have used javascript to declare an array of about 200 images. I have the following approach to pre-load the images. I preload all the images when the page loads: HTML: <body onload = "lodpic()"> JAVASCRIPT: function lodpic() { for(i=0; i<=199; i++) { LODImage = new Image(); LODImage.src = picture[i]; } } The problem is the page tries to load all the images when opened. And when the user clicks "next" to view other photos, the other photo is still loading where as some are already loaded. I would like the code to be able to load the photo that the user is currently viewing as the user gets to that picture, before the page tries to finish loading all the photos. In other words, if the user wants to view a particular photo directly, that photo should get the priority of loading quickly. Or if there are other approaches, it would be really helpful. Thank you! Can someone please show me a working example of how to load a WebPage from an existing WebPage using Javascript! I have tried googling the syntax and not having any luck. Thanks, Blake Hi all, this is my first post so forgive me for any errors but i'll try and give all the information i can. i use Xara Designer Pro and i have used a 3rd party software to create a html menu however i have a html loading screen on my site and the menu always appears on top of the screen and while the screen is loading, this is the only thing that appears on top everything else is fine, i have put this to the people on the xara forums and the opinion is that its probably the JS file that the menu is using that is telling it to appear on top. i was wondering what i should look for to determin this problem or if someone could take a look at it for me? i'll upload the JS here and see if anyone can help. my site is at www.pcevo.co.uk however you need to CTRL + F5 to refresh wihtout the cache to see the loading screen if you are on a fast connection.
for some reason I can't get this code to load... Code: <script type="text/javascript">
alert("test");
windowBody = document.getElementById("windowBody");
windowBody.style.height = (frameHeight - 250) + "px";
</script>
that should load when it loads the file foot.php foot.php should be included onto the bottom of all of my labs (and it is) my labs are opened up with Ajax... but the script its not loading at all... someone help =[ the web site is http://opentech.durhamcollege.ca/~in...rittains/labs/ sorry for the poor description I'm having a hard time describing this error lol OK, I programmed most of my page, but not all of it, not the CSS or Javascript. On all the individual HTML pages, it shows Done but with errors. Here is the error. Webpage error details User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; InfoPath.2; Alexa Toolbar) Timestamp: Sat, 18 Dec 2010 05:18:55 UTC Message: Invalid argument. Line: 4 Char: 116 Code: 0 URI: http://www.addyourl.com/convergance/nym6pbs.js Now, the addyourl site is mine too and I put it there because I want my page to load quicker and everything that I do to make it load quicker suggest combing CSS sheets and Javascript files, but whatever the case, I don't have the technical ability to do that. My webpage is: www.fkcapitalfund.com So, I can't fix that error, I don't have the technial wherewithal to do it and the person who did the programming won't help anymore, he made the template for me and left me to my own devices unfortunately. Along the same lines as this, my goal is to get my page to load quicker and my appealing to google Any help to that end would be appreciated. Thanks Hi All, This is my first post and I need some assistance. I'm learning code and attempting to put more than 1 script on a webpage, but individual (separate pages) but together, neither one works. I'm a newbie and my professor doesn't know how to teach so it's me trying to do this myself and any assistance will be helpful. This is what I have (trying to add random pictures and a cycling banner) <script> var imgArray = new Array (4); var index = 0; function cycle () { document.banner.src = imgArray[index].src; index++; if (index > 3) { index = 0; } setTimeout("cycle()", 2000); return; } function startup () { imgArray[0] = new Image; imgArray[0].src = "Im.png"; imgArray[1] = new Image; imgArray[1].src = "Tired.jpg"; imgArray[2] = new Image; imgArray[2].src = "of this.jpg"; imgArray[3] = new Image; imgArray[3].src = "Rainy.jpg"; cycle(); return; } </script> </head> <body onLoad="select();startup()"> <div align="center"> <img name="banner" src="Im.png"> </div> </body> </body> <script> var imgArray = new Array (5); var index = 0; function select () { index= Math.floor(Math.random() * 5); document.banner.src = imgArray[index].src; setTimeout("select()", 2000); return; } function startup () { imgArray[0] = new Image; imgArray[0].src = "1.jpg"; imgArray[1] = new Image; imgArray[1].src = "2.jpg"; imgArray[2] = new Image; imgArray[2].src = "3.jpg"; imgArray[3] = new Image; imgArray[3].src = "4.jpg"; imgArray[4] = new Image; imgArray[4].src = "sheep.jpg"; select(); return; } </script> </head> <body onLoad="cycle(); startup()"> <div align="center"> <img name="banner" src="1.jpg"> </div> </body> This is a class assignment and I can't get it to run. I can't figure out what's wrong. This is most of the script. One part isn't finished yet, but I was still expecting functionality to test. I need to have it load in IE but I can't get it to. Nothing shows up. In Firefox I get the right look but when I click "Run" I don't get a prompt at all. It's not very long. var finalCost; var originalPrice; var markedPrice; var delivery; var tradeIn; var deliveryCharge; var tradeCredit; var discountedPrice; function driverModule_click() // <<< DO NOT CHANGE THIS LINE { // <<< DO NOT CHANGE THIS LINE //================================================================================================== // Module Name: <--- Enter the driver module name from your logic solution. //================================================================================================== //================================================================================================== // Place your code here //================================================================================================== markedPrice = Number( prompt("Please enter the marked price of the bed.", "") ); delivery = prompt("Does the customer need the new bed delivered (Y or N)?", ""); tradeIn = prompt("Does the customer have a trade in (Y or N)?", ""); if(markedPrice > 100) { discountedPrice = markedPrice * .15; } else if(finalScore > 90) { discountedPrice = markedPrice * .14; } if(delivery == "Y" || delivery == "y") { deliveryCharge = 20; } else { deliveryCharge = 0; } if(tradeIn == "Y" || hasExtraCredit == "y") { tradeCredit = 5; } else { tradeCredit = 0; } finalCost = discountedPrice + deliveryCharge - tradeCredit; labelout.value = labelout.value + "The cost to you for the bed is " + finalCost + "\n"; labelout.value = labelout.value + "The original price was " + markedPrice + "\n"; For some reason, can't get my script to load with he page. not sure what I'm doing wrong, but I'm so confused. http://www.rutholsonphoto.com/build-002/index.html Hello everyone, I am just beginning to learn javascript, and I am trying to create a little game where when a user hovers over a picture it changes, and things like that. At the moment I have been trying to make it so that the pictures tile so they fill the whole page area, dynamically so that it changes depending on the users browser size (px). The images have many attributes so I can't just tile them with css as they need to be actual elements. The problem is the code doesn't run, and I can't work out why. I think all the lines that require it have semi colons and its all correct. Forgive me if the answer is clear but as I said I only just started learning. Anyway, on with the code: Code: <!doctype html>
<html lang="en">
<head>
<title>Hi, I'm a button.</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="javascript">
function mainDo() {
if (document.body && document.body.offsetWidth) {
winW = document.body.offsetWidth;
winH = document.body.offsetHeight;
}
if (document.compatMode=='CSS1Compat' && document.documentElement && document.documentElement.offsetWidth ) {
winW = document.documentElement.offsetWidth;
winH = document.documentElement.offsetHeight;
}
if (window.innerWidth && window.innerHeight) {
winW = window.innerWidth;
winH = window.innerHeight;
}
document.write('Width = ' + winW + 'Height = ' + winH);
winW=winW/127;
winH=winH/128;
winW=Math.round(winW);
winWs=winW;
winH=Math.round(winH);
winHs=winH;
document.write('Width = ' + winW + 'Height = ' + winH);
while (winH>0) {
while (winW>0) {
document.write('<img onMouseover="this.src=\'img/hibutton_orange.png\'" onClick="this.src=\'img/hibutton_green.png\'" ondblClick="this.src=\'img/hibutton_blue.png\'" src="img/hibutton_blue.png">');
winW=winW-1;
}
document.write('\n' + '<br>');
winW=winWs;
winH=winH-1;
}
}
</script>
</head>
<body onload="maindo()">
</body>
</html>
Hi, I want to load an image when a user clicks a link on my page. The image is a tracking pixel for an affiliate network, so it doesn't need to be visible to the user (as it's not an image anyway but a php file). I assume this would use the onclick event. Can anyone help? So I'm creating a game and decided to use a canvas for the map. The map is a big pictures 500kb+ (6400x6400px) and the canvas size is 320x320 so I am displaying only part of the image at a time and have the page reload on button click for database purposes. What I'd like help with is performance. Currently it's taking a few secs to reload every time and it seems that it causes some cpu strain (can't switch tabs while loading). Could I stop the canvas from reloading the image each time the page is reloaded and if so then how? Can I make the canvas only load a part of the image, if so then how? If neither is possible any tips, solutions how to solve the performance issues? My goal is to replace a 300px x 300px div with a random assortment of pictures, all being 300px x 300px. I however am not that great at JavaScript (I've taken a bigger bite than I can chew) and would love your guys' help. So far this is what I have for my JavaScript: Code: begin();
function begin()
{
setTimeout(newimage(),7000);
}
function newimage()
{
}
Which brings me to my first question: What's the best method of pre-loading images? And also, if the method is not through JavaScript, how would I reference the image from the JavaScript? My next step would be to transition between images. (Fading specifically.) I really like the fade transition here and I plan on using that in the site. How would I incorporate that into my code? I noticed he made the entire JavaScript code into one line, which is quite annoying. Thanks guys! Hi I have a script which dynamically adds contents to an HTML table using the jQuery's .after();... Now the problem the content is a bit too much and some times IE would crash, so I thought if a loading image would solve this issue? Any ideas? Thanks in advance I have a form that used php to load a random image but now i would like to use javascript instead and am sure I nearly have it. I need to have a random number between 0 -5. Here is my code Code: <script type='text/javascript'>
var random = Math.floor( Math.rand() * 6);
document.write("<img src='images/'"+random+"'.jpg' alt='random image' /><input name='image' type='hidden' value='"+random+"' />")
</script>
Hi, I am using a slideshow and want to basically have an 'image loading' whilst all the images load before the slideshow. Is there a way to do this? So far I have figured the best way around this is to have a GIF as a background image that says the loading message, and then once the slideshow loads over the top its fine, however im guessing this is'nt the right way to do this. I am using this slideshow set to just loop: http://www.dynamicdrive.com/dynamici...lslideshow.htm I am open to using other similar slideshows if there is one more suited. Thanks Basically I want an effect like this: http://www.appelsiini.net/projects/l...ed_fadein.html Where the images on the page fade in as the user scrolls down. I implemented the code on a page, he http://www.jamiewebster.co.uk/orca.html Now, I have a couple of issues with this. First issue, it works in FF but it doesn't seem to work in Chrome. Second issue, I can see the alt text of the images below just above the fold of the page before the image loads (I guess it depends on your monitor size on wether you'll see it or not, but its still a problem!) Thirdly, it seems that once the images have loaded, if you scroll back up you no longer have the fade effect and it only happens once (unless you refresh the page) - would be good if that effect could happen every time you scroll. Any ideas, or if there is better code out there? Thanks in advance!! ok. so i have all these big images and i need to let the whole page load before the viewer sees it what i would like is for a separate url (or something to completely cover the html page so you cant see it loading) to say please wait or something like that. Help! Hi , Pls solve it Javascript problem. I have a page called gallery.html in which we have photo albums.when u click on one of the photo albums opens up all images belongs to that album on same page ( javascript). when click on one of the images it has to open up in a popup ( including other images) which is happening but the probleem is that when u close popup and again click on same images popup is happening but images are not loading. what might be the problem ..pls solve it .......its too urgent thanks in advance nagaraja kharvi I'm try to set up a webpge that will play a live flash video on the left-hand side(got that part working) and display one slide of a presentation(jpg) to the right of the video. I would like to be able to control when the slide image changes by having some js check a text file on my server. The text file could contain something as simple as "Slide1.jpg". I will manipulate the text file with some code I've already written. Is there some simple js code I can put in my page that will cause it to check the text file every 5 seconds, and if the content of the file has changed, to refresh the image on the page with the new image? I'm try to get away from the "clicking" sound that is caused by doing a simple refresh of an Iframe. I'm a complete novice at js, so any help would be appreciated. I'm also open to other solutions that would accomplish the same thing. Thanks, Mike Hi, everyone. I've just finally adjusted the way that the background images is laid out. my problem is that the image seems to load in original size and then align to the screen's width. I'm using a javascript code that I got from http://stackoverflow.com/questions/1...g-aspect-ratio and it is working the way I want it to, mostly. My problem is that I'm not sure how to keep the image from exceeding 100% height of the windows without squashing the aspect ratio? I also need to figure out how to fix the visible action of the image being loaded in it's original size? If we can't get the image to load WHILE at the size I want it to be, can we at least 'hide' the image until the loading have been done? I tried to tweak the codes to include the height limitation but it did not seem to have made any differences. This is my first time actually using javascript so please be easy on me, heh My site is at http://www.lost-ear-studio.com (if you refresh the site, you will see random background images being swapped out using php). Code: <script>
function resizeToMax(id){
myImage = new Image()
var img = document.getElementById(id);
myImage.src = img.src;
if(myImage.width > myImage.height){
img.style.width = "100%";
} else {
img.style.height = "100%";
}
}
</script>
Code: <img id="bg" src="randombg.php" onload="resizeToMax(this.id)"> Code: #bg{
position:fixed;
left:0px;
top:0px;
z-index:-1;
}
|
|||||||