...

View Full Version : Link to lightbox?



SteveH
10-25-2009, 05:21 PM
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

abduraooft
10-25-2009, 05:53 PM
Check http://particletree.com/features/lightbox-gone-wild/

SteveH
10-25-2009, 06:54 PM
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:


<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:


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

with that link that opens the light-box.

Cheers

Steve

Excavator
10-25-2009, 07:10 PM
Hello SteveH,
Just changing the link in the li doesn't work? Like this -
<ul>
<li><a class="contact" href="#">Contact</a></li>
</ul>

SteveH
10-25-2009, 07:25 PM
Hello Excavator

Thanks for your reply.

No it does not.

If you go here:

http://stevehigham59.7host.com/finalProof/imagemenu//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

Excavator
10-25-2009, 08:15 PM
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>

SteveH
10-26-2009, 08:41 PM
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




$(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);
}
};

Excavator
10-26-2009, 09:00 PM
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.

Rowsdower!
10-26-2009, 09:18 PM
#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:


<li id="contact-form"><a href="http://www.mysite.com" class="contact">Contact</a></li>

SteveH
10-26-2009, 10:11 PM
Hello Rowsdower

Brilliant!

http://stevehigham59.7host.com/finalProof/imagemenu/index4.html

It worked using


<li id="contact-form"><a href="#" class="contact">Contact</a></li>

Many thanks to you and everyone who has helped.

Cheers

Steve



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum