JavaScript - Bring Div Element To Front On Click

The bit of code in bold in the code below is giving me this error in IE:

Error:
Code:

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; Trident/4.0; Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1) ; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.5.30729; Tablet PC 2.0; InfoPath.2; OfficeLiveConnector.1.4; .NET CLR 3.0.30729; OfficeLivePatch.1.3; MSN OptimizedIE8;ENGB)
Timestamp: Tue, 16 Mar 2010 15:07:11 UTC

Message: HTML Parsing Error: Unable to modify the parent container element before the child element is closed (KB927917)
Line: 0
Char: 0
Code: 0
URI: http://www.mateinastate.co.uk/users/mateinastate

Code:
Code:

if(document.getElementById('msn1').innerHTML=="")
{
	 document.getElementById('msn1').style.display='none';
}
if(document.getElementById('yahoo1').innerHTML=="")
{
	 document.getElementById('yahoo1').style.display='none';
}
if(document.getElementById('skype1').innerHTML=="")
{
	 document.getElementById('skype1').style.display='none';
}
if(document.getElementById('facebook1').innerHTML.toLowerCase().substr(0,18)=='<a href="http://">')
{
	 document.getElementById('facebook1').style.display='none';
}
else if(document.getElementById('facebook1').innerHTML.toLowerCase().substr(0,11)=='<a href="">')
{
	 document.getElementById('facebook1').style.display='none';
} else
{
	 document.getElementById('fbook-add').innerHTML='Facebook Profile';
}

What it's saying isn't actually true (I don't think)... this is how the section is laid out:

Code:

<div id="submenu1" class="anylinkcss">
<ul>
<li class="contact-pm"><a href="/index.php?do=pm&act=new&to=$RateViewProfileUserName$&returnurl=$ReturnURL$">PM me</a></li>
<li class="contact-email"><a href="/index.php?do=email&id=$RateViewProfileUserId$">E-mail me</a></li>
<li class="contact-msn" id="msn1">$RateViewProfileUser-profile_msn$</li>
<li class="contact-yahoo" id="yahoo1">$RateViewProfileUser-profile_yahoo$</li>
<li class="contact-skype" id="skype1">$RateViewProfileUser-profile_skype$</li>
<li class="contact-facebook" id="facebook1"><a href="$RateViewProfileUser-profile_facebook$"><span id="fbook-add"></span></a></li>
</ul>
</div>

<script type="text/javascript" src="/html_1/js/contact-information.js"></script>

Does anyone know why this might error in just IE?

I would like to have a popup in front at all times, for instruction purpose, even when user doing something in back page, such as type something, select and change to new page, etc.

This popup can only be closed by either click at "Close" button or "X" at top right corner.

Hi, I'm relativly new to JS and brand new to the forum so you might need to dumb down your replys for my slightly lacking knowledge. That being said I do have a very solid grasp of html, css and am getting there with JS and its various frameworks.

I'm integrating wordpress into an existing site for a friend and currently have the main blog page appear in a DIV. This is the best way to integrate in this case due to many reasons mostly of way the site is constructed.
Code:

<div class="scroll-pane" id="scrollbox">
	WORDPRESS BLOG		     
</div>

My issue is that links within that DIV, in the blog, when clicked redirect the page. The simple answer to this would be to have them just open in a new page, which I can easily do with the below code.

Code:

function Init()
{
  // Grab the appropriate div
  theDiv = document.getElementById('scrollbox');
  // Grab all of the links inside the div
  links = theDiv.getElementsByTagName('a');
  // Loop through those links and attach the target attribute
  for (var i=0, len=links.length; i < len; i++) {
    // the _blank will make the link open in new window
    links[i].setAttribute('target', '_blank');
  }
}
window.onload = Init;

But what I'd rather it do is have any link clicked inside the DIV to reload in that same DIV, similar to an iframe, but obviously without using an iframe, due to it's compatibility issues.

Is this possible by editing the above code? If not what do I need?

Thanks in advance for any help!

I am using the below code to create a blogging site but the pagination in one tab apprears in the other tab.
How do I individually create a pagination for each tab?


<?php
// Begin session, initiate database connection, etc.
require_once('./includes/base.php');

// If logging out, delete session variables
if($_GET['logout'] == 1){
@$_SESSION = array();
@session_unregister($_SESSION['userID']);
@session_unregister($_SESSION['userName']);
@session_unregister($_SESSION['userUser']);
@session_unregister($_SESSION['userPass']);
@session_destroy();
}
// Display header
require("./templates/$template/header.php");

?>

<div id="blurb" align="right">

<script language="javascript">
function isClear()
{
document.myForm[0].value='';
return true;

}
</script>
<!-- new search -->
<?php
ob_start();
if(!empty($_SESSION['userID']) and !empty($_POST['user'])){
echo '<form action="search.php" method="post" name="myForm">
<input type="text" value="search here" id="search" size="20" name="search" onFocus="return isClear();"/>
<input type="submit" name="serachuser" value="search"/></form>';
}
?>
</div>
<br>
<div id="blurb" align="justify">
<em>Hello world</em> <?php echo "$sitename"; ?> is blah blah blah....
</div>
<br>

<div id="container-5">
<ul>
<li><a href="#fragment-13"><span>Blogs</span></a></li>
<li><a href="#fragment-14"><span>Links</span></a></li>
<li><a href="#fragment-15"><span>Images</span></a></li>

</ul>
<div id="fragment-13">
<?php



$sql = mysql_query("SELECT users.userUser, posts.postID, posts.postPost, posts.postTime, posts.postComments, userAvatar FROM users, posts WHERE users.userID = posts.postUserID ORDER BY posts.postTime DESC ");
while($row = mysql_fetch_array($sql)){
$abcd= $row['userName'];
$abcd = str_replace (" ", "-", $abcd);
$time = reltime($row['postTime']);

echo '
<div class="virtualpage">
<table width="100%" >
<td width="10%" ><a href="'.$site_url.'/'.$row['userUser'].'"><img src="'.$site_url.'/avatars/'.$row['userAvatar'].'" width="48px" height="48px" /><td width="90% "bgcolor="#F8F8F8" border=1" cellspacing="1" cellpadding="1" ><b>'.$row['postPost'].'</b><br>Posted by:&nbsp;'.$row['userUser'].',&nbsp;<a href="'.$site_url.'/blogs/'.$row['userUser'].'/'.$row['postID'].'">Comments</a>&nbsp;'.$row['postComments'].' ,&nbsp;Time elapsed:&nbsp; '.$time.'</a></td>
</table><br>

</div>';}
?>

<?
echo '<div id="gallerypaginate" class="paginationstyle">
<a href="#" rel="previous">Prev</a> <span class="flatview"></span> <a href="#" rel="next">Next</a>
</div>' ;

?>


</div>


<div id="fragment-14">
<?php
$sql = mysql_query("SELECT users.userUser, links.linksID, links.linksLink, links.linksPost, links.linksTime, links.linksComments,userAvatar FROM users, links WHERE users.userID = links.linksUserID ORDER BY links.linksTime DESC");
while($row = mysql_fetch_array($sql)){
$abcd= $row['userName'];
$abcd = str_replace (" ", "-", $abcd);
$time1 = reltime($row['linksTime']);

echo '
<div class="virtualpage">
<table width="100%" >
<td width="10%" ><a href="'.$site_url.'/'.$row['userUser'].'"><img src="'.$site_url.'/avatars/'.$row['userAvatar'].'" width="48px" height="48px" /><td width="90% "bgcolor="#F8F8F8" border=1" cellspacing="1" cellpadding="1" ><b>'.$row['linksPost'].'</b><br>Posted by:&nbsp;'.$row['userUser'].',&nbsp;<a href="'.$site_url.'/blogs/'.$row['userUser'].'/'.$row['linksID'].'">Comments</a>&nbsp;'.$row['linksComments'].' ,&nbsp;Time elapsed:&nbsp; '.$time1.'</a></td>
</table><br>

</div>';}

?>


<?
echo '<div id="gallerypaginate" class="paginationstyle">
<a href="#" rel="previous">Prev</a> <span class="flatview"></span> <a href="#" rel="next">Next</a>
</div>' ;

?>

</div>
<div id="fragment-15">
<?php
// test
grabimages('SELECT users.userUser, images.imagesID, images.imagesFile, images.imagesPost, images.imagesTime, images.imagesComments FROM users, images WHERE users.userID = images.imagesUserID ORDER BY images.imagesTime DESC LIMIT 20');

?>

</div>
</div>


<?php

// Display footer
require("./templates/$template/footer.php");
?>

<table align="center"><tr><td align="center">
<script type="text/javascript" defer="defer">
var gallery=new virtualpaginate("virtualpage",10)
gallery.buildpagination("gallerypaginate")
</script>
</td></tr></table>

Thank you .......

Hi,

I am somewhat new to HTML, AJAX, and CSS.

I'm wish to implement something similar to what Tumblr does on their front page where you click on the bottom footer bar, and the page horizontally shifts up keeping part of the original page (specifically, the email sign up) visible while exposing more content.

I know the simplest is to have the entire content on the page and just "hide" and "show" the interested components "on click" of the bottom footer bar div-tag.

But I like the sliding animation.

Does YUI or JQuery provide the ability to do the animation? Or is this even a Javascript related functionality - ie should I look at HTML5 or CSS?

Thanks
Jack

Ok know those people who are in the bad habit of double clicking everything? Well my site breaks if they double click it...

is there a script I can use that won't let my functions run more then once every so many seconds? to avoid double clicking errors?

Hey guys just need a little help.

I need to create a little script that clicks a link automatically and opens it up in a new page.

So far I have this:

Code:

<head>
<script>
function autoClick(){
document.getElementById('linkToClick').click();
}
</head>
<body onload="setTimeout('autoClick();',3000);">
<a id="linkToClick" href="http://www.google.com" rel="nofollow" target="_blank">GOOGLE</a>
</body>

It works but the problem is that IE popup blocker keeps blocking the new window.

Is there a way to do the same thing with javascript without it having blocked by IE popup blocker?

need to make "left click" act as "middle click"

--------------------------------------------------------------------------------

I need to make "left click" act as "middle click" for a web site
....thank you in advance for any and all help...
[CODE]
<script language="javascript">
function Click(4) {
if (event.button==0; 1; )
}
document.onmousedown
</script>>

Hi

I have created the following effects on the images seen here http://techavid.com/design/test3.html . You see when you hover and then click on each image, they go from grey to color. When you click on one - the others go grey and the one clicked remains color. That's cool, but now I need the text 1st: Sun for example to display and hide along with its graphic button. The word "Sun," is a link that needs to link out to a URL so it has to be separated from the image effect code.

Here code I have now....

Code:

<style type="text/css" media="screen">

#wrapper {
 background: url('_assets/images/sun-inactive.p') no-repeat #777eee;
  width: 470px;
  margin: 0 auto;
}

a#sun{
  background: url('_assets/images/sun-inactive.png') no-repeat;
  width: 107px;
  height: 78px;
  display:block;
  padding: 20px 10px;
  float: left;
  
}

a#sun:hover,
a#sun.active {
  background: url('_assets/images/sun.png') no-repeat;
  width: 107px;
  height: 78px;
  display:block;
  padding: 20px 10px;
}

a#plane {
  background: url('_assets/images/plane-inactive.png') no-repeat;
  width: 107px;
  height: 78px;
  display:block;
  padding: 20px 10px;
  float: left;
}

a#plane:hover,
a#plane.active {
  background: url('_assets/images/plane.png') no-repeat;
  width: 107px;
  height: 78px;
  display:block;
  padding: 20px 10px;
}

a#nano {
  background: url('_assets/images/nano-inactive.png') no-repeat;
  width: 107px;
  height: 78px;
  display:block;
  padding: 20px 10px;
  float: left;
}

a#nano:hover,
a#nano.active {
  background: url('_assets/images/nano.png') no-repeat;
  width: 107px;
  height: 78px;
  display:block;
  padding: 20px 10px;
}

#popuptext {
float: left;
margin: -30px 0 0 0;
padding: 0 0 0 0px;
font-size: 11px;
}

#popuptext a {
color: #ff6600;
padding: 0 30px; 
}




</style>


</head>
<body>

<div id="wrapper">
<div id="navigation">
  <a id="sun" href="#"></a>
  <a id="plane" href="#"></a>
  <a id="nano" href="#"></a>
</div>

<div style="clear:both"></div>
  <div id="popuptext">1st: <a href="#">Sun</a>
2nd: <a href="#">Airplane</a>
3rd: <a href="#">Nano</a> 

</div>

</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {

  // target each link in the navigation div
  $('#navigation a').click(function() {
    // link that you clicked
    clicked = $(this).attr('id');

    // make sure that all the others are not active
    // except for the clicked one
    $('#navigation a').each(function() {
      if ($(this).attr('id') == clicked) {
        $(this).addClass('active');
      } else {
        $(this).removeClass('active');
      }
    });

    // prevent the default link action
    return false;
  });

});
</script>

What jquery or javascript code do I need to do this?

thanks,
chaser

Hi,

(new to javascript)

Code:

digAudio = document.createElement("audio");	
	digAudio.setAttribute('src',hypeDocument.documentName()+'_Resources/'+'digging.m4a');
	digAudio.id = "diggingAudio";
	newAudio = document.getElementById("diggingAudio"); //returns null

the audio element is added (I can play the audio) but I can't get it by its id ?

thank you

I have the following code

Code:

<div class="thdnrml">
<td><a href="somelink">fonfof</a></td>
</div>

what i want to do is this:
Code:

<div class="thdnrml">
<td><a href="somelink">fonfof</a><a href="anotherlink">another_link</a></td>
</div>

how can i go about achieving this?

How can I use onclick with the <div> tag?

Hello,

I am creating a website and want to put in a "Feedjit" paid for map.

Code:

<script type="text/javascript" src="http://feedjit.com/map/?wid=f362a5317ac1d91f&amp;pid=e71759d0ce545166&amp;bc=FFFFFF&amp;tc=494949&amp;brd1=336699&amp;lnk=494949&amp;hc=336699&amp;dot=FF0000&amp;wh=Recent%20Visitors&amp;hl=1&amp;wh=Recent%20Visitors&amp;hl=0"></script>

.

How do I stop it being clicked through - ie, I do not want when people click on the map for it to be clickable - the website is "here" and the "widget" is entitled "Map Test" - I have tried contacting the company but no response yet.

Thank you.

Philip.

How would you specify when user right clicks?

I'm trying to add an input element to all forms using appendChild.

The script first searches for input elements with the name of "myinput".

If it finds an input element with that name, it assigns the value "myvalue".

If it can't find an input element with that name, it tries to create a new one for all forms.

Code:

if (document.getElementsByName('myinput')) {
var testcode = document.getElementsByName('myinput');
for (var i=0; i < testcode.length; i++){
testcode[i].value = "myvalue";}
}

else {
var z = document.createElement("input");
z.type = "hidden";
z.name = "myinput";
z.value = "myvalue";
z.id = "mycode";
var d = document.getElementsByTagName('form');
for (var i=0; i < d.length; i++){
d.appendChild(z);}
}

What's wrong with my code?

Thanks!