Thomas

Navigation

Skip navigation.

Search

Site navigation

Email conversation

FromThomas
ToMe
Subjectproblem using swapstyle.js
Date15 September 2006 21:58
Mark, 

First, thank you for the various Javascripts.  I am new to your site and
I am using the collapsible list one with great success.  I use MS
FrontPage (its what I can afford) and the collapsible list code it
generates does not work on several browsers, including certain
configurations of IE.  If you would like to see my most complex web page
where I use the collapsible script, you can find it here:
[URL]

I am now in the process of incorporating your style switcher script and
have run into an issue that I hope you can help me with.  I have been
able to re-create the issue on your web site so I will use your site as
a reference.  But first, the required background information.  My
testing of the style switcher script was conducted using Opera 9.01,
Netscape 8.1 with rendering engine set to Firefox and IE 6.0.2900.  All
testing was performed on a Windows XP based desktop.  My web site's
intended audience is photographers who use Adobe Photoshop (full
version) as their digital darkroom.  Given this, I assume my target
audience is Windows and Mac users.  Unfortunately, I do not have a Mac
to test with (financial reasons).

Now for the issue.

Using Opera, go to your site and select any style, other than Moosified.
Click on the navigational links to go to different pages.  You should be
able to observe that the page is first displayed using the default style
sheet (Moosified) and redisplayed using the selected style sheet.

Have you been able to come up with a solution to this issue?  If not, I
would like to describe my solution and get your feedback as to whether
or not it is viable.

Solution.

I will describe the solution in pseudo code.  Afterwards, there is a
link to two working pages where you can view the source code.

* As you describe in your instructions, define the swapstyle.js file and
style sheets to the page.
* However, do not code the onload or onunload events in the <body> tag.
* Right after the <body> tag, use javascript to set the visibility of
the page to hidden, and then execute the useStyleAgain() function.
* Continue with the rest of the html.
* For the form that contains the drop down box where the style is
selected, give it an id and use inline style to set its visibility to
hidden (do not use a class to set the visibility).
* For each of the options in the drop down box, execute a function.  The
function should execute the changeStyle() function and then the
rememberStyle() function.
* Immediately before the </body> tag, use javascript to set the
visibility of the form to visible and then set the visibility of the
page to visible.

You can see the code at [URL].
There is a link to a page 2 that is used to test the logic.

The advantages of this solution are.
* it seems to solve the issue.
* for those who are not allowing javascript while browsing, the page is
never hidden to begin with but the form containing the drop down box is
hidden.  This prevents them from trying to use a feature that their
environment won't allow to work.

The disadvantages are.
* I don't know if this solution is a hack or clean code.
* I don't know if this solution will work on a Mac
* I don't know if this solution will cause search engine spiders to get
confused because it hides the page first thing.

If you have a better solution, I would be very interested in learning
it.  If not, I would appreciate your opinion of the solution described
here.  Also, if you have the personal bandwidth, I would like to know if
the [URL] pages work on a Mac.

Again, thank you and as you have heard from other, I appreciate your
site and the effort you have given to all of us.


Thomas
FromMe
ToThomas
SubjectRe: problem using swapstyle.js
Date15 September 2006 21:42
Thomas,

> You should be
> able to observe that the page is first displayed using the default style
> sheet (Moosified) and redisplayed using the selected style sheet.

Yep. This is because for ease of use (the scripts are used by a lot of users
with little knowledge of what they are doing, so it is better that getting
it to work is as easy as possible), I use onload as the trigger. Personally,
I do not mind that effect, so I will not change it on my site.

> Have you been able to come up with a solution to this issue?

Sure, you can either call the script before the </body> tag, as you
suggested, or perhaps you can run it earlier. You may want to run it earlier
on big pages, where the browser may begin to display it before the page has
completed parsing.

It can be run as soon as all your stylesheets have been written. So if you
(correctly) put all your stylesheets in the HEAD element, you can run the
script at the end of the head. That way it will change before any of the
page content is rendered at all.


Mark 'Tarquin' Wilton-Jones - author of http://www.howtocreate.co.uk/
FromThomas
ToMe
Subjectproblem using swapstyle.js
Date16 September 2006 15:57
Thanks Mark. I will try putting the reading of the cookie before the
</head> tag and after the references to the style sheets.  I think this
will give me cleaner code.

Thomas
FromThomas
ToMe
Subjectsuggestion regarding listCollapse.js
Date17 September 2006 15:56
Mark,

I would like to suggest an enhancement to your listCollapse script.  Can
there be a function that will expand all collapsible lists on a page
and, likewise, have a function that will collapse all collapsible lists
on a page?  On my web page, I would like to have two links, such as
'Expand All' and 'Collapse All', that a visitor can click to expand and
collapse all the lists on a page.

The reason I am requesting this is because I have one web page that has
28 collapsible lists on it.  I would like for my web site visitors to be
able to expand all the lists for printing and then collapse them
afterwards.

If you want to see the web page I would like this feature on, it is at
the following url.

[URL]

As you can see, I have many lists on this page and I would like the
ability for my visitors to expand all lists, print the page, and then
collapse them again.

Thank you in advance for considering this request.

By the way, can you add me to your notification emails for the following
scripts: listCollapse, swapstyle, cookie.

Thank you,
Thomas

p.s. Is there a technical reason all the lists in a nest hiearchry have
to be the same?  I had a mixture of <ol> and <ul> lists on my page and
had to convert all my <ul> to <ol> to get the script to work.
FromMe
ToThomas
SubjectRe: suggestion regarding listCollapse.js
Date17 September 2006 19:19
Thomas,

> Can there be a function that will expand all collapsible lists

http://www.howtocreate.co.uk/emails/JayLong.html

> By the way, can you add me to your notification emails for the following
> scripts: listCollapse, swapstyle, cookie.

Thanks for the reminder. I should have removed that from the terms of use
page. I no longer use a mailing list. Please subscribe to the site RSS feed
- it will contain details of any important script updates.
http://www.howtocreate.co.uk/howtocreate.xml

> p.s. Is there a technical reason all the lists in a nest hiearchry have
> to be the same?  I had a mixture of <ol> and <ul> lists on my page and
> had to convert all my <ul> to <ol> to get the script to work.

Yes, there is a reason. It uses the tag name of the targetted element to
work out what other elements to search for and collapse.
FromThomas
ToMe
SubjectRe: suggestion regarding listCollapse.js
Date19 September 2006 04:00
Mark,

Thank you for the information.  Using the information in the email you
sent Jay, I am able to get the expand code to work.  Unfortunately, I am
unable to get the collapse code to work. Below is what I am trying to
do.

In a .js file, I have the following function.  List1 and List2 are the
actual id= of the lists.  Dummy means nothing and I assume I needed
something there since the email had 'rubbish'.

function fCollapseScanWorkflow()
{
	stateToFromStr('List1','dummy');
	stateToFromStr('List2','dummy');
	         etc.
};

In my html, I have the following.  I am using an <a> tag because I wish
the text to appear and behave as a link.  (p.s. I tried using href="#",
but Opera refreshes the page, which on the Expand All link, collapses
all the lists again.)

<a href="#nothing" onClick="fCollapseScanWorkflow()">Collapse All</a>

Whatever assistance you can render, I would appreciate.

As always, thank you.

Thomas
FromMe
ToThomas
SubjectRe: suggestion regarding listCollapse.js
Date23 September 2006 13:24
Thomas,

> Unfortunately, I am
> unable to get the collapse code to work. Below is what I am trying to
> do.

It's my fault. It seems that when I sent that email to Jay, I had forgotten
how the stateToFromStr function worked. It can only expand branches, not
collapse them (otherwise it would make a mess with auto-collapsing lists).

So it seems the solution would be to use a similar function to the
expandAll, but rewritten to do collapsing:

function collapseAll(oElID) {
 if(!document.getElementsByTagName||!document.childNodes) { return; }
 var oEl = document.getElementById(oElID);
 var oT = oEl.tagName;
 var oLinks = oEl.getElementsByTagName('a');
 for( var i = 0, oCUL; i < oLinks.length; i++ ) {
  if( oLinks[i].onclick ) {
   oCUL = oLinks[i].parentNode.getElementsByTagName( oT )[0];
   if( oCUL && oCUL.style.display != 'none' ) {
    oLinks[i].onclick();
   }
  }
 }
}
FromThomas
ToMe
SubjectMark, Thank you ...
Date23 September 2006 16:41
again for the code.  I have successfully added it to my web pages.  I am
looking forward to being able to deploy it to my web server once the
rest of my enhancements are complete.

Thomas
FromThomas
ToMe
SubjectMark, Thank you ...
Date6 October 2006 03:53
Mark,

My site makes heavy use of tables for layout and I have been trying to
rewrite it to use the <div> tag instead.  I have spent days trying to
get a layout to work in IE (it works fine in Firefox and Opera) to no
avail.  Your
http://www.howtocreate.co.uk/wrongWithIE/?chapter=Float+Model page
explained why I was not succeeding.  Therefore, thank you (I wish I read
it sooner).

But there is one <div> issue I am having that I hope you can help me
with.  I was hoping I could figure this out myself because I am sure the
answer is obvious, but it eludes me.  Simply put, I am trying to center
a table (used for columnar data) using CSS.  I can easily do it using
<div> and the align property, but it is my understanding that align has
been deprecated.

Copied below is the code.  With a DOCTYPE of Transitional, the results
are as follows.

IE - Both tables are centered on the page and the text is centered in
the tables.

Opera and Firefox - The top table is left aligned, the bottom table is
centered on the page and the text is centered in both tables.

My intention is to have both tables centered on the page.  Can you
explain to me how to do this using CSS?

Thank you,
Thomas

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"><html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1252">
<title></title>
<style type="text/css">
body { margin: 0; background-color: #FFFFFF; }
div { margin: 0; }

div.center { position: relative;
  text-align: center; }
</style>
</head>
<body>

<div class="center">
<table width="50%" border="2px" cellspacing="0" cellpadding="0">
	<tr>
		<td>123</td>
	</tr>
	<tr>
		<td>456</td>
	</tr>
</table>
</div>

<div align="center">
<table width="50%" border="2px" cellspacing="0" cellpadding="0">
	<tr>
		<td>123</td>
	</tr>
	<tr>
		<td>456</td>
	</tr>
</table>
</div>
</body>
</html>
FromMe
ToThomas
SubjectRe: suggestion regarding listCollapse.js
Date6 October 2006 10:41
Thomas,

> IE - Both tables are centered on the page and the text is centered in
> the tables.
>
> Opera and Firefox - The top table is left aligned, the bottom table is
> centered on the page and the text is centered in both tables.

Basically you need to apply "margin: 0 auto;" to the table, and not
text-align (unless you actually wanted the text to be centred in the table).
Text-align is for text, not for the element itself. IE uses it for both.
<div align="center"> is a mishmash of auto margins and text-align, with
several inheritance quirks.

Make sure your DOCTYPE triggers IE's strict mode - the one you are using
right now should be fine.

Note that IE has some problems if you use XML declarations, but you aren't,
so don't worry.
http://www.howtocreate.co.uk/wrongWithIE/?chapter=%2A%3Aauto%3B

Your DIVs are redundant in your example, by the way. You can style the
tables directly.
This site was created by Mark "Tarquin" Wilton-Jones.
Don't click this link unless you want to be banned from our site.