on pageload the bottom panel should hide

0
votes

I have this jQuery for panel show/hide at bottom of the page. But the panel is popping up on page load. I need the panel to be hidden on page load & I need to show that when I toggle.

here is my JS:

(function($) {

jQuery(document).ready(function() {

Panel.init();

$(document).on('click', '.tab-controller', function() {
 Panel.togglePanel();
});

});

var Panel = {

isVisible : true,
showMessage : null,
hideMessage : null,
animationDuration : 650,
animationEasing : 'linear',

init : function() {

},

hidePanel : function() {
$('.panel-wrapper').animate({
bottom : -(Panel.getAnimationOffset())
}, Panel.animationDuration, Panel.animationEasing, function() {
Panel.isVisible = false;
Panel.updateTabMessage();
});
},

showPanel : function() {
$('.panel-wrapper').animate({
bottom : 0
}, Panel.animationDuration, Panel.animationEasing, function() {
Panel.isVisible = true;
Panel.updateTabMessage();
});
},

togglePanel : function() {
((this.isVisible) ? this.hidePanel : this.showPanel)();
},

updateTabMessage : function() {
if (this.isVisible) {
$('.tab-controller .close').show();
$('.tab-controller .show').hide();
} else {
$('.tab-controller .close').hide();
$('.tab-controller .show').show();
}
},

getAnimationOffset : function() {
return $('.panel-content').height();
}

}

})(jQuery);

I tried with isVisible=false it didn't worked. so I called hidePanel in init function its working fine now, but the problem is the panel is hiding with animation on page load now. I don't want to show the panel at all on page load

Here is my CSS:

.panel-wrapper * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.panel-wrapper {
position: fixed;
left: 0;
bottom: 0;
overflow: hidden;
width: 100%;
font-family: sans-serif;
}
.panel-controller {
position: relative;
overflow: hidden;
width: 100%;
}
.tab-controller {
float: right;
margin-right: 50px;
padding: 10px 10px 5px;
background-color: #8C293B;
-webkit-border-radius: 15px 15px 0 0;
-moz-border-radius: 15px 15px 0 0;
border-radius: 15px 15px 0 0;
}
.tab-controller * {
display: block;
font-family: sans-serif;
font-size: 16px;
font-weight: bold;
color: white;
cursor: pointer;
}
.tab-controller .show {
display: none;
}
.panel-content {
overflow: hidden;
width: 100%;
background-color: #8C293B;
}

Here is my HTML:

<div class="panel-wrapper">

<div class="panel-controller">
<div class="tab-controller"> <span class="close">CLOSE PANEL</span> <span class="show">OPEN PANEL</span> </div>
</div>

<div class="panel-content"> 

Panel content goes here

</div>
</div>
2
javascriptjqueryhtmlcss

2 Answers

0
votes

You could set your isVisible field to false by default, but if you want to keep it like this, you should call your hidePanel in your init

0
votes

There may be more, but you have errors in your hidePanel() function:

hidePanel : function() {
    $('.panel-wrapper').animate({
        bottom : -( Panel.get('<a href="http://www.jqueryscript.net/animation/">Animation</a>').Offset()) //errorline
    }, Panel.animationDuration, Panel.animationEasing, function() {
        Panel.isVisible = false;
        Panel.up('<a href="http://www.jqueryscript.net/time-clock/">date</a>').TabMessage(); //errorline
    });
},

Note these lines in the question code:

bottom : -(Panel.get<a href="http://www.jqueryscript.net/animation/">Animation</a>Offset())

compare with:

bottom : -( Panel.get('<a href="http://www.jqueryscript.net/animation/">Animation</a>').Offset()) //errorline

This line also appears unnecessary (unmatched):

})(jQuery);

This line also looks suspicious (what is TabMessage?) 

Panel.up('<a href="http://www.jqueryscript.net/time-clock/">date</a>').TabMessage();