...

View Full Version : innerHTML/DIV size changing question



wjrasmussen
12-21-2010, 01:40 AM
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?

Kor
12-21-2010, 09:19 AM
Confusing. can you give us an example, like a test page?

wjrasmussen
12-22-2010, 01:07 AM
I put up an example of the resizing move elements on the page.

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

Old Pedant
12-22-2010, 02:43 AM
Change your style, thus:

<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.

Krupski
12-22-2010, 03:17 PM
I put up an example of the resizing move elements on the page.

http://www.proceduralgaming.com/test/ajax_worst_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:



/************
* 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

Old Pedant
12-22-2010, 07:53 PM
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.

Krupski
12-22-2010, 08:33 PM
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 :o

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...

Krupski
12-22-2010, 09:49 PM
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 (http://three-dog.homelinux.com/test.htm)

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

wjrasmussen
12-23-2010, 01:09 AM
Change your style, thus:

<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! :thumbsup:


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. :)

Old Pedant
12-23-2010, 01:21 AM
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/>

Old Pedant
12-23-2010, 01:25 AM
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.

DJCMBear
12-23-2010, 02:00 AM
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.

wjrasmussen
12-23-2010, 08:37 AM
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?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum