JavaScript - Code Works On Reload, But Not On Initial Load.

Hey everyone,

I currently have a grid of thumnails which when clicked will load an image at the top of the page without reloading the page using the following JS:

Code:

<a href="JavaScript:;" onClick="JavaScript:document.all.Main.src='images/image01.png';"><img src='images/image01thumb.png'></a>

This works wonderfully, However, what I need to do now is to produce the same thing but instead of loading an image, load an html file into the page without reloading. Is there a way I could use a similarly simple solution?

Thanks

I used DrDOS's solution from http://www.codingforums.com/showpost...17&postcount=8

and modyfied it a bit so I have 2 images, first without and 2nd with a link to other page.

It works just fine in FF but in Chrome and in IE it shows just 2nd image. On place where first image shall be it's just blank white space. I have javascript enabled in all browsers, btw.

Here's a code in head:
Code:

<script type="text/javascript">

function loadImg()

	{

	document.getElementById("loadimg").innerHTML="<img src=\"logo2.png\"";

	}
	
	
	function loadImg2()

	{

	document.getElementById("loadimg2").innerHTML="<a href=\"http://site.com\"><img src=\"logo2.png\"</a>";

	}

</script>

And here's body part:
Code:

<div class="bottleft">

<div id="loadimg"></div>

<script type="text/javascript">var myimg = setTimeout("loadImg();",5000);</script>

  </div>
  
  <div class="bottright">
	
	<div id="loadimg2"></div>

<script type="text/javascript">var myimg = setTimeout("loadImg2();",5000);</script>

  </div>

I'm trying to figure out this whole day but just can't see where I am making a mistake?

Ok guys if you look at this page www.runningprofiles.com/members/shout/view.php my code works great....

But when i add it to the rest of the script the code wont work shows he
http://www.runningprofiles.com/membe...ll_Script.php#


Below is view.php (the one that works)
and the one added to the code scirpt is the one the does not.


PHP Code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
$(function() 
{
$(".view_comments").click(function() 
{
var ID = $(this).attr("id");

$.ajax({
type: "POST",
url: "viewajax.php",
data: "msg_id="+ ID, 
cache: false,
success: function(html){
$("#view_comments"+ID).prepend(html);
$("#view"+ID).remove();
$("#two_comments"+ID).remove();
}
});
return false;
});
});
</script>





<ol>
<?php

//Here $id is main message msg_id value.
$csql=mysql_query("select * from comments where msg_id_fk='130' order by com_id ");
$comment_count=mysql_num_rows($csql);
if($comment_count>2)
{
$second_count=$comment_count-2;
?>


<div class="comment_ui" id="view130">
<a href="#" class="view_comments" id="130">View all <?php echo $comment_count; ?> comments</a>
</div>


<?php 
} 
else 
{
$second_count=0;
}
?>




<div id="view_comments130"></div>
<div id="two_comments130">




<table width="30%">
<?php
$small=mysql_query("select * from comments where msg_id_fk='130' order by com_id limit $second_count,2 ");
while($rowsmall=mysql_fetch_array($small))
{ 
$c_id=$rowsmall['com_id'];
$comment=$rowsmall['comment'];
?>


<div class="comment_actual_text">



<tr>
    <td style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-BOTTOM: black 1px solid" valign="top">
                   


 <table style="WIDTH: 100%; BORDER-COLLAPSE: collapse" align="left">
                     <tr>

                 <td width="5%" style="VERTICAL-ALIGN: middle; TEXT-ALIGN: center"><img style="WIDTH: 30px; HEIGHT: 30px" alt="srinivas" src="http://www.gravatar.com/avatar.php?gravatar_id=7a9e87053519e0e7a21bb69d1deb6dfe" border="1" /></td>
                 <td style="VERTICAL-ALIGN: top; TEXT-ALIGN: left">
                   <strong>Jarratt</strong> <?php echo $comment; ?>
                   <br /><span style="COLOR: #a9a9a9">10 min ago - ID = <?php echo $c_id;?> </span></td>
            
</tr> 
</table><br />
      </td>
  </tr>








</div>
<?php } ?>
</table>
</div>
</ol>

Facebook_Wall_Script.php

PHP 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>9lessons Applicatio Demo</title>
<link href="frame.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript" src="jquery.oembed.js"></script>
 
 <script type="text/javascript">
<script type="text/javascript">
$(function() 
{
$(".view_comments").click(function() 
{
var ID = $(this).attr("id");

$.ajax({
type: "POST",
url: "../viewajax.php",
data: "msg_id="+ ID, 
cache: false,
success: function(html){
$("#view_comments"+ID).prepend(html);
$("#view"+ID).remove();
$("#two_comments"+ID).remove();
}
});
return false;
});
});



$(function() {

$(".comment_button").click(function() {

var element = $(this);
   
    var boxval = $("#content").val();
    
    var dataString = 'content='+ boxval;
    
    if(boxval=='')
    {
    alert("Please Enter Some Text");
    
    }
    else
    {
    $("#flash").show();
    $("#flash").fadeIn(400).html('<img src="ajax.gif" align="absmiddle">&nbsp;<span class="loading">Loading Update...</span>');
$.ajax({
        type: "POST",
  url: "update_ajax.php",
   data: dataString,
  cache: false,
  success: function(html){
 
  $("ol#update").prepend(html);
  $("ol#update li:first").slideDown("slow");
  
   document.getElementById('content').value='';
   $('#content').value='';
   $('#content').focus();
  $("#flash").hide();
  
    
    $("#expand_url").oembed(boxval);
    
  }
 });
}
return false;
    });


/ Delete Wall Update

$('.delete_update').live("click",function() 
{
var ID = $(this).attr("id");
var dataString = 'msg_id='+ ID;
var parent=$("#bar"+ID);
    jConfirm('Are you sure you want to delete this message?', 'Confirmation Dialog', 
                
                    function(r) {
                    
                    
                    if(r==true)
                    {
$.ajax({
        type: "POST",
  url: "delete_update.php",
   data: dataString,
  cache: false,
  success: function(html){
 
 
    parent.slideUp(300,function() { parent.remove(); });
  }
 });

}
});
return false;
});//comment slide
$('.comment').live("click",function() 
{

var ID = $(this).attr("id");
$(".fullbox"+ID).show();
$("#c"+ID).slideToggle(300);

return false;
});


//commment Submint

$('.comment_submit').live("click",function() 
{

var ID = $(this).attr("id");

var comment_content = $("#textarea"+ID).val();
    
    var dataString = 'comment_content='+ comment_content + '&msg_id=' + ID;
    
    if(comment_content=='')
    {
    alert("Please Enter Comment Text");
    
    }
    else
    {
    
   
       $.ajax({
        type: "POST",
  url: "comment_ajax.php",
   data: dataString,
  cache: false,
  success: function(html){
  
 
  $("#commentload"+ID).append(html);
    document.getElementById("textarea"+ID).value='';
   
   $("#textarea"+ID).focus();
  
  }
 });
    
    
    }

return false;
});

// Delete Wall Update

$('.delete_update').live("click",function() 
{
var ID = $(this).attr("id");
var dataString = 'msg_id='+ ID;
var parent=$("#bar"+ID);
    jConfirm('Are you sure you want to delete this message?', 'Confirmation Dialog', 
                
                    function(r) {
                    
                    
                    if(r==true)
                    {
$.ajax({
        type: "POST",
  url: "delete_comment.php",
   data: dataString,
  cache: false,
  success: function(html){
 
 $("#comment"+ID).slideUp();
    
  }
 });
}
return false;
});




return false;

});


</script>


<style type="text/css">
body
{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
.update_box
{
background-color:#D3E7F5; border-bottom:#ffffff solid 1px; padding-top:3px
}
a
    {
    text-decoration:none;
    color:#d02b55;
    }
    a:hover
    {
    text-decoration:underline;
    color:#d02b55;
    }
    *{margin:0;padding:0;}
    
    
    ol.timeline
    {list-style:none;font-size:1.2em;}ol.timeline li{ display:none;position:relative; }ol.timeline li:first-child{border-top:1px dashed #006699;}
    .delete_button
    {
    float:right; margin-right:10px; width:20px; height:20px
    }
    
    .cdelete_button
    {
    float:right; margin-right:10px; width:20px; height:20px
    }
    
    .feed_link
    {
    font-style:inherit; font-family:Georgia; font-size:13px;padding:10px; float:left; width:350px
    }
    .comment
    {
    color:#0000CC; text-decoration:underline
    }
    .delete_update
    {
    font-weight:bold;
    
    }
    .cdelete_update
    {
    font-weight:bold;
    
    }
    .post_box
    {
    height:55px;border-bottom:1px dashed #006699;background-color:#F3F3F3;  width:499px;padding:.7em 0 .6em 0;line-height:1.1em;
    
    }
    #fullbox
    {
    margin-top:6px;margin-bottom:6px; display:none;
    }
    .comment_box
    {
        display:none;margin-left:90px; padding:10px; background-color:#d3e7f5; width:300px;  height:50px;
    
    }
    .comment_load
    {
      margin-left:90px; padding:10px; background-color:#d3e7f5; width:300px; height:30px; font-size:12px; border-bottom:solid 1px #FFFFFF;
    
    }
    .text_area
    {
    width:290px;
    font-size:12px;
    height:30px;
    }
    #expand_box
    {
    margin-left:90px;
    margin-top:5px;
    margin-bottom:5px;
    }
    embed
    {
        width:200px;
        height:150px;

    }
    
</style>
</head>

<body>
<?php include '../../../settings.php'; ?>

<div align="center">
<table cellpadding="0" cellspacing="0" width="500px">
<tr>
<td>


<div align="left">
<form  method="post" name="form" action="">
<table cellpadding="0" cellspacing="0" width="500px">

<tr><td align="left"><div align="left">
<h3>What are you doing?</h3></div></td></tr>
<tr>
<td style="padding:4px; padding-left:10px;" class="update_box">
<textarea cols="30" rows="2" style="width:480px;font-size:14px; font-weight:bold" name="content" id="content" maxlength="145" ></textarea><br />
<input type="submit"  value="Update"  id="v" name="submit" class="comment_button"/>
</td>

</tr>

</table>
</form>

</div>
<div style="height:7px"></div>
<div id="flash" align="left"  ></div>



<ol  id="update" class="timeline">
</ol>

<div id='old_updates'>
<?php
$small=mysql_query("select * from messages2 order by msg_id desc LIMIT 5");
while($r=mysql_fetch_array($small))
{ 
$id=$r['msg_id'];
$msg=$r['message'];

?>


<div align="left" class="post_box">
<span style="padding:10px"><?php echo $msg.'....'.$id; ?> </span>
</div>


<ol>
<?php
//Here $id is main message msg_id value.
$csql=mysql_query("select * from comments where msg_id_fk='$id' order by com_id ");
$array = mysql_fetch_assoc($csql);

$comment_count=mysql_num_rows($csql);
if($comment_count>2)
{
$second_count=$comment_count-2;
?>


<div class="comment_ui" id="view<?php echo $id; ?>">
<a href="#" class="view_comments" id="<?php echo $id; ?>">View all <?php echo $comment_count; ?> comments</a>
</div>
<?php 
}


?>


<div id="view_comments<?php echo $id; ?>"></div>
<div id="two_comments<?php echo $id; ?>">




<table width="50%">


<?php
$small2=mysql_query("select * from comments where msg_id_fk='$id' order by com_id limit 2 ");
while($rowsmall22=mysql_fetch_array($small2))
{ 
$c_id=$rowsmall22['com_id'];
$comments=$rowsmall22['comment'];
?>


<div class="comment_actual_text">



<tr>
    <td style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-BOTTOM: black 1px solid" valign="top">
                   


 <table style="WIDTH: 100%; BORDER-COLLAPSE: collapse" align="left">
                     <tr>

                 <td width="5%" style="VERTICAL-ALIGN: middle; TEXT-ALIGN: center"><img style="WIDTH: 30px; HEIGHT: 30px" alt="srinivas" src="http://www.gravatar.com/avatar.php?gravatar_id=7a9e87053519e0e7a21bb69d1deb6dfe" border="1" /></td>
                 <td style="VERTICAL-ALIGN: top; TEXT-ALIGN: left">
                   <strong>Jarratt</strong> <?php echo $comments; ?>
                   <br /><span style="COLOR: #a9a9a9">10 min ago - ID = <?php echo $c_id.'...'.$id;?> </span></td>
        
</tr> 
</table><br />
    </td>
  </tr>








</div>
<?php } ?>
</table>
</div>
</ol>
<?php } ?>








</div>


</td>
</tr>
</table>






</div>
</body>
</html>

hello,
iam kind of new at javascript, but iam trying my best to be better and better.
so i have 3 divs (my_block, my_image, my_description) as you see in my code below

Code:

<div class = "my_block">
     <div class = "my_image">
          <img src="images/pic.jpg" width="600" height="600">
     </div>

     <div class = "my_description">
          <a> Description goes here.... ! </a>
     </div>
</div>

just i want to display the "my description" div only after the 100% image loading completion which exist in "my_image" div.

so how can i get this done with Javascript please ??
thanks a lot

I have a browser game that's coded with javascript. It's a basic question and answer game. A question is asked and if they type the right answer it brings them to a new page with a new question and continues on.

Right now it's coded in a way that each question is a separate HTML page. I'm trying to find a way to get it so it's all on one page. Due to the nature of my code the best way I can think of is to have the content of those HTML pages load and replace a certain section of HTML code that's already on the page. Does this make any sense and if so is there such a solution?