Scripting News for 10/20/07

College Ave furniture store 

View Larger Map

Problems with expand/collapse 

Last night I changed the way Scripting News is rendered in HTML, and while it works in Firefox on the Mac (the browser that I use) it is broken in a bunch of others. This afternoon I’m going to try to get it working everywhere.

The advice from readers, some of it quite confusing, starts here.

I’ve got MSIE 6 running in Parallels, so as I go I’m testing there and in Firefox/Mac.

Here are the changes I’m making, in order…

1. Apparently the <a name=”xxx”> element is causing a problem, the purpose of it is to enable permalinks to work within the archive pages, Colin suggests making this the name of the <div>, so that’s what I did. (This got today’s elements expanding and collapsing in IE, but not older days. Very weird.)

2. In the stylesheet, added width:400px; to both .show and .hide and padding-left:15px; to .show. (That successfully widened the body of each post in MSIE.)

3. I eliminated the table I was using to indent the body text. (Now the older days expand and collapse. Hurrah!)

4. Added another 5 pixels of padding for a little bit more indenting.

5. At this point it appears to work in both MSIE 6 and Firefox/Mac. I will now download Opera and try it there. (Downloaded and installed, but I can’t get it to display any web pages including scripting.com. Very very strange. If you have Opera installed, could you try clicking on the pluses and minuses on scripting.com and let me know if it works. Apparently it does.)

6. Removed some old CSS and Javascript includes from the head section.

7. Added “min-width:400px;” to the .hide style, per Colin’s advice.

23 responses to this post.

  1. Posted by Colin Faulkingham on October 20, 2007 at 12:05 pm

    Dave

    I sent you and email to your scriptingnews at gmail address.

    Reply

  2. Posted by Jacob Levy on October 20, 2007 at 12:21 pm

    Still the -/+ thingies do weird things in IE on XP: the first -/+ collapses EVERYTHING, then when I click the first -/+ only the first story is expanded. Other -/+ collapse/expand only that specific story…

    WEIRD! :)

    Reply

  3. Posted by Bryan Schappel on October 20, 2007 at 12:47 pm

    The collapse works in Opera on the Mac as well as Safari 3.0 beta.

    Reply

  4. Posted by Colin Faulkingham on October 20, 2007 at 1:52 pm

    Dave,

    I think you can fix Ed’s problem with a min-width:400px; on .hide CSS class. I will test this theory and let you know if it works.

    Reply

  5. Dave I think you should make one good stylesheet and set all formatting in that file. You can still use tables if you want but use css to set width padding etc etc. The problem I encountered in MSIE could be fixed by setting a around the titles and permalink. you give the div a width of 400px
    Instead of using the you set the formatting via css. So you would have something like

    .titles {
    width:400px;
    font-family: Verdana, Arial, Helvetica;
    color: #000000;
    font-size: 10pt;
    font-weight: bold;
    }

    You can also loose the lines

    since you no longer use them..

    Reply

  6. mmm not all code got through. The lines I’m referring to are
    < script language=”JavaScript” src=”/mktree/mktree.js” >
    < link rel=”stylesheet” HREF=”/mktree/mktree.css” >

    Reply

  7. And of course I was talking about a <div class=”titles” >

    Reply

  8. I wouldn’t suggest using a <div tag for the title. Your site will be better optimized for search engines when using heading tags.

    I tested the min-width:400px; on the .hide CSS class and it fixed the bug Ed pointed out in IE. You could added it to both the .hide and .show class if you wanted to.

    Also, after your finished making all the tweaks. You will want to put the JavaScript and the CSS in separate files. Doing this will cache the files for users locally and will decrease the page size even further. Which in the end will decrease server load.

    Reply

  9. BTW for some reason when you first lunch Opera it won’t let you type in anything in the URL bar (very weird indeed). Close and re-open a new window and it will fix that problem.

    Reply

  10. I just added “min-width:400px;” to the .hide style and deleted the old unused Javascript and CSS includes.

    Reply

  11. min-width:400px doesn’t work

    Reply

  12. Ed your right. Opps! My goof! I was looking at my local version of the code incorrectly. :-0

    However, since it only happens on IE and when all stories are collapsed which, is not necessarily the most typical way the page will be displayed it might not be that big of a deal.

    It might work by adding it to the h4 tag with style=”width:400px;” I haven’t tried it yet.

    Reply

  13. Dave just rewrite the whole page and clean up the code.

    Reply

  14. since there are a few more issues in MSIE7 with your page..

    Reply

  15. Posted by Matthew Wilson on October 20, 2007 at 11:26 pm

    Hi,

    With Javascript disabled, selecting the “+” icons seems to go to the wrong URL. For example, with “Validating the validator”, I get http://www.scripting.com/validatingTheValidator, which isn’t found. But if I click on the blue icon after the headline, I get http://www.scripting.com/stories/2007/10/19/validatingTheValidator.html.

    Reply

  16. Posted by Gary Secondino on October 21, 2007 at 5:19 am

    Hi Dave,

    I’ve made several screen shot for you to illustrate what I see in Safari 2.0.4. Below each screen shot are the step by step actions taken to arrive at the result. Hope this helps you.

    http://www.flickr.com/photos/50055592@N00/1672027154/

    http://www.flickr.com/photos/50055592@N00/1672027156/

    http://www.flickr.com/photos/50055592@N00/1672027160/

    Reply

  17. Posted by Larry on October 21, 2007 at 6:38 am

    Clicking on the pluses and minuses works in Safari 2.0.4.

    Reply

  18. Posted by Colin on October 21, 2007 at 8:23 am

    The issue Gary is experiencing has more to do with the iFrame Google map. I noticed it doing weird things to IE7.

    I am not sure how to fix it possibly with display:none; in the .hide CSS class. However that might cause other issues.

    Reply

  19. Posted by Andy Brown on October 21, 2007 at 10:46 am

    Looks like it is working in IE7 now on XP. Nice job.

    Reply

  20. Posted by Rich Brown on October 21, 2007 at 5:05 pm

    Dave:

    I’m checking Scripting News at 9:00pm EDT Sunday 21 Oct, and the collapse/expand is almost working perfectly.

    I’m using Safari 2.0.4 on MacOSX 10.4.10. All items expand and contract properly *except* the College Avenue Furniture Store. It doesn’t expand, although one of the photos does appear, overwritten by the other articles…

    Reply

  21. Some datapoints on current expand/collapse
    performance under XP:

    I ran the following test on 4 latest browsers:

    [a] one by one, from top down, close any open nodes
    [b] one by one, from bottom up, open the just-closed nodes
    [c] resize the window and repeat

    Results:

    o- No problem opening or closing any nodes in any of the

    o- No opening/closing-other-nodes side effects

    o- Firefox 2.0.0.8
    Column widths remain constant. No column overlaps.

    o- Opera 9.24
    Content column and rightmost column widths change slightly as nodes open and close. No column overlaps.

    o- Safari 3.0.3
    Content column and rightmost column may have slight initial width changes. Long lines in content column can run over rightmost column.

    o- IE 7.0.5730.11
    As nodes close, content column gets narrower and narrower. No column overlaps.

    By the way: of these 4 browser versions, only Safari and Opera pass the Acid2
    test. Given that, the Safari overlap issue noted above hints at an
    uncleanth in the coding.

    — stan

    Reply

  22. The expand/collapse UI fits blogs like a glove. It’ll be interesting to see how quickly it spreads. Thanks Dave and Colin.

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 60 other followers

%d bloggers like this: