...

View Full Version : Any ideas were I can get this background image js?



kyllle
12-01-2009, 03:22 PM
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

vwphillips
12-01-2009, 04:17 PM
it is an image behide the page content rather than a css background image

the scripts can be found by viewing the page source


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

kyllle
12-01-2009, 04:35 PM
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

jmrker
12-02-2009, 05:35 AM
Using FF, view the source and then click on link displayed which displays file as follows:


/**
* 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.

kyllle
12-02-2009, 10:07 AM
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!

aylmarb1
12-09-2009, 10:38 AM
I have no detailed information about the javascript and its basic element. I was looking for the SY0-201 exam (http://www.actual-exams.com/SY0-201-practice-exam.htm) and also about the cissp exam (http://www.actual-exams.com/CISSP-practice-exam.htm) as well as the 70-291 exam (http://www.actual-exams.com/70-291-practice-exam.htm). Do you have any idea about it?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum