Get started with your cookies today!

Profile
Personal Photo

No Photo

Options
Custom Title
Administrator
Personal Info
Location: No Information
Born: No Information
Website: No Information
Interests
No Information
Other Information
alias: merc
Statistics
Joined: 9-March 16
Status: (Offline)
Last Seen: Sep 13 2017, 10:51 PM
Local Time: No Information
33 posts (0.1 per day)
( 21.29% of total forum posts )
Contact Information
AIM No Information
Yahoo No Information
GTalk No Information
MSN No Information
SKYPE No Information
Message: Click here
Email: Click Here
Signature
View Signature

merc

Admin

Topics
Posts
Comments
Friends
My Content
Jul 27 2016, 10:19 PM
[dohtml]<div id="template">

<div class="top">
<h1>new sidebars!</h1>
<h2>fixed + floating</h2>
</div>

<div class="bottom">
hey guys! i said i'd throw up some more sidebars eventually and some people have been asking about floating sidebars as well as fixed sidebars with the top menu. there are more coming, so keep an eye out for those!!!

</div>

</div>[/dohtml]
Jul 27 2016, 10:01 PM
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
------->
May 20 2016, 02:26 PM
TITLE: push menu 1.4
SKIN SELECTION: push menu 1.4
ICON FONT: Yes
NOTES: Split into parts; make sure you put them in the right places!
CSS

CODE
/*** PUSH MENU 1.4 ***/

#main {
position: absolute;
top: 0;
left: 200px;
right: 0;
bottom: 0;
}

#content {
padding-left: 15px;
padding-right: 15px;
}

#top {
position: fixed;
width: calc(100% - 30px);
padding-left: 15px;
padding-right: 15px;
line-height: 32px;
min-height: 32px;
text-transform: uppercase;
background: #B84250;
color: #fff;
left: 0px;
}
#top:after {
  content: '';
  display: table;
  clear: both;
}
  .burger {
    float: left;
    padding: 5px;
    width: 32px;
    height: 32px;
    text-align: center;
  }
#push-menu-state {
  float: left;
  padding: 5px;
}

#push-menu {
position: fixed;
top: 42px;
left: 0;
width: 200px;
height: 100%;
background: #fff;
color: ivory;
}

.pushed-cbox {
width: 180px;
margin: auto;
margin-top: 20px;
}

.brand {
   background-color: #f7f7f7;
font-weight: bold;
font-family: montserrat;
font-size: 8px;
letter-spacing: 1px;
padding: 20px;
color: #B84250;
text-transform: uppercase;
text-align: left;
margin: 0px;
}
.brand b {
border-bottom: 1px solid #fff;
padding: 4px;
}

.nav-menu { padding-top: 30px; }
  .nav-menu li {
    padding-top: 2px;
    padding-bottom: 2px;
    line-height: 48px;
  }
  .nav-menu a {
    color: ivory;
    text-decoration: none;
  }
    .nav-image {
      float: left;
      width: 50px;
      line-height: 48px;
      text-align: center;
    }

.small-menu #main { left: 0; }
.small-menu #push-menu { left: -200px; }

#main, #push-menu {
transition: all 0.15s linear;
}

HTML
CODE
<!--- PLACE THIS JUST UNDER YOUR HEAD TAGS --->

<div id='main'>
<div id='top'>
  <div id='push-menu-toggle'>
    <div class='burger'>
      <i class='fa fa-bars'></i>
    </div>
  </div>
  <div id='push-menu-state'>
    <strong>Push Menu State is</strong>
    <span class='cookie-is'></span>
  </div>
</div>
<div id='content'>

<!-- END THIS ABOVE ALL PUSHED CONTENT (HEADER, WRAPPER, ETC) --->
CODE
<script>
/*****************
Put this just before the body tag ends but
above the push-menu div. You can delete this
when you are done.
*****************/
$(document).ready(function(){

var $body = $('body'),
    $btn = $('#push-menu-toggle'),
    $menu = $('#push-menu'),
    menu_state = $.cookie('my_cookie_name'),
    viewportX = $(window).width();

var cookieValue = $.cookie('my_cookie_name');

if ( cookieValue === 'close' ) {
  $body.addClass('small-menu');
} else {
  $body.removeClass('small-menu');
}
 
$.cookie('my_cookie_name', menu_state);

$('.cookie-is').find('em').remove();
$('.cookie-is').prepend().html( '<em>' + $.cookie('my_cookie_name') + '</em>');
   
$btn.click(function(){
     
  $body.toggleClass('small-menu');
 
  $.removeCookie('my_cookie_name');
 
  if ( $body.hasClass('small-menu') ) {
    menu_state = 'close';
  } else {
    menu_state = 'open';
  }
 
  $.cookie('my_cookie_name', menu_state);

  $('.cookie-is').find('em').remove();
  $('.cookie-is').prepend().html( '<em>' + $.cookie('my_cookie_name') + '</em>');
});

});
/*****************

Find more cookie resources at:
http://mercdoescookies.jcink.net

* YOU CAN DELETE THIS NOTE
 IF YOU WOULD LIKE

*****************/
</script>
</div>
</div>
<div id='push-menu'>
<h1 class='brand'><b>Cookie Menus</b></h1>
<div class='pushed-cbox'>
<!-- BEGIN CBOX - www.cbox.ws - v4.3 -->
<div id="cboxdiv" style="position: relative; margin: 0 auto; width: 180px; font-size: 0; line-height: 0;">
<div style="position: relative; height: 290px; overflow: auto; overflow-y: auto; -webkit-overflow-scrolling: touch; border: 0px solid;"><iframe src="http://www5.cbox.ws/box/?boxid=906141&boxtag=ve95bw&sec=main" marginheight="0" marginwidth="0" frameborder="0" width="100%" height="100%" scrolling="auto" allowtransparency="yes" name="cboxmain5-906141" id="cboxmain5-906141"></iframe></div>
<div style="position: relative; height: 90px; overflow: hidden; border: 0px solid; border-top: 0px;"><iframe src="http://www5.cbox.ws/box/?boxid=906141&boxtag=ve95bw&sec=form" marginheight="0" marginwidth="0" frameborder="0" width="100%" height="100%" scrolling="no" allowtransparency="yes" name="cboxform5-906141" id="cboxform5-906141"></iframe></div>
</div>
<!-- END CBOX -->
</div>  
</div>
May 20 2016, 02:17 PM
TITLE: push menu 1.3
SKIN SELECTION: push menu 1.3
ICON FONT: Yes
NOTES: Split into parts; make sure you put them in the right places!
CSS

CODE
/*** PUSH MENU 1.3 ***/

#main {
position: absolute;
top: 0;
right: 200px;
left: 0;
bottom: 0;
float: left;
}

#content {
  padding-left: 15px;
  padding-right: 15px;
}

#top {
  position: fixed;
width:100%;
  padding-left: 15px;
  padding-right: 15px;
  line-height: 32px;
  min-height: 32px;
  text-transform: uppercase;
  background: #B84250;
  color: #fff;
text-align: right;
}
#top:after {
  content: '';
  display: table;
  clear: both;
}
  .burger {
    float: left;
    padding: 5px;
    width: 32px;
    height: 32px;
    text-align: center;
  }
#menu-state {
  float: left;
  padding: 5px;
}

#menu {
position: fixed;
margin-top: 42px;
right: 0;
width: 200px;
height: 100%;
background: #fff;
color: ivory;
float: right;
}

.pushed-cbox {
width: 180px;
margin: auto;
margin-top: 20px;
}

.brand {
   background-color: #f7f7f7;
font-weight: bold;
font-family: montserrat;
font-size: 8px;
letter-spacing: 1px;
padding: 20px;
color: #B84250;
text-transform: uppercase;
text-align: left;
margin: 0px;
}
.brand b {
border-bottom: 1px solid #fff;
padding: 4px;
}

.nav-menu { padding-top: 30px; }
  .nav-menu li {
    padding-top: 2px;
    padding-bottom: 2px;
    line-height: 48px;
  }
  .nav-menu a {
    color: ivory;
    text-decoration: none;
  }
    .nav-image {
      float: left;
      width: 50px;
      line-height: 48px;
      text-align: center;
    }

.small-menu #main { right: 0; }
.small-menu #menu { right: -200px; }

#main, #menu {
transition: all 0.15s linear;
}

HTML
CODE
<!--- PLACE THIS JUST UNDER YOUR HEAD TAGS --->

<div id='main'>
<div id='top'>
  <div id='menu-toggle'>
    <div class='burger'>
      <i class='fa fa-bars'></i>
    </div>
  </div>
  <div id='menu-state'>
    <strong>Menu State is</strong>
    <span class='cookie-is'></span>
  </div>
</div>
<div id='content'>

<!-- END THIS ABOVE ALL PUSHED CONTENT (HEADER, WRAPPER, ETC) --->
CODE
<script>
/*****************
Put this just before the body tag ends but
above the menu div. You can delete this
when you are done.
*****************/
$(document).ready(function(){

var $body = $('body'),
    $btn = $('#menu-toggle'),
    $menu = $('#menu'),
    menu_state = $.cookie('my_cookie_name'),
    viewportX = $(window).width();

var cookieValue = $.cookie('my_cookie_name');

if ( cookieValue === 'close' ) {
  $body.addClass('small-menu');
} else {
  $body.removeClass('small-menu');
}
 
$.cookie('my_cookie_name', menu_state);

$('.cookie-is').find('em').remove();
$('.cookie-is').prepend().html( '<em>' + $.cookie('my_cookie_name') + '</em>');
   
$btn.click(function(){
     
  $body.toggleClass('small-menu');
 
  $.removeCookie('my_cookie_name');
 
  if ( $body.hasClass('small-menu') ) {
    menu_state = 'close';
  } else {
    menu_state = 'open';
  }
 
  $.cookie('my_cookie_name', menu_state);

  $('.cookie-is').find('em').remove();
  $('.cookie-is').prepend().html( '<em>' + $.cookie('my_cookie_name') + '</em>');
});

});
/*****************

Find more cookie resources at:
http://mercdoescookies.jcink.net

* YOU CAN DELETE THIS NOTE
 IF YOU WOULD LIKE

*****************/
</script>
</div>
</div>
<div id='menu'>
<h1 class='brand'><b>Cookie Menus</b></h1>
<div class='pushed-cbox'>
<!-- YOUR CBOX GOES HERE -->
</div>  
</div>
Last Visitors


Sep 14 2017, 05:44 PM




Jul 21 2017, 10:41 PM




Jun 25 2017, 08:54 PM



Comments
No comments posted.
Add Comment


Cookie Menus