/    Sign up×
Community /Pin to ProfileBookmark

Using JS to switch page content

Copy linkTweet thisAlerts:
Jun 15.2011

im trying to have two links at the top of a page

one is FEED and the other is INFO

when the page opens it should be on feed, and if i click info it switches to info and the feed button becomes available to click again, at this time hte page content should switch as well.

ive been reading on w3 but cant piece this together, if anybody could help that would be great

to post a comment
JavaScript

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@JMRKERJun 15.2011 — Sounds like a simple show/hide scenario.

Add to the <div> areas with the information you wish to feed to the display!

<i>
</i>&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt; Untitled &lt;/title&gt;
&lt;script type="text/javascript"&gt;
function setFEED() {
document.getElementById('FEED').style.display = 'block';
document.getElementById('INFO').style.display = 'none';
}
function setINFO() {
document.getElementById('INFO').style.display = 'block';
document.getElementById('FEED').style.display = 'none';
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;a href="javascript:void(0)" onclick="setFEED()"&gt;FEED&lt;/a&gt;
&lt;a href="javascript:void(0)" onclick="setINFO()"&gt;INFO&lt;/a&gt;
&lt;p&gt;
&lt;div id="FEED" style="display:block"&gt;FEED display&lt;/div&gt;
&lt;div id="INFO" style="display:none"&gt;INFO display&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@JimmyBanksauthorJun 15.2011 — hmm it doesnt seem to be working,

the links appear to be standard links that arent changing when clicked and its stuck on FEED display no matter which link is being clicked.


i am using smarty engine, but i have the <head> section within {literal}{/literal} tags so smarty is being ignored, and for the <body></body> section doesnt matter whether or not its in the literal tags, it still acts as explained above
Copy linkTweet thisAlerts:
@JMRKERJun 16.2011 — Well, I have no knowledge of "smarty engine", so I can not help you there. ?

Perhaps other forum members know what you are talking about. :rolleyes:

The script provided works as you specified. ?

Have you tried it just by saving to an .html file and calling it from your browser?

Try running it independent of your 'smarty engine'. ?
Copy linkTweet thisAlerts:
@JimmyBanksauthorJun 16.2011 — Lol no worries, really it is just a PHP template that I like, like I said though using literal tags it is ignored. http://www.smarty.net/

I have the head section in a seperate header file and using PHP which calls the HTML in .Tpl files. Should make no difference however, but ill try the seperate HTML file to see it function as you suggested.

I'm out watching the NHL Stanley cup finals but ill give it a test in a plain HTML file when I get home!
Copy linkTweet thisAlerts:
@JimmyBanksauthorJun 16.2011 — Well, I have no knowledge of "smarty engine", so I can not help you there. ?

Perhaps other forum members know what you are talking about. :rolleyes:

The script provided works as you specified. ?

Have you tried it just by saving to an .html file and calling it from your browser?

Try running it independent of your 'smarty engine'. ?[/QUOTE]

:facepalm* the problem was that i didnt add in the </script>, embarassing.

thanks!
Copy linkTweet thisAlerts:
@JMRKERJun 16.2011 — :facepalm* the problem was that i didnt add in the </script>, embarassing.

thanks![/QUOTE]

You're most welcome. We all make silly mistakes.

Good Luck!

?
×

Success!

Help @JimmyBanks spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.2,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,
)...