JQuery fadeout, show no fadeout and divs not showing

Jenny Dithe · 04-13-2011, 04:43 PM

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.

bullant · 04-14-2011, 11:48 AM

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>

harbingerOTV · 04-14-2011, 03:42 PM

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>

Jenny Dithe · 04-14-2011, 07:29 PM

Thanks. Your suggestion of javascript reminded me I didn't have to be using JQuery so I reverted to my simpler javascript code.

bullant · 04-15-2011, 12:19 AM

no problem