|
JavaScript - Light Sequence
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. Similar TutorialsIm 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> 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);
}
};
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! Hi, I am using several Javascripts into a html file. Individually all scripts working fine, however when I put them on the onclick event someof them not works. Example: <html> <head> <script> function one; </script> <script> function two; </script> <script> function three; </script> </head> <body> <form type=post action=newfile.asp> .................... ................... ................... <input type=submit onclick="one(); two(); three();"> </form> </body> </html The schema is right? How is the best way to force many scripts working fine? Bob Hi there. I'm trying to make a little valentines website 'card' for my ladyfriend. I was going to be clever about it and use javascript, but as it turns out I'm really not that clever with it anymore. I need a single image to change into a different image on each following mouseover event. A planned 'route' of images, for exameple A -> B -> C -> D -> E -> A -> F - > B -> .. and so on. I thought I could do this, but I'm getting nowhere. I did try to look for similar attempts to make this, but it's kind of hard to find since 'mouseover' is such a generic search term. Thanks. Edit: there's little point for me in posting my code so far.. it's just a long list of imagecodes and a little mousover script that would probably make you laugh. This textbook is complete garbage, there is nothing in this thing about this topic at all. Here is the question I am trying to do: "Suppose you have a sequence of numbers Where every number is the previous number plus 3 1, 4, 7, 10, 13, 16, 19, 22 Write a program to output the first 10 number s of the sequence. You must calculate the numbers, you cannot just hard-code them into an array." Its a question on a test study guide. Heres what I got so far: Code: <html> <head> <script type="text/javascript"> VarX = 1 i = 3 VarY = VarX + i count++ do varY while count < 10 </script> </head> <body> </body> </html> 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. 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
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 I want the images to change in sequence when the page is refreshed not random like i have below. Can someone help me with this please? Also I also need text to change on refresh to because I am going to have a descritption of the image below. Thanks [CODE] <script type="text/javascript" language="JavaScript"> var imgs = new Array('<a href="VW_1.shtml"><img border=0 src="img/samples/VW/large_1.jpg" width=165 height=109" class="thumbnail_img">', '<a href="fortshelby1.shtml"><img border=0 src="img/samples/Fort Shelby/image1-large.jpg" width=165 height=109 class="thumbnail_img">', '<a href="jaguar1.shtml"><img border=0 src="img/samples/Jag_of_Novi/large_1.jpg" width=165 height=109 class="thumbnail_img">', '<a href="harley1.shtml"><img border=0 src="img/samples/wolverine_harley/large_1.jpg" width=165 height=109 class="thumbnail_img">', '<a href="bc1.shtml"><img border=0 src="img/samples/BC_Coney_Island/large_1.jpg" width=165 height=109 class="thumbnail_img">', '<a href="mama1.shtml"><img border=0 src="img/samples/Pozios_Retail_Mama_Vickys_Coney_Island/large_1.jpg" width=165 height=109 class="thumbnail_img">', '<a href="children1.shtml"><img border=0 src="img/samples/Detroit_Childrens_Museum/large_1.jpg" width=165 height=109 class="thumbnail_img">', '<a href="harper1.shtml"><img border=0 src="img/samples/Harper_Woods_Library/large_1.jpg" width=165 height=109 class="thumbnail_img">', '<a href="dps1.shtml"><img border=0 src="img/samples/DPS_Facilities_building/large_1.jpg" width=165 height=109 class="thumbnail_img">', '<a href="lakeland1.shtml"><img border=0 src="img/samples/Lakeland_School_Huron_Valley/large_1.jpg" width=165 height=109 class="thumbnail_img">', '<a href="auto1.shtml"><img border=0 src="img/samples/Manhattan_Auto_Group/large_1.jpg" width=165 height=109 class="thumbnail_img">', '<a href="maxey1.shtml"><img border=0 src="img/samples/Maxey_Ford/large_1.jpg" width=165 height=109 class="thumbnail_img">', '<a href="benz1.shtml"><img border=0 src="img/samples/Mercedes_Benz_of_St_Clair_Shores/large_1.jpg" width=165 height=109 class="thumbnail_img">', '<a href="metro_lofts1.shtml"><img border=0 src="img/samples/Metro_Lofts/large_1.jpg" width=165 height=109 class="thumbnail_img">', '<a href="mtclemens1.shtml"><img border=0 src="img/samples/Mt_Clemens_Library/large_1.jpg" width=165 height=109 class="thumbnail_img">', '<a href="st_gertrudes.shtml"><img border=0 src="img/samples/st_gertrudes/large_1.jpg" width=165 height=109 class="thumbnail_img">', '<a href="rayconnect1.shtml"><img border=0 src="img/samples/Rayconnect/large 1.jpg" width=165 height=109 class="thumbnail_img">', '<a href="faulhauber1.shtml"><img border=0 src="img/samples/Faulhauber/large1.jpg" width=165 height=109 class="thumbnail_img">'); var max = imgs.length; var num = Math.floor((Math.random() * max)); document.writeln(imgs[num]); </script> [CODE] I have an autocomplete script but it's currently returning results in a character is in the name anywhere at all, what I need it to do is only return matches if the characters are in sequence only. Example of how it is now if you type S it will return: Science Host Pass What I need it to do is only return a match if the first character is an S, and so on down the line in order. So if you type sam it should only return matches where the first 3 letter are sam in the order it's typed. Here's how the regexp is now: return value.replace(new RegExp("(?![^&;]+(?!<[^<>]*)(" + term.replace(/([\^\$\(\)\[\]\{\}\*\.\+\?\|\\])/gi, "\\$1") + ")(?![^<>]*>)(?![^&;]+", "gi"), "<strong>$1</strong>"); I built some pages that uses a Flash widget to play mp3 files on my server and show album covers at the same time. However, for people without Flash (like iPhone/Safari), I accommodate them by using a JavaScript that offers a list of simple links to the mp3 files. What I would really like, in the case of a page where there are several songs by the same artist, is a script that when activated, will play all the files in order. Possible? Where would I look for such a script?
I have an essoteric question about javascript and how DOM/javascript stores divs that are created and displayed in succession by absolute positioning. I have a series of divs that are assigned absolute top and left values to form a grid. The grid tiles are programmed to swap coordinates in pairs when one of the pairs is clicked. Then if I do a sampling of the divs by: Code: //returns the same string on every call.
//regardless of the coordinate values. which change
var GM = document.getElementById('TP');
if(GM.hasChildNodes)
{
var GMC = GM.getElementsByTagName('div');
var str = '';
for(i = 0; i < GMC.length; i++)
{
if(GMC[i].hasChildNodes)
{
for(var j = 0; j < GMC[i].childNodes.length; j++)
{
var gmc = GMC[i].childNodes[j];
var gmcTxt = gmc.childNodes[0].data;
str += gmcTxt;
}
}
}
}
alert(str);
The list does not represent the positions of the divs as they appear in the browser, but in a sequence that is saved in another array when the divs are created. The same is true for document.getElementById('[id assigned each div]') The only way to detect the sequence is to do a long drawn out loop looking for coordinate values, and comparing them to a prestablish template set of values, then looping back through to compare the contents of each div and decide if they are in the right place (visually). The problem is that some divs may have the same content. If the same content appears to be in the right place, the coordinates can be wrong. So I need to detect the content and decide if it is right, regard- less of the coordinates. This has to be done by the program (of course). So the question is: What is javascript doing when it is asked to Code: document.getElementByTagName('[elem]');
In this case are the divs children of the document? (in the case of my project, children of a container div) And why would they not be detected in the order apparent in the browser window? I will post the current version and return and post a reply with the url. http://www.jekillen.com/jekillen/con..._wise_dev.html I have no js experience or coding experience of any kind other than the last few hours of reading a book called 'object-oriented javascript', and all was well until loops. firstly, this is how he teaches the while loop... var i = 0; while (i <10) {i++;} which results in 9 we move on to for loops... var res =''; for( var i = 0; i <10; i++) {res += 'sometext' ;} which repeats, but I'd like to be able to make that into a sequence of numbers... 123456789. how do I do that? thanks. Hi! I'm very new to Javascript so first I want to apologize for my lack of knowledge, what I'm asking is probably really simple to do. Im have a folder full of images. Each image is named with an incrementing number like vidseq000001, vidseq000002, vidseq000003 and so on. I'm trying to use a jQuery plugin called "reel" to make the sequence animate. For that it seems I need to put the images inside an array. I know how to manually enter each image inside the array like var [ vidseq000001, vidseq000002, vidseq000003, ] But this becomes quite tedious with over thousand images. What would be a smarter way to put all my images inside an array? 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);
}
}
|
|||||||