Javascript Disabled Detected

You currently have javascript disabled. Several functions may not work. Please re-enable javascript to access full functionality.

Java Script warning message onload!

Started by JonnyIrving, Jan 29 2010 12:48 PM

Please log in to reply

6 replies to this topic

#1 JonnyIrving

Dedicated Member

Members
119 posts

WDF Reputation

1
Neutral

Gender:Male
Location:Newcastle-uponTyne, UK
Experience:Beginner
Area of Expertise:Web Designer

Posted 29 January 2010 - 12:48 PM

Hey everyone,

I'm currently developing a page that detects the users screen res and browser version(this code was in the body section so ran when ever a page loaded). If they are not of an acceptable standard a document.write function displays a message warning. When I had my javascript in the html file this worked fine.
I placed the javascript in the right position on the page so that when it ran the document.write it put the warning message in the right place on the page.

I now want to make it so my javascript is in an exsternal file. I saved the code in a .js file, I linked to the .js file in the <head> and now I have no idea how to make it so the code runs when the page loads and puts the document.write messages in the right place.

My .js file:

function checks(){ 
						var browserver = navigator.userAgent.toLowerCase();
						
						
						alert ("Hello, I am coming from and external javascript"); 
						
					//This if selector looks to see if the "useragent" (version) contains the string "msie 6" if it does it is IE6
						if 
						(
						browserver.indexOf('msie 4')!= -1 && browserver.indexOf('msie 7')== -1 && browserver.indexOf('msie 8')== -1||
						browserver.indexOf('msie 5')!= -1 && browserver.indexOf('msie 7')== -1 && browserver.indexOf('msie 8')== -1||
						browserver.indexOf('msie 6')!= -1 && browserver.indexOf('msie 7')== -1 && browserver.indexOf('msie 8')== -1||
						browserver.indexOf('firefox/3.0')!= -1 && browserver.indexOf('msie 7')== -1 && browserver.indexOf('msie 8')== -1||
						browserver.indexOf('firefox/2')!= -1 && browserver.indexOf('msie 7')== -1 && browserver.indexOf('msie 8')== -1||
						browserver.indexOf('firefox/1')!= -1 && browserver.indexOf('msie 7')== -1 && browserver.indexOf('msie 8')== -1||
						browserver.indexOf('firefox/0')!= -1 && browserver.indexOf('msie 7')== -1 && browserver.indexOf('msie 8')== -1
						)
						{
						parent.document.write("<table><tr><td><img src='https://portal.durhamlearning.net/Image Library/red.gif' alt='Warning' align='absmiddle'/></td><td>The Internet browser you are using is outdated and will affect the quality of your experience. Please consult your system administrator about updating your browser.</td></tr></table>")
						}
				
						if (screen.width<1024)//This if selector detects small screen Size
						{
						 parent.document.write("<table><tr><td><img src='https://portal.durhamlearning.net/Image Library/red.gif' alt='Warning' align='absmiddle'/></td><td> Your screen resolution is lower than the recommended minimum size of ");
						 parent.document.write(" 1024 pixels wide. Currently, your resolution is only set to a width of "+ screen.width  + " pixels. <a href='https://portal.durhamlearning.net/Help%20Desk/Lists/FrequentlyAsked%20Questions/DispForm.aspx?ID=53&amp;RootFolder=%2fHelp%20Desk%2fLists%2fFrequentlyAsked%20Questions%2fComputer%20Setup'>Help</a></td></tr></table>");
						}
					}

Back to top

#2 ElanMan

really?

Privileged
3,315 posts

WDF Reputation

56
Excellent

Gender:Male
Experience:Nothing
Area of Expertise:Nothing

Posted 29 January 2010 - 09:14 PM

Ok, first things first.
You have one function, checks() that is performing 2 tasks.
Split them up and it becomes much simpler.
Load the screen res checker just before the last </body> of your page

<script type="text/javascript" src="screen.js"></script>
</body>

For the screen res, at the moment you're checking 'screen.width' which is not what you need. This will remain constant no matter what the browser window is. It literally contains the width of the screen, not the browser.
Instead, you need to check for window.innerWidth or document.body.clientWidth, depending on browser.
So we have a little function like this:

function getWidth() {
	return window.innerWidth || document.body.clientWidth;
}

We can then assign the returned value to a variable later on.

Instead of using document.write(), we're going to insert your html into a specified container on the page. For arguments sake, let's assume you have a div with an 'id' of 'screenmessage' somewhere on your page. We'll use the innerHTML property (which is a bit brute force but does the job) to inject your desired mark-up into the page.
So your screenCheck function would look like this:

window.onload = screenCheck;

function screenCheck() {
	var myelement = document.getElementById('screenmessage');
	var width = getWidth();
	if (width < 1024) {
		myelement.innerHTML = "<img src='https://portal.durhamlearning.net/Image Library/red.gif' alt='Warning' align='absmiddle'/></td><td> Your screen resolution is lower than the recommended minimum size of 1024 pixels wide. Currently, your resolution is only set to a width of "+ width + " pixels. <a href='https://portal.durhamlearning.net/Help%20Desk/Lists/FrequentlyAsked%20Questions/DispForm.aspx?ID=53&amp;RootFolder=%2fHelp%20Desk%2fLists%2fFrequentlyAsked%20Questions%2fComputer%20Setup'>Help</a>";
	}
	else {
		myelement.innerHTML = 'My, what a big screen you\'ve got' + width;
	}
}

function getWidth() {
	return window.innerWidth || document.body.clientWidth;
}

Notice the 'window.onload'. It runs your function when you load the page.

With the browser detection, I assume that you're checking for IE6 or below.
Instead of using Javascript to detect the browser, leave it to conditional comments and load the js if necessary

<!--[if lte IE 6]>
<script type="text/javascript" src="ie6.js"></script>
<![endif]-->

Imagine that you have another div on your page with an 'id' of 'ie6message'.
Your ie6.js would look like this:

var myOtherElement = document.getElementById('ie6message');
myOtherElement.innerHTML = "<img src='https://portal.durhamlearning.net/Image Library/red.gif' alt='Warning' align='absmiddle'/></td><td>The Internet browser you are using is outdated and will affect the quality of your experience. Please consult your system administrator about updating your browser.";

Remember that this will only get run if the browser is IE6 or less. Also, place this just before the </body> tag.
If you have any problems, just ask

Back to top

#3 JonnyIrving

Dedicated Member

Members
119 posts

WDF Reputation

1
Neutral

Gender:Male
Location:Newcastle-uponTyne, UK
Experience:Beginner
Area of Expertise:Web Designer

Posted 01 February 2010 - 11:48 AM

Thanks for all the advice ElanMan,

Thought I'd add my solution incase it might be useful to someone.

Here's what I came up with in the end:

//--ON LOAD RUN BOTH CHECKS--//
window.onload = function() {
checkbrowser();
checkscreen();
}; 

//----------SCREEN RES CHECK----------//
function checkscreen(){

	var myelement = document.getElementById('screenwarning');//selects element on masterpage with the id "screenwarning"
	var width = screen.width;
	
	if (width<1024)//This if selector detects small screen Size
	//writes below html into the object "screenwarning"
	myelement.innerHTML = ("<table><tr><td><img src='https://portal.durhamlearning.net/Image Library/red.gif' alt='Warning' align='absmiddle'/></td><td> Your screen resolution is lower than the recommended minimum size of  1024 pixels wide. Currently, your resolution is only set to a width of "+ screen.width  + " pixels. <a href='https://portal.durhamlearning.net/Help%20Desk/Lists/FrequentlyAsked%20Questions/DispForm.aspx?ID=53&amp;RootFolder=%2fHelp%20Desk%2fLists%2fFrequentlyAsked%20Questions%2fComputer%20Setup'>Help</a></td></tr></table>");
}


//----------BROWSER VERSION CHECK----------//
function checkbrowser() { 
    
    var myelement = document.getElementById('browserwarning');//selects element on masterpage with the id "browser"
    var browserver = navigator.userAgent.toLowerCase();
        
//This if selector looks to see if the "useragent" (version) contains the string "msie 6" if it does it is IE6
    if 
    (
    browserver.indexOf('msie 4')!= -1 && browserver.indexOf('msie 7')== -1 && browserver.indexOf('msie 8')== -1||
    browserver.indexOf('msie 5')!= -1 && browserver.indexOf('msie 7')== -1 && browserver.indexOf('msie 8')== -1||
    browserver.indexOf('msie 6')!= -1 && browserver.indexOf('msie 7')== -1 && browserver.indexOf('msie 8')== -1||
    browserver.indexOf('firefox/3.0')!= -1 && browserver.indexOf('msie 7')== -1 && browserver.indexOf('msie 8')== -1||
    browserver.indexOf('firefox/2')!= -1 && browserver.indexOf('msie 7')== -1 && browserver.indexOf('msie 8')== -1||
    browserver.indexOf('firefox/1')!= -1 && browserver.indexOf('msie 7')== -1 && browserver.indexOf('msie 8')== -1||
    browserver.indexOf('firefox/0')!= -1 && browserver.indexOf('msie 7')== -1 && browserver.indexOf('msie 8')== -1
    )

myelement.innerHTML = ("<table><tr><td><img src='https://portal.durhamlearning.net/Image Library/red.gif' alt='Warning' align='absmiddle'/></td><td>The Internet browser you are using is outdated and will affect the quality of your experience. Please consult your system administrator about updating your browser.</td></tr></table>");
}

I had to keep the browser version detector in javascript as I needed to find older versions of firefox as well as older versions of IE. Sorry I wasn't clear about the screen res problem. We have a large number of users, many of which don't have their monitor set up correctly so it was the screen with that I needed.

Very bad practice haveing my warning in tables I know

, but I'm working with a sharepoint masterpage which still uses tables!! Blame microsoft!

Back to top

#4 ElanMan

really?

Privileged
3,315 posts

WDF Reputation

56
Excellent

Gender:Male
Experience:Nothing
Area of Expertise:Nothing

Posted 01 February 2010 - 10:52 PM

Glad to see you got it sorted.
Sorry, I assumed too much

As for Microsoft, feel free to blame them for everything

Back to top

#5 JonnyIrving

Dedicated Member

Members
119 posts

WDF Reputation

1
Neutral

Gender:Male
Location:Newcastle-uponTyne, UK
Experience:Beginner
Area of Expertise:Web Designer

Posted 04 February 2010 - 10:14 AM

Haha I will!

Thanks again for the help.

Back to top

#6 rallport

Web Guru

Moderators
4,888 posts

WDF Reputation

426
Excellent

Gender:Male
Location:England, UK
Experience:Web Guru
Area of Expertise:Web Developer

Posted 04 February 2010 - 12:15 PM

Surely you should be writing your web apps so they are viewable in all browsers. A user should never had to upgrade their broweser to use a site.

As for the screen checking, well there's loads of JQuery plugins that can do that for you in a couple of lines of code

Seems pointless trying to reinvent the wheel imo.

Back to top

#7 JonnyIrving

Dedicated Member

Members
119 posts

WDF Reputation

1
Neutral

Gender:Male
Location:Newcastle-uponTyne, UK
Experience:Beginner
Area of Expertise:Web Designer

Posted 10 February 2010 - 12:49 PM

Well the web app is Microsoft's Sharepoint which doesn't work very well on IE6 so prompting them all to upgrade meant we got a lot less phone calls asking why sharepoint won't do this or that. jQuery would have been a good option for the screen res check I'll give you that one!