JavaScript - Page Only Loads Correctly Once In Ie, Incorrectly Once In Ff

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?

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

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 - after the page has loaded - detect a text string in the code..

something similar to

Code:

function afterPageLoadsDetect() {

 
	 Quote:

	

	
		

			
				//Code here that would do this ----
if (find_this_on_page_in_source_code == " <b>Average Customer Review: <img src="/v/vspfiles/templates/panda_custom/images/star4.5.gif"> ")
{
   alert("found it");
}
			
		

	
	


}

Simply put -- I want javascript to detect a text string in the source code and return it to me -- AFTER the page is fully loaded.

THANKS.

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?

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!

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.

How can I truncate all words greater than 30 characters using a class name when the page loads?

Been trying to do this for about 5 hours. Trying to conside the following:

* Truncate long words and churn anything above the minimum length with an ellipse.
* Only truncate words and not the whole sentence or paragraph.
* Should truncate text that are inside HTML tags and not truncate the tags themselves.
* When you hover over the ellipse, it will show you the complete word.
* The long words are already truncated when the page load (SEO friendly).
* Block of text are included in a max of 25 <div> elements and a minimum of 1. That's why I'm not using ID.

So far I have this lines of code:

Code:

<script charset="utf-8" language="javascript" type="text/javascript">
function test(gaz) {
		var sbText = gaz.innerHTML;
		var sbTextArr = sbText.split(' ');
		var tempText = "";
		for (var s=0; s<sbTextArr.length; s++) {
			if (sbTextArr[s].length > 30) { sbTextArr[s] = "marco"; }
			gaz.innerHTML = "";
			tempText = tempText + " " + sbTextArr[s];
			gaz.innerHTML = tempText;
			}
	}</script>

<div class="myClass" onmouseover="test(this);"><p>This is a <strong>looooooooooooooo</strong><em>ooooooooooooooooooooooooooooooong</em> word.</p></div>
<div class="myClass" onmouseover="test(this);">A text without long word.</div>
<div class="anotherClass"><p>Another set</p><p>But should not affect if there's a loooooooooooooooooong word.</p></div>

I got this from the web and modified it but not working as I intended it to be.

Useful for posts in forums, blog comments, and guestbooks

Just a basic question.... I am fairly new here. Just wondering if this is just a part of life. It seems like when I load javascript code into a page, that each item I add, such as an accordian vertical navbar, image slider, etc, that each time I add one, the page loads a second or so slower with each one added. I would like some of these features, but is this just a part of life, or are there tricks to avoid the slower load time? It is not major time but after the 2 items I mentioned, it added on about 2 seconds. Just enough to make it a bit annoying.

I read that $(document).ready(function() might slow me down but I do not see that statement in any of my .js files.
Thanks, Buffmin.

Hi,

As you will see with the code below when the text ONE and TWO are clicked on it displays a background color. When ONE is activated TWO is off. When TWO is activated ONE is off.

But when the page loads I want ONE to display the background color. When ONE displays the background color after the page has loaded, I want to click on TWO to display it's background color and ONE should turn off as it does now.

I can't figure out how to activate the background color for ONE when the page loads. Then if it is activated when the page loads, how to turn off ONE and turn on TWO when clicked on and visa versa.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script language="javascript" type="text/javascript">

var btn = function () {
        var active = null, bcolor = '#84DFC1';
        if (this.attachEvent) this.attachEvent('onunload', function () {
            active = null;
        });
        return function (element) {
            if ((active != element) && element.style) {
                if (active) active.style.backgroundColor = '';
                element.style.backgroundColor = bcolor;
                active = element;
            }
        };
    }();
</script>
</head>

<body>
<div onclick="btn(this);">ONE </div>

<div onclick="btn(this);">TWO </div>

</body>
</html>

Hi I have a problem with a form in my site he

http://www.21centuryanswers.com/submit.php

if no field is filled and you click submit, an alert will be shown, yet the next page will still load! How do I fix it?

the code for the form is:

<form action="privacy.php" method="post" onsubmit="return checkform(this);">
<fieldset>
<center>
E-mail: <input type="textfield" name="email" size="60" value="" /><br/></br>
Question: <input type="textfield" name="question" size="70" value="" /><br/><br/>

<input type="submit" value = "Submit"/>
</center>
</fieldset>
</form>

and here is the validation script:

<script language="JavaScript" type="text/javascript">
<!--
function checkform ( form )
{
// ** START **


if (form.email.value == "") {
alert( "Please enter your email." );
form.author.focus();
return false ;
}
if (form.question.value == "") {
alert( "Please enter the question." );
form.title.focus();
return false ;
}
// ** END **
return true ;
}
//-->
</script>

Please help!

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!

Hi, I need your help with a javascript that is incorrectly displaying the time left as 12 hours instead of 24 hours.

The target date is July 7, 2010 at 09:00 AM
Here is the url where the script is installed: http://guaranteedtransformation.com/independence/

and here is the code:
Code:

<script LANGUAGE="JavaScript">
// This following statement must be left intact.
// Copyright (c) Michael Bloch and Taming The Beast.  
// Countdown timer script v1.2 April 20 2009
// Taming the Beast.net - http://www.tamingthebeast.net
// Free Web Marketing and Ecommerce articles and tools
// By using this code you agree to indemnify Taming the Beast
// from from any liability that might arise from its use. 
// The preceding statement be left intact. 


var present;   
var future;    
var tseconds;  
var seconds;   
var minutes;
var hours;
var days;
ID=setTimeout("countdown();", 1000);

function countdown() 
{
present = new Date();
present = present.getTime() + (60000) + (12 * 60 * 60 * 1000);
future = new Date("July 07, 2010 09:00:00");

tseconds = (future - present) / 1000;

days = tseconds /24/60/60;
days = Math.floor(days);
tseconds = tseconds - (days * 24 * 60 * 60);

hours = tseconds /60/60;
hours = Math.floor(hours);
tseconds = tseconds - (hours * 60 * 60);

minutes = tseconds /60;
minutes = Math.floor(minutes);
tseconds = tseconds - (minutes * 60);

seconds = tseconds;
seconds = Math.floor(seconds);

document.getElementById('days').innerHTML = days;
document.getElementById('hours').innerHTML = hours;
document.getElementById('minutes').innerHTML = minutes;
document.getElementById('seconds').innerHTML = seconds;
ID=setTimeout("countdown();", 1000);
}
</script>

And here is the html that displays the time:
Code:

<SPAN id="days">0</SPAN>&nbsp;days,&nbsp;&nbsp;<SPAN id="hours">0</SPAN>&nbsp;hours,&nbsp; 
<SPAN id="minutes">0</SPAN>&nbsp;minutes,&nbsp; 
<SPAN id="seconds">0</SPAN>&nbsp;seconds&nbsp;

Thanks for your help,
Jimmy

Hi all. Can someone please help me make this code accurate so it counts the correct number of characters? when u click on the box, it should display 0. when u type in the box, it should count up by 1. when u click on the box, and u delete a character or characters, it subtracts that many

code:

Code:

<form method="POST">

<table border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td width="100%">
<textarea onkeyDown="count_it(this)" rows="12" name="charcount" cols="60" wrap="virtual"></textarea>
      </td>
    </tr>
    <tr>
      <td width="100%"><div align="right"><p> <input type="text" name="displaycount" size="20"></p>
      </div></td>
    </tr>
  </table>

</form>

<script language="JavaScript">

function count_it(what){
formcontent=what.form.charcount.value
what.form.displaycount.value=formcontent.length
}
</script>

Whenever I update my website, sometimes I notice my browser shows the old version or a modification in the browser after I upload to the ftp.

Whats the best way to prevent this from happening? Preferably without noticing it happening.

Thanks.