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 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Script to modify contents of DIV (formatting errors)

    Hello,

    I am currently working on my school's website. The site is laid out with a DIV on the left set up as a menu (called "leftmenu") and a DIV to the right to display the content (called "maincontent"). Clicking a link in leftmenu calls a script which changes the content of "maincontent".

    The script currently works as it should except for one small error. The appropriate heading, text and image load for each link, but the formatting between the image and the paragraph is lost. When the page originally loads, the image is set to "float:left" and the paragraph wraps around it to the right. However, when the script runs and changes the contents, the paragraph no longer wraps around the image, but is written below it.

    Javascript function:
    Code:
    var nov12="News for November 12";
    var nov11="News for November 11";
    var nov10="News for November 10";
    
    function writeNews(title,image,txt) 
    {
    document.getElementById("newsTitle").innerHTML=title;
    document.getElementById("newsImage").src=image;
    document.getElementById("newsText").innerHTML=txt;
    }
    HTML for the links calling the function and maincontent:
    Code:
    <div class="leftmenu">
    		 			<h3>News</h3>
    		<ul class="leftmenu">
    			<li class="leftmenu"><a class="leftmenu" href="javascript:writeNews('November 12','img1.jpg',nov12)">Nov 12</a></li>
    			<li class="leftmenu"><a class="leftmenu" href="javascript:writeNews('November 11','img2.jpg',nov11)">Nov 11</a></li>
    			<li class="leftmenu"><a class="leftmenu" href="javascript:writeNews('November 10','img3.jpg',nov10)">Nov 10</a></li>
    		</ul>			
    		</div>
    
      <div class="maincontent">
      		 <h3 id="newsTitle">School News</h3>
    			 <img id="newsImage" class="newsimagestyle" src="img1.jpg" />
      		 <p id="newsText"><img id="newsImage" class="newsimagestyle" src="" />Select the date from the menu on the left for news posted on that day.</p>
      </div>
    I have also attached the "before.jpg" and "after.jpg" screen captures from the relevant section of the website so you can see what changes are happening to the formatting.

    BEFORE:
    Script to modify contents of DIV (formatting errors)-before.jpg

    AFTER:
    Script to modify contents of DIV (formatting errors)-after.jpg

    Any help to keep the formatting in the same would be greatly appreciated. Thanks.

    Phil

  • #2
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    878
    Thanks
    0
    Thanked 114 Times in 113 Posts
    you have 2 tags id'ed "newsImage"
    One outside the paragraph and on inside the paragraph.
    You can't have two element with with the same id. remove one of the or give one of them another id.

    And In the end the secomd of these elements is overwritten by the call:
    Code:
    document.getElementById("newsText").innerHTML=txt;
    When using innerHTML, all content of the element is replaced, including any tags.
    Yoy might expect that the content after the call is:
    Code:
    <p id="newsText"><img id="newsImage" class="newsimagestyle" src="" />News for November 12</p>
    but as all is replaced it is actually just:
    Code:
    <p id="newsText">News for November 12</p>
    But we might need a working oage in order to help you furhter

  • #3
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for pointing out my error. I had tried putting the img tag inside and outside the p tag to get things to work, but with the img tag outside of the p tag, the results are the same as described above. I forgot to remove it from inside the p tag.

    I don't have anywhere to post the page at the moment, so I'll just upload the .html file as a zip if anyone wants to load the page. It doesn't link to anything outside of the .html file, so it's self-contained.

    html file all zipped up:
    philrivoire-news-jstest.zip

  • #4
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    878
    Thanks
    0
    Thanked 114 Times in 113 Posts
    Do you also have the graphics needed.?
    I might be able it iimtate your pictures but it is way better with the original images!

  • #5
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I haven't actually made any of the images. Right now, everything is just a placeholder. All I did was make a jpg image about 150px x 200px. The way I see it, the images shouldn't matter, just the place they hold.

  • #6
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    878
    Thanks
    0
    Thanked 114 Times in 113 Posts
    Hmmm! you havent floated your <p>

    And when it is updated it somehow "forgets" that it should line up with the image.

    To solve this you should add float:left to your <p> too.
    But this does that the text starts lower than it does now.
    This can then be solved by using a <div> here instead.
    so:
    Code:
    <div id="newsText" class="newsimagestyle">Select the date from the menu on the left for news posted on that day.</div>

  • #7
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Switching the <p> tag to a <div> tag seems to have worked. Still don't understand why, but this should do what I want it to do. Thanks for your help.

    Phil

  • #8
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well, the width of the newstext block was all messed up. If it was really long (i.e. many lines) it wrapped properly, but if it was short, the width decreased to the point where a very short line would not wrap at all.

    It turns out, by setting the width of the parent div to 100%, the problem was solved. How about that.


  •  

    Posting Permissions

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