SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2011
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Contact form Inside of LightBox2

    Here is the contact page for my website:
    Bryson's Contact Page

    When you click the "GMAIL" logo, it takes you to another page which has the contact form. Instead of taking the user to another page, how do I incorporate the contact form into LightBox2, so that it swiftly pops out?
    Lightbox 2

    I've heard that it can get tricky when mixing scripts together. Thanks

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,716
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by bigbonthabeat View Post
    how do I incorporate the contact form into LightBox2, so that it swiftly pops out?
    The documentation page for LightBox2 says that it's for images only. It cannot show HTML content (or any other type of content) other than images or pictures.

    Are you open to using a similar one such as FancyBox instead?

    It looks like their on-page example of "Iframe (75% width and height)" is just what you're looking for.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2011
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    Are you open to using a similar one such as FancyBox instead?
    I could use that one : )

    I want to put this contact form in it:



    Will this be hard to achieve? What do I have to be careful for when mixing the codes?

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,716
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by bigbonthabeat View Post
    Will this be hard to achieve?
    No.

    Quote Originally Posted by bigbonthabeat View Post
    What do I have to be careful for when mixing the codes?
    Both your existing site and FancyBox use jQuery, so it should be easy to achieve.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Enthusiast
    Join Date
    Feb 2011
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    No.
    So I messed around with it until I merged the files together. The only problem is that the pop out box is way too big and I can't figure out if it's FANCY BOX, or jFormer that's causing this to happen. Also, the NAME, EMAIL, etc. are off from where they are supposed to be.

    Can you please help me with this?

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,716
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by bigbonthabeat View Post
    Can you please help me with this?
    Can you help us to see what's happening? Your earlier linked page doesn't appear to show any update to it.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,716
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by bigbonthabeat View Post
    The only problem is that the pop out box is way too big
    The example from the FancyBox page uses 75% of the screen size for the width and height.

    You can provide your own alternative pixel dimensions instead of a percentage.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    SitePoint Enthusiast
    Join Date
    Feb 2011
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    Can you help us to see what's happening? Your earlier linked page doesn't appear to show any update to it.
    Paul,

    I'm sorry, I thought I updated it. Here is the updated link:

    Untitled Document

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,716
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    What code are you using to tell that gmail link to use fancybox?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  10. #10
    SitePoint Enthusiast
    Join Date
    Feb 2011
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    What code are you using to tell that gmail link to use fancybox?
    HTML Code:
     <div class="slide"><a id="youtubefancy" href="jformer.html" title="Please fill out all fields."><img src="apple/img/sample_slides/gmailbigger.png" alt="side" width="850" height="260" id="Image5" onmouseover="MM_swapImage('Image5','','apple/img/sample_slides/gmailhover.png',1)" onmouseout="MM_swapImgRestore()"/></a></a></div>
    the form I'm using is called "jformer". Here is a link to it:Demos - jFormer

  11. #11
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,716
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    That's only the HTML code. You also need to use a jQuery command to set up that link t use fancy box in a certain way.

    For example:

    Code javascript:
    $(function () {
        $("#youtubefancy").fancybox({
            'width' : '75%',
            'height' : '75%',
            'autoScale' : false,
            'transitionIn' : 'none',
            'transitionOut' : 'none',
            'type' : 'iframe'
        });
    });
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  12. #12
    SitePoint Enthusiast
    Join Date
    Feb 2011
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    That's only the HTML code. You also need to use a jQuery command to set up that link t use fancy box in a certain way.
    Here is the jQuery command and the part of it that I'm using for Gmail is:
    $("a#youtubefancy").fancybox();



    HTML Code:
    <script type="text/javascript">
    		$(document).ready(function() {
    			/*
    			*   Examples - images
    			*/
    
    			$("a#example1").fancybox();
    
    			$("a#example2").fancybox({
    				'overlayShow'	: false,
    				'transitionIn'	: 'elastic',
    				'transitionOut'	: 'elastic'
    			});
    
    			$("a#example3").fancybox({
    				'transitionIn'	: 'none',
    				'transitionOut'	: 'none'	
    			});
    
    			$("a#example4").fancybox({
    				'opacity'		: true,
    				'overlayShow'	: false,
    				'transitionIn'	: 'elastic',
    				'transitionOut'	: 'none'
    			});
    
    			$("a#example5").fancybox();
    			$("a#gmail").fancybox();
    			$("a#youtubefancy").fancybox();
    
    			$("a#example6").fancybox({
    				'titlePosition'		: 'outside',
    				'overlayColor'		: '#000',
    				'overlayOpacity'	: 0.9
    			});
    
    			$("a#example7").fancybox({
    				'titlePosition'	: 'inside'
    			});
    
    			$("a#example8").fancybox({
    				'titlePosition'	: 'over'
    			});
    
    			$("a[rel=example_group]").fancybox({
    				'transitionIn'		: 'none',
    				'transitionOut'		: 'none',
    				'titlePosition' 	: 'over',
    				'titleFormat'		: function(title, currentArray, currentIndex, currentOpts) {
    					return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
    				}
    			});
    
    			/*
    			*   Examples - various
    			*/
    
    			$("#various1").fancybox({
    				'titlePosition'		: 'inside',
    				'transitionIn'		: 'none',
    				'transitionOut'		: 'none'
    			});
    
    			$("#various2").fancybox();
    
    			$("#various3").fancybox({
    				'width'				: '75%',
    				'height'			: '75%',
    				'autoScale'			: false,
    				'transitionIn'		: 'none',
    				'transitionOut'		: 'none',
    				'type'				: 'iframe'
    			});
    
    			$("#various4").fancybox({
    				'padding'			: 0,
    				'autoScale'			: false,
    				'transitionIn'		: 'none',
    				'transitionOut'		: 'none'
    			});
    		});
    	</script>

  13. #13
    SitePoint Enthusiast
    Join Date
    Feb 2011
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I used the code you gave me and it resized the document box : )

    But I think my problem is that the form itself is too big. Here is an updated link of what it looks like after your code:

    Untitled Document

  14. #14
    SitePoint Enthusiast
    Join Date
    Feb 2011
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I greatly appreciate your help : )

  15. #15
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,716
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by bigbonthabeat View Post
    I think my problem is that the form itself is too big.
    Refer back to the code from post #11

    Instead of using 75% for the width and height, you can instead use 460px, or whichever sizing specs you require.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

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