PDA

View Full Version : Determining Screen Resolution in IE



Jim Weinberg
04-24-2015, 07:45 PM
I want to position the items on my webpage relative to the viewer's monitor resolution.

I'm using the following code to determine the resolution:



var w = window,
d = document,
e = d.documentElement,
g = d.getElementsByTagName('body')[0],
x = w.innerWidth || e.clientWidth || g.clientWidth,
y = w.innerHeight|| e.clientHeight|| g.clientHeight;

It works in all browsers except IE. Can anyone tell me how to do this in IE?

Thanks.

jscheuer1
04-25-2015, 02:08 AM
You don't mean screen resolution. You are talking about browser window dimensions in pixels.

I'm not sure if you have the right and/or optimal trial objects and properties in the best order to determine x & y there. But assuming that you do, one major problem with IE in doing something like this is that it 'doesn't know' the window, document, nor page dimensions until the page has at least been parsed. It's complicated to get that in IE, so generally we wait until the window.onload event has fired before trying to figure this out (again assuming the code you have is right if used at the proper time):


<script type="text/javascript">
function dimfunc(){
var w = window,
d = document,
e = d.documentElement,
g = d.getElementsByTagName('body')[0],
x = w.innerWidth || e.clientWidth || g.clientWidth,
y = w.innerHeight|| e.clientHeight|| g.clientHeight;
/* do what you want with the x and y values here */
}
if (window.addEventListener){
window.addEventListener('load', dimfunc, false);
}
else if (window.attachEvent){
window.attachEvent('onload', dimfunc);
}
</script>


It's easier (jQuery determines what objects to query) and faster (jQuery determines when the DOM is loaded, which comes sooner than window.onload) using jQuery:


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1./jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
var x = $(window).width(), y = $(window).height();
/* do what you want with the x and y values here */
});
</script>

Beverleyh
04-25-2015, 09:13 AM
There's also a possibility what what you're trying to do can be achieved with CSS and media queries, but we'd need to see more of what you're doing in context so that we could advise which to use.

Jim Weinberg
04-25-2015, 07:47 PM
Beverley. Thanks for the input, but I went with John's suggestion.

John. Once again, you're spot on. Thanks so much. I now only have one problem with IE (other than it exists and people insist on using it). I'll post this as a separate thread if you want, but thought I'd attach it here.

I'm using a common routine to build a table from a searched array, on the fly. The first call builds the table in the parent page. The second, builds the table in a pop-up page. For the first call, I pass the routine the parent window object. For the second, I pass the pop-up window object. Like everything else, it works fine in all browsers I've tried ... except IE (of course).

The code looks like this (for the first call):


<table height="100%" width="100%" bgcolor="white" border=1 cellspacing=5 cellpadding=5><tr>
<script>build_table(this,IdPeople)</script>


For the second call I use the following:


var table='<table width=90% bgcolor="white" align="center" border=0 cellspacing=5 cellpadding=5><tr>';
var w = window.open('', '', 'width=800,height=530,scrollbars=yes,left=150,top=182');
w.document.write(table);
build_table(w,searchResults);


With IE, it doesn't get past the document.write statement. The build routine isn't called. Is there another way to do this for IE?

Thanks.
Jim

jscheuer1
04-25-2015, 08:30 PM
You are on very shaky ground here. Many browsers - Not just IE, depending upon how they are configured might block this popup before you can write to it. You might be better off popping up an absolutely positioned div that looks sort of like an independent window, and that instead of using document.write, either create the elements you need and append them to this div, and/or alter its (and/or its child element's) innerHTML property to achieve your aim.

But it's still possible that what you are doing is OK-ish and can be tweaked. I sort of doubt that though.

In either case, in order to advise you further, I would need to see a demo of the problem. Also of importance could be the version of IE that you are having the problem in. I tried in IE 11, using its console, and it blocked the popup, but that's no proof of anything because popups called from the console are treated differently than ones launched via a user's click.

One other thing, Beverley is right, in that determining how to display your content is best done via css, and for this sort of thing media queries are usually the ticket. Especially if you consider that document.write and the codes I gave you initially to resolve this do not play well with each other. At the same time, since you're already using javascript to create the content, it's not quite so bad to also use javascript to determine how that content should be displayed. It might even be preferable in certain cases.

Since I'm not as familiar with media queries as is Beverley, I would appreciate if she were to advise us further on what we might do in this specific case using them.

Still, for either of us to help, I think we need to see a demo and know which IE version is giving you the problem

Beverleyh
04-25-2015, 09:23 PM
You might be better off popping up an absolutely positioned div that looks sort of like an independent window, and that instead of using document.write, either create the elements you need and append them to this div, and/or alter its (and/or its child element's) innerHTML property to achieve your aim.This is what I would try to work with first - formatting and positioning the search results with CSS and media queries. Media queries might not be needed but I agree with John about seeing a sample/demo so we can make a better educated decision on which route to take.

Jim Weinberg
04-26-2015, 02:30 PM
First, let me apologize for the confusion. The two issues are actually for two different pages. Once I have this one working I'll go back and try using CSS to do the positioning, although I'm concerned because user's have different screens and different browsers.

Anyway, I've put up this webpage and some relevant data. the URL is http://ohiobuttons.org/test/Identifiable_People.html

The initial display works, so I'm pretty sure that the build_table functions is okay. There may be some other IE problems in the search_array function, but from the testing I've done it looks like the proper data will be passed to the build_table function if I/we can solve the w.document.write issue. The actual line of code is located around line 150. BTW, I'm testing in IE8. I know that's not the latest version (I believe it's up to 10 or 11), but I like to use browsers about 2 versions back to make sure pages work for those that don't have the latest version.

One last comment. I know that some of the code needs to be cleaned up. I'll do that when this but I'm a firm believer that it's a lot easier to make working code pretty that to make pretty code work.

Beverleyh
04-26-2015, 03:48 PM
Ok - I'm looking at the page on an iPad. I gather I'm to type a name to generate the search table?

I tried entering "Liz Taylor" and again as "Liz, Taylor" and a popup says "Your search returned no matches..."

At this stage I'm presuming that the search table generation is a work in progress, based on your phrasing here;

Once I have this one working I'll go back and try using CSS to do the positioning...

I'm not in a position to help with code at the mo - on iPad, but John is way better than me with JavaScript anyway - but I'll keep checking in and hop in with formatting and presentation input when that point comes. I'll be back at a desk tomorrow.

Jim Weinberg
04-26-2015, 05:04 PM
Beverly. My bad. You need to enter descriptive keywords such as: man, woman, queen, etc., separated by commas. You can get a pretty good idea of what it does in you use man, child. If you select Any Words you'll get around 18 pics. If you select All words, you only get 1. Sorry for the confusion.

BTW, can I assume that the page works in an Ipad????? I can't test that.

Beverleyh
04-26-2015, 06:32 PM
Here are my findings on iPad, in real time while I test and report back...

First browser tested is Mercury - not the default browser, but a common alternative and my fave due to advanced gestures and some other nifty settings; Here, unfortunately, the search generates no results. I entered "queen" as my keyword, and from the screen keyboard, tapped "go" (which is the equiv of pressing a submit button). No joy, so I refreshed, typed "man" instead, and hit the little magnifying glass icon next to your search field to see if that made a difference. Unfortunately nothing happened again. Now, I mashed around with it - pressing and holding the "go" button, and one time managed to generate the search - this came up as a separate white page, a selection of buttons and "about:blank" in the address bar. Unfortunately, what also happened is that the original page closed in the background when the search results page loaded, which meant that I had no way of returning to the original page.

So next I moved to my next fave iPad browser, Chrome (I like this because of syncing and the incognito tab is fab for testing cookie scripts). The page loaded and I typed "queen" in the search field. Pressing the screen keyboard's "go" button did nothing, BUT tapping your magnifying glass icon immediately after *did* open the results in a new window. The original window stayed open in the background too. I reloaded the page and this time typed "woman" and hit the magnify icon first. Nothing, but on the second hit the results opened in a new page. Third reload, I typed "man" and again tried the keyboard "go" button. I hit this repeatedly but nothing happened. I closed the keyboard, focused the cursor in the search field again (but didn't delete or type anything) and the screen keyboard revealed itself again. This time when I hit "go", the search results opened in a new window. So it seems that the second submit action generates the search. I also noticed that a notification bar displayed at the bottom of the browser window and reported that X popups had been blocked, so I think that what is happening is that the first submit generates search results that *should* open a new page, except they are actually been blocked by the internal Chrome popup blocker. Perseverance on the submit key seems to override this behaviour though. But it seems too unpredictable for the common user (ie to somebody who is not testing or looking for patterns).

At this point I'm thinking that generating the results in the original page are the way to go, but I'll now head over to test in Safari (default browser for iOS). This is easier to describe; the "go" key on the keyboard does not submit the search no matter how often I hit it, or if I refocus the search field or hit the magnify icon between. The magnifying glass icon however, submits the search first time, every time, and opens the search in a new window. The original page stays open too.

So you can tell from my ramblings above that different browsers on iPad behave very differently and produce vastly different results - the main problem being how they interpret or react to the new page popup. I think we should work at standardising the behaviour to make it as predictable as possible. For that, I'd like to see how the search functions with the results generated in-page.

Hope that helps

BorderTerroir
04-26-2015, 07:22 PM
I know that's not the latest version (I believe it's up to 10 or 11), but I like to use browsers about 2 versions back to make sure pages work for those that don't have the latest version.


Sadly this is not always true. The company I worked for before I retired once upgraded from IE6 to IE7 and then discovered some of the utility safety sites did not work. We had to restore IE6 on some machines.

Jim Weinberg
04-26-2015, 07:49 PM
Hi Beverly.

I truly appreciate your efforts. As I said earlier, I can't test iPad and, to be honest, that's not my primary user base. I'm really targeting people with desktop and laptop computers. That makes up roughly 86+% of my user base.

Don't get me wrong, I'd love to be able to have people with iPads and tablets be able to utilize these pages. I'm just not sure that you can write code that is universal for all browsers on all devices. Maybe I'm old fashion ... or maybe just old.:(

When (if) I can get this working in IE, I'd love to explore making it compatible with some of the more modern devices.

Best regards,
Jim

Beverleyh
04-26-2015, 09:39 PM
Ok - take the iPad out if the equation and you're still left a script that currently generates a new window, popup or whatever you want to call it, rather unpredictably, and that *still* poses a problem to "desktop" browsers.

Aside from the fact that desktop is no longer synonymous with mouse or a large screen, and mobile/tablet does not always equate to touch on a small screen (there are desktops/laptops that function via mouse AND touch and mobile devices that have a higher resolution than some laptops or use a stylus or move a cursor via a trackpad), the behaviour I described on iPad in Chrome is similar to that in Chrome on desktop in the sense that new windows generated via scripts (rather than the target="_blank" attribute in anchors/links) will often be intercepted by the browser's internal popup blocker. And then what of the popup blockers that users knowingly or unknowingly install as part of search toolbars that come bundled with software packages? How can you work your script around those? The number of combinations of device, browser, operating system, user add-ons, firewalls, etc., makes front-end web development one of the most hostile working environments at the best of times, and your search's new window is introducing another layer of difficulty that could be avoided.

I'll reiterate what John said in his earlier post http://www.dynamicdrive.com/forums/showthread.php?78251-Determining-Screen-Resolution-in-IE&p=312092#post312092 - you're on shaky ground with this popup window, and I urge you to consider writing the search results to the current/original page to eliminate the unpredictability of how the new window popup is handled.

molendijk
04-26-2015, 10:46 PM
...new windows generated via scripts (rather than the target="_blank" attribute in anchors/links) will often be intercepted by the browser's internal popup blocker. And then what of the popup blockers that users knowingly or unknowingly install as part of search toolbars that come bundled with software packages? How can you work your script around those? The number of combinations of device, browser, operating system, user add-ons, firewalls, etc., makes front-end web development one of the most hostile working environments at the best of times, and your search's new window is introducing another layer of difficulty that could be avoided.
Beverleyh, I'm not so sure about that. I've been experimenting with popups generated by javascript for quite some time, and I've found that, in the overwhelming majority of cases, popup blockers won't block anything if the new window's appearance is attached to an onclick event on a link or another event that can be taken to mean that a person has explicitly requested a new window (popup), like the onchange in a select box.
Browsers rarely make mistakes as far as distinguishing between explicit requests (onclick, onchange) and implicite ones (like onload, onmouseover etc.) is concerned. And if they make a mistake (I hate Safari for that), there's a cure, see http://www.dynamicdrive.com/forums/entry.php?271-New-windows-new-tabs-and-popup-blockers.
So let's not be too pessimistic about Jim's approach. (But he should not use document.write, for more than one reason).

Beverleyh
04-27-2015, 08:58 AM
Browsers rarely make mistakes as far as distinguishing between explicit requests (onclick, onchange) and implicite ones (like onload, onmouseover etc.) is concernedMaybe so, but there are more things than the behaviour of 3 or 4 common desktop browsers to consider, such as the device that the visitor is using at any one time (which may shift between mouse and touch, even on the same device), browser choice, personal settings, and add-ons that change the browser's behaviour - and these things cannot be predicted or controlled.

From an accessibility standpoint, opening up a new window can create many problems. For example, speaking as somebody who worked with a colleague living with severe tunnel vision who used a screen enlarger, he had major difficulties with new windows that opened at specific dimensions, since they are extremely difficult to resize.

From a UX perspective, new windows might be missed. Or the different behaviours between devices might generate confusion (people browse on different devices at different times and a new window may open in one environment but not another, or be generated via one action and not another - previously discussed). And there are even browser extensions that close inactive windows after X minutes of inactivity - what if you generated a popup and focused your attention on that for so long that the main website closed?

These (and many more) are all points to consider, not only the scripting aspect. Speaking of which, your JavaScript Safari cure is a few years old now so you might want to revisit its functionality again :)

I think you're overlooking the main point of my earlier post, which is that the front-end web environment is so very unpredictable - different behaviours, different settings, different combinations - that it would be best to eliminate the additional layers of difficulty wherever possible, which in the case of the search results popup is probably to write the search results to the same/existing window instead.

I don't feel that myself or John were being pessimistic when we recommended this. I feel that it was more a recommendation based on our own professional strengths and experiences. And certainly, if Jim wants to continue with the scripted new window approach, that's fine, and we'll try to assist where we can - offering insight into potential problems as well as offering recommendations and solutions :)

molendijk
04-27-2015, 10:08 AM
I think you're overlooking the main point of my earlier post, which is that the front-end web environment is so very unpredictable - different behaviours, different settings, different combinations - that it would be best to eliminate the additional layers of difficulty wherever possible, which in the case of the search results popup is probably to write the search results to the same/existing window instead.
I agree, of course. I only wanted to point out that popups are less problematic than many people think.
As for pessimism, I probably used 'so let's not be too pessimistic about Jim's approach' in a non-English way. In the Dutch translation of this expression, 'us' does not refer to any specific person, and 'to be not pessimistic about X' simply means something like 'X might work' in this context. So 'let's not be too pessimistic about Jim's approach' must be read as 'Jim's approach might work after all'.
As for replacing the popup with something else, if Jim needs external pages (same domain) to accomplish what he wants, he must resort to iframes (or maybe text-objects (<object type="text/html">)), which have their own specific issues. One issue is that they add entries to the browser's history (if they contain links); this may completely mess up the browser's history. So a user who opens a 'iframe-popup', clicks on several links inside the iframed page and then goes to a new main page may have to repeatedly click on the browser's back button without seeing any change on the screen before reaching the page that he/she visited before opening the iframe.

Jim Weinberg
04-27-2015, 12:33 PM
Okay. First, let me apologize if I sound rude. But, I'm extremely frustrated! I asked a simple question: how can I write to a pop-up window in IE. My current code works in Firefox, Chrome, Safari, and Opera. In IE, the window is created, but I can't write to it. Apparently, I need to find another forum in order to get an answer.

molendijk
04-27-2015, 02:04 PM
I guess Beverleyh or John should react to this, not me, because I only commented on certain points made by Berverleyh. So I apologize in advance if my presence here is inappropriate.
Anyway, it might help if you did a code cleanup first. The validator at https://validator.w3.org/ complains about a great number of serious errors that might be the explanation of IE's behavior with respect to your code.
Btw, if you think a question is simple, that doesn't mean the answer is simple too. There are many ways to write pseudo-popups, but the way in which it should be done in particular cases may depend on numerous factors. So try to validate your page first.

jscheuer1
04-27-2015, 05:14 PM
Um, I cannot duplicate the error yet. IE 11 (even in its IE 8 mode) is fine with it. How are you testing this? IE 8 is deprecated as is the the latest (Win XP) and all other Windows OS's that cannot run later versions of IE. So I wouldn't worry too much. I think I have a virtual machine that still runs that has IE 8 on it under Win XP. If it fires up and I can get any answers there, I'll let you know.

BTW, if some poor soul is stuck with Win XP, every time they boot they get a warning that their OS is unsupported - at least until they turn that warning off. I'm nut sure it can be turned off.

jscheuer1
04-27-2015, 05:36 PM
OK, that worked, in that I could load up IE 8 and see that it doesn't work. I then chose IE 8 compatibility mode, and then - although the page looked a bit odd, all the information was there and the search feature worked. Since the IE 8 browser is so rare, I suggest simply using a compatibility mode meta tag to force it into this mode for that page. Put this in the head of the page (addition highlighted as shown):


<!DOCTYPE html PUBLIC "-//W3C//DTD Transitional//EN">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<meta content="Jim Weinberg" name="author">
<title>Identifiable People Page</title>


In the meantime, I will continue scratching my head to determine if there's a better fix. I used to be up on a lot of the differences in IE versions. But I cannot promise anything. Still you would be better off with a pop-up div.

BTW - fortunately IE 10 and later ignore this tag and probably will have no problem with the page 'as is' IE 11 certainly has no trouble.

molendijk
04-27-2015, 05:42 PM
It's fine here too with IE11.
As for the errors in your code, I saw a first occurrence of a document.write('</tr ...') without a preceding document.write('<tr ...'), and a document.write('</table ...') without any document.write('<table ...')

jscheuer1
04-27-2015, 05:50 PM
Hmm, weird, now working in IE 8 as well without the meta tag and without compatibility mode. Did you change something? If you did, it doesn't appear to be the document write part. I was about to guess that there was some problem with the search always coming up empty in IE 8 because I was at first getting the no matches dialogue. If that was the problem, it's fixed now.

Jim Weinberg
04-27-2015, 09:19 PM
Arie & John.

Arie. First, thanks for the information. I did the validation and the results were not surprising. They basically fell into 2 categories: I'm building a table on the fly, part with html and part with javascript, so the code appears fragmented, but all the pieces are really there. The second category is, for want of a better description, just messy code. I understand that. I find it's far easier to make working code pristine than to get pristine code to work (present situation withstanding). Anyway, thanks again. After I get this thing to work I'll go back and put all the tags where they should be.

John. I still can't get this page to work in IE8. I borrowed my son's laptop with IE11 and it does work there, although I don't like the way it looks (my problem). I understand that IE8 is no longer supported, but I also know that it's still being used by a lot of people.

After reading your comment about the search routine, I put a trap in just before the call to the build routine and the searchResults array has valid data.

Now for the really weird part. No, I haven't changed a thing since I uploaded the webpage to my server. I've been working in a copy, so as not to muddy the waters. I have no idea why it suddenly started working for you. If you didn't modify the code, then I have to assume you've installed the Twilight Zone add-on for your copy of IE8.

I need a break. I'll come back to this tomorrow. Actually, I need a drink. Maybe many.

Again, my thanks for all your efforts.

Jim

jscheuer1
04-27-2015, 11:57 PM
Twilight zone add-on indeed. Actually that's not too far off. IE 8 was so buggy that odd things could 'fix' it. As I said, I used compatibility mode, and it worked in that. Once I did that, it worked in regular IE 8 mode. I was naturally suspicious. So I cleared the cache once with IE 8's developer's tools util and then another time with the browser closed using control panel's Internet Options tool. Both times, after I relaunched the page in IE 8, it still worked. That doesn't absolutely mean that it wasn't some trick caused by using compatibility mode, but it tends to rule it out.

But the bottom line now is that if I can no longer duplicate the problem in IE 8, it becomes very difficult to solve it.

Are you sure you have the browser in standards mode and updated to at least the latest version of IE 8 available?

I'll try again now to see if I can get it to have the problem again. But unless it does - again, not much I can do.

No luck - still working in IE 8. What OS are you using?

jscheuer1
04-28-2015, 02:57 AM
One other thing I'm thinking - if you say you're working from a copy, put that up as a separate page and I will have a look at it without using compat mode to see if i can figure it out. Also, you can always invoke compat mode as I suggested here:

http://www.dynamicdrive.com/forums/showthread.php?78251-Determining-Screen-Resolution-in-IE&p=312143#post312143

Jim Weinberg
04-28-2015, 12:31 PM
Good Morning, John.

Well, today doesn't look any brighter than yesterday. I uploaded the copy I've been working on (Identifiable_People1.html) and tested it both with and without compatibility set. No go. I keep getting the following error:



Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SearchToolbar 1.2; BTRS125042; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; HPDTDF; .NET4.0C; .NET4.0E)
Timestamp: Tue, 28 Apr 2015 12:21:38 UTC

Message: The tag is invalid.

Line: 180
Char: 1
Code: 0
URI: http://ohiobuttons.org/test/Identifiable_People1.html


That's the "w.document.write(table);" line.

As far as I know, my IE8 is up to date. Version 8.0.7601.17514.

I understand that, since you can no longer duplicate the problem, you can't go much further in the investigation.

I think I need to rethink my approach. If you have any ideas, I'd be glad to hear them. Otherwise, let's let it go for a while. I do appreciate all your work on this.

Talk to you later.

Jim

jscheuer1
04-28-2015, 02:46 PM
Well, we can try another approach, but last night I was thinking, what would be wrong with what you are doing if the browser was really strict? What I came up with was the old unclosed tag issue. You do eventually close all the tags that you are opening, but - as you go along, there are unclosed tags written to the popup that are left hanging until the next or even subsequent writes. Also, there is no tbody tag - IE can get very snippy about that sometimes. So I rewrote things so that there would be a tbody and so that the entire string of tags would be written to the popup at once.

No guarantee this will fix the problem, but it's worth a try. Meanwhile I will see if I can get my IE 8 to barf on the copy.

The code is too long to post in this message. If it doesn't fit by itself in another, I will attach it here as a .zip

jscheuer1
04-28-2015, 02:46 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD Transitional//EN">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<meta content="Jim Weinberg" name="author">
<title>Identifiable People Page</title>

<link rel="SHORTCUT ICON" href="Graphics/URLIcon.ico">

<link type="text/css" rel="stylesheet" href="Script_Files/screen.css" media="screen,projection,tv"/>

<script src="Script_Files/PeoplePics.js"></script>

<script src="Script_Files/slideshow.js"></script>

<style>
#toprightdivbox div {
padding: 0px;
margin: 0px;
position: relative;
background: none repeat scroll 0% 0% #F0F9ED;

}
#toprightdivbox {
float: center;
text-align: right;
margin-top: 20px;
width: 840px;
}
#toprightdivbox #zoom_query {
margin: 7px;
border-radius: 3px;
width: 580px;
padding: 5px 35px 5px 5px;
height: 25px;
border: 1px solid #808080;
transition: all 0.2s ease-in-out 0s;
}
</style>

<script>
var IdPeople = new Array()
IdPeople[0] = ['Graphics/IP_Buttons/Abraham & Tad Lincoln.jpg','man,male,president,boy,child','Abraham & Tad Lincoln']
IdPeople[1] = ['Graphics/IP_Buttons/Admiral Peary.gif','man,male,explorer','Admiral Peary']
IdPeople[2] = ['Graphics/IP_Buttons/Andreas Hofer 2.jpg','man,male,soldier','Andreas Hofer']
IdPeople[3] = ['Graphics/IP_Buttons/Andreas Hofer.jpg','man,male,soldier','Andreas Hofer']
IdPeople[4] = ['Graphics/IP_Buttons/Andrew Carnegie - Iron King.jpg','man,male,american,industrialist,philanthropist','Andrew Carnegie']
IdPeople[5] = ['Graphics/IP_Buttons/Arsineo IV - Y.jpg','woman,female,ruler,monarch,royalty,queen,egyptian','Arsineo IV of Egypt']
IdPeople[6] = ['Graphics/IP_Buttons/Arsinoe IV - Horn.jpg','woman,female,ruler,monarch,royalty,queen,egyptian','Arsineo IV of Egypt']
IdPeople[7] = ['Graphics/IP_Buttons/Balboa.jpg','man,male,explorer','Balboa']
IdPeople[8] = ['Graphics/IP_Buttons/Barbarossa.jpg','man,male,explorer','Barbarossa']
IdPeople[9] = ['Graphics/IP_Buttons/Benvenuto Cellini.jpg','man,male,sculptor,artist,italian','Benvenuto Cellini']
IdPeople[10] = ['Graphics/IP_Buttons/Charles Brandon.jpg','man,male,royalty,british,english','Charles Brandon']
IdPeople[11] = ['Graphics/IP_Buttons/Charles I Realistic.jpg','man,male,royalty,british,english,monarch,king','Charles I of England']
IdPeople[12] = ['Graphics/IP_Buttons/Charles I steel cuts.jpg','man,male,royalty,british,english,monarch,king','Charles I of England']
IdPeople[13] = ['Graphics/IP_Buttons/King Charles of England.jpg','man,male,royalty,british,english,monarch,king','Charles of England']
IdPeople[14] = ['Graphics/IP_Buttons/Charles V of Spain and Germany.jpg','man,male,ruler,monarch,royalty,king,spanish,german,roman','Charles V<br>of Spain & Germany']
IdPeople[15] = ['Graphics/IP_Buttons/Charlotte Corday.jpg','woman,female,french,revolution','Charlotte Corday']
IdPeople[16] = ['Graphics/IP_Buttons/Buddah.gif','man,male,religious,indian','Gautama Buddah']
IdPeople[17] = ['Graphics/IP_Buttons/George Washington.gif','man,male,president','George Washington']
IdPeople[18] = ['Graphics/IP_Buttons/Humphry Bogard.jpg','man,male,actor','Humphry Bogard']
IdPeople[19] = ['Graphics/IP_Buttons/James Dean.jpg','man,male,actor','James Dean']
IdPeople[20] = ['Graphics/IP_Buttons/Judy Garland.jpg','woman,female,actress','Judy Garland']
IdPeople[21] = ['Graphics/IP_Buttons/Liz Taylor.jpg','woman,female,actress','Liz Taylor']
IdPeople[22] = ['Graphics/IP_Buttons/Marilyn Monroe.jpg','woman,female,actress','Marilyn Monroe']
IdPeople[23] = ['Graphics/IP_Buttons/Martin Luther King.gif','man,male,religious,baptist,minister,activist,civil,rights','Martin Luther King Jr.']
IdPeople[24] = ['Graphics/IP_Buttons/Napoleon.gif','man,male,ruler,monarch,royalty,french,revolution','Napoleon']
IdPeople[25] = ['Graphics/IP_Buttons/King Richard.gif','man,male,ruler,monarch,royalty,king,english,lionheart','Richard of England']
</script>

<script>
function build_table(w,arrayname, completefirst){
var total_pics=arrayname.length;
var last_row = Math.floor(total_pics/6) * 6;
var last_row_pics = total_pics - last_row;
var i=0
for (p=0;p<total_pics;p++){
picture = '<img height=105px src="' + arrayname[p][0] + '">';
picture = picture + '<br><center>' + arrayname[p][2];
if(p < last_row){completefirst? w += '<td align="center">' + picture + '</td>' : w.document.writeln('<td align="center">' + picture + '</td>');}
i = i + 1
if (i == 6){
completefirst? w += '</tr><tr>' : w.document.write('</tr><tr>')
i = 0
}
if(p > last_row-1 && last_row_pics > 0) {
switch(last_row_pics){
case 1:
completefirst? w += '<td colspan=6 valign="top" align="center">' + picture + '</td>': w.document.writeln('<td colspan=6 valign="top" align="center">' + picture + '</td>')
break;
case 2:
completefirst? w += '<td colspan=3 valign="top" align="center">' + picture + '</td>' : w.document.writeln('<td colspan=3 valign="top" align="center">' + picture + '</td>')
break;
case 3:
completefirst? w += '<td colspan=2 valign="top" align="center">' + picture + '</td>' : w.document.writeln('<td colspan=2 valign="top" align="center">' + picture + '</td>')
break;
case 4:
if(p == last_row) completefirst? w += '<td>&nbsp;</td>' : w.document.writeln('<td>&nbsp;</td>');
completefirst? w += '<td valign="top" align="center">' + picture + '</td>' : w.document.writeln('<td valign="top" align="center">' + picture + '</td>');
break;
case 5:
completefirst? w += '<td valign="top" align="center">' + picture + '</td>' : w.document.writeln('<td valign="top" align="center">' + picture + '</td>');
}
}
}
if(completefirst) return w;
}
</script>

<script>
function search_array(){
var keywords = document.getElementById("zoom_query").value;
keywords = keywords.replace(/\s/g, '');
keyword_count = keywords.split(',').length
if(keywords != ""){
if(keyword_count > 4){
confirm('Search Results','<br>Please limit your search to only four keyword.<p>',getResults);
}else{
var keyword=keywords.split(',');
table='<table width=90% bgcolor="white" align="center" border=0 cellspacing=5 cellpadding=5><tbody><tr>';
var searchResults = new Array();

j=0;
var e = document.getElementById("search_type");
var type_search = e.options[e.selectedIndex].value;
for(p=0;p<IdPeople.length;p++){
search_count = 0
descriptor_count = IdPeople[p][1].split(',').length;
descriptor = IdPeople[p][1].split(',');
for(i=0;i<keyword_count;i++){
for (k=0;k<descriptor_count;k++){
if(keyword[i].toLowerCase() == descriptor[k]){
if(type_search == "Any"){
search_count = keyword_count;
break;
}else{
search_count = search_count+1;
}
}
}
if(search_count == keyword_count){
searchResults[j]=IdPeople[p];
j = j+1
break
}
}
}

if(j>0){
var w = window.open('', '', 'width=800,height=530,scrollbars=yes,left=150,top=182');

//w.document.write(table);
var wHTML = table;
wHTML = build_table(wHTML,searchResults, true);
w.document.write(wHTML + '</tr></tbody></table>');
w.document.close(); // needed for chrome and safari

//return false;
}else{
confirm('Search Results',"<br>Your search returned no matches.<br>Please try different keywords.<p>");
}
}
}else{
confirm('Search Results','<br>Please specify at least one keyword.<p>',getResults);
}
}

function getResults(results){
}
</script>
</head>

<body background="Graphics/IP_Buttons/background1.jpg">
&nbsp;<br>
<center>
<font color="#FCE05E" size="+3" face="Arial">
<b><i>Identifiable People on Buttons</i></b></font>
<br>&nbsp;<br>
<table bgcolor="#c0c0c0" border=3 bordercolor="#2b405b"><tr>
<td id="VU" align="center" valign="middle">
<!-- new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder: "R") -->
<script>new fadeshow(PeoplePics, 150, 200, 0, 4167, 0)</script>
</td></tr>
</table>

<div id="toprightdivbox">
<div id="topformx">
<form name="search form" action="javascript:search_array()">
<input id="zoom_query" class="zoom_searchbox topsearchbox" type="text" placeholder="Search Identifiable People. Enter up to 4 keywords separated by commas." size="20" name="zoom_query" onclick=document.getElementById('zoom_query').placeholder=''></input>
<input id="query_submit" type="image" src="Graphics/magnify.gif"></input>
&nbsp;&nbsp;&nbsp;<select name="search_type" id="search_type" value="">
<option value="Any">Select search type</option>
<option value="Any">Any Words</option>
<option value="All">All Words</option>
</select>&nbsp;&nbsp;&nbsp;
</form>
</div>
</div>

<div style="height: 87%; width:89%; overflow: auto; position:absolute; top:390px; left:60px">
<center><table height="100%" width="100%" bgcolor="white" border=1 cellspacing=10 cellpadding=5><tr>

<script>build_table(this,IdPeople)</script>

</tr></table>
</div>
<div style=" margin-bottom:54%;"></div>
<script type="text/javascript" src="Script_Files/eAlert.js"></script>
<!--
<img src="http://www.ohiobuttons.org/cgi-bin/BSCounter/bsimgcount.cgi?file=searchpage&style=plain_b" border="0" height="0" width="0" align="top">
-->
</body>

jscheuer1
04-28-2015, 03:01 PM
And, oh - Are you running IE 8 on Win 7 or Vista 64 bit? If so, that's unrealistic.

Jim Weinberg
04-28-2015, 05:37 PM
Hi John.

Yea, running it on win7 64bit. What can I say.

The good news is that I got it working in all browsers including IE8 & 11. I started just trying to get it to work with IE. Took a while, but I finally got it. It was then a lot easier to get it to work with less .... arrogant(?) browsers. I'm going to replace the original Identifiable_People.html file as soon as I do some clean up (nod to Arie). Probably later today or tomorrow.

Right now, I need pizza.

Once again, I appreciate all your efforts on this.

Best regards,
Jim
p.s. I'm going to be adding a couple of features to the page so I may be back in touch if that's okay. :)

jscheuer1
04-29-2015, 03:42 AM
Gandhi was also an activist. MLK was also a pacifist. Not sure if you have those yet.

Jim Weinberg
04-29-2015, 02:10 PM
Hey John.

I put up the new version. Turns out, rethinking the approach was a lot easier than I thought. I only have to check which browser is being used one place. I know that's considered poor coding, but it works.

Thanks for the added keywords, I'll add them to the data array. Coming up with everything someone might want to search on is going to be really fun.

BTW, in case you're wondering, I'm doing this for the members of the National and International Button Societies, whose members collect and display new, vintage and antique clothing buttons. The oldest known button was made of a curved shell, about 5000 years ago. A large number of these buttons have faces on them and the members can't always identify whose face it is. This is an on going project to assist them in the identification.

Best regards,
Jim

jscheuer1
04-29-2015, 04:02 PM
I think that at this late date, browser sniffing older IE is fine. It's pretty much unavoidable if you want to support those quirky browsers. The only other thing you can do is a feature test. But that's really just another type of sniffing unless it's the exact feature you want to use at that point in the code. Testing the support for writing to the document in a pop up at that point would probably be cumbersome at best. That said, not so sure 'Trident' is a good test of the UA to sniff out IE. And you only want older IE. I would use something like:


/MSIE \d{1}/.test(navigator.userAgent)

replacing:


if (navigator.userAgent.indexOf("Trident")!=-1)pbody.innerHTML=message + '</tr></table>'; //For IE
if (navigator.userAgent.indexOf("Trident")==-1)w.document.write(message + '</tr></table>'); //For everyone else


with:


if (/MSIE \d{1}/.test(navigator.userAgent)) {pbody.innerHTML=message + '</tr></table>';} //For IE
else {w.document.write(message + '</tr></table>');} //For everyone else

That will stop at IE 9. All newer IE will use the 'everybody else' path.

However, I wonder if the innerHTML method might not be workable for all browsers making the pop up? Any tests of that yet?

Jim Weinberg
04-29-2015, 04:35 PM
Hi John.

I looked at trapping on MSIE to limit the versions of IE, but it turns out that using innerHTML works for all versions of IE, even 11. I did check the use of innerHTML with other browsers, but a strange thing happens. The pop-up window is created and the table is written and the "name" is written to each cell, but the graphics are not displayed (even though the <img> tags are in the message.

Thanks again for all your help. It's always a pleasure to work with you. I think we can mark this Resolved.

Best regards,
Jim