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

    Hide div onload, show onclick?

    Hi all,

    I apologise for asking this question, have searched for and found several thread solving this question however I can never get the solutions given to work, I have no idea what I'm doing wrong.. could it possibly have something to do with using prototype/scriptaculous at the same time??

    current classes that effect this problem in css file:
    Code:
    .hidden{
    	display:none;	
    }
    
    .shown{
    }
    Code:
    <div id="splashtext">
    <a href="#none" onclick="$('bodytext').fade();$('portfolio').appear({delay: 0.8});$('contact').fade();$('about').fade(); return false;">portfolio</a>
    </div>
    
    <div id="portfolio" class="hidden">
    portfolio text
    </div>
    when portfolio is clicked, I need the portfolio div to change to
    <div id="portfolio" class="shown"> ..... is this possible?
    Last edited by 111buddy11; 03-16-2009 at 09:19 AM.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    Code:
    <div id="portfolio" class="hidden">
    portfolio text
    </div>
    when portfolio is clicked, I need the portfolio div to change to
    <div id="portfolio" class="hidden">
    Sorry, your intention is not clear.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    apologies, have edited original post.

    should have in fact been
    when portfolio is clicked, I need the portfolio div to change to
    <div id="portfolio" class="shown">

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,733
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    I don't know if this is what you want - toggle visibility.

    Code:
    <a href="#" onclick = "toggle()">Show or hide the portfolio</a>
    <div id="portfolio" class = "hidden" style="display:none">
    Portfolio text - but don't display me yet
    </div>
    
    <script type = "text/javascript">
    
    function toggle(){
    var divn1 = document.getElementById("portfolio");
    if (divn1.style.display == "none") {
    divn1.style.display = "block";
    }
    else {
    divn1.style.display = "none";
    }
    }
    
    </script>

    I heard him then, for I had just
    Completed my design
    To keep the Menai Bridge from rust
    By boiling it in wine.
    - Lewis Carroll

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    Code:
    <script type="text/javascript">
    window.onload=function(){
    var elm= document.getElementById('portfolio');
    elm.className='shown';
    }
    </script>
    You might need to adjust the above in such way a that it won't interfere with other onload even handlers, if any.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #6
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Philip M, when I tried your solution, it simply showed "show or hide the portfolio"... when it was clicked that text disappeared.... "Portfolio text - but don't display me yet" never showed up


    abduraooft
    , so i place
    Code:
    <script type="text/javascript">
    window.onload=function(){
    var elm= document.getElementById('portfolio');
    elm.className='shown';
    }
    </script>
    in the head? what do i add to the onlick part of the link?




    not sure wether this will help but this is the page where the about, portfolio and contact divs are hidden.. I need them to be shown when the appropriate link is clicked on the right



    .... and here is the mess i am trying to fix by initially having those divs hidden
    Last edited by 111buddy11; 03-16-2009 at 10:46 AM.

  • #7
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,733
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Quote Originally Posted by 111buddy11 View Post
    Philip M, when I tried your solution, it simply showed "show or hide the portfolio"... when it was clicked that text disappeared.... "Portfolio text - but don't display me yet" never showed up
    [I]
    Well, it works just fine for me.

    Is it that the class = "hidden" is affecting it?
    Last edited by Philip M; 03-16-2009 at 12:17 PM.

  • #8
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    sorry yes my apologies, it does work.. However I can only get it working on a page by itself

    How do I add the toggle() to the portfolio tag along with what is already there?

    I have tried this but it doesnt seem to work?
    Code:
    <a href="#" onclick="$('bodytext').fade();$('portfolio').appear({delay: 0.8});$('contact').fade();$('about').fade(); return false;toggle()">portfolio</a><br />

  • #9
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    You need to add it before return false;
    Code:
    <a href="#" onclick="$('bodytext').fade();$('portfolio').appear({delay: 0.8});$('contact').fade();$('about').fade(); toggle(); return false;">portfolio</a><br />
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #10
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm not sure why this is happening, as this works fine on its own:
    Code:
    <a href="#" onclick = "toggle()">Show or hide the portfolio</a>
    <div id="portfolio" class = "hidden" style="display:none">
    Portfolio text - but don't display me yet
    </div>
    
    <script type = "text/javascript">
    
    function toggle(){
    var divn1 = document.getElementById("portfolio");
    if (divn1.style.display == "none") {
    divn1.style.display = "block";
    }
    else {
    divn1.style.display = "none";
    }
    }
    
    </script>
    however when I try to add it into the content already shown, the text "Show or hide the portfolio" is the only thing that disappears when it is clicked?

    shown here ("Show or hide the portfolio" is located at the top of the text thats shown on page load)
    Last edited by 111buddy11; 03-18-2009 at 10:01 PM.


  •  

    Posting Permissions

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