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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Exclamation Jquery pop out script

    Hey guys, I recently got back into the web design scene and alot has changed since I left..

    Iv been designing a personal portfolio for myself over the past weeks.. everything seems to be going fairly well so far I think and iv made some great progress.

    Although getting my website compatible with internet explorer has been an absaloute pain !

    When using Google chrome or Firefox everything is perfect...


    OK so this takes me to my problem.. im using a Jquery pop out script which iv modified slightly to be able to use for multiple pop ups...


    Code:
    /***************************/
    //@Author: Adrian "yEnS" Mato Gondelle
    //@website: www.yensdesign.com
    //@email: yensamg@gmail.com
    //@license: Feel free to use it, but keep this credits please!					
    /***************************/
    
    //SETTING UP OUR POPUP
    //0 means disabled; 1 means enabled;
    var popupStatus = 0;
    
    //loading popup with jQuery magic!
    function loadPopup(id){
    target = id;
    	//loads popup only if it is disabled
    	if(popupStatus==0){
    		$("#backgroundPopup").css({
    			"opacity": "0.8"
    		});
    		$("#backgroundPopup").fadeIn("slow");
    		$("#popup" + id).fadeIn("slow");
    		popupStatus = 1;
    	}
    }
    
    //disabling popup with jQuery magic!
    function disablePopup(){
    	//disables popup only if it is enabled
    	if(popupStatus==1){
    		$("#backgroundPopup").fadeOut("slow");
    		$("#popup" + target).fadeOut("slow");
    		popupStatus = 0;
    	}
    }
    
    //centering popup
    function centerPopup(id){
    	target = id;
    	//request data for centering
    	var windowWidth = document.documentElement.clientWidth;
    	var windowHeight = document.documentElement.clientHeight;
    	var popupHeight = $("#popup" + id).height();
    	var popupWidth = $("#popup" + id).width();
    	//centering
    	$("#popup" + target).css({
    		"position": "absolute",
    		"top": windowHeight/2-popupHeight/2,
    		"left": windowWidth/2-popupWidth/2
    	});
    	//only need force for IE6
    	
    	$("#backgroundPopup").css({
    		"height": windowHeight
    	});
    	
    }
    
    //CONTROLLING EVENTS IN jQuery
    $(document).ready(function(){
    	
    	//LOADING POPUP
    	//Click the button event!
    	$("#contact").click(function(){
    		//centering with css
    		centerPopup('Contact');
    		//load popup
    		loadPopup('Contact');
    	});
    
    	$("#portfolio").click(function(){
    		//centering with css
    		centerPopup('Portfolio');
    		//load popup
    		loadPopup('Portfolio');
    	});
    	
    	//Click out event!
    	$("#backgroundPopup").click(function(){
    		disablePopup();
    	});
    	
    	//Press Escape event!
    	$(document).keyup(function(event){
    		if(event.which == 27){
    			disablePopup();
    		}
    	});
    	
    });


    Although the centering part of the code doesnt work with internet explorer..

    Preview my site here for a better understanding.

    Im hoping someone out there holds the answer ! Cause iv been tearing out my hair trying to figure it out..



    Thank you for reading.

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,949
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Restore the doctype on your page, and try removing the width from body - you're setting it on #container anyway, and IE is calculating the width of #popupPortfolio based on 80% of body, rather than 80% of the viewport.

  • Users who have thanked SB65 for this post:

    fOmey (12-03-2010)

  • #3
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by SB65 View Post
    Restore the doctype on your page, and try removing the width from body - you're setting it on #container anyway, and IE is calculating the width of #popupPortfolio based on 80% of body, rather than 80% of the viewport.
    Thanks for the reply, #popupPortfolio is fine.. I took your advice and removed the width from my body tag...

    When you say restore the doctype what do you mean exactly ?

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,949
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Earlier you had the doctype commented out - looks like you've removed the commenting now.

  • Users who have thanked SB65 for this post:

    fOmey (12-03-2010)

  • #5
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by SB65 View Post
    Earlier you had the doctype commented out - looks like you've removed the commenting now.
    Oh.. Im not too sure what I did.. although it seems to be working !

    Thank you very much for your help.. im guessing it was the doctype.. who would of thought.


    Iv got a wierd issue now.. the height of my popups are small.. Any ideas ?
    Last edited by fOmey; 12-03-2010 at 11:54 PM.


  •  

    Posting Permissions

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