Tabbed Homepage Message

by rblatch May 9th 2010, 4:02 pm

How can I get a tabbed homepage message?

Thanks
Rob Cool

by kirk May 9th 2010, 6:27 pm

what do you mean by tabbed.. a tab in your navbar leading to a message or something?

by rblatch May 9th 2010, 6:33 pm

No. I mean like this....

https://i.servimg.com/u/f66/12/06/91/18/captur12.png

by kirk May 9th 2010, 6:41 pm

do you have a code for it?

by rblatch May 9th 2010, 9:56 pm

No, lol.

Thats what i'm asking thumright

by MrMario May 10th 2010, 5:30 am

I found this: http://stilbuero.de/jquery/tabs_3/

http://jquery.com/ is site you qill need to get started with it.

by Codyy May 10th 2010, 6:07 am

Heyyy, thats from CFS!

I coded that box my self.

It is consisted of CSS & HTML.

I wouldn't suggest taking it from CFS, as you can get several federal charges pressed against you by the DMCA.

by liufang898186 May 10th 2010, 7:51 am

I actually really enjoy reading your blog. Glad you’re sticking around! And I must say, I absolutely love the title of your blog .

by rblatch May 10th 2010, 11:44 am

CodyCFS wrote:Heyyy, thats from CFS!

I coded that box my self.

It is consisted of CSS & HTML.

I wouldn't suggest taking it from CFS, as you can get several federal charges pressed against you by the DMCA.

I'm not ripping it am I? You can't stop anyone from usin a diffrent version of it Wink

I also know the law Smile

by rblatch May 11th 2010, 6:58 pm

Bump ?

by rblatch May 13th 2010, 8:57 pm

by harvengure May 20th 2010, 6:46 pm

While I've had to cheat to make it work in posts, I know from personal experience that this works.

It may take some playing around with but should you have any troubles I'll keep an eye on this thread and help you getting it right.

by crysis992 May 20th 2010, 7:43 pm

Could you explain me exatcly how to do that? Or post an example code for an html page,
because for some reason it wont work for me,not in templates not in a html page.

Here I tried it at my testforum: http://crysis992.forumieren.de/Test-h18.htm

,
crysis992

by harvengure May 21st 2010, 5:56 am

Ah. You made a very common mistake for beginners, not that I am much more then a beginner myself. You did not link the jQuery library. Also you are missing a "});" from your code to close off the easytabs snippet.

It's not as pretty or inclusive as it could be if best practices but the following code should work for you.

Code:: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>  <script src="http://www.alfajango.com/javascripts/jquery.easytabs.js" type="text/javascript"></script>  <script type="text/javascript"> $(document).ready(function(){ $('#tab-container').easyTabs(); }); </script>  <style type="text/css"> #tab-container ul { margin: 0; padding: 0; } #tab-container ul li { display: inline-block; background: #ccc; border: solid 1px; border-bottom: none; } #tab-container ul li a { display: block; padding: 5px; outline: none; } #tab-container ul li a:hover { text-decoration: underline; } #tab-container ul li.active { background: #fff; padding-top: 6px; position: relative; top: 1px; } #tab-container ul li a.active { font-weight: bold; } #tab-container .panel-container { border: solid 1px; padding: 0 10px; } </style>  </head> <body> <div id="tab-container"> <ul> <li><a href="#tab-1-div">Tab 1</a></li> <li><a href="#that-other-tab">The Second Tab</a></li> <li><a href="#lastly">Tab C</a></li> </ul> <div id="tab-1-div"> <h2>Heading 1</h2> <p>This is the content of the first tab.</p> </div> <div id="that-other-tab"> <h2>Heading 2</h2> <p>Stuff from the second tab.</p> </div> <div id="lastly"> <h2>Heading 3</h2> <p>More stuff from the last tab.</p> </div> </div> </body> </html>

by crysis992 May 21st 2010, 1:03 pm

Oh thank you very much Smile

by harvengure June 8th 2010, 9:29 am

I think this is resolved. Crysis?

by Something Clever August 2nd 2010, 10:23 am

How did you get that collapsed menu on the side on your test forum? That's from jQuery, right? I've been trying to figure it out, but I don't know how.

by RoNo August 2nd 2010, 1:12 pm

That's a version of the jQuery OS X Style Dock
and Stack Navigation called the "Share Stack".

The original thread about it is here but I'll save you some
time on it since I still have the stacker script hosted.
You'll need to edit the links & pics at the bottom.

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; } .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>