WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You


You are not connected. Please login or register

View previous topic View next topic Go down  Message [Page 1 of 1]

1Rejected jQuery - Stack on Wed May 26, 2010 1:41 pm

iJerick

iJerick
Registered Member
Registered Member
1. Add this to the Head.. If you are using phpBB/Punbb, Here is the head.. "overall_header_new"..
and if you are using phpbb3.. add this to your Announcement.. xD
Code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</script>
   <script type="text/javascript">
    $(function () {
   // Stack initialize
   var openspeed = 300;
   var closespeed = 300;
   $('.stack>img').toggle(function(){
      var vertical = 0;
      var horizontal = 0;
      var $el=$(this);
      $el.next().children().each(function(){
         $(this).animate({top: '-' + vertical + 'px', left: horizontal + 'px'}, openspeed);
         vertical = vertical + 55;
         horizontal = (horizontal+.75)*2;
      });
      $el.next().animate({top: '-50px', left: '10px'}, openspeed).addClass('openStack')
        .find('li a>img').animate({width: '50px', marginLeft: '9px'}, openspeed);
      $el.animate({paddingTop: '0'});
   }, function(){
      //reverse above
      var $el=$(this);
      $el.next().removeClass('openStack').children('li').animate({top: '55px', left: '-10px'}, closespeed);
      $el.next().find('li a>img').animate({width: '79px', marginLeft: '0'}, closespeed);
      $el.animate({paddingTop: '35px'});
   });
   
   // Stacks additional animation
   $('.stack li a').hover(function(){
      $("img",this).animate({width: '56px'}, 100);
      $("span",this).animate({marginRight: '30px'});
   },function(){
      $("img",this).animate({width: '50px'}, 100);
      $("span",this).animate({marginRight: '0'});
   });
});
    </script>

2. Add this to your CSS..
Code:

.stack { position: fixed; bottom: 28px; right: 40px; }
.stack > img { position: relative; cursor: pointer; padding-top: 35px; z-index: 2; }
.stack ul { list-style: none; position: absolute; top: 5px; cursor: pointer; z-index: 1; }
.stack ul li { position: absolute;   right:-40px; }
.stack ul li img { border: 0; }
.stack ul li span { display: none; }
.stack .openStack li span {
   font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
   display:block;
   height: 14px;
   position:absolute;
   top: 17px;
   right:60px;
   line-height: 14px;
   border: 0;
   background-color:#000;
   padding: 3px 10px;
   border-radius: 10px;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   color: #fcfcfc;
   text-align: center;
   text-shadow: #000 1px 1px 1px;
   opacity: .85;
   filter: alpha(opacity = 85);
}

/* IE Fixes */
.stack { _position: absolute; }
.stack ul { _z-index:-1; _top:-15px; }
.stack ul li { *right:5px; }

3. Add this to the Body..

Code:

   <div class="stack">
      <img src="http://i50.tinypic.com/23gxp2p.png" alt="stack"/>
      <ul id="stack">
         <li><a href=""><span>Aperture</span><img src="http://img109.imageshack.us/img109/1750/apertures.png" alt="Aperature" /></a></li>
         <li><a href="#"><span>All Examplsssssssses</span><img src="http://img63.imageshack.us/img63/987/photoshopy.png" alt="Photoshop" /></a></li>
         <li><a href="example3.html"><span>Example 3</span><img src="http://img190.imageshack.us/img190/7320/safariw.png" alt="Safari" /></a></li>
         <li><a href="example2.html"><span>Example 2</span><img src="http://img404.imageshack.us/img404/943/codaz.png" alt="Coda" /></a></li>
         <li><a href="index.html"><span>Example 1</span><img src="http://img339.imageshack.us/img339/7783/finder.png" alt="Finder" /></a></li>         
      </ul>
   </div>

and that's it.. xD..

If you encounter any bugs.. Just reply this thread.. And We will help you to fix it.. xD

Demo: http://www.tutorials-spot.com/Stack-h12.htm



Last edited by iJerick on Wed May 26, 2010 2:58 pm; edited 1 time in total

2Rejected Re: jQuery - Stack on Wed May 26, 2010 2:43 pm

Russel

Russel
Moderator
Moderator
Hello.

Thanks for your tutorial proposal. Much better if you would be providing live preview or demo.


_________________
jQuery - Stack 35dazoh

jQuery - Stack 2hgut1v jQuery - Stack Twitte10

jQuery - Stack 2qtd2y8jQuery - Stack 157zrt2_thjQuery - Stack 25ixeyx
No Support Via PM
jQuery - Stack 33cxhs10
https://www.twitter.com/russeltubo

3Rejected Re: jQuery - Stack on Wed May 26, 2010 2:44 pm

Joel

Joel
Registered Member
Registered Member
if we add it, what will it display?

http://www.advertisehotspot.info/

4Rejected Re: jQuery - Stack on Wed May 26, 2010 2:47 pm

ankillien

ankillien
Administrator
Administrator
Hello,

I think just giving away a code for copy-pasting can't be considered as a tutorial. A tutorial should contain something to learn from.

5Rejected Re: jQuery - Stack on Wed May 26, 2010 2:54 pm

iJerick

iJerick
Registered Member
Registered Member
ankillien wrote:Hello,

I think just giving away a code for copy-pasting can't be considered as a tutorial. A tutorial should contain something to learn from.

Maybe, But im trying to help people who don't know how to install this one..

@ Russel: Yeah.. I add it up.. I add a demo..

6Rejected Re: jQuery - Stack on Wed May 26, 2010 7:15 pm

ankillien

ankillien
Administrator
Administrator
Installing jQuery plug-ins is very easy. I don't think it should be accepted unless there is something to learn about coding or hot it works etc.

Did you write the whole code(JS,CSS,HTML)? or it is taken from other site?

7Rejected Re: jQuery - Stack on Wed May 26, 2010 7:20 pm

iJerick

iJerick
Registered Member
Registered Member
ankillien wrote:Installing jQuery plug-ins is very easy. I don't think it should be accepted unless there is something to learn about coding or hot it works etc.

Did you write the whole code(JS,CSS,HTML)? or it is taken from other site?

Yes.. We can say that is so easy to install, But not all people can install it..

No, i don't write it.. I only made a tutorials..

8Rejected Re: jQuery - Stack on Wed May 26, 2010 7:24 pm

ankillien

ankillien
Administrator
Administrator
The sites which provide jQuery plug-ins also provide guidelines to install them. In addition, almost all jQs are installed the same way.... Copy CSS, host the JS and link it to the <head> and modify the HTML as per needed. Thats it.

I don't think this tutorial is going to be much helpful. It would have been accepted if it was coded by you. I appreciate your contribution though.

Tutorial Rejected

Sponsored content


View previous topic View next topic Back to top  Message [Page 1 of 1]

Similar topics

-

» jQuery - Stack

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