HTML - How To Load New Image Without Loading New Page?
Is it possible with html? i've been working on a site but each time you click the next arrow a new page loads, all the text is in the same place so it doesn't move and is even in a fixed div but due to it being a new page everything loads, the text collapses until the larger image in the center loads. Of course this is fixed when the site is cached but of course the site would only be cached once someone has clicked through it and experienced the problems 27 times...
so my question is is it possible to code for when i click the next arrow only a new image from a different link to load? is this possible with html? I don't know a single thing about flash or javascript. thanks for all the help in advance here is the page in question (not done but you can still see the problems. the home and bio links well, aren't links yet) http://www.paulodourado.com/ Similar TutorialsHello, I consider this an HTML problem but I could be wrong. Not much of a coder myself I have been sticking bits here and there from all over the web. I have managed to integrate a percentage load meter on my site but it loads after the images have -defeating the purpose- I was hoping somebody could tell me where I'm going wrong. The % meter is pretty, and that's why I like it, but I don't think its accurate? I got it from the link below: http://www.bram.us/projects/js_bramu...rhandler/#what Here is my site so far, I would like to pre-load the .png %bar images so it makes some sense and then get rid of the bar when the page has loaded. I especially need this as java disappears when a page is scrolled and being positioned behind the java applet it would be seen. http://lovelago.googlepages.com/flow4f.html Many thanks. hi, i have an image rotation code, but its working on switching the code on a timer, and i want it to appear randomly on the page load. anybody know how to change the code? i have the timer part of it below. thanks in advance. var interval = 1.5; // delay between rotating images (in seconds) var random_display = 1; // 0 = sequential, 1 = random interval *= 1000; Hi, I want to load a window with loading image on a button click. The new window is having an other content so before loading the actual content i want to disapear the loading image from the new window. I tried with html like <html> <img src=".." /> --------------------- Actual content " display:none " ----------------------- <script> actual contentid.display:block; img.display:none; </script> </html> But in this method am seing the image after some time lanching the window. i want to c the image right after launcing the window till my actual content loads. can anybody suggest something for this,..... First let me apologize if this post has been made and/or belongs in another area but I'm not too sure even sure how to ask this. My humble site is set up like such using HTML and CSS: As of right now I have it such that when a navigation link is clicked it loads a whole new page. How can I do this such that only the "main text" area (which sits inside a table) is loaded? I hope that makes sense! This is sort of both HTML and CSS, but I'll post it here for now. My question is: In CSS, I type the following: td.tablehead { background-image:---------; .........; .........; } Now, I will be using the "tablehead" class around 20 times on a webpage, so will the background image stated above have to load 20 TIMES, or just once, since the same image is being used? Please respond ASAP. Thanks Im having a problem i dont know if its just the loading speed, but so the image slideshow i have loads first below my tabbed info on the right, it loads beneath but then to the top, not a major issue but feels like it could be fixed, the code is here Code: <style> .peKenBurns { width: 500px; height: 330px; align: center; margin-left:6px; } </style> <script> jQuery(function($){ $(".peKenBurns").peKenburnsSlider() }) </script> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript"> google.load('jquery','1.4.3'); google.setOnLoadCallback(function() { $('#desc1 div:not(:first)').hide(); $('#tabs1 li').click(function(event){ var id = $(event.target).index(); $('.active1').removeClass('active1'); $(event.target).addClass('active1'); $('#desc1 div').hide().eq(id).show(); }); $('#desc2 div:not(:first)').hide(); $('#tabs2 li').click(function(event){ var id = $(event.target).index(); $('.active2').removeClass('active2'); $(event.target).addClass('active2'); $('#desc2 div').hide().eq(id).show(); }); $('#desc3 div:not(:first)').hide(); $('#tabs3 li').click(function(event){ var id = $(event.target).index(); $('.active3').removeClass('active3'); $(event.target).addClass('active3'); $('#desc3 div').hide().eq(id).show(); }); $('#desc4 div:not(:first)').hide(); $('#tabs4 li').click(function(event){ var id = $(event.target).index(); $('.active4').removeClass('active4'); $(event.target).addClass('active4'); $('#desc4 div').hide().eq(id).show(); }); } ); </script> <style type="text/css"> h1 { margin-left:5px; } #wrapper { width:470px; margin-left:5px; } #tabs1 { width:100%; padding:0px; margin:0px; } #tabs1 ul { padding:0px; margin:0px; width:100%; } #tabs1 li { height:50px; display:block; float:left; line-height:50px; text-align:center; background:#036; margin:0px; padding:0px; width:32.9%; color:#FFF; cursor:pointer; text-transform:uppercase; } #tabs1 li.active1 { background:#CCC; color:#000; border-bottom:1px solid #CCC; } #desc1 { width:100%; } #desc1 div { clear:left; width:100%; height:200px; } </style> <table width="100%" cellspacing="3" cellpadding="3" border="0" class="border"> <tbody> <tr> <td> <h1>Residential - Doors</h1> <a href="http://[LINKID:4]">« Back to Residential</a> <table width="100%" cellspacing="1" cellpadding="1" border="0" summary=""> <tbody> <tr> <td width="270"><!-- slider markup, 3 slides --> <div class="peKenBurns" data-mode="swipe" data-logo="disabled" data-controls="over" data-shadow="disabled"> <div class="peKb_active" data-delay="6"> <img src="images/page_content/residential_doors_sliding1.jpg"/></a> </div> <div class="peKb_active" data-delay="6"> <img src="images/page_content/residential_doors_sliding2.jpg"/></a> </div> <div class="peKb_active" data-delay="6"> <img src="images/page_content/residential_doors_sliding3.jpg"/></a> </div> <div class="peKb_active" data-delay="6"> <img src="images/page_content/residential_doors_sliding4.jpg"/></a> </div> </div> <!-- end slider markup --></td> <td> </td> <td> <h1>SLIDING WINDOWS</h1> <div id="wrapper"> <div id="tabs1"> <ul> <li class="active1">Description</li> <li>Features</li> <li>Options</li> </ul> </div> <div id="desc1"> <div> <p>Aluminum sliding windows are both functional and durable. The ultimate low maintenance window style due to few moving parts. The sliding window is a classic design that will suit most architectural styles.</p> </div> <div> <ul> <li>Choice of coloured glass & Aluminium</li> <li>Screens are fittable or removable from inside the room</li> <li>Maximum Height 1500mm</li> <li>Maximum Glass Laminate 6.38mm</li> <li>Adjustable height key locks</li> </ul> </div> <div> <ul> <li>Range up to BAL 40 for bushfire areas</li> <li>Range of glazing solutions</li> <li>External aluminium insect, safety and supascreens</li> <li>Sump sill for extreme weather conditions</li> <li>Range of standard and custom colours</li> <li>Variety of window style configurations</li> </ul> </div> </div> </div> </td> </tr> <tr> <td> </td> <td> </td> </tr> if that doesnt help go to http://www.c-view.com.au/index2.php?...ential-windows I have 40 .jpg picures/photos that I want to display on a web page. They have all been through the thumbnail process, and none is larger than 25k. However, when trying to open the page on a dial up connection, the process stops (times out) before all the pictures can be completely displayed. Is there some remedy for this? Is there a way to download them in groups of, say, 10, so the browser can catch up and complete the displays? I don't really have a clue... Thanks... Does the order of laoding HTML,CSS,javascript files etc depends upon the rendering engine ? or they generally follow a common order. What is the best place to link a javascript file ? I have an iframe arrangement with a horizontal navigation bar at the top of the screen that loads one of seven different pages under that nav bar at the iframe point. The pages take around 15 secs to load, so I tried to use the onload=document.location=pagename.htm on the body tag to show a page loading please wait message. This works just fine on the initial page that contains the iframe. BUT, when a choice on the nav bar is clicked, the page loading please wait gif does not show up at the iframe point. Instead, the target page appears after 10-15 secs. Any advice, please? The main index page on my site takes FOREVER to load up. I thought maybe it was a problem with the server or my DSL, but all the other pages within the domain load fine. There are quite a few images, but they are extremely small sizes and not anymore than any other web site. http://moviepatron.com For some reason, the Google adsense loads right away, but the rest of the page takes literally minutes to apprear. Anyone have any thoughts as to the cause? Thanks! removed thank you Hello, I am new to the forum and html in general... I came across this website: http://ricardovilloria.com/ and what i like about it that pages of work load without re-loading the whole page again. It is really simply done - yet I cannot see how. I don't understand what is: http://ricardovilloria.com/work/03 is it a folder? how come it doesn't have .html extension? I tried downloading it - it seems that there is an index.hml that has elements on the page/website that are always stay, in this case header and the list of links on the right. But how the other pages load into this one with only a click? the website is clearly not a php website...? how is this done? I appreciate any help thanks alimdar Hi, I hope someone can help. I have a conservation website and one of the pages is linked to a large mysql database which pulls out stat data. I can take a while to load so I wanted to have an ' loading page ' that displayed while the page was loading in in the background. It would also be great if it could display a message saying something like ' Extracting database entries ' with a progress bar below. Would it be possible for someone to help me with the code to do this? Many thanks Simon Hi, I've just put some of the finishing touches to www.oisinmcgann.com which works just fine in IE7, Firefox, Safari and every other browser I've checked. Except IE6 (of course), where some of the pages just hang loading one of the background images. There's a lot of CSS and some transparent PNGs involved, but I've followed tutorials and tips on-line and think everything should be technically alright. More annoying is that there are three layouts involved. The one on the home page seems to work fine, while if you check out the books>Mad Grandad or books>Forbidden Files IE6 just gives up after putting in the CSS menus and the text. Could any give me some pointers on what I can do here? (Aside from ask everyone visiting the site to upgrade...) Cheers, M Hi, I have made an ubuntu server (11.10) and I have made a site on this IP number: 188.177.104.174. When I load the site from a non-local location the site looks strange... The whole setup is missing... I guess its a very basic configuration issue!? Can you help? Frank I am having issues with this page loading: http://www.avidcat.com/Submit-Site.htm Sometimes it loads fine on my screen and other times it locks up after loading just the header. Does anyone here have any problems opening this page? I am trying to determine if the problem is a conflict with the new shopping cart we are using. Thanks hi, is there any tool to slowdown the page loading in my browser in order to see the behavior of my website when the bandwith is low ? thanks Hi, I just edited my index page but when i type the name to the website it still shows the older version of the index page... how do i change this? Pleasee heeelllpppppppppppppp http://www.nonvoicebpo.co.cc. This site consist of non voice BPO services details, at the top of the site i am calling one image , it is loading very slowly. how to load it quickly. thanks Hi I am rebuilding my new website and want to make the gallery be more accessible to change when I want to add new work. I thought I could make an XML file with sequential image names that can then be loaded when the page loads and so make changes easier. I am not a javascript or XML script writer, and was looking around the web for a solution. I could only find flash versions or this method. What I would like is a script that could read the xml file and place images and a description in divs inside a container div on my page. This would then be styled using CSS. The images placed will also need to have an associated link to a bigger image file. Does anyone know of any resources that can give good examples of this type of gallery loader? Thanks in advance |