|
JavaScript - Altering Code For Date Selector
Hi,
the source code on the website below i want to know what do i need to change to get the date to show as dd/mm/yyyy instead of mm/dd/yyyy? http://www.nsftools.com/tips/DatePickerTest.htm thanks for your help Similar TutorialsLong story short, I'm a novice webdesigner basically working with the local people, and small businesses. My Javascript abilities are sub-par so I normally try to follow tutorials or examples to implement java for now. Although I digress. To the point... I'm coding a web site for a photographer and need a natural looking picture selecting menu. For example... X = hidden image not scrolled into view O = image in line of sight X - X - X - X - O - O - O - O - X - X - X - X Now you kinda grasp what I'm attempting to do here.. anyone know of a good tutorial or example showing how to do this? I've seen several auto scrolling menus but that's not what I'm looking for. I just want an intuitive nav bar for pics... WHY IS THIS SO HARD!!!! Thanks for your time in advance. Hey folks.. Hope you can help, I'm completely new to this and have no knowledge at all when it comes to javascript. Have been using this script on my site for a while. Is there anyway I can add a URL link to the images that are in my selector? When clicked would go to that page on my website. Thanks in advance of any help Nat <script language="JavaScript"> /* Random image slideshow- By Tyler Clarke (tyler@ihatecoffee.com) For this script and more, visit http://www.javascriptkit.com */ var delay=10000 //set delay in miliseconds var curindex=0 var randomimages=new Array() randomimages[0]="http://www.anywebsite.com/images/splash1.jpg" randomimages[1]="http://www.anywebsite.com/images/splash2.jpg" randomimages[2]="http://www.anywebsite.com/images/splash3.jpg" randomimages[3]="http://www.anywebsite.com/images/splash4.jpg" randomimages[4]="http://www.anywebsite.com/images/splash5.jpg" var preload=new Array() for (n=0;n<randomimages.length;n++) { preload[n]=new Image() preload[n].src=randomimages[n] } document.write('<img name="defaultimage" src="'+randomimages[Math.floor(Math.random()*(randomimages.length))]+'">') function rotateimage() { if (curindex==(tempindex=Math.floor(Math.random()*(randomimages.length)))){ curindex=curindex==0? 1 : curindex-1 } else curindex=tempindex document.images.defaultimage.src=randomimages[curindex] } setInterval("rotateimage()",delay) </script> OK, I appologise in advance if this post is long, but I need this answer, as I'm at my wits end. So I have this code Code: function SizeSelect(){
if(document.getElementById("JarSize").value=="Small")
document.getElementById("JarPrice").innerHTML="3.00"
else if(document.getElementById("JarSize").value=="Medium")
document.getElementById("JarPrice").innerHTML="5.00"
else if(document.getElementById("JarSize").value=="Large")
document.getElementById("JarPrice").innerHTML="7.00"
}
Which alters the value of JarPrice, based on which JarSize is selected. Which is the code below here. Code: <select id="JarSize" onchange="SizeSelect();"> <option value="Small" >Small</option> <option value="Medium">Medium</option> <option value="Large">Large</option> </select> <span class="price">$<span id="JarPrice">3.00</span></span></div> Now for the hard part. I need this piece of code Code: <a href="javascript:;" onclick="simpleCart.add('name=Mango and Papaya', 'price=5', 'quantity=1');" class="prod_buy">add to cart</a>
to be flexible, so that what ever value JarPrice becomes, that 'price=5' becomes the same. Now, the first piece of code is in a seperate .js file to the other two parts, which sit inside a regular HTML page. As I said, I'm desperate, as this is the only part of my site that isn't working ATM And if you need more information about any part, please don't hesitate to ask, as I will be able to give as much info as I can. Hi all, I have a div element (i.e. <div id="main">) that contains a number of links, each with white background colors and its top and left style properties set to different values. I need to do several things with the anchors when they are clicked: When a white anchor is clicked, its background color is turned yellow and its coordinates (top and left style property values) are added to an array. The coordinates for a single anchor is to be separated by a hyphen; coordinates for multiple anchors are to be separated by a comma (eg. "0-9,0-18") When a yellow anchor is clicked, its background color is turned white and its coordinates are removed from the array. The values in the array are to be the value for a hidden input element, all separated by commas. I'm a Javascript novice and don't know where to begin. Can someone help me with this? Thanks in advance, Dude-Dastic Hello all.. I am new to the programming world and I need some help please. Working on a website for work and needing some Java assistance. I am working on this website. (Very simple) http://opc.deq.state.ms.us/aqi/aqi-msgulfcoastozone.htm and I am trying to set up coding to where the dates are updated daily. The only problem is, that I do not want the dates to update at Midnight Central time. Instead... I want the dates to update at 4pm Central Time (Since that is when I update my forecast) I am the states meteorologist... My 1st inclination is to manipulate the code to where the date would change 4pm Central time which would be midnight (+8 hours) Europe/Helsinki time. I am just unsure on how to manipulate the code to do so.. my current coding is. script type="text/javascript"> <!-- var currentTime = new Date() var month = currentTime.getMonth() + 1 var day = currentTime.getDate() + 1 var year = currentTime.getFullYear() currentTime.setDate(currentTime.getDate()+0); document.write(month + "/" + day + "/" + year) //--> </script> Any assistance would be greatly appreciated.. I wish I was more familiar w/ coding ... Wish I would have taken coding classes in college. Again much appreciated for reading/taking time to help me out. Hi sir, I want to try use a javascript to display a code in this format....say May,wednesday 4, 2011 I have this code but it does not give me what i like Code: Code: <script type="text/javascript">
var currentTime=new Date()
var day=currentTime.getDate()
var month=currentTime.getMonth()+1
var year=currentTime.getFullYear()
document.write("It is now "+day+"/"+month+"/"+year)
</script>
Please help me on a code like May,wednesday 4, 2011 Any help will be highly appreciated. Thanks Clement. Im trying to make a code to work out how i am using the new Date commands Code: var Year = prompt('Enter the year you were born','19XX');
var Month = prompt('Enter the month you were born','January');
var Day = prompt('Enter the day you were born','1');
var birthDay = new Date(' ' +Month+ +Day+', '+Year); // birthDay
var currentTime = new Date();
currentYear = (currentTime.getFullYear());
currentYear = (currentYear - Year);
alert(currentYear);
This is as far as i can get i want to get in to an excate age but i dont know where to start can someone give me a hand is there a way to compare the two dates birthDay and currentTime? Thanks Hello. I just want to check whether it is possible (and if so whether there is one available) to have a script that displays MY current time and date to visitors to my website. My time is Western European Time or Greenwich Mean Time. I would like visitors from eg Japan to see my local time and not their own. I think some date scripts I have seen use the user's local PC clock, but I am not sure? Thanks for any feedback and help! Hi, Please i have this code here which is not working to my expectation.Even though the code shows up the date alright but i want to add when it is morning should be AM whiles in evening PM. I have tried several ways to get it but i'm not.please help me to add a code to show PM when the time is (h>11) and AM when (h<11) .Here is what i did Code: <script type="text/javascript">
function runTime(){
var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
if(m<10){
m="0"+m;
}
document.getElementById("text").innerHTML=h+":"+m+":"+s;
t=setTimeout('runTime()',500);
}
if(h>11)
{
document.write("PM");
}
else{
document.write("AM");
}
</script>
<body onload="runTime()">
<div id="text"></div>
</body>
Thank you. Clement Osei. Problem with the Date when one date variable rolls back to a previous month. Everything is explained he http://kcmaindomain.com/fix-js.html View Page Source of that page to see the java script code. I would greatly appreciate the help as I am fairly amateur coder and I have no idea how to correct this myself. I have a series of hand-made arrays each of which has many elements, eg Code: var BlobI = new Array("id1","id2","id4",..."id32");
var Blob2 = new Array("id1","id3","id5",.."id31");
and I have a script (with much help, some time back) which makes the elements change style, with the changes happening successively, element by element: Code: function noBlob (arrayA,visibility,current) {
var arrayB=(typeof arrayA == 'string')? arrayA.split(',') : arrayA;
var blob = document.getElementById(arrayB[current]);
blob.style.visibility = visibility;
if (current != arrayB.length - 1) {
current++;
setTimeout(function() {noBlob(arrayB, visibility, current)},100) }}
If I could get rid of all the ids (400+), both in the html and in the arrays, the whole thing would be much lighter. In theory, because of the way the elements in the arrays are arranged, I could use different iterations of the nth-child() selector to round up the elements of each array. What I'm not clear about is this: there are several stand-alone selector engines, eg, Sly and Yass. They look as if they need to be used in conjunction with some more extensive js library, but I just want to combine the arrays the engine would return with my existing script. Is this possible? eg, if using YASS (http://yass.webo.in/), something like: Code: var newBlob1 = _('div.BLOBS':nth-child(1))
var newBlob2 = _('div.BLOBS':nth-child(2))
Has any one experience with either engine? Can anyone tell me what I have done wrong here? I have the following html code Code: <div id='group1'>
<tr class='time'>
<td colspan='3' name='1262815200'></td>
</tr>
<tr>
<td class='timeleft group1' name='1262815200' colspan='3'></td>
</tr>
<tr class='game'>
<td><input type='radio' name='G1' value='NYJ'>NYJ</td>
<td><input type='radio' name='G1' value='BUF'>BUF</td>
<td><select name='G1P' class='points' tabindex = '1'></select></td>
</tr>
</div>
and when I use the selector $('#group1 input) it does not select anything (namely the inputs in this code). But when I use the selector $('div input') it will select them (and more on the page which I don't want). Is anyone able to see what I have done wrong? I've tried everything I can think of in terms of testing, and I have narrowed it down to the selector. Thanks. I have been using some javascript to select stylesheets (dependent upon window sizes) without problems, until IE8. I have stripped the code down to the following which seems to be where it fails in IE8. Code: <link rel="stylesheet" type="text/css" href="../../css-home.css" title="default" /> <link rel="stylesheet" type="text/css" href="../../css-thin.css" title="thin" /> <link rel="stylesheet" type="text/css" href="../../css-medium.css" title="medium" /> <link rel="stylesheet" type="text/css" href="../../css-large.css" title="large" /> <link rel="stylesheet" type="text/css" href="../../css-home.css" title="normal" /> Code: <script type="text/javascript">
<!--
function changeStylesheet(description){
var i, a;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++){
if(a.getAttribute("title") == description){a.disabled = false;} // if the title of the css file is the same as the description, don't disable it
else if(a.getAttribute("title") != "default"){a.disabled = true;} // otherwise if the title of the css file is not default, disable it
}
}
function selectLarge(){
changeStylesheet("large");
}
selectLarge();
// -->
</script>
The “normal” stylesheet is the same as “default”. Without this older versions of IE go straight to “large” (without javascript). For these settings, all browsers display the default (or normal?) stylesheet without the script. When the script is run Firefox, Opera and older versions of IE will use the “default” stylesheet combined with the “large” stylesheet. IE8 uses only the “default” and ignores “large”. It doesn’t appear to matter where in the page the script is run. Any suggestions appreciated (it has never worked in Safari, Chrome and older versions of Opera if that helps!). I have been using the following html & have tested it cross-browser with no malfunction Code: <a href="#quicklinks" name="modal">Quick Links</a> <a href="#Login" name="modal">Login</a> js part Code: //select all the a tag with name equal to modal
$('a[name=modal]').click(function(e) {
//Cancel the link behavior
e.preventDefault();
//Get the A tag
var id = $(this).attr('href');
//using href as id (already defined in CSS)
$(id).fadeIn(2000);
Now a senior guy says that what I am doing with selectors is essentially illegal, I quote him Quote: Another potential problem is your use of the name attribute. When used with "A" tags, the name attribute is equivalent to the ID attribute, meaning that each name on a page should be unique. It's possible that the javascript engine is only setting the onclick() on the first element with the "modal" name. Plz guide me I would appreciate some help, I want to use the Drop Down Image selector II script on a website, to display fabric, as there is a large number of samples, I want to break the list up alaphabetically. Is is possible to use the script more than once on a page, when I tried to do this the script did not work, if it can not be used more than once on a page, has anyone seen a program that could be. Thanks I'm currently setting up a website that will display, for each link in the drop down, an image below the box, and text or, if necessary, an image to the right, describing the item & listing materials & prices. I've tried iframes with a drop down, but because I'm hosted with BraveHost, I end up with 50 ads on the main page, and 50 more in the iframe, so I'd like to avoid that if possible. If you want to see what I'm looking for, go here. http://andicrafts78.bravehost.com/test.html. How can I modify the drop down selector to make it happen?
its me again! and yeah i need some insight from you guys. i cant seem to get this code to work and i know my flaw is in my "bloat();" function. help me out? Code: <?xml version = "1.0" encoding = "utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Test 4</title>
<script type = "text/javascript">
function preload(){
images = new Array();
images[0] = new Image();
images[0].src = "image1.png";
images[1] = new Image();
images[1].src = "image2.gif";
images[2] = new Image();
images[2].src = "image3.png";
images[3] = new Image();
images[3].src = "image4.jpg";
images[4] = new Image();
images[4].src = "image5.gif";
}
function bloat(){
if(document.getElementById("image1").onMouseOver === true){
document.getElementById("main").src = "image1.png";}
else if(document.getElementById("image2").onMouseOver === true){
document.getElementById("main").src = "image2.gif";}
else if(document.getElementById("image3").onMouseOver === true){
document.getElementById("main").src = "image3.png";}
else if(document.getElementById("image4").onMouseOver === true){
document.getElementById("main").src = "image4.jpg";}
else(document.getElementById("image5").onMouseOver === true){
document.getElementById("main").src = "image5.gif";}
}
</script>
</head>
<body onLoad = "preload();" bgcolor = "orange"><center>
<img src = "bloat();" alt = "main" id = "main" height = "400" width = "450"><br /><br />
<a href = "http://www.joystiq.com">
<img src = "image1.png" alt = "image1" id = "image1" onMouseOver = "bloat();" height = "200" width = "225"></a>
<a href = "http://www.engadget.com">
<img src = "image2.gif" alt = "image2" id = "image2" onMouseOver = "bloat();" height = "200" width = "225"></a>
<a href = "http://www.amazon.com">
<img src = "image3.png" alt = "image3" id = "image3" onMouseOver = "bloat();" height = "200" width = "225"></a>
<a href = "http://www.newegg.com">
<img src = "image4.jpg" alt = "image4" id = "image4" onMouseOver = "bloat();" height = "200" width = "225"></a>
<a href = "http://www.smc.edu">
<img src = "image5.gif" alt = "image5" id = "image5" onMouseOver = "bloat();" height = "200" width = "225"></a>
</center></body>
</html>
so essentially the way this should look is a list of five images tiled length wise. when you onMouseOver one it becomes a bigger image right above them. when you click the "thumbnails" as i'll call it, you get linked to a web page. i got everything formatted right however i think there is an error with my function. any insight fellas? thanks! is it possible to reposition the ibeam cursor in a textarea. im using a button to insert stuff into a text area and then focus but i would like the selector to appear at a certain point. Thanks, Steve, Overview Well it's been a while since I've been here! Another set of eyes on this would really help me out. I have a simple slider plugin that I wrote in jQuery. One of the parameters that I've written is which element you want to be the container for each slide. In the example I'm going to post, I'm using a list item (li). The Problem Due to lazy coding or whatever, I really made a blunder of things inside my plugin. Throughout the plugin, I'm calling that parameter directly. Because of this, the script context is being applied to EVERY element on the page. So...when I pass in the tag jQuery selector: $('li') as the element selector, it works...but it applies the slider effects to every <li> on the page, not just the container I assign to the plugin. Every time I change $('li') to anything more specific at all (a class, an id, better selector) or I rewrite the plugin to use something more specific (hard-coded), the browser usually crashes due to an unresponsive script. I'm seeing this in Chrome & Firefox. I'm guessing this some kind of weird closure-memory leakage issue that I'm just not ready to handle, or something about the way jQuery and event delegation/binding works. The frustrating thing is that if I do a console.log of the element parameter, and I use something more specific....it returns just fine! The script blows up the page though.... The Code Code: <html>
<head>
<script>
(function($) {
$.fn.extend({
luSlider: function(options) {
var o = $(this);
var defaults = {
element : $(this),
direction: 'left',
next: null,
prev: null,
distance: null,
speed: 'slow',
prevAtEnd : null,
nextAtEnd : null,
prevNextEvent: null,
pagination: false,
elementClick : false,
pager : $(this),
callback: null
};
var options = $.extend(defaults, options);
o.data('curPosition','');
// set cursor for next & previous buttons
if (options.prev != null) options.prev.css('cursor','pointer');
if (options.next != null) options.next.css('cursor','pointer');
// Wrap all of our items in a super large div with hidden overflow
o.find('ul').first().wrap("<div style='width:999999px;' id='luSliderWrapper'></div>");
o.css('overflow','hidden');
// If no distance specified, do it based on the width of a single element
var totalWidth = 0;
var el = options.element;
// Get the total width of all our items
el.parent('ul').css({'padding':'0px','margin':'0px'});
el.each(function() {
totalWidth += $(this).outerWidth(true);
//float our items to the left
el.css({'display':'block','position':'relative','float':'left'});
});
// Get individual item width
var itemWidth = totalWidth / el.size();
//var itemWidth = el.outerWidth(true);
// Get the number of visible items based on our container size
var spaceUsed = $(this).innerWidth() / itemWidth;
var numVisibleItems = Math.floor( spaceUsed );
/*
if (spaceUsed % 1 > 0 ) {
$(this).css({'padding-left':itemWidth/2,'padding-right':itemWidth/2});
}*/
// a variable to store the number of items
var numItems = el.size();
if (options.distance == null) options.distance = itemWidth;
/* Initialize the location */
if ( $(this).data('curPosition') == undefined ) {
$(this).data('curPosition',0);
}
// get the total number of pages
var numPages = Math.ceil(numItems / numVisibleItems);
togglePrevNext();
buildPager();
return this.each(function() {
if (options.elementClick) {
//el.click(function() {
// document.location = $(this).find('a').attr('href');
// });
}
// var cb = options.prevNextEvent;
// Animate Next
options.next.click(function() {
togglePrevNext();
var theEnd = endOfShow();
var howFar = options.distance;
if (!(theEnd)) {
o.data('curPosition', Math.round( (o.data('curPosition')) + 1) );
if (options.pagination) {
howFar *= numVisibleItems;
}
distance = "-=" + howFar;
el.stop(true,true).animate({
"left" : distance
},options.speed);
} else {
// end of show
}
togglePrevNext();
movePager();
handleCallBack();
});
// Animate Previous
options.prev.click(function() {
togglePrevNext();
//var theEnd = endOfShow('prev');
var theEnd = startOfShow();
var howFar = options.distance;
if (!(theEnd)) {
o.data('curPosition', (o.data('curPosition') - 1) );
if (options.pagination) {
howFar *= numVisibleItems;
}
distance = "+=" + howFar;
el.stop(true,true).animate({
"left" : distance
},options.speed);
} else {
// end of show
}
togglePrevNext();
movePager();
handleCallBack();
}); // end prev.click
$('#luSliderPager li').click(function() {
var curPage = $('li.activePage').index();
var newPage = $(this).index();
var direction = (curPage > newPage) ? "+=" : "-=";
var distance = Math.abs(curPage - newPage) * options.distance;
if (options.pagination) {
distance *= numVisibleItems;
}
var newLeft = direction + distance;
// set position
o.data('curPosition', newPage);
movePager();
// animate
el.stop(true,true).animate({
"left" : newLeft
},options.speed);
});
}); // end return
function togglePrevNext() {
(startOfShow() ) ? options.prev.addClass(options.prevAtEnd) : options.prev.removeClass(options.prevAtEnd);
(endOfShow() ) ? options.next.addClass(options.nextAtEnd) : options.next.removeClass(options.nextAtEnd);
}
function handleCallBack() {
if (typeof options.callback == "function") options.callback(o,options);
}
// Determine our boundaries...and if we've reached them
function startOfShow() {
return(o.data('curPosition') <=0 ) ? true : false;
}
function endOfShow() {
if (options.pagination) {
return (o.data('curPosition') >= numPages-1) ? true : false;
} else {
return (o.data('curPosition') >= (numItems - numVisibleItems) ) ? true : false;
}
}
function movePager() {
$('.activePage').removeClass('activePage');
$('.pager').eq(o.data('curPosition')).addClass('activePage');
}
function buildPager() {
/* Custom CSS rule for pager default */
var style = "<style type='text/css'> #luSliderPager li { float: left; display:block; width:13px; height:16px; padding: 0 5px; }";
style += ".pager { background:url('luSlider/images/pager_button-sprite.png') left top no-repeat; cursor:pointer; }.activePage { background-position:left -15px; }</style>";
$(style).appendTo("head");
var numItemsPerPage = o.width() / itemWidth;
var pager = "<ul id='luSliderPager'>";
for (var x = 0; x < numPages; x++ ) {
if (o.data('curPosition') == x) {
pager += "<li class='pager activePage'></li>";
}else {
pager += "<li class='pager'></li>";}
}
pager += "</ul>";
$(pager).appendTo(options.pager);
}
function showPager() {
}
}
});
})(jQuery);
</script>
<script>
$(function() {
/* * * * * * * * Slider Code * * * * * * * */
var myCB = function(o, options) {
// my callback function executed after every transition
//console.log(o.numVisibleItems);
}
$('#sliderContainer').luSlider({
element : $('li'),
next : $('#slide_terms_right'),
prev : $('#slide_terms_left'),
speed : 1000,
prevAtEnd : "slide_terms_prev_disabled",
nextAtEnd : "slide_terms_next_disabled",
elementClick : true,
pagination : true,
pager : "#pager",
callback : myCB
});
)};
</script>
</head>
<body>
<div id="sliderContainer">
<ul id="mySlides">
<li class="slide"></li>
<li class="slide"></li>
<li class="slide"></li>
</ul>
</div>
</body>
</html>
notes the line var el = options.element; is where I start to have issues. The example I mentioned of hard-coding & console.log that works is this: Code: ...
var el = options.element;
console.log(el); //displays what I'd expect, a jQuery object
el = o.find('li'); // only find li's that are children of the div attached to the plugin
console.log(el); //displays exactly what I'd expect, a jQuery object of JUST the right li's
// if I change el to be this new selector tho...the browser page will crash. 'Unresponsive Script' etc.
...
Please ignore anything hard-coded into the plugin, I tossed several things in for brevity. Also if you have any other code cleanup tips, I'm more than receptive. Also for this example I removed all of the crazy ajax and php and other template-y type stuff. I noticed the problem when I embedded the slider on my page and my top navigation menu (which uses a <ul>) started scrolling off the screen when I clicked on my slider arrows :P THANK YOU SO MUCH, -Celt |
|||||||