SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Enthusiast azwaldo's Avatar
    Join Date
    Mar 2004
    Location
    Texas Hill Country
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Setting object properties in IE5/Mac

    A page that I have developed validates in CSS2 and appears as intended in IE/Windows, but looks like it is rendered in WonkaVision by IE5.x/Mac. The page layout is not as much of a concern as the javascript text-rollover effect.

    var active=null;
    function showvTerm(term) {
    if (active != null){
    document.getElementById(active).style.visibility = "hidden";
    }
    document.getElementById(term).style.visibility = "visible";
    active = term;
    }

    function hidevTerm(term) {
    document.getElementById(term).style.visibility = "hidden";
    }

    The functions are called from linked text like this:
    <a class="vLink" onMouseOver="javascript:showvTerm('colonies')" onMouseOut="hidevTerm('colonies')">colonies</a>.
    The page is at http://www.edparadigm.com/session4a.html

    The 'terms' (here, a definition for 'colonies') are each in a div with initial style of visibility:hidden (again, valid CSS). There is also a function to set the div location (relative to the 'captured' mouse position), but I have tried the page without this function in IE5/Mac and still have the same problem - so I do not suspect that fxn to be the problem.

    I have read numerous articles, tutorials and forums. Based on these, I have attempted to use branching 'object detection' (to make declarations depending on whether the browser is recognizing document.layers, document.getElementById, or document.all) but may not have understood/applied the conditional correctly in those trials. I am now banging my head on the monitor to ease the pain.

    Any suggestions will be appreciated.
    ________________
    azwaldo
    occupythepolls.org

  2. #2
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I haven't had very long to look at your page, but here's a couple suggestions:

    You have this:
    Code:
    onMouseOver="javascript:showvTerm('germTheory')"
    Change it to this:
    Code:
    onmouseover="showvTerm('germTheory')"

  3. #3
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not exactly clear which problem you're referring to - you've got several - but, a few more suggestions:

    1) Lose that window resize! (annoying)
    2) Use HTML title, or a good tooltip script. Your page is erroring in mozilla as you've neglected to pass the Event object in the function call.
    3) IE5/mac actually does CSS better than any Microsoft browser ever has, due to its superior Tasman rendering engine; what you're seeing as anomalies are probably correct interpretation of the style rules. The image 'hilite' (hover) effect in particular isn't rendering properly in Firebird.
    4) I like WonkaVision™.
    ::: certified wild guess :::

  4. #4
    SitePoint Enthusiast azwaldo's Avatar
    Join Date
    Mar 2004
    Location
    Texas Hill Country
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by MikeFoster
    I haven't had very long to look at your page, but here's a couple suggestions:

    You have this:
    Code:
    onMouseOver="javascript:showvTerm('germTheory')"
    Change it to this:
    Code:
    onmouseover="showvTerm('germTheory')"

    *****
    Didn't even realize that was not consistent (between the mouseover="javascript:showvTerm..." and mouseout="hidevTerm...") have tinkered with this so much have lost track of the several versions I have saved...

    Changed the fxn call; still no effect from the mouseover. Thanks again for the reply. Am looking at suggestions by adios next.
    ________________
    azwaldo
    occupythepolls.org

  5. #5
    SitePoint Enthusiast azwaldo's Avatar
    Join Date
    Mar 2004
    Location
    Texas Hill Country
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hola adios,
    Thanks for the suggestions.
    Lose that window resize!
    Am resizing the window as these pages have 7th and 8th graders as an audience. It seems they have windows of all sizes open when I look over their shoulders, and the monitors I have seen at two schools are sized 800x600. I thought this would be a good thing to display the page full screen. What do you think?
    Your page is erroring in mozilla as you've neglected to pass the Event object in the function call.
    Will read up on 'passing the Event object'. I am working primarily at a local community college without the ability to install browsers. Came across a site a while ago that gives screenshots of a page in different browsers - cannot recall where that was, could probably find it again. Would like to think I'll learn to script in fully compliant manner...
    IE5/mac actually does CSS better than any Microsoft browser ever has...
    Just read this a few days ago (http://www.macedition.com/cb/ie5macbugs/notbugs.html)- how the display of my pages in IE5/Mac is most likely according to specs, but I may not be seeing strict rendering in IE/Windows.
    I like WonkaVision™.
    So do I, actually, I just can't find any Oompa-Loompas to help with design.
    (Or are you referring to Wonkavision Magazine/Records?)

    I suspect that I can tackle the page formatting problem, but I am most bungled by the fxn call at mouseover/mouseout. On IE5/Mac this results in the cursor changing to the vertical (input?) cursor, but the hidden div does not appear. Do you have any ideas there?


    Thanks for the feedback.
    ________________
    azwaldo
    occupythepolls.org

  6. #6
    SitePoint Enthusiast azwaldo's Avatar
    Join Date
    Mar 2004
    Location
    Texas Hill Country
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by adios
    Not exactly clear which problem you're referring to - you've got several - but, a few more suggestions:

    1) Lose that window resize! (annoying)
    2) Use HTML title, or a good tooltip script. Your page is erroring in mozilla as you've neglected to pass the Event object in the function call.
    3) IE5/mac actually does CSS better than any Microsoft browser ever has, due to its superior Tasman rendering engine; what you're seeing as anomalies are probably correct interpretation of the style rules. The image 'hilite' (hover) effect in particular isn't rendering properly in Firebird.
    4) I like WonkaVision™.

    *******
    Alright, I get it. I just looked at the tooltips page. At first I thought these links were suggested only in relation to the mozilla issue. Have you used this? would like to think I'll be selling these lessons someday, wondering what the commercial-use fee is...

    Had thought about using the title tag to display definitions, thought the hidden/visible div more legible, but I may have to settle for title tags. Thanks again for the suggestions.
    ________________
    azwaldo
    occupythepolls.org

  7. #7
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    HTML title is great because it's now widely supported (likely to get wider, not narrower), fast (runs in the compiled code of the browser) and - you can't beat the scripting overhead (none). Hover over the post topics on the main page of this forum for an example. Tooptip scripts offer more flexibility and flash, but there may be commercial considerations, as you indicated.

    For a site like yours appears to be - basically educational - it's hard to beat fast-loading, un-flashy standards-compliant xhtml, particularly if you'd like your pages to age well. CSS handles layout and provides some interactivity with menus, links, etc.

    Resizing-on-load is annoying, imo, as it changes the configuration of the main browser window, which is a running application, and should be under the control of the user. Very different than popping up a new window to display content - a Flash movie, e.g. - on a properly sized canvas (there are issues with pop-ups, as well &#41;.

    Event object: http://www.oreillynet.com/pub/a/java...ls.html?page=2
    ::: certified wild guess :::

  8. #8
    SitePoint Enthusiast azwaldo's Avatar
    Join Date
    Mar 2004
    Location
    Texas Hill Country
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just viewed an alternate page for a different lesson (http://www.edparadigm.com/session4Xa.html) in which I moved the vocab definitions into title tags. This will work. Thanks for the suggestion.

    Interesting that you would mention it, the lessons do have a button to pop up a flash movie in a sized window. I have a problem with IE5/Mac there too, actually: There are three pages in the first lesson (http://www.edparadigm.com/session2a.html - disabled the resize for now, don't want to bug my new mentor), with a Flash animation linked at the bottom of each page (button).
    When a user closes the flash window (button is in the flash movie, the movie displayed in an html page), a function is called that closes the window and sets the location of the parent window to the next page of the lesson. This is working fine in IE/Windows, but not in IE5/Mac.

    function loadinparent(url, closeSelf){
    self.opener.location = url;
    if(closeSelf) self.close();
    }
    Don't have Flash where I am at right now, will check this next bit when I get home later. I think I call the function with this:
    On (Release)
    Get URL ("javascript:loadinparent('session2b.html' , 'true')")
    End On
    I sure appreciate your input with all of this. And you were absolutely correct in your first post: I have several problems.
    ________________
    azwaldo
    occupythepolls.org

  9. #9
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Looks OK from here, although that true comes w/o the quotes ('true' will evaluate to true anyway, however, not being an empty string). Browser-specific bugs are always a pain.

    Fiddled with your page a bit for the heck of it; see if it inspires (appalls?) you...

    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    <head>
    <title>Motion - a Learning Session from edParadigm</title>
    <link rel="stylesheet" href="session.css" type="text/css">
    <base href="http://www.edparadigm.com/">
    <script type="text/javascript">
    
    function openSized(url, w, h)
    {
    	sizedWindow = window.open(url,'sizedWindow','width='+w+',height='+h+',left=0,top=0');
    	if (sizedWindow && !sizedWindow.closed) 
    		sizedWindow.focus();
    	return false;
    }
    
    </script>  
    </head>
    <body>
    <div id="navAlpha">
    <div id="note">
    <h4>Instructions •••••</h4>
    Read each page, and view all three animations - buttons are toward the bottom of each page.
    <br /><br />
    Links for Pages 1, 2, and 3 of this session are in this panel (below).
    <br /><br />
    Hold your mouse over highlighted terms for a pop-up definition.
    <h4>This session •••••</h4>
    <span id="navCurrent">Page One</span><br />
    <a class="nav" href="http://www.edparadigm.com/session2b.html">Page Two</a> &raquo;<br />
    <a class="nav" href="http://www.edparadigm.com/session2c.html">Page Three</a> &raquo;<br />
    <br />
    <a class="nav" href="http://www.edparadigm.com/scgi-bin/quiztest.cgi?powerquiz">Take the Quiz</a> &raquo;<br />
    <a class="nav" href="http://www.edparadigm.com/siteStdsCA.html">See the Standards</a> &raquo;
    <h4>Note •••••</h4>
    App. 400 words
    <br />
    Flesch-Kincaid grade level: 8.7
    <br /><br />
    </div>
    </div>
    
    <div id="content">
    <hr />
    
    <div id="insertRight">
    <a href="images/NewtonDubai.jpg" onclick="return openSized(this.href, 435,628)" class="img" title="Isaac Newton on Dubai postage stamp"><img src="images/NewtonDubai.jpg" width="146" height="206"></a><br />
    <div class="caption">Sir Isaac Newton<br />Postage Stamp</div>
    </div>
    
    <h3>Motion</h3>
    <p><span class="dropcap">M</span>otion is the change in location of an object with respect to time, as measured by a single observer in a certain <a href="#" class="vLink" title="A set of coordinates that allows position or movement to be described.  Also called a standard reference.">frame of reference</a>.  In the 17th Century, Isaac Newton reasoned that there are three laws that rule <a href="#" class="vLink" title="The change in location of an object.">motion</a>. He gave evidence for these in his book titled <em>Principia</em>.  His work helped to change the way we view the universe.  For this, he is recognized around the world - as this postage stamp from Dubai in the United Arab Emirates illustrates. 
    </p>
    
    <div id="insertLeft">
    <a  href="images/WomanWithGuitar.jpg" onclick="return openSized(this.href, 442,544)" class="img" title="Woman With Guitar -by Pablo Picasso"><img src="images/WomanWithGuitar.jpg" width="98" height="120"></a>
    <div class="caption">Woman With Guitar<br />by Pablo Picasso</div>
    </div>
    
    <p>
    Until the end of the 19th century, the Laws of Motion formed the basis of what became known as <i>classical physics</i>.  The basic principals were <a href="#" class="vLink" title="Supported, or shown as factual, by presentation of evidence or testimony.">verified</a> in testing and observation for over 200 years.  More recently it has been shown that  his equations are not as accurate for motion at very high speeds. To address this, the ideas in Albert Einstein's Theory of <a href="#" class="vLink" title="A state of dependence in which the existence of one thing depends on the existence of another.">relativity</a> have been adopted.  His new ideas even influenced art.</p>
    
    <p>Pablo Picasso and George Braques discussed the physics of light and motion when they first developed a style of art known as <em>cubism</em>, epitomized by the classic painting <em>Woman With Guitar</em> shown here.
    <br />
    <br /> 
    </p>
    <hr />
    <input type="button" class="btn" value="View the First Animation" 
    onmouseover="this.style.letterSpacing='1.3px'" 
    onmouseout="this.style.letterSpacing=''" 
    onclick="openSized('http://www.edparadigm.com/sessionMotion1.html',570,440)">
    <hr />
    <!--  CLOSING DIV MAIN HERE -->
    </div>
    </body>
    </html>
    
    [session.css]
    Code:
    
    body {
    	margin: 0 0 24px 0;
    	background: url(http&#58;//www.light-speed-web-graphics.com/stripes_vertical_darker/fastest_00073.GIF);
    	}
    p {
    	font: normal 13px "times new roman", serif;
    	line-height: 140%;
    	}
    .dropcap {
    	font-size: 150%;
    	}
    
    .caption {
    	font: normal 10px "times new roman", serif;
    	text-align: center;
    	margin: 0;
    }
    a.vLink:link, a.vLink:visited, a.vLink:hover, a.vLink:active {
    	font: normal 13px "times new roman", serif;
    	text-decoration: none;
    	background: #ddf;
    	cursor: default;
    	}
    a.vLink:hover {
    	background: #fffaff;
    	}
    #content {
    	float: left;
    	width: 440px;
    	margin: 24px auto;
    	background: #fafaff;
    	padding: 8px;
    	border: 3px #fff;
    	border-style: ridge groove groove ridge;
    	}
    #insertLeft {
    	float: left; 
    	margin: 8px 18px 8px 0;
    	}
    #insertRight {
    	float: right;
    	margin: 16px 0 0 12px;
    	}
    a:hover {
    	background: #fffffc;
    	}
    a.img:link img, a.img:visited img {
    	border: 1px solid #fef;
    	}
    a.img:hover img {
    	border: 1px solid #000;
    	}
    #navAlpha {
    	float: left;
    	width: 240px;
    	height: 100%;
    	color: #fef;
    	text-align: right;
    	margin: 40px 0;
    	padding: 16px;
    	}
    #note {
    	width: 120px;
    	color: #fef;
    	font: normal 11px "times new roman", serif;
    	margin: 0 0 0 120px;
    	padding: 4px;
    	background: #646;
    	}
    #note h4 {
    	font-size: 12px;
    	color: #ddf;
    	}
    a.nav:link, a.nav:visited {
    	color: #fef;
    	font-size: 12px;
    	font-family: "times new roman", serif;
    	text-decoration:none;
    	}
    a.nav:hover {
    	color: #000;
    	background: #fffaff;
    	}
    #navCurrent {
    	color: #fef;
    	font: bold 12px "times new roman", serif;
    	}
    .btn {
    	width: 160px;
    	font: normal 11px "times new roman";
    	color: #fff;
    	background: #000;
    	cursor: pointer;
    	}
    
    Last edited by adios; Mar 10, 2004 at 13:55.
    ::: certified wild guess :::

  10. #10
    SitePoint Enthusiast azwaldo's Avatar
    Join Date
    Mar 2004
    Location
    Texas Hill Country
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hola adios,

    Just uploaded your stylesheet and html to take a look:
    http://www.edparadigm.com/session2Xa.html
    I am impressed. And not just by the design - perhaps more by your interest in design (To make the time to tinker as you have with the mess I've got in progress.) Guessing you saw the massive .css file I have for the 'sessions'. Have been fiddling with the design so long that I have almost forgotten what all is in there. Seeing your css reminded me that it is probably time to whittle down that .css file - maybe start from scratch to be sure I only include what I need.

    I'm not ready to give up on the rollover/pop-up definitions for these lessons. Stubborn, I suppose. Tried a 'pure css pop-up' technique from Eric Meyer's site (http://www.meyerweb.com/eric/css/edge/popups/demo.html - have learned much from his site), using a variation seen at http://www.madaboutstyle.com/tooltip2.html.

    Turns out that this fails in IE5/Mac, also.

    "Curiouser and curioser" (see http://www-2.cs.cmu.edu/People/rgs/alice-table.html)
    ________________
    azwaldo
    occupythepolls.org


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •