|
JavaScript - Selected Help
Hey,
I was wondering if there was something in javascript that could tell if the text is selected. Selected as in when you click and hold your mouse down and go over text. Is there something in javascript to tell if you've selected any text? Thanks. Similar Tutorialslike for example i have text areas named upload1 and upload2 when I click or add input on upload1 a drop down list below upload2 will not change, but when I add input on upload2 the dropdown will select "parts" I'm trying to make a comment script with show/hide divs and are so far OK, but... I want to hide one div when another is activated... Here is what I have so far: Code: <?
for ($q = 1; $q <= 5; $q++) {
echo '<div id="jdivStart'.$q.'" style="padding:0px 0px 0px 0px;width:100%x;">';
echo '<textarea style="color:#999999;" rows=2 cols="66" onfocus="jchange'.$q.'(\'jdiv'.$q.'\');">Write comment</textarea>';
echo '</div>';
echo '<div id="jdiv'.$q.'" style="display:none;">';
echo '<textarea style="color:#999999;" rows=6 cols="66"></textarea>';
echo '</div>';
?>
<script language="javascript" type="text/javascript">
function jchange<? echo $q; ?>(divname) {
var currentShowingDivQ = document.getElementById('jdivStart<? echo $q; ?>');
var objDivQ = document.getElementById(divname);
if (currentShowingDivQ && currentShowingDivQ != objDivQ) {
currentShowingDivQ.style.display = 'none';
}
if(objDivQ.style.display == 'none'){
objDivQ.style.display = 'block';
} else {
objDivQ.style.display = 'none';
}
}
</script>
<?
}
?>
So if I activate the first textbox, then when I activates the second I want to be able to hide the first again... Any help i appreciated :-) Hi All, I am using this code to populate a drop down list from mysql database. I need to pass id and name through this code.but the problem is the value is lost when the page gets refreshed.and it works fine if i pass only name through it. my code is as follows: PHP Code: <?PHP $query=mysql_query("SELECT * FROM client_master WHERE client_status=1");?> <select name='name' onChange='javascript:form_submit();' style='width:80px'> <option value="">-SELECT-</option> <?php while($row=mysql_fetch_array($query)) { $name=$row['client_name']; ?> <option value="<?php echo $row['client_id'] ?>" <?php echo($row['client_name']==$_POST['name'])?'selected':''?>> <?php echo $row[client_name];?> </option> <?php } ?> </select> <script language="javascript"> function form_submit(){ document.gr.submit(); } </script> Hi i can't seem to get a drop downs selected index. This is my drop down box: Code: <select name="queba" id="queeba"> <option value="ban1">Bank1 <option value="ban2">Bank2 <option value="ban3">Bank3 <option value="ban4">Bank4 </select> thanks Hope I can explain this... I have a page with a couple dropdowns - dropdown-1 is for shape, and dropdown-2 is for color. Images appear to match what the user selects. The shape image has a transparent center, so that I can make a color image appear underneath, when they choose that. But to do so, I have to set a default color picture (pic4) appear, so that the shape(pic1) can be seen. The color dropdown works just fine. But if they go back and change the shape, it defaults to the original (pic4) What's a way to script this so it knows not to change pic4 if it's been selected. In other words, as a user I pick "round". It shows me a round circle. I select "orange", to change the circle's color. But I change my mind, I want a square, so I go back and change it, but my square is green again, even though I chose orange. Here's some of what I got. Code:
<script>
function change1(picName,imgName)
{
if (document.images)
{
imgOn=eval(imgName + ".src");
document[picName].src= imgOn;
}
}
<!-- this following is the variable from the form that I want to check. If it's been set, then I want the color image to be left alone -->
function passit2(str)
{document.formsearch1.s2.value=str}
</script>
<!-- this next little bit is what I'm wanting to work on. I want it to know if pic4 has bee selected, and to leave it alone if that has happened. --><a href="javascript:passit('auriculate')" onMouseover="change1('pic1','image2')" onClick="ShowContent('uniqueleaf'); change4('pic2','_auriculate'); ShowContent('uniquename'); change1('pic4','image28'); add_content('auriculate');" onMouseout="change1('pic1','image41');">Auriculate</a></li>
<!-- Here's the bit related directly to pic4. If they have selected this, I don't want it to change when -->
<li id="green"><a href="javascript:passit2('green')" onMouseover="change1('pic3','image28')" onClick="ShowContent('uniquename'); change1('pic4','image28'); add_content2('green');" onMouseout="change1('pic3','image_off');">green</a></li>
<li id="orange"><a href="javascript:passit2('orange')" onMouseover="change1('pic3','image29')" onClick="ShowContent('uniquename'); change1('pic4','image29'); add_content2('orange');" onMouseout="change1('pic3','image_off');">orange</a></li>
<li id="red"><a href="javascript:passit2('red')" onMouseover="change1('pic3','image30')" onClick="ShowContent('uniquename'); change1('pic4','image30'); add_content2('red');" onMouseout="change1('pic3','image_off');">red</a></li>
<li id="blue"><a href="javascript:passit2('blue')" onMouseover="change1('pic3','image31')" onClick="ShowContent('uniquename'); change1('pic4','image31'); add_content2('blue');" onMouseout="change1('pic3','image_off');">blue</a></li>
<li id="purple"><a href="javascript:passit2('purple')" onMouseover="change1('pic3','image32')" onClick="ShowContent('uniquename'); change1('pic4','image32'); add_content2('purple');" onMouseout="change1('pic3','image_off');">purple</a></li>
<li id="purpleblack"><a href="javascript:passit2('purple-black')" onMouseover="change1('pic3','image32')" onClick="ShowContent('uniquename'); change1('pic4','image33'); add_content2('purple black');" onMouseout="change1('pic3','image_off');">purple-black</a></li>
<!-- here's the image that is being changed. Maybe if it's a script that just checks to see if it's transparent.gif to change it, and if it's not, to leave it alone? -->
<IMG SRC="images/leaf_shapes/entire/transparent1.gif" name="pic4" width="250" height="350" border="0">
OK so say I have something like this: <TD> <p>Item A</p> <p>Item B</p> <p>Item C</p> <p>Item D</p> </TD> So TD would be the parent and all of the <P>'s would be childNodes. I want to be able to click on each child and have it alert me its index # relative to the parent node. So 'Item A' should alert "0", 'Item B' - "1", 'Item C' - "2", etc. Thanks in advance. i wud like to grab the values for the selected item in the last combobox n insert it into a form. thanks in advance 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">
// first combo box
data_1 = new Option("1", "$");
data_2 = new Option("2", "$$");
// second combo box
data_1_1 = new Option("11", "-");
data_1_2 = new Option("12", "-");
data_2_1 = new Option("21", "--");
data_2_2 = new Option("22", "--");
data_2_3 = new Option("23", "--");
data_2_4 = new Option("24", "--");
data_2_5 = new Option("25", "--");
// third combo box
data_1_1_1 = new Option("111", "1");
data_1_1_2 = new Option("112", "2");
data_1_1_3 = new Option("113", "3");
data_1_2_1 = new Option("121", "4");
data_1_2_2 = new Option("122", "5");
data_1_2_3 = new Option("123", "6");
data_1_2_4 = new Option("124", "7");
data_2_1_1 = new Option("211", "8");
data_2_1_2 = new Option("212", "9");
data_2_2_1 = new Option("221", "10");
data_2_2_2 = new Option("222", "11");
data_2_3_1 = new Option("231", "12");
data_2_3_2 = new Option("232", "13");
// other parameters
displaywhenempty=""
valuewhenempty=-1
displaywhennotempty="-select-"
valuewhennotempty=0
function change(currentbox) {
numb = currentbox.id.split("_");
currentbox = numb[1];
i=parseInt(currentbox)+1
// I empty all combo boxes following the current one
while ((eval("typeof(document.getElementById(\"combo_"+i+"\"))!='undefined'")) &&
(document.getElementById("combo_"+i)!=null)) {
son = document.getElementById("combo_"+i);
// I empty all options except the first one (it isn't allowed)
for (m=son.options.length-1;m>0;m--) son.options[m]=null;
// I reset the first option
son.options[0]=new Option(displaywhenempty,valuewhenempty)
i=i+1
}
// now I create the string with the "base" name ("stringa"), ie. "data_1_0"
// to which I'll add _0,_1,_2,_3 etc to obtain the name of the combo box to fill
stringa='data'
i=0
while ((eval("typeof(document.getElementById(\"combo_"+i+"\"))!='undefined'")) &&
(document.getElementById("combo_"+i)!=null)) {
eval("stringa=stringa+'_'+document.getElementById(\"combo_"+i+"\").selectedIndex")
if (i==currentbox) break;
i=i+1
}
// filling the "son" combo (if exists)
following=parseInt(currentbox)+1
if ((eval("typeof(document.getElementById(\"combo_"+following+"\"))!='undefined'")) &&
(document.getElementById("combo_"+following)!=null)) {
son = document.getElementById("combo_"+following);
stringa=stringa+"_"
i=0
while ((eval("typeof("+stringa+i+")!='undefined'")) || (i==0)) {
// if there are no options, I empty the first option of the "son" combo
// otherwise I put "-select-" in it
if ((i==0) && eval("typeof("+stringa+"0)=='undefined'"))
if (eval("typeof("+stringa+"1)=='undefined'"))
eval("son.options[0]=new Option(displaywhenempty,valuewhenempty)")
else
eval("son.options[0]=new Option(displaywhennotempty,valuewhennotempty)")
else
eval("son.options["+i+"]=new Option("+stringa+i+".text,"+stringa+i+".value)")
i=i+1
}
//son.focus()
i=1
combostatus=''
cstatus=stringa.split("_")
while (cstatus[i]!=null) {
combostatus=combostatus+cstatus[i]
i=i+1
}
return combostatus;
}
}
//-->
</script>
</head>
<body>
<form>
<select name="combo0" id="combo_0" onChange="change(this);" style="width:200px;">
<option value="value1">-select-</option>
<option value="value2">1</option>
<option value="value3">2</option>
</select>
<BR><BR>
<select name="combo1" id="combo_1" onChange="change(this)" style="width:200px;">
<option value="value1"> </option>
</select>
<BR><BR>
<select name="combo2" id="combo_2" onChange="change(this);" style="width:200px;">
<option value="value1"> </option>
</select>
<BR><BR>
</form>
</body>
</html>
i have a simple form basically....and i want to display a div containing a message when a certain dropdown menu item is selcted... as you will see...i have two divs in my message...one named website design and one named twitter design both set to display none when website design is selected i want the websitemessage div to display when twitter is selected i want the twitter message to display... any thoughts? here is some of the code Code: <form id="contactform" action="contact-submit.php" method="post">
<!-- form fields -->
<div class="form">
<label for="name">Name<em>•</em></label>
<input class="textbox required" type="text" name="name" id="name" /><br />
<label for="email">E-Mail<em>•</em></label>
<input class="textbox required email" type="text" name="email" id="email" /><br />
<label for="subject">What are you interested in?<em>•</em></label>
<select type="text" value="Choose a Service" name="subject" id="subject" onchange="Select(this,'budget',1);"/>
<option selected> -- Select A Design Service --</option>
<option id="website"> Website Design </option>
<option> Twitter </option>
<option> Ning or Tumblr </option>
<option> Flyers </option>
<option> Business Card or Brochure</option>
<option> Album or Mixtape cover</option>
<option>Other</option>
</select><br />
<div id="websitemessage" style="display:none;"><label> Do you already have a Logo to use for this website? </label>
<input style="width:auto;margin-left:10px;" type="radio" name="budget" value="Logo: Yes"> Yes
<input style="width:auto;margin-left:10px;" type="radio" name="budget" value="Logo: Not yet"> Not yet
</input>
</div>
<div id="twittermessage" style="color:#B5B5B5;
display:none;"><SPAN>Twitter Designs start at </SPAN><span style="color:#000;"> $30</SPAN>
</div>
any ideas on what script i would put into the head tags to make that happen? When first loading the page, I want the default select box value to be showing, and change when they select a different value. It works perfect when I select any value, but it's blank on load. I've attached screenshots showing. How can I get it default selected to show "Please Select a Character Class to view more information." Code: <script type = "text/javascript">
function showDetails(which) {
var d = document.getElementById("classDescription");
var s = which.value;
if (s == "Enchantress") {d.innerHTML = "<b>Enchantress</b><br />This character is a magic user. You are weak with attacks, but powerful with magic."}
if (s == "Knight") {d.innerHTML = "<b>Knight</b><br />This character is a physical user. You are powerful with attacks, but weak against magic."}
if (s == "Archer") {d.innerHTML = "<b>Archer</b><br />This character is a unique user. You can attack twice, but can't equip shields."}
if (s == "Thief") {d.innerHTML = "<b>Thief</b><br />This character lurks in the shadows. He is crafty, weak attacks, decent magic."}
if (s == "") {d.innerHTML = "Please Select a Character Class to view more information."}
}
</script>
Code: <select name="Character_Class" id="CharClass" onchange="showDetails(this)">
<option value="" selected="selected">Choose a Class</option>
<option value="Enchantress">Enchantress</option>
<option value="Knight">Knight</option>
<option value="Archer">Archer</option>
<option value="Thief">Thief</option>
</select>
Code: <li><div id="classDescription"></div></li> I retrieve a list of links from a database using ajax, then I assign them to the innerHTML property of a div whose display property is set to "none" Then I set the display property to "display" to get a drop-down listbox. The problem is the links in the list are all hilighted like they've been dragged over by a mouse. How do I prevent these links from highlighting? Hi, I am using Yahoo Table (YUI Library). I have a question regarding selected row data. I am using the following command to select the row but how I can get the selected row data. MyDataTable.subscribe("rowClickEvent", MyDataTable.onEventSelectRow); I want to create a second Yahoo Table based on row selection( I need the first column value to generate this table. Code: YAHOO.example.AssesmentsTable = function()
{
var MyColumnDefs = [
{key:"objectid", label: "#",formatter: YAHOO.widget.DataTable.formatAxsOppLink},
{key:"ClaimantName", label: "Claimant Name",sortable:true},
{key:"ClaimantAddress", label: "Claimant Address",sortable:true},
{key:"ClaimantPhone", label: "Claimant Phone",sortable:true},
{key:"ServiceType", label: "Service Type",sortable:true},
{key:"StartDate", label: "Start Date",sortable:true},
{key:"StartTime", label: "Start Time",sortable:true},
{key:"Location", label: "Service Location",sortable:true},
{key:"PartOfAMulti", label: "Part of a Multi?",sortable:true},
{key:"InterpreterName", label: "Interpreter",sortable:true},
{key:"AssessorsNames", label: "Assessors",sortable:true},
{key:"DateReportDueToUs", label: "Date Report Due",sortable:true}
];
var MyDataSource = new YAHOO.util.DataSource(gAssessorAxs);
MyDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
MyDataSource.responseSchema = {fields: ["objectid","ClaimantName","ClaimantAddress","ClaimantPhone","ServiceType","StartDate","StartTime","Location","PartOfAMulti","InterpreterName","AssessorsNames","DateReportDueToUs"]};
var MyConfigs = {paginator : new YAHOO.widget.Paginator({rowsPerPage: 10})};
var MyDataTable = new YAHOO.widget.DataTable("AssesmentsTable", MyColumnDefs, MyDataSource,MyConfigs);
//MyDataTable.hideColumn(1);
MyDataTable.set("selectionMode", "single");
MyDataTable.subscribe("rowMouseoverEvent", MyDataTable.onEventHighlightRow);
MyDataTable.subscribe("rowMouseoutEvent", MyDataTable.onEventUnhighlightRow);
MyDataTable.subscribe("rowClickEvent", MyDataTable.onEventSelectRow);
return {
oDS: MyDataSource,
oDT: MyDataTable
};
}();
Thanks. Hi everyone! I am building a simple web application in which the user inputs some html code in a <textarea> and the corresponding result (output of the code) is shown! The problem I am facing is that suppose the user enters some code and wishes to wrap it inside specific tags (e.g. <script></script>) then she just selects the corresponding code and clicks a predefined button and the selected code gets wrapped inside those tags! Now, what I am thinking right now is that when the user selects some code and clicks the button the selected text goes inside a variable (e.g. old_variable) and a new variable (new_variable = "<script>" + old_variable + "</script>") is returned! But I was just wondering how to send the selected code in the variable i.e. old_variable using JavaScript? Any help/hint/suggestion/advice would be highly valuable for me! Thanks! I'm struggling to make a js alert when none of the 3 checkboxes on my form are selected. Can anyone help me out? Code: function checkform ( form )
{
if (form.contact_name.value == "contact name") {
alert( "Please enter a contact name" );
form.contact_name.focus();
return false ;
}
if (form.last_name.value == "agency/company name") {
alert( "Please enter agency/company name" );
form.last_name.focus();
return false ;
}
if (form.email.value == "email address") {
alert( "Please enter contact email address" );
form.email.focus();
return false ;
}
if (form.telephone.value == "dates required") {
alert( "Please enter dates required" );
form.telephone.focus();
return false ;
}
if (form.comments.value == "any other info") {
alert( "Please enter more information" );
form.comments.focus();
return false ;
}
if (form.contact_name.value == "") {
alert( "Please enter a contact name" );
form.contact_name.focus();
return false ;
}
if (form.last_name.value == "") {
alert( "Please enter agency/company name" );
form.last_name.focus();
return false ;
}
if (form.email.value == "") {
alert( "Please enter contact email address" );
form.email.focus();
return false ;
}
if (form.telephone.value == "") {
alert( "Please enter dates required" );
form.telephone.focus();
return false ;
}
if (form.comments.value == "") {
alert( "Please enter more information" );
form.comments.focus();
return false ;
}
return true ;
}
//-->
</script>
Code: <form name="contactform" method="post" action="send_form_email.php" onsubmit="return checkform(this);">
<table width="450px">
</tr>
<tr>
<td valign="top">
<input class="formbox" type="text" STYLE="text-align:right" value="contact name" name="contact_name" maxlength="50" size="30" onblur="if (this.value == '') {this.value = 'contact name';}" onfocus="if (this.value == 'contact name') {this.value = '';}">
</td>
</tr>
<tr>
<td valign="top">
<input class="formbox" type="text" STYLE="text-align:right" value="agency/company name" name="last_name" maxlength="50" size="30" onblur="if (this.value == '') {this.value = 'agency/company name';}" onfocus="if (this.value == 'agency/company name') {this.value = '';}">
</td>
</tr>
<tr>
<td valign="top">
<input class="formbox" type="text" STYLE="text-align:right" value="email address" name="email" maxlength="80" size="30" onblur="if (this.value == '') {this.value = 'email address';}" onfocus="if (this.value == 'email address') {this.value = '';}">
</td>
</tr>
<tr>
<td valign="top">
<input class="formbox" type="text" STYLE="text-align:right" value="dates required" name="telephone" maxlength="30" size="30" onblur="if (this.value == '') {this.value = 'dates required';}" onfocus="if (this.value == 'dates required') {this.value = '';}">
</td>
</tr>
<tr>
<td>
<div id="checksdiv">
Full Day<input class="formcheck" type="checkbox" name="check[]" value="Full_Day">
Half Day<input class="formcheck" type="checkbox" name="check[]" value="Half Day">
Hourly <input class="formcheck" type="checkbox" name="check[]" value="Hourly">
</div>
</td>
</tr>
<tr>
<td valign="top">
<textarea class="formbox" name="comments" value="any other info" STYLE="text-align:right" maxlength="1000" cols="25" rows="6" onblur="if (this.value == '') {this.value = 'any other info';}" onfocus="if (this.value == 'any other info') {this.value = '';}"></textarea>
</td>
</tr>
<tr>
<td colspan="2" style="text-align:right">
<input type="image" value="Submit" src="images/submit.png" />
</td>
</tr>
</table>
</form>
Hey, I have a jQuery script running on my site that makes it so when you click on a thumbnail, a different overflow:hidden div is scrolled to the anchor point that thumbnail was linking to. I want to make it so the thumbnail that you clicked becomes selected (and all over thumbnails become unselected). This could be with a border, a shadow, an image appearing behind it, opacity - basically anything (preferably an image appearing behind it). I'm pretty much a javascript noob, but common sense tells me that this isn't possibly with basic CSS. How do I go about doing this? PS, if you want a clearer picture of what I'm referring to on my site, check http://bit.ly/83ftPF Thanks a ton for your time, I really appreciate it! -Joel I have a select box with a few options. When the page loads I need to get the selected option in this select box and alert its inner text. Yet everything I try out on the net that should work wont work in IE, all other browser its fine. Please can someone show me the TRUE and correct way to get the inner text of a option from a select box in IE? Thanks! Why is it when I have multiple "list" values the function works fine but when there is only one "list" value it tells me to "Select a Record" even when it is selected. Code: <script>
function listValuesexcel(form)
{
var cbs = form["list[]"];
var vals = ""
for ( var c = 0; c < cbs.length; ++c )
{
var cb = cbs[c];
if ( cb.checked ) vals += "," + cb.value;
}
if (vals.substring(1) == "") {
alert('Please select a record!');
return false;
}
document.excelForm.excelForm.value = vals.substring(1)
document.excelForm.submit();
}
</script>
<ul>
<li><a onClick="listValuesexcel(theForm)" title="Excel Report" href="#" > Excel</a></li>
<BR>
<!-- END TABS -->
<form method="POST" action="index.php" name="theForm" >
<table>
<tr>
<td> <input type="checkbox" class ="normal2" value="1198746" name="list[]" ></td>
</tr>
</form>
Please follow these steps in my jsfiddle: 1. click on the (open grid) link and select option "13", buttons A to N would appear 2. click on the select all answers button, all buttons A to N would turn green. 3. Now click on the open grid again and select option "5". As you can see all the buttons from A to 5 are now selected (Have all turned green). 4. Now go back to grid and choose option 13. As you can see all buttons A to N would be selected. I don't want this to happen. What should happen is that the 5 buttons selected before the option change should remain selected and the other 8 buttons should go back being unselected, but I do not know how to do this. I tried including this in the selectAll() function but it did not work: Code: $('.answerBtns:hidden').removeClass('answerBtnsOn').addClass('answerBtnsOff');
Does anyone have any ideas? Code is in jsfiddle, click [here][1] Thank You [1]: http://jsfiddle.net/C7vcQ/5/ I searched about this problem over Internet and found the same result many times, I found this example on stack overflow but this example didn't work in my project; I am making a toolbar with buttons that insert HTML tags around the selected text in a <textarea>, this exemple didn't work because when the user click on a button the selected text won't be selected anymore because <textarea> loses focus and selected text will be unselected, I am targeting Firefox and compatible browsers so you don't need to give me the IE code; jQuery codes are accepted; so, have you any idea?
Hello everybody, I have a javascript adding new options to a drop down select menu getting the information from the database. The code is as written below: Code: function setOptions1() {
var selbox2 = document.egitimgiris.alttipID;
selbox2.options.length = 0;
selbox2.options[selbox2.options.length] = new Option('Option1','22')
selbox2.options[selbox2.options.length] = new Option('Option2','23')
selbox2.options[selbox2.options.length] = new Option('Option3','24')
selbox2.options[selbox2.options.length] = new Option('Option4','25')
}
I want one of them to be added as selected. I will put an "if" check and if it the value of the option and the value in the database is equal I want that option to be added as "selected". Is this possible? If yes, how? Please help. Thanks and regards telmessos |
|||||||