The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Javascript/CSS Mouse over thingie

View previous topic View next topic Go down

Javascript/CSS Mouse over thingie

Post by Kiekeboe on June 1st 2010, 7:26 pm

Hi!

I was looking 'round on the support forum, and I visited this site. In the corner[Right, down] there's a mouse over/on click system, how can I make that? But than with my own links and Pictures ofcourse ^^

xxx

Kiekeboe
Forumember

Female Posts : 250
Reputation : -1
Language : Dutch, english, german and a little bit french, guitar chords, html, a bit CSS
Location : Maastricht (Holland)

http://wolfstory.clicboard.com

Back to top Go down

Re: Javascript/CSS Mouse over thingie

Post by RoNo on June 4th 2010, 12:11 am

There are several versions of the:
jQuery OS X Style Dock and Stack Navigation

Scroll down *this tutsplus page for examples.

There's an addthis version called *Share Stack

Here's a modified version of the Share Stack
Code:
<style type="text/css">
.stack { position: fixed; bottom: 28px; right: 40px; font: 13px "Trebuchet MS", Verdana, Helvetica, sans-serif; color: #666; }
.stack * { margin: 0; padding: 0; }
.stack > img { position: relative; cursor: pointer; padding-top: 35px; z-index: 2; }
.stack ul { list-style: none; position: absolute; top: 5px; margin:0; cursor: pointer; z-index: 1; }
.stack ul li { position: absolute; }
.stack ul li img { border: 0; }
.stack ul li span { display: none; }
.stack .openStack li span {
   display: block;
   position: absolute;
   top: 17px;
   right: 60px;
   height: 14px;   
   line-height: 14px;
   background-color:#000;
   border: 0;   
   padding: 3px 10px;   
   text-align: center;
   text-shadow: #000 1px 1px 1px;
   font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
   font-size: 12px;
   color: #fcfcfc;   
   border-radius: 10px;   
   opacity: .85;
   filter: alpha(opacity = 85);
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
}

/* IE Fixes */
.stack { _position: absolute; }
.stack ul { _z-index:-1; _top:-15px; }
.stack ul li {*right:5px;}
.stack a {text-decoration:none}
</style>

<div class="stack">
    <img src="http://www.addthis.com/cms-content/images/gallery/stack.png" alt="stack"/>
    <ul id="stack">

<li><a href="Link5.com"><span>Link5</span><img src="http://www.addthis.com/cms-content/images/gallery/facebook.png" alt="Link5" /></a></li>
       
<li><a href="Link4.com"><span>Link4</span><img src="http://www.addthis.com/cms-content/images/gallery/stumbleupon.png" alt="Link4" /></a></li>
       
<li><a href="Link3.com"><span>Link3</span><img src="http://www.addthis.com/cms-content/images/gallery/reddit.png" alt="Link3" /></a></li>
       
<li><a href="Link2.com"><span>Link2</span><img src="http://www.addthis.com/cms-content/images/gallery/digg.png" alt="Link2" /></a></li>
       
<li><a href="Link1.com"><span>Link1</span><img src="http://www.addthis.com/cms-content/images/gallery/addthis.png" alt="Link1" /></a></li>
    </ul>
</div>   

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></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>
Add your links & images to the <div class="stack"> section.

RoNo
Active Poster

Male Posts : 1270
Reputation : 135
Language : English
Location : Laguna Beach, California

http://bf2mercenaries.forumotion.com/

Back to top Go down

Re: Javascript/CSS Mouse over thingie

Post by crysis992 on June 4th 2010, 12:51 am

Hello,

i tried to put it into my website, its all there, but i cant click it.
I tried it in the overall_header_new template and the index_body template.

If i add this code on a empty html site, it works, but it wont work in templates, and ideas why?
This is the link to my test site.
http://crysis992.forumieren.de/index.htm
Im running phpbb2.

,
crysis992

crysis992
Forumember

Posts : 67
Reputation : 0
Language : German

Back to top Go down

Re: Javascript/CSS Mouse over thingie

Post by RoNo on June 4th 2010, 3:54 am

The stacker javascript gets trashed. You'll have to host it
at a site such as yourjavascript.com and add the
script link to your code.

Linked script example:
<script type="text/javascript" src="http://yours.com/stack1.js"></script>




This Stack Initialize Script has been removed from the code in my 1st post
Code:
$(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'});
   });
});
I've created a text file with the script,
titled it stack1.js and have it hosted *here




Your code will now look like this (linked script at bottom)
Code:
<style type="text/css">
.stack { position: fixed; bottom: 28px; right: 40px; font: 13px "Trebuchet MS", Verdana, Helvetica, sans-serif; color: #666; }
.stack * { margin: 0; padding: 0; }
.stack > img { position: relative; cursor: pointer; padding-top: 35px; z-index: 2; }
.stack ul { list-style: none; position: absolute; top: 5px; margin:0; cursor: pointer; z-index: 1; }
.stack ul li { position: absolute; }
.stack ul li img { border: 0; }
.stack ul li span { display: none; }
.stack .openStack li span {
   display: block;
   position: absolute;
   top: 17px;
   right: 60px;
   height: 14px;   
   line-height: 14px;
   background-color:#000;
   border: 0;   
   padding: 3px 10px;   
   text-align: center;
   text-shadow: #000 1px 1px 1px;
   font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
   font-size: 12px;
   color: #fcfcfc;   
   border-radius: 10px;   
   opacity: .85;
   filter: alpha(opacity = 85);
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
}

/* IE Fixes */
.stack { _position: absolute; }
.stack ul { _z-index:-1; _top:-15px; }
.stack ul li {*right:5px;}
.stack a {text-decoration:none}
</style>

<div class="stack">
    <img src="http://www.addthis.com/cms-content/images/gallery/stack.png" alt="stack"/>
    <ul id="stack">

<li><a href="Link5.com"><span>Link5</span><img src="http://www.addthis.com/cms-content/images/gallery/facebook.png" alt="Link5" /></a></li>
       
<li><a href="Link4.com"><span>Link4</span><img src="http://www.addthis.com/cms-content/images/gallery/stumbleupon.png" alt="Link4" /></a></li>
       
<li><a href="Link3.com"><span>Link3</span><img src="http://www.addthis.com/cms-content/images/gallery/reddit.png" alt="Link3" /></a></li>
       
<li><a href="Link2.com"><span>Link2</span><img src="http://www.addthis.com/cms-content/images/gallery/digg.png" alt="Link2" /></a></li>
       
<li><a href="Link1.com"><span>Link1</span><img src="http://www.addthis.com/cms-content/images/gallery/addthis.png" alt="Link1" /></a></li>
    </ul>
</div>   

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>

<script type="text/javascript" src="http://www.yourjavascript.com/134446808/stack1.js"></script>
I'm not sure how long that javascript file will be
there so I advise hosting it yourself (to be sure)

RoNo
Active Poster

Male Posts : 1270
Reputation : 135
Language : English
Location : Laguna Beach, California

http://bf2mercenaries.forumotion.com/

Back to top Go down

Re: Javascript/CSS Mouse over thingie

Post by crysis992 on June 4th 2010, 2:29 pm

Okay, thank your very much.
So i have to link all jquery scripts and cant add them directly, correct?

,
crysis992

crysis992
Forumember

Posts : 67
Reputation : 0
Language : German

Back to top Go down

Re: Javascript/CSS Mouse over thingie

Post by RoNo on June 4th 2010, 7:33 pm

Definitely link jquery...
http://code.jquery.com/jquery-1.4.2.min.js
a lot of jquery scripts/files are huge... link them.

Other project scripts may or may not need linking.
If something isn't working, that could be the issue.

Your test board is looking good. Nice work Cool

RoNo
Active Poster

Male Posts : 1270
Reputation : 135
Language : English
Location : Laguna Beach, California

http://bf2mercenaries.forumotion.com/

Back to top Go down

View previous topic View next topic Back to top


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