how to install vertical Info panel slide with JQuery?
4 posters
Page 1 of 1
how to install vertical Info panel slide with JQuery?
brother, how to install vertical Info panel slide with JQuery like this?
where i must install this code:
first code:
second code:
Third code:
source: http://modification-blog.blogspot.com/2010/03/info-panel-slide-vertikal-dengan-jquery.html
where i must install this code:
first code:
- Code:
.panel{position:fixed;top:20px;left:0;background:#000;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;border:1px solid #444;width:330px;height:auto;filter:alpha(opacity=85);-moz-opacity:0.85;opacity:0.85;display:none;padding:30px 30px 30px 100px}
.panel p{color:#ccc;margin:0 0 15px;padding:0}
.panel a,.panel a:visited{color:#9FC54E;text-decoration:none;border-bottom:1px solid #9FC54E;margin:0;padding:0}
.panel a:hover,.panel a:visited:hover{color:#fff;text-decoration:none;border-bottom:1px solid #fff;margin:0;padding:0}
a.trigger{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#333 url(<a class="linkification-ext" href="http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png" title="Linkification: http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png">http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png</a>) 85% 55% no-repeat;border:1px solid #444;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:15px 40px 15px 15px}
a.trigger:hover{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#222 url(<a class="linkification-ext" href="http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png" title="Linkification: http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png">http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png</a>) 85% 55% no-repeat;border:1px solid #444;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:15px 40px 15px 15px}
a.active.trigger{background:#222 url(<a class="linkification-ext" href="http://lh3.ggpht.com/_xcD4JK_dIjU/S4QDvxbreOI/AAAAAAAAD2M/Cz3Q2r5pdTM/d/minus.png" title="Linkification: http://lh3.ggpht.com/_xcD4JK_dIjU/S4QDvxbreOI/AAAAAAAAD2M/Cz3Q2r5pdTM/d/minus.png">http://lh3.ggpht.com/_xcD4JK_dIjU/S4QDvxbreOI/AAAAAAAAD2M/Cz3Q2r5pdTM/d/minus.png</a>) 85% 55% no-repeat}
.columns{clear:both;width:330px;line-height:22px;padding:0 0 20px}
.colleft{float:left;width:130px;line-height:22px}
.colright{float:right;width:130px;line-height:22px}
a:focus{outline:none}
.panel img{background-color:#262626;border:1px solid #333;float:right;margin:3px 3px 6px 8px;padding:5px}
.panel h3{border-bottom:1px solid silver;margin-bottom:5px;padding-bottom:3px;text-align:left;clear:both;color:#FFF;font-size:12px;font-weight:700}
.columns ul,.columns ul li{list-style-type:none;margin:0;padding:0}
second code:
- Code:
<script src='<a class="linkification-ext" href="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" title="Linkification: http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js">http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js</a>' type='text/javascript'/>
<script type="text/javascript">
$(document).ready(function(){
$(".trigger").click(function(){
$(".panel").toggle("fast");
$(this).toggleClass("active");
return false;
});
});
</script>
Third code:
- Code:
<div class='panel'>
<h3>Selamat Datang</h3>
<p style='text-align:justify'>Selamat datang di Kotretan Hendriono - saya senang Anda berada di sini, dan berharap Anda sering datang kembali. Silakan berselancar di sini dan membaca lebih lanjut tentang artikel dunia teknik (elektronika, otomotif, komputer) yang kami susun. Ada banyak hal tentang kami, Anda mungkin akan menemukan sesuatu yang menarik. <a href='http://dedehendriono.blogspot.com/' title='Hendriono Online'>Selengkapnya tentang kami</a></p>
<h3>Sepintas Tentang Kotretan Hendriono</h3>
<img src='http://4.bp.blogspot.com/_xcD4JK_dIjU/Sp_7hWIVDpI/AAAAAAAADZE/pAq20C0z2mg/S220/eyelashes_mascara.gif' width='73px' height='73px'/>
<p>Nama saya Hendriono, Saya seorang freelance designer, blogger, teknisi. Spesialisasi pada Blogger blogs, CSS, XHTML dan jQuery</p>
<div style='clear:both;'/>
<div class='columns'>
<div class='colleft'>
<h3>Navigasi</h3>
<ul>
<li><a href='#' title='home'>Home</a></li>
<li><a href='#' title='about'>About</a></li>
<li><a href='#' title='portfolio'>Portfolio</a></li>
<li><a href='#' title='contact'>Contact</a></li>
<li><a href='#' title='blog'>Blog</a></li>
</ul>
</div>
<div class='colright'>
<h3>Social Stuff</h3>
<ul>
<li><a href='http://twitter.com/hendriono' title='Twitter'>Twitter</a></li>
<li><a href='http://facebook.com/hendriono' title='Facebook'>Facebook</a></li>
<li><a href='http://digg.com/users/hendriono' title='Digg'>Digg</a></li>
<li><a href='http://delicious.com/hendriono' title='Del.Icio.Us'>Del.Icio.Us</a></li>
<li><a href='mailto:hendriono@gmail.com' title='Gmail'>Gmail</a></li>
</ul>
</div>
</div><div style='clear:both;'/>
</div>
<a class='trigger' href='#'>Info</a>
source: http://modification-blog.blogspot.com/2010/03/info-panel-slide-vertikal-dengan-jquery.html
Re: how to install vertical Info panel slide with JQuery?
Hi,
Original tutorial & more styles here
http://spyrestudios.com/how-to-create-a-sexy-vertical-sliding-panel-using-jquery-and-css3/
AP > Display > Colors > CSS and add this:
AP > Display > Homepage message > Message content (P.S. You can add the HTML anywhere else according where you want it to display, message content will display it on main index only)
AP > Modules > JS managment
Original tutorial & more styles here
http://spyrestudios.com/how-to-create-a-sexy-vertical-sliding-panel-using-jquery-and-css3/
AP > Display > Colors > CSS and add this:
- Code:
.panel {
position: absolute;
top: 50px;
left: 0;
display: none;
background: #000000;
border:1px solid #111111;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
width: 330px;
height: auto;
padding: 30px 30px 30px 130px;
filter: alpha(opacity=85);
opacity: .85;
}
.panel p{
margin: 0 0 15px 0;
padding: 0;
color: #cccccc;
}
.panel a, .panel a:visited{
margin: 0;
padding: 0;
color: #9FC54E;
text-decoration: none;
border-bottom: 1px solid #9FC54E;
}
.panel a:hover, .panel a:visited:hover{
margin: 0;
padding: 0;
color: #ffffff;
text-decoration: none;
border-bottom: 1px solid #ffffff;
}
a.trigger{
position: absolute;
text-decoration: none;
top: 80px; left: 0;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px 40px 20px 15px;
font-weight: 700;
background:#333333 url(http://i45.servimg.com/u/f45/15/95/60/34/plus12.png) 85% 55% no-repeat;
border:1px solid #444444;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-bottom-left-radius: 0px;
display: block;
}
a.trigger:hover{
position: absolute;
text-decoration: none;
top: 80px; left: 0;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px 40px 20px 20px;
font-weight: 700;
background:#222222 url(http://i45.servimg.com/u/f45/15/95/60/34/plus12.png) 85% 55% no-repeat;
border:1px solid #444444;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-bottom-left-radius: 0px;
display: block;
}
a.active.trigger {
background:#222222 url(http://i45.servimg.com/u/f45/15/95/60/34/minus12.png) 85% 55% no-repeat;
}
.columns{
clear: both;
width: 330px;
padding: 0 0 20px 0;
line-height: 22px;
}
.colleft{
float: left;
width: 130px;
line-height: 22px;
}
.colright{
float: right;
width: 130px;
line-height: 22px;
}
ul{
padding: 0;
margin: 0;
list-style-type: none;
}
ul li{
padding: 0;
margin: 0;
list-style-type: none;
}
AP > Display > Homepage message > Message content (P.S. You can add the HTML anywhere else according where you want it to display, message content will display it on main index only)
- Code:
<div class="panel">
<h3>Sliding Panel</h3>
<p>Here's our sliding panel/drawer made using jQuery with the toggle function and some CSS3 for the rounded corners</p>
<p>This panel could also be placed on the right. This could be particularly useful if, <a href="http://spyrestudios.com" title="SpyreStudios">like me</a>, you have a left-aligned website layout.</p>
<h3>A Little Something About Me</h3>
<img class="right" src="images/jon_image.jpg" alt="Jon Phillips" />
<p>My name's Jon, I'm a freelance designer, blogger, musician. I run SpyreStudios and I specialize in WordPress blogs, CSS, XHTML and PHP</p>
<div style="clear:both;"></div><div class="columns">
<div class="colleft">
<h3>Navigation</h3>
<ul>
<li><a href="http://spyrestudios.com/" title="home">Home</a></li>
<li><a href="http://spyrestudios.com/about/" title="about">About</a></li>
<li><a href="http://spyrestudios.com/portfolio/" title="portfolio">Portfolio</a></li>
<li><a href="http://spyrestudios.com/contact/" title="contact">Contact</a></li>
<li><a href="http://spyrestudios.com" title="blog">Blog</a></li>
</ul>
</div>
<div class="colright">
<h3>Social Stuff</h3>
<ul>
<li><a href="http://twitter.com/jophillips" title="Twitter">Twitter</a></li>
<li><a href="http://designbump.com/user/147" title="DesignBump">DesignBump</a></li>
<li><a href="http://digg.com/users/jophillips" title="Digg">Digg</a></li>
<li><a href="http://delicious.com/jon.phillips" title="Del.Icio.Us">Del.Icio.Us</a></li>
<li><a href="http://designmoo.com/users/jonphillips" title="DesignMoo">DesignMoo</a></li>
</ul>
</div>
</div><div style="clear:both;"></div>
</div>
<a class="trigger" href="#">infos</a>
AP > Modules > JS managment
- Code:
$(document).ready(function(){
$(".trigger").click(function(){
$(".panel").toggle("fast");
$(this).toggleClass("active");
return false;
});
});
Example of it working on Forumotion after trying it:
Nera.- Energetic
- Posts : 7078
Reputation : 2017
Language : English
Location : -
Re: how to install vertical Info panel slide with JQuery?
Wont work on me
Nera pm me plssss.
Can u do it for me iff u can then pm me !
Nera pm me plssss.
Can u do it for me iff u can then pm me !
Re: how to install vertical Info panel slide with JQuery?
Did you add the HTML to message content?
Nera.- Energetic
- Posts : 7078
Reputation : 2017
Language : English
Location : -
Re: how to install vertical Info panel slide with JQuery?
Nera. wrote:Hi,
Original tutorial & more styles here
http://spyrestudios.com/how-to-create-a-sexy-vertical-sliding-panel-using-jquery-and-css3/
AP > Display > Colors > CSS and add this:
- Code:
.panel {
position: absolute;
top: 50px;
left: 0;
display: none;
background: #000000;
border:1px solid #111111;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
width: 330px;
height: auto;
padding: 30px 30px 30px 130px;
filter: alpha(opacity=85);
opacity: .85;
}
.panel p{
margin: 0 0 15px 0;
padding: 0;
color: #cccccc;
}
.panel a, .panel a:visited{
margin: 0;
padding: 0;
color: #9FC54E;
text-decoration: none;
border-bottom: 1px solid #9FC54E;
}
.panel a:hover, .panel a:visited:hover{
margin: 0;
padding: 0;
color: #ffffff;
text-decoration: none;
border-bottom: 1px solid #ffffff;
}
a.trigger{
position: absolute;
text-decoration: none;
top: 80px; left: 0;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px 40px 20px 15px;
font-weight: 700;
background:#333333 url(http://i45.servimg.com/u/f45/15/95/60/34/plus12.png) 85% 55% no-repeat;
border:1px solid #444444;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-bottom-left-radius: 0px;
display: block;
}
a.trigger:hover{
position: absolute;
text-decoration: none;
top: 80px; left: 0;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px 40px 20px 20px;
font-weight: 700;
background:#222222 url(http://i45.servimg.com/u/f45/15/95/60/34/plus12.png) 85% 55% no-repeat;
border:1px solid #444444;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-bottom-left-radius: 0px;
display: block;
}
a.active.trigger {
background:#222222 url(http://i45.servimg.com/u/f45/15/95/60/34/minus12.png) 85% 55% no-repeat;
}
.columns{
clear: both;
width: 330px;
padding: 0 0 20px 0;
line-height: 22px;
}
.colleft{
float: left;
width: 130px;
line-height: 22px;
}
.colright{
float: right;
width: 130px;
line-height: 22px;
}
ul{
padding: 0;
margin: 0;
list-style-type: none;
}
ul li{
padding: 0;
margin: 0;
list-style-type: none;
}
AP > Display > Homepage message > Message content (P.S. You can add the HTML anywhere else according where you want it to display, message content will display it on main index only)
- Code:
<div class="panel">
<h3>Sliding Panel</h3>
<p>Here's our sliding panel/drawer made using jQuery with the toggle function and some CSS3 for the rounded corners</p>
<p>This panel could also be placed on the right. This could be particularly useful if, <a href="http://spyrestudios.com" title="SpyreStudios">like me</a>, you have a left-aligned website layout.</p>
<h3>A Little Something About Me</h3>
<img class="right" src="images/jon_image.jpg" alt="Jon Phillips" />
<p>My name's Jon, I'm a freelance designer, blogger, musician. I run SpyreStudios and I specialize in WordPress blogs, CSS, XHTML and PHP</p>
<div style="clear:both;"></div><div class="columns">
<div class="colleft">
<h3>Navigation</h3>
<ul>
<li><a href="http://spyrestudios.com/" title="home">Home</a></li>
<li><a href="http://spyrestudios.com/about/" title="about">About</a></li>
<li><a href="http://spyrestudios.com/portfolio/" title="portfolio">Portfolio</a></li>
<li><a href="http://spyrestudios.com/contact/" title="contact">Contact</a></li>
<li><a href="http://spyrestudios.com" title="blog">Blog</a></li>
</ul>
</div>
<div class="colright">
<h3>Social Stuff</h3>
<ul>
<li><a href="http://twitter.com/jophillips" title="Twitter">Twitter</a></li>
<li><a href="http://designbump.com/user/147" title="DesignBump">DesignBump</a></li>
<li><a href="http://digg.com/users/jophillips" title="Digg">Digg</a></li>
<li><a href="http://delicious.com/jon.phillips" title="Del.Icio.Us">Del.Icio.Us</a></li>
<li><a href="http://designmoo.com/users/jonphillips" title="DesignMoo">DesignMoo</a></li>
</ul>
</div>
</div><div style="clear:both;"></div>
</div>
<a class="trigger" href="#">infos</a>
AP > Modules > JS managment
- Code:
$(document).ready(function(){
$(".trigger").click(function(){
$(".panel").toggle("fast");
$(this).toggleClass("active");
return false;
});
});Example of it working on Forumotion after trying it:
woah, awesome.......thx very much brother.....it's work for my forum......
Proof:
click here
Re: how to install vertical Info panel slide with JQuery?
Welcome indoromance , I will leave the topic open untill it's solved for GraafikaMeister since nothing seems to be working for him
@GraafikaMeister send me a test admin account info via PM.
@GraafikaMeister send me a test admin account info via PM.
Nera.- Energetic
- Posts : 7078
Reputation : 2017
Language : English
Location : -
Re: how to install vertical Info panel slide with JQuery?
Nera. wrote:Welcome indoromance , I will leave the topic open untill it's solved for GraafikaMeister since nothing seems to be working for him
@GraafikaMeister send me a test admin account info via PM.
but that script still have weakness:
that panel cannot move, when i move down my pointers to go to statistic......, please compare with my first source.
Re: how to install vertical Info panel slide with JQuery?
No, that's not the script it is just a different CSS rule. Find this in CSS position: absolute; and change it to position: fixed;
You have it in three places in CSS, change it in all three & it will move
Example: http://movingagain.forumcroatian.com/forum
You have it in three places in CSS, change it in all three & it will move
Example: http://movingagain.forumcroatian.com/forum
Nera.- Energetic
- Posts : 7078
Reputation : 2017
Language : English
Location : -
Re: how to install vertical Info panel slide with JQuery?
Nera. wrote:No, that's not the script it is just a different CSS rule. Find this in CSS position: absolute; and change it to position: fixed;
You have it in three places in CSS, change it in all three & it will move
Example: http://movingagain.forumcroatian.com/forum
thank' u again....and again.......
finish
Re: how to install vertical Info panel slide with JQuery?
Welcome
Will wait for GraafikaMeister now
Will wait for GraafikaMeister now
Nera.- Energetic
- Posts : 7078
Reputation : 2017
Language : English
Location : -
Re: how to install vertical Info panel slide with JQuery?
Send it now, but I'll login tonight.
Nera.- Energetic
- Posts : 7078
Reputation : 2017
Language : English
Location : -
Re: how to install vertical Info panel slide with JQuery?
fast solution.......change your forum version to invision.....
Re: how to install vertical Info panel slide with JQuery?
how can i get it to follow all the way down the forum
™X-jvlr.FR3$H-X™- Forumember
- Posts : 45
Reputation : 2
Language : english
Re: how to install vertical Info panel slide with JQuery?
™X-jvlr.FR3$H-X™ wrote:how can i get it to follow all the way down the forum
Find this in CSS position: absolute; and change it to position: fixed;
You have it in three places in CSS, change it in all three & it will move
Re: how to install vertical Info panel slide with JQuery?
GraafikaMeister wrote:Please login now i beg u !
Done.
Please do change the login details you gave me to something else.
Solved?
Nera.- Energetic
- Posts : 7078
Reputation : 2017
Language : English
Location : -
Re: how to install vertical Info panel slide with JQuery?
how to add underline below text "sliding panel"
Re: how to install vertical Info panel slide with JQuery?
Add this to CSS
- Code:
.h3, h3 {
border-bottom: 1px solid #595959;
}
Nera.- Energetic
- Posts : 7078
Reputation : 2017
Language : English
Location : -
Similar topics
» i need Help For This How To Create A Sexy Vertical Sliding Panel Using jQuery And CSS3
» Adding Slide Panel
» need info on how to install recaptcha VERIFICATION TO YOUR FORUM
» jQuery image menu (Cool Slide)
» User info box if mouse slide on Name
» Adding Slide Panel
» need info on how to install recaptcha VERIFICATION TO YOUR FORUM
» jQuery image menu (Cool Slide)
» User info box if mouse slide on Name
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum