JavaScript - Javascript Code Getdate Issue
Okay,
I've posted the code with just the two fields needed to solve my problem. If I type in a date of 04/16/2011 in the "sentence date" field, then click the calculate button, the date 03/05/2011 is displayed in the "Due to Reviewer" field. It subtracts 42 days from the date enetred into the "Sentence Date" field. My problem is, sometimes when I type in a date in the "Sentence Date", such as 04/16/2011, 42 days prior falls on a weekend & I need it to always be on a weekday. So with that said, is it possible to put some type on function in the code where if the date falls on a weekend (Saturday or Sunday), it will roll back & display Friday's date? Thanks again for the help! <html> <head> <script type="text/javascript"> var valid; function d2(v) { return (v<10)?("0"+v):v; } function dcheck(form) { var s = form.sent_date.value; var sent = new Date(s); var dr = form.due_rev.value var due_rev = new Date(dr); if (isNaN(due_rev)) { due_rev = new Date(sent.getFullYear(),sent.getMonth(),sent.getDate()-42); } form.sent_date.value = (sent.getFullYear()+0) + "-" + d2(sent.getMonth()+1) + "-" + d2(sent.getDate()); form.due_rev.value = (due_rev.getFullYear()+0) + "-" + d2(due_rev.getMonth()+1) + "-" + d2(due_rev.getDate()); return true; } </script> </head> <body> <form method="post" action="add.php"> </select> </br> <b>Sentence Date: MM/DD/YYYY</b> <br /> <input type="text" name="sent_date" size="30" /><br /> <p><input type="button" value="Calculate" onclick="return dcheck(this.form);"> </p> <b>Due to Reviewer:</b> <br /> <input type="text" name="due_rev" size="30" /><br /> <br> </form> </body> </html> Similar TutorialsHi, I'm trying to edit a script that allows multiple drop downs, and simply adds a table depending on the answers (ready for form submittion) this works 100% in firefox, but falls over in IE.... this is the code Code: <script type="text/javascript"> function f (sel) { var d = document, dv; if (d.getElementById) { for (var ii=0; ii < sel.options.length; ii++) { dv = d.getElementById(sel.options[ii].value); if(dv) dv.style.display = sel.options[ii].selected? "block": "none"; } } } function convf (sl) { if (sl.selectedIndex==1) { var disp = document.getElementById('yesc'); disp.style.display='block'; } else { var disp = document.getElementById('yesc'); disp.style.display='none'; } } </script> <!--[if IE]> <script type="text/javascript"> function f(sel){ var d=document, dv; if(d.getElementById){ for(var ii=0; ii<sel.options.length; ii++){ dv=d.getElementById(sel.options[ii].text); if(dv) dv.style.display=sel.options[ii].selected?"block":"none"; } } } </script> <![endif]--> <script type="text/javascript"> function showhide() { var radi = document.getElementById('radio1'); var row1 = document.getElementById('one'); var row2 = document.getElementById('two'); if (radi.checked == true) { row1.style.display = ''; row2.style.display = 'none'; } else { row1.style.display = 'none'; row2.style.display = ''; } } </script> any ideas why this wont work? http://www.engtechjobs.co.uk/candreg.php Hi guys, I have a little experience in Javascript and would like to learn a bit more etc. I am currently working for a company which wants me create / find a image scroller using javascript and jquery. I found one which seems very suitable... I have customized the CSS and have coded it all up... The problem i'm having is that the image scroller is scrolling 3 images at a time. I would like it to scroller one at a time whilst showing all the images... Example scroller: [ pic 1] [pic 2] [pic 3] [pic 4] after scroll [pic 2] [pic 3] [pic 4] [pic 1] after next scroll [pic 3] [pic 4] [pic 1] [pic 2] and so forth. If you look at this code you will see what I mean... please help me learn and please help me complete this... im sure its just a little adjustment... but me not being too great at javascript... it makes me feel like im shooting in the dark. Thanks alot Code: <style type="text/css" media="screen"> <!-- body { font: 1em "Trebuchet MS", verdana, arial, sans-serif; font-size: 100%; } input, textarea { font-family: Arial; font-size: 125%; padding: 7px; } label { display: block; } #textbanner {width:168px; height:118px; float:left;} .infiniteCarousel { width: 618px; position: relative; } .infiniteCarousel .wrapper { width: 618px; /* .infiniteCarousel width - (.wrapper margin-left + .wrapper margin-right) */ height: 115px; margin: 0 0px; position: relative; top: 0; border: 1px solid #E1E1E1; } .infiniteCarousel ul a img { border: 0px solid #666; -moz-border-radius: 5px; -webkit-border-radius: 5px; } .infiniteCarousel .wrapper ul { width: 625px; /* single item * n */ list-style-image:none; list-style-type:none; margin:0; padding:0px 0px 0px 4px; position: absolute; top: 0px; left: 0px; } .infiniteCarousel ul li { display:block; float:left; padding: 0px 0px 0px 0px; height: 85px; width: 206px; } .infiniteCarousel ul li img { -webkit-transition: border-color 20ms; } .infiniteCarousel ul:hover li img { border-color: #666; } .infiniteCarousel ul:hover li:hover img { border-color: #000; } .infiniteCarousel ul li a img { display:block; } .infiniteCarousel .forward { background-position: 0 0; right: 0; } .infiniteCarousel .back { background-position: 0 -72px; left: 0; } .infiniteCarousel .forward:hover { background-position: 0 -36px; } .infiniteCarousel .back:hover { background-position: 0 -108px; } --> </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script> <script type="text/javascript" charset="utf-8"> (function () { $.fn.infiniteCarousel = function () { function repeat(str, n) { return new Array( n + 1 ).join(str); } return this.each(function () { // magic! var $wrapper = $('> div', this).css('overflow', 'hidden'), $slider = $wrapper.find('> ul').width(9999), $items = $slider.find('> li'), $single = $items.filter(':first') singleWidth = $single.outerWidth(), visible = Math.ceil($wrapper.innerWidth() / singleWidth), currentPage = 1, pages = Math.ceil($items.length / visible); /* TASKS */ // 1. pad the pages with empty element if required if ($items.length % visible != 0) { // pad $slider.append(repeat('<li class="empty" />', visible - ($items.length % visible))); $items = $slider.find('> li'); } // 2. create the carousel padding on left and right (cloned) $items.filter(':first').before($items.slice(-visible).clone().addClass('cloned')); $items.filter(':last').after($items.slice(0, visible).clone().addClass('cloned')); $items = $slider.find('> li'); // 3. reset scroll $wrapper.scrollLeft(singleWidth * visible); // 4. paging function function gotoPage(page) { var dir = page < currentPage ? -1 : 1, n = Math.abs(currentPage - page), left = singleWidth * dir * visible * n; $wrapper.filter(':not(:animated)').animate({ scrollLeft : '+=' + left }, 1000, function () { // if page == last page - then reset position if (page > pages) { $wrapper.scrollLeft(singleWidth * visible); page = 1; } else if (page == 0) { page = pages; $wrapper.scrollLeft(singleWidth * visible * pages); } currentPage = page; }); } // 6. bind the back and forward links $('a.back', this).click(function () { gotoPage(currentPage - 1); return false; }); $('a.forward', this).click(function () { gotoPage(currentPage + 1); return false; }); $(this).bind('goto', function (event, page) { gotoPage(page); }); // THIS IS NEW CODE FOR THE AUTOMATIC INFINITE CAROUSEL $(this).bind('next', function () { gotoPage(currentPage + 1); }); }); }; })(jQuery); $(document).ready(function () { // THIS IS NEW CODE FOR THE AUTOMATIC INFINITE CAROUSEL var autoscrolling = true; $('.infiniteCarousel').infiniteCarousel().mouseover(function () { autoscrolling = false; }).mouseout(function () { autoscrolling = true; }); setInterval(function () { if (autoscrolling) { $('.infiniteCarousel').trigger('next'); } }, 500); }); </script> </head> <body> <div id="textbanner"><img src="http://i46.tinypic.com/2r423yc.jpg" alt="" width="168" height="117" /></div> <div class="infiniteCarousel"> <div class="wrapper"> <ul> <li><a href="www.google.com"><img src="http://i49.tinypic.com/eu4x81.jpg" alt="" width="202" height="116" /></a></li> <li><img src="http://i49.tinypic.com/2ex8ttw.jpg" alt="" width="202" height="116" /></li> <li><img src="http://i45.tinypic.com/2gy0pkz.jpg" alt="" width="202" height="116" /></li> </ul> </div> </div> </body> </html> I'm trying to get the day of the week to show up as a number on the page. The problem is, no matter what I try, it's coming back as 4. I made this alert to test the code. This alert works UNLESS anything else is ordered before +monthBirth. If the order is changed it adds it together which I guess is because of the plus. Code: alert(+monthBirth +dateBirth +yearBirth) What I want is the day of the week to show up as a number on the page. I think the reason I keep getting 4 is due to something with the addition problem I have? But I really have no idea at all. Can anyone please help? Code: <html> <head> <script> MONTHS_OF_THE_YEAR = 'janfebmaraprmayjunjulaugsepoctnovdec'; MILLISECONDS_DAY = 1000*60*60*24; MILLISECONDS_YEAR = 1000*60*60*24*365.2424; LIFE_EXPECTANCY = 1000*60*60*24*365.2424*67.2; var daysArray = new Array ('Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'); var yearBirth = ''; yearBirth = prompt('Please enter your year of birth'); var monthBirth = ''; monthBirth = prompt('Please enter your month of birth'); monthBirth = monthBirth.slice(0,3); monthBirth = monthBirth.toLowerCase(); monthBirth = MONTHS_OF_THE_YEAR.indexOf(''+monthBirth)/3; var dateBirth = ''; dateBirth = prompt('Please enter your date of birth'); alert(+monthBirth +dateBirth +yearBirth) var dd=new Date(+monthBirth); dd=dd.getDay(); document.write(dd); </script> </head> <body> </body> <html> I'm trying to make it so that on holidays, my page will say Happy"so and so..." at the top. I only started this 5 minutes ago so that's why it's so under developed. Here's what I have. I'm wanting to know if "today.getMonth.getDate" is valid or would I have to do something else. function startTime() { var today=new Date(); var hol=today.getMonth.getDate() if (hol==4+1) p.s I only want the holiday. I already have a clock but I want them to be separate. For some reason I can not get this code to dump the information I type in into the mysql database...I'm sure I've missed something but can't seem to figure it out on my own. The mysql username & password are correct on my end & the fields match the mysql table column names. Do I have the code to connect & insert the fields into the mysql database in the correct place?? <?php # Page: add.php ########################## # Report all errors ########################## ini_set('display_errors',1); error_reporting(E_ALL); if( isset($_POST) && !empty($_POST) ) { # db connection settings ########################## # server IP $host = "localhost"; # sql user $user = "user"; # sql pw $pw = "mypassword"; # sql database $db = "psrflow"; # connect to db server ########################## $conn = mysql_connect( $host, $user, $pw ) or die( "Error! Unable to connect to database server: <br/>" . mysql_error() ); # connect to db ########################## $rs = mysql_select_db( $db, $conn ) or die( "Error! Unable to connect to database: <br/>" . mysql_error() ); # get submitted values & escape the text string foreach($_POST as $key=>$value) { ${$key}=mysql_real_escape_string($value); } $strSQL = "INSERT INTO psrinfo ( offender_fname, offender_lname, location, docket, officer, status, sent_date, assgn_date, interv_date, due_rev, due_suspo, due_clerk, due_attny, due_judge ) VALUES ( '" . $offender_fname . "', '" . $offender_lname . "', '" . $location . "', '" .$docket . "', '" .$officer ."', '" .$status ."', '".$sent_date ."', '".$assgn_date ."', '".$interv_date ."', '".$due_rev ."', '".$due_suspo ."', '".$due_clerk ."', '".$due_attny ."', '".$due_judge ."')"; # execute db insert ########################## if (!mysql_query( $strSQL, $conn )){ echo( "Unable to save data to database: <br/>" . mysql_error() . "<br/>" . $strSQL . "</span><br/>" ); } else{ header( "Location: index.html" ); exit; } } ?> <html> <head> <title>My Title</title> <script type="text/javascript"> var valid; function dcheck(form) { var a = form.assgn_date.value; var s = form.sent_date.value; var i = form.interv_date.value; var dr = form.due_rev.value var su = form.due_suspo var clk = form.due_clerk var att = form.due_attny var jdg = form.due_judge var assn = new Date(a); var sent = new Date(s); var intv = new Date(i); var due_rev = new Date(dr); var due_suspo = new Date(su); var due_clerk = new Date(clk); var due_attny = new Date(att); var due_judge = new Date(jdg); if (isNaN(assn)) { assn = new Date(sent.getFullYear(),sent.getMonth(),sent.getDate()+7); } if (isNaN(sent)) { sent = new Date(assn.getFullYear(),assn.getMonth(),assn.getDate()-7); } if (isNaN(intv)) { intv = new Date(sent.getFullYear(),sent.getMonth(),sent.getDate()+14); } if (isNaN(due_rev)) { due_rev = new Date(sent.getFullYear(),sent.getMonth(),sent.getDate()+15); } if (isNaN(due_suspo)) { due_suspo = new Date(sent.getFullYear(),sent.getMonth(),sent.getDate()+16); } if (isNaN(due_clerk)) { due_clerk = new Date(sent.getFullYear(),sent.getMonth(),sent.getDate()+17); } if (isNaN(due_attny)) { due_attny = new Date(sent.getFullYear(),sent.getMonth(),sent.getDate()+18); } if (isNaN(due_judge)) { due_judge = new Date(sent.getFullYear(),sent.getMonth(),sent.getDate()+19); } form.assgn_date.value = (assn.getMonth()+1) + "/" + assn.getDate() + "/" + assn.getFullYear(); form.sent_date.value = (sent.getMonth()+1) + "/" + sent.getDate() + "/" + sent.getFullYear(); form.interv_date.value = (intv.getMonth()+1) + "/" + intv.getDate() + "/" + intv.getFullYear(); form.due_rev.value = (due_rev.getMonth()+1) + "/" + due_rev.getDate() + "/" + due_rev.getFullYear(); form.due_suspo.value = (due_suspo.getMonth()+1) + "/" + due_suspo.getDate() + "/" + due_suspo.getFullYear(); form.due_clerk.value = (due_clerk.getMonth()+1) + "/" + due_clerk.getDate() + "/" + due_clerk.getFullYear(); form.due_attny.value = (due_attny.getMonth()+1) + "/" + due_attny.getDate() + "/" + due_attny.getFullYear(); form.due_judge.value = (due_judge.getMonth()+1) + "/" + due_judge.getDate() + "/" + due_judge.getFullYear(); return true; } </script> <style type="text/css"> body {background-color: #ffffff; margin-top: 60px;} </style> </head> <body> <form action="" method="get" onsubmit="return dcheck(this);"> <b>Docket No:</b> <br /> <input type="text" name="docket" size="30" /><br /> <b>First Name:</b> <br /> <input type="text" name="offender_fname" size="30" /><br /> <b>Last Name:</b> <br /> <input type="text" name="offender_lname" size="30" /><br /> <b>Status:</b> <br /> <input type="text" name="status" size="30" /><br /> <b>Location:</b> <br /> <input type="text" name="location" size="30" /><br /> <b>Officer:</b> <br /> <input type="text" name="officer" size="30" /><br /> <b>Sentence Date MM/DD/YYYY:</b /> <br /> <input type="text" size = "15" name="sent_date"> <br /> <b>Assign Date:</b>    <br /> <input type="text" size = "15" name="assgn_date"> <br /> <b>Invterview Date:</b>    <br /> <input type="text" size = "15" name="interv_date"> <br /> <b>Due to Reviewer:</b>    </br> <input type="text" size = "15" name="due_rev"> <br /> <b>Due to SUSPO:</b>    </br> <input type="text" size = "15" name="due_suspo"> <br /> <b>Due to Clerk:</b>    </br> <input type="text" size = "15" name="due_clerk"> <br /> <b>Due to Attorney:</b>    </br> <input type="text" size = "15" name="due_attny"> <br /> <b>Due to Judge:</b>    </br> <input type="text" size = "15" name="due_judge"> <br /> <br> <input type="button" value="Calculate" onclick="return dcheck(this.form);"> <input type="button" value="Reset" onclick="this.form.reset()"> <input type="submit" value="Submit" /> </form> </body> </html> Hello! I've been fighting with a jQuery slider all day, and it's going nowhere because admittedly I have extremely limited jQuery knowledge. I am really hoping that someone here is better at this than I am and can tell me why I see a list of the items that should be in the slider stacked up on top of each other rather than seeing the actual slider. Here is the functions.php code. All CSS is in place, but I can copy/paste the stylesheet if necessary as well. If this isn't an appropriate forum for this, can you point me in the right direction? I don't even know which way is up anymore!!! Code: <?php /* HEADER SCRIPTS */ function headscript() { global $post; if (function_exists('is_products_page')){ if ( get_post_type() == 'wpsc-product' || is_products_page() ) return; } ?> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-3270175-9']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { //Default Action $(".tab_content").hide(); //Hide all content $("ul.tabs li:first").addClass("active").show(); //Activate first tab $(".tab_content:first").show(); //Show first tab content //On Click Event $("ul.tabs li").click(function() { $("ul.tabs li").removeClass("active"); //Remove any "active" class $(this).addClass("active"); //Add "active" class to selected tab $(".tab_content").hide(); //Hide all tab content var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content $(activeTab).fadeIn(); //Fade in the active content return false; }); }); </script> <script type="text/javascript" src="http://www.claritymind.com/js/easySlider1.7.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#slider2").easySlider({ auto: true, continuous: true, pause: 6000, speed: 800, nextId: "slider1next", prevId: "slider1prev" }); }); </script> <script type="text/javascript"> $(function () { $('a#testbutton').hover(function() { $(this).fadeTo("fast", 1); }, function() { $(this).fadeTo("fast", .85); }); }); </script> <script type="text/javascript"> $(document).ready(function(){ $("#slider1").easySlider({ numeric: true, auto: true, continuous: true, pause: 9000, speed: 700, }); }); </script> <?php } /* PAGE SPECIFIC CSS TWEAKS */ function home_head() { if (is_home() || is_front_page()) { ?> <style type="text/css"> .custom .headline_area {display:none;} </style> <style type="text/css"> .custom .servnav {display:none;} </style> <?php } } function nonhomepagecss(){ if (!is_home() && !is_front_page()) { ?> <style type="text/css"> .custom #sidebars{margin-top:15px;background:none;} body.custom {background-color:#f5f6f7;} .custom #content_area {background-color: #F5F6F7;} .custom .post_box{padding-top:30px;} .custom #content_box{ margin: 30px auto; width: 960px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; background-color: white; box-shadow: 3px 3px 3px #CCC; -moz-box-shadow: 3px 3px 3px #CCC; -webkit-box-shadow: 3px 3px 3px #CCC; border-top: 1px solid #E8E8E8; border-left: 1px solid #E8E8E8; font-family: 'Lucida Grande', 'Lucida Grande Unicode', Helvetica, Verdana, sans-serif; padding-bottom: 30px; border-top-left-radius: 5px 5px; border-top-right-radius: 5px 5px; border-bottom-right-radius: 5px 5px; border-bottom-left-radius: 5px 5px; } </style> <?php } } function new_servicespage() { if (is_page('services') || is_page('30')) { ?> <style type="text/css"> .custom .topnav {display:none;} .custom .servnav {display:block;} </style> <div id="content"> <div class="post_box"> <div class="headline_area"> </div> Example text will go here. </div> </div> <div id="sidebars"><span class="newcallout1h4"> <table> <tr> <div style="vertical-align:top;"> <td width="275"><img src="http://cm.deviantwebdesign.com/wp-content/uploads/2012/03/VideoPlace.jpg" height="180" width="260"> </div> <td width="330"><div style="margin-left: 30px;"> <font color="#000000" font size="4">HEADLINE TEXT</font> <ul> <font color="#000000" font size="3"> <li>Bullet 1 - Example text goes here.</li> <li>Bullet 2. Ut enim ad minim veniam, quis nostrud exercitation.</li> <li>Bullet 3. Duis aute irure dolor in reprehenderit in voluptate velit esse.</li> </font> </ul> </div></td> <td width="275"><div style="margin-left: 30px;"> <script type="text/javascript" src="//moon-ray.com/v2.4/include/formEditor/genjs.php?html=true&uid=p2c6497f5&version=1"></script> </div></td> </tr> </table> </span> <?php thesis_build_sidebars(); ?> </div> <?php } } add_action('thesis_hook_custom_template', 'new_servicespage'); /* NAVIGATION MENU */ function navmenuarea(){ ?> <div class="topnav"> <div style="width:960px;margin-left:auto;margin-right:auto;"> <div style="float:left;"> <a href="http://claritymind.com/"><img alt="clrity-logo" src="http://www.claritymind.com/wp-content/uploads/2011/03/logosmall2.jpg" style="position:relative;left:0px;" /></a> </div> <div style="float:right;padding-top:11px;"> <ul id="navlist"> <li><a href="http://claritymind.com/services">Services</a></li> <li><a href="http://claritymind.com/next-step">Next Steps</a></li> <li><a href="http://claritymind.com/about">About</a></li> <li><a href="http://claritymind.com/free-articles">Free Stuff</a></li> <li><a href="http://claritymind.com/clients">Clients</a></li> <li><a href="http://claritymind.com/events">Events</a></li> <li><a style="color:#BCFC3D;" href="http://claritymind.com/products">Store</a></li> </ul> </div> </div> </div> <?php } /* FEATURED AREA */ function lowermenu(){ if (is_page()) { ?> <div class="clear"></div> <div style="width:100%;height:5px;"></div> <div class="pagecentered"> <div class="newcallout1"> </div> </div> <div style="width:100%;height:15px;"></div> <?php } } /* REGISTER SIDEBARS FOR CUSTOM SIDEBARS */ if (function_exists('register_sidebar')) { $sidebars = array(1,2, 3, 4, 5, 6, 7, 8, 9, 10); foreach($sidebars as $number) { register_sidebar(array( 'name' => 'Side ' . $number, 'id' => 'side-' . $number, 'before_widget' => '', 'after_widget' => '', 'before_title' => '<h3>', 'after_title' => '</h3>' )); } } function sidebartabs(){ if (function_exists('is_products_page')){ if ( get_post_type() == 'wpsc-product' || is_products_page() ) return; } ?> <div style="width:100%;height:25px;"></div> <div class="tabcontainer"> <ul class="tabs"> <li><a href="#tab1">Popular</a></li> <li><a href="#tab2">Latest</a></li> <li><a href="#tab3">Topics</a></li> <li><a href="#tab4">Links</a></li> </ul> <div class="tab_container"> <div id="tab1" class="tab_content" style="padding-right:0px;"> <a href="http://www.claritymind.com/next-step/" style="border:0;padding:0;margin:0;"><img src="http://www.claritymind.com/wp-content/uploads/2012/01/Master-Your-Mindset.png" alt="Change Your Mindset with Clarity Mind Coaching" style="border:0;padding:0;margin:0;" /></a> <div class="clear"></div> </div> <div id="tab2" class="tab_content"> <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Side 6') ) : ?> <?php endif; ?> </div> <div id="tab3" class="tab_content"> <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Side 7') ) : ?> <?php endif; ?> <div class="clear"></div> </div> <div id="tab4" class="tab_content"> <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Side 8') ) : ?> <?php endif; ?> </div> </div> </div> <div class="clear"></div> <?php } add_action('thesis_hook_before_sidebars', 'sidebartabs'); function home_pagecustom() { if (is_home() || is_page(4217)) { ?> <div style="height:0px;width:0px;position:relative;left:294px;z-index:999;"> <div style="width:356px;height:1px;background:#efefef;"></div> <div style="width:356px;padding-top:2px;"><span class="nqheading">Featured from the Blog</span></div> </div> <div id="slider1"> <ul> <?php query_posts($query_string . '&cat=-3,-8&posts_per_page=5'); ?> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <li> <div class="post"> <div style="width:279px;margin-right:15px;float:left;"> <?php $post_image = thesis_post_image_info('image'); echo $post_image['output']; ?> </div> <div style="width:356px;float:right;padding-top:20px;"> <div style=height:300px;overflow:hidden;"> <!-- Display the Title as a link to the Post's permalink. --> <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2> <div class="entry"> <?php the_excerpt(); ?> </div> </div> <div style="width:356px;height:2px;"></div> <span class="readstory"><a href="<?php the_permalink() ?>" rel="bookmark" title="Continue Reading <?php the_title_attribute(); ?>">Continue Reading Post →</a> </div> <div class="clear"></div> </div> <!-- closes the first div box --> </li> <?php endwhile; else: ?> <p>Sorry, no posts matched your criteria.</p> <?php endif; ?> </ul> </div><!-- close slider1 --> <?php wp_reset_query(); ?> <div style="width:650px;margin-top:10px;"> <div class="one_third"> <div style="width:100%;height:1px;background:#efefef;"></div> <div style="width:100%;padding-top:2px;"><span class="nqheading">Lifestyle Design</span></div> <div style="width:199px;height:10px;"></div> <?php query_posts($query_string . '&cat=37&posts_per_page=3'); ?> <?php if (have_posts()) : ?> <?php $count = 0; ?> <?php while (have_posts()) : the_post(); ?> <?php $count++; ?> <?php if ($count <= 1) : ?> <?php $post_image = thesis_post_image_info('thumb');echo $post_image['output']; ?> <h2 class="teasertitle"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2> <span class="teaserexcerpt"><?php the_excerpt(); ?></span> <?php else : ?> <div style="width:199px;height:1px;border-top:1px dotted #cecece;margin-top:5px;"></div> <h2 class="teasertitle"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2> <?php endif; ?> <?php endwhile; ?> <?php else : ?> <?php endif; ?> <?php wp_reset_query(); ?> </div> <div class="one_third"> <div style="width:100%;height:1px;background:#efefef;"></div> <div style="width:100%;padding-top:2px;"><span class="nqheading">Love & Relationships</span></div> <div style="width:199px;height:10px;"></div> <?php query_posts($query_string . '&cat=39&posts_per_page=3'); ?> <?php if (have_posts()) : ?> <?php $count = 0; ?> <?php while (have_posts()) : the_post(); ?> <?php $count++; ?> <?php if ($count <= 1) : ?> <?php $post_image = thesis_post_image_info('thumb');echo $post_image['output']; ?> <h2 class="teasertitle"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2> <span class="teaserexcerpt"><?php the_excerpt(); ?></span> <?php else : ?> <div style="width:199px;height:1px;border-top:1px dotted #cecece;margin-top:5px;"></div> <h2 class="teasertitle"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2> <?php endif; ?> <?php endwhile; ?> <?php else : ?> <?php endif; ?> <?php wp_reset_query(); ?> </div> <div class="one_third last"> <div style="width:100%;height:1px;background:#efefef;"></div> <div style="width:100%;padding-top:2px;"><span class="nqheading">Personal Growth</span></div> <div style="width:199px;height:10px;"></div> <?php query_posts($query_string . '&cat=226&posts_per_page=3'); ?> <?php if (have_posts()) : ?> <?php $count = 0; ?> <?php while (have_posts()) : the_post(); ?> <?php $count++; ?> <?php if ($count <= 1) : ?> <?php $post_image = thesis_post_image_info('thumb');echo $post_image['output']; ?> <h2 class="teasertitle"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2> <span class="teaserexcerpt"><?php the_excerpt(); ?></span> <?php else : ?> <div style="width:199px;height:1px;border-top:1px dotted #cecece;margin-top:5px;"></div> <h2 class="teasertitle"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2> <?php endif; ?> <?php endwhile; ?> <?php else : ?> <?php endif; ?> <?php wp_reset_query(); ?> </div> <div class="clear"></div> </div> <div class="newcallout"> <h4 class="newcallouth4"><a href="http://www.claritymind.com/soul-affirmation-music-for-better-outcomes/">Browse Affirmation Music for Sale!</a></h4> </div> <div style="width:650px;margin-top:30px;"> <div class="one_third"> <div style="width:100%;height:1px;background:#efefef;"></div> <div style="width:100%;padding-top:2px;"><span class="nqheading">Awareness</span></div> <div style="width:199px;height:10px;"></div> <?php query_posts($query_string . '&cat=15&posts_per_page=3'); ?> <?php if (have_posts()) : ?> <?php $count = 0; ?> <?php while (have_posts()) : the_post(); ?> <?php $count++; ?> <?php if ($count <= 1) : ?> <?php $post_image = thesis_post_image_info('thumb');echo $post_image['output']; ?> <h2 class="teasertitle"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2> <span class="teaserexcerpt"><?php the_excerpt(); ?></span> <?php else : ?> <div style="width:199px;height:1px;border-top:1px dotted #cecece;margin-top:5px;"></div> <h2 class="teasertitle"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2> <?php endif; ?> <?php endwhile; ?> <?php else : ?> <?php endif; ?> <?php wp_reset_query(); ?> </div> <div class="one_third"> <div style="width:100%;height:1px;background:#efefef;"></div> <div style="width:100%;padding-top:2px;"><span class="nqheading">Meditation</span></div> <div style="width:199px;height:10px;"></div> <?php query_posts($query_string . '&cat=40&posts_per_page=3'); ?> <?php if (have_posts()) : ?> <?php $count = 0; ?> <?php while (have_posts()) : the_post(); ?> <?php $count++; ?> <?php if ($count <= 1) : ?> <?php $post_image = thesis_post_image_info('thumb');echo $post_image['output']; ?> <h2 class="teasertitle"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2> <span class="teaserexcerpt"><?php the_excerpt(); ?></span> <?php else : ?> <div style="width:199px;height:1px;border-top:1px dotted #cecece;margin-top:5px;"></div> <h2 class="teasertitle"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2> <?php endif; ?> <?php endwhile; ?> <?php else : ?> <?php endif; ?> <?php wp_reset_query(); ?> </div> <div class="one_third last"> <div style="width:100%;height:1px;background:#efefef;"></div> <div style="width:100%;padding-top:2px;"><span class="nqheading">Spirituality</span></div> <div style="width:199px;height:10px;"></div> <?php query_posts($query_string . '&cat=61&posts_per_page=3'); ?> <?php if (have_posts()) : ?> <?php $count = 0; ?> <?php while (have_posts()) : the_post(); ?> <?php $count++; ?> <?php if ($count <= 1) : ?> <?php $post_image = thesis_post_image_info('thumb');echo $post_image['output']; ?> <h2 class="teasertitle"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2> <span class="teaserexcerpt"><?php the_excerpt(); ?></span> <?php else : ?> <div style="width:199px;height:1px;border-top:1px dotted #cecece;margin-top:5px;"></div> <h2 class="teasertitle"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2> <?php endif; ?> <?php endwhile; ?> <?php else : ?> <?php endif; ?> <?php wp_reset_query(); ?> </div> <div class="clear"></div> <br /><br /><br /><br /> </div> <?php } } add_action('thesis_hook_before_content', 'home_pagecustom'); /* CUSTOM FOOTER */ function newfooter(){ ?> <div style="width:100%;height:80px;"></div> <div style="width:100%;background:#000000;" class="footernew1"> <div style="width:100%;height:0px;position:relative;top:-132px;z-index:-1;"> <div style="background:url(http://www.claritymind.com/wp-content/uploads/2011/03/mountainback2.jpg) bottom repeat-x;height:132px;width:100%;"></div> </div> <div class="pagecentered" style="padding-top:15px;"> <div class="one_third"> <img src="http://www.claritymind.com/wp-content/uploads/2011/03/certification1.jpg" alt="certification" /> <div style="width:100%;height:3px;border-bottom:1px dotted #444;"></div> <br /> <img src="http://www.claritymind.com/wp-content/uploads/2011/03/logosmall2.jpg" alt="Clarity Mind Logo" /><br /> 20 Ravenscroft Drive Asheville, NC 28801<br /> 404-NOW-MIND (404-669-6463)<br /> Skype: KenLad1 </div> <div class="one_third"> <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Side 9') ) : ?> <?php endif; ?> </div> <div class="one_third last"> <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Side 10') ) : ?> <?php endif; ?> </div> <div class="clear"></div> <div style="height:20px;width:100%;"></div> <span style="font-size:10px;color:#fff;">Copyright © Clarity Mind, LLC. All Rights Reserved. Reproduction without permission prohibited.</span> </div> </div> <?php } function format_gridview_desc($description){ if (strlen($description) > 175) $description = substr ( $description , 0 , 175 )."..."; echo $description; } /* create new side bar for music player - this will only be displayed on the product page */ register_sidebar(array( 'name'=> 'Music Player', 'id' => 'music_player', 'before_widget' => '', 'after_widget' => '', 'before_title' => '<h3>', 'after_title' => '</h3>', )); hi, i am trying to get some javascript working on a website i am making. the javascript changes the background image behind a photo. this simulates a user selecting a different frame from the drop down list http://jimpicot.com/shop/index.php?m...&products_id=3 below is the link to another forum it have been using to get most of the website working. http://www.zen-cart.com/forum/showthread.php?t=173765 Happy Star Wars Day! Hopefully someone is strong in the force and can help. I have a HTML form and I need to get the user to select one of 350 options. I have broken down the options into "Major Group", "Sub-Major Group", "Minor Group" and "Unit" I'm looking to create 4 dynamically changing drop down lists to point the user to their final choice. All 350 options are in one database table with the following headings: [Major Group][Major Group Title][SubMajor Group][SubMajor Group Title][Minor Group][Minor Group Title][Unit][Unit Title] The 'groups' are numeric, and the title's alphanumeric. I have used the MySQL database to achieve this as it makes it easier to update the 350 options in the future should I need to. As far as the tutorial over at W3Schools.com has advised I need to use the following process: HTML Form - <Select> onclick run Javascript function Javascript function connects to server via PHP PHP runs query on the MySQL database and returns results Javascript then populates the 2nd drop down. and so on through to the final drop down. There are never more than 9 options in each drop down. Please can someone help me set this up. I have been using the code examples from W3Schools.com to put the following together. I use the alerts to check it's progress. It seems to be getting stuck when checking that the "if (xmlhttp.readystate==4)" line. Using Safari's built in Debug console the error I get back is that the php file cannot be found and there is a "500 Internal Server Error" - although I think (read as: assume) this is because the "if (xmlhttp.readystate==4)" isn't working. Any help would be much appreciated. Code: function selectMajor(str) { // an alert box to show that both a value has passed and it is the right type alert(SOC_Major.value); // enable the next drop down - SOC_SubMajor document.getElementById('SOC_SubMajor').disabled=false; // clear the next select box? document.Add_Vacancy.SOC_SubMajor.options.length=0 // POST to the php script // AJAX goes here if (str=="") { document.getElementById('SOC_SubMajor').innerHTML=" "; alert("str is empty"); return; } if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, opera, Safari xmlhttp=new XMLHttpRequest(); alert("new XMLHttpRequest created"); } else { // code for IE6, IE5 xmlhttp=new ActiveXObject('Microsoft.XMLHTTP'); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readystate==4) { alert("xmlhttp.readystate = 4"); if(xmlhttp.status==200) { alert("xmlhttp.status = 200") document.getElementById('SOC_SubMajor').innerHTML=xmlhttp.responseText; } else { alert("There was a problem while using XMLHTTP:\n"); } } } xmlhttp.open("POST","scripts/SOCSubMajorSelect.php?q="+str,true); xmlhttp.send(); } I am very new to coding, I am currently working on this design as my very first: http://img822.imageshack.us/img822/6533/unled1pd.jpg. I am currently working on the Image slider which is on the left side next to the login bar and headlines. I don't know where to start with this. If someone could walk me through or help me in anyway i would greatly appreciate it. Here is my current project LIVE: http://visionarycreativegrp.com/Demos/ForSale%20RED/# Hi All, I am using a script that hides / shows a cell row depending on whether a form checkbox has been ticked. The HTML, CSS and JS code is below: CSS & HTML (simplified and normally in head / body tags etc.): Code: #lastRow { display: none;} <table> <tr> <td>Events Xtra:</td> <td><input class="text" type="Checkbox" name="upcoming" id="upcoming" value="checked"></em></td> </tr> <tr id="lastRow"> <td>Xtra Description:</td> <td><textarea name="event_description" cols="60" rows="5" id="event_description"></textarea></td> </tr> </table> JS: Code: function showHideRow(obj){ oLastRow.style.display = (obj.checked)? 'block' : 'none'; } window.onload=function(){ var oChkBox = document.getElementById('upcoming'); oLastRow = document.getElementById('lastRow'); oChkBox.onclick=function(){showHideRow(this);} showHideRow(oChkBox); } Now, the above works absolutely perfectly in Internet Explorer - when the checkbox is ticked, it displays the bottom row exactly as I want it to - i.e. as the next row in the table. However, in Chrome, Safari and Firefox it seems to display the whole row as a cell on it's own so distorting the entire table structure. I suspect it is something to do with the use of the id="lastRow", but I am not sure. The strange thing is that the HTML source is of course the same for both. Can anyone shed any light here? For convenience I have uploaded two images: IE (working fine): Firefox (distorting across page) Regards, Neil Hey everyone, I've got this slight problem with my code in javascript and I cant solve it to save my life and I don't really want to mess more things around incase it makes it worse. For some reason, when I click "get age" it just doesnt run, but the if statements seem to be running, any help would be appreciated Code: <script type = "text/javascript"> function dIM(Y, M) { with (new Date(Y, M, 1, 12)) { setDate(0); return getDate(); } } function dateDifference(birthdate1, birthdate2) { var year1 = birthdate1.getFullYear(), month1 = birthdate1.getMonth(), day1 = birthdate1.getDate(), year2 = birthdate2.getFullYear(), month2 = birthdate2.getMonth(), day2 = birthdate2.getDate(); if (day1 < day2){ month1--; day1 += dIM (year2, month2);day }; if (month1 < month2) { year1--; month1 += 12; } return [year1 - year2, month1 - month2, day1 - day2]; } function ageCalculator() { var day = document.age.inputdate.value; var month = (document.age.inputmonth.value - 1); var year = document.age.inputyear.value; var now = new Date(); thisday = now.getDate(); thismonth = now.getMonth(); thisyear = now.getFullYear(); var first = new Date(thisyear, thismonth - 1, thisday); var second = new Date(year, month - 1, day); var yourage; var datediff; if (day == "" || month == "" || year == "") { alert ("Please fill in all of the boxes before getting your age"); } else if ((day != parseInt(day)) || (month != parseInt(month)) || (year != parseInt(year))) { alert ("Please only enter digits in the day, month or year boxes"); return false; } datediff = dateDifference(first,second); if ((thismonth < month) || (thismonth == month & thisday<=day)) {thisyear--;} yourage = thisyear-year; var next = parseInt(year)+datediff[0]+1; var difference = Date.UTC(next, month, day, 0, 0, 0) - Date.UTC(thisyear, thismonth, thisday, 0, 0, 0); var daysleft = difference/1000/60/60/24; document.age.daysremaining.value = daysleft+" days left for your next birthday"; document.age.ageoutput.value = yourage; } function clear(form){ form.Result.value = ""; } </script> <center> <p> <form name = age> <p>Day of birth <input type="text" id="inputdate" size="2"><br/> Month of birth <input type="text" id="inputmonth" size="2"><br/> Year of birth <input type="text" id="inputyear" size="4" ><br/> <input name="button" type="button" id="button2" onClick="ageCalculator()" value = "Get Age"/> <input type="reset" name="Reset" id="button" value="Reset" /> </p> <p> You are <input type = "text" name = "ageoutput" size = "4" value = "0"> years old <input type = "text" name = "daysremaining" value = "0" /> </p> </form> Hi I am trying to build an application which has 6 small input fields and one numeric key pad. Initially the focus should be on the first inputfield and after entering the number from the numeric key pad, it should shift the focus to third input field and the user should be able to enter the number from the numeric key pad and then shift the focus to fifth input field and user should be able to enter the number in fifth through the key pad. I have achieved till gaining the focus on the first input field and i could enter the number through the key pad and i was able to shift the focus to third input field but however whatever i enter the number is getting changed in first and third input field. the code i wrote is below Code: <html> <head> <script type="text/javascript"> function displaymessage(val) { document.getElementById('first').value = val; alert(document.getElementById('first').value); if(document.getElementById('first').value!=null) { alert("yes"); document.getElementById('third').focus(); document.getElementById('third').value = val; } } </script> </head> <body onload="document.getElementById('first').focus();"> Enter your pin: <input type="text" id="first" size="1" maxlength="1"></> <input type="text" id="second" size="1" maxlength="1" /> <input type="text" id="third" size="1" maxlength="1" /> <input type="text" id="fourth" size="1" maxlength="1" /> <input type="text" id="five" size="1" maxlength="1" /> <input type="text" name="six" size="1" maxlength="1" /> <table border="1"> <tr> <td width="30px" align="center"><input type="button" value="1" onclick="displaymessage(1)"/> </td> <td width="30px" align="center"><input type="button" value="2" onclick="displaymessage(2)"/> </td> <td width="30px" align="center"><input type="button" value="3" onclick="displaymessage(3)"/> </td> </tr> <tr> <td width="30px" align="center"><input type="button" value="4" onclick="displaymessage(4)"/> </td> <td width="30px" align="center"><input type="button" value="5" onclick="displaymessage(5)"/> </td> <td width="30px" align="center"><input type="button" value="6" onclick="displaymessage(6)"/> </td> </tr> <tr> <td width="30px" align="center"><input type="button" value="7" onclick="displaymessage(7)"/> </td> <td width="30px" align="center"><input type="button" value="8" onclick="displaymessage(8)"/> </td> <td width="30px" align="center"><input type="button" value="9" onclick="displaymessage(9)"/> </td> </tr> </tr> <tr> <td width="30px" align="center"><input type="button" value="0" onclick="displaymessage(0)"/> </td> <td width="30px" align="center"><input type="button" value="Reset"/> </td> </tr> </table> </body> </html> I know thats because I am filling the val variable again in the third input field and that is the reason it is getting changed in first and third. However I am not aware of what other best methods we could use on this. Pleasee helpp.. I have a big issue. I am doing this: I have a menu and when you click tje linsk it loads content using jquery post into a div. It alway loads javascript with it. But I find when they click another menu item it loads a different section into the div along with different javascript. But the dom is still keeping the old javascript. After about 40 clicks the site wants to stop working. How can I resolve this? Thanks Hi guys, I'm having an issue with a my form total, I'm getting the same result no matter what positive number I enter. Every other aspect of the code seems to be working ok apart from this. eg. If I enter the number 4, the factorial number should read 24 but it's reading 1, its reading 1 no matter what number goes in there. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <script type= "text/javascript"> function calcFactorial(factorialNumber) { var factorialResult = 1; for (; factorialNumber > 0; factorialNumber --){ factorialNumber = factorialResult * factorialNumber; } return factorialResult; } </script> </head> <frameset cols="100%,*"> <frame name = "fraCalcFactorial" src="calcFactorial.htm" /> <frame src="UntitledFrame-4"></frameset><noframes></noframes> </html> I believe the issue is in here somewhere but I'm not sure where. Ironically I'm learning from a book and this is from the Error handling/Debugging chapter. I'm going well on this book so far and really don't want to have to move forward without fully understanding whats going on. Any help/comments would be greatly received. Sara Hi, I am working on simple project and it's for the institute Class project where i am learning php. i have to submit the project as soon as possible. But i am doing it different way then of i was supposed. Instead of validation message i want to use a picture or icon with Red error icon and Green yes icon as you can check in the attached picture. I am calling a function on submit button and if there is any error then using document.GetElementById('error').style.background="none" and ="pic url". I am getting output but it's just for a second then disappeared. I have already attached the Screen Shot to get the full idea.. Mainly i want to display red icon on error and green one when there is not error. I'm trying to use SmoothGallery 2.1 on my website as a featured box. I tried opening the demos provided with the code in all browsers to make sure it was compatible and it showed fine in them all. I copied the javascript onto my site and I'm able to show the gallery. However in Chrome and Internet Explorer it shows fine, but Firefox the images are spread vertically down my site and the javascript gallery box doesn't show. I don't understand why this is an issue because it shows fine opening the demo pages and the javascript code and css is a straight copy from the folder :S Can anyone help me out? Website I'm having the issue on is www.deewon.com -Thanks Hello there, I am new to UI Development, I had an issue in displaying slider, i have to use 3 sliders in my page, 2 are working fine but the 3rd slide is not getting displayed even though the code is same as the remaining 2. Below are my JS and HTML pages. Please reply me ASAP. Thank you. Java Script Code: // Time Slider $("#time_slider").slider({ range: true, min: 0, max: 1439, values: [540, 1020], slide: slideTime }); function slideTime(event, ui){ var minutes0 = parseInt($("#time_slider").slider("values", 0) % 60); var hours0 = parseInt($("#time_slider").slider("values", 0) / 60 % 24); var minutes1 = parseInt($("#time_slider").slider("values", 1) % 60); var hours1 = parseInt($("#time_slider").slider("values", 1) / 60 % 24); $("#time").text(getTime(hours0, minutes0) + ' - ' + getTime(hours1, minutes1)); } function getTime(hours, minutes) { var time = null; minutes = minutes + ""; if (hours < 12) { time = "AM"; } else { time = "PM"; } if (hours == 0) { hours = 12; } if (hours > 12) { hours = hours - 12; } if (minutes.length == 1) { minutes = "0" + minutes; } return hours + ":" + minutes + " " + time; } slideTime(); //----------------------------- // Trip Duration $("#duration_slider").slider({ value: 160, min: 0, max: 1440, step: 30, slide: slideDuration }); function slideDuration(event, ui){ var hours = Math.floor(ui.value / 60); var minutes = ui.value - (hours * 60); if(hours.length == 1) hours = '0' + hours; if(minutes.length == 1) minutes = '0' + minutes; $("#duration").text(hours+'hrs. '+minutes+'mins. '); } slideDuration(); //----------------------------- // Max Price $("#price_slider").slider({ value: 160, min: 0, max: 1440, step: 30, slide: slidePrice }); function slidePrice(event, ui){ var dollars = ui.value; $("#maxprice").text('$'+dollars); } slidePrice(); HTML Code: <head> <style> #slider-range{width:400px;} #slider-range,#time,#duration,#maxprice {margin:10px;display:block;} .ui-slider-horizontal .ui-state-default {background:url(images/scrub-btn.png) no-repeat scroll 50% 50%;} .flights-select {margin: -22px 0px 140px;} </style> </head> <body> <div class="flights-section-title">Flight Time</div> <div class="flights-section"> <ul class="inline"> <li><input class="radio" type="radio" name="2" checked="checked" value="a"><div class="flight-radio-label">Take-Off</div></li> <li><input class="radio" type="radio" name="2" value="b"><div class="flight-radio-label">Landing</div></li> </ul> <div class="leftnav-dot-divider"> <div id="time_slider"></div> <span id="time"></span></div> </div><!-- flight-section-slider --> <div class="flights-section-title">Max Trip Duration</div> <div class="flights-section"> <div class="leftnav-dot-divider"> <div id="duration_slider"></div> <span id="duration">2hrs. 0mins.</span> </div> </div><br /> <div class="flights-section-title">Max Price</div> <div class="flights-section"> <div class="leftnav-dot-divider"> <div id="price_slider"></div><span id="maxprice">$100</span> </div> </div><br /> </body I am trying to "swap" the contents of a div(#right_top) depending on which line item you hover over. Awkward, but does work, but.... the problem is that although I can get the code to work, the "right_top" div gets longer (physically on the page) even though each div is supposed to be a different "z-index". I don't know how to correct this, or is there better code? I would appreciate any help! Thank you. Complete code below..... ------------------------------------------------------------------- Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head> <script language="javascript" type="text/javascript"> <!-- Hide script from older browsers function MM_findObj(n, d) { //v4.0 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && document.getElementById) x=document.getElementById(n); return x; } function MM_showHideLayers() { //v3.0 var i,p,v,obj,args=MM_showHideLayers.arguments; for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2]; if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v='hide')?'hidden':v; } obj.visibility=v; } } //--> </script> <!-------------------------------------------------------------> <style type="text/css"> #wrapper{ width:800px; } #left_top{ background-color:#66FFFF; width:270px; padding-top:60px; padding-left:30px; float:left; } #right_top{ background-color:#66FF33; padding-top:60px; width:480px; padding-left:20px; float:left; } #first_div{ position:relative; width:450px; height:300px; z-index:1; visibility: hidden; left:0px; font-family:Verdana, Arial, Helvetica, sans-serif; font-style:italic; color:#FFFFFF; } #second_div{ position:relative; font-size:16px; width:450px; height:300px; z-index:2; top: -320px; visibility: hidden; left:0px; font-family:Verdana, Arial, Helvetica, sans-serif; font-style:italic; color:#FFFFFF; } #third_div{ position:relative; font-size:16px; width:450px; height:300px; z-index:3; top: -640px; visibility: hidden; left:0px; font-family:Verdana, Arial, Helvetica, sans-serif; font-style:italic; color:#FFFFFF; } </style> </head> <body> <div id="wrapper"> <div id="left_top"> <table width="210" height="483"> <tr><td width="210" height="477" valign="top"> <div><a title="first div" href="#" class="style1" onClick="return false" onMouseOver="MM_showHideLayers('Initial','','hide','first_div','','show')" onMouseOut="MM_showHideLayers('Initial','','show','first_div','','hide')">show first div</a></div> <div><a title="second div" href="#" class="style1" onClick="return false" onMouseOver="MM_showHideLayers('Initial','','hide','second_div','','show')" onMouseOut="MM_showHideLayers('Initial','','show','second_div','','hide')">show second div</a></div> <div><a title="third div" href="#" class="style1" onClick="return false" onMouseOver="MM_showHideLayers('Initial','','hide','third_div','','show')" onMouseOut="MM_showHideLayers('Initial','','show','third_div','','hide')">show third div</a></div> </td></tr> </table> </div><!-- end of left_top --> <div id="right_top"> <div id="first_div"> <p align="justify"><b>first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first first </b></p></div> <div id="second_div"> <p align="justify"><b>second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second second </b></p></div> <div id="third_div"> <p align="justify"><b>third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third third </b></p></div> </div><!-- end of right_top div --> </div><!-- end of wrapper --> </body> </html> Hey guys, I'm new to javascript and I'm trying to get this code to work. It's a pretty basic system to start with, just wanting to calculate the total pay for employees and using the array so that I can key multiple employees at a time. Can anyone help me adjust my code so that this system works? Thanks for your help in advance, it's greatly appreciated. Code: var NoEmps var PayRate= new Array(); var HrsWorked= new Array(); var EmpName= new Array(); var GrossPay= new Array(); var i var j NoEmps=prompt("Enter Number of Employees to process","") i = 0; while (i<NoEmps) { EmpName[i]= prompt("Enter employee name","") PayRate[i]=prompt("Enter employee pay rate","") HrsWorked[i]= prompt ("Enter hours worked","") if ((isNaN(PayRate[i]))||(isNaN(HrsWorked[i]))) { alert("Please enter numbers") flag = "false" break } if PayRate[i]>25 { alert ("Pay rate can only b $25 or less per hour") flag == "false" break } //i = i +1 } if (flag = "true") { for (j in EmpName) { GrossPay[j]=PayRate[j] * HrsWorked[j] } for (counter; counter<EmpName.length; counter++) { document.write ("Gross Pay for " + EmpName[counter] + " is $" + GrossPay[counter] + "<br>") } } |