|
JavaScript - Js And Light-box Query - Help, Please!
Hello
I have a primitive Web page he http://stevehigham59.7host.com/final...u//index4.html At the very bottom there is a blue link labelled 'Demo' which, when clicked loads a light-box. The script behind this 'Demo' link is simply: Code: <div id="contact-form">
<a class="contact" href="#">Demo</a></div>
This references a JS file (contact.js) which I am pasting below this message. What I would like to do is load the light-box into a simple list (the menu tab) which appears on the same page as the URL I have posted above. The script behind the menu tab was something like: <li><a href="http://www.mysite.com">Contact</a></li> but I changed it to: <li><a class="contact" href="#">Contact</a></li> This didn't work because it is not speaking to the JS file (I presume). How can I achieve what I am after, please? Thanks. Steve contact.js 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);
}
};
Similar TutorialsHi, I need some advice. I wanted to create a 4 by 4 grid in a webpage. Then i want to select a specific box in the grid to flash a certain colour. There will always be a set sequence of the same sections lighting up with the same colours. So row 2 col 2 flashes green, then row 4 col 1 flashes pink etc. With around 5 boxes being used out of 16. How would i go about doing this? Is using Javascript the best thing to use? Any advice would be greatly appreciated. Thanks. Im doing a project for college and on my website im trying to install lightbox on this page www.corkbouncingcastles.com/castles.html Can anyone help me out? in the image.xml file i have this code.. do i need to change the part where it says target="_self" ?? PHP Code: <photo image="images/small/02.jpg" bigimage="images/big/02.jpg" url="javascript:GroupDelegate('img2')" target="_self" lightboxInfo="Optional description for image 2"><![CDATA[Super Slide Bouncing Castle]]></photo> I'm wondering if theirs a way to make a dim light, sorta like a candle follow my mouse cursor on a webpage?
I'm helping out my friend complete her site. check it out he http://themodline.com/clients/jcevent when you head over to the portfolio section the the lightbox script doesnt work properly. but if you just go to http://themodline.com/clients/jcevent/portfolio.html -it works fine. are the scripts mixing up? i made sure i got the correct codes. i made sure the script files are correctly linked. check out my scripts. they are zipped he http://www.themodline.com/clients/jcevent/scripts.zip thanks for the help guys. hope this makes sense! Hey guys, I have a colour picker on my site, see it at http://www.ludatha.com Now I want to change the colour of the links on the page, don't worry I know how to do all this. It's just if someone chooses full black (#000000) the theme looks awesome, but the links on the dark background are invisible. Similarly if someone chooses full white (#ffffff) then you can't see the text on the white background. So I want to know if you geniuses can make it so when a variable containing a hex, like #000000 is set as the main colour, then the link colour is changed to #666666 so you can still see it, but I want it to work with colours, so if you had #360000 (dark red) then the link colour would be something like #a10000. I know this is possible, somehow... I hope I have explained it well enough for you to understand, here is my code to change the background: Code: onChange: function (hsb, hex, rgb) {
$('.colour-picker-colour').css('backgroundColor', '#' + hex);
$('.background').css('backgroundColor', '#' + hex);
$('.colour').css('backgroundColor', '#' + hex);
$('.colour-text').css('color', '#' + hex);
$('a .colour-text').css('color', '#' + hex);
$('.colour-text-hover:hover').css('color', '#' + hex);
$('.tabs a:hover').css('color', '#' + hex);
$('.seperator').css('backgroundColor', '#' + hex);
$.cookie('ludatha_colour', hex, { expires: 365 });
}
P.S. My site may not look right for a few hours as the images and CSS is updating. Have problem with IE8. Before IE 8, I can disable a drop-down box, but the selected item still there highlighted. But IE 8 makes the highlight go away. Is there any way to keep the original, Disable a item, you still keep the lightlights Thanksl
I am currently using the JavaScript Light Box found on; http://www.huddletogether.com/projects/lightbox2/ I was wondering if it is possible, or easy enough to create something alike the one found on; http://www.whsmith.co.uk/Support/Hel...ffiliates.aspx when you click on; > How to become an affiliate > Complete the OMGuk.com affiliate application form. Many Thanks, Tim Im trying to figure out how to create a light box that doesn't close to reveal the content on the website, unless the user fully completes atleast 2-3 CPA(Cost Per Action) offers that will pop up in the lightbox? i know how to make a lightbox with a plugin from wordpress, but I just don't know how to make it so it'll close when it figures out the user has completed the surveys/offers. Kind of like this but maybe smaller to show there is content/download link behind it, http://sharecash.org/download.php?file=1595911 Hi there, Where I work there are certain dates where nothing can be done, certain times where work can be done with caution, and dates where work can be done. I want to put on the site a traffic light that would change colours based on the calendar dates where work can/can't be done. For example, if April 11th there is stuff to do, the traffic light would be green. But April 12th, there isn't work to do, it would turn red. Do you know how I would go about doing this? Hi there! I am using GlassBox "http://www.glassbox-js.com/" As a light box on a website. Basically, You click an thumbnail image, and a window pops up with a larger version of that image. Now originally, the window opened X number of pixels from the top of the page. However, My thumbnail images were located mid page, so when you clicked on one, the window would open at the top of the page and the user would not see it unless they scrolled up. So I attempted to modify the script so that it would get the users page width/height and display it directly in the center no matter the position. Now my problem is that the script only works when the user has already scrolled down. So if the page is scrolled all the way to the top, and you click on a thumbnail, the window will not open center screen. Here is an example: http://synaxis.pcriot.com/ When the page loads, DO NOT scroll it, and click on the image. You will see the window pop up, and not centered, like it should be. However, now if you scroll down, and click the image again, you see that it is now centered. I also noticed that when the page is scrolled up, and the image does not center, it always is placed below the thumbnail image, or otherwise where ever the DIV is located. It normally located under the image, but if i place the DIV at the top of the page then the window will pop up there. And this does happen on every browser that I have tested, Firefox, IE, and Chrome. So, I am pretty much stumped as to why this is happening. If anyone can shed some light I would be very grateful. Thank You Here is a link to the original code: http://synaxis.pcriot.com/javascript...ox/glassbox.js And modified code: http://synaxis.pcriot.com/javascript...ox/glassbox.js The modified code is at the very bottom of the script. Original Code: Code: /**
* @public
*/
if ( typeof($) == 'undefined' ) {
$ = function (id) {
return document.getElementById(id);
}
}
Modified Code Code: /**
* @private
*/
var removeElement = function(id) {
var Node = document.getElementById(id);
Node.parentNode.removeChild(Node);
}
/**
* @private
*/
var getDocHeight = function() {
var db = document.body;
var ddE = document.documentElement;
return Math.max(
db.scrollHeight, db.offsetHeight, db.clientHeight,
ddE.scrollHeight, ddE.offsetHeight, ddE.clientHeight
);
}
/**
* @public
*/
if ( typeof($) == 'undefined' ) {
$ = function (id) {
return document.getElementById(id);
}
}
Apologies for the confusing title. I have a scipt Code: ....style: google.maps.NavigationControlStyle.SMALL
}
});
<?
$query = mysql_query("SELECT * FROM `family_support` WHERE 1");
while ($row = mysql_fetch_array($query)){
$org_name=$row['org_name'];
$lat=$row['lat'];
$long=$row['long'];
$org_address=$row['org_address'];
echo ("addMarker($lat, $long,'<b>$org_name</b><br/>$org_address');\n");
}
?>
center = bounds.getCenter();
map.fitBounds(bounds);
}
</script>
I want the $query to be the same as another query set up further down the page; Code: $sql_result= "SELECT * FROM family_support WHERE org_name LIKE '%$org_name%'";
if ($area != 'All') {
$sql_result .=" AND area LIKE '%$area%'";
}
if ($services != 'All') {
$sql_result .=" AND services LIKE '%$services%'";
}
if ($hardiker != 'All') {
$sql_result .=" AND hardiker = '$hardiker'";
}
My php is dire and help with putting these together would help me display markers on a map for all results from a search form rather than display all records within the db as is happening at present.... Also would I need to move the script from the head tag? If you have a java script function in page loading to execute a code to affect a control on the form, but that particular control is rendering in page init event and when you test the page, you find it gives you an error message “object name ‘control name’ is not exist”, because of scripting code executing before form element rendering? What should you do to fix that? Thanks Waqar Is it possible to change the "OK" text in an alert confirm box ?
Hi I make a query to a database, normally it gives back a 0, now I want that the script keeps in touch with the database till the row gives back one. Till now I made it with a setInterval and went through the function again and again, but I think it's not really good for the database. Can't the function wait in the query till comes back a 1 and then doing something? Here is what I got so far: Quote: function latestCheckFB() { var query = FB.Data.query('SELECT uid FROM page_fan WHERE page_id = 164524456919432 AND uid = 100001762758708'); query.wait(function (rows) { if (rows.length > 0) { // like found var msg = "you like it"; $("#halloA").text(msg); }else{ var msg = "you do not like it"; $("#halloA").text(msg); } }); } setInterval(function() { latestCheckFB(); }, 100); Hello all, I'm having problems with Javascript coding, and was hoping someone could help me out. I have a site using prestashop - http://www.dipsydaisy.co.uk The slider at the top, I am having problems with..at the moment, it is scrolling auto, but randomly. I need to have this scrolling through images 1-3, then back to the beginning, and on a continuing loop. Also I would like to apply a fade effect on each slide, but being a total novice, not sure if this can be done?...Here is the coding I have applied to get autoscroll: Code: intervalID = setInterval(makeScroll, 4000);
function makeScroll()
{
var rand_no = Math.floor(11*Math.random());
if (rand_no < 5)
{
$('#slides > .next > a').click();
}
else
{
$('#slides > .back > a').click();
}
Hope someone can help! Many thanks. Frnds,i need some help related to cookie handling in JS.Suppose i created a cookie with an expiration time of 1 month.Now,for the time my current browser session is running,the cookie is stored in browser memory.When the browser is closed,the cookie gets written to HD.(I need to know where it is written). Next day,when the script page is opened,the browser should check the cookie created last day and display its value in the page.. Does this operation handled by document.cookie call??I mean..setting cookie will definitely require this call,but what about fetching it back next day???what call should be used for fetching... Hi, I know how to replace all the + signs in a url string by spaces, like this: newstring=oldstring.replace(/[+]/g," "); but how do I replace a substring by a comma easily? This doesn't do it: newstring=oldstring.replace(/[&menuitems]/,","); Thanks in advance for any help. Hi, I know virtually nothing about js so here goes: I use the following script: Code: <script type="text/javascript">var showNav = false;var params='clubID=1784&compID=8041&leagueTable=y&orderTBCLast=Y&colour=147C99';var colour = '147C99';</script> The variable which needs to be called from another page is 'compID' - as I have about 20 competitions rather than hard-coding each page I hoped to generate this from the following: infocus/respage.php?cid=8041 <--- where I can change the compID from the 'calling' page. In my absolute naivety I thought I could simply change the code to this: Code: <script type="text/javascript">var showNav = false;var params='clubID=1784&compID=cid&leagueTable=y&orderTBCLast=Y&colour=147C99';var colour = '147C99';</script> But as the learned among you will realise this just doesnt work - any help appreciated! Hi There, I'm working on an application that potentially gets 1000s of geolocation queries per day and if I don this (as I've done it till now) in php, it works fine but I quickly run into OVER_QUERY_LIMIT error from the google map apis. Thus I think I'd better do it in javascript and just send the coordinates to the server for caching rather than querying from the server's IP. Now the url that sends back the location information looks like this: http://www.google.com/url?sa=D&q=htt...s3czv6-nMr_nbw and I was wondering how I can send a request to this url and parse the xml string that's returned with JavaScript to pass it on to a php (probably by get variables). Is there a handy method that's compatible accross a bunch of browsers incl. mobile ones? Thanks very much for some input! Ron Hello everybody ! I'm searching for a javascript function that convert array to query string. Like this example : Code: var array = { a=1, b=2, c=3 };
to
a=1&b=2&c=3
I'm using jQuery and the function .serialize() convert only html forms. Does someone know a function to do this ? Thanks ! |
|||||||