HTML - Loading New Window With A Loading Image
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,..... Similar TutorialsHi, Want to open a window without addressbar and menubar with loading image for the button click. i want to c the loading gif right after opening the window. its very urgent anybody help me on this Thanks, Hey, did a quick search and didn't find anything, I want to have a column of thumbnails on the left side of my page, and I'd like to have it so when a thumbnail is clicked, it loads the fullsize image into a spot to the right without having to create a new page for each image. I don't want to use frames/flash/popups.. this is possible, right? I'm working with Dreamweaver currently and know some html, but that's about the extent of my scripting knowledge. How would I do this? Also, if I could load dynamic text below the image, that would be even better; I want to have captions to go along with each picture. Thanks much guys- 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 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 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 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 http://www.heresmary.com I just finished uploading my site, and I noticed that when I click on a link the page loads then loads again a split second after. Does this happen to anyone else? If so can anyone give me any advice about it? 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/ Hi All, Good Evening I am new into this forum..My question i have a .html file which are having images mentioned as absolute path.How to provide them in relative path so that when i run the same html in other machine it should run well without any disapperaing of icons. Below is the small tag code which need to be converted. Quote: <h3> <a href="#redirect"><font size=4.2 face=" Palatino Linotype" color="#9400D3">a) About Tool <img border="0" src="C:\\Forum Tool Code\\SNF Automation Executor_April20_2009\\Images\\edit.png" width="30" height="25"> </font> </a> </h3> Thanks in advance. regards, Viswanadh hi when u surf to my forum. u will see the images a real short time in a place on the screen where they should not be. right after that they are being positioned by css. surf to www.acidleague.com and all goes well, but then click on forum and u will see this issue, then u can click home-forum-home-forum to see it really clear the wierd part is that this is happening only by divs i added myself to the code i made these divs in the overal_header.html page <div id="sidebarleft"></div> <div id="sidebarright"></div> <div id="cornerleft"></div> <div id="cornerright"></div> and uses this css on em #sidebarleft { padding: 0px; float: left; margin: 0; position:absolute; width: 600px; left:-599px; top:0px; height:600px; background-image:url(http://www.acidleague.com/League/the...eader_bg.jpg); background-repeat:repeat-x; } #sidebarright { padding: 0px; float: left; margin: 0; position:absolute; width: 600px; left:999px; top:0px; height:800px; background-image:url(http://www.acidleague.com/League/the...eader_bg.jpg); background-repeat:repeat-x; } #cornerleft { padding: 0px; float: left; margin: 0; position:absolute; width: 47px; left:-46px; top:192px; height:49px; background-image:url(http://www.acidleague.com/League/the...bg/tleft.jpg); } #cornerright { padding: 0px; float: left; margin: 0; position:absolute; width: 47px; left:999px; top:192px; height:49px; background-image:url(http://www.acidleague.com/League/the...g/tright.jpg); } whats is the most common way to stop this? ty Hi there, I was wondering if anyone knows how to centre an image link in another frame (yes I know frames are bad but its an old website I am updating) i have <a href="picturelink" target="mainframe"> <img src="thumbnail" border="0"></a> I have tried everything from class="center" to editing the original frameset and the original page loaded into the window but I can't get the jpeg file to load up centred and so I was hoping someone might be able to help as I don't want to link all the pictures to seperate html documents with only a centred image in... Thanks for any help. Here's a newbee question and you are probably gonna laught, but there it is: I have two pages saved in the same directory. One is index.html and the other trial.html. They are linked together. Both load the general.css file correctly when I double click on them from the directory they are saved. But when I go from one to another clicking on the link only the content loads and no css rules are applied. What am I doing wrong? How should I code for the css rules to load? Any help will be immensely appreciated Hey all, having a little problem getting Internet Explorer to display a page. Works fine in Firefox and all subsequent pages work just fine. It even downloads the source and everything. just doesn't display it. The page is: http://www.emmafarquharson.com/index.html Thanks, Rich Hi all, I have a flash object that will sometimes not load in IE. However, if you refresh the page, the movie loads just fine.. It's only on the first entrance to the page. My code is: <center> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="290" height="176" id="image-zoomer" align="center"> <param name="allowScriptAccess" value="sameDomain" /> <param name="movie" value="image-zoomer.swf?path=zoom/" /> <param name="quality" value="high" /> <param name="scale" value="noscale" /> <param name="salign" value="lt" /> <param name="bgcolor" value="#ffffff" /> <embed src="image-zoomer.swf?path=zoom/" quality="high" scale="noscale" salign="lt" bgcolor="#ffffff" width="290" height="176" name="test" align="center" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /> </object></center> Any suggestions for me? The site is at http://showball.com Thanks David Go to: http://jmillerteam.com/complete2.html So my client says that sometimes when he loads this page the pics on it aren't loading. He even sent me a screenshot. I have no clue why most of the time they load and sometimes they don't. I can't reproduce the problem. If anyone goes to the page do the pics not load (the first time) for you? Is there an HTML tag that loads a text file right into HTML? Or, so to speak, if i had a text file with HTML written in it, how could i get this into a page, without using any server scripting. Possible? thanks a ton ~DeathBlade I'm pretty new to all of this and need some help trying to load a swf file in a container. What I have is a thumbnail gallery where I have thumbnails on the right side of the page and when you click on the thumbnail it pops on the left side of the page in a container. So what I want to do is keep the same format so you can click on the thumbnail then the swf file appears instead of an exploded image. This is what I have. Also I appreciate any and all help, thank you. <style type="text/css"> img { border: 0px } #container { text-align: center; border: 0px; margin: 0 auto; padding: 0px } #leftcol img { } #rightcol img { } </style> <td width="80" height="421"> </td> <td width="673"><div align="center"><img src="images/AF.jpg" name="ImageOnly" align="absmiddle" /></div> </div></td> <td width="71"> </td> <td width="318" valign="middle"><div id="leftcol"> <div class="root" id="root0"> <div class="scrollContainer" id="scroll0Container"> <div class="scrollContent" id="scroll0Content"> <p> <a href="#" onclick="ImageOnly.src='images/Asylum_5.jpg'"><img src="images/Asylum_5_thumbnail.jpg" /></a> <a href="#" onclick="ImageOnly.src='images/Asylum_1.jpg'"><img src="images/Asylum_1_thumbnail.jpg" /></a> <a href="#" onclick="ImageOnly.src='images/Asylum_2.jpg'"> <img src="images/Asylum_2_thumbnail.jpg" /></a> <a href="#" onclick="ImageOnly.src='images/Asylum_3.jpg'"><img src="images/Asylum_3_thumbnail.jpg" /></a> </p> <p> </p> <p> <a href="#" onclick="ImageOnly.src='images/kerryn_5.jpg'"><img src="images/kerryn_5_thumbnail.jpg" /></a> <a href="#" onclick="ImageOnly.src='images/kerryn_6.jpg'"><img src="images/kerryn_6_thumbnail.jpg" /></a> <a href="#" onclick="ImageOnly.src='images/kerryn_7.jpg'"> <img src="images/kerryn_7_thumbnail.jpg" /></a> <a href="#" onclick="ImageOnly.src='images/kerryn_8.jpg'"><img src="images/kerryn_8_thumbnail.jpg" /></a> <a href="#" onclick="ImageOnly.src='images/kerryn_9.jpg'"><img src="images/kerryn_9_thumbnail.jpg" /></a> <a href="#" onclick="ImageOnly.src='images/kerryn_9.jpg'"><img src="images/kerryn_movie_thumbnail_2.jpg" /></a> (this is where I want to add it) </p> <p> </p> <p> <a href="#" onclick="ImageOnly.src='images/f_h_5.jpg'"><img src="images/f_h_5_thumbnail.jpg" /></a> <a href="#" onclick="ImageOnly.src='images/f_h_6.jpg'"><img src="images/f_h_6_thumbnail.jpg" /></a> <a href="#" onclick="ImageOnly.src='images/f_h_7.jpg'"><img src="images/f_h_7_thumbnail.jpg" /></a> <a href="#" onclick="ImageOnly.src='images/f_h_8.jpg'"><img src="images/f_h_8_thumbnail.jpg" /></a> </p> <p> </p> <p> <a href="#" onclick="ImageOnly.src='images/football_1.jpeg'"><img src="images/football_1_thumbnail.jpg" /></a> <a href="#" onclick="ImageOnly.src='images/football_2.jpeg'"><img src="images/football_2_thumbnail.jpg" /></a> <a href="#" onclick="ImageOnly.src='images/football_3.jpeg'"><img src="images/football_3_thumbnail.jpg" /></a> <a href="#" onclick="ImageOnly.src='images/football_4.jpeg'"><img src="images/football_4_thumbnail.jpg" /></a> </p> <p> </p> </div> </div> </div> </div> I hope I'm posting in the right section. Again thank you for any help. My index.html file is like this (www.omegaintertrade.ro) Quote: <html> <head> <title>Omega Intertrade Test Site</title> <link rel='stylesheet' rev='stylesheet' href='global.css'type='text/css' media='screen' charset='utf-8' /> </head> <body> <div id='wrapper'> <div id='wrapper2'> <div id='header'><img src="logo.jpg" height = 120 border="0" hspace="25" > </div> <div id='leftcolumn'> <ul> <li><a href="index.html">Home</a></li> <li><a href="mb.htm">About Me</a></li> <li><a href="mb.htm">Products </a></li> <li><a href="mb.htm">Contact</a></li> </ul> </div> <div id='rightcolumn'><div class= "bheader">This column is intentionally blank!</div> </div> <div id='bodytext'> <div class= "bheader">Home</div> Main text area <br> stay with omega to see the further developments</div> <div id='footer'>Footer</div> </div> </div> <body> </html> As you may see it is consist of header footer and 3 columns in the middle. While visitors navigate through menus only bodytext content will change. For example after registering the site, a small message will appear like 'thank you for registering' on bodytext. How should i place that message in the page(on "bodycontent")? Should i create another html document exact like index.html except changing the content of the "bodycontent" section. This idiot solution comes to my mind Is there another short and easy solution? Im doing a website and have some videos up. I want to be able to have pictures of all the available videos and when the user clicks one of them I want that video to load right next to all the pictures. I remember Google videos had something like this, when you clicked the video you wanted it loaded the video in that page without getting rid of the pictures of all the videos, but they don't have that option anymore. This is the website im doing. http://eyeamchito.fileave.com/videos.html Thanks in advance if I got you confused let me know. I've noticed that on my site, k0shy.com, the Div holding all the main text loads way slower than the text itself. To see what I'm talking about, try going to my site and refreshing the page, the white box should expand to fit the text after the text loads (at least in my browser, Firefox 3.0b5). Is there anyway to fix this? |