|
JavaScript - Javascript Light Box Displaying Information
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 Similar TutorialsHi Guys, I need a little bit or help with a bit of code I'm writing for a customer. I want to select some data from a database (photo names) and then show pass the information to a JavaScript to display the images on at a time moving onwhen a user click on a 'NEXT' button or back one when the click on a 'BACK' button. Does anyone have any idea on how to do this or is it something that is just no possible? Hi guys! i would like to ask for your assistance.. i am creating two template for my work.. and i would like to know what is the javascript that in one click i can copy and paste all the details from template #1 to template #2. considering that each field in template 1 will fall into the correct field in template #2.. http://img130.imageshack.us/i/25157983.jpg/ hope to hear from you soon. thanks! you may also email me at janshawn_54@yahoo.com Hi, 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?
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! 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 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
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. 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? I am one problem. When i click a link a some information in html is to be displayed on the screen. I have written code for that. But before i click the link i am able to display the content. Please look into my code and give some suggestions: <html> <head> </head> <body> <center> <table> <tr> <td> <a href="javascript:Chg1()">Add Required (Features)</a> </td> <td> <a href="javascript:chg2()">Add via Search</a> </td> <td> <a href="javascript:Chg3()">Add via List</a> </td> </tr> </table> </center> function chg2() { document.write(<b> Type Model Feature Relationship Search and Add </b>);s <table> <tr> <td> Type<input type="text" id="type" name="type" value=""> </td> <td> Document Number<input type="text" id="doc" name="doc" value=""> </td> </tr> <tr> <td> Model<input type="text" id="model" name="model" value=""> </td> <td> Promoted<input type="text" id="promoted" name="promoted" value=""> </td> </tr> <tr> <td> Feature<input type="text" id="feature" name="feature" value=""> </td> </tr> </table> } </script> </body> Hi guys, I already posted this but it hasn't been approved by a mod or the mods are all at lunch or something lol. I want to display an image using javascript instead of HTML (or use javascript to change the HTML code dynamically when an update is made). I have created an XML file, which contains text data which is displayed in HTML by using Javascript. What I am having trouble with is getting Javascript to grab the image URL from the XML file, and then display that image in the correct div. How does one show an image by using javascript? and how do you get javascript to get the url from the XML? The following is my Javascript code which grabs the text from the XML and displays it in the HTML; Code: <script type="text/javascript">
var xmlDoc;
<!--
if (window.XMLHttpRequest)
{
xhttp=new XMLHttpRequest();
}
else // Internet Explorer 5/6
{
xhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET","SDS.xml",false);
xhttp.send("");
xmlDoc=xhttp.responseXML;
var x=xmlDoc.getElementsByTagName("NEWS");
i=0;
function display()
{
title=(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue.fontsize("5").fontcolor("white").bold());
date=(x[i].getElementsByTagName("DATE")[0].childNodes[0].nodeValue.fontsize("2").fontcolor("white").bold());
stitle=(x[i].getElementsByTagName("STITLE")[0].childNodes[0].nodeValue.fontsize("3").fontcolor("white").italics());
story=(x[i].getElementsByTagName("STORY")[0].childNodes[0].nodeValue.fontsize("3").fontcolor("white"));
txt= title + "<br />" + date + "<br />" + stitle + "<br />" + story;
document.getElementById("show").innerHTML=txt;
}
//-->
</script>
And this is the XML file; Code: <?xml version="1.0" encoding="ISO-8859-1"?> <BULLETIN> <NEWS> <PIC>"newssmall.jpg"</PIC> <DATE>14/3/2010</DATE> <TITLE>News Story 1</TITLE> <STITLE>This is a short sentence to describe the story in brief</STITLE> <STORY>This is the text of the news story</STORY> </NEWS> </BULLETIN> So what I want to do is create a function that grabs the url (relative) from the PIC tag in the XML ("newssmall.jpg") and then uses this URL to display the image on the HTML page. This way, only the XML needs updating when updating the news section of the site. Thanks for helping if you can, Dan Im coding a chat system, but the main thing which I cannot get working which is stopping me from doing this is displaying the data from the database. I have made a test XML document for the time being so that I can get the JavaScript/AJAX working properly, then I will figure out why my PHP isnt generating the XML file properly. Here is my XML document: Code: <?xml version="1.0" ?> <root> <message id="0"> <sender>martynball</sender> <receiver>someoneelse</receiver> <time>154375342</time> <text>Testing an XML document and seeing if the JavaScript will display it properly. If so then there is a problem with the PHP.</text> </message> </root> And here is my JavaScript/AJAX, for some reason there is NOTHING being displayed in the div which has the correct ID. Code: <script type="text/javascript">
function getXmlHttpRequestObject()
{
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
return new XMLHttpRequest();
}
if (window.ActiveXObject)
{
// code for IE6, IE5
return new ActiveXObject("Microsoft.XMLHTTP");
}
return null;
}
//Make variables for later use
var lastMess = 0;
var sendReq = getXmlHttpRequestObject();
var receiveReq = getXmlHttpRequestObject();
var mTimer;
function getMessage() {
if (receiveReq.readyState == 4 || receiveReq.readyState == 0) {
//var url = "scripts/get_data.php?uid=<?=$_SESSION['uid']?>&m=" + lastMess + "&chat=1";
var url = "testXMLdoc.xml";
receiveReq.open("GET", url, true);
receiveReq.onreadystatechange = manageMessage;
receiveReq.send(null);
lastMess++;
}
}
function manageMessage() {
if (receiveReq.readyState == 4) {
var xmldoc = receiveReq.responseText;
var chat_div = document.getElementById('chat');
var msg_nodes = xmldoc.getElementByTagName("message");
var n_msg = message_nodes.length;
for (i = 0; i < n_msg; i++) {
var sender_node = msg_node[i].getElementByTagName["sender"];
var receiver_node = msg_node[i].getElementByTagName["receiver"];
var time_node = msg_node[i].getElementByTagName["time"];
var text_node = msg_node[i].getElementByTagName["text"];
chat_div.innerHTML = "He <br />" + sender_node[0].firstChild.nodeValue + "<br />";
chat_div.innerHTML = reciever_node[0].firstChild.nodeValue + "<br />";
chat_div.innerHTML =time_node[0].firstChild.nodeValue + "<br />";
chat_div.innerHTML = text_node[0].firstChild.nodeValue + "<br />";
}
}
}
</script>
Also, I put a alert under the manageMessage() function before the IF statement and that gets displayed. I have to display a div before firing a sync ajax in javascript div is getting displayed in firefox but not in IE and chrome. I need to basically display a download bar to indicate the user that the request is in progress I am pretty novice. I do not know much about the compilers or how these things run. I do however have a good eye for trends and can figure just about anything out by looking at it. With that; I have a game that uses a exe launcher with a built in patcher. I have found the code for the launcher. There are several "jquery" scripts for basic components like scroll wheel. There are also things like "downloader.js", "inputs.js". I am interested in seeing what (and more precisely how many) ip addresses are being retrieved. I fear this patcher is using a hidden bittorrent like download system. The code for "downloader" is pretty basic. It clearly uses some other script, but I am wondering if you can point me in the direction of a utility to monitor running JS so that I can see what is being returned. Code: _Downloader = function()
{
this.downloadStatusCallback = null;
}
_Downloader.prototype =
{
setDownloadStatusCallback: function(callback)
{
this.downloadStatusCallback = callback;
},
addDownload: function(downloadName, metaUrl, outputPath, authorizationURL) // returns bool
{
return document.SSNLauncher.SSNLauncher_ReturnBool('addDownload', 'string:' + downloadName + '|' + 'string:' + metaUrl + '|' + 'string:' + outputPath + '|' + 'string:' + authorizationURL + '|');
},
removeDownload: function(downloadName) // returns bool
{
return document.SSNLauncher.SSNLauncher_ReturnBool('removeDownload', 'string:' + downloadName + '|');
},
getDownloadOption: function(downloadName, optionName) // returns string
{
return document.SSNLauncher.SSNLauncher_ReturnString('getDownloadOption', 'string:' + downloadName + '|' + 'string:' + optionName + '|');
},
setDownloadOptions: function(downloadName, enableBitSources, enableWebSources) // returns bool
{
return document.SSNLauncher.SSNLauncher_ReturnBool('setDownloadOptions', 'string:' + downloadName + '|' + 'bool:' + enableBitSources + '|' + 'bool:' + enableWebSources + '|');
},
getDownloadActive: function(downloadName) // returns bool
{
return document.SSNLauncher.SSNLauncher_ReturnBool('getDownloadActive', 'string:' + downloadName + '|');
},
setDownloadActive: function(downloadName, active) // returns bool
{
return document.SSNLauncher.SSNLauncher_ReturnBool('setDownloadActive', 'string:' + downloadName + '|' + 'bool:' + active + '|');
}
}
function __Downloader_reportdownloadStatus(downloadName, state, active, totalBytes, bytesLeft, maxIncoming, averageIncoming, currentIncoming, maxOutgoing, averageOutgoing, currentOutgoing, bytesRead, bytesSent, scanBytesLeft)
{
if (SSN.Downloader.downloadStatusCallback != null)
{
SSN.Downloader.downloadStatusCallback(downloadName, state, active, totalBytes, bytesLeft, maxIncoming, averageIncoming, currentIncoming, maxOutgoing, averageOutgoing, currentOutgoing, bytesRead, bytesSent, scanBytesLeft);
}
}
I have tried on several occasions to teach myself programing. I can get the commands and syntax fairly easily, and I am pretty good at 'coming up' with ways to get something done. I just don't have experience in this field (I'm in medical school) so I do not know about the tools and utilities programers use and scouring the internet has been less than fruitful. Anybody capable of pointing me in the direction of finding a utility to monitor running js (if that is even possible =/). I use dreamweaver CS5 to explore js code. I'm very new at JavaScript and I'm trying to get each of the if statements below in a text text box with the result depending on the answer of the equation. However i can't figure out a way to allow the user to click a button to to show the result in a text box. If anyone could help it would be much appreciated. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<script type="text/javascript">
function calculate() {
A = document.form1.text2.value
B =(parseInt(A ) * 52)
D= (parseInt(B ) * 0.015 )
if ( B <= 6000){
tax = 0;}
else
if (B <= 37001){
tax = (B - 6000) * .15;
} else
if (B<= 80001){
tax = (B - 37000) * .30 + (37000 - 6000) * .15;
} else
if (B <= 180001){
tax = (B- 80000) * .37 + (80000- 37000) * .30 + (37000 - 6000) * .15;
} else
tax = (B - 180000)* .45 + (180000 - 80000 begin_of_the_skype_highlighting**************180000 - 80000******end_of_the_skype_highlighting) * .37 + (80000- 37000) * .30 + (37000 - 6000) * .15;}
</script>
</HEAD>
<BODY>
<form name="form1">
Weekly Salary: <INPUT TYPE="TEXT" NAME="text2">
<INPUT TYPE="BUTTON" VALUE="SUBMIT" Onclick="calculate();">
</BODY>
</HTML>
I'm working with greasymonkey scripts. Firefox JS console would always display GM script errors, but all of the sudden it stopped doing that. Script just won't load and no errors are displayed. I didn't touch any settings, yesterday they were showing fine, today none are displayed. Would appreciate any help.
using a javascript function to determine if a string is all digits or not and return result based off the decision. if it is all digits, mask all digits except the first two, if not all digits just return the string. these are the snippets however i am not seeing anything returned in the column Code: <script >
var start = function RenderRC(CodeOwner) {
var Rcode = CodeOwner.toString();
var pattern = new RegExp("^\d{2,}$ ");
if (Rcode.match(pattern)) {
if (Rcode.length > 2)
{
var newcode = Rcode.substr(0, 2) + Array(Rcode.length - 2 + 1).join("*");
return newcode;
}
}
else
{
return Rcode;
}
};
</script>
<ext:RecordField Name="CodeOwner" />
<ext:Column Header="<%$ Resources:Text, CodeOwner %>"DataIndex="CodeOwner" Width="110" >
<Renderer Fn ="start" />
</ext:Column>
Howdy all. I have Win 7, IE9. I have a HTML file on my hard drive, with Javascript within. When I load the page, it keeps popping up Do u want to allow this content, I have to click to allow. I want to stop this, and after doing some searching I found the setting in Internet Options, Advanced - "Allow active content to run in files on my computer". Perfect. Doesnt work. When i check this box, the page loads without the warning, but then the Javascript just doesnt work. Getting quite annoying, because this file is my home page. Any help would be great! |
|||||||