SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Sep 2007
    Location
    SF & LA & Hawaii
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Page Centering API Issue // Rollover Issue // CSS Alignment Issue

    First off, thanks to all you before me who have posted and replied in this forum! It’s been VERY helpful. Hopefully, I will soon be able to return the favor!... now...

    I have just started the interface for, what will be, a database driven site with a CMS setup for the promoters to create HTML newsletters as well as add / update events, pictures, manage registered users, etc…

    To do this the contents of the events page and the newsletter pages are essentially the same things. The events (held in a table) are placed in either a FRAME within newsletter.php or within event.php (basically)…. I choose to use Framesets because the dreamweaver templates weren’t updating properly in the table-less setup; and it seems the best choice for reusing the Event listings and gallery pictures.

    Point is, I’m having some serious problems with ALIGNMENT and ROLLOVERS.

    In IE6, most of the rollovers do not work: - the Events button disappears – the Contact button doesn’t work – and the Register, Login & Join buttons don’t rollover to red. Furthermore, the header doesn’t place properly until you click on the flash file within the browser.

    In Foxfire, everything seems to work ok, except that the whole page does not SCROLL vertically when minimized (it also doesn’t in IE6)

    In both browsers, the pages do not center on the screen or stay centered when moved. I am using an javascripted API by Danny Goodman from The DHTML Definitive Reference. Meanwhile, his same script works fine centering the holding currently at index.html of www.ankhmarketing.com. Should I expect a problem applying this API to FRAMESETS?

    To more easily review my apparent mistakes without digging through my source code for relative paths to 10+ files, here they are directly:


    Pages:
    http://www.ankhmarketing.com/site/index.php
    http://www.ankhmarketing.com/site/event/event.php
    http://www.ankhmarketing.com/site/gallery/gallery.php
    http://www.ankhmarketing.com/site/client/client.php
    http://www.ankhmarketing.com/site/contact/contact.php
    http://www.ankhmarketing.com/site/account/register.php

    CMS Control Panel:
    http://www.ankhmarketing.com/core/welcome.php


    Code:
    http://www.ankhmarketing.com/_lib/_c...siteLayout.css (controls site’s interface)
    http://www.ankhmarketing.com/_lib/_c...navRollover.js (controls rollovers)
    http://www.ankhmarketing.com/_lib/_classes/DHTMLapi.js
    http://www.ankhmarketing.com/_lib/_c.../pageCenter.js (both control page centering)
    http://www.ankhmarketing.com/_lib/_c...newsletter.css (controls newsletter styles)

    Long story short, take a look at the site let me know if you notice any obvious errors or just have general advice about my approach to this…

    THANK YOU AGAIN

    also, THE RELEVANT CODE for the page centering is pasted below:

    Code:
    /* ***********************************************************
    Example 4-3 (DHTMLapi.js)
    "Dynamic HTML:The Definitive Reference"
    2nd Edition
    by Danny Goodman
    Published by O'Reilly & Associates  ISBN 1-56592-494-0
    http://www.oreilly.com
    Copyright 2002 Danny Goodman.  All Rights Reserved.
    ************************************************************ */
    // DHTMLapi.js custom API for cross-platform
    // object positioning by Danny Goodman (http://www.dannyg.com).
    // Release 2.0. Supports NN4, IE, and W3C DOMs.
    
    // Global variables
    var isCSS, isW3C, isIE4, isNN4;
    // initialize upon load to let all browsers establish content objects
    function initDHTMLAPI() {
        if (document.images) {
            isCSS = (document.body && document.body.style) ? true : false;
            isW3C = (isCSS && document.getElementById) ? true : false;
            isIE4 = (isCSS && document.all) ? true : false;
            isNN4 = (document.layers) ? true : false;
            isIE6CSS = (document.compatMode && document.compatMode.indexOf("CSS1") >= 0) ? true : false;
        }
    }
    // set event handler to initialize API
    window.onload = initDHTMLAPI;
    
    // Seek nested NN4 layer from string name
    function seekLayer(doc, name) {
        var theObj;
        for (var i = 0; i < doc.layers.length; i++) {
            if (doc.layers[i].name == name) {
                theObj = doc.layers[i];
                break;
            }
            // dive into nested layers if necessary
            if (doc.layers[i].document.layers.length > 0) {
                theObj = seekLayer(document.layers[i].document, name);
            }
        }
        return theObj;
    }
    
    // Convert object name string or object reference
    // into a valid element object reference
    function getRawObject(obj) {
        var theObj;
        if (typeof obj == "string") {
            if (isW3C) {
                theObj = document.getElementById(obj);
            } else if (isIE4) {
                theObj = document.all(obj);
            } else if (isNN4) {
                theObj = seekLayer(document, obj);
            }
        } else {
            // pass through object reference
            theObj = obj;
        }
        return theObj;
    }
    
    // Convert object name string or object reference
    // into a valid style (or NN4 layer) reference
    function getObject(obj) {
        var theObj = getRawObject(obj);
        if (theObj && isCSS) {
            theObj = theObj.style;
        }
        return theObj;
    }
    
    // Position an object at a specific pixel coordinate
    function shiftTo(obj, x, y) {
        var theObj = getObject(obj);
        if (theObj) {
            if (isCSS) {
                // equalize incorrect numeric value type
                var units = (typeof theObj.left == "string") ? "px" : 0 
                theObj.left = x + units;
                theObj.top = y + units;
            } else if (isNN4) {
                theObj.moveTo(x,y)
            }
        }
    }
    
    // Move an object by x and/or y pixels
    function shiftBy(obj, deltaX, deltaY) {
        var theObj = getObject(obj);
        if (theObj) {
            if (isCSS) {
                // equalize incorrect numeric value type
                var units = (typeof theObj.left == "string") ? "px" : 0 
                theObj.left = getObjectLeft(obj) + deltaX + units;
                theObj.top = getObjectTop(obj) + deltaY + units;
            } else if (isNN4) {
                theObj.moveBy(deltaX, deltaY);
            }
        }
    }
    
    // Set the z-order of an object
    function setZIndex(obj, zOrder) {
        var theObj = getObject(obj);
        if (theObj) {
            theObj.zIndex = zOrder;
        }
    }
    
    // Set the background color of an object
    function setBGColor(obj, color) {
        var theObj = getObject(obj);
        if (theObj) {
            if (isNN4) {
                theObj.bgColor = color;
            } else if (isCSS) {
                theObj.backgroundColor = color;
            }
        }
    }
    
    // Set the visibility of an object to visible
    function show(obj) {
        var theObj = getObject(obj);
        if (theObj) {
            theObj.visibility = "visible";
        }
    }
    
    // Set the visibility of an object to hidden
    function hide(obj) {
        var theObj = getObject(obj);
        if (theObj) {
            theObj.visibility = "hidden";
        }
    }
    
    // Retrieve the x coordinate of a positionable object
    function getObjectLeft(obj)  {
        var elem = getRawObject(obj);
        var result = 0;
        if (document.defaultView) {
            var style = document.defaultView;
            var cssDecl = style.getComputedStyle(elem, "");
            result = cssDecl.getPropertyValue("left");
        } else if (elem.currentStyle) {
            result = elem.currentStyle.left;
        } else if (elem.style) {
            result = elem.style.left;
        } else if (isNN4) {
            result = elem.left;
        }
        return parseInt(result);
    }
    
    // Retrieve the y coordinate of a positionable object
    function getObjectTop(obj)  {
        var elem = getRawObject(obj);
        var result = 0;
        if (document.defaultView) {
            var style = document.defaultView;
            var cssDecl = style.getComputedStyle(elem, "");
            result = cssDecl.getPropertyValue("top");
        } else if (elem.currentStyle) {
            result = elem.currentStyle.top;
        } else if (elem.style) {
            result = elem.style.top;
        } else if (isNN4) {
            result = elem.top;
        }
        return parseInt(result);
    }
    
    // Retrieve the rendered width of an element
    function getObjectWidth(obj)  {
        var elem = getRawObject(obj);
        var result = 0;
        if (elem.offsetWidth) {
            result = elem.offsetWidth;
        } else if (elem.clip && elem.clip.width) {
            result = elem.clip.width;
        } else if (elem.style && elem.style.pixelWidth) {
            result = elem.style.pixelWidth;
        }
        return parseInt(result);
    }
    
    // Retrieve the rendered height of an element
    function getObjectHeight(obj)  {
        var elem = getRawObject(obj);
        var result = 0;
        if (elem.offsetHeight) {
            result = elem.offsetHeight;
        } else if (elem.clip && elem.clip.height) {
            result = elem.clip.height;
        } else if (elem.style && elem.style.pixelHeight) {
            result = elem.style.pixelHeight;
        }
        return parseInt(result);
    }
    
    
    // Return the available content width space in browser window
    function getInsideWindowWidth() {
        if (window.innerWidth) {
            return window.innerWidth;
        } else if (isIE6CSS) {
            // measure the html element's clientWidth
            return document.body.parentElement.clientWidth
        } else if (document.body && document.body.clientWidth) {
            return document.body.clientWidth;
        }
        return 0;
    }
    // Return the available content height space in browser window
    function getInsideWindowHeight() {
        if (window.innerHeight) {
            return window.innerHeight;
        } else if (isIE6CSS) {
            // measure the html element's clientHeight
            return document.body.parentElement.clientHeight
        } else if (document.body && document.body.clientHeight) {
            return document.body.clientHeight;
        }
        return 0;
    }
    FOLLOWED BY

    Code:
    // Global 'corrector' for IE/Mac et al., but doesn't hurt others
    var fudgeFactor = {top:-1, left:-1};
    
    // Center a positionable element whose name is passed as 
    // a parameter in the current window/frame, and show it
    function centerIt(centered) {
        // 'obj' is the positionable object
        var obj = getRawObject(centered);
        // set fudgeFactor values only first time
        if (fudgeFactor.top == -1) {
            if ((typeof obj.offsetTop == "number") && obj.offsetTop > 0) {
                fudgeFactor.top = obj.offsetTop;
                fudgeFactor.left = obj.offsetLeft;
            } else {
                fudgeFactor.top = 0;
                fudgeFactor.left = 0;
            }
            if (obj.offsetWidth && obj.scrollWidth) {
                if (obj.offsetWidth != obj.scrollWidth) {
                    obj.style.width = obj.scrollWidth;    
                }
            }
        }
        var x = Math.round((getInsideWindowWidth()/2) - (getObjectWidth(obj)/2));
        var y = Math.round((getInsideWindowHeight()/2) - (getObjectHeight(obj)/2));
        shiftTo(obj, x - fudgeFactor.left, y - fudgeFactor.top);
        show(obj);
    }
    
    // Special handling for CSS-P redraw bug in Navigator 4
    function handleResize() {
        if (isNN4) {
            // causes extra re-draw, but gotta do it to get banner object color drawn
            location.reload();
        } else {
            centerIt("centered");
        }
    }
    LOADED WITH:

    HTML Code:
    <div onLoad="initDHTMLAPI(); centerIt('centered')" onResize="handleResize()">
    <div id="centered" name="centered" style="position:absolute; left:0; top:0;">
    <frameset rows="*" cols="150,650*" frameborder="NO" border="0" framespacing="0" onLoad="initDHTMLAPI(); centerIt('centered')" onResize="handleResize()">
    	
    	<frame src="leftpanel.html" name="leftFrame" scrolling="NO" noresize>
    
    	<frameset rows="120,450*" cols="650*" framespacing="0" frameborder="NO" border="0">
    		<frame src="navigation.html" name="mainFrame" scrolling="NO" border="0" noresize><br /><br />
    		<frame src="content.html" name="bottomFrame" scrolling="NO" border="0" noresize>
    	</frameset>
    
    </frameset>
    </div>
    </div>
    Last edited by eataylor; Sep 21, 2007 at 00:19.
    taylormade

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In the file navrollover.js, you are using some semi-reserved words as variables (semi-reserved because different browsers treat them differently) for example the event object is an IE-specific thing.

    First of all, variables should be declared using var:

    var myVariable = 1;

    Secondly, avoid reserved (semi or fully) keywords.

    var imgEvent = ....

    G'luck

  3. #3
    SitePoint Member
    Join Date
    Sep 2007
    Location
    SF & LA & Hawaii
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i thought that was the problem since such names were changing color in dreamweaver, but i had tried renaming them before posting this and it still wasn't working.. Of course, now with your suggested names it appears to be ok..

    Regardless, in exploring the rest of this site babyboy808 suggested there was a way to do rollovers easier w/ CSS. I'm not sure if that was through psuedo-classes?, but if so, i'm not sure what you're click on in an empty element with different backgrounds. ?


    anyway, i'm more concerned with the page centering anyway...

    any ideas of why that wouldn't work? does it have to do with using Frames?

    thanks again!
    taylormade


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
  •