PDA

View Full Version : Switch Content - problem in Mozilla based browsers



TheDoc
08-18-2005, 02:55 PM
Script: Switch Content Script
url: http://www.dynamicdrive.com/dynamicindex17/switchcontent.htm

Hi,

There is a problem with the Switch Content Script when using it in a Mozilla based browser. I don't know if the problem is with the script or with the Mozilla code itself. In Mozilla browsers (Mozilla, Firefox, Netscape, etc.), when you contract an expanded section, the size of the page does not contract with the contracted section. This is most noticeable when contracting a very large section. A large blank area appears at the bottom of the page. However, this problem does not appear in Internet Explorer or Opera. Is there anyway to fix this problem? I noticed it on a website I am developing. I also noticed it on this page here at Dynamic Drives:

http://www.dynamicdrive.com/dynamicindex17/switchcontent.htm

Look at the bottom of the page and note the amount of white space at the very bottom. Try expanding "What is Javascript" and then contracting it. In a Mozilla based browser, there is now a larger amount of white space at the bottom of the screen. If you expand something else that is smaller and then contract it, the amount of white space at the bottom of the page is now smaller but still larger than the original amount of white space. For some reason, the page is not being resized properly during a contraction. When expanding and contract a huge section, this is painfully noticeable.

Thanks

jemila
08-18-2005, 03:09 PM
yup.. i have this also.. and ontop of this problem i have another one. ive made a post of it.

basicly my dynamic fx slide out menu. wont slide back in if my mouse goes from the menu to the iframe i use. i have to take my mouse off the iframe and the menu for the onmouseout to occur and my menu to slide back in.

likewise. ie doesn't do this and all works normaly.

jemila
08-19-2005, 12:34 AM
onmouseover="parent.moveBack()"

my problem was solved by including a mouseover command to the iframe as well.. not just the menu. kina doens't make sence coding wise becaues doesn't fix the problem just creates a solution. but i am very happy

as for the resize thing. its resizes the frame if its a local page. but it isn't resizing the original window as well. i think this is related to my problem because i belive firefox is treating iframes as a seperate window not a imbeded window

sooo a resize comand will have to be added to both the page the iframe is in and the iframe because firefox is keeping them seperate somehow.

not so with ie

TheDoc
08-19-2005, 01:37 AM
So, how do you do the resize command?

jscheuer1
08-19-2005, 02:55 AM
I've come across this before but, I forget how it was resolved. I do remember fixing it though. If you have a link to your page that has this problem, it will make finding a solution easier:

.

TheDoc
08-19-2005, 09:49 AM
Well, I did provide one. It is clearly seen on:

http://www.dynamicdrive.com/dynamicindex17/switchcontent.htm

This makes me believe it will happen on any page with the Switch Content Script.

Here is my page:
http://fcconline.hmcltd.net

To see what kinds of extremes this can take, try opening and closing a news thread way at the bottom entitled: "HMC Introduces TeleFusion service". The green bar at the bottom is always suppose to be at the very bottom. In Mozilla based browsers, it jumps up the page with white space below it when opening and closing a Switch Content item.

Thank you.

mwinter
08-19-2005, 10:50 AM
In Mozilla browsers (Mozilla, Firefox, Netscape, etc.), when you contract an expanded section, the size of the page does not contract with the contracted section. [...] I noticed it on a website I am developing. I also noticed it on this page here at Dynamic Drives:

http://www.dynamicdrive.com/dynamicindex17/switchcontent.htmI don't see any problems. Not with my recent version of Firefox, nor with older versions of Mozilla (I have minor versions 1.3 through 1.7).

Mike

TheDoc
08-19-2005, 11:29 AM
I don't see any problems. Not with my recent version of Firefox, nor with older versions of Mozilla (I have minor versions 1.3 through 1.7).

Mike
Try it on the site I posted. Make sure to look at the bottom of the page and note where the green bar is at the bottom. Then open a story. Then close it. Then look at the green bar at the bottom again. It should now have white space after it.

jscheuer1
08-19-2005, 04:53 PM
I see it. Mike, try scrolling his page down to the bottom both before and after opening and closing a story. The white space gets added after the green bar.

TheDoc & Mike, it is noticeable on the demo page here at DD only if you are really, really looking for it as it is simply not that much extra space.

Anyways, you have another problem. Id's that begin with numbers and that are unquoted. This most likely is unrelated but, using id's that begin with numbers ex:

<span id=2005072901

is a bad practice as many browsers will not recognize them as id's for pure style purposes. It may even be a part of the problem. Is there any way that the id could be say,

<span id="sc2005072901"

I'll get back to you on possible solutions. It noticed there was a height="100%" on the page. That should be unnecessary in most cases and could be part of the problem.

TheDoc
08-19-2005, 05:54 PM
The fact that it shows up on this site's example should mean that it isn't unique to anything related to my page. Because of the way the div's are working, the 100% height is needed for Internet Explorer to display properly. I tried removing just to see what happens; and, as far as the page not contracting when contracting a switch content area in a Mozilla browser, it didn't make a difference. I will see what I can do with the ID number with quotation marks and starting with a letter instead of a number. Really, I don't think that is the problem if I can replicate the effect on this site's example.

TheDoc
08-19-2005, 06:06 PM
OK, on a test page ( http://fcconline.hmcltd.net/index2.asp ), I changed the id so that it is quoted and starts with a letter. It didn't make a difference.

jscheuer1
08-19-2005, 06:33 PM
Thanks, TheDoc, for going ahead and testing those things. I hadn't really meant those ideas to be a solution. As I mentioned in my previous post in this thread, I have yet to start work on that. I just noticed them and they struck me as wrong (in the case of the id's) and unusual (in the case of the height). I only thought they might be a part of the problem, not the solution. I thought I made that clear.

Getting back to when I worked on this problem before. It had not been established at that time that the demo also suffered from it but, that was simply because no one bothered to check. So, I am now inclined to think this is a true bug in the script. I also recall that this was one of the more difficult cases I have dealt with here in the forums. So, I am going to go over any files I may have saved from that time and check the archives for the thread in which this was dealt with. Once I find something, or work out a new solution if nothing seems applicable, I'll get back to you. Please be patient but, feel free to develop your own solution. If you come up with one, I'd love to see it.

TheDoc
08-19-2005, 06:36 PM
Thanks for your help John. Sorry if I assumed too much about trying to fix the problem with your suggestions. I do appreciate your assistance. I wonder if the problem is a bug in Mozilla/Firefox and can't be fixed until they fix it.

jscheuer1
08-19-2005, 09:10 PM
I came up empty as far as finding a previous solution goes. I've come up with a new one though. I noticed that if you expanded and contracted a smaller span, the extra space became less. So I set up a dummy span, like so:

. . .
<b>So make sure to check back often!</b><br><br><table border='0' style='border-collapse: collapse' width='100%' cellpadding='0' cellspacing='0'><tr><td width='100%' align='right'><font face='Arial' size='1'>Posted By: </font><b><font face='Times New Roman' size='2' color='CE0000'>Jeff Franklin</b></font></td></tr></table>


</span>
<span id="dummy" style="display:none">&nbsp;</span> . . .right after the last item's span in the markup. Then, in the code for the script, in the expandcontent function, I added some code (highlighted red):

function expandcontent(curobj, cid){
if (!document.all&&!window.opera&&document.getElementById)
document.getElementById('dummy').style.display="block"
var spantags=curobj.getElementsByTagName("SPAN")
var showstateobj=getElementbyClass(spantags, "showstate")
if (ccollect.length>0){
if (collapseprevious=="yes")
contractcontent(cid)
document.getElementById(cid).style.display=(document.getElementById(cid).style.display!="block")? "block" : "none"
if (showstateobj.length>0){ //if "showstate" span exists in header
if (collapseprevious=="no")
showstateobj[0].innerHTML=(document.getElementById(cid).style.display=="block")? contractsymbol : expandsymbol
else
revivestatus()
}
}
if (!document.all&&!window.opera&&document.getElementById)
setTimeout("document.getElementById('dummy').style.display='none'",0)
}I'm not sure why the time out is needed but, it won't work without it. Even though it is set to zero which should be the same as no time out, at least that makes it very smooth, unnoticeable really. The if statements prevent these shenanigans from doing anything in IE or Opera.

mwinter
08-19-2005, 09:46 PM
I see it.I see it on the OP's page, but I was commenting on the demo page.


TheDoc & Mike, it is noticeable on the demo page here at DD only if you are really, really looking for it as it is simply not that much extra space.I took screenshots, before and after, and the alignment at the bottom is pixel-perfect.


Id's that begin with numbers and that are unquoted.Unquoted is fine in this case, though it's generally better to quote all attribute values unless you know the quoting rules. An id attribute value cannot begin with a number, though - only letters.


I'll get back to you on possible solutions.I would seriously suggest a complete rewrite. The markup is grossly invalid, and as such there are no guarantees about how it will respond to scripting.

In a simple test, I had the script expand five large paragraphs of text. The contraction occurred as normal, so it is not a script problem, nor a browser problem.

Mike

jscheuer1
08-19-2005, 10:16 PM
I took screenshots, before and after, and the alignment at the bottom is pixel-perfectNot Here! Must be an OS related phenomenon.

I would seriously suggest a complete rewrite. The markup is grossly invalid, and as such there are no guarantees about how it will respond to scriptingYou know me Mike, I wouldn't know valid if it bit me (more than a slight exaggeration but, I'm not guided by what is valid and have nowhere near your knowledge on the subject). I often avoid commenting on an OP's markup as long as their problem can be resolved to their satisfaction but, since you brought it up . . .

While working on what at least appears to be a viable solution (see my previous post in this thread), I noticed - too many nested tables! I don't think this has anything to do with validation but, it really slows down the page load.

mwinter
08-20-2005, 06:57 PM
While working on what at least appears to be a viable solution (see my previous post in this thread), I noticed - too many nested tables! I don't think this has anything to do with validation but, it really slows down the page load.There's no problem with nested tables syntactically, but they're rare semantically. As it is, the document in question can be written without a single table anywhere (assuming there's no tabular data within the collapsed sections - I only opened one).

As for load time, table rendering can require two passes if the table is left to adjust itself. It can also require the entire table to have been downloaded before rendering starts. An example algorithm (http://www.w3.org/TR/CSS21/tables.html#auto-table-layout) is presented in the CSS specifications.

Mike

TheDoc
08-21-2005, 06:50 AM
I have done some rewriting to the page. I took out about 90% of the tables. The tables that are left are four in the virus information on the right (that code came from Trend Micro - not me), a table at the top where it says "Computer Users Helping Computer Users" and "This page Updated...", a table for each "News Item", and a table within each news item table for the title and the date. I really wanted to get rid of the "Computer Users Helping.../This page Updated..." and the "news item title/date" tables. I really couldn't work it out without the tables and to keep the dates in those sections right justified. I tried using a <span> tag to right align just the dates; but, it didn't work. I also tried to right align them based on the right edge of the div; but, that didn't work either. So, I left those tables in using a table split with 2 cells. I really saw no way to remove the news item tables without sacrificing the table borders. If you have any ideas, I am open to them. But, you have to admit that the number of tables (and embedded tables) is drastically reduced. The reason there were so many tables to begin with was to help with positioning because it is a pain trying to get IE to work with CSS correctly without breaking Mozilla/Opera. But, you gave me a challenge which I decided to take on.

But, the main reason I am posting is because I found out that after removing most of the tables and fixing a mistakes I noted in the coding here and there, Mozilla/Firefox no longer has any problems with the Switch Content code (even without trying to add your fix). The page now resizes correctly in Mozilla/Firefox. Since the problem still occurs on the switch content website, there must be some sort of coding error on my site's old version and also on the switch content website. That is what I am guessing I had, a coding error, that I fixed when rewriting the page without all the nested tables (the tables I don't believe was the problem - but could have been).

Here is a url to the rewritten page (still working on it, thus the test filename):

http://fcconline.hmcltd.net/indextest.asp

The page does load a bit faster by the way. Thanks for your assistance.

TheDoc
08-22-2005, 12:16 PM
Just a slight update. I took out all of my nested tables (unless the Trend Micro code has nested tables, which I didn't look at). I am thinking of trying to remove all tables, except again from the Trend Micro code. Mozilla/Firefox is still working great with the Switch Content script.

TheDoc
08-23-2005, 06:28 AM
I am learning a lot about CSS. I have replaced ALL of the tables on the page with the exception of the Trend Micro code (so there are only 4 tables left and none in my code). It would have been a lot easier if you could subdivide a <div> tag like you can with a table. Putting two relatively positioned div tags next to one another is tricky. But, because of the nature of the page, I could do it. And Switch Content is still working like it should in Mozilla without any fixes. FANTASTIC! Thanks for your help! The page is up permanently at: http://fcconline.hmcltd.net/index.asp

jscheuer1
08-23-2005, 07:16 AM
Lookin' good! Much faster load too!

TheDoc
08-24-2005, 04:45 AM
Even faster now since you last looked. I estimate, since I started, that the page loads about two and a half times faster than it did when I first posted. And, Switch Content is still working great in every browser I try it in. I am satisfied. A big thank you jscheuer for getting me to rewrite the page.