Forums

Maddtechwf

I came across some Javascript that reads the browser size. I was hoping to use the code snippet to set the height of my content area. Can anyone possibly help me with this. I'm not sure how to pass the information to my CSS, if even possible.


function BrowserSize() {
	var viewportwidth;
	var viewportheight;
	var finalheight;
 
 	// the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
 
 	if (typeof window.innerWidth != 'undefined')
 	{
      	viewportwidth = window.innerWidth,
      	viewportheight = window.innerHeight
 	}
 
	// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)

 	else if (typeof document.documentElement != 'undefined'
     	&& typeof document.documentElement.clientWidth !=
     	'undefined' && document.documentElement.clientWidth != 0)
 	{
       	viewportwidth = document.documentElement.clientWidth,
       	viewportheight = document.documentElement.clientHeight
 	}
 
 	// older versions of IE
 
 	else
 	{
       viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
       viewportheight = document.getElementsByTagName('body')[0].clientHeight
 	}
	
	finalheight = viewportheight - 200;
	
	document.write('<p>Your viewport height is '+finalheight+'</p>');
}

jamy_za

With jQuery, you could do it like this:

var windowHeight = $(window).height();
var $content = $("#content");

$content.height(windowHeight);

Maddtechwf

@jamy_za - I'm still learning javascripts and jQuery. I have a javascript file called ajax.js and has a small snippet of code that I'm using to load content dynamically without having to refresh the page. How can I add this to it?

Current file


jQuery(document).ready(function($) {
    var $mainContent = $("#content"),
        siteUrl = "http://&quot; + top.location.host.toString(),
        url = ''; 

    $(document).delegate("a[href^='"+siteUrl+"']:not([href*=/wp-admin/]):not([href*=/wp-login.php]):not([href$=/feed/])", "click", function() {
        location.hash = this.pathname;
        return false;
    });

    $(window).bind('hashchange', function(){
        url = window.location.hash.substring(1); 

        if (!url) {
            return;
        } 

        url = url + " #content"; 

        $mainContent.animate({opacity: "0.1"}).html('<p>Please wait...</>').load(url, function() {
            $mainContent.animate({opacity: "1"});
        });
    });

    $(window).trigger('hashchange');
});

jamy_za

Chris did a tutorial based on this. It looks like you may have had a look at it, but at the same time I'm not sure :p

Maddtechwf

I did take a small look at it but it was after I got to the point of where I am. I'm stuck where I'm at now because I have my header and footers "stuck" on the page and I want the content to change between the items.

treehouse : what would you like to learn today?

Forums

Content Height