Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Senior Coder
    Join Date
    Apr 2003
    Location
    Canada
    Posts
    1,063
    Thanks
    2
    Thanked 0 Times in 0 Posts

    div sometimes isn't removed (removeChild)

    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/shaw...otosCross.html
    Code:
    <!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
    Shawn

  • #2
    Senior Coder
    Join Date
    Apr 2003
    Location
    Canada
    Posts
    1,063
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Wrong forum?

    Would this belong in another forum maybe? Like in the general web building forum?

    Shawn
    Shawn

  • #3
    Regular Coder
    Join Date
    Oct 2003
    Location
    on a ship
    Posts
    574
    Thanks
    1
    Thanked 6 Times in 5 Posts
    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.
    I make no attempt at pretending like I'm a professional. I offer help with what knowledge I do have.

  • #4
    Senior Coder
    Join Date
    Apr 2003
    Location
    Canada
    Posts
    1,063
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by brandonH View Post
    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
    Shawn


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •