The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Javascript/CSS Mouse over thingie

3 posters

The forum of the forums :: Miscellaneous :: Garbage

Go down

Javascript/CSS Mouse over thingie Empty Javascript/CSS Mouse over thingie

Post by Kiekeboe 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
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

Javascript/CSS Mouse over thingie Empty Re: Javascript/CSS Mouse over thingie

Post by RoNo 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
RoNo
Active Poster

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

http://bf2mercenaries.forumotion.com/

Back to top Go down

Javascript/CSS Mouse over thingie Empty Re: Javascript/CSS Mouse over thingie

Post by crysis992 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
avatar
crysis992
Forumember

Posts : 67
Reputation : 0
Language : German

Back to top Go down

Javascript/CSS Mouse over thingie Empty Re: Javascript/CSS Mouse over thingie

Post by RoNo 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>

Javascript/CSS Mouse over thingie Break_gray1

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

Javascript/CSS Mouse over thingie Break_gray1

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
RoNo
Active Poster

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

http://bf2mercenaries.forumotion.com/

Back to top Go down

Javascript/CSS Mouse over thingie Empty Re: Javascript/CSS Mouse over thingie

Post by crysis992 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
avatar
crysis992
Forumember

Posts : 67
Reputation : 0
Language : German

Back to top Go down

Javascript/CSS Mouse over thingie Empty Re: Javascript/CSS Mouse over thingie

Post by RoNo 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
RoNo
Active Poster

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

http://bf2mercenaries.forumotion.com/

Back to top Go down

Back to top

- Similar topics

The forum of the forums :: Miscellaneous :: Garbage

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