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
    Regular Coder hinch's Avatar
    Join Date
    Sep 2005
    Location
    UK
    Posts
    923
    Thanks
    25
    Thanked 80 Times in 80 Posts

    on href mouse over change div contents

    Well I thought it would be fairly straight forward

    Basically I have a simple menu and when someone mouses over it I want it to change the contents of a <div> below is the code I thought would work however it appears not to work. Have I made a newbie mistake?

    Code:
    <div id="subheader2">
          <p>
    		<ul class="menu red">
    		   <li class="current"><a href="index.php" onmouseover="document.getElementById('headerdescription').innerText ='Home Sweet Home';">HOME</a></li>
    		   <li><a href="index.php?page=about" onmouseover="document.getElementById('headerdescription').innerText ='Find out more about me and what I can do for you';">ABOUT ME</a></li>
    		   <li><a href="index.php?page=ethos" onmouseover="document.getElementById('headerdescription').innerText ='What Drives me and what I want to achieve with my work';">ETHOS</a></li>
    		   <li><a href="index.php?page=portfolio" onmouseover="document.getElementById('headerdescription').innerText ='See some of my previous work, including descriptions, pictures and who I've worked for';">PORTFOLIO</a></li>
    		   <li><a href="index.php?page=clients" onmouseover="document.getElementById('headerdescription').innerText ='A complete list of everyone I've ever worked for including links to their sites';">CLIENTS</a></li>
    		   <li><a href="index.php?page=contact" onmouseover="document.getElementById('headerdescription').innerText ='So you like what you see? Why not drop me a line.';">CONTACT ME</a></li>
    		</ul>
          </p>
        </div>
    	<div id="subheader3">
          <p>
    		<div id="headerdescription">asddsa</div>
          </p>
        </div>
    Last edited by hinch; 09-02-2008 at 08:35 PM.
    A programmer is just a tool which converts caffeine into code

    My work: http://www.fcsoftware.co.uk && http://www.firstcontactcrm.com
    My hobby: http://www.angel-computers.co.uk
    My life: http://www.furious-angels.com

  • #2
    Banned
    Join Date
    May 2005
    Location
    Midwest, U.S.
    Posts
    118
    Thanks
    1
    Thanked 26 Times in 23 Posts
    -----
    Last edited by Cranford; 09-02-2008 at 08:44 PM.

  • Users who have thanked Cranford for this post:

    hinch (09-02-2008)

  • #3
    Regular Coder
    Join Date
    Jul 2007
    Location
    United Kingdom
    Posts
    159
    Thanks
    2
    Thanked 15 Times in 15 Posts
    Code:
    <div id="subheader2">
    	<p>
    		<ul class="menu red">
    			<li class="current"><a href="index.php" onmouseover="document.getElementById('headerdescription').innerText ='Home Sweet Home';">HOME</a></li>
    			<li><a href="index.php?page=about" onmouseover="document.getElementById('headerdescription').innerText = 'Find out more about me and what I can do for you';">ABOUT ME</a></li>
    			<li><a href="index.php?page=ethos" onmouseover="document.getElementById('headerdescription').innerText = 'What Drives me and what I want to achieve with my work';">ETHOS</a></li>
    			<li><a href="index.php?page=portfolio" onmouseover="document.getElementById('headerdescription').innerText = 'See some of my previous work, including descriptions, pictures and who I\'ve worked for';">PORTFOLIO</a></li>
    			<li><a href="index.php?page=clients" onmouseover="document.getElementById('headerdescription').innerText = 'A complete list of everyone I\'ve ever worked for including links to their sites';">CLIENTS</a></li>
    			<li><a href="index.php?page=contact" onmouseover="document.getElementById('headerdescription').innerText = 'So you like what you see? Why not drop me a line.';">CONTACT ME</a></li>
    		</ul>
    	</p>
    </div>
    <div id="subheader3">
    	<p>
    		<div id="headerdescription">asddsa</div>
    	</p>
    </div>

    Pretty simple really. You just needed to escape the apostrophes in your description. So:

    The text 'Hello I'm Jordan' would be terminated after "I" because of the apostrophe, the browser cannot tell the difference between the apostrophe and the quote mark at the end of the text so assumes that you wanted to finish the text at the first quote mark.

    To escape it you would place a slash before the apostrophe so: 'Hello I\'m Jordan'. The browser now knows that the ' in "I'm" is an apostrophe and the ' at the end of Jordan is where you want to terminate the text.


    Hopefully that's well explained for you!



    The above explanation uses full quotation marks around the description (" ") instead of (' ') so the apostrophes don't need escaping...


    Jordan
    Remember The Thank You Button Is Your Friend =]

    [ PHP / Javascript / VisualBasic / HTML / DHTML / CSS / .NET / MySQL ]

  • Users who have thanked JordanW for this post:

    hinch (09-02-2008)

  • #4
    Regular Coder hinch's Avatar
    Join Date
    Sep 2005
    Location
    UK
    Posts
    923
    Thanks
    25
    Thanked 80 Times in 80 Posts
    ok so ignoring the fact I've forgot to escape the one instance of the ' and ignoring the fact I've not used camelcase for my class names (and not really considered good practice as there's about a dozen different ways of syntaxing it good article on slashdot few weeks ago about it)

    that seems like an awful lot of js just for something I thought was quite simple.

    would something like this work?

    Code:
    onmouseover="document.getElementById('headerdescription').innerHTML = 'See some of my previous work, including descriptions, pictures and who I\'ve worked for';"
    A programmer is just a tool which converts caffeine into code

    My work: http://www.fcsoftware.co.uk && http://www.firstcontactcrm.com
    My hobby: http://www.angel-computers.co.uk
    My life: http://www.furious-angels.com


  •  

    Posting Permissions

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