...

View Full Version : div sometimes isn't removed (removeChild)



shlagish
10-31-2006, 12:20 AM
Intro
I have been charged with making the website for the outdoors club at my school. Great. One section of it is used to display pictures of events organised by the club. So I wanted to have a page where one could see a lot of pictures at a time, but be able to see them full size too. So what I did is set up a page where very small thumbnails of the pictures would be shown, that way a lot of pictures could fit in a small space. When you click on one of the pictures, it opens up fullscreen. But if I have, say, the picture of a landscape reduced to 75px by 75px, it's too small to know if I want to see it full screen or not. So what I did is create a tool that shows an intermediate size of the picture onmouseover and lets you click to have full size. I also added a functionality that could collapse or expand sections (for example: you can minimize a section of pictures you're not interested in to maximize the number of wanted pictures you seen on your screen). All this is very good, but once this was all done, I decided that it should be available also to users with Internet Explorer. Ah, now that was quite a bit of work. I eventually got everything to work, but a few problems still remain...
The actual problem
Sometimes, I can't figure out when, the div that I create to show a preview of the picture at an intermediate size seems to be removed, but it's actually just place at the very bottom of the page. It then stays there the remaining of the time (although another div is created and appear at the right place, the new previewed image appears in both divs).

Also, sometimes, the image that appears is the one from the previous picture I moused over, not the current one.

Also, when testing offline, when I scroll down and scroll back up, the top left and right background pictures are replaced with another background picture underneath them... and it only changes back to the right thing once I mouse over a navigation link...

Also, when testing offline, when I mouseover a picture, the <h3> elements dissapear.. and reappear when I mouseout of the image.

note: the two last problems appear only when testing offline
note: none of these problems appear on firefox 1.0.7, they only appear in Internet Explorer 6.0 (everything being run on window XP Pro)

The page
I have temporarily uploaded the page on my personal server to show you all, but on there, commercials have been added, so I will also provide the raw code.
http://www.angelfire.com/planet/shawninder/pleinair/photosCross.html


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" >
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="Shawn Inder" />
<title>Club de plein air Le Mistral - Photos</title>
<style type="text/css">
<!--

body { margin: 0; background: url('images/bgu.JPG') repeat-x; min-width: 824px; }
#bgur { background: url('images/bgur.JPG') no-repeat top right; }
#bgl { background: url('images/bgl.JPG') repeat-y; }
#bgr { background: url('images/bgr.JPG') repeat-y right; }

#navbar { background: url('images/bgul.JPG') no-repeat;
padding: 125px 0 0 15px; }
#navigation { padding: 0; margin: 0; }
#navigation li { display: inline; }
#navigation li a { padding: 5px;
background: #4f9441;
color: #000;
font-size: 1.5em;
text-decoration: none;}
#navigation li a:hover, #navigation li a.youarehere {
background: #4fA451;
color: #333;}

#entete { margin: 10px 260px 0 15px;
padding: 0 10px;
height: 113px;}

#main { margin: 0 15px;
color: inherit;
background: #abd37a;
padding: 10px;}
#main img { float: left; margin: 5px; }
h1 { text-align: right;
text-decoration: underline;}
p { text-indent: 4em; }
dt { font-weight: bold; float: left; }

#contact { background: #abd37a;
color: inherit;
position: relative;
top: 5px;
border: solid #000;
border-width: 0 1px 1px;
font-size: .75em;
}
#contact div { border: solid #fff;
border-width: 0 2px 2px 1px;
padding: 5px;
}
#contact h3 { color: #555; background: inherit; }

-->
</style>
<style type="text/css">
<!--

.thumbs img { width: 75px; height: 75px; border: 0; }
.thumbs a { border: 4px solid #abd37a; float: left; margin: 5px; }
.thumbs a:active, .thumbs a:visited { border-color: #bbf3aa #4f9441 #4f9441 #bbf3aa; }
.thumbs a:hover { border-color: #4f9441 #bbf3aa #bbf3aa #4f9441; }
.thumbs h3,h2 { clear: both; text-align: center; }
.thumbs h3 { border-top: 1px dashed #000000; }

#previewer { position: absolute; background: transparent; overflow: hidden; -moz-opacity: .75; filter: alpha(opacity=75); }
#previewer img { width: 250px; }
#previewer p { text-indent: 0; margin: 0; }

.expicon { border: 1px solid #000000;
display: block;
float: left;
height: .9em;
width: .9em;
text-align: center;
margin-right: 5px;
}
.invis { display: none; }

-->
</style>
<script type="text/javascript">
<!--


function thumbsprep(){

var i,j=0;
var divs=document.getElementsByTagName("div");
var thumbs=new Array();
for(i=0;i<divs.length;i++){
if(divs[i].className=="thumbs"){
thumbs[j]=divs[i];
j++;
}
}
sectionprep(thumbs);
previewprep(thumbs);
}

function sectionprep(thumbs) {
for(i=0;i<thumbs.length;i++){
var h3s=thumbs[i].getElementsByTagName("h3");
for(j=0;j<h3s.length;j++){
h3s[j].onclick=function(){
var div=(this.nextSibling.nodeType==1)?this.nextSibling:this.nextSibling.nextSibling;
var isinvis=(div.className=="invis")?1:0;
if(isinvis){
div.className="";
this.childNodes[0].replaceChild(document.createTextNode("-"),this.childNodes[0].childNodes[0]);
} else {
div.className="invis";
this.childNodes[0].replaceChild(document.createTextNode("+"),this.childNodes[0].childNodes[0]);
}
}
h3s[j].onmouseover=function(){
this.childNodes[0].style.color="#f00";
this.childNodes[0].style.borderColor="#f00";
var section=(this.nextSibling.nodeType==1)?this.nextSibling:this.nextSibling.nextSibling;
section.style.backgroundColor="#abc38a";
}
h3s[j].onmouseout=function(){
this.childNodes[0].style.color="#000";
this.childNodes[0].style.borderColor="#000";
var section=(this.nextSibling.nodeType==1)?this.nextSibling:this.nextSibling.nextSibling;
section.style.backgroundColor="#abd37a";
}
h3s[j].style.cursor="pointer";
var span=document.createElement("span");
span.className="expicon";
span.appendChild(document.createTextNode("-"));
h3s[j].insertBefore(span,h3s[j].childNodes[0]);
}
}
}

function previewprep(thumbs){
for(i=0;i<thumbs.length;i++){
var imgs=thumbs[i].getElementsByTagName("img");
for(j=0;j<imgs.length;j++){
imgs[j].onmouseover=function(){
var previewer=document.createElement("div");
previewer.setAttribute("id","previewer");
var newimage=document.createElement("img");
newimage.setAttribute("src",this.getAttribute("src"));
newimage.setAttribute("alt",this.getAttribute("alt"));
var p=document.createElement("p");
p.appendChild(document.createTextNode("Click -> Plein écran"));
previewer.appendChild(p);
previewer.appendChild(newimage);
document.getElementsByTagName("body")[0].appendChild(previewer);
previewer.onmouseout=closePreview;
movePreview();
}
imgs[j].onmousemove=movePreview;
imgs[j].onmouseout=closePreview;
}
}
}

function movePreview(){
var previewWidth=document.getElementById("previewer").offsetWidth;
var previewHeight=document.getElementById("previewer").offsetHeight;
var maxX=document.getElementsByTagName("html")[0].clientWidth+document.getElementsByTagName("html")[0].scrollLeft-previewWidth;
var maxY=document.getElementsByTagName("html")[0].clientHeight+document.getElementsByTagName("html")[0].scrollTop-previewHeight;
var xPos=(mX+40<maxX)?mX+40:maxX;
var yPos=(mY+20<maxY)?mY+20:maxY;
document.getElementById("previewer").style.top=yPos+"px";
document.getElementById("previewer").style.left=xPos+"px";
}

function closePreview(){
var previewPosX=document.getElementById("previewer").style.left;
var nPosX=new Number(previewPosX.substring(0,previewPosX.length-2));
var width=document.getElementById("previewer").offsetWidth;
var previewPosY=document.getElementById("previewer").style.top;
var nPosY=new Number(previewPosY.substring(0,previewPosY.length-2));
var height=document.getElementById("previewer").offsetHeight;
if((mX<nPosX||mX>nPosX+width)||(mY<nPosY||nY>nPosY+height)){
document.getElementsByTagName("body")[0].removeChild(document.getElementById("previewer"));
}
}


var mX,mY;
document.onmousemove=function(evt) {
if(!evt){
mX=event.clientX+document.getElementsByTagName("html")[0].scrollLeft;
mY=event.clientY+document.getElementsByTagName("html")[0].scrollTop;
} else {
mX=evt.pageX;
mY=evt.pageY;
}
}
window.onload=thumbsprep;


-->
</script>
</head>
<body>
<!-- Background workaround -->
<div id="bgl">
<div id="bgr">
<div id="bgur">

<!-- End -->


<div id="navbar">
<ul id="navigation">
<li><a href="index.html">Acceuil</a></li>
<li><a href="calendrier.html">Calendrier</a></li>
<li><a class="youarehere" href="photos.html">Photos</a></li>
<li><a href="membres.html">Membres</a></li>
</ul>
</div>

<div id="entete">

<p>Redécouvrez Le Mistral en photos. Voyez des photos des activités des années précédantes ainsi que celles de cette année.

Clickez sur elles pour les voir en taille réelles.</p>
</div>

<div id="main" class="thumbs">
<h1>Le Mistral en photos</h1>
<h2>Cette année</h2>

<h3>sortie #1</h3>
<div>
<a href="#" title="Clickez pour aggrandir"><img src="frameW5.JPG" alt="miniature" /></a>
<div style="clear: both;">&nbsp;</div><!--bug workaround-->
</div>

<h3>sortie #2</h3>
<div>
<a href="#" title="Clickez pour aggrandir"><img src="bgl.jpg" alt="miniature" /></a>
<a href="#" title="Clickez pour aggrandir"><img src="http://www.bonneadresse.ca/images/canot%20tremblant.jpg" alt="miniature" /></a>
<a href="#" title="Clickez pour aggrandir"><img src="http://www.peps.ulaval.ca/fileadmin/template/main/doc/clublaval/Images/Photos/Accueil/canot-mauricie.jpg" alt="miniature" /></a>
<a href="#" title="Clickez pour aggrandir"><img src="frameW5.JPG" alt="miniature" /></a>
<div style="clear:both;">&nbsp;</div><!--bug workaround-->
</div>

<h2>Années précédantes</h2>

<h3>sortie #1</h3>
<div>
<a href="#" title="Clickez pour aggrandir"><img src="frameW5.JPG" alt="miniature" /></a>
<a href="#" title="Clickez pour aggrandir"><img src="frameW5.JPG" alt="miniature" /></a>
<a href="#" title="Clickez pour aggrandir"><img src="frameW5.JPG" alt="miniature" /></a>
<a href="#" title="Clickez pour aggrandir"><img src="frameW5.JPG" alt="miniature" /></a>
<a href="#" title="Clickez pour aggrandir"><img src="frameW5.JPG" alt="miniature" /></a>
<a href="#" title="Clickez pour aggrandir"><img src="frameW5.JPG" alt="miniature" /></a>
<a href="#" title="Clickez pour aggrandir"><img src="frameW5.JPG" alt="miniature" /></a>
<a href="#" title="Clickez pour aggrandir"><img src="frameW5.JPG" alt="miniature" /></a>
<a href="#" title="Clickez pour aggrandir"><img src="frameW5.JPG" alt="miniature" /></a>
<a href="#" title="Clickez pour aggrandir"><img src="frameW5.JPG" alt="miniature" /></a>
<a href="#" title="Clickez pour aggrandir"><img src="frameW5.JPG" alt="miniature" /></a>
<a href="#" title="Clickez pour aggrandir"><img src="http://siaq.homeftp.org/concours/normal/(19)course-canot.jpg" alt="miniature" /></a>
<a href="#" title="Clickez pour aggrandir"><img src="frameW5.JPG" alt="miniature" /></a>
<a href="#" title="Clickez pour aggrandir"><img src="frameW5.JPG" alt="miniature" /></a>
<a href="#" title="Clickez pour aggrandir"><img src="frameW5.JPG" alt="miniature" /></a>
<a href="#" title="Clickez pour aggrandir"><img src="frameW5.JPG" alt="miniature" /></a>
<a href="#" title="Clickez pour aggrandir"><img src="frameW5.JPG" alt="miniature" /></a>
<div style="clear:both;">&nbsp;</div><!--bug workaround-->
</div>

<h3>sortie #2</h3>
<div>
<a href="#" title="Clickez pour aggrandir"><img src="frameW5.JPG" alt="miniature" /></a>
<a href="#" title="Clickez pour aggrandir"><img src="frameW5.JPG" alt="miniature" /></a>
<div style="clear:both;">&nbsp;</div><!--bug workaround-->
</div>

<div style="clear:both;"></div><!--bug workaround-->
</div>

<div id="contact">
<div>

<h3>Collège de Maisonneuve</h3>
<p>3800, rue Sherbrooke Est,
Montréal H1X 2A2<br />
Téléphone: (514) 254-7131,
Télécopieur: (514) 251-9741,
Courriel: <a href="mailto:communic@cmaisonneuve.qc.ca">communic@cmaisonneuve.qc.ca</a>
</p>

</div>
</div>

<!-- Background workaround -->
</div>
</div>
</div>
<!-- End -->
</body>
</html>


By the way, if you have any other commentary on the website, I'd be glad to know about it. For instance, I have only 2 browsers to test it on, if you have others, I'd appreciate your input, thanks

Shawn

shlagish
11-02-2006, 10:31 PM
Would this belong in another forum maybe? Like in the general web building forum?

Shawn

brandonH
11-02-2006, 11:14 PM
i would reccomend starting over from scratch and rethinking the apporach.

look into using element.style.display="none"; to hide
element.style.display="block"; to show

also look into innerHTML+="content " instead of appendChild and innerHTML=''; for removeChild.

shlagish
11-03-2006, 04:23 PM
i would reccomend starting over from scratch and rethinking the apporach.

look into using element.style.display="none"; to hide
element.style.display="block"; to show

also look into innerHTML+="content " instead of appendChild and innerHTML=''; for removeChild.

And why would you suggest this?
In general, it is better to change the class of an element than change it's style directly, because that way, if, later on, I want it not to dissapear but to become a different color or just be smaller, it will be possible to do so just by changing the css, not the script (it's more logic that way too).

As to the usage of innerHTML, it isn't in the DOM specifications, so I can't know that it will work in all compliant browsers (this is important to me).
The DOM method is with appendChild and removeChild, and these work with IE also, so why not use them?

Thanks a lot for you reply



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum