Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New Coder
    Join Date
    May 2008
    Posts
    33
    Thanks
    11
    Thanked 0 Times in 0 Posts

    innerHTML/DIV size changing question

    I was playing around with some onmouseover/onmouseout and setting innerHTML to various strings depending on what has been mousedover/out. The DIV for the innerHTML was above the items being onmouseovered/out and because the strings sent were of different lengths, sometimes a one or two line wrap would happen and everything below it would be resized accordingly creating a horrible effect.

    For reference, what is a good way to approach building pages which are immune to this effect?

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Confusing. can you give us an example, like a test page?
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #3
    New Coder
    Join Date
    May 2008
    Posts
    33
    Thanks
    11
    Thanked 0 Times in 0 Posts
    I put up an example of the resizing move elements on the page.

    http://www.proceduralgaming.com/test...page_ever.html

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,516
    Thanks
    77
    Thanked 4,379 Times in 4,344 Posts
    Change your style, thus:
    Code:
    <style>
    .displaybox {
        position: relative;
        width:150px; height: 40px;
        overflow: hidden;
        background-color:#ffffff;
        border:2px solid #000000;
        padding:10px;
        font:24px normal verdana, helvetica, arial, sans-serif;
    }
    </style>
    You could also use overflow: scroll; but that's probably not what you are after.
    Last edited by Old Pedant; 12-22-2010 at 01:47 AM.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    wjrasmussen (12-23-2010)

  • #5
    Regular Coder Krupski's Avatar
    Join Date
    Dec 2010
    Location
    United States of America
    Posts
    505
    Thanks
    39
    Thanked 47 Times in 46 Posts
    Quote Originally Posted by wjrasmussen View Post
    I put up an example of the resizing move elements on the page.

    http://www.proceduralgaming.com/test...page_ever.html
    I noticed your page says "Get server time without page refresh".

    If you want a Javascript live clock that runs without page refresh, I have a nice one you can use. The actual clock code was written by Steven Levithan. I added an option (the "morning/afternoon/evening" string) and also wrote the trivial top part that displays the clock:

    Code:
    /************
    * live digital clock
    ***********/
    function doClock()
    {
        var now = new Date();
        var gmt = now.getTime();
        var offset = (-5 * 60 * 60 * 1000);
        now.setTime(gmt + offset);
        var e = document.getElementsByClassName('clock');
        var i = e.length;
        while(i--)
        {
            e[i].innerHTML = dateFormat(now, 'customDate1', 1);
        }
        setTimeout('doClock()', 1000);
    }
    
    /*
     * Date Format 1.2.3
     * (c) 2007-2009 Steven Levithan <stevenlevithan.com>
     * MIT license
     *
     * Includes enhancements by Scott Trenda <scott.trenda.net>
     * and Kris Kowal <cixar.com/~kris.kowal/>
     *
     * Accepts a date, a mask, or a date and a mask.
     * Returns a formatted version of the given date.
     * The date defaults to the current date/time.
     * The mask defaults to dateFormat.masks.default.
     *
     * Added morning/afternoon/evening (X) mask June 2010
     * Roger A. Krupski <krupski@roadrunner.com>
     *
     */
    
    /*********************************
    *
    * Mask        Description
    * ========    ===========================
    * d            Day of the month as digits; no leading zero for single-digit days.
    * dd        Day of the month as digits; leading zero for single-digit days.
    * ddd        Day of the week as a three-letter abbreviation.
    * dddd        Day of the week as its full name.
    * m            Month as digits; no leading zero for single-digit months.
    * mm        Month as digits; leading zero for single-digit months.
    * mmm        Month as a three-letter abbreviation.
    * mmmm        Month as its full name.
    * yy        Year as last two digits; leading zero for years less than 10.
    * yyyy        Year represented by four digits.
    * h            Hours; no leading zero for single-digit hours (12-hour clock).
    * hh        Hours; leading zero for single-digit hours (12-hour clock).
    * H            Hours; no leading zero for single-digit hours (24-hour clock).
    * HH        Hours; leading zero for single-digit hours (24-hour clock).
    * M            Minutes; no leading zero for single-digit minutes.
    * MM        Minutes; leading zero for single-digit minutes.
    * s            Seconds; no leading zero for single-digit seconds.
    * ss        Seconds; leading zero for single-digit seconds.
    * l or L    Milliseconds. l gives 3 digits. L gives 2 digits.
    * t            Lowercase, single-character time marker string: a or p.
    * tt        Lowercase, two-character time marker string: am or pm.
    * T            Uppercase, single-character time marker string: A or P.
    * TT        Uppercase, two-character time marker string: AM or PM.
    * Z            US timezone abbreviation, e.g. EST or MDT. With non-US timezones or in
    *              the Opera browser, the GMT/UTC offset is returned, e.g. GMT-0500
    * o            GMT/UTC timezone offset, e.g. -0500 or +0230.
    * S            The date's ordinal suffix (st, nd, rd, or th). Works well with d.
    * '' or ""    Literal character sequence. Surrounding quotes are removed.
    * X            Morning (H<12), Afternoon (H<18) or Evening.
    * UTC:        Must be the first four characters of the mask. Converts the date from
    *                local time to UTC/GMT/Zulu time before applying the mask.
    *                The "UTC:" prefix is removed.
    *
    *******************/
    
    var dateFormat=function () {
        var    token=/[X]|d{1,4}|m{1,4}|yy(?:yy)?|([HhMsTt])\1?|[LloSZ]|"[^"]*"|'[^']*'/g,
            timezone=/\b(?:[PMCEA][SDP]T|(?:Pacific|Mountain|Central|Eastern|Atlantic) (?:Standard|Daylight|Prevailing) Time|(?:GMT|UTC)(?:[-+]\d{4})?)\b/g,
            timezoneClip=/[^-+\dA-Z]/g,
            pad=function (val,len) {
                val=String(val);
                len=len || 2;
                while (val.length < len) val="0" + val;
                return val;
            };
    
        // Regexes and supporting functions are cached through closure
        return function (date,mask,utc) {
            var dF=dateFormat;
    
            // You can't provide utc if you skip other args (use the "UTC:" mask prefix)
            if (arguments.length == 1 && Object.prototype.toString.call(date) == "[object String]" && !/\d/.test(date)) {
                mask=date;
                date=undefined;
            }
    
            // Passing date through Date applies Date.parse, if necessary
            date=date ? new Date(date) : new Date;
            if (isNaN(date)) throw SyntaxError("invalid date");
    
            mask=String(dF.masks[mask] || mask || dF.masks["default"]);
    
            // Allow setting the utc argument via the mask
            if (mask.slice(0,4) == "UTC:") {
                mask=mask.slice(4);
                utc=true;
            }
    
            var    _=utc ? "getUTC" : "get",
                d=date[_ + "Date"](),
                D=date[_ + "Day"](),
                m=date[_ + "Month"](),
                y=date[_ + "FullYear"](),
                H=date[_ + "Hours"](),
                M=date[_ + "Minutes"](),
                s=date[_ + "Seconds"](),
                L=date[_ + "Milliseconds"](),
                o=utc ? 0 : date.getTimezoneOffset(),
                flags={
                    d:        d,
                    dd:        pad(d),
                    ddd:    dF.i18n.dayNames[D],
                    dddd:    dF.i18n.dayNames[D + 7],
                    m:        m + 1,
                    mm:        pad(m + 1),
                    mmm:    dF.i18n.monthNames[m],
                    mmmm:    dF.i18n.monthNames[m + 12],
                    yy:        String(y).slice(2),
                    yyyy:    y,
                    h:        H % 12 || 12,
                    hh:        pad(H % 12 || 12),
                    H:        H,
                    HH:        pad(H),
                    M:        M,
                    MM:        pad(M),
                    s:        s,
                    ss:        pad(s),
                    l:        pad(L,3),
                    L:        pad(L > 99 ? Math.round(L / 10) : L),
                    t:        H < 12 ? "a"  : "p",
                    tt:        H < 12 ? "am" : "pm",
                    T:        H < 12 ? "A"  : "P",
                    TT:        H < 12 ? "AM" : "PM",
                    X:        dF.i18n.todNames[H < 12 ? 0 : H < 18 ? 1 : 2],
                    Z:        utc ? "UTC" : (String(date).match(timezone) || [""]).pop().replace(timezoneClip,""),
                    o:        (o > 0 ? "-" : "+") + pad(Math.floor(Math.abs(o) / 60) * 100 + Math.abs(o) % 60,4),
                    S:        ["th","st","nd","rd"][d % 10 > 3 ? 0 : (d % 100 - d % 10 != 10) * d % 10],
                };
    
            return mask.replace(token,function ($0) {
                return $0 in flags ? flags[$0] : $0.slice(1,$0.length - 1);
            });
        };
    }();
    
    // Some common format strings
    dateFormat.masks={
        "default":        "ddd mmm dd yyyy HH:MM:ss",
        shortDate:        "m/d/yy",
        mediumDate:        "mmm d, yyyy",
        longDate:        "mmmm d, yyyy",
        fullDate:        "dddd, mmmm d, yyyy",
        shortTime:        "h:MM TT",
        mediumTime:        "h:MM:ss TT",
        longTime:        "h:MM:ss TT Z",
        isoDate:        "yyyy-mm-dd",
        isoTime:        "HH:MM:ss",
        isoDateTime:    "yyyy-mm-dd'T'HH:MM:ss",
        isoUtcDateTime:    "UTC:yyyy-mm-dd'T'HH:MM:ss'Z'",
        customDate1:    "'Good' X'! Today is ' dddd, dd mmmm yyyy '&bull;' h:MM:ss tt",
        customDate2:    "'Good' X'! Today is ' dddd, dd mmmm yyyy '&bull;' HH:MM:ss",
    };
    
    // Internationalization strings
    dateFormat.i18n={
        todNames: [
            "Morning","Afternoon","Evening",
        ],
        dayNames: [
            "Sun","Mon","Tue","Wed","Thu","Fri","Sat",
            "Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday",
        ],
        monthNames: [
            "Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec",
            "January","February","March","April","May","June","July","August","September","October","November","December",
        ]
    };
    
    // For convenience...
    Date.prototype.format=function (mask,utc) {
        return dateFormat(this,mask,utc);
    };
    To use it, simply place <span class="clock"></span> wherever you want the time to appear. You can also make CSS for the "clock" class to control it's appearance (such as using an LCD-like font or change it's size / color, etc...).

    As a fallback, you can place a static time string (maybe like one generated by PHP) inside the span, like this: <span class="clock">{PHP_TIME}</span>. This will at least show the user the time at the last page refresh (if they have JS turned off). Otherwise, the live clock will overwrite the static time and display live time.

    Of course, you need to kick-start the code with a Javascript doClock(); call somewhere in the page or as an "onload" event.

    Hope this is of some use to you (or anyone else).

    -- Roger
    Last edited by Krupski; 12-22-2010 at 08:44 PM. Reason: Changed code to show time at a certain timezone

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,516
    Thanks
    77
    Thanked 4,379 Times in 4,344 Posts
    Yes, but that clock does *NOT* show SERVER time.

    It shows the time ON THE USER'S MACHINE.

    Which might be in a time zone half way around the world from the server. Or the user's clock might simply be very wrong.

    The formatting part will work fine, no matter the source of the current time, but the main doClock function needs to be completely rewritten is you want the clock to display server time.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #7
    Regular Coder Krupski's Avatar
    Join Date
    Dec 2010
    Location
    United States of America
    Posts
    505
    Thanks
    39
    Thanked 47 Times in 46 Posts
    Quote Originally Posted by Old Pedant View Post
    Yes, but that clock does *NOT* show SERVER time.

    It shows the time ON THE USER'S MACHINE.

    Which might be in a time zone half way around the world from the server. Or the user's clock might simply be very wrong.

    The formatting part will work fine, no matter the source of the current time, but the main doClock function needs to be completely rewritten is you want the clock to display server time.
    Ah yes you are correct. I noticed that the OP wanted "live time display" and sort of missed the "server" part

    I suppose one could get the local server time and pass it to the JS function to be used as an offset to correct the client-side display to show the server side time.

    Now you have me thinking. I'm going to try it tonight!

    (edit to add): Actually all I would need to do would be to pass the server's timezone to the JS with a line or two of PHP...
    Last edited by Krupski; 12-22-2010 at 07:38 PM.

  • #8
    Regular Coder Krupski's Avatar
    Join Date
    Dec 2010
    Location
    United States of America
    Posts
    505
    Thanks
    39
    Thanked 47 Times in 46 Posts
    Quote Originally Posted by Old Pedant View Post
    Yes, but that clock does *NOT* show SERVER time.
    Easier than I thought. I just added another parameter to the "dateFormat()" call to make it display UTC time, then I add a fixed offset to the clock (in my case, GMT -5 is my timezone).

    So, with the line var offset = (-5 * 60 * 60 * 1000); (where the "-5" is my timezone), the clock will always display MY server time (accurate to the USER'S clock, though).

    If a person using this script is in a different timezone, all they need to is replace the "-5" with their timezone.

    I have a live test of it running... it should always display New York / Eastern time no matter what zone you are in. Try it if you wish:

    LINK

    It should work........ ?

  • #9
    New Coder
    Join Date
    May 2008
    Posts
    33
    Thanks
    11
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    Change your style, thus:
    Code:
    <style>
    .displaybox {
        position: relative;
        width:150px; height: 40px;
        overflow: hidden;
        background-color:#ffffff;
        border:2px solid #000000;
        padding:10px;
        font:24px normal verdana, helvetica, arial, sans-serif;
    }
    </style>
    You could also use overflow: scroll; but that's probably not what you are after.
    I will try it out when I get home!


    What had prompted me to look at this to begin with was a comment a friend had on her facebook about a consultant's webpage looking badly. Here is the site: http://sclafaniculinary.com/

    If you mouse over some of the images you will see it.


    But since I playing around with ajax and dynamic webpages I was curious how people best avoid these types of errors. Perhaps errorrs is to strong and I am just allowing myself to get annoyed by it. Still the question remains how to design without such problems and hopefully without scrollbars.

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,516
    Thanks
    77
    Thanked 4,379 Times in 4,344 Posts
    That culinary school page shows three different ways to handle the mouseover, so I think somebody is just experimenting with ideas. Granted, none of them are very good. <grin/>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #11
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,516
    Thanks
    77
    Thanked 4,379 Times in 4,344 Posts
    Quote Originally Posted by Krupski View Post
    So, with the line var offset = (-5 * 60 * 60 * 1000); (where the "-5" is my timezone), the clock will always display MY server time (accurate to the USER'S clock, though).
    Yeah, which means it's still yuck.

    The easy way to do this is simply pass the FULL server time to the JS code and use that and ignore the system clock.

    BUT....

    But then you CAN NOT use setTimeout() because if the JS code has (for example) an alert() or prompt() those will simply delay the timeout.

    Using setInterval is better, but it's still possible for timer events to be missed.

    So, yes, the *CORRECT* way to do this is (a) pass the server time to JS, (b) ASAP during the page get the client's clock time, (c) calculate the difference in the two times, and (d) on each click of the timer add that difference to the system clock and display *THAT* result.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #12
    Senior Coder DJCMBear's Avatar
    Join Date
    Mar 2010
    Location
    United Kindom
    Posts
    1,173
    Thanks
    14
    Thanked 136 Times in 136 Posts
    Just a little question to see which one is faster and more easier as it may help the OP out knowing more than one way.

    Would an AJAX call make the updates faster as this way you can have the server-side codes render the time and then have the javascript obtain that time and display it or would having php print the current time of page load to a javascript variable and have javascript do all the rendering?

    I would say the AJAX way would be best as it is more the server-side doing the physical coding and javascript would only be displaying it to the page and updating it every second or how ever long you want it to wait till it is updated.
    Official BinPress hand picked coder.
    For anyone worried about SQL injection go have a look at my small yet powerful script here.
    Go Pledge for Light Table, if it hit's $300,000 Python and other languages will get added.
    I am 1 of 65,608 people to get a Pebble Watch :P

  • #13
    New Coder
    Join Date
    May 2008
    Posts
    33
    Thanks
    11
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    That culinary school page shows three different ways to handle the mouseover, so I think somebody is just experimenting with ideas. Granted, none of them are very good. <grin/>
    So what are the good design practices for these situations?


  •  

    Posting Permissions

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