Something so cool
It will make you rip your clothes off and run naked into the streets with joy
:2funny:
When?
soon :coolsmiley: as in TP 0.9.5 soon - but its not that, its a block code snippet (in case u were wondering lol)
Yes its here :D
live demo (http://path-to-peace.net/forum/index.php)
stand alone demo (http://path-to-peace.net/forum/moofx.html)
Cool aku. :)
man it sure was a tough task getting this sorted out
but it basically gives the same - exact same functionality as the yahoo tabs we see
smooth scrolling
can support all types of elements including polls, forms, login boxes and whatever...
i love it :D
i dont have any documentation for it yet - but im trying to complie something so i can put it here :D
Credits go to: moofx for the base code and joomla template for the tabbed style :up:
Best of luck on that.. it's really nice. 8)
I Like It, Good Job Akulion :)
Ok here are the install instructions with a small DEMO (http://path-to-peace.net/forum)
sorry i havent had much time to experiment around with this thingie
but basically it can give you the exact same features as on the yahoo.com page with their tabbed content. Its all really up to you and your creativity as to how you decorate it and make it interesting.
Please note that SOME knowledge of HTML is required for this - since all content created inside the tabs is basically handeled with html tabs.
PHP I havent tested yet, but i am sure it will support it if you echo out the whole script leaving the php bits out of the quotes (if u know what i mean)
as u may have guessed im being hasty here - already had to work nearly 3 hours to get this lil script working.
The script itself is freeware and available from http://moofx.mad4milk.net but it is not available in the tabbed format you see here. But still that page is worth a look especially for theme creators since it offers some cool functions for browsers.
Anyways on to the instructions...
Download this zip file (http://path-to-peace.net/forum/moofx/moofx.zip) open it, upload all its content to a folder in your forum root, call it whatever you want - as long as you put the correct address in the code below.
Create a script block and add all the following code to it:
<head>
<title>Your title here - but not necessary</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<script language="javascript" type="text/javascript" src="http://yoursite.com/folder/prototype.lite.js"></script>
<script language="javascript" type="text/javascript" src="http://yoursite.com/folder/moo.fx.js"></script>
<script language="javascript" type="text/javascript" src="http://yoursite.com/folder/moo.fx.pack.js"></script>
<script language="javascript" type="text/javascript" src="http://yoursite.com/folder/moo.fx.config.js"></script>
<link href="http://yoursite.com/folder/template_css.css" rel="stylesheet" type="text/css"/>
</head>
<div id="spotlight">
<ul class="headtab-wrapper">
<li class="headtab" id="headtab-1">
<a>Your Tab 1</a>
</li>
<li class="headtab" id="headtab-2">
<a>Your Tab 2</a>
</li>
<li class="headtab" id="headtab-3">
<a>Your Tab 3</a>
</li>
<li class="headtab" id="headtab-4">
<a>Your Tab 4</a>
</li>
</ul>
<div class="sl-wrapper">
<div class="stretcher" id="stretcher-1">
<div class="moduletable">
Content 1 Goes here
</div>
</div>
<div class="stretcher" id="stretcher-2">
<div class="moduletable">
Content 2 Goes here
</div>
</div>
<div class="stretcher" id="stretcher-3">
<div class="moduletable">
Content 3 Goes here
</div>
</div>
<div class="stretcher" id="stretcher-4">
<div class="moduletable">
Content 4 Goes here
</div>
</div>
<script language="javascript" type="text/javascript">init();</script>
</div>
</div>
replace all the www.yoursite.com/folder instances with the path to those files you uploaded.
where it says "your tab here" goes the heading for the tabs
where it says content 1 here, goes whatever content you wana put
ALL other customization is done in the CSS file..and I mean ALL customization, colors, box sizes, etc etc.
If you wana add more tabs, just study the sequence in the above code and add new tabs acordingly by creating a new LI tag and then a new DIV with the same Id to identify it.
Once again sorry for the short inctructions- but really right now im at the end of patience lol i need rest!
Pretty cool feature, i might use it some day .. thanks for sharing ;)
Nice work :up:.
Looks "not so difficult" to implement, but documentation is always important ;)
I will give it a try on my next site-makeover :)
Thank's for sharing
yeah, very cool 8)
Nice little feature. Hopefully I'll use it one day. :)
As I experiment around with it ill try and make some documentation for it so people can easily use it
ive implemented it on my page here (http://path-to-peace.net)
anyone wanting a live demo can have a look
also note that if i dont specify any background colors in the CSS file
it automatically picks up the color of the theme
so making it cross-theme usable
Thats good Aku.. all those languages too. :up: :D
what languages? lol
actually after i postd that i was messing around with the script...so ur 'live demo' experience may have been hampered lol
now its ready totally with a team page, rules page, announcements and welcome message in place :D
jut go to the FORUMS (path to activities)
and ull see it there
Quote from: crip on August 31, 2006, 08:24:12 PM
Thats good Aku.. all those languages too. :up: :D
Definitely a unique site 8)
I know I got lost earlier today...
thanks
im currently trying to implement a 'tabbed login' box where the login box appears under a tab marked 'login' and a tab marked 'help' gives the link for forgotten password and also for registration
not much luck so far..but im still at it lol
Looks good, looked even better when i seen the first time on the joomla/mambo theme you grabbed it from. :down:
getting it to work is te main thing :up:
its available free on moofx
Hey Akulion,
I tried using it with RC3+TP+ Luminanace theme... but somehow all the contents are coming one below the other not the way in your site.....
Please help.
Start off very simple
First upload the files from the 1st post to your forum root into a folder called moofx
Then put the basic code and test to see if it works.....
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<script language="javascript" type="text/javascript" src="http://path-to-peace.net/forum/moofx/prototype.lite.js"></script>
<script language="javascript" type="text/javascript" src="http://path-to-peace.net/forum/moofx/moo.fx.js"></script>
<script language="javascript" type="text/javascript" src="http://path-to-peace.net/forum/moofx/moo.fx.pack.js"></script>
<script language="javascript" type="text/javascript" src="http://path-to-peace.net/forum/moofx/moo.fx.config.js"></script>
<link href="http://path-to-peace.net/forum/moofx/template_css.css" rel="stylesheet" type="text/css"/>
</head>
<div id="spotlight">
<ul class="headtab-wrapper">
<li class="headtab" id="headtab-1">
<a>Welcome</a>
</li>
<li class="headtab" id="headtab-2">
<a>Whats New?<img src="http://path-to-peace.net/misc/icon29cautiuon.gif"></a>
</li>
<li class="headtab" id="headtab-3">
<a>Site Rules</a>
</li>
<li class="headtab" id="headtab-4">
<a>P2P Team</a>
</li>
</ul>
<div class="sl-wrapper">
<div class="stretcher" id="stretcher-1">
<div class="moduletable">
hello testing 123
</div>
</div>
<div class="stretcher" id="stretcher-2">
<div class="moduletable">
hello testing 123456
</div>
</div>
<div class="stretcher" id="stretcher-3">
<div class="moduletable">
hello testing 123456789
</div>
</div>
<div class="stretcher" id="stretcher-4">
<div class="moduletable">
hello testing 1234567890123
</div>
</div>
<script language="javascript" type="text/javascript">init();</script>
</div>
</div>
If the above code works then add content slowly one by one to the parts which say 'Put something here'
Be careful when putting stuff in there - its HTML format should be correct
give it a try
Have done everything... the only thing i have changed is the folder name and changed the path in the code above... can see the tabs and content...but its not functioning...one content coming below the other.... even i have changed the css file...it works... the stretcher function is not working.... changed permission also to 755 to all the files and the folder....
check a few things:
1 - ur files were uploaded properly
2 - ur not using editors in TP (since they can cause errors in codes)
3 - ur using a Script box
4 - in the css file with witdh for these 2 parts matches:
near the top:
#spotlight {
float: center;
width: 690px!important;
width: 690px;
padding: 0 5px;
margin: 10px 0 10px;
line-height: normal;
and near the bottom:
#spotlight .stretcher div.col {
width: 32%!important;
width: 32%;
float: left;
margin-right: 6px;
5 - also make sure that if you are using any tables in your conetnt for the tabs, then their table width MUST NOT be bigger than the one defined above!
6 - Finally try to use smaller width for the 1st part of the css file here:
#spotlight {
float: center;
width: 690px!important;
width: 690px;
padding: 0 5px;
margin: 10px 0 10px;
line-height: normal;
instead of 690 try smaller values but not too small though
and check if it works
cos I just used the same code i gave u on my test site (http://goofy-goobers.com/forum/index.php) and it works perfectly fine
PS: I have also revised the code above (in my last post) to put the paths to my page files...u can try to put that in to see if it works or not :up:
I suspect it is something to do with table width - should be fixed easily hopefully
working perfectly now... u r a genius.... let me finish the content part..and i will show you..
Thanks..a trillion ( i dont know any larger number ) :)
good to hear its working :up:
glad i could help out :D
Yessss !! Now you can check out at my site- 8)
Business Partner Match (http://www.businesspartnermatch.com)
I tried to put in a rss feed and made a 5th tab - that's working too !! but one lil problem is it's breaking the page as the width is too big.
Anyways, I will put something nice there :)
Thanks again !!
That is very cool code :) Thanks for working it out.
One thing i'd like to do is change the blue buttons to a grey-ish
shade tho. Any idea which fields that would be in the .css ?
there is a small image in the zip pack
change its color over and it will change tab colors
Also ther are 3 states for the tabs: Current, over and hover
you can change their attributes in the css file here
#spotlight li.headtab a {
width: 100px;
display: block;
background: #889DA4;
color: #253135;
line-height: 20px;
text-align: center;
height: 20px;
cursor: pointer;
}
#spotlight li.headtab a:hover {
color: #F9FCD1;
background: #6E8187;
text-decoration: none;
}
#spotlight li.headtab-current a {
width: 100px;
border-right: 1px solid #36474D;
display: block;
background: url(http://path-to-peace.net/forum/moofx/tab-current-bg.gif) #465D65;
color: #F9FCD1;
line-height: 24px;
text-align: center;
text-decoration: none;
height: 24px;
cursor: pointer;
}
Thanks Aku. I might have to put this on hold tho, having a rough time
getting my content formatted in there.
Also, any idea why the contents of the first tab are blank when you
first arrive to the forum/site?
I see that this occurs on yours & nikita's site also.
Until i 'refresh' the browser, the content of that first tab disappears.
I don't know why you have put the <head> </head> tags in there. You can use this fine without using such a poor, sloppy hack.
Put the scripts/css where they should be, in the head of index.template.php.
(your site will not validate if you do it the way it has been suggested by aku)
btw, I really suggest you give the credit where it is due on this post. you did not code this, you grabbed it from one of the joomla/mambo themes and claim it to be yours. All you credit is moo.fx, then run around here saying how proud you are of yourself.
for what? hacking prefab code with some poor markup? congrats!
Quote from: danimal on October 21, 2006, 08:37:50 AM
I don't know why you have put the <head> </head> tags in there. You can use this fine without using such a poor, sloppy hack.
Put the scripts/css where they should be, in the head of index.template.php.
(your site will not validate if you do it the way it has been suggested by aku)
btw, I really suggest you give the credit where it is due on this post. you did not code this, you grabbed it from one of the joomla/mambo themes and claim it to be yours. All you credit is moo.fx, then run around here saying how proud you are of yourself.
for what? hacking prefab code with some poor markup? congrats!
Hi danimal...
I have seen your earlier post also as also this one... what's your problem man....
Akulion is a respected member and he has mentioned everything in his post with due credits and link.... the best part is instead of holding onto such goodies he has shared it and has also helped others in properly using it....
What are your contributions to smf/tp members... we operate in a brotherhood here... with each one trying to help the other... if you cannot take something in the right spirit why not just keep shut..its easy to hide behind a PC and type whatever you want....
And when you say about validation.... smf and tp can and will survive, even without such minor effects and addonsNo one is stopping me now to type anything or everything I want except for my up-bringing and wisdom....We must all be careful before we write or say anything... please never make them bitter as neither you nor me knows when we might have to eat them back...
Quote from: Aku on August 30, 2006, 09:44:40 AM
Yes its here :D
live demo (http://path-to-peace.net/forum/index.php)
stand alone demo (http://path-to-peace.net/forum/moofx.html)
thatÃ,´s pretty cool
edit - is this the site of js creator?
http://moofx.mad4milk.net/
thatÃ,´s very hot stuff too
Quote from: aglioeolio on October 21, 2006, 02:31:00 PM
Quote from: Aku on August 30, 2006, 09:44:40 AM
Yes its here :D
live demo (http://path-to-peace.net/forum/index.php)
stand alone demo (http://path-to-peace.net/forum/moofx.html)
thatÃ,´s pretty cool
edit - is this the site of js creator?
http://moofx.mad4milk.net/
thatÃ,´s very hot stuff too
yup thats the JS site creator - he puts the tabbed content idea on his site as well but one over the other.
The horizontal type tabs I got from a Joomla template :up:
Literally had to read the code to get it to work though lol
thanks for the tutorial aku :D
I am using tabbed links in my portal but this transition effects are much better...
use this in my Forum is a little to much to my Host I think ;\ hahaha
welcome :up:
akulion,
I have a big bunch of articles(100-120) under 4-5 categories...( each category has about 20-25 articles) can you suggest a menu by which I can show the top level category and when someone clicks he finds the links t all the other articles.. I have used the tabbed menu to list a few of them but I have more....
Please help...
wow thats a lot of menu Items!
If its a menu u need then here are a few good ones that I know of:
Vertical Menu 1: http://dynamicdrive.com/dynamicindex1/hvmenu/index.htm
Vertical Menu 2:
http://dynamicdrive.com/dynamicindex1/anylinkcss2.htm
Horizontal Menu 1:
http://dynamicdrive.com/dynamicindex1/sm/index.htm
Horizontal Menu 2:
http://dynamicdrive.com/dynamicindex1/topmen3/index.htm
Horizontal 3:
http://dynamicdrive.com/dynamicindex1/jimmenu/index.htm
Both Vertical + Horizontal:
http://dynamicdrive.com/dynamicindex1/blmmenu/index.htm
U'll have to check them out as each is a lot different from the other - pick the one which best suits u :up:
wow, thats a lot of option... i will try them out and then get back to you.
Regards.
personally I prefer the 1st menu (Vertical Menu 1) since it can be displayed both horizontal and vertical and looks more serious than the others :D lol
Correct, the first one is nice and serious both... but where do you put the java script tags - in the index_template.php or in the block.... think i should do some trial and error :)
yea im guessig it will have to go in the index template just after the body tag which looks like this <body>
try it out :up:
Im testing this because now i want to use it ;)
Thanks for sharing your code
Any idea how to show articles inside these tabs ? :o
just put the whole article code using html lol :D
Quote from: Aku on October 22, 2006, 10:00:12 PM
just put the whole article code using html lol :D
Ehmm sorry didnt make myself clear.. i was thinking about php articles
then u will have to put the whole code in a PHP article and echo out the code making sure that if you use
Echo ' ';
Then there should not be any ' (single quotes) within the code
And if you choose to use:
Echo " ";
Then there should not be any " (double quotes) within the code
Nikita, how did you make it so that the contents of your first tab (welcome),
are not "blank" when your site is first visited?
When i originally asked the question here (http://www.tinyportal.net/smf/index.php?topic=7915.msg81849#msg81849), it was blank at that time.
I see that Aku's site, and another site in Showcase are still blank until i
do a refresh.
fb that seems to be an issue in IE I still havent been able to figure out myself....ben bangin my head on it several hours in the past lol
gave up finally and decided its a small glitch compared to the effect - plus it seems to go away after a page change - ah well
Aku, I'm lost. I tried this and it didn't work. Can you please review :o I can see the tabs, but they all appear in the first tab and I can see the html tags. I did use a script box for this code.
<head>
<title>About AVS</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<script language="javascript" type="text/javascript" src="http://www.avalanchestyle.net/forum/avstabs/prototype.lite.js"></script>
<script language="javascript" type="text/javascript" src="http://www.avalanchestyle.net/forum/avstabs/scripts/moo.fx.js"></script>
<script language="javascript" type="text/javascript" src="http://www.avalanchestyle.net/forum/avstabs/moo.fx.pack.js"></script>
<script language="javascript" type="text/javascript" src="http://www.avalanchestyle.net/forum/avstabs/moo.fx.config.js"></script>
<link href="http://www.avalanchestyle.net/forum/avstabs/template_css.css" rel="stylesheet" type="text/css"/>
</head>
<div id="spotlight">
<ul class="headtab-wrapper">
<li class="headtab" id="headtab-1">
<a>Welcome</a>
</li>
<li class="headtab" id="headtab-2">
<a>Did you get tagged?</a>
</li>
<li class="headtab" id="headtab-3">
<a>Did you know?</a>
</li>
<li class="headtab" id="headtab-4">
<a>Events</a>
</li>
</ul>
<div class="sl-wrapper">
<div class="stretcher" id="stretcher-1">
<div class="moduletable">
Welcome to AvalancheStyle.com!
[img]http://www.avalanchestyle.com/forum/AVS/RoarinRowCCC.jpg[/img]
We are a Chevy Avalanche community and welcome all truck enthusiasts. There's no charge to look around because we are a FREE forum. Register to view all categories and features of the site. It only takes a minute.
[u][b]Member's benefits:[/b][/u]
Open forum to discuss our beloved Chevy Avalanches
Downloadable Chevy Avalanche related material
Streaming video, music, and live TV
- 800+ arcade games
- Photo gallery
- Chat and AVS Shoutbox!
- Selectable themes and collapsable modules
- Monthly newsletter
- More. . .
[u][b]AVS archives:[/b][/u]
News - http://www.avalanchestyle.com/forum/index.php?cat=54
How To's - http://www.avalanchestyle.com/forum/index.php?cat=373
[u][b]Other useful links:[/b][/u]
Search Wikipedia - http://www.avalanchestyle.com/forum/index.php?page=69
Yahoo! Top Stories - http://www.avalanchestyle.com/forum/index.php?page=52
Fresno Calendar of Events - http://www.avalanchestyle.com/forum/index.php?page=82
AVS Frappr Map - http://www.avalanchestyle.com/forum/index.php?page=60
AVS Flash Gallery - http://www.avalanchestyle.com/forum/index.php?page=15
Link Exchange - http://www.avalanchestyle.com/forum/index.php?topic=2491.0
</div>
</div>
<div class="stretcher" id="stretcher-2">
<div class="moduletable">
If you got tagged by one of our members, be sure to post in this thread - [url=http://www.avalanchestyle.com/forum/index.php?topic=4004.msg81027;topicseen#new]here[/url]
[img]http://www.avalanchestyle.com/forum/AVS/AVTag.jpg[/img]
</div>
</div>
<div class="stretcher" id="stretcher-3">
<div class="moduletable">
There's alot to see an do on the site. Start with our 'Did you know?' section - [url=http://www.avalanchestyle.com/forum/index.php?topic=4004.msg81027;topicseen#new]here[/url]
Did you know we have over 20 different themes to choose from? We do! Find out how in our 'Did you know' section.
</div>
</div>
<div class="stretcher" id="stretcher-4">
<div class="moduletable">
Come meet the AVS members at the next get together. Check the calendar or Events master list - [url=http://www.avalanchestyle.com/forum/index.php?topic=4004.msg81027;topicseen#new]here[/url]
</div>
</div>
<script language="javascript" type="text/javascript">init();</script>
</div>
</div>
instead of naming the folder "avstabs" try "moofx"
also try not to use BB codes (they may work or not - but i havent tested them yet)
Also one very important point...open up the CSS file and do this:
http://www.tinyportal.net/smf/index.php?topic=7915.msg81398#msg81398
Quote from: Aku on October 29, 2006, 11:11:29 PM
instead of naming the folder "avstabs" try "moofx"
also try not to use BB codes (they may work or not - but i havent tested them yet)
Also one very important point...open up the CSS file and do this:
http://www.tinyportal.net/smf/index.php?topic=7915.msg81398#msg81398
I tried that and it still didn't work. I changed from 'avstabs' to 'moofx' and removed the BB codes. Also updated css file.
<head>
<title>About AVS</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<script language="javascript" type="text/javascript" src="http://www.avalanchestyle.net/forum/moofx/prototype.lite.js"></script>
<script language="javascript" type="text/javascript" src="http://www.avalanchestyle.net/forum/moofx/scripts/moo.fx.js"></script>
<script language="javascript" type="text/javascript" src="http://www.avalanchestyle.net/forum/moofx/moo.fx.pack.js"></script>
<script language="javascript" type="text/javascript" src="http://www.avalanchestyle.net/forum/moofx/moo.fx.config.js"></script>
<link href="http://www.avalanchestyle.net/forum/moofx/template_css.css" rel="stylesheet" type="text/css"/>
</head>
<div id="spotlight">
<ul class="headtab-wrapper">
<li class="headtab" id="headtab-1">
<a>Welcome</a>
</li>
<li class="headtab" id="headtab-2">
<a>Did you get tagged?</a>
</li>
<li class="headtab" id="headtab-3">
<a>Did you know?</a>
</li>
<li class="headtab" id="headtab-4">
<a>Events</a>
</li>
</ul>
<div class="sl-wrapper">
<div class="stretcher" id="stretcher-1">
<div class="moduletable">
Welcome to AvalancheStyle.com!
We are a Chevy Avalanche community and welcome all truck enthusiasts. There's no charge to look around because we are a FREE forum. Register to view all categories and features of the site. It only takes a minute.
Member's benefits:
Open forum to discuss our beloved Chevy Avalanches
Downloadable Chevy Avalanche related material
Streaming video, music, and live TV
- 800+ arcade games
- Photo gallery
- Chat and AVS Shoutbox!
- Selectable themes and collapsable modules
- Monthly newsletter
- More. . .
AVS archives:
News - http://www.avalanchestyle.com/forum/index.php?cat=54
How To's - http://www.avalanchestyle.com/forum/index.php?cat=373
Other useful links:
Search Wikipedia - http://www.avalanchestyle.com/forum/index.php?page=69
Yahoo! Top Stories - http://www.avalanchestyle.com/forum/index.php?page=52
Fresno Calendar of Events - http://www.avalanchestyle.com/forum/index.php?page=82
AVS Frappr Map - http://www.avalanchestyle.com/forum/index.php?page=60
AVS Flash Gallery - http://www.avalanchestyle.com/forum/index.php?page=15
Link Exchange - http://www.avalanchestyle.com/forum/index.php?topic=2491.0
</div>
</div>
<div class="stretcher" id="stretcher-2">
<div class="moduletable">
If you got tagged by one of our members, be sure to post in this thread - http://www.avalanchestyle.com/forum/index.php?topic=4004.msg81027;topicseen#new
</div>
</div>
<div class="stretcher" id="stretcher-3">
<div class="moduletable">
There's alot to see an do on the site. Start with our 'Did you know?' section - http://www.avalanchestyle.com/forum/index.php?topic=4004.msg81027;topicseen#new
Did you know we have over 20 different themes to choose from? We do! Find out how in our 'Did you know' section.
</div>
</div>
<div class="stretcher" id="stretcher-4">
<div class="moduletable">
Come meet the AVS members at the next get together. Check the calendar or Events master list - http://www.avalanchestyle.com/forum/index.php?topic=4004.msg81027;topicseen#new
</div>
</div>
<script language="javascript" type="text/javascript">init();</script>
</div>
</div>
Here's what it looks like on my backup site - http://www.avalanchestyle.net/forum/index.php?board=1.0
i think i put one of the paths wrong in the code in the 1st post
this:
http://www.avalanchestyle.net/forum/moofx/scripts/moo.fx.js
should be this:
http://www.avalanchestyle.net/forum/moofx/moo.fx.js
Quote from: Aku on October 29, 2006, 11:30:13 PM
i think i put one of the paths wrong in the code in the 1st post
this:
http://www.avalanchestyle.net/forum/moofx/scripts/moo.fx.js
should be this:
http://www.avalanchestyle.net/forum/moofx/moo.fx.js
Doh! that was my bad. I didn't see that scripts directory. I fix it, it works, now I just have to clean it up, change the color background, etc. :up: Thank you!
yup just play around with the css to fix the colors up :up:
u can add pics and stuff using plain html and a table layout for neatness
thanks to moofx an joomla for the cool script
(for danimal) ;)
Quote from: Aku on October 29, 2006, 11:41:04 PM
yup just play around with the css to fix the colors up :up:
u can add pics and stuff using plain html and a table layout for neatness
thanks to moofx an joomla for the cool script
(for danimal) ;)
So strange, on my default theme it's perfect, on other themes there is a blank space. I just wanted it all grey, with black text. The yellow text for the highlighted tab is o.k. with me
This is what my css looks like right now
/* BEGIN: SPOTLIGHT */
#spotlight {
float: center;
width: 750px!important;
width: 750px;
padding: 0 5px;
margin: 10px 0 10px;
line-height: normal;
}
#spotlight .sl-wrapper {
padding: 0 0 0 5px;
border-top: 1px solid #CCC9C9;
border-right: 1px solid #CCC9C9;
border-bottom: 1px solid #CCC9C9;
background: #CCC9C9;
}
#spotlight ul.headtab-wrapper {
margin: 0;
padding: 0;
list-style: none outside;
background: none;
text-align: center;
height: 24px;
}
#spotlight li.headtab {
margin: 4px 2px 0;
float: left;
padding: 0;
display: block;
background: none;
font-size: 11px;
}
#spotlight li.headtab-current {
margin: 0;
float: left;
padding: 0;
display: block;
background: none;
font-size: 11px;
}
#spotlight li.headtab a {
width: 100px;
display: block;
background: #CCC9C9;
color: #253135;
line-height: 20px;
text-align: center;
height: 20px;
cursor: pointer;
}
#spotlight li.headtab a:hover {
color: #F9FCD1;
background: #CCC9C9;
text-decoration: none;
}
#spotlight li.headtab-current a {
width: 100px;
border-right: 1px solid #36474D;
display: block;
background: #CCC9C9;
color: #F9FCD1;
line-height: 24px;
text-align: center;
text-decoration: none;
height: 24px;
cursor: pointer;
}
#spotlight .article_seperator {
visibility: hidden;
}
#spotlight .contentheading {
color: #FFFFFF;
}
#spotlight .moduletable {
border: none;
margin: 10px 0 0;
padding-bottom: 0;
background: #CCC9C9;
}
#spotlight .moduletable a {
font-size: 11px;
}
#spotlight .moduletable h3 {
border-left: 5px solid #CCC9C9;
background: #CCC9C9;
line-height: 20px;
height: 20px;
}
#spotlight .stretcher div.col {
width: 32%!important;
width: 32%;
float: left;
margin-right: 6px;
}
/* END : SPOTLIGHT */
try changing the width of the :
#spotlight li.headtab a {
width: 100px;
and headtab-current
cos from what i see the text is getting pushed out probably because of the text sizes for the theme
An alternative (also easier) you have also is in the head tab where u put your heading u could specify which font and size to use by having something like:
<ul class="headtab-wrapper">
<li class="headtab" id="headtab-1">
<a><font face="Verdana" size="2">Have you been tagged?</font></a>
</li>
that way no matter what the theme is ur text size and style will stay fixed and not get effected by the Themes CSS
Quote from: Aku on October 30, 2006, 12:11:28 AM
try changing the width of the :
#spotlight li.headtab a {
width: 100px;
and headtab-current
cos from what i see the text is getting pushed out probably because of the text sizes for the theme
An alternative (also easier) you have also is in the head tab where u put your heading u could specify which font and size to use by having something like:
<ul class="headtab-wrapper">
<li class="headtab" id="headtab-1">
<a><font face="Verdana" size="2">Have you been tagged?</font></a>
</li>
that way no matter what the theme is ur text size and style will stay fixed and not get effected by the Themes CSS
I tried the second option, but the original code works best for now. Thanks again! :up:
welcome :up:
now im off to beddie :D finally some rest :D
Quote from: Aku on October 30, 2006, 12:30:36 AM
welcome :up:
now im off to beddie :D finally some rest :D
Have a good one. I'm sure I'll have more questions in the morning. :2funny:
Aku, Can I ask? in your "whats new" tab, how did you get "Latest Games In The Arcade" to work?
Thanks Les
lol thats a manual thingie...
plain old html - have to change it by hand - but the people dont know :2funny:
:2funny: nice one
Great Script! :up:
Maybe you can make it so it calls the page from the directory? I.e. like the "include" function in php ;) I think if its possible lol
u can but that would require a rewrite of the original script code so that its compatible with the echo statements
I seee lol ok this one's not for me, maybe in the future :)
no its not very hard to do really
all u would have to do is IF u use echo'';
then ensure there are no ' (single quotes) in the code itself
and if u use echo"";
then no " (double quotes) in the code
thats all :up:
Quote from: Aku on October 29, 2006, 07:52:21 PM
fb that seems to be an issue in IE I still havent been able to figure out myself....ben bangin my head on it several hours in the past lol
gave up finally and decided its a small glitch compared to the effect - plus it seems to go away after a page change - ah well
Thanks Aku. And i was mistaken; Nikika's site is doing it also.
I must've refreshed the browser w/o realizing.
i think it could be caused cos in block format its used inside a seperate head tag
but ill try it out later and check if including in in the template head fixes it or not :up:
I'll try this, this was what I wanted to do with my site - with the auto rotating pictures along with the tabs.
ooohhh u mean that auto rotating "random pics"
lol i thought u meant the flash thingie in the middle.
For the "random pics" thingie look in the block code snippets index, its there are random banner i think
Quote from: Aku on November 01, 2006, 09:06:13 PM
lol i thought u meant the flash thingie in the middle.
That too ;)
But yeah, I'll try this when I get home from work.
Cant get the width to save, when I put it on the Theme AA_New_Damage its too wide.
change the width in the CSS file and after that force refresh ur browser by pressing CTRL F5
sometimes the old css files get cached - so it should fix it righ up
:uglystupid2: i have a question and that is ... why does my first tab open up blank when i open my page ??? i have to refresh the page for it to show my listing in the first tab...
http://unrealhorsemen.com
yea thats a known bug when using the script with IE
havent been able to figure it out unfortunately
Thank you for the response... hopefully it will be figured out....
I found another variation of this script on dynamicdrive.com and im using it on my frontpage. ::)
Check it out if you want to but be warned about the xxx content.. i too was tired of the tab window being empty on page refresh sometimes.. :o
yup here it is an updated one on DD
it was previously using Iframes but now its updated to use DIVs
http://dynamicdrive.com/dynamicindex17/tabcontent.htm
enjoy :up:
Quote from: 4thHorseman on November 10, 2006, 09:03:23 AM
:uglystupid2: i have a question and that is ... why does my first tab open up blank when i open my page ??? i have to refresh the page for it to show my listing in the first tab...
http://unrealhorsemen.com
Quote from: Aku on November 14, 2006, 11:19:12 AM
yea thats a known bug when using the script with IE
havent been able to figure it out unfortunately
yea. i have the same problem. I think it maybe something with the code or something that shouldnt take long to fix.
---
I noticed on your website aku that you have new buttons for this feature.
On http://path-to-peace.net/forum
there are greenish buttons for the yahoo content instead of blueish.
Think you can give me your css code in your css.
?Thanks,
Brianjw
Thanks a bunch to Aku for this awesome easy to add tool that makes our lives easier by not having to display like 100 blocks just to categorize it but now its easier with the Yahoo Style Tabs!
=My Waiting for TP v0.9.7 is expired. When will it come out!?!?=
go here...
Quoteyup here it is an updated one on DD
it was previously using Iframes but now its updated to use DIVs
http://dynamicdrive.com/dynamicindex17/tabcontent.htm
enjoy
enter both field boxes on the site into one scriptbox on TP. then upload the 4 files to your site and edit the 2 lines in the first field box to where you uploaded the files, and it should all work... if you need more help let me know...
http://unrealhorsemen.com
Aku,
I belive this is the code you use on your website because it looks alot like yours. (note: this one doesnt dissapear on your website so you dont have to refresh)
Right Click the following files and click Save Target As:http://brianjwilson.com/forum/tabs/tabcontent.js
http://brianjwilson.com/forum/tabs/tabcontent.css
http://brianjwilson.com/forum/tabs/shadeactive.gif
http://brianjwilson.com/forum/tabs/shade.gif
---Upload them to your forum root into a folder called "tabs"---
Here is the code... (insert the head tags and body tags as shown below into a block for smf)--replace http://yoursite.com with your root.
<head>
<link rel="stylesheet" type="text/css" href="http://your site.com/forum/tabs/tabcontent.css" />
<script type="text/javascript" src="http://yoursite.com/forum/tabs/tabcontent.js">
</script>
</head>
<body>
<ul id="maintab" class="shadetabs">
<li class="selected"><a href="#" rel="tcontent1">Tab 1</a></li>
<li><a href="#" rel="tcontent2">Tab 2</a></li>
<li><a href="#" rel="tcontent3">Tab 3</a></li>
<li><a href="#" rel="tcontent4">Tab 4</a></li>
<li><a href="http://yahoo.com">Link 1</a></li>
</ul>
<div class="tabcontentstyle">
<div id="tcontent1" class="tabcontent">
<p>Content 1</p>
</div>
<div id="tcontent2" class="tabcontent">
<p>Content 2</p>
</div>
<div id="tcontent3" class="tabcontent">
<p>Content 3</p>
</div>
<div id="tcontent4" class="tabcontent">
<p>Content 4</p>
</div>
</div>
<script type="text/javascript">
//Start Tab Content script for UL with id="maintab" Separate multiple ids each with a comma.
initializetabcontent("maintab")
</script>
</body>
There is not content for Link 1 because its a link.
Please change Content # and Tab # to your own name that is the content and button text that will be displayed.
You must use HTML not BBC or not PHP and cannot just type text it must be arround tags like "<p></p>"
---------------------
This script was originally made by Dynamic Drive (http://dynamicdrive.com/dynamicindex17/tabcontent.htm) and was setup by me.
Thanks,
Brianjw :laugh: :coolsmiley:
Quote from: me (to aku)
Aku,
You use this also and it doesnt show up fully through it just shows part of the way it doesnt fill the whole middle of the screen. To see what im talking about look at the 2nd center block at http://brianjwilson.com/forum
brianjw
you can use the shade.gif as titlebg.gif on the rest of your site to get it to mach.. i did that 8)
or visa versa you can use you titlebg.gif insted of that shade.gif ;)
Or you can just make your own little gradient gif to match your forum ;D
Yes that is good, but to center it just do this,
edit the:
tabcontent.css
Quotefind
text-align: center; /*set to left, center, or right to align the menu as desired*/
its about 8 lines down
then edit your text and put <center>,</center> comands in like this,
oh and you don't have to use the head and body tags, it will work fine without.
Quote<head>
<link rel="stylesheet" type="text/css" href="http://your site.com/forum/tabs/tabcontent.css" />
<script type="text/javascript" src="http://yoursite.com/forum/tabs/tabcontent.js">
</script>
</head>
<body>
<center>
<ul id="maintab" class="shadetabs">
<li class="selected"><a href="#" rel="tcontent1">Tab 1</a></li>
<li><a href="#" rel="tcontent2">Tab 2</a></li>
<li><a href="#" rel="tcontent3">Tab 3</a></li>
<li><a href="#" rel="tcontent4">Tab 4</a></li>
<li>Link 1 (http://yahoo.com)</li>
</ul>
<div class="tabcontentstyle">
<div id="tcontent1" class="tabcontent">
<p>Content 1</p>
</div>
<div id="tcontent2" class="tabcontent">
<p>Content 2</p>
</div>
<div id="tcontent3" class="tabcontent">
<p>Content 3</p>
</div>
<div id="tcontent4" class="tabcontent">
<p>Content 4</p>
</div>
</div>
<script type="text/javascript">
//Start Tab Content script for UL with id="maintab" Separate multiple ids each with a comma.
initializetabcontent("maintab")
</script>
</center>
</body>
That will center it in the page.
now to make the center blocks bigger just put your info into a table and make the with what you want "i use 600 pixs wide
Quote<table border="0" width="600" id="table1" cellspacing="0" cellpadding="0">
<p>Content 1</p>
</table>
http://unrealhorsemen.com
You are using BBC in your code 4th Horsemen. It's not the right code.
i think he did that to show people that is where u put your ..url
btw i tried doing with the center tags and it centered it but also centered all the little div parts that i didnt want to be centered more like left or right ;)
how to embed afunction inside it
like umm
ssi_recentTopics();
or
ssi_topTopicsReplies();
how can u add involve another block under any button on this table
i saw that table in that path to peace site each button of the table contian adifferent blick
like
random images
random arcade
...etc
The how-to is posted on the first page.
http://www.tinyportal.net/index.php?topic=7915.msg65068#msg65068
Why would you post for support on your problem in another persons topic that is totally not related?
not releated?
how come ?
this is the code of the table u were talking about
i want support in the this topic we are in
any way i deleted my posts here cuz u find them not related
Samo, there was another post between my last two that was removed.
yah i removed it i though i made an illegal post asking for support and u said that i cant ask for that help here
I said you shouldn't. Your post had nothing to do with this topic, hence the reason I asked why you posted it here. For separate issues you should start another topic in the proper board.
iam so sorry man... i iam not good at english but i understand u now
Its no problem samo. Its understandable when English is not your first language. :)
the border not show in IE...
how can i resolved this...
I read every page and maybe i didnt see it but did the first tab missing get resolved?? this mod is really cool but with the first tab missing its kind of dead in the water.
Also anyway of making the first tab to stay down by default?
anyone?
I haven't personally checked this to be sure that it works but the answer to your question appears to be in this post:
http://www.tinyportal.net/index.php?topic=7915.msg87097#msg87097
I am unable to save the files on the links provided... Being an old post I wonder if those files are even there anymore?
I suggest rather looking at the stand alone demo, all the files are fetched there, just grab them and save.
thanks Bloc, works and looks great just need to figure out how to change the background of the selected cell... You mind taking a look? I don't see what im missing.
.shadetabs{
padding: 3px 0;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: bold 12px Verdana;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}
.shadetabs li{
display: inline;
margin: 0;
}
.shadetabs li a{
text-decoration: none;
margin-right: 3px;
border: 1px solid #778;
color: #000000;
background: white url('http://www.offroad-review.com/new/addon/moo/tab-current-bg.gif') repeat-x top left;; padding-left:7px; padding-right:7px; padding-top:3px; padding-bottom:3px
}
.shadetabs li a:visited{
color: #000000;
}
.shadetabs li a:hover{
text-decoration: underline;
color: #FFFFFF;
}
.shadetabs li.selected{
position: relative;
top: 1px;
}
.shadetabs li.selected a{ /*selected main tab style */
background-image: url('http://www.offroad-review.com/new/Themes/TP_day-of-defeat_111/images/bg2.gif');
border-bottom-color: none;
}
.shadetabs li.selected a:hover{ /*selected main tab style */
text-decoration: none;
}
.tabcontentstyle{ /*style of tab content oontainer*/
border: 1px solid black;
width: 615px;
margin-bottom: 1em;
padding: 10px;
}
.tabcontentstyle2{ /*style of tab content oontainer*/
border: 1px solid black;
width: 200px;
margin-bottom: 1em;
padding: 10px;
}
.tabcontent{
display:none;
}
@media print {
.tabcontent {
display:block!important;
}
}
never mind just got it. thanks for your help!!
ok then lol. :)
alright one more question. This works great now by the way.
Is there a way to make the first tab default dropped down?
Please can you tell me how to integrate PHP scripts into this. for example, the latest member block (http://www.tinyportal.net/index.php?topic=20422.0) ?
I have read the message on the first page however i am kinda confused. Here is my site: http://www.projectpando.com
Thanks for your help in advance. Awaiting your reply....
If you added like a bunch of pictures into each of the individual tabs, will they all load at once (all the images in all the tabs) when the page loads or will it only load the images contained in the tab you clicked?
Forgive me if this question has already been answered. I looked through this topic many times and did a search and I can't seem to figure this out.
Is it possible to add the following code into one of the tabs? It's the code for the SMF Recent Topics block.
global $context, $settings, $options, $scripturl, $txt, $modSettings;
echo '
<table border="0" width="100%" cellspacing="1" cellpadding="4" class="bordercolor">
<tr><td colspan="3" class="titlebg">Recent Topics</td></tr> ';
$what=ssi_recentTopics('5', NULL, 'array');
foreach ($what as $topic)
{
echo '
<tr>
<td class="windowbg" valign="middle">
', $topic['link'];
// Is this topic new? (assuming they are logged in!)
if (!$topic['new'] && $context['user']['is_logged'])
echo '
<a href="', $scripturl, '?topic=', $topic['topic'], '.from', $topic['time'], '#new"><img src="', $settings['images_url'], '/', $context['user']['language'], '/new.gif" alt="', $txt[302], '" border="0" /></a>';
echo '
</td>
<td class="windowbg2" valign="middle" width="20%">
', $topic['poster']['link'], '
</td>
<td class="windowbg2" valign="middle" width="35%">';
if ($settings['images_url'] != $settings['theme_url'] . '/images' || file_exists($settings['theme_dir'] . '/images/icons/last_post.gif'))
echo '
<a href="', $topic['href'], '"><img src="', $settings['images_url'], '/icons/last_post.gif" alt="', $txt[111], '" title="', $txt[111], '" border="0" style="float: right;" /></a>';
echo '
<span class="smalltext">
', $topic['time'], '
</span>
</td>
</tr>';
}
echo '
</table>';
*bump*
I would also be interested in incorporating php snippets into tabs so perhaps it could show recent topics, recent posts, etc etc..
Would require ajax. I don't think this will happen any time soon. Thats why doing it would require a page load.
Using Yahoo UI's tabbed content for retrieving latest 5 topics from board(s) (http://blipy.net)
Hi, no offense to Akubear for reposting his SSI function from here (http://www.tinyportal.net/index.php?topic=7596.0), and also giving me the inspiration for expanding your idea. Reason why I used YUI for reusability for the content tabbing was because I have some more features I'd like to incorporate with it.
Creating the tabbed content (demo at http://blipy.net):
1. Create a phpbox anywhere you want it to be, I used upper block visible only on front page.
2. I didn't want to edit the SSI functions php, so I added it into the same php block together with the following code:
Add this to the rest of the javascript in your theme's index.template.php
echo '<!-- js -->
<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.5.2/build/yahoo-dom-event/yahoo-dom-event.js&2.5.2/build/element/element-beta-min.js&2.5.2/build/connection/connection-min.js&2.5.2/build/tabview/tabview-min.js"></script>
<script type="text/javascript">
var myTabs = new YAHOO.widget.TabView("newreleases");
</script>';
This is the SSI function from Akubear that you can put either into SSI.php or together with your phpbox
// Recent topic list reversed: [board] Subject by Poster Date
function ssi_recentTopicsINC($num_recent = 8, $include_boards = null, $output_method = 'echo')
{
global $context, $settings, $scripturl, $txt, $db_prefix, $ID_MEMBER, $user_info, $modSettings;
$include_boards = empty($include_boards) ? array() : $include_boards;
$stable_icons = array('xx', 'thumbup', 'thumbdown', 'exclamation', 'question', 'lamp', 'smiley', 'angry', 'cheesy', 'grin', 'sad', 'wink', 'moved', 'recycled', 'wireless');
$icon_sources = array();
foreach ($stable_icons as $icon)
$icon_sources[$icon] = 'images_url';
// Find all the posts in distinct topics. Newer ones will have higher IDs.
$request = db_query("
SELECT
m.posterTime, ms.subject, m.ID_TOPIC, m.ID_MEMBER, m.ID_MSG, b.ID_BOARD, b.name AS bName,
IFNULL(mem.realName, m.posterName) AS posterName, " . ($user_info['is_guest'] ? '1 AS isRead, 0 AS new_from' : '
IFNULL(lt.ID_MSG, IFNULL(lmr.ID_MSG, 0)) >= m.ID_MSG_MODIFIED AS isRead,
IFNULL(lt.ID_MSG, IFNULL(lmr.ID_MSG, -1)) + 1 AS new_from') . ", LEFT(m.body, 384) AS body, m.smileysEnabled, m.icon
FROM ({$db_prefix}messages AS m, {$db_prefix}topics AS t, {$db_prefix}boards AS b, {$db_prefix}messages AS ms)
LEFT JOIN {$db_prefix}members AS mem ON (mem.ID_MEMBER = m.ID_MEMBER)" . (!$user_info['is_guest'] ? "
LEFT JOIN {$db_prefix}log_topics AS lt ON (lt.ID_TOPIC = t.ID_TOPIC AND lt.ID_MEMBER = $ID_MEMBER)
LEFT JOIN {$db_prefix}log_mark_read AS lmr ON (lmr.ID_BOARD = b.ID_BOARD AND lmr.ID_MEMBER = $ID_MEMBER)" : '') . "
WHERE t.ID_LAST_MSG >= " . ($modSettings['maxMsgID'] - 35 * min($num_recent, 5)) . "
AND t.ID_LAST_MSG = m.ID_MSG
AND b.ID_BOARD = t.ID_BOARD" . (empty($include_boards) ? '' : "
AND b.ID_BOARD IN (" . implode(', ', $include_boards) . ")") . "
" . ((!empty($modSettings['recycle_enable']) && $modSettings['recycle_board'] > 0) ? "
AND b.ID_BOARD != '$modSettings[recycle_board]'" : '') . "
AND $user_info[query_see_board]
AND ms.ID_MSG = t.ID_FIRST_MSG
ORDER BY t.ID_LAST_MSG DESC
LIMIT $num_recent", __FILE__, __LINE__);
$posts = array();
while ($row = mysql_fetch_assoc($request))
{
$row['body'] = strip_tags(strtr(parse_bbc($row['body'], $row['smileysEnabled'], $row['ID_MSG']), array('<br />' => '
')));
if (strlen($row['body']) > 128)
$row['body'] = substr($row['body'], 0, 128) . '...';
// Censor the subject.
censorText($row['subject']);
censorText($row['body']);
if (empty($modSettings['messageIconChecks_disable']) && !isset($icon_sources[$row['icon']]))
$icon_sources[$row['icon']] = file_exists($settings['theme_dir'] . '/images/post/' . $row['icon'] . '.gif') ? 'images_url' : 'default_images_url';
// Build the array.
$posts[] = array(
'board' => array(
'id' => $row['ID_BOARD'],
'name' => $row['bName'],
'href' => $scripturl . '?board=' . $row['ID_BOARD'] . '.0',
'link' => '<a href="' . $scripturl . '?board=' . $row['ID_BOARD'] . '.0">' . $row['bName'] . '</a>'
),
'topic' => $row['ID_TOPIC'],
'poster' => array(
'id' => $row['ID_MEMBER'],
'name' => $row['posterName'],
'href' => empty($row['ID_MEMBER']) ? '' : $scripturl . '?action=profile;u=' . $row['ID_MEMBER'],
'link' => empty($row['ID_MEMBER']) ? $row['posterName'] : '<a href="' . $scripturl . '?action=profile;u=' . $row['ID_MEMBER'] . '">' . $row['posterName'] . '</a>'
),
'subject' => $row['subject'],
'short_subject' => shorten_subject($row['subject'], 25),
'preview' => $row['body'],
'time' => timeformat($row['posterTime']),
'timestamp' => forum_time(true, $row['posterTime']),
'href' => $scripturl . '?topic=' . $row['ID_TOPIC'] . '.msg' . $row['ID_MSG'] . ';topicseen#new',
'link' => '<a href="' . $scripturl . '?topic=' . $row['ID_TOPIC'] . '.msg' . $row['ID_MSG'] . '#new">' . $row['subject'] . '</a>',
'new' => !empty($row['isRead']),
'new_from' => $row['new_from'],
'icon' => '<img src="' . $settings[$icon_sources[$row['icon']]] . '/post/' . $row['icon'] . '.gif" align="middle" alt="' . $row['icon'] . '" border="0" />',
);
}
mysql_free_result($request);
// Just return it.
if ($output_method != 'echo' || empty($posts))
return $posts;
}
Actual code that will display the tabbed content.
echo '<div id="newreleases" class="yui-navset">
<ul class="yui-nav">
<li class="selected"><a href="#tab1"><em>Releases</em></a></li>
<li><a href="#tab2"><em>Translations</em></a></li>
</ul>
<div class="yui-content">
<div><p><font face="Verdana">';
global $context, $scripturl;
$result=ssi_recentTopicsINC(5,array(3),'return');
foreach($result as $my){
echo ''.$my['link'];
// is this topic new? (assume they are logged in)
if (!$my['new'] && $context['user']['is_logged'])
echo '
<a href="', $scripturl, '?topic=', $my['topic'], '.from', $my['newtime'], '#new"><img src="', $settings['images_url'], '/', $context['user']['language'], '/new.gif" alt="', $txt[302], '" border="0" /></a>';
echo '<hr>';
}
echo '</font><a href="http://feeds.feedburner.com/Blipy-Releases"><img src="http://blipy.net/rss.PNG" border="0" alt="Releases RSS" /></a></p></div>';
echo '<div><p><font face="Verdana">';
global $context, $scripturl;
$result=ssi_recentTopicsINC(5,array(2),'return');
foreach($result as $my){
echo ''.$my['link'];
// is this topic new? (assume they are logged in)
if (!$my['new'] && $context['user']['is_logged'])
echo '
<a href="', $scripturl, '?topic=', $my['topic'], '.from', $my['newtime'], '#new"><img src="', $settings['images_url'], '/', $context['user']['language'], '/new.gif" alt="', $txt[302], '" border="0" /></a>';
echo '<hr>';
}
echo '</font><a href="http://feeds.feedburner.com/Blipy-Translations"><img src="http://blipy.net/rss.PNG" border="0" alt="Translations RSS" /></a></p></div>';
echo '</div></div>';
You might also notice I have XML feeds for both these boards. Many thanks to Oldiesmann from SMF for explaining XML/RSS/RSS2. (http://www.simplemachines.org/community/index.php?topic=25009.0)
Here's a really quick breakdown on how you can create your own RSS/RSS2/Atom feed RIGHT FROM SMF itself!
This is how mine looks like: http://blipy.net/index.php/action,.xml/sa,news/board,3/limit,10/type,rss2
First enable xml feeds creation (Admin -> News and Newsletters -> Settings -> Check "Enable XML/RSS News")
Parameters : Explanation
action,.xml : Switches to the XML output format
sa,news : Feed will only use the latest updated threads from the board you specify
board,3 : This is the board id that will be output, adding more would be like so: 3,4,5,6,7,etc
limit,10 : Number of latest topics to display
type,rss2 : I prefer using RSS2 feed
Oh, please note my above feature fetches the content only when the entire page is loaded and is not ajax-enabled.
Quote from: SteveW on August 12, 2008, 08:14:31 PM
*bump*
I would also be interested in incorporating php snippets into tabs so perhaps it could show recent topics, recent posts, etc etc..
just echo it.
I think doing PHP into this would require Ajax. I don't know anyone here that knows much about ajax. You'll be lucky if this gets done IMO, so just giving you a heads up.
@ marsd
What am I looking for buddy?
The box named "Scanlations" ??
Quote from: IchBinâ,,¢ on August 22, 2008, 08:29:57 PM
I think doing PHP into this would require Ajax. I don't know anyone here that knows much about ajax. You'll be lucky if this gets done IMO, so just giving you a heads up.
No it works without AJAX, I'm creating something out of it by myself using php.
It would be done like this :
echo'
<script language="javascript" type="text/javascript" src="http://yoursite.com/folder/prototype.lite.js"></script>
<script language="javascript" type="text/javascript" src="http://yoursite.com/folder/moo.fx.js"></script>
<script language="javascript" type="text/javascript" src="http://yoursite.com/folder/moo.fx.pack.js"></script>
<script language="javascript" type="text/javascript" src="http://yoursite.com/folder/moo.fx.config.js"></script>
<link href="http://yoursite.com/folder/template_css.css" rel="stylesheet" type="text/css"/>
<div id="spotlight">
<ul class="headtab-wrapper">
<li class="headtab" id="headtab-1">
<a>Your Tab 1</a>
</li>
<li class="headtab" id="headtab-2">
<a>Your Tab 2</a>
</li>
<li class="headtab" id="headtab-3">
<a>Your Tab 3</a>
</li>
<li class="headtab" id="headtab-4">
<a>Your Tab 4</a>
</li>
</ul>
<div class="sl-wrapper">
<div class="stretcher" id="stretcher-1">
<div class="moduletable">
Content 1 Goes here
</div>
</div>
<div class="stretcher" id="stretcher-2">
<div class="moduletable">
Content 2 Goes here
</div>
</div>
<div class="stretcher" id="stretcher-3">
<div class="moduletable">
Content 3 Goes here
</div>
</div>
<div class="stretcher" id="stretcher-4">
<div class="moduletable">
Content 4 Goes here
</div>
</div>
<script language="javascript" type="text/javascript">init();</script>
</div>
</div>';
@ Sabre
Yeah it's that Scanlations box there, I was still tinkering with the styles so the tabs graphics aren't there, but you can see it in action when you click on the Releases / Translations links.
Sure it works if you're echo'ing out some plain old PHP. BUT, what if you put in a call to a function that is located in another file such as recentTopics() ? It has to be processed, which means you have to reload the page or use Ajax to call it. A call like that will work on the default tab that you have set to display when the page loads, but it won't call the code if its not the tab in focus.
Well, actualy that works too.
I'm using boardNews() which is working perfectly :)
even if you put it in a different tab than the one that loads on the original page load?
I believe that's true IchBin, for a ajax enabled tab you'll have to use an ajax js framework to call the function and then parse/display the result from another php script. This won't be the scope of TP anymore though, imo. You can explore Scriptaculous, http://script.aculo.us), moofx is only as what it is - a js effects framework.
I say, it's not worthed the effort if you just want to ajax-enable 1 portion of your site just for frills.
Hi, I want to put a php code in one of the spaces for content. How can I do that?
Did you even read this topic jepot1? Its covered on the last couple pages.
What does it mean when you echo the code?
Take a look at the code on page12 and you'll see how its done, and what it means.
Hi, I use the yahoo tabbed content on my site on various ways: www.nessekrekers.nl
Thanks for the snippet!
The link of this script is broken, does someone else still have it?
It would be damn nice!
Edit:
I just searched my backup hard drive and I found it!
I'll attach it to this post, hurray!