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 10 of 10
  1. #1
    Regular Coder
    Join Date
    Nov 2005
    Posts
    750
    Thanks
    138
    Thanked 1 Time in 1 Post

    Link to lightbox?

    Hello

    I would like a light-box to appear (a form) when a site visitor clicks on the 'Contact' link on my site's menu.

    At the moment, this link looks like this:

    <li><a href="http://www.mysite.com">Contact</a></li>

    How can I change that to incorprate the following which generates my light-box?

    <div id="contact-form"><a class="contact" href="#">Demo</a></div>
    </div>

    Thanks for any advice.

    Steve

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Regular Coder
    Join Date
    Nov 2005
    Posts
    750
    Thanks
    138
    Thanked 1 Time in 1 Post
    Hello abdurappft

    Thanks for your message.

    I think I have been to that site before.

    Actually, I already have the light-box set up:

    http://stevehigham59.7host.com/jQuery/index3.html

    The script behind the link 'Demo' is:

    Code:
    <div id="contact-form">
           <a class="contact" href="#">Demo</a></div>
    I just needed some advice on how to replace my menu link which is this:

    Code:
    <li><a href="http://www.mysite.com">Contact</a></li>
    with that link that opens the light-box.

    Cheers

    Steve

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello SteveH,
    Just changing the link in the li doesn't work? Like this -
    Code:
       <ul>
           <li><a class="contact" href="#">Contact</a></li>
    </ul>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    Regular Coder
    Join Date
    Nov 2005
    Posts
    750
    Thanks
    138
    Thanked 1 Time in 1 Post
    Hello Excavator

    Thanks for your reply.

    No it does not.

    If you go here:

    http://stevehigham59.7host.com/final...u//index4.html

    and click on Contact (with your suggested script behind it), it does nothing. Now, if you scroll down the page and click on Demo, the light-box loads!

    Thanks.

    Steve

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    I think it's because the path in your js is referring to the form your Demo is in and not the li that Contact is in.
    It seems there is more to firing lightbox than just the link <a class="contact" href="#">Contact</a>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    Regular Coder
    Join Date
    Nov 2005
    Posts
    750
    Thanks
    138
    Thanked 1 Time in 1 Post
    Hello Excavator

    Thanks for your post.

    What I have in my HTML page (and which loads the lightbox) is this script:

    <div id="contact-form">
    <a class="contact" href="#">Demo</a></div>


    I have checked the JS page (a file called contact.js) and you will see that 'contact-form' and 'contact' are referenced in it.

    I am posting the JS here, but would it be more useful to ask in the JS forum?

    Thanks.

    Steve



    Code:
    $(document).ready(function () {
    	$('#contact-form input.contact, #contact-form a.contact').click(function (e) {
    		e.preventDefault();
    		// load the contact form using ajax
    		$.get("data/contact.php", function(data){
    			// create a modal dialog with the data
    			$(data).modal({
    				closeHTML: "<a href='#' title='Close' class='modal-close'>x</a>",
    				position: ["15%",],
    				overlayId: 'contact-overlay',
    				containerId: 'contact-container',
    				onOpen: contact.open,
    				onShow: contact.show,
    				onClose: contact.close
    			});
    		});
    	});
    
    	// preload images
    	var img = ['cancel.png', 'form_bottom.gif', 'form_top.gif', 'loading.gif', 'send.png'];
    	$(img).each(function () {
    		var i = new Image();
    		i.src = 'img/contact/' + this;
    	});
    });
    
    var contact = {
    	message: null,
    	open: function (dialog) {
    		// add padding to the buttons in firefox/mozilla
    		if ($.browser.mozilla) {
    			$('#contact-container .contact-button').css({
    				'padding-bottom': '2px'
    			});
    		}
    		// input field font size
    		if ($.browser.safari) {
    			$('#contact-container .contact-input').css({
    				'font-size': '.9em'
    			});
    		}
    
    		// dynamically determine height
    		var h = 280;
    		if ($('#contact-subject').length) {
    			h += 26;
    		}
    		if ($('#contact-cc').length) {
    			h += 22;
    		}
    
    		var title = $('#contact-container .contact-title').html();
    		$('#contact-container .contact-title').html('Loading...');
    		dialog.overlay.fadeIn(200, function () {
    			dialog.container.fadeIn(200, function () {
    				dialog.data.fadeIn(200, function () {
    					$('#contact-container .contact-content').animate({
    						height: h
    					}, function () {
    						$('#contact-container .contact-title').html(title);
    						$('#contact-container form').fadeIn(200, function () {
    							$('#contact-container #contact-name').focus();
    
    							$('#contact-container .contact-cc').click(function () {
    								var cc = $('#contact-container #contact-cc');
    								cc.is(':checked') ? cc.attr('checked', '') : cc.attr('checked', 'checked');
    							});
    
    							// fix png's for IE 6
    							if ($.browser.msie && $.browser.version < 7) {
    								$('#contact-container .contact-button').each(function () {
    									if ($(this).css('backgroundImage').match(/^url[("']+(.*\.png)[)"']+$/i)) {
    										var src = RegExp.$1;
    										$(this).css({
    											backgroundImage: 'none',
    											filter: 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="' +  src + '", sizingMethod="crop")'
    										});
    									}
    								});
    							}
    						});
    					});
    				});
    			});
    		});
    	},
    	show: function (dialog) {
    		$('#contact-container .contact-send').click(function (e) {
    			e.preventDefault();
    			// validate form
    			if (contact.validate()) {
    				var msg = $('#contact-container .contact-message');
    				msg.fadeOut(function () {
    					msg.removeClass('contact-error').empty();
    				});
    				$('#contact-container .contact-title').html('Sending...');
    				$('#contact-container form').fadeOut(200);
    				$('#contact-container .contact-content').animate({
    					height: '80px'
    				}, function () {
    					$('#contact-container .contact-loading').fadeIn(200, function () {
    						$.ajax({
    							url: 'data/contact.php',
    							data: $('#contact-container form').serialize() + '&action=send',
    							type: 'post',
    							cache: false,
    							dataType: 'html',
    							success: function (data) {
    								$('#contact-container .contact-loading').fadeOut(200, function () {
    									$('#contact-container .contact-title').html('Thank you!');
    									msg.html(data).fadeIn(200);
    								});
    							},
    							error: contact.error
    						});
    					});
    				});
    			}
    			else {
    				if ($('#contact-container .contact-message:visible').length > 0) {
    					var msg = $('#contact-container .contact-message div');
    					msg.fadeOut(200, function () {
    						msg.empty();
    						contact.showError();
    						msg.fadeIn(200);
    					});
    				}
    				else {
    					$('#contact-container .contact-message').animate({
    						height: '30px'
    					}, contact.showError);
    				}
    				
    			}
    		});
    	},
    	close: function (dialog) {
    		$('#contact-container .contact-message').fadeOut();
    		$('#contact-container .contact-title').html('Goodbye...');
    		$('#contact-container form').fadeOut(200);
    		$('#contact-container .contact-content').animate({
    			height: 40
    		}, function () {
    			dialog.data.fadeOut(200, function () {
    				dialog.container.fadeOut(200, function () {
    					dialog.overlay.fadeOut(200, function () {
    						$.modal.close();
    					});
    				});
    			});
    		});
    	},
    	error: function (xhr) {
    		alert(xhr.statusText);
    	},
    	validate: function () {
    		contact.message = '';
    		if (!$('#contact-container #contact-name').val()) {
    			contact.message += 'Name is required. ';
    		}
    
    		var email = $('#contact-container #contact-email').val();
    		if (!email) {
    			contact.message += 'Email is required. ';
    		}
    		else {
    			if (!contact.validateEmail(email)) {
    				contact.message += 'Email is invalid. ';
    			}
    		}
    
    		if (!$('#contact-container #contact-message').val()) {
    			contact.message += 'Message is required.';
    		}
    
    		if (contact.message.length > 0) {
    			return false;
    		}
    		else {
    			return true;
    		}
    	},
    	validateEmail: function (email) {
    		var at = email.lastIndexOf("@");
    
    		// Make sure the at (@) sybmol exists and  
    		// it is not the first or last character
    		if (at < 1 || (at + 1) === email.length)
    			return false;
    
    		// Make sure there aren't multiple periods together
    		if (/(\.{2,})/.test(email))
    			return false;
    
    		// Break up the local and domain portions
    		var local = email.substring(0, at);
    		var domain = email.substring(at + 1);
    
    		// Check lengths
    		if (local.length < 1 || local.length > 64 || domain.length < 4 || domain.length > 255)
    			return false;
    
    		// Make sure local and domain don't start with or end with a period
    		if (/(^\.|\.$)/.test(local) || /(^\.|\.$)/.test(domain))
    			return false;
    
    		// Check for quoted-string addresses
    		// Since almost anything is allowed in a quoted-string address,
    		// we're just going to let them go through
    		if (!/^"(.+)"$/.test(local)) {
    			// It's a dot-string address...check for valid characters
    			if (!/^[-a-zA-Z0-9!#$%*\/?|^{}`~&'+=_\.]*$/.test(local))
    				return false;
    		}
    
    		// Make sure domain contains only valid characters and at least one period
    		if (!/^[-a-zA-Z0-9\.]*$/.test(domain) || domain.indexOf(".") === -1)
    			return false;	
    
    		return true;
    	},
    	showError: function () {
    		$('#contact-container .contact-message')
    			.html($('<div class="contact-error"></div>').append(contact.message))
    			.fadeIn(200);
    	}
    };

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by SteveH View Post
    What I have in my HTML page (and which loads the lightbox) is this script:

    <div id="contact-form">
    <a class="contact" href="#">Demo</a></div>


    I have checked the JS page (a file called contact.js) and you will see that 'contact-form' and 'contact' are referenced in it.
    That's about as far as I made it since I'm no js guy. Maybe someone else here can suggest how to redirect your js or it might be that you'll get better help in the js forum.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #9
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Code:
    #contact-form input.contact, #contact-form a.contact
    Your javascript is being set to watch for a click of an input or link item inside of an element with ID of "contact-form". All you need to do to get this working is add that ID to your parent <li> element and keep the class of "contact" on your <a> element like this:

    Code:
    <li id="contact-form"><a href="http://www.mysite.com" class="contact">Contact</a></li>
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #10
    Regular Coder
    Join Date
    Nov 2005
    Posts
    750
    Thanks
    138
    Thanked 1 Time in 1 Post
    Hello Rowsdower

    Brilliant!

    http://stevehigham59.7host.com/final...nu/index4.html

    It worked using

    Code:
    <li id="contact-form"><a href="#" class="contact">Contact</a></li>
    Many thanks to you and everyone who has helped.

    Cheers

    Steve


  •  

    Posting Permissions

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