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.

Edit this code for me.. I fail at jQuery :P

View previous topic View next topic Go down

Edit this code for me.. I fail at jQuery :P

Post by Saxaca on November 24th 2010, 3:55 pm

Huge codes deserve a spoiler..

You see, when not clicked on, that code still shows the images. I want only the arrow to be shown. Been flickering around with this for hours now.. but no use.. Thanks!

Spoiler:
Code:
<style type="text/css">

.stack {
position: fixed;
bottom: 5px;
right: 25px;
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; width: 64px;
height: 64px;}
.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://cdn1.iconfinder.com/data/icons/customicondesignoffice5/64/navigate-up.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>

Saxaca
Forumember

Male Posts : 539
Reputation : 26
Language : Markup.

Back to top Go down

Re: Edit this code for me.. I fail at jQuery :P

Post by Guest on November 24th 2010, 4:05 pm

That's what i could do (:

Code:

<style type="text/css">

.stack {
position: fixed;
bottom: 5px;
right: 25px;
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; width: 64px;
height: 64px; display: none;}
.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://cdn1.iconfinder.com/data/icons/customicondesignoffice5/64/navigate-up.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>


Guest
Guest


Back to top Go down

Re: Edit this code for me.. I fail at jQuery :P

Post by Saxaca on November 24th 2010, 4:15 pm

Oh, nice! But one thing, when i put it down again, it doesn't work..

Saxaca
Forumember

Male Posts : 539
Reputation : 26
Language : Markup.

Back to top Go down

Re: Edit this code for me.. I fail at jQuery :P

Post by Guest on November 24th 2010, 4:18 pm

That's because i said "That's what i can" (:
I can't found the another problem ;D

Guest
Guest


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