Get started with your cookies today!

 
Add Reply
New Topic
New Poll

 Floating Sidebar, simple floating sidebar toggle
merc
 Posted: Jul 27 2016, 10:01 PM
Quote

merc

merc is Offline



TITLE: Floating Sidebar
SKIN SELECTION: Mini Sidebar Toggle
ICON FONT: No
NOTES: The toggle is an image but you can change the height/width in the css. CODE FROM DYNAMIC DRIVE (made simple via mercdoescookies).
CSS
CODE
#merc_toggle {
float: left;
top: 100px;
left: 80px;
width: 200px;
overflow: hidden;
position: fixed;
z-index: 1;
}
#merc_toggle .merc_toggle {
padding: 20px;
background-color: #B84250;
text-align: center;
}
#merc_toggle .merc_toggle img {
width: 15px;
height: auto;
}
#merc_toggle .merc_sidebar {
background-color: #fbfbfb;
}

ABOVE HEAD TAG
CODE
<!-------
PLACE THIS ABOVE YOUR </HEAD> TAG
------->


<script type="text/javascript" src="http://mercdoescookies.b1.jcink.com/uploads/mercdoescookies/mercdoescookies_animatedcollapse.js">

/***********************************************
* Animated Collapsible DIV v2.4- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Please keep this notice intact
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>


<script type="text/javascript">

animatedcollapse.addDiv('merccookie', 'fade=0,speed=400,persist=1,hide=1')

animatedcollapse.ontoggle=function($, divobj, state){ //fires each time a DIV is expanded/contracted
//$: Access to jQuery
//divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID
//state: "block" or "none", depending on state
}

animatedcollapse.init()

</script>

<!--- ENDED ABOVE </HEAD> TAG --->

BELOW BODY TAG
CODE
<!-------
PLACE THIS JUST BELOW THE <BODY> TAG
------->

<div id="merc_toggle"><div class="merc_toggle">

<a href="#" rel="toggle[merccookie]" data-openimage="http://mercdoescookies.b1.jcink.com/uploads/mercdoescookies/collapse.png" data-closedimage="http://mercdoescookies.b1.jcink.com/uploads/mercdoescookies/expand.png"><img src="http://mercdoescookies.b1.jcink.com/uploads/mercdoescookies/collapse.png" border="0" /></a> </div>



<div class="merc_sidebar"><div id="merccookie" style="padding: 20px;">

SIDEBAR CONTENT

</div></div>
</div>

<!-------
END OF TOGGLE
------->
PMEmail
^
merc
 Posted: Jul 27 2016, 10:01 PM
Quote

merc

merc is Offline



Thank you for your submission. (:
PMEmail
^
0 User(s) are reading this topic (0 Guests and 0 Anonymous Users)
0 Members:

Topic Options
Add Reply
New Topic
New Poll


 


 


Cookie Menus