|
JavaScript - Light Box Script Not Working.
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! 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. 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);
}
};
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?
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
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 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. 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 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? We have an ASP website which everything works fine in pre-IE8, firefox and even our iPhone browsers but not IE8. I know what the problem is and where the problem is but don't know how to fix it, it should be pretty simple but I am not a developer...just trying to fix this one problem When the page loads it is supposed to automatically fill in a text box with the word: No This is the javascript that is supposed to do that: Code: <script type="text/javascript">
function statusdefault(oSel) {
status = 'No';
document.getElementById('theLabel5').value = status;
}
</script>
and this shows the onload line: Code: <body onload="statusdefault(this)" bgcolor="#FFFFFF" background="images/background_stripe.jpg" text="#000000" link="#CCCCCC" vlink="#CCCCCC" alink="#CCCCCC" leftmargin="0" topmargin="10" marginwidth="0" marginheight="10"> <form action="<%=MM_editAction%>" method="POST" name="frmDetail" id="frmDetail"> additionally when someone changes a selection in one of the comboboxes it should change the textbox to: Yes Here is the code for that (which also does not work): Code: <script type="text/javascript">
function statusupdated(oSel) {
status = 'Yes';
document.getElementById('theLabel5').value = status;
}
</script>
which of course gets triggered by this: Code: <select name="lstQueue" id="select" onChange="statusupdated(this)"> This is the code for the said textbox: Code: <input name="txtStatusUpdated" type="text" id="theLabel5" value="<%=(rsQ.Fields.Item("StatusUpdated").Value)%>">
The error I get in IE8 is "This page cannot be displayed..." and give a http500 error with no other info. It looks like this javascript code was copied and pasted throughout this same ASP page and altered to do different things. All of the other scripts like this one work fine so I know it is just something in these particular ones that have a problem. Thanks for any help that can be given!!! Scott Hey, I'm a total noob when it comes to javascript. and manged to make this code for a different forum: Code: //This script was created by TROPAFLIGHT2
var d=new Date();
var theDay=d.getDay();
switch (theDay)
{
case 1:
document.write("<EMBED src="http://bit.ly/Ky9R5F" autostart=true loop=true volume=100 hidden=true>");
break;
case 2:
document.write("<EMBED src="http://bit.ly/Ky9R5F" autostart=true loop=true volume=100 hidden=true>");
break;
case 3:
document.write("<EMBED src="http://bit.ly/JGUdU9" autostart=true loop=true volume=100 hidden=true>");
break;
case 4:
document.write("<EMBED src="http://bit.ly/JMVvl0" autostart=true loop=true volume=100 hidden=true>");
break;
case 5:
document.write("<EMBED src="http://bit.ly/JVq7yb" autostart=true loop=true volume=100 hidden=true>");
break;
case 6:
document.write("<EMBED src="http://bit.ly/J7fvwY" autostart=true loop=true volume=100 hidden=true>");
break;
default:
document.write("<EMBED src="http://bit.ly/J2mc7a" autostart=true loop=true volume=100 hidden=true>");
}
That code obviously didn't work so I manged to fix certain things: Code: //This script was created by TROPAFLIGHT2
var d=new Date();
var theDay=d.getDay();
switch (theDay)
{
case 1:
document.write;"(<EMBED src="//bit.ly/Ky9R5F" autostart=true loop=true volume=100 hidden=true>)";
break;
case 2:
document.write;"(<EMBED src="//bit.ly/Ky9R5F" autostart=true loop=true volume=100 hidden=true>)";
break;
case 3:
document.write;"(<EMBED src="//bit.ly/JGUdU9" autostart=true loop=true volume=100 hidden=true>)";
break;
case 4:
document.write;"(<EMBED src="//bit.ly/JMVvl0" autostart=true loop=true volume=100 hidden=true>)";
break;
case 5:
document.write;"(<EMBED src="//bit.ly/JVq7yb" autostart=true loop=true volume=100 hidden=true>)";
break;
case 6:
document.write;"(<EMBED src="//bit.ly/J7fvwY" autostart=true loop=true volume=100 hidden=true>)";
break;
default:
document.write;"(<EMBED src="//bit.ly/J2mc7a" autostart=true loop=true volume=100 hidden=true>)";
}
Problem is, it still doesn't work and I don't really know why. I've stared at it for a long time but the problem didn't click like last time. Any help at all would be appreciated. Thanks in advance, me. Hi All, I am using one script which is functioning properly incase of IE but incase of Mozilla evenif the shift key is pressed and any character key is pressed then it is displaying Caps Lock is On. can anyone tell how can I make it Mozilla and IE compatible. hi all. im having problems with this ajax script i wrote: Code: function admin_adduser() {
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null) {
alert ("Browser does not support HTTP Request");
return;
}
user = document.getElementById('user_user').value;
user = user.replace(/^\s+|\s+$/g, '');// trim whitespace
//check if name is unique
unique = 'false';
var params = "?user=" + escape(user);
var url="_check_username.php";
url=url+params;
ajaxedInner = "";
xmlHttp.open("GET",url,true);
xmlHttp.setRequestHeader("If-Modified-Since", "Fri, 31 Dec 1999 23:59:59 GMT");
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.send(null);
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
unique = xmlHttp.responseText.replace(/^\s+|\s+$/g, ''); //trims all whitespace!
//alert(unique);
}
}
}
if(unique == 'true') {
//alert("working: " + unique);
password = document.getElementById('user_password').value;
var params = "?user_user=" + escape(user) + "&user_password=" + escape(password);
var url="_admin_add_user.php";
url=url+params;
ajaxedInner = "users";
xmlHttp.open("GET",url,true);
xmlHttp.setRequestHeader("If-Modified-Since", "Fri, 31 Dec 1999 23:59:59 GMT");
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.send(null);
document.getElementById('user_password').value = "";
document.getElementById('user_user').value = "";
} else {
alert('Please select a unique name for the new staff member\nadd a middle initial maybe?');
}
}
if i alert(unique) it tells me 'true' (string) but still doesnt go into the create part of the script, i just get the alert('Please select a unique name for the new staff member\nadd a middle initial maybe?'); any ideas? i know im probably missing something basic but its really annoying lol btw - the php for the _check_username.php is simple: PHP Code: <?php if(!isset($_SESSION)) {session_start();} if($_SESSION['authorised'] != true) { exit; } include 'config.php'; include 'opendb.php'; $user = $_REQUEST['user']; $query = "SELECT user FROM user WHERE user='$user'"; echo $query; $result = mysql_query($query) or die('false'); $row = mysql_fetch_array($result, MYSQL_ASSOC); if($row) { echo 'false'; } else { echo 'true'; } mysql_free_result($result); ?> <script type="text/JavaScript"> function refreshPage(s) { window.location.reload(); if((s.options[s.selectedIndex].value) = "zed=catcher") { alert (s.selectedIndex); //this is showing <?PHP //the next lines does not execute????? echo $form['service_code']->renderLabel(); echo $form['service_code']->renderError(); echo $form['service_code']; ?> } } </script> please help? thanks Nice for a change: a piece of code that does work in all versions of IE, but not in Firefox. I'm stuck. Code: <img alt="Loodgieters" title="Loodgieters" src="/core/loodgieters_uit.png" name="loodgieters"
border="0" style="margin-right:1px; margin-top:1px; float:left; cursor:pointer;"
onclick="document.location='/pages/loodgieters.php';"
onmouseover="foto1.style.backgroundColor='#392d63'; loodgieters.src='/core/loodgieters_aan.png'"
onmouseout ="foto1.style.backgroundColor='#008ac9'; loodgieters.src='/core/loodgieters_uit.png'" />
Explanation: element "loodgieters" is a menu button that should change on mouseover. It doesn't in FF, it does in IE. Secondly, when you "mousover" the image, it should change the backgroundcolor of a second element (foto1). Element 'foto1' is a table cell. In return, when you mouse-over this table cell, the image element 'loodgieters' should change as well. So it's a two-way thing. The code for the table cell is: Code: <td height="189" id="foto1" bgcolor="#008ac9" valign="top" onmouseover="style.backgroundColor='#392d63'; loodgieters.src='/core/loodgieters_aan.png';" onmouseout="style.backgroundColor='#008ac9'; loodgieters.src='/core/loodgieters_uit.png';" style="cursor:pointer;" onclick="document.location='/pages/loodgieters.php';"> <img alt="Loodgieters" title="Loodgieters" src="/core/loodgieters.png" style="border:0; margin-left:auto; margin-right:auto; margin-top:10px; display: block;" /></td> Again: it all works as I expected in IE, Safari and Chrome, but it does not in Firefox. The whole page validates as XHTML 1.0 Transitional What am I overlooking here? I'm stuck. Any help is welcome Hello, Im new to scripting. I have 2 scripts that work in firefox but not in ie. I was wondering if anyone could help me? The First Javascript Code: <SCRIPT language="javascript">
<!-- // ***** GET TOTAL
function CalculateSum(setup, month, plan, form)
{
var A = parseFloat(setup);
var B = parseFloat(month);
form.x_amount.value = A + B;
form.user5.value = plan;
}
-->
</SCRIPT>
The second javascript Code: var os_price = 0;
var base_price = 0000;
var total_carryover = 0000;
function show_price() {
features = 0;
for(var pr in price) {
features+=price[pr];
}
month = features + base_price + os_price ;
total = month + total_carryover;
document.getElementById('setup_price').innerHTML="$"+(setup)/100;
document.getElementById('monthly_price').innerHTML="$"+(month)/100;
document.getElementById('total_price').innerHTML="$"+((total)/100+setup/100);
}
Thanks in advance for any help. Hi there, i have this simple script that replaces the scrollbar of an iframe called iFrame1 with 2 up and down arrow images, but it only works in IE, i've tried it in Chrome and Firefox... here is the code Code: <script type="text/javascript" language="javascript">
function bsh_iFrame1(step,time){hs_iFrame1=setInterval("sh_iFrame1("+step+")",time)}
function esh_iFrame1(){clearInterval(hs_iFrame1)}
function sh_iFrame1(step)
{
scrollx=iFrame1.document.body.scrollLeft
scrolly=iFrame1.document.body.scrollTop
scrolly=scrolly+step
iFrame1.window.scroll(scrollx,scrolly)
}
</script>
Code: </td><td align="center" valign="middle" width="31"><img src="up.png" alt="up" border=0 vspace="5" hspace="3" onMouseDown="esh_iFrame1();bsh_iFrame1(-3,2)" onMouseUp="esh_iFrame1();bsh_iFrame1(-1,20)" onMouseOver="bsh_iFrame1(-1,20)" onMouseOut="esh_iFrame1()"><br> <img src="down.png" alt="down" border=0 vspace="5" hspace="3" onMouseDown="esh_iFrame1();bsh_iFrame1(3,2)" onMouseUp="esh_iFrame1();bsh_iFrame1(1,20)" onMouseOver="bsh_iFrame1(1,20)" onMouseOut="esh_iFrame1()"> thanks in advance for any answers... Hi all, thanks in advance for any help. For a lot of years now I've used a javascript that does a simple rollover image swap, but also changes another alternate image at the same time. It's always worked like a charm. Lately I realized that the script no longer works in IE, though it used to in older versions of IE (I think it stopped working in anything past IE 7). It still works fine in Firefox, Safari, etc. I haven't been able to find a good alternative for this script, so I'm really trying to get it to work again in IE, but so far no luck. Here's the link to the actual script itself. http://www.jsmadeeasy.com/javascript...nges/index.htm (you can see that even the example on this page doesn't work in IE anymore) You can also see it in action at this site: http://www.augustroad.com/ (notice when you roll over the menu bar an alternate image appears in FF, but not in IE). Again, thanks in advance for any help. I truly appreciate it! Jordan Ok, I've determined that my problem wasn't in the script itself, but in the fact that Opera 10 Beta 2 apparently does not recognize the "onload" attribute of the body tag. Is there a way to work around this?
Hi there Im having an issue with some javascript that works fine in IE, but in FF is not working properly. The script is used to display a list of check boxes, the user can expand, which can checked to enabke a users selection of products. This is the script: Code: <script type="text/javascript">
var xcNode = [];
// m = Parent UL ID
// c =
function xcSet(m, c, q, isCompletedLength)
{
if (document.getElementById && document.createElement)
{
var xs = m;
m = document.getElementById(m).getElementsByTagName('ul');
var d, p, x, h, i, j;
for (i = 0; i < q; i++)
{
var xp = document.getElementById("_" + xs + i);
if (d = xp.getAttribute('id'))
{
if (navigator.userAgent.indexOf("Firefox") != -1)
{
var lstr = TrimTags((document.getElementById(xs).innerHTML));
xcCtrl(d, c, 'x', '[+] Click for more info', 'Show', 'Click to expand', lstr.length, isCompletedLength);
x = xcCtrl(d, c, 'c', '[-] Click to Hide', 'Hide', 'Click to collapse', lstr.length, isCompletedLength);
}
else
{
xcCtrl(d, c, 'x', '[+] Click for more info', 'Show', 'Click to expand', (document.getElementById(xs).innerText).length, isCompletedLength);
x = xcCtrl(d, c, 'c', '[-] Click to Hide', 'Hide', 'Click to collapse', (document.getElementById(xs).innerText).length, isCompletedLength);
}
p = xp.parentNode;
if (h = !p.className)
{
j = 2;
while ((h = !(d == arguments[j])) && (j++ < arguments.length));
if (h)
{
if (xp.name == parseURL())
{
xp.style.display = 'block';
x = xcNode[d + 'c'];
}
else
{
xp.style.display = 'none';
x = xcNode[d + 'x'];
}
}
}
p.className = c;
var expand = document.getElementById("expandBtn_" + xs + "0");
expand.insertBefore(x, expand.firstChild);
}
}
}
}
works fine in IE, but not in Firefox where the expanded list is not showing the current number of items (checkboxes), it shows 34 check boxes in IE but only 17 in firefox. Thanks in advance |
|||||||