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 5 of 5
  1. #1
    Regular Coder
    Join Date
    Sep 2010
    Posts
    460
    Thanks
    214
    Thanked 1 Time in 1 Post

    JQuery fadeout, show no fadeout and divs not showing

    I have a div which is comprised of two smaller divs. When a button is clicked I want the divs to fade out one after another, but then the div to remain in place in case the function to display them is called again.

    I had the fadeout work perfectly, but then if the function was recalled nothing would happen.

    So I added show commands. This cancelled the fadeout so if you click the button both divs just disappear immediately now and if the function is called again only the first div#MessageTotal displays what it is meant to - I can see no signs of the second div#NewMessageList.

    My code is.
    Code:
    	$('#ShowMyMessages').live('click',function(){
    		$('div#NewMessageList').fadeOut('slow');
    		$('div#MessageTotal').delay(1500).fadeOut('slow');
    		$('div#MessageNew').delay(2000).show();
    		$('div#MessageTotal').delay(2500).show();
    		$('div#NewMessageList').delay(3000).show();
    	});
    My place holders are:
    Code:
    <div class="MessageNew" id="MessageNew"><div class="NewMessageList" id="NewMessageList"></div><div class="MessageTotal" id="MessageTotal"></div></div>
    My call function is:
    Code:
    <img src="side/Envelope.jpg" width="40px" onclick="loadMyNewMessages(\'getTotalMessages.php\',\'MessageTotal\',\'getNewMessagesList.php\',\'NewMessageList\')" />';
    And message total has the button ShowMyMessages.

  • #2
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    If you don't have to use jquery, maybe use this demo as a guide.

    When you click the "Hide messages", button the messages fade out sequentially.

    When you click the "Show messages" button the messages reappear.

    You can add as many message divs as you like without having to touch the javascript.
    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">
        <head>
            <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
            <title></title>
            <style type="text/css">
                #messageHolder div {
                    opacity: 1;
                    filter:alpha(opacity=100)
                }
            </style>
            <script type="text/javascript">
                var fadeIncr = 0.6;
                var speed = 100;
                var curOpac = 10;
                var timer;
                var curMsg = 0;
                function hideMessages(){
                    timer = setInterval(setOpacity,speed);
                }
                function setOpacity() {
                    curOpac = curOpac - fadeIncr;
                    if(curOpac > 0){
                        setOpacityCSS();
                    } else {
                        clearInterval(timer);
                        curOpac = 10;
                        if(++curMsg < oMsgDivs.length){ //hide next message
                            hideMessages();
                        } else { //last message has been hidden
                            curMsg = 0;
                        }
                    }
                }
                function setOpacityCSS(){
                    if(typeof(oMsgDivs[curMsg].style.opacity) == 'string'){
                        oMsgDivs[curMsg].style.opacity = curOpac/10;
                    } else {
                        oMsgDivs[curMsg].style.filter = 'alpha(opacity=' + curOpac*10 + ')';
                    }
                }
                function showMessages(){
                    curMsg = 0;
                    curOpac = 10;
                    oBtnHideMsgs.disabled = false;
                    if(timer){clearInterval(timer);}
                    for(i=0; i < oMsgDivs.length; i++){
                        if(typeof(oMsgDivs[i].style.opacity) == 'string'){
                            oMsgDivs[i].style.opacity = 1;
                        } else {
                            oMsgDivs[i].style.filter = 'alpha(opacity=' + 100 + ')';
                        }
                    }
                }
                window.onload=function(){
                    oBtnHideMsgs = document.getElementById('btnHideMsgs');
                    oBtnHideMsgs.onclick=function(){
                        this.disabled = true;
                        hideMessages();
                    }
                    document.getElementById('btnShowMsgs').onclick=showMessages;
                    oMsgDivs = document.getElementById('messageHolder').getElementsByTagName('div');
                }
            </script>
        </head>
        <body>
            <div id="messageHolder">
                <div>Message 1</div>
                <div>Message 2</div>
                <div>Message 3</div>
                <div>Message 4</div>
            </div>
            <div>
                <button id="btnHideMsgs">Hide messages</button>
                <button id="btnShowMsgs">Show messages</button>
            </div>
        </body>
    </html>

  • Users who have thanked bullant for this post:

    Jenny Dithe (04-14-2011)

  • #3
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,788
    Thanks
    8
    Thanked 131 Times in 129 Posts
    I might be missing something in your explanation but is this sort of what you mean:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd"> 
    <html>
    <title>Chat</title>
    <head>
    <link rel="stylesheet" type="text/css" href="eightysixdegreesstyle.css" />
    
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function (){
    	$('.show').live('click', function(){
    		$('#box1').fadeIn('slow', function(){
    			$('#box2').fadeIn();
    		});
    	});
    	$('.hide').live('click', function(){
    		$('#box2').fadeOut('slow', function(){
    			$('#box1').fadeOut();
    		});
    	});
    
    });
    </script>
    
    
    <style type="text/css"> 
    body {
    padding: 0;
    margin: 0;
    }
    
    #links {
    background: #eee;
    border-bottom: 1px solid #222;
    padding: 10px;
    }
    
    #holder {
    background: #ede;
    margin: 20px;
    }
    
    #box1, #box2 {
    background: #eee;
    padding: 10px;
    border: 1px solid #222;
    margin: 10px;
    display: none;
    }
    
    </style>
    
    
    </head>
    <body>
    
    <div id="links">
    	<a href="#x" onclick="return false;" class="show">show</a> | <a href="#x" onclick="return false;" class="hide">hide</a>
    </div>
    
    <div id="holder">
    	<div id="box1">Box 1 content</div>
        <div id="box2">Box 2 content</div>
    </div>
    </body>
    </html>
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • Users who have thanked harbingerOTV for this post:

    Jenny Dithe (04-14-2011)

  • #4
    Regular Coder
    Join Date
    Sep 2010
    Posts
    460
    Thanks
    214
    Thanked 1 Time in 1 Post
    Thanks. Your suggestion of javascript reminded me I didn't have to be using JQuery so I reverted to my simpler javascript code.

  • #5
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    no problem


  •  

    Posting Permissions

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