Page scrolls to the top after a href is clicked upon which a div is set visible

A

ambergarg22

New Member
Messages
19
Reaction score
0
Points
0
I have hyperlinks on my page shown as "View Comments" on the site.Upon clicking on the 2nd hyperlink (which is a bit lower so u have to scroll down), a div box on the right side is set to visible (which is what i want). Now as soon the box is set to visible , you will observe that it the web page scrolls back to the top (which i dont want). This happens in both IE and mozilla.Below is the code and link to the webpage.Plz help :frown: , thanks

http://www.ambergarg.x10.mx/home2.html
Code: 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/URL]">
<html xmlns="[URL]http://www.w3.org/1999/xhtml[/URL]">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title>Untitled Document</title>
  <script type="text/javascript" src="jquery-lib/jquery.js"></script>
  <script type="text/javascript">
   function click_comment(lname)
   {
    document.getElementById(lname).style.visibility = "visible";
   } 
   function click_close(lname)
   {
    document.getElementById(lname).style.visibility = "hidden";
   }  
  
   function strt()
   {
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
     xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.open("GET","blog.xml",false);
    xmlhttp.send();
    xmlDoc=xmlhttp.responseXML; 
    var x=xmlDoc.getElementsByTagName("post");
 
 var outer_top = 53;
 var title_top = 26;
 var pic_top = 67;
 var txt_top = 63;
 var more_top = 205;
 var box_outer_top = 67;
 var box_inner_top = 32;
 var top_close = 209;
 for(i=0;i<2;i++)
 {
   dt=x[i].getElementsByTagName("date")[0].childNodes[0].nodeValue;
   tm=x[i].getElementsByTagName("time")[0].childNodes[0].nodeValue;
   tit=x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue;
   pic=x[i].getElementsByTagName("pic")[0].childNodes[0].nodeValue;
   txt=x[i].getElementsByTagName("text")[0].childNodes[0].nodeValue;
   more=x[i].getElementsByTagName("more")[0].childNodes[0].nodeValue;
   comm=x[i].getElementsByTagName("comments")[0].childNodes[0].nodeValue;
   
   var div_outer=document.createElement("div");
   div_outer.style.border = "1px solid";
   div_outer.style.width = "662px";
   div_outer.style.height = "237px";
   div_outer.style.position = "absolute";
   div_outer.style.left = "122px";
   div_outer.style.top = outer_top + "px"; 
   div_outer.innerHTML = " ";
   document.body.appendChild(div_outer);
   
   var div_head=document.createElement("div");
   div_head.style.fontWeight= "bold";
   div_head.style.fontStyle= "italic";
   div_head.style.fontSize= "20px";
   div_head.style.position = "absolute";
   div_head.style.width = "662px";
   div_head.style.height = "21px";
   div_head.style.backgroundColor = "#999999";
   div_head.align = "right";
   div_head.innerHTML="Posted on "+dt+" at "+tm;
   div_outer.appendChild(div_head);
   
   var div_title=document.createElement("div");
   div_title.style.fontWeight= "bold";
   div_title.style.textDecoration="underline";
   div_title.style.fontSize= "22px";
   div_title.style.position = "absolute";
   div_title.style.top = title_top + "px";
   div_title.style.left = "2px";
   div_title.style.width = "662px";
   div_title.style.height = "30px";
   div_title.style.color = "#FF0000";
   div_title.align = "center";
   div_title.innerHTML = tit;
   div_outer.appendChild(div_title);
   
   var div_pic=document.createElement("div");
   div_pic.style.border = "1px solid";
   div_pic.style.position = "absolute";
   div_pic.style.top = pic_top + "px";
   div_pic.style.left = "547px";
   div_pic.style.width = "108px";
   div_pic.style.height = "133px";
   div_pic.innerHTML = "<img src='"+pic+"' width='108px' height='133px' />"; 
   div_outer.appendChild(div_pic);
   
   var div_txt=document.createElement("div");
   div_txt.style.fontFamily="MS Serif";
   div_txt.style.fontSize= "18px";
   div_txt.style.position = "absolute";
   div_txt.style.top = txt_top + "px";
   div_txt.style.left = "4px";
   div_txt.style.width = "537px";
   div_txt.style.height = "135px";
   div_txt.style.color = "#000000";
   div_txt.innerHTML = txt;
   div_outer.appendChild(div_txt);
   
   var div_more=document.createElement("div");
   div_more.style.fontWeight= "bold";
   div_more.style.fontStyle= "italic";
   div_more.style.position = "absolute";
   div_more.style.top = more_top + "px";
   div_more.style.left = "418px";
   div_more.style.width = "97px";
   div_more.style.height = "25px";
   div_more.innerHTML = "<a href='"+more+"'>...Read More</a>";
   div_outer.appendChild(div_more);
   
   //Add comments box to the right
   var div_box_outer=document.createElement("div");
   div_box_outer.id = "bid"+i;
   div_box_outer.className = "box";
   div_box_outer.style.position = "absolute";
   div_box_outer.style.top = box_outer_top + "px";
   div_box_outer.style.left = "809px";
   div_box_outer.style.width = "278px";
   div_box_outer.style.height = "242px";
   div_box_outer.style.visibility = "hidden";
   document.body.appendChild(div_box_outer);
   
   var div_box_inner=document.createElement("div");
   div_box_inner.style.overflow = "scroll";
   div_box_inner.style.border = "2px solid black";
   div_box_inner.style.position = "absolute";
   div_box_inner.style.top = box_inner_top + "px";
   div_box_inner.style.left = "1px";
   div_box_inner.style.width = "268px";
   div_box_inner.style.height = "166px";
   div_box_inner.innerHTML = "hello testing how r u testig hello hello testing how r u testig hello hello testing how r u testig hello hello testing how r u testig hello hello testing how r u testig hello hello testing how r u testig hello  hello testing how r u testig hello hello testing how r u testig hello hello testing how r u testig hello hello testing how r u testig hello hello testing how r u testig hello hello testing how r u testig hello hello testing how r u testig hello  hello testing how r u testig hello ";
   
   div_box_outer.appendChild(div_box_inner);
   
   var div_box_comm=document.createElement("div");
   div_box_comm.style.position = "absolute";
   div_box_comm.style.textDecoration = "underline";
   div_box_comm.style.fontWeight = "bold";
   div_box_comm.style.fontStyle = "italic";
   div_box_comm.align = "center";
   div_box_comm.style.width = "274px";
   div_box_comm.style.height = "25px";
   div_box_comm.innerHTML = "Comments";
   div_box_outer.appendChild(div_box_comm);
   
   var div_box_close=document.createElement("div");
   div_box_close.style.position = "absolute";
   div_box_close.align = "center";
   div_box_close.style.left = "81px"; 
   div_box_close.style.top = top_close + "px";
   div_box_close.style.width = "113px";
   div_box_close.style.height = "25px";
   div_box_close.innerHTML = "<a href='#' onclick='click_close(\""+div_box_outer.id+"\");'>Close</a>";
   div_box_outer.appendChild(div_box_close);
   
   var div_comm=document.createElement("div");
   div_comm.style.fontWeight= "bold";
   div_comm.style.fontStyle= "italic";
   div_comm.style.position = "absolute";
   div_comm.style.top = more_top + "px";
   div_comm.style.left = "523px";
   div_comm.style.width = "135px";
   div_comm.style.height = "25px";
   div_comm.innerHTML = "<a href='#' onclick='click_comment(\""+div_box_outer.id+"\");'>View Comments</a>";
   div_outer.appendChild(div_comm);
   
   outer_top += 400;
   box_outer_top += 400;
 }
   }
  </script> 
  <style type="text/css">
   <!--
   body {
 background-image: url(background.jpg);
 
   }
   -->
  </style>
 </head>
 
 <body onload="strt()">
  
 </body>
</html>
 
M

misson

Community Paragon
Community Support
Messages
2,572
Reaction score
72
Points
48
When posting code samples, please keep them concise. Most of what you posted isn't necessary for this question.

What happens is that the default event handler for clicking on a link is invoked, which opens the URL with a fragment (in particular, an empty fragment "#") appended, which causes the jump. The best solution, since the element isn't really a link, is to change the element from an <a> to something more appropriate. Leave the click handler as-is. That way, there's no default action to prevent.

Should you ever want prevent the default handler, you could use the Event.preventDefault method on DOM compliant browsers, set the event's returnValue to false on IE, or (for inline event subscription, as you're using) return false.

HTML: 
<script type="text/javascript">
    function foo() {
        return false;
    }
</script>
<a href="#" onclick="return foo()">Foo</a> it to me.

JS libraries (such as jQuery, Prototype, MooTools or Dojo) provide a unified interface for canceling events and stopping default actions.
 
Last edited:
A

ambergarg22

New Member
Messages
19
Reaction score
0
Points
0
Thanks for your reply. I actually found out another way.
Instead of giving <a href='#' onclick.......> , i gave <a href='javascript:void(0)' onclick.....>

So this gives a hand icon on the link as well as the page doesnt jump back :)

Thanks again for your reply
 
M

misson

Community Paragon
Community Support
Messages
2,572
Reaction score
72
Points
48
Using an <a> has a particular meaning. It implies that the element is a link to somewhere. If it's not actually a link, you shouldn't use <a>. On the other hand, if you want the page to work when JS is disabled, it makes sense to use a link, in which case the href attribute should be set to something that will load comments.

Code: 
<div id="foo0">
  ...
  <a href="?show_comments=foo0" onclick="return show_comments(this.parent.id)">View Comments(2)</a>
</div>

If you want the cursor to be a hand when over "View Comments" when it isn't in an <a>, you can use an attribute selector and the cursor property:
Code: 
[onclick] {
    cursor: pointer;
}
To support IE6-, use a class selector, making sure you add the class to the element. For IE5.5-, set the cursor property to "hand".
HTML: 
<!--[if lt IE 6]>
<style type="text/css">
.clickable {
    cursor: hand;
}
</style>
<![endif]-->
 
You must log in or register to reply here.
Top