JavaScript - Refresh Before It Loads?

Hi Currently my website waits till all images are loaded up first:

Code:

$(document).ready(function(){

	* LOAD UP ALL THEM IMAGES FIRST... *

$(window).load(function() {
	letsLoad();
	fadingEffects();
});

However my website now has over 200 images on the website and now its taking way too long to load the images.

My question's a

1. Is it possible to either load the site when its around 20% or even 50% loaded?

OR

2. If its possible to give certain images a tag?? and when these images are loaded then the site loads?

Heres a link to the site - must warn you need broadband and a high speed connection takes way to long to load. Takes me around 1minute 30seconds

http://www.arcvizio.co.uk/ovoma/2/index.html


Thanks

I have up to 3 dropdown lists that I can select using javascript functions. Depending on what I select in the first dropdown loads what is in the 2nd drop down and so on. i want to be able to select the first drop down and it skips the 2nd one and displays the 3rd one. How do I do that with the current functions I am using.

Code:

function cboSourceChange(){
		var iSource = document.frmHarvestForm.cboSource.options[document.frmHarvestForm.cboSource.selectedIndex].value;
		var iSub1 = document.frmHarvestForm.cboSub1.options[document.frmHarvestForm.cboSub1.selectedIndex].value;
		var iSub2 = document.frmHarvestForm.cboSub2.options[document.frmHarvestForm.cboSub2.selectedIndex].value;
		var dtBeginDate = document.frmHarvestForm.txtBeginDate.value;
		var dtEndDate = document.frmHarvestForm.txtEndDate.value;
		var iIndCert = document.frmHarvestForm.cboIndCert.value;
		location.replace("HarvestBoard.asp?cboSource="+iSource+"&cboSub1=0&cboSub2=0&cboSub3=0&txtBeginDate="+dtBeginDate+"&txtEndDate="+dtEndDate+"&cboIndCert="+iIndCert);
	}
	function cboSub1Change(){
		var iSource = document.frmHarvestForm.cboSource.options[document.frmHarvestForm.cboSource.selectedIndex].value;
		var iSub1 = document.frmHarvestForm.cboSub1.options[document.frmHarvestForm.cboSub1.selectedIndex].value;
		var dtBeginDate = document.frmHarvestForm.txtBeginDate.value;
		var dtEndDate = document.frmHarvestForm.txtEndDate.value;
		var iIndCert = document.frmHarvestForm.cboIndCert.value;
		location.replace("HarvestBoard.asp?cboSource="+iSource+"&cboSub1="+iSub1+"&cboSub2=0&cboSub3=0&txtBeginDate="+dtBeginDate+"&txtEndDate="+dtEndDate+"&cboIndCert="+iIndCert);
	}
	function cboSub2Change(){
		var iSource = document.frmHarvestForm.cboSource.options[document.frmHarvestForm.cboSource.selectedIndex].value;
		var iSub1 = document.frmHarvestForm.cboSub1.options[document.frmHarvestForm.cboSub1.selectedIndex].value;
		var iSub2 = document.frmHarvestForm.cboSub2.options[document.frmHarvestForm.cboSub2.selectedIndex].value;
		var dtBeginDate = document.frmHarvestForm.txtBeginDate.value;
		var dtEndDate = document.frmHarvestForm.txtEndDate.value;
		var iIndCert = document.frmHarvestForm.cboIndCert.value;
		location.replace("HarvestBoard.asp?cboSource="+iSource+"&cboSub1="+iSub1+"&cboSub2="+iSub2+"&cboSub3=0&txtBeginDate="+dtBeginDate+"&txtEndDate="+dtEndDate+"&cboIndCert="+iIndCert);
	}
	function cboSub3Change(){
		var iSource = document.frmHarvestForm.cboSource.options[document.frmHarvestForm.cboSource.selectedIndex].value;
		var iSub1 = document.frmHarvestForm.cboSub1.options[document.frmHarvestForm.cboSub1.selectedIndex].value;
		var iSub2 = document.frmHarvestForm.cboSub2.options[document.frmHarvestForm.cboSub2.selectedIndex].value;
		var iSub3 = document.frmHarvestForm.cboSub3.options[document.frmHarvestForm.cboSub3.selectedIndex].value;
		var dtBeginDate = document.frmHarvestForm.txtBeginDate.value;
		var dtEndDate = document.frmHarvestForm.txtEndDate.value;
		var iIndCert = document.frmHarvestForm.cboIndCert.value;
		location.replace("HarvestBoard.asp?cboSource="+iSource+"&cboSub1="+iSub1+"&cboSub2="+iSub2+"&cboSub3="+iSub3+"&txtBeginDate="+dtBeginDate+"&txtEndDate="+dtEndDate+"&cboIndCert="+iIndCert);
	}

Does anyone know what's wrong with this code because when the page loads, the link is not being hidden

Code:

window.onload = setTarget;

function setTarget()
{
var theLinks = document.getElementsByTagName('a');
for(var i = 0; i < theLinks.length; i++)
{
if(theLinks[i].getAttribute('href') == '/subjects/new')
{
theLinks[i].style.display = "none";
}
}
}

I am working with using Javascript to create a page that scales and keeps its aspect ratio (much like a Flash page would). After a lot of trial and error, I have a prototype up with a couple of problems.

It loads correctly once in I.E. Reloading, or opening a new browser, will also load the page correctly. But visiting a different page and coming back causes the width attributes to break. This happens with the non-aspect-ratio version in pure HTML also, but I was hoping that this problem would be solved by establishing values based on javascript variables.

As for Firefox, the problem is more or less exactly the opposite. The page loads up all wonky the first time, and a reload or resize will fix it for every time afterward.

To see what I'm talking about, you can take a look at
http://www.jonesmfgmusic.com/testpag...lem_width.html

For the HTML only version, see
http://www.jonesmfgmusic.com/testpag...blem_html.html

I'm guessing this is something to do with the order in which the data is loaded, so that once the information is all cached, it stops functioning in IE, and starts functioning in FF... can anyone confirm whether I'm on the right track with that, or how to fix it if I am?

I'm most concerned by the fact that the width attribute is behaving as it does in IE. That looks like some kind of Microsoft bug to me, and I need a way around it. As for Firefox, I am guessing if I can just get it to load all of the correct information ahead of time, the page should come up correctly, but I just can't think how to do that.

I am working on a demo for a movie site, and 90% of everything seems cool.
Here

I am doing php.flushes, .htaccess caching and using PNGs to help with performance. I might start using another sub site to grab all the scripting from to increase performance, but it seems a tad bit slow at the moment.

- There are a few issues one being when you click on X-Men and look at the gallery the images seem to flicker sometimes going from image to image.

I am using a fade script I found and then using setTimeout() to give the fade script time to do its thing then call for a new image.
Code:

		FadeOpacity(main_img_id, 100, 0, 600, 12);
		setTimeout("updateGallery('"+target_arr+"','"+main_img_id+"')", 600);

- Also in the same area I am checking clientHeight after each image modifying the marginTop. The thing with that is the clientHeight only seems to update after the second function call. I tried using a setTimeout() but that didn't nothing.
Code:

		document.getElementById(main_img_id).src = "assets/movie_images/"+arr[i];
		img_height = document.getElementById(main_img_id).clientHeight;

Any suggestions with improving image load performance, the clientHeight issue or the image flickering issue would be appreciated.

So I am having a bit of a weird issue.

I am trying to make a webpage compatible with IE8 and it's quite painful. The page works great in firefox and chrome, but in IE8 it only loads some of the time. About 60% of the time the page loads and executes properly, but the other 40% of the time it looks like it hits an error somewhere and doesn't finish loading.

I have tried using the IE error console / debugger (by pressing F12), but I can't seem to find any information about why the page isn't loading properly.

The page that I am working on is located he http://tinyurl.com/89anxbd

The page uses an SVG based UI, and in order to make this compatible with <= IE8 I am using SVGWeb to render the SVG code as flash for IE8 users. For Firefox, and other browser-compliant users the SVG code is rendered natively in the browser.

Here is an image of what the page should look like (when it does load correctly in IE8):



Here is an image of what the page looks like when it fails to load:



It is like the page defines the circle elements for the various cities, but has not yet rendered the provinces (which are defined above the cities in the HTML body), but I'm not 100% sure on this.

Any help is much appreciated!

Hello:

I have an ajax file to loads the content of another file into a div, here is the js code:

PHP Code:
<script type="text/javascript">
    function showUser(str)
{
if (str=="")
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  } 
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","getcar.php?q="+str,true);
xmlhttp.send();
}
</script> 


the file within xmlhttp (getcar.php) has other js codes that are to be executed once the file is loaded into the div. here is one of those files:

PHP Code:
<!-- loading, please wait message script begins-->
<div id="loading\" class=\"loading-invisible\" z-index: 999>
  <p><font color=\"black\" size='4'>one moment, please!</font> <font color=#218868> Auto Tech Pro &nbsp;&laquo;&nbsp;Initiating...&nbsp;&raquo;&nbsp;</font><br /><img border='0' src='images/spinnnnnn.gif' width='215px' height='206px'>
        
</div>
<script type=\"text/javascript\">
  document.getElementById(\"loading\").className = \"loading-visible\";
  var hideDiv = function(){document.getElementById(\"loading\").className = \"loading-invisible\";};
  var oldLoad = window.onload;
  var newLoad = oldLoad ? function(){hideDiv.call(this);oldLoad.call(this);} : hideDiv;
  window.onload = newLoad;

</script>

<!-- loading, please wait message script ends-->

<script type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js\"></script>
      <script src=\"/AJAX/popBox1.2.0.js\" type=\"text/javascript\"></script>
    <link href=\"/AJAX/popBox1.2.0.css\" rel=\"stylesheet\" type=\"text/css\" />
 
    <script type=\"text/javascript\">
 
        $(document).ready(function () {
                $('#inputbox').popBox({width:550, newlineString: '<br/>' });
                  });     
    </script> 


this however is not working. If I open getcar.php independently of the ajax, the preceeding js codes work fine, but not once the ajax loads the file into div.

Any thoughts on how this is doable?

Mossa

Hi All,

I am new to javascript and actually I need to insert the data into a textarea from a text file when the user loads the browser..

and I am using this program to do it..but its throwing error 405, I dont know whats the problem..can any one please check the code or give me some code to do the same funtionality.

Quote:
<script type="text/javascript">
function getfile()
{
xmlHttp = GetXmlHttpObject();
if (xmlHttp == null)
{
alert("Browser does not support HTTP Request");
return;
}
var url = "${pageContext.request.contextPath}/static/files/email1.txt";
xmlHttp.onreadystatechange = stateChanged;
xmlHttp.open("POST", url, true);
xmlHttp.send(null);
}

function stateChanged()
{
if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete")
{
var emm = xmlHttp.responseText;
alert(emm);
}
}
function GetXmlHttpObject()
{
var xmlHttp = null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp = new XMLHttpRequest();
}
catch (e)
{
//Internet Explorer
try
{
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
</script>

can one give me some idea regarding this.


Thanks in Advance,

Best Regards,
Rajasekhar.

i have a photo slideshow that loads in the header so when the page is loaded the slide show is there on the left.

it looks like this (page layout)

header
--------------------> slideshow
content

---------------------> image
footer

-----------------------

where it says image i am adding an image, that colum is controlled by the header
so i added a div in there for the image.

what is happening is that since the image is small and the slideshow is large,
when the page loads the single image pops up for a second where the slide show is,
then it moves down on the page where it should be. I know this is caused by the
fact that the image loads faster than the slideshow so we see the image first in that space.

what i am trying to do is pause the single image load until the slideshow loads,
but i dont know how?

I cant move the image down and load it in the body because that left side column is
controlled by the header slideshow it has to be part of it when it loads.


has to be a way to make the slide show load on the page and then the image.

here is the setup on the header..


Code:

<table  border="0" align="center" cellpadding="0" cellspacing="0" width="100%">
              <tr><td height="10px">
               </td></tr>
               <tr><td valign="top">
                <?php if($_SERVER['PHP_SELF']!='/crop.php')
                      {?>
                  <div style="width:250px; background-color:#666666; height:250px; float:right;
 display:inline; color:#CCCCCC; margin-right:8px;">
                     <div id="fadeshow1">
                      </div> <!-- close fadeshow div -->

                  
                    <!-- added image -->

                   <div style="text-align:center;width:250px;padding-top:30px;
background-color:#FFFFFF;float:right;color:#000000;">
<img src="<?=$SKIN_IMAGE_PATH?>/myimage.gif" border="0" alt="" title="myimage" />
</div>                                         
                      
                   <!-- end add -->

                       </div>  <!-- close top div for fadeshow and this image -->

                      <?php } ?>

the body of the site pages load here

I am displaying a webpage from external domain in an iframe on my site. The webpage being shown in iframe has a header image that I would like to not appear when someone visits my site. Is it possible using Javascript or otherwise to have the iframe scrolled down by a certain pixels by default?

Hi. I am very new to javascript, so I might not even be wording my question right, but I am going to try and be as concise and specific as possible.

I am using jquery on my website- the galleria plugin- to make a slideshow. you can see the completed show he
http://www.pauljameswilliams.com/demo2a.html

This slideshow will be one of three on my website. Each slide show will opperate the same exact way.I have built in tabbed navifation, and the slideshows will all be accessable under the "portfolio" tab by clicking on their corresponding links.

check out the site he
http://www.pauljameswilliams.com/portfolio.html

As it is I have one slideshow up, although not yet connected to the corresponding link, but the images won't load. My guess is that because the div tag is hidden that the contents don't load propperly and I need the contents to load when the corresponding div tag that it is contained in becomes visible but I don't know how to do that.

this is the javascript that I have written to show/hide the <div> tags where the content will live. Three slide shows will live in content_2 and show/hide when the corresponding button is pressed.
Code:

function tabSwitch(new_tab, new_content) {  
  
    document.getElementById('content_1').style.display = 'none';  
    document.getElementById('content_2').style.display = 'none';  
    document.getElementById('content_3').style.display = 'none';
	document.getElementById('content_4').style.display = 'none';
    document.getElementById(new_content).style.display = 'block';     
  
    document.getElementById('btn_1').className = '';  
    document.getElementById('btn_2').className = '';  
    document.getElementById('btn_3').className = '';
	document.getElementById('btn_4').className = '';
    document.getElementById(new_tab).className = 'current';        
  
}

thank you- I am really stuck. i promise, i am actually learning javascript, I'm not just trying to get other people to do my work for me.

I want to place a Logo/ad in front of content, there are ways to do it but the problem with them is that they use JS show/hide method. What happens is that the content doesn't load while user is watching the logo/ad, which results as double waiting for the user first for the logo/ad and then the actual flash content loading.
So I was thinking if there is a way that a logo/ad could be displayed and at the same time flash content continues to load at the back end.
*I didn't ask for a loader that continues to appear until at the back end flash content is done loading, because I found only one script that was able to do so using Jquery but it was designed to work with fixed pixels while my flash content is based on %ages*

Live Demo: http://bloghutsbeta.blogspot.com/201...ent-issue.html

Note: Sorry for providing blogspot link but JsFiddle is not an option for a person living in Afghanistan with 5KBps but still if you feel that I am missing something please let me know I will edit it and try my best to provide as relevant question as possible ^^

Relevant Markup:
Button for lightbox or Modal Window

Code:

<a class="poplight" href="#?w=100%" rel="popup_name"><img alt="play game" class="happybutton" onmouseout="this.style.opacity=0.8;this.filters.alpha.opacity=80" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" src="http://farm5.static.flickr.com/4084/4998558471_27e3985c16_m.jpg" style="opacity: 0.8;" /></a>

Code:

  <div class="popup_block" id="popup_name">
     <script type="text/javascript">
    $(document).ready(function(){
        $('a.poplight[href^=#]').click(function() {
            $('<iframe/>')
                .attr('frameborder', 0)
                .attr('allowTransparency', false)
                .attr('scrolling', 'no')
                .attr('width', '100%')
                .attr('height', '98%')
                .attr('src', 'http://files.cryoffalcon.com/bhgames/dressup/Celebrities/Wizard%20Fashion.html')
                .appendTo('#popup_name');
        });
    });
    </script>
    </div>

CSS:

Code:

#fade { 
    	display: none; 
    	background: #000;
    	position: fixed; left: 0; top: 0;
    	width: 100%; height: 100%;
    	opacity: .80;
    	z-index: 9999999;
    }
    
    .popup_block{
       width: 98.95%; height: 98.2%;
    	display: none;
    	padding: 0px;
    	line-height:1em;
    	font-size: 1em;
    	position: fixed;
    	top: 0px; left: 0px;
    	z-index: 999999999;
    	-webkit-box-shadow: 0px 0px 20px #000;
    	-moz-box-shadow: 0px 0px 20px #000;
    	box-shadow: 0px 0px 20px #000;
    	-webkit-border-radius: 10px;
    	-moz-border-radius: 10px;
    	border-radius: 10px;
    }
    .close {
    	height:20px;
    	float: right;
    	margin: 0 2px 0 0;   
    }

JS (actually Jquery)

Code:

<script type="text/javascript">
        $(document).ready(function(){
        						   		   
        	//When you click on a link with class of poplight and the href starts with a # 
        	$('a.poplight[href^=#]').click(function() {
        		var popID = $(this).attr('rel'); //Get Popup Name
        		var popURL = $(this).attr('href'); //Get Popup href to define size
        				
        		//Pull Query & Variables from href URL
        		var query= popURL.split('?');
        		var dim= query[1].split('&');
        		var popWidth = dim[0].split('=')[1]; //Gets the first query string value
        
        		//Fade in the Popup and add close button
        		$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" title="Close It" class="close"><img src="http://files.cryoffalcon.com/bloghuts/images/close%20button.png" alt="Close" width="20" height="20" /></a>');
        			
        		//Define margin for center alignment (vertical + horizontal) - we add 80 to the height/width to accomodate for the padding + border width defined in the css
        		var popMargTop = ($('#' + popID).height() + 0) / 0;
        		var popMargLeft = ($('#' + popID).width() + 0) / 0;
        		
        		//Apply Margin to Popup
        		$('#' + popID).css({ 
        			'margin-top' : -popMargTop,
        			'margin-left' : -popMargLeft
        		});
        		
        		//Fade in Background
        		$('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
        		$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer 
        		
        		return false;
        	});
        	
        	
        	//Close Popups and Fade Layer
        	$('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
        	  	$('#fade , .popup_block').fadeOut(function() {
        			$('#fade, a.close').remove();  
        	}); //fade them both out
        		
        		return false;
        	});
        
        	
        });
        
        </script>

Alright, so I'm working on a script, and I'm simply using the following code:

document.getElementById("element").onclick = alert("hello");

When I load the page, the alert fires instantaneously. I'm completely stumped. I've checked everything in my not too extensive Javascript file, and it looks fine. What common errors could cause this?

How can i run a script after the window.open loads completely?

I have a slow loading external JavaScript that displays a calendar widget. When I put it in my sidebar, while the page loads, it cuts off where the calendar should be until the JavaScript for it finishes.

How can I make the script load after the page finishes loading?

I tried creating a function at the end of the HTML and calling the function in the sidebar, but I think because the function was being called before the script was executed, it didn't work.

I appreciate any and all help!