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
^
mrsque
 Posted: Apr 18 2018, 10:41 AM
Quote

mrsque

jen is Offline



@merc, i am having an issue with this code.

i added it to a skin i am working on, but the toggle doesn't actually work. the sidebar remains open and clicking the toggle image does nothing. instead, it brings me back to the top of the page.

am i supposed to change this link to something? or does it stay "#"?
CODE
<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>
PM
^
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