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 3 of 3
  1. #1
    Regular Coder
    Join Date
    Jul 2011
    Posts
    101
    Thanks
    7
    Thanked 6 Times in 6 Posts

    Help Understanding jQuery

    Hey guys,

    I'm new to jQuery / Javascript so bear with me. I have the following code (below). The two blocks I'm wondering about are currently commented out as they don't work - but I'd like them to work. It positions the footer based on the height of the about page. Problem is, it only checks when the website loads, and doesn't recheck the code when you go to a new page.

    For example, you start on About, the footer is position bottom. You go to the home page and it doesn't reset the footer back. I've found it's due to being inside line 1's pageinit function... but I don't fully understand how that line even works.

    Any explanation would be great.


    Code:
    $( document ).on( "pageinit", "[data-role='page']", function() {
    
    	$.extend($.event.special.swipe,{
    	  scrollSupressionThreshold: 10, // More than this horizontal displacement, and we will suppress scrolling.
    	  durationThreshold: 600, // More time than this, and it isn't a swipe.
    	  horizontalDistanceThreshold: 100,  // Swipe horizontal displacement must be more than this.
    	  verticalDistanceThreshold: 60,  // Swipe vertical displacement must be less than this.
    	});
    
    	var page = "#" + $( this ).attr( "id" ), next = $( this ).jqmData( "next" ), prev = $( this ).jqmData( "prev" );
    	if ( next ) {
    		// Prefetch the next page
    		$.mobile.loadPage( next + ".html" );
    		// Navigate to next page on swipe left
    		$( document ).on( "swipeleft", page, function() {
    			$.mobile.changePage( next + ".html", { transition: "slide" });
    		});
    	}
    
    	if ( prev ) {
    		// Prefetch the next page
    		$.mobile.loadPage( prev + ".html" );
    		// Navigate to next page on swipe left
    		$( document ).on( "swiperight", page, function() {
    			$.mobile.changePage( prev + ".html", { transition: "slide", reverse: true });
    		});
    	}
    	
    	if ($(this).attr('id') == 'portfolio') {
    		$(".portfolio-btn").click( function() {
    			var divID = $(this).attr('id');
    			$("#"+divID+"-details").slideToggle();
    		});
    	}
    	
    	if ($(this).attr('id') == 'index') {
    	    $('#layerslider').layerSlider({
    	    	slideDirection: 'top',
    	        skin : 'noskin',
    	        durationIn: 1000,
    	        durationOut: 1000,
    	        slideDelay: 2500,
    	        firstLayer: 4,
    	        keybNav: false
    	    });
    	}
    	
    	// Stop images from being draggable on desktop, allowing mouse swiping without Images in the way.
    	$("img").bind('dragstart', function(){
    	    return false; 
    	});
    
    
    
    
    /*
    	if (($("#about").height()) < ($(window).height())){
    		$("#about footer").css({
    			"position" : "absolute",
    			"bottom" :"0"
    		});
    	}
    */
    
    
    /*
    	if (($("#about, #index, #portfolio").height()) < ($(window).height())){
    		var footerID = $(this).attr('id');
    		$(footerID + " footer".css({
    			"position" : "absolute",
    			"bottom" :"0"
    		});
    	}
    */
    		
    });
    
    
    
    
    $.fn.prevOrLast = function(selector){
    	var next = this.next(selector);
    	return (next.length) ? next : this.prevAll(selector).last();
    }
    
    $.fn.nextOrFirst = function(selector){
    	var prev = this.prev(selector);
    	return (prev.length) ? prev : this.nextAll(selector).last();
    }
    
    
    
    
    function ipadVisibility() {
    	$("body").css("overflow", "visible");
        var height = $(window).height();
    	$(".ipad-optimized").height(height+170);
    	
    	if ($(".ipad-optimized").is(":visible")) {
    		$("body").css("overflow", "hidden");
    		$(document).bind('touchmove', false);
    	
    		$(".ipad-optimized img").click(function(){
    			$(".ipad-optimized").hide();
    			$("body").css("overflow", "visible");
    			$(document).unbind('touchmove');
    		})
    	} 
    }
    
    
    
    
    $(window).resize(function() {
    	ipadVisibility();
    });
    
    $(document).ready( function() {
    
    
    	ipadVisibility();
    		
    	$(document).keyup(function(e){
    	
    		prev = $("div[data-role='page']:visible nav li.active").prevOrLast().find('a').attr('href');
    		next = $("div[data-role='page']:visible nav li.active").nextOrFirst().find('a').attr('href');
    
    	    switch(e.which) {
    	        case 37: // left
    	        	$.mobile.changePage(prev, { transition: "slide", reverse: true });
    	        break;
    	
    	        case 39: // right
    	        	$.mobile.changePage(next, { transition: "slide" });
    	        break;
    	
    	        default: return; // exit this handler for other keys
    	    }
    	    e.preventDefault();
    	});
    	
    });
    Last edited by bdbolin; 03-28-2013 at 05:03 PM.
    Web Design Portfolio 1 | Web Design Portfolio 2
    --------------------------------------------------------------------
    *Reminder to self. Validate code - then ask forum questions.

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,105
    Thanks
    23
    Thanked 594 Times in 593 Posts
    This is called sticky footer and there are hundreds out there, just do a google search. Here's one http://www.egstudio.biz/sticky-footer-with-jquery/ But a fast way to paste the footer to the bottom of the viewing screen is with css:
    #footer {
    position:fixed;
    bottom:0;
    }

    Give it a dark back ground so the main content doesn't show through.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #3
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,302
    Thanks
    10
    Thanked 586 Times in 567 Posts
    using fixed will cover-over other content at the bottom on the page, unless padding/margins are built in.

    OP should really be using the age-old clearfix to simply push the footer to the bottom using a few lines of CSS. google "clearfix" for 1,000,001 examples.
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%


  •  

    Posting Permissions

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