Go Back   CodingForums.com > :: Client side development > JavaScript programming

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 12-01-2009, 02:22 PM   PM User | #1
kyllle
Regular Coder

 
kyllle's Avatar
 
Join Date: Mar 2008
Posts: 334
Thanks: 85
Thanked 2 Times in 2 Posts
kyllle can only hope to improve
Any ideas were I can get this background image js?

Hi all,

I was wondering if anyone knew were I can get a javascript that will adjust the background image dependant on the users screen resolution like whats used on this site http://gregorywood.co.uk/journal/chilli-babies

Thanks in advance!!
Kyle
__________________
www.kylehouston.com
kyllle is offline   Reply With Quote
Old 12-01-2009, 03:17 PM   PM User | #2
vwphillips
Senior Coder

 
Join Date: Mar 2005
Location: Portsmouth UK
Posts: 4,355
Thanks: 3
Thanked 458 Times in 445 Posts
vwphillips is a jewel in the roughvwphillips is a jewel in the roughvwphillips is a jewel in the rough
it is an image behide the page content rather than a css background image

the scripts can be found by viewing the page source

Code:
    <script type="text/javascript" src="/assets/js/onload-modern.js"></script>
__________________
Vic

God Loves You and will never love you less.

http://www.vicsjavascripts.org.uk/

If my post has been useful please donate to http://www.operationsmile.org.uk/
vwphillips is offline   Reply With Quote
Old 12-01-2009, 03:35 PM   PM User | #3
kyllle
Regular Coder

 
kyllle's Avatar
 
Join Date: Mar 2008
Posts: 334
Thanks: 85
Thanked 2 Times in 2 Posts
kyllle can only hope to improve
Thanks VW,

Yeah I checked the script then googled the onload-modern.js file so I could find it and have some kind of background reading on the file but it returns nothing when googled?

Kyle
__________________
www.kylehouston.com
kyllle is offline   Reply With Quote
Old 12-02-2009, 04:35 AM   PM User | #4
jmrker
Senior Coder

 
jmrker's Avatar
 
Join Date: Aug 2006
Location: FL
Posts: 2,764
Thanks: 29
Thanked 453 Times in 447 Posts
jmrker will become famous soon enough
Using FF, view the source and then click on link displayed which displays file as follows:
Code:
/**
    * FULL SCREEN IMAGES
    * Deals with full screen BG images that stretch but retain proportion
    * ----
*/
var bgimg;
var init = function() {
  if (arguments.callee.done) return;
  arguments.callee.done = true;
  bgimg = document.getElementById('bgimg');
  if (!bgimg) return;
  bgimg.onload = resizeBg;
  bgimg.src = bgimg.src;
  if (window.addEventListener) window.addEventListener('resize', resizeBg, false);
  else if (window.attachEvent) window.attachEvent('onresize', resizeBg);
  else window.onresize = resizeBg;
}
var resizeBg = function() {
  var w = self.innerWidth || document.documentElement.clientWidth;
  var h = self.innerHeight || document.documentElement.clientHeight;
  if (bgimg.width !== w) {
    bgimg.parentNode.style.left = '0';
    bgimg.parentNode.style.top = '0';
    bgimg.height = bgimg.parentNode.height = (w / bgimg.width) * bgimg.height;
    bgimg.width = bgimg.parentNode.width = w;
  }
  if (bgimg.height < h) {
    bgimg.width = bgimg.parentNode.width = (h / bgimg.height) * bgimg.width;
    bgimg.height = bgimg.parentNode.height = h;
    bgimg.parentNode.style.left = '-' + ((bgimg.width - w) / 2) + 'px';
  }
  else if (bgimg.height > h) {
    bgimg.parentNode.style.top = '-' + ((bgimg.height - h) / 2) + 'px';
  }
}

if (document.addEventListener) document.addEventListener("DOMContentLoaded", init, false);

/*@cc_on @*/
/*@if (@_win32 || @_win64)
  document.write('<script id="ie_onload" defer src="javascript:void(0);"></script>');
  document.getElementById('ie_onload').onreadystatechange = checkState;
  function checkState() {
    if (this.readyState && this.readyState != 'complete') return;
    else init();
  }
/*@end @*/

if (/KHTML|Webkit|iCab/i.test(navigator.userAgent)) {
	var khtmltimer = window.setInterval(function() {
		if (/loaded|complete/.test(document.readyState)) {
  		window.clearInterval(khtmltimer);
  		init();
		}
	}, 10);
}


/**
    * BODY RESIZE
    * Resizes the body element exactly to the dimensions of the window when resized
    * ----
*/
function body_resize() {
    var window_height = $(window).height();
    //alert(window_height);
    $('body.fsbg').css('height',window_height);
}
window.onresize = body_resize;


/**
    * FADE IN BACKGROUND IMAGE
    * Fades in full screen bg image after 3 secs, hopefully after it's loaded
    * ----
*/
function fade_in_bg(){
	$("#bg").addClass("hidden").fadeTo(3000, 0, function() {
		$(this).removeClass("hidden")
		$('#bg img').css('display','block');
	}).fadeTo(1000, 1);
}

// 1.5 Seconds for some posts:
function fade_in_bg_fast(){
	$("#bg").addClass("hidden").fadeTo(1500, 0, function() {
		$(this).removeClass("hidden")
		$('#bg img').css('display','block');
	}).fadeTo(1000, 1);
}



$.fn.scroller = function()
{
    return this.each( function()
    {
        $(this).click( function()
        {
            var scroll_target = $(this).attr('href');
            $.scrollTo(scroll_target,800); 
            return false;
        });  
    });
}



/**
    * SHORT URL
    * When 'short url' link is clicked, a window pops up with copy to clipboard link
    * ----
*/
function short_url() {
	
	$("div#shorturl_popup").fadeTo(0, 0);
	
	$('a.shorturl').click(
		function(){
			$("div#shorturl_popup").addClass("show").fadeTo(250, 1);
			return false;
		}
	);
	
	$('div#shorturl_popup input[type="submit"]').click(
		function(){
			$('div#shorturl_popup').fadeTo(250,0);
		}
	);

}



$(document).ready(function(){
	
	// MAKES SURE BODY HEIGHT = WINDOW HEIGHT (Safari fix)
	var window_height = $(window).height();
	$('body.fsbg').css('height',window_height);
	
	// CALL PREVIOUS JQUERY FUNCTIONS
	//fade_in_bg();
	fade_in_bg_fast();
	$('a.scrollto').scroller();
	short_url();

});
I would suggest giving credit to the original site and author ... perhaps even ask permission to use his/her code.
jmrker is offline   Reply With Quote
Old 12-02-2009, 09:07 AM   PM User | #5
kyllle
Regular Coder

 
kyllle's Avatar
 
Join Date: Mar 2008
Posts: 334
Thanks: 85
Thanked 2 Times in 2 Posts
kyllle can only hope to improve
Hey, yeah I know how to view the source of the site etc but what I would like is a some information about the js on a website etc, was hoping someone would know any useful sites with thsi type of js.

Thanks!
__________________
www.kylehouston.com
kyllle is offline   Reply With Quote
Old 12-09-2009, 09:38 AM   PM User | #6
aylmarb1
New to the CF scene

 
Join Date: Dec 2009
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
aylmarb1 is an unknown quantity at this point
comment

I have no detailed information about the javascript and its basic element. I was looking for the SY0-201 exam and also about the cissp exam as well as the 70-291 exam. Do you have any idea about it?
aylmarb1 is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 10:46 PM.


Advertisement
Log in to turn off these ads.