Hi, I have the following problem.
I have a page that adds iFrames dynamically using jQuery.
Inside of the content of some iFrames there are hyperlinks like:
<a href="#" onclick="hideTestDiv();">
the function hideTestDiv does:
...
document.getElementById('test').style.display = 'none';
..
in IEs browsers, this causes the main page to scroll right to top and the first element of the main page disappears.
I dont know how to fix this because i can't modify the content of the iFrames.
I really appreciate any help.
The next is a example to reproduce the bug.
The main page:
<!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>Dynamic tabs with jQuery - why and how to create them | JankoAtWarpSpeed Demos</title>
<style type="text/css">
body { font-family:Lucida Sans, Lucida Sans Unicode, Arial, Sans-Serif; font-size:13px; margin:0px auto;}
#tabs { margin:0; padding:0; list-style:none; overflow:hidden; }
#tabs li { float:left; display:block; padding:5px; background-color:#bbb; margin-right:5px;}
#tabs li a { color:#fff; text-decoration:none; }
#tabs li.current { background-color:#e1e1e1;}
#tabs li.current a { color:#000; text-decoration:none; }
#tabs li a.remove { color:#f00; margin-left:10px;}
#content { width:100%; height:100%; background-color:#e1e1e1;}
#main { width:900px; height:100%; margin:0px auto; overflow:hidden;background-color:#F6F6F6; margin-top:0px;
-moz-border-radius:10px; -webkit-border-radius:10px; padding:0px;}
#wrapper, #doclist { float:left; margin:0 20px 0 0;}
#doclist { width:70px; border-right:solid 1px #dcdcdc;}
#doclist ul { margin:0; list-style:none;}
#doclist li { margin:10px 0; padding:0;}
#documents { margin:0; padding:0;}
#wrapper { width:100%; height:500px; margin-top:0px;}
#header{ background-color:#F6F6F6; width:900px; margin:0px auto; margin-top:0px;
-moz-border-radius:10px; -webkit-border-radius:10px; padding:30px; position:relative;}
#header h2 {font-size:16px; font-weight:normal; margin:0px; padding:0px;}
</style>
<script type="text/javascript" src="Dynamic%20tabs%20with%20jQuery%20_archivos/jquery-1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#documents a").click(function() {
addTab($(this));
});
$('#tabs a.tab').live('click', function() {
// Get the tab name
var contentname = $(this).attr("id") + "_content";
// hide all other tabs
$("#content iframe").hide();
$("#tabs li").removeClass("current");
// show current tab
$("#" + contentname).show();
$(this).parent().addClass("current");
});
$('#tabs a.remove').live('click', function() {
// Get the tab name
var tabid = $(this).parent().find(".tab").attr("id");
// remove tab and related content
var contentname = tabid + "_content";
$("#" + contentname).remove();
$(this).parent().remove();
// if there is no current tab and if there are still tabs left, show the first one
if ($("#tabs li.current").length == 0 && $("#tabs li").length > 0) {
// find the first tab
var firsttab = $("#tabs li:first-child");
firsttab.addClass("current");
// get its link name and show related content
var firsttabid = $(firsttab).find("a.tab").attr("id");
$("#" + firsttabid + "_content").show();
}
});
});
function addTab(link) {
// If tab already exist in the list, return
if ($("#" + $(link).attr("rel")).length != 0)
return;
// hide other tabs
$("#tabs li").removeClass("current");
$("#content iframe").hide();
// add new tab and related content
$("#tabs").append("<li class='current'><a class='tab' id='" +
$(link).attr("rel") + "' href='#'>" + $(link).html() +
"</a><a href='#' class='remove'>x</a></li>");
$("#content").append("<iframe width='100%' height='100%' frameborder='0' id='" + $(link).attr("rel") + "_content' src='"+
$(link).attr("title") + "'/>");
// set the newly added tab as current
$("#" + $(link).attr("rel") + "_content").show();
}
</script>
</head><body bgcolor="#F8F7F6">
<div id="main">
<div id="dummy">
should not dissapear
</div >
<div id="doclist">
<ul id="documents">
<li><a href="#" rel="Servicio1" title="tab_content.html">service 1</a></li>
<li><a href="#" rel="Servicio2" title="http://developer.yahoo.com/yui/">service 2</a></li>
<li><a href="#" rel="Servicio3" title="http://www.facebook.com/">service 3</a></li>
<li><a href="#" rel="Servicio4" title="http://www.save-ass.com/code/2010/01/28/pestanas-dinamicas-con-jquery/">service 4</a></li>
</ul>
</div>
<div id="wrapper">
<ul id="tabs">
<!-- Tabs go here -->
</ul>
<div id="content">
<!-- Tab content goes here -->
</div>
</div>
</div>
</body></html>
the iframe with url=# (tab_content.html)
<html>
<head>
<title>JavaScript Popup Example 3</title>
<script type="text/javascript" src="Dynamic%20tabs%20with%20jQuery%20_archivos/jquery-1.js"></script>
<script language="JavaScript" type="text/javascript">
function hideTestDiv() {
document.getElementById('test').style.display = 'none';
}
function showTestDiv() {
document.getElementById('test').style.display = 'block';
}
</script>
</head>
<body >
<a href="#" onclick="hideTestDiv();"> hide test div </a>
<br>
<a href="#" onclick="showTestDiv();"> show test div </a>
<br>
<div id="test"> some content to hide or show</div>
</body>
</html>