JavaScript - Show Results In A Text Box
hi,
the yahoo function below is for dragging a box around teh screen Code: (function() { var Dom = YAHOO.util.Dom, Event = YAHOO.util.Event, dd1, dd2, dd3; YAHOO.example.DDRegion = function(id, sGroup, config) { this.cont = config.cont; YAHOO.example.DDRegion.superclass.constructor.apply(this, arguments); }; YAHOO.extend(YAHOO.example.DDRegion, YAHOO.util.DD, { cont: null, init: function() { //Call the parent's init method YAHOO.example.DDRegion.superclass.init.apply(this, arguments); this.initConstraints(); Event.on(window, 'resize', function() { this.initConstraints(); }, this, true); }, initConstraints: function() { //Get the top, right, bottom and left positions var region = Dom.getRegion(this.cont); //Get the element we are working on var el = this.getEl(); //Get the xy position of it var xy = Dom.getXY(el); //Get the width and height var width = parseInt(Dom.getStyle(el, 'width'), 10); var height = parseInt(Dom.getStyle(el, 'height'), 10); //Set left to x minus left var left = xy[0] - region.left; //Set right to right minus x minus width var right = region.right - xy[0] - width; //Set top to y minus top var top = xy[1] - region.top; //Set bottom to bottom minus y minus height var bottom = region.bottom - xy[1] - height; //Set the constraints based on the above calculations this.setXConstraint(left, right); this.setYConstraint(top, bottom); } }); I would like to show the final TOP and LEFT results in textboxes onMouseUP?! thanks in advance! Similar Tutorialsview the rest of my comments works on the first page but when i extend the search results the rest of the view comments wont expand. click View all 3 comments and it will show all comments then click more button try to click the view all comments on the next comment and nothing happens but the screen jumping up to the top. http://www.runningprofiles.com/membe...ll_Script.php# Why is this?? What do i need to do to fix it? PHP 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> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>9lessons Applicatio Demo</title> <link href="frame.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script> <script type="text/javascript" src="jquery.oembed.js"></script> <script type="text/javascript"> $(function() { $('.more').live("click",function() { var ID = $(this).attr("id"); if(ID) { $("#more"+ID).html('<img src="moreajax.gif" />'); $.ajax({ type: "POST", url: "http://www.runningprofiles.com/members/shout/data/ajax_more.php", data: "lastmsg="+ ID, cache: false, success: function(html){ $("ol#updates").append(html); $("#more"+ID).remove(); // removing old more button } }); } else { $(".morebox").html('The End');// no results } return false; }); }); $(function() { $(".view_comments").click(function() { var ID = $(this).attr("id"); $.ajax({ type: "POST", url: "../viewajax.php", data: "msg_id="+ ID, cache: false, success: function(html){ $("#view_comments"+ID).prepend(html); $("#view"+ID).remove(); $("#two_comments"+ID).remove(); } }); return false; }); }); $(function() { $(".comment_button").click(function() { var element = $(this); var boxval = $("#content").val(); var dataString = 'content='+ boxval; if(boxval=='') { alert("Please Enter Some Text"); } else { $("#flash").show(); $("#flash").fadeIn(400).html('<img src="ajax.gif" align="absmiddle"> <span class="loading">Loading Update...</span>'); $.ajax({ type: "POST", url: "update_ajax.php", data: dataString, cache: false, success: function(html){ $("ol#update").prepend(html); $("ol#update li:first").slideDown("slow"); document.getElementById('content').value=''; $('#content').value=''; $('#content').focus(); $("#flash").hide(); $("#expand_url").oembed(boxval); } }); } return false; }); //comment slide $('.comment').live("click",function() { var ID = $(this).attr("id"); $(".fullbox"+ID).show(); $("#c"+ID).slideToggle(300); return false; }); //commment Submint $('.comment_submit').live("click",function() { var ID = $(this).attr("id"); var comment_content = $("#textarea"+ID).val(); var dataString = 'comment_content='+ comment_content + '&msg_id=' + ID; if(comment_content=='') { alert("Please Enter Comment Text"); } else { $.ajax({ type: "POST", url: "comment_ajax.php", data: dataString, cache: false, success: function(html){ $("#commentload"+ID).append(html); document.getElementById("textarea"+ID).value=''; $("#textarea"+ID).focus(); } }); } return false; }); // Delete Wall Update $('.delete_update').live("click",function() { var ID = $(this).attr("id"); var dataString = 'msg_id='+ ID; var parent=$("#bar"+ID); jConfirm('Are you sure you want to delete this message?', 'Confirmation Dialog', function(r) { if(r==true) { $.ajax({ type: "POST", url: "delete_comment.php", data: dataString, cache: false, success: function(html){ $("#comment"+ID).slideUp(); } }); } return false; }); return false; }); }); </script> <style type="text/css"> body { font-family:Arial, Helvetica, sans-serif; font-size:12px; } .update_box { background-color:#D3E7F5; border-bottom:#ffffff solid 1px; padding-top:3px } a { text-decoration:none; color:#d02b55; } a:hover { text-decoration:underline; color:#d02b55; } *{margin:0;padding:0;} ol.timeline {list-style:none;font-size:1.2em;}ol.timeline li{ display:none;position:relative; }ol.timeline li:first-child{border-top:1px dashed #006699;} .delete_button { float:right; margin-right:10px; width:20px; height:20px } .cdelete_button { float:right; margin-right:10px; width:20px; height:20px } .feed_link { font-style:inherit; font-family:Georgia; font-size:13px;padding:10px; float:left; width:350px } .comment { color:#0000CC; text-decoration:underline } .delete_update { font-weight:bold; } .cdelete_update { font-weight:bold; } .post_box { height:55px;border-bottom:1px dashed #006699;background-color:#F3F3F3; width:499px;padding:.7em 0 .6em 0;line-height:1.1em; } #fullbox { margin-top:6px;margin-bottom:6px; display:none; } .comment_box { display:none;margin-left:90px; padding:10px; background-color:#d3e7f5; width:300px; height:50px; } .comment_load { margin-left:90px; padding:10px; background-color:#d3e7f5; width:300px; height:30px; font-size:12px; border-bottom:solid 1px #FFFFFF; } .text_area { width:290px; font-size:12px; height:30px; } #expand_box { margin-left:90px; margin-top:5px; margin-bottom:5px; } embed { width:200px; height:150px; } *{ margin:0px; padding:0px } ol.timeline { list-style:none } ol.timeline li { position:relative; border-bottom:1px #dedede dashed; padding:8px; } .morebox { font-weight:bold; color:#333333; text-align:center; border:solid 1px #333333; padding:8px; margin-top:8px; margin-bottom:8px; -moz-border-radius: 6px; -webkit-border-radius: 6px; } .morebox a{ color:#333333; text-decoration:none} .morebox a:hover{ color:#333333; text-decoration:none} #container{margin-left:60px; width:580px } </style> </head> <body> <?php include '../../../settings.php'; ?> <div align="center"> <table cellpadding="0" cellspacing="0" width="500px"> <tr> <td> <div align="left"> <form method="post" name="form" action=""> <table cellpadding="0" cellspacing="0" width="500px"> <tr><td align="left"><div align="left"> <h3>What are you doing?</h3></div></td></tr> <tr> <td style="padding:4px; padding-left:10px;" class="update_box"> <textarea cols="30" rows="2" style="width:480px;font-size:14px; font-weight:bold" name="content" id="content" maxlength="145" ></textarea><br /> <input type="submit" value="Update" id="v" name="submit" class="comment_button"/> </td> </tr> </table> </form> </div> <div style="height:7px"></div> <div id="flash" align="left" ></div> <ol id="update" class="timeline"> </ol> <ol class="timeline" id="updates"> <div id='old_updates'> <?php $small=mysql_query("select * from messages2 order by msg_id desc LIMIT 5"); while($r=mysql_fetch_array($small)) { $id=$r['msg_id']; $msg=$r['message']; ?> <div align="left" class="post_box"> <span style="padding:10px"><?php echo $msg.'....'.$id; ?> </span> </div> <?php //Here $id is main message msg_id value. $csql=mysql_query("select * from comments where msg_id_fk='$id' order by com_id "); $array = mysql_fetch_assoc($csql); $comment_count=mysql_num_rows($csql); if($comment_count>2) { $second_count=$comment_count-2; ?> <div class="comment_ui" id="view<?php echo $id; ?>"> <a href="#" class="view_comments" id="<?php echo $id; ?>">View all <?php echo $comment_count; ?> comments</a> </div> <?php } ?> <div id="view_comments<?php echo $id; ?>"></div> <div id="two_comments<?php echo $id; ?>"> <table width="80%"> <?php $small2=mysql_query("select * from comments where msg_id_fk='$id' order by com_id limit 2 "); while($rowsmall22=mysql_fetch_array($small2)) { $c_id=$rowsmall22['com_id']; $comments=$rowsmall22['comment']; ?> <div class="comment_actual_text"> <tr> <td style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-BOTTOM: black 1px solid" valign="top"> <table style="WIDTH: 100%; BORDER-COLLAPSE: collapse" align="left"> <tr> <td width="5%" style="VERTICAL-ALIGN: middle; TEXT-ALIGN: center"><img style="WIDTH: 30px; HEIGHT: 30px" alt="srinivas" src="http://www.gravatar.com/avatar.php?gravatar_id=7a9e87053519e0e7a21bb69d1deb6dfe" border="1" /></td> <td style="VERTICAL-ALIGN: top; TEXT-ALIGN: left"> <strong>Jarratt</strong> <?php echo $comments; ?> <br /><span style="COLOR: #a9a9a9">10 min ago - ID = <?php echo $c_id.'...'.$id;?> </span></td> </tr> </table><br /> </td> </tr> </div> <?php } ?> </table> </div> <?php } ?> </ol> <div id="more<?php echo $id; ?>" class="morebox"> <a href="#" class="more" style='display:block;width:100%;' id="<?php echo $id; ?>">more <?php echo $id; ?></a> </div> </div> </td> </tr> </table> </div> </body> </html> if it help here is ajax_more.php PHP Code: <?php include("../../../settings.php"); if(isSet($_POST['lastmsg'])) { $lastmsg=$_POST['lastmsg']; $lastmsg=mysql_real_escape_string($lastmsg); $small=mysql_query("select * from messages2 WHERE msg_id<'$lastmsg' order by msg_id desc LIMIT 2"); while($r=mysql_fetch_array($small)) { $id=$r['msg_id']; $msg=$r['message']; ?> <div align="left" class="post_box"> <span style="padding:10px"><?php echo $msg.'....'.$id; ?> </span> </div> <?php //Here $id is main message msg_id value. $csql=mysql_query("select * from comments where msg_id_fk='$id' order by com_id "); $array = mysql_fetch_assoc($csql); $comment_count=mysql_num_rows($csql); if($comment_count>2) { $second_count=$comment_count-2; ?> <div class="comment_ui" id="view<?php echo $id; ?>"> <a href="#" class="view_comments" id="<?php echo $id; ?>">View all <?php echo $comment_count; ?> comments</a> </div> <?php } ?> <div class="comments" id="view_comments<?php echo $id; ?>"></div> <div id="two_comments<?php echo $id; ?>"> <table width="50%"> <?php $small2=mysql_query("select * from comments where msg_id_fk='$id' order by com_id limit 2 "); while($rowsmall22=mysql_fetch_array($small2)) { $c_id=$rowsmall22['com_id']; $comments=$rowsmall22['comment']; ?> <div class="comment_actual_text"> <tr> <td style="BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-BOTTOM: black 1px solid" valign="top"> <table style="WIDTH: 100%; BORDER-COLLAPSE: collapse" align="left"> <tr> <td width="5%" style="VERTICAL-ALIGN: middle; TEXT-ALIGN: center"><img style="WIDTH: 30px; HEIGHT: 30px" alt="srinivas" src="http://www.gravatar.com/avatar.php?gravatar_id=7a9e87053519e0e7a21bb69d1deb6dfe" border="1" /></td> <td style="VERTICAL-ALIGN: top; TEXT-ALIGN: left"> <strong>Jarratt</strong> <?php echo $comments; ?> <br /><span style="COLOR: #a9a9a9">10 min ago - ID = <?php echo $c_id.'...'.$id;?> </span></td> </tr> </table><br /> </td> </tr> </div> <?php } ?> </table> </div> <?php } ?> <div id="more<?php echo $id; ?>" class="morebox"> <a href="#" class="more" style='display:block;width:100%;' id="<?php echo $id; ?>">more <?php echo $id; ?></a> </div> <?php } ?> Hi need a bit of expert help with some thing i am trying to achive but cant find any code on line. all i want to do is to have a list of items in a div box on the left of the screen and when i click on one of them it shows a div box with the related text on the right side of screen in the second div box and hides any previouse showing divs on the right. Thanks Ralph Ok, came up with a work around to my previous problem, however I now have a result that I cannot explain. Here is the code: Code: <FORM NAME="Calc"> <TABLE BORDER=4> <TR> <TD> <INPUT TYPE="text" onkeydown="if (event.keyCode == 13) {Calc.Input.value = eval(Calc.Input.value)}" NAME="Input" Size="26"> <br> </TD> </TR> <TR> <TD> <INPUT TYPE="button" NAME="one" VALUE=" 1 " OnClick="Calc.Input.value += '1'"> <INPUT TYPE="button" NAME="two" VALUE=" 2 " OnCLick="Calc.Input.value += '2'"> <INPUT TYPE="button" NAME="three" VALUE=" 3 " OnClick="Calc.Input.value += '3'"> <INPUT TYPE="button" NAME="plus" VALUE=" + " OnClick="Calc.Input.value += ' + '"> <br> <INPUT TYPE="button" NAME="four" VALUE=" 4 " OnClick="Calc.Input.value += '4'"> <INPUT TYPE="button" NAME="five" VALUE=" 5 " OnCLick="Calc.Input.value += '5'"> <INPUT TYPE="button" NAME="six" VALUE=" 6 " OnClick="Calc.Input.value += '6'"> <INPUT TYPE="button" NAME="minus" VALUE=" - " OnClick="Calc.Input.value += ' - '"> <br> <INPUT TYPE="button" NAME="seven" VALUE=" 7 " OnClick="Calc.Input.value += '7'"> <INPUT TYPE="button" NAME="eight" VALUE=" 8 " OnCLick="Calc.Input.value += '8'"> <INPUT TYPE="button" NAME="nine" VALUE=" 9 " OnClick="Calc.Input.value += '9'"> <INPUT TYPE="button" NAME="times" VALUE=" x " OnClick="Calc.Input.value += ' * '"> <br> <INPUT TYPE="button" NAME="clear" VALUE=" C " OnClick="Calc.Input.value = ''"> <INPUT TYPE="button" NAME="zero" VALUE=" 0 " OnClick="Calc.Input.value += '0'"> <INPUT TYPE="button" NAME="DoIt" VALUE=" = " OnClick="Calc.Input.value = eval(Calc.Input.value)"> <INPUT TYPE="button" NAME="div" VALUE=" / " OnClick="Calc.Input.value += ' / '"> <br> </TD> </TR> </TABLE> </FORM> In order to get the 'Enter' button to function the same as pressing the '=' button, I added the keyCode event. Now my problem is that when you press the 'Enter' key, the result is displayed int the 'Input' text field briefly and then is cleared. How can I keep the result static in the text box? I'm very new at JavaScript and I'm trying to get each of the if statements below in a text text box with the result depending on the answer of the equation. However i can't figure out a way to allow the user to click a button to to show the result in a text box. If anyone could help it would be much appreciated. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <script type="text/javascript"> function calculate() { A = document.form1.text2.value B =(parseInt(A ) * 52) D= (parseInt(B ) * 0.015 ) if ( B <= 6000){ tax = 0;} else if (B <= 37001){ tax = (B - 6000) * .15; } else if (B<= 80001){ tax = (B - 37000) * .30 + (37000 - 6000) * .15; } else if (B <= 180001){ tax = (B- 80000) * .37 + (80000- 37000) * .30 + (37000 - 6000) * .15; } else tax = (B - 180000)* .45 + (180000 - 80000 begin_of_the_skype_highlighting**************180000 - 80000******end_of_the_skype_highlighting) * .37 + (80000- 37000) * .30 + (37000 - 6000) * .15;} </script> </HEAD> <BODY> <form name="form1"> Weekly Salary: <INPUT TYPE="TEXT" NAME="text2"> <INPUT TYPE="BUTTON" VALUE="SUBMIT" Onclick="calculate();"> </BODY> </HTML> I am looking for a way to show more or less text. I want to show 600 characters by default and if show more is clicked it will show 600 more characters and then if clicked again shows 600 more untill there are no more characters. I also would like a show less button to collapse the text back to its default 600 characters. I have pages with 5000+ words and this would make reading much easier and make it look nicer. Right now I am using this to show the first 600 chars and when show more is clicked it expands all the way. Code: $(document).ready(function() { var showChar = 600; var ellipsestext = "..."; var moretext = "View more"; var lesstext = "View less"; $('.more').each(function() { var content = $(this).html(); if(content.length > showChar) { var c = content.substr(0, showChar); var h = content.substr(showChar-1, content.length - showChar); var html = c + '<span class="moreelipses">'+ellipsestext+'</span> <span class="morecontent"><span>' + h + ' </span><a rel="nofollow" href="" class="morelink">'+moretext+'</a></span>'; $(this).html(html); } }); $(".morelink").click(function(){ if($(this).hasClass("less")) { $(this).removeClass("less"); $(this).html(moretext); } else { $(this).addClass("less"); $(this).html(lesstext); } $(this).parent().prev().toggle(); $(this).prev().toggle(); return false; }); }); I am looking for any code or this code to be altered to show 600 characters by default and 600 more when show more is clicked and so on. I don't care how it is done, whether it be javascript or jquery or anything I would just like it to work and I have very little knowledge of java and if anyone could help me I would really appreciate it. thanks. Hi Im looking for a way to show hide text box on select option change PHP Code: <select name="letter_type" id="lt"> <option value="Registered">Registered</option> <option selected="selected" value="Unregistered">Unregistered</option></select> <input name="textfield7" id="regty" type="text" accesskey="1" tabindex="1" size="20" /> i wana show that text box if user select "Registered" from select option. any help would be great sorry for language errors. Thanks Hello! I am using this script for showing who is on the air. I would like to know if anyone has an idea how to make this show a picture file instead of text for who is on air. The script is great in that the gmt offset works. I would just rather have it show an image instead of text. Code: <span id = "dj" style="font-size:12px; font-weight:bold; font-family: Tahoma; color: #6600FF;"></span> <script type = "text/javascript"> function display() { var show = "No show scheduled at present"; var GMToffset = -5; // Your current GMT offset, whether Standard or Daylight var now = new Date(); var dy = now.getDay(); // day of week 0-6 now.setHours(GMToffset + now.getHours() + now.getTimezoneOffset() / 60); var hh = now.getHours(); var mn = now.getMinutes(); hh = hh + (mn/60); // minutes expressed as fractions of an hour // The GMT offset ensures that every visitor, regardless of their timezone, will see the schedule // that is appropriate for the site owner's local time. // Tip - for testing purposes you can put here //dy = 5; //hh = 9.25; // or whatever to check that the right show appears at that day/time. if (dy >=1 && dy <=5) { // days in Javascript are 0 Sunday - 6 Saturday if (hh >=0 && hh <3) {show = "Matt Knight at Night"} if (hh >=3 && hh <9) {show = "Non-Stop Music"} if (hh >=9 && hh <17) {show = "The Matt Knight Show"} if (hh >=17 && hh <18) {show = "Saving the 70's with Mike Walker"} if (hh >=18 && hh <20) {show = "Non-Stop Music"} if (hh >=20 && hh <21) {show = "Eighties at Eight with Rockin' Ron"} if (hh >=21 && hh <24) {show = "Matt Knight at Night"} } if (dy >= 2 && dy <=5) { if (hh >=0 && hh <3) {show = "Matt Knight at Night"} if (hh >=3 && hh <9) {show = "Non-Stop Music"} if (hh >=9 && hh <18) {show = "The Matt Knight Show"} if (hh >=18 && hh <19) {show = "Non-Stop Music"} if (hh >=19 && hh <20) {show = "Non-Stop Music"} if (hh >=20 && hh <21) {show = "Eighties at Eight with Rockin' Ron"} if (hh >=21 && hh <24) {show = "Hank and Jim Show"} } if (dy >= 3 && dy <=5) { if (hh >=0 && hh <3) {show = "Hank and Jim Show"} if (hh >=3 && hh <9) {show = "Non-Stop Music"} if (hh >=9 && hh <18) {show = "The Matt Knight Show"} if (hh >=18 && hh <19) {show = "Non-Stop Music"} if (hh >=19 && hh <20) {show = "Non-Stop Music"} if (hh >=20 && hh <21) {show = "Eighties at Eight with Rockin' Ron"} if (hh >=21 && hh <24) {show = "The Pete Sayek Show"} } if (dy >= 4 && dy <=5) { if (hh >=0 && hh <1) {show = "The Pete Sayek Show"} if (hh >=1 && hh <9) {show = "Non-Stop Music"} if (hh >=9 && hh <15) {show = "The Matt Knight Show"} if (hh >=15 && hh <18) {show = "Stafford's World - Mark Stafford"} if (hh >=18 && hh <19) {show = "Non-Stop Music"} if (hh >=19 && hh <20) {show = "Non-Stop Music"} if (hh >=20 && hh <21) {show = "Eighties at Eight with Rockin' Ron"} if (hh >=21 && hh <24) {show = "Matt Knight at Night"} } if (dy == 5) { if (hh >=0 && hh <3) {show = "Matt Knight at Night"} if (hh >=3 && hh <9) {show = "Non-Stop Music"} if (hh >=9 && hh <15) {show = "The Matt Knight Show"} if (hh >=15 && hh <18) {show = "Beachey Live from the U.K."} if (hh >=18 && hh <19) {show = "Catt Live from California"} if (hh >=19 && hh <20) {show = "Catt Live from California"} if (hh >=20 && hh <21) {show = "Catt Live from California"} if (hh >=21 && hh <23) {show = "Psychedelic Detached Garage - George Cannon"} if (hh >=23 && hh <24) {show = "Matt Knight at Night"} } if (dy == 6) { // Saturday Note the two = signs to mean equals if (hh >=0 && hh <10) {show = "Non-Stop Music"} if (hh >= 10 && hh <13) {show = "Stafford's World - Mark Stafford"} if (hh >=13 && hh <13.30) {show = "Cheeze Pleeze - Snarfdude and Dafodil"} if (hh >=13.30 && hh <20) {show = "Non-Stop Music"} if (hh >=20 && hh <23) {show = "Flashback with Matt Knight"} if (hh >=23 && hh <24) {show = "Imagination Theater"} } //End of Saturday Shows if (dy == 0) { //Sunday Shows if (hh >= 0 && hh <10) {show = "Non-Stop Music"} if (hh >=10 && hh <11) {show = "Motown Memories with Tom Fallon"} if (hh >=11 && hh <22) {show = "Non-Stop Music"} if (hh >=22 && hh <23) {show = "Imagination Theater"} if (hh >=23 && hh <24) {show = "Non-Stop Music"} } // End of Sunday Shows var a = "" + show + " \u00A0 \u00A0 \u00A0 \u00A0 "; // spaces must be separted by Unicode spaces to prevent collapse document.getElementById("dj").innerHTML = a; setTimeout("display()", 60000); // update every 60 seconds } </script> Hi, my code below shows 2 radio buttons, when you click on one, it shows the content from a div, I would like to show the content of the checked radio button by default, at teh moment, they don't show any content until they are clicked! Code: <html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("input[name$='group1']").click(function() { var test = $(this).val(); $("div.desc").hide(); $("#"+test).show(); }); }); </script> </head> <body> <input type="radio" name="group1" value="AvailableMon" checked>Available <input type="radio" name="group1" value="Unavailable">Unavailable <style type="text/css"> .desc { display: none; } </style> <div id="AvailableMon" class="desc">Available</div> <div id="Unavailable" class="desc">Unavailable</div> </body> </html> udayanga0727@yahoo.comI need to a code to do the following. There is a Text Area that user can enter text. assume that user enter something and put a dot Following values should be populate in a drop down at the place where dot locate . -Hello -Hi _Test like when we get the string object using Net Beans IDE and when we put "Object." , drop down will be displayed with available methods for that particular object. idea is to build a editor using java script. can any one help me on this? Hi, I have been here before and was responded to quickly with professional results, and you guys have managed to bring me back! Anyway, I am horrible at coding, and I need to know how to write this, basically when the page loads a random number is generated <script type="text/javascript"> window.onload=function() { var random = Math.rand() * (6 + 1); Then later in the page if (random = 1) { document.write("1") //I'm not sure if thats the code to show simple text, but I'm pretty sure it is, correct me if I'm wrong } if (random = 2) { document.write("2") } if (random = 3) { document.write("3") } and so on so forth. I will be changing the numbers in the script to my accord and use of the script, so please use the //notes to mark where and what things is, with a brief explanation, so I don't have to unscramble the code to find out what it is. Thanks fellow nerds! Hey, I've got the following problem: I want to edit this code: <a name="fb_share" type="button_count" href="http://www.facebook.com/sharer.pp"><img src="http://blog.bastian.info/wp-content/uploads/2010/02/facebook-glossy-logo.jpg"></a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script> So that after they click the button that triggers the facebook share, 7 seconds after they click it, some text appear and the picture they click disappears. Cheers I can I take a code like this: Code: <script language="javascript"> function toggle() { var ele = document.getElementById("toggleText"); var text = document.getElementById("displayText"); if(ele.style.display == "block") { ele.style.display = "none"; text.innerHTML = "show"; } else { ele.style.display = "block"; text.innerHTML = "hide"; } } </script> <a href="javascript:toggle();" id="displayText">Show/Hide</a> <div id="toggleText" style="display: none;">This is Hidden Text</div> But make it so you see "Show" before you click, then change the text to "Hide" once you click the link? Hello, I have this search box form with 2 select boxes : Code: <form action="search.php" method="get"> <select name="RingType"> <option value="Nose">Nose</option> <option value="Toe">Toe</option> <option value="Belly">Belly</option> </select> <select name="NecklaceType"> <option value="gold">Gold</option> <option value="diamond">diamond</option> <option value="pearl">pearl</option> </select> <input type="text" size="60" name="keywords" /> <input class="submit" type="submit" value="Search" /> </form> For example, when a visitor selects "Belly" RingType, I want "Belly Ring" to appear in the search box. and when the visitor selects "pearl" NecklaceType, I want "pearl necklace" to appear in the search box. if the visitor first selects "Belly" RingType, and then selects "pearl" NecklaceType, I want "Belly Ring pearl necklace" to appear in the search box. After making his selections in the search box, if he types something in the search box, it should add to what is already there in the search box. Or, if he first types something in the search box for example, "jewelry" and then selects "pearl" in the necklacetype select box, the search box should show : "jewelry pearl necklace" Can you please show how to do this ? Thanks a lot. Apologies if this question has been asked a million times. I am fairly new to this game, have got my head around html & css and now it's time to add a little interactivity... BUT i've hit my first brick wall... I am setting up a (big) panel of text which i wish to present in a more reasonable fashion by hiding the content and only showing the headers. Got the Hide:Show function working ok as shown below, but I am stuck on my next requirement... Basically The hidden text will show and hide when told by clicking on the relevant header - but i wish to hide the text in a visible area when clicking on a new header. I have: Header1 (on click) | bodycopy - visible Header2 | bodycopy - hidden leading to: Header1 | bodycopy - visible Header2 (on click) | bodycopy - visible But i'm after: Header1 (on click) | bodycopy - visible Header2 | bodycopy - hidden leading to: Header1 | bodycopy - hidden Header2 (on click) | bodycopy - visible Here is the code i'm using: 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> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> <script type="text/javascript"> <!-- function toggle_visibility(id) { var e = document.getElementById(id); if(e.style.display == 'block') e.style.display = 'none'; else e.style.display = 'block'; } //--> </script> <style type="text/css"> <!-- #slide_text1 { font-family: Arial, Helvetica, sans-serif; font-size: 0.8em; line-height: 1.4em; color: #000; margin-bottom: 15px; } #slide_text2 { font-family: Arial, Helvetica, sans-serif; font-size: 0.8em; line-height: 1.4em; color: #000; margin-bottom: 15px; } .h3_toggle { font-family: Arial, Helvetica, sans-serif; font-size: 1em; line-height: 1.2em; color: #999; text-decoration: none;} .h3_toggle:hover { font-family: Arial, Helvetica, sans-serif; font-size: 1em; line-height: 1.2em; color: #333; text-decoration: none; cursor: crosshair; } --> </style> </head> <body> <h3><a class="h3_toggle" onclick="toggle_visibility('slide_text1');">First heading </a> </h3> <div style="display:none;"" id="slide_text1">Body copy content to be hidden lives in this area</div> <h3><a class="h3_toggle" onclick="toggle_visibility('slide_text2');">Second heading</a> </h3> <div style="display:none;"" id="slide_text2">Body copy content to be hidden lives in this area</div> </body> </html> Any help from you all is very much welcome (or if this has been answer before - a nudge in the direction of the answer please) Thanx, Ozwaldo. Hi, Can somebody help me with the coding. I have a long list of events and I want somebody to be able to select one of those events & there will be a text box that shows the address pertaining to the event selected. Exactly how this website did he http://svacpa.com/live-webinars-and-...-registration/ Please advise! Thanks -------------- Code: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>MySite Registration</title> </head> <body> <div style="width: 900px"> <p>Registration</P <form method="post" action="http://mysite.com" name="Registration"> <label id="Label1">First Name</label><input name="FirstName" type="text" /><br /><br /> <label id="Label1">Last Name</label><input name="LastName" type="text" /><br /><br /> <label id="Label2">Title</label><input name="Title" type="text" /><br /><br /> <label id="Label3">Company</label><input name="Company" type="text" /><br /><br /> <label id="Label5">Email</label><input name="Email" type="text" /><br /><br /> <label id="Label4">Phone</label><input name="Phone" type="text" /><br /><br /> <input name="Radio1" type="radio" class="input" /><label id="Label1" class="lableinput">San Francisco, Wednesday, March 16 Breakfast</label><br /><br /> <input name="Radio1" type="radio" class="input" /><label id="Label1" class="lableinput">San Francisco, Wednesday, March 16 Lunch</label><br /><br /> <input name="Radio1" type="radio" class="input" /><label id="Label1" class="lableinput">Santa Clara, Friday, March 18 Lunch</label><br /><br /> <input name="Radio1" type="radio" class="input" /><label id="Label1" class="lableinput">Santa Clara, Friday, March 18 Dinner</label><br /><br /> <br /> <input name="Submit1" type="submit" value="Register Now" class="submit" /> <input type="hidden" name="redirect" value="http://www.mysite.com/regsuccess.html"/> <input type="hidden" name="recipient" value="me@mysite.com"/> <input type="hidden" name="required" value="FirstName, LastName, Email, Phone"/> <input type="hidden" name="missing_field_redirect" value="http://mysite.com/regerror.html"/> </form> </div> </body> </html> Hello all, firstly I'm trying to make a button which you press then it will create a text box, I'v seen scripts that hide / show a text box, but every time you press this link I want it to display another text box. Example Below. I'v created what I want in HTML, but when a player clicks the link it needs to display a new box everytime. Code: <input type='text' size='50' id='jsuniquecode'> This is my html box which I would like to show. thanks! I'm sure the code must not be that different to the ones which show / hide an item. Thanks for reading my thread and it would be much appreciated if somebody could help me figure out where I should start etc. Thanks. Code: <html> <title> random!!</title> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.min.js"></script> </head> <body> <div class="one" style="cursor: pointer;"> type1<br/><br/></div><div class="two" style="cursor: pointer;">type2<br/><br/></div><div class="three" style="cursor: pointer;">type3<br/><br/></div> <div class="oneone">atrdjgkhgfyfygfykfyfkygfvkgvkhgv</div><div class="twotwo">hgfihygohgohsgoihgolhgshgoshdgchchj</div><div class="threethree">siucgdiuhsbcohbscjbsidjcksjdnck</div> <script type="text/javascript"> $(document).ready(function() { $('div.twotwo').hide(); $('div.threethree').hide(); $('div.one').toggle(function() { $('div.twotwo').hide(); $('div.threethree').hide(); $('div.oneone').fadeIn('slow'); }, function() { return false; }); $('div.two').toggle(function() { $('div.oneone').hide(); $('div.threethree').hide(); $('div.twotwo').fadeIn('slow'); }, function() { return false; }); $('div.three').toggle(function() { $('div.twotwo').hide(); $('div.oneone').hide(); $('div.threethree').fadeIn('slow'); }, function() { return false; }); }); </script> </body> </html> The following code works perfectly when clicked once in each of the sub divisions(type1, type2, type3) for hide/show. But from the next time onwards we will have to click twice to initiate the hide/show. Can anyone suggest changes to make the code work as desired??.. P.S: sorry if i have made any stupid mistake.. i am quite new to this!! Hi Guys i am a complete novice at ajax or javascript. I have been studying php for a while now and i know that, i am now starting php oop and that going well but i have never done anything like this. Anway i am creating a booking system which at the end of the process asks who supplied your voucher which they then select a supplier. The issue i have is my client wants it so if groupon is selected then an input text box should appear so that the user can input a security code from groupon. So basically it is Code: <select name="supplier" id="supplier"> <option value="">please select supplier</option> <option value="Groupon">Groupon</option> <option value="KGB Deals">KGB Deals</option> <option value="Other">Other</option> </select> So if value="Groupon" then Code: <input type="text" name="security" id="security" /> should appear next to it. Could someone please help me as the page cant refresh as it will lose its data which would have taken the user about 10 minutes to fill out Thanks in advance Hello, I have 2 things I'm trying to figure out. 1. First form on the page has questions with radio buttons. Each radio's value is a number so a score is assessed at the end. 2. Second form on the page is an email the admin form, which duplicates the score in one field. Question: I would like to know how to write the form results to a text area in second form. However, I can't do this for one, and secondly, the value is a number, can I use labels? Here's the code I've 'made up' so far... JS (i know it's wrong) Code: <script LANGUAGE="JavaScript" type="text/javascript"> function display() { message = "<ul><li><b>Question 1: </b>" + document.quizform.Q1.label; message = "<li><b>Question 2: </b>" + document.quizform.Q2.label; message = "<li><b>Question 3: </b>" + document.quizform.Q3.label; message = "<li><b>Question 4: </b>" + document.quizform.Q4.label; message = "<li><b>Question 5: </b>" + document.quizform.Q5.label; message = "<li><b>Question 6: </b>" + document.quizform.Q6.label + "</ul>"; document.write(message); } </script> Form field example: Code: Question 1:<BR> <label for="Yes"><input type="radio" name="Q1" value="0" checked></label>Yes<br> <label for="No"><input type="radio" name="Q1" value="10"></label>No<br> <label for="I don't know"><input type="radio" name="Q1" value="10"></label>I don't know<br> This should be a simple fix.. I hope. JS: Code: //-- This is a really awful script and if it could be re-written by someone who knows what they're doing that would be incredible. window.addEvent('domready', function() { //new event wooooo // -- vertical2 var myVerticalSlide = new Fx.Slide('vertical_slide'); //declaring the variable with the FXSlide property var toggleThis = $('v_toggle'); //toggle variable myVerticalSlide.hide(); //hides the variable off the bat. toggleThis.addEvent('click', function(event){ // uses the type 'click' the id on the link, giving it the following function event.stop(); //Prevents browser from following the link and instead initiates the next line myVerticalSlide.toggle(); //Togles the div declared in the variable VerticalSlide }); }); HTML: Code: <div> <a id="v_toggle" href="#">Question 1</a> <div id="vertical_slide"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> </div> <div> <a id="v_toggle" href="#">Question 2</a> <div id="vertical_slide"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> </div> I'm new to JS (and any programming language, i just know HTML, CSS/SASS) . I tried to make the code as stupid-simple as I could, as you can see with all the comments. The problem is when you click on question1, all the answers show. I just want the answer below the question to show. How can I write this to just show one answer at a time. Any explanation would be a huge help or a point in the right direction would be great help. I'd love to learn how to fix this as opposed to just copying pasting :\ |