top



Can anyone give me a code on how they do this?
http://img31.imageshack.us/i/docktj.jpg/
anyone give me a code on how they do this?
http://img233.imageshack.us/i/29926307.jpg/
Can anyone give me a code on how they do this?
http://img35.imageshack.us/i/93815116.jpg/
thx for those who will help me

1)Its a stack with CSS and JQuery.
JQuery

Code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/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>
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; }
HTML:
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>

2)Forumotion related=>Cant help you

3)Rss feed reader using tables
http://world-dezign.forumotion.com/feed
I can help you with this but dont know if gangstar wants to share the code.

1)Its a stack with CSS and JQuery.
JQuery

where i am going to put the JQUERY?

before the tag.
Put the uncompresed JQuery link from google library(ajax.googleapis) after the tag and the other Jquery() after the end of your Jquery library.

and why s that when i put it in CSS it says

Detected error
We have counted a different number of "{" and of "}". It means your CSS risks to be not valid and will not be posted correctly on your forum.

We advise you to reread your code.

can you tell me about JQuery cause i dont know about that
i only know HTML,CSS

What the?

You pasted That in your CSS? wow!

I suggest you to learn some basic Coding before asking copy-paste codes.

Well,,can you give me a linked for some basic about it

and srry im just nooby

jchristian wrote:Well,,can you give me a linked for some basic about it

and srry im just nooby

ok,i will try to help you.

JQuery is a javascript library.
If you check the site,there is a "download" button.You can download the latest version of it there(currently its 1.4.4) and upload it to your host.Alternatevely you can use it directly from jquery docks or from google( http://code.google.com/intl/el-GR/apis/libraries/devguide.html ) .
It contains all the Javascript functions,in one file.
Then you use basic Javascript functions to make the effect you like in your forum/blog.Check http://api.jquery.com for more info.
you paste JQuery before the </head> tag,like any other javascript.The css in the <style> tags and the html in the <body> tag.

One question,are you using a forumotion/forumgratuit forum? Razz

then how can i put it"

Well can you do it for me?

I gave you all the codes above Delicious
i will ask again,are you onother forumotion user? Razz
If you are not then there is no problem take the codes and paste them where i said you to Delicious

can you do it for me please..
can you just add me in YM
legion61997#yahoo.com

Man,why dont you answer my question?
If you answer,then i can tell you how! LOL
A-r-e y-o-u a f-o-r-u-m-o-t-i-o-n u-s-e-r ?

can you please do it for me please please

can you add me up in Ym
legion61997@yahoo.com
so that we can talk clearly

Alright,thats it.No help from me LOL
I dont understand you at all.....i asked you 4 times if you use a forumotion forum so that i can tell you where to paste this,and you dont asnwer but you want me to talk with you LOL

Sorry cant help if you dont asnwer Silent

well im using forummotions

can you do it for me please Happy Suspect
add me in YM
legion61997@yahoo.com
so that we can talk clearly Happy

Finnaly you asnwered!
Forum version?

punbb Happy

overall_header

paste this before the tag

Code:


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/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>

paste this to your css stylesheet:
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; }

and this to overall_header after tag
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>

what do you mean by the tag?? [srry for a nooby question][but please answer Happy]

hey when i put it in css it says that
Detected error
We have counted a different number of "{" and of "}". It means your CSS risks to be not valid and will not be posted correctly on your forum.

We advise you to reread your code.

oh man...please read at least the basic syndax of HTML and CSS.....before trying anytihng...i told you clearly what to do...

hey can you just read your mailbox Happy

Go to page : 1, 2  Next