Coding-Spot

You are not connected. Please login or register

 
 

Sliding Panel

Message (Page 1 of 1)


 
Administrator
Administrator

Posted on Thu Aug 08, 2013 2:33 pm

 
Hello! After a couple of months, here is another tutorial again! A sliding panel!
Forum Version: PunBB and Phpbb2 (for Phpbb3 and Invision, put #1 code on Homepage Message)
Demo: http://coding-spot.darkbb.com/h5-sliding-panel-demo

So lets start!

1. Go to your overall_header template, find the body part () and paste this below it: (Just edit the text inside the div id panel tag)
Code:
<div class="boddy"><div id="panel">
<center>Hello hello hello! E-Mark! Aaaa! Teeeeest!</center>
</div>

<p class="slide"><a href="#" class="btn-slide">Slide Panel</a></p>
</div>
2. Inside the same template (overall_header), find the ending head tag (), then paste this before the ending tag:
Code:
<script type="text/javascript">
$(document).ready(function(){

   $(".btn-slide").click(function(){
      $("#panel").slideToggle("slow");
      $(this).toggleClass("active"); return false;
   });
  
    
});
</script>
NOTE!: If you'll put this on a new HTML Page (creating new HTML page then setting it as new homepage, please put this one):
Code:
<script type="text/javascript" src="http://www.webdesignerwall.com/demo/jquery/jquery.js"></script>
3. Put this on your CSS:
Code:
.boddy {
   margin: -8px auto;
   padding: 0;
   width: 570px;
   font: 75%/120% Arial, Helvetica, sans-serif;
}
#panel {
   background: #c3c3c3;
   height: 200px;
   display: none;
}
.slide {
   margin: 0;
   padding: 0;
   border-top: solid 4px #373737;
   background: url(http://img638.imageshack.us/img638/5051/tabwo.png) no-repeat center top;
}
.btn-slide {
   background: url(http://img21.imageshack.us/img21/8233/whitearrown.gif) no-repeat right -50px;
   text-align: center;
   width: 144px;
   height: 31px;
   padding: 10px 10px 0 0;
   margin: 0 auto;
   display: block;
   font: bold 120%/100% Arial, Helvetica, sans-serif;
   color: #fff;
   text-decoration: none;
}
.active {
   background-position: right 12px;
}
Then you're done!! :D



Last edited by Mark on Sun Aug 11, 2013 5:07 pm; edited 5 times in total



View user profile http://coding-spot.darkbb.com



 
Senior Member

Posted on Thu Aug 08, 2013 2:36 pm

 
Nice n Cool Tutorial :)



View user profile



 
Advance Member

Posted on Thu Aug 08, 2013 2:38 pm

 
Cool mark!



View user profile


#4

Sponsored content


 

Posted Today at 11:55 am

 





Message (Page 1 of 1)

Permissions in this forum:
You cannot reply to topics in this forum

In total there is 0 user online :: 0 Registered, 0 Hidden and 0 Guests

Users browsing this forum: None