SitePoint Sponsor

User Tag List

Page 2 of 2 FirstFirst 12
Results 26 to 31 of 31
  1. #26
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    16,448
    Mentioned
    160 Post(s)
    Tagged
    1 Thread(s)
    Unless I'm missing something, where are the "top" and "left" variables coming from?

  2. #27
    SitePoint Member
    Join Date
    May 2010
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb

    pmw57 - You might try this web page and script to see if this is what you were hoping to achieve.


    Code HTML4Strict:
    [CODE]
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html lang="en">
    <head>
    	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    	<title></title>
    	<script type="text/javascript">
    		<!-- 
     
    		// The following code was taken from a tutorial located at http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/
    		//
    		// Many thanks to Andy Langton for posting the code and allowing us to use it.
     
     
    		function getTemplateSize()
    		{
    			var viewportwidth;
    			var viewportheight;
     
    			if (typeof window.innerWidth != 'undefined')
    			{
    				// the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
    				viewportwidth = window.innerWidth,
    				viewportheight = window.innerHeight
    			}
    			else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0)
    			{
    				// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
    				viewportwidth = document.documentElement.clientWidth,
    				viewportheight = document.documentElement.clientHeight
    			}
    			else
    			{
    				// older versions of IE
    				viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
    				viewportheight = document.getElementsByTagName('body')[0].clientHeight
    			}
     
    			// The code listed below is based on your original code taken  
    			// from your web site and modified for functionality and readability.
     
     
    			if (viewportwidth > 800) 
    			{
    				// Screen resolution is 1024 or higher so lets load the laarget template we have.
    				popupCenter('http://www.meta.projectmio.com/index.html', 'MyWindow', 1024, 699);		
    			} 
    			else if (viewportwidth > 640) 
    			{
    				// Screen resolution is lower than 1024 so lets load the medium template.
    				popupCenter('http://www.meta.projectmio.com/800.html', 'MyWindow', 800, 531);		
    			} 
    			else 
    			{
    				// No other screen size matched so lets load the smallest template to ensure
    				// the client can see the whole page.
    				// Screen resolution is lower than 800 so lets load the smallest template.
    				popupCenter('http://www.meta.projectmio.com/640.html', 'MyWindow', 640, 411);
    			}
    		}
     
    		function popupCenter(pageURL, title, w, h) 
    		{
    			// Take the width of the screen and devide it by two, now take the width of the template 
    			// by two and subtract it from the screen width / 2 to get the position of the upper left corner of the template.
    			var left = (screen.width / 2) - (w / 2);
     
    			// Pop open the window with all of the data like URL, size and position.
    			window.open(pageURL, title, 'toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no,copyhistory=no,width=' + w + ',height=' + h + ',top=' + top + ',left=' + left);
    		}
    		//-->
    	</script>	
    </head>
    <body onLoad="getTemplateSize()">
     
    </body>
    </html>
    [/CODE]

  3. #28
    SitePoint Enthusiast
    Join Date
    Jul 2009
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh wow S1ghup, this is a fantastic find, many thanks for sharing. Just the job.

    One thing though (always one), while the pop-up works fine, if I have pop-ups disabled the whole thing looks like a blank page and in the case of Safari with no indication that any had been suppressed. To remedy this I had included a picture conveying that a pop-up was necessary and so to click the picture would invoke the pop-up, this picture activated the page's code and so I'd need to encapsulate it. The original code:

    Code:
    <div align="center">
    <img src="http://www.meta.projectmio.com/imagery/meta_popup.png" onclick= "dimension_test()" />
    </div>
    What would I need to do to encapsulate the code to call it with a click on the picture and how would the above code be modified?


    Also, I find that FireFox (unlike Safari/Chrome) does not respect the percentage restriction I had in place to reduce the size of an image on a page, weird!

    Code:
    <div align="right" border="0">
    <img src="/imagery/glycera_logo_gl640.png" title="A Glycera product" height=30&#37;>
    </div>
    Like I say it works in Safari and Chrome, not sure why it doesn't in FireFox?

  4. #29
    SitePoint Member
    Join Date
    May 2010
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    blinm - Replace your existing image tag with this one. As far as the issue that you are experiencing with your image scaling that appears to be an inherit problem with the way that different browsers handle image scaling. I did attempt to fix this issue as well how ever I did not make any progress and regrettably I have to get back to work for the day. I have to get this contract finished before the impending deadline. If you have any more trouble feel free to send me a PM and I will get back to you.

    John

    <div align="center">
    <img src="http://www.meta.projectmio.com/imagery/meta_popup.png" onclick= "getTemplateSize()" />
    </div>

  5. #30
    SitePoint Enthusiast
    Join Date
    Jul 2009
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's it, that's all I need. I thought I'd never get there! Thanks for all your help and the invitation about that issue of interpretation... I'll look more into it myself.

    I thought there would be a standard to use that all browsers would work to, so frustrating.

  6. #31
    SitePoint Enthusiast
    Join Date
    Jul 2009
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think the answer was simple... Firefox only takes orders from the width, so setting the width value works. This works in FF and Safari/Chrome I find :]

    I've finished my project, for now. Hope your project went okay, thanks for your time and effort (and everybody else's!)


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
  •