JavaScript - Simple Basic Question...... Page Loads Slowly...

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.

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!

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!

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.

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.

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?

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

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!

Hi I'm new to javascript and have a simple question I'm sure somebody can help me with. I have a contact page on my website and trying to validate an email address, but can't get it to work.

I want to validate that my fields have been field out and as well, want to validate the email address. Validation of the forms works, however I can't get the email validation working.. What am I doing wrong?

<div style="text-align:right;">
<form id="contact" action="contact.php" method="post" autocomplete="off">
<label><em>Name: </em><input type="text" id="name" name="name" class="input"/></label>
<label><em>Email : </em><input type="text" id="email" name="email" class="input"/></label>
<label><em>Message : </em><textarea name="message" id="message" cols="35" rows="5"></textarea></label>
<label>CC Me: <input type="checkbox" name="cc" value="cc"></label>
<input type="submit" class="button alignright" name="submit" id="submit" value="Send" style="margin:0"/>
</form>
</div>

<script type="text/javascript">
var filter=/^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i ;

$("#contact").submit(function(ev) {
if (!(filter.text($email) | ($("#name").val() == "" | $("#email").val() == "" | $("#message").val() == "") ))
{
$.lightbox().shake();
ev.preventDefault();
}
});
</script>

Hello All

Its my first post on this forum.

I have a database setup with tables that use my form element names as column names.

Now i have successfully retrieved column names and values from the server side to the client side. .

I have the column name stored in

var columnName

How can I get the type of form element type and how can i set the value to it

Thanks for your help



#Javalove. . .unless otherwise stated. . .!

I've started seeing this on a few pages and I'd like to add it to mine. I'd like to add a back to top button where it doesn't just jump right to the top, but acts like the user were actually using the scroll bar.

here are some well done examples:
http://www.javascriptkit.com/jsref/window.shtml
and
http://www.webdesignerheaven.com/

I like the first one better (where it shows an up arrow if you've scrolled far enough), and I found what I think is the javascript responsible (though I'm not sure if it's exact right to take it.) let alone, i'm not sure how i would even implement it yet.

http://www.javascriptkit.com/jkinclu...ltopcontrol.js

i've got a basic example working on my own site, I just don't know how to stop it, (right now it just keeps going and going even if i try to scroll back down.) i'd like to be able to tell if the user reached the top, then stop it, but from what I've looked, i can't find a way to check where exactly they are in my page.

i figure, if i can get mine to stop, I can fancify it later with the image that shows if you've moved down and what not,

right now I'd like to just stop it when it reaches the top.