Hiding content on page load

waltd · January 24, 2008, 5:40pm

This is continued from a discussion of FreewayTalk, but the basic problem being explored is hiding content on the page that you wish to later display after the page loads using a timer or other effect.

In my limited testing, there’s no way to use document.write inside of a CSS block to extend a style for JS-enabled browsers. About as close as I can get is the following:

<style type="text/css" media="screen">
#something{
	height:200px;
	border:1px solid #ccc;
	background-color:#eeeeff;
}
</style>
<script type="text/javascript" charset="utf-8">
	function hideIt(itemId){
		if (document.getElementById(itemId)){
			return document.getElementById(itemId).style.display = 'none';
		}
		return;
	}
</script>
</head>

If you are using Prototype, then it’s much easier than that. My example does not allow you to do a whole collection of elements without writing a separate hideIt() call for each one, for example, while Prototype lets you do the following quite neatly and expressively:

$('thing1','thing2','thing3').invoke('hide');

It’s worth while to explore what you can do using Prototype. It’s a very complete developer toolkit that can extend your pages in very surprising and elegant ways.

Walter

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

chuckamuck · January 24, 2008, 6:36pm

Walt, how is applying the Scriptaculous or Prototype functionality you are suggesting going work in FW5? Is the js accessible from within FW5 without having to manually add it in? Just wondering what problems are going to crop up with all these competing js libraries and how to avoid conflicts.

I guess this is a SP question really, and it’s still early in the game since we are in beta…but would like to see it addressed at least before 5 is released.

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

waltd · January 24, 2008, 6:55pm

I have not tested a page that has the SP Scriptaculous action
alongside the Protaculous action, but I imagine they would either get
along fine or beat each other to death with curly-braces!

I’ll try to get some time to work on this, and talk to Simon at SP,
who I believe is the author of the SP action. I think that we can
figure out some way to have these two Actions work together.

But to answer your question, the way these libraries work is quite
abstracted, and if you want to apply some behavior to one object on
the page, and some different behavior to a different object on the
same page, you can do that quite simply and unobtrusively. Everything
is done inside of anonymous functions, which means that you don’t
clutter the object space with a bunch of variables. The effect is
called into being while the function is running, and then disappears
when it’s done. That’s why you can apply the same thing to a bunch of
different objects, and they will each respond as if they are the only
thing on the page.

$$('a.funky').invoke('observe','mouseover','alert("Howdy!");');

That little ditty creates an event listener on each link on your page
that has the classname ‘funky’ applied to it. Rolling over such a
link causes an alert to happen, but could just as easily cause the
link to run away from the mouse or anything else in the Prototype +
Scriptaculous bag-o-tricks.

Walter

On Jan 24, 2008, at 1:36 PM, chuckamuck wrote:

Walt, how is applying the Scriptaculous or Prototype functionality
you are suggesting going work in FW5? Is the js accessible from
within FW5 without having to manually add it in? Just wondering
what problems are going to crop up with all these competing js
libraries and how to avoid conflicts.

I guess this is a SP question really, and it’s still early in the
game since we are in beta…but would like to see it addressed at
least before 5 is released.

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

chuckamuck · January 24, 2008, 8:12pm

Very interesting. However, what I was wondering is if, for example, your carousel action is used and the show/hide action is used on the same page, are two copies of Scriptaculous js going to exist in the page code? Will FW5 weed out the extra copy when it generates the page?

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

waltd · January 24, 2008, 8:20pm

Freeway won’t do this unless Stewart and I get together and work
something out. I set a flag on the page during the publish process
that says “I have added the following libraries to the head of the
page.” I use that so you don’t end up with more than one reference to
prototype.js if you apply the Carousel action to more than one object
on the page, for example. If the SP action could look for that flag
and observe it, then there would be no conflict. If the SP action
does something similar, then I could look out for it as well. The
only issue I can think of is if we are using different base versions
of the libraries. This is a young framework, and things change
rapidly between minor point releases. Often the API can be completely
changed, and a previously working lump of code will stop working or
start erroring.

Walter

On Jan 24, 2008, at 3:12 PM, chuckamuck wrote:

Very interesting. However, what I was wondering is if, for example,
your carousel action is used and the show/hide action is used on
the same page, are two copies of Scriptaculous js going to exist in
the page code? Will FW5 weed out the extra copy when it generates
the page?

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

chuckamuck · January 24, 2008, 9:58pm

Ok, I can see this is a going to have to be a back room discussion with SP.

It just seems like it would make sense for SP to add an option to include the js in the page even when not using their show/hide action. This way it would allow access to the library and still use third party scripting. Would make your life easier I would think, but as you say it depends on how much of the Sricptaculous library, or perhaps which version they are using.

Starting to sound like a kettle of fish.

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

paulvw · January 25, 2008, 1:53pm

I haven’t followed this whole discussion yet.
In regards to loading things on the page I have been using the Suite action of Weaver which gives you options to set any kind of time to an item: “Effect on Load”. Is this what you guys are talking about?

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

waltd · January 25, 2008, 2:02pm

Yes, and I believe that any of the visual effects you can do in Prototype/Scriptaculous, you can do in MooTools. Weaver’s Action suite is well suited to applying these to your Freeway page. I recommend it highly.

But this brings up another issue, with respect to dueling effects packages. I don’t yet know how MooTools and Prototype can coexist peacefully, so if you are using the Freeway 5 beta, you can’t use any of the Prototype-driven stuff like the new Show/Hide layers on the same page.

Long ago, there used to be a version of Moo that worked with Prototype, sort of as a replacement for Scriptaculous. I don’t know if it’s still being developed, as MooTools changed course to become a monolithic effects framework.

Walter

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

WebWorker · January 25, 2008, 2:47pm

I found this PHP script to detect if Javascript is on. would this help to just load, a different page, or modified code of a page without display - none?

<?php // jstest.php // javascript detector for php. ideal to be placed in a script used commonly through a site. session_start(); // check that the test hasn't already been done // test will be repeated if either it's not been done before, or if javascript is off to check // if a user has turned it on during a session. if (!isset($_SESSION['js_on']) || $_SESSION['js_on'] == false) { // check for post values - if we have post values, it means the form was submitted by javascript. if (isset($_POST['jstest'])) { $_SESSION['js_on'] = true; } else { // first time - construct a form and submit it with javascript echo ''; echo ''; echo ''; echo ''; // if we get here, it means javascript is OFF $_SESSION['js_on'] = false; } } // rest of script goes here.... // // // // etc // // // echo "javascript is ".($_SESSION['js_on'] ? "on":"off")."
"; echo 'normal script here'; ?>

You can’t detect JavaScript with anything but JavaScript. But you can design your page to degrade gracefully.

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

waltd · January 25, 2008, 3:16pm

Yes, but redirecting like this will get you marked down in Google and
other search engines. It’s a tricky balancing act.

The best approach I have ever found is to use JavaScript to detect
JavaScript. What this means in practical terms is that you should
follow the Unobtrusive Manifesto: First, build a universally usable
Web page, with no script in it. Second, decorate your page using
JavaScript, without adding script into individual page elements.

To do this, you attach “event listeners” to objects on the page. When
the event happens, the effect is fired off.

That’s what this structure does (using Prototype to make things
cleaner):

Event.observe(window,'load',function(){
	//when the window loads,
	//hide the stuff you want to animate
	$('thing1').hide();
	$('thing2').hide();
	//set a timer to make one thing appear
	window.setTimeout("Effect.Appear('thing1',2000);
	//create a button to make another thing appear
	$('thing3').observe('click',function(){
		$('thing2').show();
	});
});

So for those who have no script, all they see is the “normal” page.
Anyone with script gets the all-singing, all-dancing visual effect.
Nothing is hidden from anyone.

Walter

On Jan 25, 2008, at 9:47 AM, dwn wrote:

I found this PHP script to detect if Javascript is on. would this
help to just load, a different page, or modified code of a page
without display - none?
<?php // jstest.php // javascript detector for php. ideal to be placed in a script used commonly through a site. session_start(); // check that the test hasn't already been done // test will be repeated if either it's not been done before, or if javascript is off to check // if a user has turned it on during a session. if (!isset($_SESSION['js_on']) || $_SESSION['js_on'] == false) { // check for post values - if we have post values, it means the form was submitted by javascript. if (isset($_POST['jstest'])) { $_SESSION['js_on'] = true; } else { // first time - construct a form and submit it with javascript echo ''; echo ''; echo ''; echo ''; // if we get here, it means javascript is OFF $_SESSION['js_on'] = false; } } // rest of script goes here.... // // // // etc // // // echo "javascript is ".($_SESSION['js_on'] ? "on":"off")."
"; echo 'normal script here'; ?>

You can’t detect JavaScript with anything but JavaScript. But you
can design your page to degrade gracefully.

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

WebWorker · January 25, 2008, 3:29pm

Right I understand. Or will do with a good read, and some quite time to study.

Thanks

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Account · January 25, 2008, 3:41pm

If you want to learn what’s possible with Prototype and scripty this is a worthwhile investment for establishing a firm understanding.

<http://pragprog.com/titles/cppsu>

Todd

On Jan 25, 2008, at 9:29 AM, dwn wrote:

Right I understand. Or will do with a good read, and some quite time to study.

Weaver · January 29, 2008, 5:12pm

This has been mentioned elsewhere, but any framework has to load and be attached to some window event (onLoad, onDomReady, etc…) before it can modify the page. This leads to the page being loaded as the html dictates, then it is modified when the event is fired; evidenced by a content flash.

This script has proven successful for me (the createStyleRule() function)
http://www.bobbyvandersluis.com/articles/dynamicCSS.php

It runs ‘inline’ as the page loads. The script could easily be modified to use Proto browser properties (instead of the browser sniffing routine used inside the function)

RE: Mootools vs. Proto Compatibility:
None of the Frameworks really get along with eachother (mootools, proto, jquery, etc…). And, as each matures, the differences change with each revision.

If possible, I would like to insert myself into the conversations about the JS framework situation. If a ‘built-in’ option is not in the pipeline, then a convention should be determined/dictated so that anyone, anywhere can tie into the js model; determine the library used, the version, tag location of the script. Some of the other things that would be nice: presence/location of loader (onLoad, onDomReady) functions to simply dump into these and help keep the page a bit cleaner/leaner.

I am willing to help on an action-side solution that can be used to probe and return the above information. I have some ideas in this regard, but are limited at present with some hurdles that I have yet to investigate and overcome. Ideally this is a function-set that is tied into passively by actions in the Action folder.

Since the changes between the frameworks are typically resolved with syntax tweaks, a loop inside our Actions could be developed to poll and output the correct code depending on the library/version used. This could be tied into the fwApplyError() routine to also return an message like: ‘Action not compatible with Prototype framework’ I would love the ability to add statements to the ‘action-appliesto’ tag right in the coding.

There are few other ideas in my head (more individual action solutions), but they are less-than-ideal when compared to any of the centralized choices.

If we can work out this whole library situation, then the actions can become even more modular, as we won’t have to reproduce other’s actions to conform to our ideal JS environment. Ideally the centralized solution is extended to all types of files. Extensible and flexible by users, it could become a whole structure behind the scenes.

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

WebWorker · February 2, 2008, 10:19am

Just a thought, but if content is hidden on a page, e.g. you load/show content that fades in above another.

How does that effect the search engines? i.e. would the hidden content below, be a reason for black listing?

(Is this seen as a trick for adding searchable content below, that is not matched by the users view?)

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

waltd · February 2, 2008, 3:38pm

When the content is hidden, it is hidden using JavaScript. Search
engines don’t “do” JavaScript, so they see everything. They don’t
care if everything is stacked on top of everything else, either –
they are just reading the code.

Walter

On Feb 2, 2008, at 5:19 AM, dwn wrote:

Just a thought, but if content is hidden on a page, e.g. you load/
show content that fades in above another.

How does that effect the search engines? i.e. would the hidden
content below, be a reason for black listing?

(Is this seen as a trick for adding searchable content below, that
is not matched by the users view?)

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options