Edit this code for me.. I fail at jQuery :P
Page 1 of 1
Edit this code for me.. I fail at jQuery :P
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!
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
- Posts : 539
Reputation : 26
Language : Markup.
Re: Edit this code for me.. I fail at jQuery :P
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
Re: Edit this code for me.. I fail at jQuery :P
Oh, nice! But one thing, when i put it down again, it doesn't work..
Saxaca- Forumember
- Posts : 539
Reputation : 26
Language : Markup.
Re: Edit this code for me.. I fail at jQuery :P
That's because i said "That's what i can" (:
I can't found the another problem ;D
I can't found the another problem ;D
Guest- Guest
Similar topics
» jQuery Code
» Jquery "Anything Slider" code problem
» Error in QuickReply JQuery Code
» Slide code EDIT
» Can you edit the HTML Code?
» Jquery "Anything Slider" code problem
» Error in QuickReply JQuery Code
» Slide code EDIT
» Can you edit the HTML Code?
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum