Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder kyllle's Avatar
    Join Date
    Mar 2008
    Posts
    334
    Thanks
    85
    Thanked 2 Times in 2 Posts

    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

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,521
    Thanks
    3
    Thanked 507 Times in 494 Posts
    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/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    Regular Coder kyllle's Avatar
    Join Date
    Mar 2008
    Posts
    334
    Thanks
    85
    Thanked 2 Times in 2 Posts
    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

  • #4
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,097
    Thanks
    38
    Thanked 498 Times in 492 Posts
    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.

  • #5
    Regular Coder kyllle's Avatar
    Join Date
    Mar 2008
    Posts
    334
    Thanks
    85
    Thanked 2 Times in 2 Posts
    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!

  • #6
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •