JavaScript - Problem With Select Element In Javascript
I am trying to make images change as the user selects the option from the dropdown menu , I have called alert("test1"); alert("test2"); to check if the functions are being called but only the first one happens, can you please tell me what's wrong with the script. Here is the script:
Code:
var oImageChooser; addEvent( window, "load", initialize) function initialize() { alert("test1"); var oImageChooser = document.getElementById("imageChooser"); addEvent(oImageChooser, "change", loadCached); } var imageLibrary = new Array(); imageLibrary["image1"] = new Image(120,90); imageLibrary["image1"].src = "images/desk1.gif"; imageLibrary["image2"] = new Image(120,90); imageLibrary["image2"].src = "images/desk2.gif"; imageLibrary["image3"] = new Image(120,90); imageLibrary["image3"].src = "images/desk3.gif"; imageLibrary["image4"] = new Image(120,90); imageLibrary["image4"].src = "images/desk4.gif"; function loadCached() { alert("test2"); var imgChoice = oImageChooser.options[oImageChooser.selectedIndex].value; document.getElementById("thumbnail").src = imageLibrary[imgChoice].src; } here is the html Code: <html> <head><title>Image dropdown</title> <script type = "text/javascript" src = "experimento5.js"> </script> </head> <body onload = "initialize()"> <h1> Choose any image</h1> <img id = "thumbnail" src = "images/desk1.gif" > <form> <select id = "imageChooser"> <option value = "image1"> Bands</option> <option value = "image2"> Clips</option> <option value = "image3"> Lamp</option> <option value = "image4"> Erasers</option> </select> </form> </body> </html> Similar TutorialsI am working with a script from Dynamic Drive (found here) that allows you to select and copy a form element. I would like to modify the code to allow me to select multiple form elements with one select all button. this is the code for the head section: Code: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"> </script> <script language="Javascript"> <!-- /* Highlight and Copy form element script- By Dynamicdrive.com For full source, Terms of service, and 100s DTHML scripts Visit http://www.dynamicdrive.com */ //specify whether contents should be auto copied to clipboard (memory) //Applies only to IE 4+ var copytoclip=1 function HighlightAll(theField) { var tempval=eval("document."+theField) tempval.focus() tempval.select() if (document.all&©toclip==1){ therange=tempval.createTextRange() therange.execCommand("Copy") window.status="Contents highlighted and copied to clipboard" setTimeout("window.status=''",1800) } } //--> </script> and this is what I have so far in the body: Code: <a class="highlighttext" href="javascript:HighlightAll('form1.select1')">Select All</a><br> <div class="form"> <form name="form1"> <textarea name="select1" rows=1 cols=50 >document name</textarea> <textarea name="select2" rows=1 cols=50 >company</textarea> <textarea name="select3" rows=1 cols=50 >language</textarea> </form> </div> From the code, I would like to make it so that I can HighlightAll for each of the textareas (there will be lots of them). I have tried a lot of different options...I am not very experienced with Javascript, but have used it from time to time. A little more experienced with jQuery, but not enough to convert this. Any help is greatly appreciated. Hello everyone! I have a select (combo box) element that gets filled with items when selected item changed in another one (master combo box). It works in Chrome, FireFox but not in IE (all latest browser versions). How do I populate the items in the child combo box: - ajax call of a PHP script - that returns items for the combo box: echo '<option value="' . $id . '">' . $name . '</option>'; - setting innerHTML attribute of the child combo box to a value that gets returned by the ajax call: document.forms['parametersForm'].elements['stationId'].innerHTML = html; Do I need to return JSON object (or XML) by the PHP script and programically add items (in JavaScript) in the ajax callback or is there an alternative? Obviously building DOM with echoing PHP result doesn't work well in IE. Thanks for your future help! Regards Greetings! I'm trying to disable some form elements using the onclick from a radio input element. It ain't working so great! I googled around and finally scraped together some code that in theory 'I' think should work. I'm no javascript guru! It has to be some tiny tiny thing I'm missing. Here's my code and mind you this is a project in the making! I still have along way to go! Thanks for you time and help! 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" xml:lang="en"> <head> <title>Empty Page</title> <script type='text/javascript'> function setReadOnly(obj) { if(obj.value == "1") { document.shiftreport.artprogs.disabled = true; document.shiftreport.artprog_stat.disabled = true; } else { document.shiftreport.icprogs.disabled = true; document.shiftreport.icprog_stat.disabled = true; } } </script> </head> <body> <?php include_once('form_input_functions.php'); $artprog_status = array('none' => 'None', 'stopped' => 'Stopped', 'running' => 'Running', 'completed' => 'Completed', ); $artprog_wfls = array('no_job' => '------- select a job -------', 'ARTPROG/WFL/DAILY/BATCH' => 'ARTPROG/WFL/DAILY/BATCH', 'ARTPROG/WFL/OPERATIONS/IMAGE' => 'ARTPROG/WFL/OPERATIONS/IMAGE', 'ARTPROG/WFL/WKLY/BATCH' => 'ARTPROG/WFL/WKLY/BATCH', 'ARTPROG/WFL/DAILY/CLAIMS' => 'ARTPROG/WFL/DAILY/CLAIMS' ); $bllyprog_status = array('none' => 'None', 'stopped' => 'Stopped', 'running' => 'Running', 'completed' => 'Completed', ); $bllyprog_wfls = array('no_job' => '------- select a job -------', 'BLLYPROG/WFL/DAILY/SISCHEDPAY' => 'BLLYPROG/WFL/DAILY/SISCHEDPAY', 'BLLYPROG/WFL/DAILY/REPORTS' => 'BLLYPROG/WFL/DAILY/REPORTS', 'BLLYPROG/WFL/WKLY/REPORTS/GYPSUM' => 'BLLYPROG/WFL/WKLY/REPORTS/GYPSUM', '(BLPACK)BALDLYON/WFL/BLPACK/ARCHIVEANDBACKUP' => '(BLPACK)BALDLYON/WFL/BLPACK/ARCHIVEANDBACKUP', '$UTIL/O/AUDIT/CLOSE/BLLY' => '$UTIL/O/AUDIT/CLOSE/BLLY', 'DATASIWH/EXTRACTALL/DAILY/AUD/WFL' => 'DATASIWH/EXTRACTALL/DAILY/AUD/WFL', ); $sbwcprog_status = array('none' => 'None', 'stopped' => 'Stopped', 'running' => 'Running', 'completed' => 'Completed', ); $sbwcprog_wfls = array('no_job' => '------- select a job -------', 'WORKPROG/WFL/DAILY/WAREHOUSE' => 'WORKPROG/WFL/DAILY/WAREHOUSE', '(BLPACK)BALDLYON/WFL/BLPACK/ARCHIVEANDBACKUP' => '(BLPACK)BALDLYON/WFL/BLPACK/ARCHIVEANDBACKUP', '$UTIL/O/AUDIT/CLOSE/WORKCOMP' => '$UTIL/O/AUDIT/CLOSE/WORKCOMP' ); $tcsprog_status = array('none' => 'None', 'stopped' => 'Stopped', 'running' => 'Running', 'completed' => 'Completed', ); $tcsprog_wfls = array ('no_job' => '------- select a job -------', 'TCS/WFL/DAILY/BATCH' => 'TCS/WFL/DAILY/BATCH', 'BLPROG/WFL/COPY/REMOVE/GLCHECKS' => 'BLPROG/WFL/COPY/REMOVE/GLCHECKS' ); $icprog_status = array('none' => 'None', 'stopped' => 'Stopped', 'running' => 'Running', 'completed' => 'Completed', ); $icprog_wfls = array ('no_job' => '------- select a job -------', 'BLPROG/WFL/DAILY/INDCONT' => 'BLPROG/WFL/DAILY/INDCONT', 'INDCON/WFL/PRINT/IDCARDS' => 'INDCON/WFL/PRINT/IDCARDS', 'BLPROG/WFL/BATCH/NEWYORK/STATE-REPORT' => 'BLPROG/WFL/BATCH/NEWYORK/STATE-REPORT' ); $truckprog_status = array('none' => 'None', 'stopped' => 'Stopped', 'running' => 'Running', 'completed' => 'Completed', ); $truckprog_wfls = array('no_job' => '------- select a job -------', 'TRUCKPROG/WFL/DAILY/TKINTMARSH' => 'TRUCKPROG/WFL/DAILY/TKINTMARSH', 'TRUCKPROG/WFL/DAILY/TKINTERNET' => 'TRUCKPROG/WFL/DAILY/TKINTERNET', 'TRUCKPROG/WFL/DAILY/BATCH' => 'TRUCKPROG/WFL/DAILY/BATCH', 'TRUCKPROG/WFL/DAILY/TKSCHEDPAY' => 'TRUCKPROG/WFL/DAILY/TKSCHEDPAY', 'TRUCKPROG/WFL/DAILY/REPORTS' => 'TRUCKPROG/WFL/DAILY/REPORTS', 'BLPROG/WFL/DAILY/CLAIMS' => 'BLPROG/WFL/DAILY/CLAIMS', 'TRUCKPROG/WFL/DAILY/AUDIT/PREMIUM' => 'TRUCKPROG/WFL/DAILY/AUDIT/PREMIUM', 'TRUCKPROG/WFL/DAILY/BALRPT' => 'TRUCKPROG/WFL/DAILY/BALRPT', 'PROG-MEDICAL/WFL/DAILY/PMCLMEXT' => 'PROG-MEDICAL/WFL/DAILY/PMCLMEXT', 'AGPROG/WFL/DAILY/AGNUCOPREM' => 'AGPROG/WFL/DAILY/AGNUCOPREM', 'BL/WFL/WKLY/FEDEX/0005' => 'BL/WFL/WKLY/FEDEX/0005', 'TRUCKPROG/WFL/WKLY/DE542' => 'TRUCKPROG/WFL/WKLY/DE542', 'TRUCKPROG/WFL/WKLY/FDXDISAB' => 'TRUCKPROG/WFL/WKLY/FDXDISAB', 'TRUCKPROG/WFL/WKLY/FDXDISERR' => 'TRUCKPROG/WFL/WKLY/FDXDISERR', 'BL/WFL/ONLINE/DUMP/TRUCKING' => 'BL/WFL/ONLINE/DUMP/TRUCKING', 'DATATKWH/EXTRACTALL/DAILY/WFL' => 'DATATKWH/EXTRACTALL/DAILY/WFL', '(BLPACK)BALDLYON/WFL/BLPACK/ARCHIVEANDBACKUP' => '(BLPACK)BALDLYON/WFL/BLPACK/ARCHIVEANDBACKUP' ); $smallprog_status = array('none' => 'None', 'stopped' => 'Stopped', 'running' => 'Running', 'completed' => 'Completed', ); $smallprog_wfls = array('no_job' => '------- select a job -------', 'SMALLPROG/WFL/DAILY/BATCH' => 'SMALLPROG/WFL/DAILY/BATCH', 'SMALLPROG/WFL/DAILY/CERTS' => 'SMALLPROG/WFL/DAILY/CERTS', 'SMALLPROG/WFL/OPERATIONS/PRINT' => 'SMALLPROG/WFL/OPERATIONS/PRINT', 'SMALLPROG/WFL/WKLY/BATCH' => 'SMALLPROG/WFL/WKLY/BATCH', 'SFCLAIMS/WFL/DAILY/DWHCLAIMS' => 'SFCLAIMS/WFL/DAILY/DWHCLAIMS', 'SFCLAIMS/WFL/DAILY/REPORTS' => 'SFCLAIMS/WFL/DAILY/REPORTS', 'SFCLAIMS/WFL/WEEKLY/REPORTS' => 'SFCLAIMS/WFL/WEEKLY/REPORTS', 'BL/WFL/ONLINE/DUMP/SFDB/1WORKER' => 'BL/WFL/ONLINE/DUMP/SFDB/1WORKER', '$UTIL/O/AUDIT/CLOSE/SFDB' => '$UTIL/O/AUDIT/CLOSE/SFDB', 'DATASFWH/EXTRACTALL/DAILY/WFL' => 'DATASFWH/EXTRACTALL/DAILY/WFL', '(BLPACK)BALDLYON/WFL/BLPACK/ARCHIVEANDBACKUP' => '(BLPACK)BALDLYON/WFL/BLPACK/ARCHIVEANDBACKUP' ); $persauto_status = array('none' => 'None', 'stopped' => 'Stopped', 'running' => 'Running', 'completed' => 'Completed', ); $persauto_wfls = array('no_job' => '------- select a job -------', 'PERSAUTO/WFL/DAILY/BATCH' => 'PERSAUTO/WFL/DAILY/BATCH', 'PERSAUTO/WFL/OPERATIONS/IMAGE' => 'PERSAUTO/WFL/OPERATIONS/IMAGE', 'PERSAUTO/WFL/OPERATIONS/PRINT' => 'PERSAUTO/WFL/OPERATIONS/PRINT', 'PERSAUTO/WFL/WKLY/BATCH' => 'PERSAUTO/WFL/WKLY/BATCH', 'PERSAUTO/WFL/DAILY/CLAIMS' => 'PERSAUTO/WFL/DAILY/CLAIMS', 'BL/WFL/ONLINE/DUMP/DB1/1WORKER/FULL' => 'BL/WFL/ONLINE/DUMP/DB1/1WORKER/FULL', '$UTIL/O/AUDIT/CLOSE/DB1' => '$UTIL/O/AUDIT/CLOSE/DB1', 'DATAWH/EXTRACTALL/DAILY/WFL' => 'DATAWH/EXTRACTALL/DAILY/WFL', 'BL/WFL/OFFLINE/DUMP/WAREHOUSE' => 'BL/WFL/OFFLINE/DUMP/WAREHOUSE' ); $isoprog_status = array('none' => 'None', 'stopped' => 'Stopped', 'running' => 'Running', 'completed' => 'Completed', ); $isoprog_wfls = array('no_job' => '------- select a job -------', 'ISOPROG/WFL/BATCH/ISOSAGDAILY' => 'ISOPROG/WFL/BATCH/ISOSAGDAILY' ); $bkuplive_status = array('none' => 'None', 'stopped' => 'Stopped', 'running' => 'Running', 'completed' => 'Completed', ); $bkuplive_wfls = array('no_job' => '------- select a job -------', 'BL/WFL/ONLINE/DUMP/BLDB' => 'BL/WFL/ONLINE/DUMP/BLDB', '(BLPACK)BALDLYON/WFL/BLPACK/ARCHIVEANDBACKUP' => '(BLPACK)BALDLYON/WFL/BLPACK/ARCHIVEANDBACKUP', '$UTIL/O/AUDIT/CLOSE/BLDB' => '$UTIL/O/AUDIT/CLOSE/BLDB', 'DATARDWH/EXTRACTALL/DAILY/REIN/WFL' => 'DATARDWH/EXTRACTALL/DAILY/REIN/WFL', '(BLPACK)BALDLYON/WFL/BLPACK/ARCHIVEANDBACKUP' => '(BLPACK)BALDLYON/WFL/BLPACK/ARCHIVEANDBACKUP', 'BL/WFL/FICHE/DISK' => 'BL/WFL/FICHE/DISK' ); $testsite_status = array('none' => 'None', 'stopped' => 'Stopped', 'running' => 'Running', 'completed' => 'Completed', ); $testsite_wfls = array('no_job' => '------- select a job -------', 'WFL/TESTLYON/DATABASE/ONLINE/DISABLE' => 'WFL/TESTLYON/DATABASE/ONLINE/DISABLE', 'UTIL/WFL/REMOVE/TESTLYON/BDFILES' => 'UTIL/WFL/REMOVE/TESTLYON/BDFILES', 'BALDLYON/WFL/BLPACK/ARCHIVEANDBACKUP' => 'BALDLYON/WFL/BLPACK/ARCHIVEANDBACKUP' ); ?> <form method="POST" name="shiftreport" action="<?php print $_SERVER['PHP_SELF']; ?>"> <p>1st Shift <?php input_radiocheck('radio','shift','0','1','1'); ?></p> <p>2st Shift <?php input_radiocheck('radio','shift','0','2','1'); ?></p> <p>3st Shift <?php input_radiocheck('radio','shift','0','3','1'); ?></p> <table> <thead> <tr> <th>Application</th> <th>Job Stream</th> <th>Status</th> </tr> </thead> <tbody> <tr> <td>ARTISAN</td> <td> <?php input_select('artprogs',$artprog_wfls['no_job'], $GLOBALS['artprog_wfls'], '390px'); ?> </td> <td> <?php input_select('artprog_stat', $artprog_status['none'] , $GLOBALS['artprog_status']); ?> </td> </tr> <tr> <td>SELF INSURED</td> <td> <?php input_select('bllyprogs',$bllyprog_wfls['no_job'], $GLOBALS['bllyprog_wfls'], '390px'); ?> </td> <td> <?php input_select('bllyprog_stat', $bllyprog_status['none'] , $GLOBALS['bllyprog_status']); ?> </td> </tr> <tr> <td>SBWC</td> <td> <?php input_select('sbwcprogs',$sbwcprog_wfls['no_job'],$GLOBALS['sbwcprog_wfls'], '390px'); ?> </td> <td> <?php input_select('sbwcprog_stat', $sbwcprog_status['none'] , $GLOBALS['sbwcprog_status']); ?> </td> </tr> <tr> <td>TCS</td> <td> <?php input_select('tcsprogs',$tcsprog_wfls['no_job'], $GLOBALS['tcsprog_wfls'], '390px'); ?> </td> <td> <?php input_select('tcsprog_stat', $tcsprog_status['none'] , $GLOBALS['tcsprog_status']); ?> </td> </tr> <tr> <td>IC</td> <td> <?php input_select('icprogs',$icprog_wfls['no_job'], $GLOBALS['icprog_wfls'], '390px'); ?> </td> <td> <?php input_select('icprog_stat', $icprog_status['none'] , $GLOBALS['icprog_status']); ?> </td> </tr> <tr> <td>TRUCKING</td> <td> <?php input_select('truckprogs',$truckprog_wfls['no_job'], $GLOBALS['truckprog_wfls'], '390px'); ?> </td> <td> <?php input_select('truckprog_stat', $truckprog_status['none'] , $GLOBALS['truckprog_status']); ?> </td> </tr> <tr> <td>SMALL FLEET</td> <td> <?php input_select('smallprogs',$smallprog_wfls['no_job'], $GLOBALS['smallprog_wfls'], '390px'); ?> </td> <td> <?php input_select('smallprog_stat', $smallprog_status['none'] , $GLOBALS['smallprog_status']); ?> </td> </tr> <tr> <td>PERSONAL AUTO</td> <td> <?php input_select('persauto',$persauto_wfls['no_job'], $GLOBALS['persauto_wfls'], '390px'); ?> </td> <td> <?php input_select('persauto_stat', $persauto_status['none'] , $GLOBALS['persauto_status']); ?> </td> </tr> <tr> <td>ISO</td> <td> <?php input_select('isoprog',$isoprog_wfls['no_job'], $GLOBALS['isoprog_wfls'], '390px'); ?> </td> <td> <?php input_select('isoprog_stat', $isoprog_status['none'] , $GLOBALS['isoprog_status']); ?> </td> </tr> <tr> <td>BACKUPS LIVE</td> <td> <?php input_select('bkuplive',$bkuplive_wfls['no_job'], $GLOBALS['bkuplive_wfls'], '390px'); ?> </td> <td> <?php input_select('bkuplive_stat', $bkuplive_status['none'] , $GLOBALS['bkuplive_status']); ?> </td> </tr> <tr> <td>TEST SITE INSTRUCTIONS</td> <td> <?php input_select('testsite',$testsite_wfls['no_job'], $GLOBALS['testsite_wfls'], '390px'); ?> </td> <td> <?php input_select('testsite_stat', $testsite_status['none'] , $GLOBALS['testsite_status']); ?> </td> </tr> </tbody> </table> </form> </body> </html> The included functions file that I didn't include is below: Code: <?php function input_text($element_name, $value) { print '<input type="text" name="' . $element_name . '" value="'; print htmlentities($values[$element_name]) . '">'; } function input_submit($element_name,$label) { print '<input type="submit" name="' . $element_name .'" value="'; print htmlentities($label) .'"/>'; } function input_textarea($element_name,$values) { print '<textarea name="' . $element_name . '">'; print htmlentities($values[$element_name]) . '</textarea>'; } function input_radiocheck($type,$element_name,$values,$element_value,$clicker = '0') { print '<input type="' . $type . '" name="' . $element_name . '" value="' . $element_value . '" '; if ($element_value == $values[$element_name]) { print ' checked="checked"'; } if ($clicker == '1') print ' onclick="setReadOnly(this)"'; print '/>'; } function input_select($element_name, $selected, $options, $drop_width = '100px', $multiple = false) { print '<select style="width:' . $drop_width . ';" name="' . $element_name; if ($multiple) { print '[]" multiple="multiple'; } print '">'; $selected_options = array(); if ($multiple) { foreach ($selected[$element_name] as $val) { $selected_options[$val] = true; } } else { $selected_options[ $selected[$element_name] ] = true; } foreach ($options as $option => $label) { print '<option value="' . htmlentities($option) . '"'; if (isset($selected_options[$option])) { print ' selected="selected"'; } print '>' . htmlentities($label) . '</option>'; } print '</select>'; } ?> Ok so I'm making this form which when a selection is made in one box it will run through the javascript(function getMgmtHours), and update the div(mgmthours). Then another box shows up allowing another selection to be made which runs through the javascript(function getDays) and updates another div(mgmtdate). My problem is that when I use the second box to run through javascript, it overwrites what shows up in the first div (mgmthours) when it should be updating a different div (mgmtdate). Any ideas what I can do to get it update the relevant div and not overwrite the other one? Here is part of the javascript I have in my page head: Code: function getMgmtHours(str) { if (str=="") { document.getElementById("mgmthours").innerHTML=""; return; } if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("mgmthours").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","getmgmthours.php?dist="+str,true); xmlhttp.send(); } function getDays(str) { if (str=="") { document.getElementById("mgmtdate").innerHTML=""; return; } if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("mgmtdate").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","getdates.php?sunday="+str,true); xmlhttp.send(); } Here is the HTML/PHP portion being used: PHP Code: echo "<p>"; echo "Submit hours:"; echo "<form>"; echo "<select name='district' onchange='getMgmtHours(this.value)'>"; echo "<option value=''>Select a district:</option> <option value='1'>1</option> <option value='3'>3</option> <option value='4'>4</option>"; echo "</select>"; echo "</form>"; echo "</p>" echo "<p>"; echo "<form action='./hours.php' method='post' onSubmit='return checkMgmtHours'>"; echo "Weekending Day: "; echo "<select name='weekending' onchange='getDays(this.value)'>"; echo "<option value=''>Choose a Date:</option>"; while ($week < 32) { $nextsunday = strtotime("next Sunday"); if ($week > 0) { $timestamp = strtotime("-" . $week . " week", $nextsunday); } else { $timestamp = $nextsunday;} $weekending = date('M. d, Y', $timestamp); echo "<option value='" . $weekending . "'>" . $weekending . "</option>"; $week = $week + 1; } echo "</select>"; echo "<div id='mgmtdate' />"; echo "<div id='mgmthours' />"; echo "</p>"; Edit: Also, after getMgmtHours() runs, I can still use both getDays and getMgmtHours, howeer once I used getDays, I am no longer able to use getMgmtHours w/o refreshing the page. I am using a jQuery slider for a website but the W3C comes up with invalid because: document type does not allow element "div" here .before('<div id="buttons">') Code: <script type="text/javascript"> $(document).ready(function() { $('#slider') .before('<div id="buttons"></div>') .cycle({ fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc... pager: '#buttons' }); }); </script> Any help with this would be appreciated thanks. HI I want to write a search for my site .I make a new panel in the left of my menue and it has a text input and an image which when that user click on it javascript opens a new window which is a php page.The part I don't know how to do is when the user click on the image it should get the content of the text input and pass it to the url.For the hyperlink of the image I use "<a href="javascriptpen_window('includes/func/search.php?id=" But I don't know what should I write after that to get the content of the text input and put it in the next of the id. How can I do so? Thanks I am new to javascript and would like to search for the element with id but the element id are changing if i use different navigation in that web page example: C21_W68_V69_notes_struct.text changes to C24_W78_V79_notes_struct.text or any other name next time hence i would like to search that element using a pattern like notes_struct.text as there exist only one element ending with this pattern. I am using old version IE and would like to use javascript only. Kindly help. I am very new to javascript(and these forums) and I am teaching my self to use the canvas element. I am trying to draw an image to the canvas but nothing is appearing. And I am getting no error in the chrome console. Can anyone see why? Code: function RPGanimation(options) { this.initcanvas(options); this.initbackground(options); }; RPGanimation.prototype = { initbackground: function(options){ this.background = new Image(); this.background.src = options.backsource; this.background.onload = this.drawbackground(); }, initcanvas:function(options){ this.canvas = document.getElementById(options.canvasid); this.context = this.canvas.getContext('2d'); this.dimensions = {width:this.canvas.width,height:this.canvas.height}; }, drawbackground:function(){ //document.write('<IMG SRC="Chrysanthemum.jpg">'); this.context.drawImage(this.background,0,0,this.dimensions.width,this.dimensions.height); } }; I create the object in a webpage with the canvas element created just before that script tag... Its about this: http://www.wduffy.co.uk/blog/keep-el...omment-page-1/ Everywhere is used for a whole div on some side and when its on the top of the page. But what if its in the middle..? Look here - http://phpbb.bg/viewtopic.php?f=14&p=1013#p1013 Scroll down and then up.Anyway to fix this? I started using the Google News Web Element on my website. The website for Google News Web Element is: http://www.google.com/webelements/#!/news I want the links to open in a new window, which cannot be done with the iframe version. Their website only allows me to generate an iframe. I was told that this can be done by using the javascript version, but I have not been able to figure it out. This is their link to the documentation: http://code.google.com/apis/newssearch/newsshow/ I know very little about javascript, and have been trying to get it to work but have been unsuccessful. I want to use the Medium Rectangle size and I want the only topic to be "Swainsboro". The only modification that I want to make is for the links to open in a new window. If anyone can help me do this, it would be appreciated. This is the iframe data that was generated by the wizard: Code: <iframe frameborder=0 marginwidth=0 marginheight=0 border=0 style="border:0;margin:0;width:300px;height:250px;" src="http://www.google.com/uds/modules/elements/newsshow/iframe.html?rsz=large&format=300x250&ned=us&hl=en&q=Swainsboro&element=true" scrolling="no" allowtransparency="true"></iframe> Hello. I have a table with td elements containing numbers in one row and td elements containing textareas in the second row like this: http://motionsroom.com/example.html I want to find an easy way for the user to click, draw a rectangle around or whatever around any several numbers so that they they would be put in a single td element instead of two or three (so we would have: "49 and 12" as the new value) and then the textareas below would also merge. Ideally, I would like to have a rectangle like in RTS games but then I would settle on whatever is easy. Is there any way I could do that? Thanks! i want to add a tooltip----click to copy to the Copy To Clipboard... box like this site(http://www.retailmenot.com). the yellow part with a Scissor. but when i used jquery to add it. it doesn't work. why? i test it on this site: Quote: http://bowser.effectgames.com/~jhuck...rd/test10.html Code: $(document).ready(function(){ $("#d_clip_container").hover( function () { $(this).append($('<span class="tip">click to copy</span>')); }, function () { $(this).find("span:last").remove(); }); }) i have added the jquery library. The reason of the tooltip can't work maybe the copied text is wrapped by the flash, but this site (retailmenot.com) can do. i don't know why? how to do it? thank you. Fairly new the javascript, as in only been tinkering around for about a day. So forgive me if this is a simple question. At the moment I have the following function for handling events such as onclick, mouseover, mouseout. Code: function switcher(action, img){ switch(action){ case "hover": //mouse is on image document.imgSeat.src = "images/hover.gif"; break; case "click": //mouse has clicked image document.imgSeat.src = "images/click.gif"; break; default: //mouse elsewhere document.imgSeat.src = "images/defaulter.gif"; break; } } And the html the function refers to Code: <body> <div id="imagesholder"> <a href="#nerf"><img border="0" id="seat0" src="images/available.gif"></a> </div> </body> What im trying to do change my function so that instead of it being hard coded for the id "imgSeat" i can use the id passed through the parameter "img" instead. However I seem to be banging my head against the wall. I've tried using the following Code: document.getElementById(img).src = "images/available.gif"; //no error, just does nothing //where img is "0" instead of "seat0" document.seat[img].src = "images/available.gif"; //error: document.seat is undefined Would be extremely greatful if someone should push me in the right direction or show me what im doing wrong. Hi people, I'm a novice in javascript and have no clue how to get get the following logic through in a form. Any help will be greatly appreciated. I have searched the forums and looked at a few similar script but can't make out head and tail of it Sorry if this is a oft repeated question. Here is the form I need, the post method is email : Name (txtfield) DOB (Date) Address (txtarea) Programme (Select list) : Options : Programme1, Programme2, Programme3 Date (Select list) : options : 10/10/2009 to 12/09/2009 15/10/2009 to 16/10/2009 Venue : Mainland Harvey Waterloo Time : 9am - 12 noon 1 pm - 3 pm 3 pm - 5 pm Here is the Logic : Date : Conditions If Programme1 is selected then date options 10/10/2009 to 12/09/2009 and 15/10/2009 to 16/10/2009 should both be selectable. If Programme2 is selected then date options 10/10/2009 to 12/09/2009 and 15/10/2009 to 16/10/2009 should both be selectable. If Programme3 is selected then date option 15/10/2009 to 16/10/2009 should auto selected and greyed out so that user don't have to select this. Venue : Conditions If Programme = Programme1 then all the venues should be selectable. If Programme = Programme2 and date = 10/10/2009 to 12/09/2009 then all the venues should be selectable. If Programme = Programme2 and date = 15/10/2009 to 16/10/2009 then only venues Harvey and Waterloo should be selectable. If Programme = Programme3 and date = 15/10/2009 to 16/10/2009 then only venue Waterloo should be selectable.... in fact venue Waterloo should be auto selected and greyed out so that user cannot change it. Time :Conditions : Always should be default selection and greyed out If Programme = Programme1 and venue is any one of Mainland, Harvey, Waterloo then the time should default to 9 am - 12 noon. If Programme = Programme2, Date = 10/10/2009 to 12/09/2009 and venue is any one of three then, the time should default to 1 pm - 3 pm. If Programme = Programme2, Date = 15/10/2009 to 16/10/2009 and venue is one of Harvey or Waterloo then the time should default to 1 pm - 3 pm If Programme = Programme3, Date = 15/10/2009 to 16/10/2009 and venue = Waterloo then the default time should be 3 pm to 5 pm Sorry for the long post and so many conditions. I'm trying to get a hang of how to go about doing this. This looks a pretty complicated logic but if you can point me in the right direction I'm sure I will get my head around this. Thanks for having a look and thanks in advance for any help. Cheers Hi. I am very new to javascript, so I might not even be wording my question right, but I am going to try and be as concise and specific as possible. I am using jquery on my website- the galleria plugin- to make a slideshow. you can see the completed show he http://www.pauljameswilliams.com/demo2a.html This slideshow will be one of three on my website. Each slide show will opperate the same exact way.I have built in tabbed navifation, and the slideshows will all be accessable under the "portfolio" tab by clicking on their corresponding links. check out the site he http://www.pauljameswilliams.com/portfolio.html As it is I have one slideshow up, although not yet connected to the corresponding link, but the images won't load. My guess is that because the div tag is hidden that the contents don't load propperly and I need the contents to load when the corresponding div tag that it is contained in becomes visible but I don't know how to do that. this is the javascript that I have written to show/hide the <div> tags where the content will live. Three slide shows will live in content_2 and show/hide when the corresponding button is pressed. Code: function tabSwitch(new_tab, new_content) { document.getElementById('content_1').style.display = 'none'; document.getElementById('content_2').style.display = 'none'; document.getElementById('content_3').style.display = 'none'; document.getElementById('content_4').style.display = 'none'; document.getElementById(new_content).style.display = 'block'; document.getElementById('btn_1').className = ''; document.getElementById('btn_2').className = ''; document.getElementById('btn_3').className = ''; document.getElementById('btn_4').className = ''; document.getElementById(new_tab).className = 'current'; } thank you- I am really stuck. i promise, i am actually learning javascript, I'm not just trying to get other people to do my work for me. Hi all, I am looking for a script that I can only describe. Often, in facebook, when a new window opens there is only the first few lines of text visible followed by a few dots with an invitation to "read more". Once clicked the additional text expands and becomes visible. I don't even know what this behavior is called so it's hard to get started. Any help or pointers in the right direction will be much appreciated. Anita. Cape Town. Hello, all. I have a script that toggles an element's style between display block and display none based on an onclick event. It's being implemented in a content management system (WordPress) so it has some dynamic post ID's assigned to it. I have tried editing it to toggle the variable "type" so that I can have the class of the div change with the rest of the variables being swapped during the toggle, but no matter what I've changed I can't seem to get it to update the variable when someone clicks on the link with the onclick event. Everything else works perfectly, content is shown and hidden when you click the link, I just can't get the "type" variable to switch. I think it's something to do with the JavaScript function itself (it looks to me like it's only looking at 4 variables and this new one would be a new variable that's being toggled). Below is the code. How can I get the type variable to update like the others (hidden_css, tmp_text, more_text, less_text)? Code: /*-----------------------------------------------------------------------------------*/ // Show Hide Posts /*-----------------------------------------------------------------------------------*/ ### Function: Enqueue JavaScripts add_action('wp_enqueue_scripts', 'showhide_scripts'); function showhide_scripts() { wp_enqueue_script('jquery'); } ### Function: Short Code For Inserting Show/Hide Into Post add_shortcode('showhide', 'showhide_shortcode'); function showhide_shortcode($atts, $content = null) { // Variables $post_id = get_the_id(); // Extract ShortCode Attributes extract(shortcode_atts(array( 'type' => 'show', 'more_text' => __('View Full Post'), 'less_text' => __('Close Post'), 'hidden' => 'yes' ), $atts)); // Determine Whether To Show Or Hide Content $hidden_css = 'display: none;'; if($hidden == 'no') { $hidden_css = 'display: block;'; $type = 'hide'; $tmp_text = $more_text; $more_text = $less_text; $less_text = $tmp_text; } // Format HTML Output $output = '<div id="'.$type.'-content-'.$post_id.'" class="'.$type.'-content" style="'.$hidden_css.'">'.$content.'</div>'; $output .= '<div class="'.$type.'-link"><a href="#" onclick="showhide_toggle(\''.$type.'\', '.$post_id.', \''.esc_js($more_text).'\', \''.esc_js($less_text).'\'); return false;"><span id="'.$type.'-toggle-'.$post_id.'">'.$more_text.'</span></a></div>'; return $output; } ### Function: Add JavaScript To Footer add_action('wp_footer', 'showhide_footer'); function showhide_footer() { echo '<script type="text/javascript">'."\n"; echo '/* <![CDATA[ */'."\n"; echo 'function showhide_toggle(a,b,c,d){jQuery("#"+a+"-content-"+b).toggle();jQuery("#"+a+"-toggle-"+b).text(jQuery("#"+a+"-toggle-"+b).text()==c?d:c)};'."\n"; echo '/* ]]> */'."\n"; echo '</script>'."\n"; } I need to highlight rows in a dropdownlist. I need to do this inside a function. I have a textbox filled with the indexes of the rows which need to be highlighted - e.g. by changing the background colour to blue. This is my function: function HighlightSelection() { var myList = document.getElementById('dropdown'); var myString = document.getElementById('textbox').value; var listitem; if (myString.length>0){ var mySplitResult = myString.split(";"); var thisInx; for (i = 0; i < mySplitResult.length; i++) { thisInx = mySplitResult[i] listitem = myList.options[thisInx]; // listitem.style.color='red'; } } } the index (thisInx) is correct - but setting its color does not work. |