Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.5a is a product of Lussumo. More Information: Documentation, Community Support.
-
I love how this site shows off their articles "http://www.iht.com/articles/2006/02/06/news/islam.php" how can i hide text and reveal it when needed like they have. Thanks in advance.
-
Just copy their JavaScript file and make it work for your layout. Ain't the internet great?
(it appears http://www.iht.com/js/articlelayout.js is the JS file you'll want to download and modify) -
- CommentAuthorclimaxdesigns
- CommentTimeFeb 7th 2006
dont' do that btalbert, thats called stealing...
here is a simple hide reveal function in JS
function toggle(id){
if(document.getElementById){
var el = document.getElementById(id);
el.style.display = (el.style.display == 'none') ? 'block' : 'none';
}
}
that should get you started, if you dont know anything about js look up ternary conditional. -
OK allow me to rephrase...
One of the great things about the internet is the ability to (usually) view the source code and learn how a page was created. At the same time, this also creates a big problem when a page is created incorrectly and a bunch of people copy/use/learn from the wrong code. At first glance, whoever wrote that JS @ IHT's website seems to know what they're doing, so it looks like a safe script to learn from.
If you view IHT's articles and resize the browser window, you'll see their pretty cool article text JavaScript at work (it's more than just show and hide). I'd explain the effect but you can check it out yourself a lot faster.
I could also explain how to accomplish that effect step-by-step. However, that'd take a lot of time and the JS file at IHT's site has some decent documentation in its comments that helps you understand what each function does. So if you'd like the same effect, I'd recommend viewing that JS and LEARNING from it, then tweaking it to fit the needs of your site. If there are any specific parts of that script that are confusing to you, feel free to ask about them here and the forum members (including myself) would be happy to help you. -
Robert Nyman has written his own version of the IHT script
Demo Here: http://robertnyman.com/roblab/javascript-columns.htm
More Info Here: http://robertnyman.com/roblab/javascript.htm -
Thanks jhonRiv, I found this useful for my project too. This is new to me. "DYNAMIC" thats what im talking about!
-
ONe way to do it is to cut the story into n paragraphs per page. Put the paragraphs in a pages array, and navigate that with previews and next.
-
I have two problems with climaxdesigns' suggested hide reveal function (up this page).
1) The first time you click it after you load the page it does nothing, and then it works fine.
2) In Firefox (not in IE6), the actual bullet is not revealed.
Here is the code:
<ul>
<li><a href="#" onclick="javascript:var hideObject=document.getElementById('hidvers');
hideObject.style.display=(hideObject.style.display=='none') ? 'block' : 'none';">
sometext</a></li>
<li id="hidvers">sometext</li>
</ul>
It's inline because I only use it once.
Another thing, though this is off topic, what is so good about doing rollovers in CSS instead of JavaScript? JavaScript rollovers are shorter, and if someone has disabled JavaScript they probably don't want annoying stuff like rollovers. -
The reason it doesn't work on first click is relatively simple.. even though you've defined hidvers with display="none" as far as the javascript function is concerned (and for that matter the DOM) style.display is not set, that is.. until you set it.
for example when you first load the page and run the function "hideObject.style.display" actually equates to null. You'd have to use element.getAttribute("style") or some such thereof to get the infomation that's been loaded via CSS.. which honestly isn't worth it, and since the previous function actually works the second click we know that we don't need to. That being said here's the fix.. If you've hidden the element via css change this line to:
el.style.display = (el.style.display == 'block') ? 'none' : 'block';
that way a "null" result will return false (just like a "none" result) and therefore the secondary display setting will be used which in this case is "block"
As for your CSS rollover question.. it's all about graceful degradation. Why use javascript to accomplish something that's just as easily set by CSS? I mean, just because someone disables javascript doesn't mean they want a website to look any different, and with certain styles subtle rollovers make that difference.
And really what's easier than:
a {background:url(image) 0 0 no-repeat}
a:hover{background:url(image) 0 -38px no-repeat}
{ loading a single images seperated by multiple states ie: http://erraticdesign.com/reloaded/images/pdf.gif - saves preloading the secondary state images }
1 to 9 of 9