|
JavaScript - Limiting Number Of Characters Shown In Select
I want to limit the number of characters shown in a select box when its 'dormant'
ie. I want the drop down to have the full word but when something is selected, I want it to show only the first 3 characters of the word. I can limit the width to a fixed px width but the right width is different depending on the word. (its a drop down of month names, I want them to have the full 'grown up' name in the drop down but that's too long and cumbersome for the space I have, I've trimmed it down by setting the width in CSS but it looks so much neater when the first 3 characters just show in the box rather than 4 or 3.5) Similar TutorialsHi! I have a page with 8 different <input type="select"> fields. All the time only one out from this 8 is shown. the rest of them are hidden with css: display:none; How can I submit with POST only the select that's showing, and not the rest? All of them have differnt names. Like dropdown1, dropdown2, and so on... I dont know how can I get the value out from the one that's shown, and not the rest. Please Help my brain is about to explode... I'm programming a function that breaks a massive string (2 million + characters) into "manageable" chunks of 500,000 characters. The function goes as follows: Code: var json_string = "{'action':'message-send','recipients':recipients,'message':message";
var bytes_chunks = scripting.messages.voice.recorder.bytes.chunk(500000);
$.each(bytes_chunks,function(i,v){
json_string += ",'voice_bytes_"+i+"':'"+v+"'";
});
json_string += "}";
As you can see, everything should work fine, and the function should return a stringified json array (which would be parsed and sent to a server) but the string is truncated and function exited after the first interval. When I decrease the length of "v" using substr to 5 characters, all the expected children are returned. What could the problem be? what is the best way to count the seconds between each onkeyup to "autosave" without sending an ajax command after each key? id like my script to update after 2 seconds of no typing.... (yes, jquery is in use on the page) Code: function microtime (get_as_float) {
var now = new Date().getTime() / 1000;
var s = parseInt(now, 10);
return (get_as_float) ? now : (Math.round((now - s) * 1000) / 1000) + ' ' + s;
}
var lastKeyUp=0;
function saveChange(id,field,value){
thismicrotime=microtime(true);
if(lastKeyUp == 0 || (thismicrotime-lastKeyUp) >= 2000000){
$.get("saveChange.php",
{ 'field': field, 'value': value, 'id': id },
function(data){
lastKeyUp=thismicrotime;
},
'xml'
);
}
}
Code: <input type="text" name="field1" onkeyup="saveChange('2','field1',this.value);" />
i'd use onchange or onblur but that requires you to unfocus the field before it saves... I have the following javascript code: Code: elms=document.getElementById('friends').getElementsByTagName('li');
for(var fid in elms){
if(typeof elms[fid] === 'object'){
fs.click(elms[fid]);}
}
Which grabs all "li" tags with the ID "friends" , and then goes through and clicks all of those elements. How would I go about having it to where it only clicks up to 200 elements, and not all of them. I have a function below where every time a question is submitted, it will add a new row in the table with a textbox which allows numbers entry only. My question is that I don't know how to code these features in this function: 1: I want the text box to be between 0 and 100, so if text box contains a number which is above 100, it will automatically change the number to the maximum number which is 100. Does any one know how to code this in my function below in javascript: Code: function insertQuestion(form)
{
var row = document.createElement("tr");
var cell, input;
cell = document.createElement("td");
cell.className = "weight";
input = document.createElement("input");
input.name = "weight_" + qnum;
input.onkeypress = "return isNumberKey(event)";
cell.appendChild(input);
row.appendChild(cell);
}
Hi all, using the Draggable featu http://jqueryui.com/demos/draggable/ How can I limit the draggable div so it hits the sides of the container? It states I can do this: Quote: Constrains dragging to either the horizontal (x) or vertical (y) axis. Possible values: 'x', 'y'. Code examples Initialize a draggable with the axis option specified. $( ".selector" ).draggable({ axis: 'x' }); Get or set the axis option, after init. //getter var axis = $( ".selector" ).draggable( "option", "axis" ); //setter $( ".selector" ).draggable( "option", "axis", 'x' ); But I don't really understand it. :S Not great with Javascript - so please make it simple! Thanks. Hi I am wondering how I would limit the drop zones to just one image per drop zone? Code: <ul id="images"> <li><a id="1" draggable="true"><img src="images/1.jpg" value = "flower"></a></li> <li><a id="2" draggable="true"><img src="images/2.jpg" value = "boy"></a></li> <li><a id="3" draggable="true"><img src="images/3.jpg" value = "girl"></a></li> </ul> <form name = "objects" id="form" action = "form.php" method = "post"> <div class="drop_zones"> <div class="drop_zone" id="drop_zone1" droppable="true" type = "text" name = "drop_zone1"> </div> <div class="drop_zone" id="drop_zone2" droppable="true" type = "text" name = "drop_zone2"> </div> <div class="drop_zone" id="drop_zone3" droppable="true" type = "text" type = "file" name = "drop_zone3"> </div> </div> Code: var addEvent = (function () {
if (document.addEventListener) {
return function (el, type, fn) {
if (el && el.nodeName || el === window) {
el.addEventListener(type, fn, false);
} else if (el && el.length) {
for (var i = 0; i < el.length; i++) {
addEvent(el[i], type, fn);
}
}
};
} else {
return function (el, type, fn) {
if (el && el.nodeName || el === window) {
el.attachEvent('on' + type, function () { return fn.call(el, window.event); });
} else if (el && el.length) {
for (var i = 0; i < el.length; i++) {
addEvent(el[i], type, fn);
}
}
};
}
})();
var dragItems;
updateDataTransfer();
var dropAreas = document.querySelectorAll('[droppable=true]');
function cancel(e) {
if (e.preventDefault) {
e.preventDefault();
}
return false;
}
function updateDataTransfer() {
dragItems = document.querySelectorAll('[draggable=true]');
for (var i = 0; i < dragItems.length; i++) {
addEvent(dragItems[i], 'dragstart', function (event) {
event.dataTransfer.setData('obj_id', this.id);
return false;
});
}
}
addEvent(dropAreas, 'dragover', function (event) {
if (event.preventDefault) event.preventDefault();
this.style.borderColor = "#000";
return false;
});
addEvent(dropAreas, 'dragleave', function (event) {
if (event.preventDefault) event.preventDefault();
this.style.borderColor = "#ccc";
return false;
});
addEvent(dropAreas, 'dragenter', cancel);
// drop event handler
addEvent(dropAreas, 'drop', function (event) {
if (event.preventDefault) event.preventDefault();
// get dropped object
var iObj = event.dataTransfer.getData('obj_id');
var oldObj = document.getElementById(iObj);
// get its image src
var oldSrc = oldObj.childNodes[0].src;
oldObj.className += 'hidden';
var oldThis = this;
setTimeout(function() {
oldObj.parentNode.removeChild(oldObj); // remove object from DOM
// add similar object in another place
oldThis.innerHTML += '<a id="'+iObj+'" draggable="true"><img src="'+oldSrc+'" /> </a>';
// and update event handlers
updateDataTransfer();
// little customization
oldThis.style.borderColor = "#ccc";
}, 500);
return false;
});
Anyone know? In my previous post, I asked how to create a function that would allow me to add to or subtract from a maxvalue, and thankfully I got help regarding that. However, something's got me stumped for the past few weeks that I still can't resolve... This is the relevant code: Code: <html>
<head>
<script type="text/javascript" language="Javascript">
function chgAdv(btn)
{
var form = btn.form;
var newqty = parseInt(btn.value);
var maxqty = form.maxqty;
var maxadv = form.maxadv;
if (eval("btn.checked") == true && parseInt(maxadv.value) + newqty <= 15) {
var newmax = parseInt(maxqty.value) - newqty;
var newadv = parseInt(maxadv.value) + newqty;
}
else if (eval("btn.checked") == false && parseInt(maxadv.value) - newqty >= 0) {
var newmax = parseInt(maxqty.value) + newqty;
var newadv = parseInt(maxadv.value) - newqty;
}
else {
var newmax = parseInt(maxqty.value);
var newadv = parseInt(maxadv.value);
}
if ( newadv >= 0 && newmax >= 0) {
maxqty.value = newmax;
maxadv.value = newadv;
}
}
function chgDis(btn) {
var form = btn.form;
var newqty = parseInt(btn.value);
var maxqty = form.maxqty;
var maxdis = form.maxdis;
if (eval("btn.checked") == true && parseInt(maxdis.value) + newqty <= 10) {
var newmax = parseInt(maxqty.value) + newqty;
var newdis = parseInt(maxdis.value) + newqty;
}
else if (eval("btn.checked") == false && parseInt(maxdis.value) - newqty >= 0) {
var newmax = parseInt(maxqty.value) - newqty;
var newdis = parseInt(maxdis.value) - newqty;
}
else {
var newmax = parseInt(maxqty.value);
var newdis = parseInt(maxdis.value);
}
if (newdis >= 0 && newmax >= 0) {
maxqty.value = newmax;
maxdis.value = newdis;
}
}
</script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<form name="f1">
<b>Advantages</b> (<input type="text" class="RO" name="maxadv" value="0" />)<br />
<input type="checkbox" class="RO" name="Absolute Direction" onclick="chgAdv(this);" value="2" />Absolute Direction<br />
<input type="checkbox" class="RO" name="Allies" onclick="chgAdv(this);" value="3" />Allies<br />
<hr>
<b>Disadvantages</b> (<input type="text" class="RO" name="maxdis" value="0" />)<br />
<input type="checkbox" class="RO" name="Antisocial" onclick="chgDis(this);" value="2" />Antisocial<br />
<input type="checkbox" class="RO" name="Ascetic" onclick="chgDis(this);" value="4" />Ascetic<br />
max quantity: <input type="text" readonly class="RO" name="maxqty" value="40" />
</form>
</body>
</html>
styles.css is simply: Code: input.RO {
border: none;
width: 40px;
text-align: center;
}
As it stands, it works as long as the total value is less than or equal to the limit (for advantages it's 15, for disadvantages it's 10). However, the moment it goes past the limit -- for instance, if you change Antisocial's value from 2 to 7, or if you add several additional checkboxes with any values -- the whole thing starts going crazy; specifically, maxvalue doesn't revert to 40 when the all the checkboxes are unchecked. What I'd want to happen is that the user cannot select or apply advantages or disadvantages if the maximum advantage is greater than 15 or the maximum disadvantages is greater than 10. I'm thinking that a button for adding disadvantage points to/subtracting advantage points from the maxvalue (that becomes disabled if the user goes past his limit on advantages/disadvantages) is useful at this point, but I'm really stumped on the implementation of the idea. An alternate idea of mine is that all other advantage/disadvantage checkboxes would become disabled if their value is greater than the remaining number of points, but I don't know how that is possible either. Any and all help is greatly appreciated. Dear Forum Members HI, I am no coder, however I am modifying my website and changing the slideshow to the one found on this website, most wonderful, the Cut & Paste JavaScript Slideshow( http://www.javascriptkit.com/script/.../jsslide.shtml ) I have it working now, and I have but one question, does the code include a way to limit the number of times that it cycles through the slides? So it just freezes on one photo after x number of cycles? many thanks, and happy holidays... Anyone know of a script that shows a different page based upon a users IP address? Thanks I am trying to figure out how to make a random number I can plug into a script count down from that number at certain times of the day until it reaches 0. I would like it to reset itself at midnight every day. I'm trying to make it work with a script I found on here that resets itself at midnight every day. So instead of it counting down too fast, it would count down to the next number after a randomly generated number of minutes until it reaches 0. But it wouldn't necessarily have to end at 0 at midnight. It could go from 845 to 323 at the end of the day at a slower pace. Is that possible?
When I used toFixed() method on a number, I thought that this method round a number to a specified approximation, but I got a surprising result, the number became string! 15.23689 .toFixed ( 2 ) ==> "15.24" So does it convert the number into string? I am using javascript that will show/hide a DIV if a link is clicked. In the DIV is a form. When the user input's form info, and the form is processed, if there is an error the page reloads displaying the error. However, the user must click the link again to see the form and correct their mistake. Is there a way to keep the div shown on reload? Thanks! Code: <script language="javascript">
function toggle() {
var ele = document.getElementById("show");
var text = document.getElementById("add");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "show";
}
else {
ele.style.display = "block";
text.innerHTML = "Hide";
}
}
</script>
Hi guys, so far any values recorded in my database are shown on the map: http://www.vfrflight.co.uk/new2/phpsqlajax_map_v3.html Code: <!DOCTYPE html >
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>PHP/MySQL & Google Maps Example</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
//<![CDATA[
var customIcons = {
restaurant: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
bar: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
}
};
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(47.6145, -122.3418),
zoom: 13,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP file
downloadUrl("phpsqlajax_genxml.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var address = markers[i].getAttribute("address");
var type = markers[i].getAttribute("type");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + name + "</b> <br/>" + address;
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow
});
bindInfoWindow(marker, map, infoWindow, html);
}
});
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
//]]>
</script>
</head>
<body onload="load()">
<div id="map" style="width: 500px; height: 300px"></div>
</body>
</html>
However, how do i let people place markers when a button is pressed. I believe this is the code to place markers when left click occurs: Code: <!DOCTYPE html >
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Map Simple</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var marker;
var infowindow;
function initialize() {
var latlng = new google.maps.LatLng(37.4419, -122.1419);
var options = {
zoom: 13,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), options);
var html = "<table>" +
"<tr><td>Name:</td> <td><input type='text' id='name'/> </td> </tr>" +
"<tr><td>Address:</td> <td><input type='text' id='address'/></td> </tr>" +
"<tr><td>Type:</td> <td><select id='type'>" +
"<option value='bar' SELECTED>bar</option>" +
"<option value='restaurant'>restaurant</option>" +
"</select> </td></tr>" +
"<tr><td></td><td><input type='button' value='Save & Close' onclick='saveData()'/></td></tr>";
infowindow = new google.maps.InfoWindow({
content: html
});
google.maps.event.addListener(map, "click", function(event) {
marker = new google.maps.Marker({
position: event.latLng,
map: map
});
google.maps.event.addListener(marker, "click", function() {
infowindow.open(map, marker);
});
});
}
function saveData() {
var name = escape(document.getElementById("name").value);
var address = escape(document.getElementById("address").value);
var type = document.getElementById("type").value;
var latlng = marker.getPosition();
var url = "phpsqlinfo_addrow.php?name=" + name + "&address=" + address +
"&type=" + type + "&lat=" + latlng.lat() + "&lng=" + latlng.lng();
downloadUrl(url, function(data, responseCode) {
if (responseCode == 200 && data.length <= 1) {
infowindow.close();
document.getElementById("message").innerHTML = "Location added.";
}
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request.responseText, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
</script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize()">
<div id="map_canvas" style="width: 500px; height: 300px"></div>
<div id="message"></div>
</body>
</html>
Help would be appreicated very much! I cannot combine the codes to save my life... Hello everyone, well i have asked for alot of issues earlier but none completely got resolved i hope that i get answer for this one. I want something a script or anything that shows loading as we have seen .gif images, before the game loads. I went through google and tried alot of scripts but failed maybe i don't know the exact method how to implement it as i am weak in jquery or scripting. I would like some one to help me out as i don't know what to do thank you in advance. Hi @ all! I've a div that is editable (contentEditable = true). The div has a fixed size like a letter page. When the user has written so much text that the text overflows I want add a new div above and let flow the overflown text in the other div. (it's the some behavior like MS Word in page view, but now it is in the web) It is possible to do something like this in the web? One way to implement this is to check if the text of the div overflows (I've found java script examples in the web which do that). And than I need the text that overflows to move it to the next div. But I have not found a function that do this. Is there such a function? Another way is to insert a gap at that position a new page begins and use an background image that looks like a page border. With this solution, the whole text is in one div but it looks like floating to another page. But therefore, I have to add a gap between to lines at a specific position (the page border/margin and the gab between the pages). Does anyone have an idea how to realize this? Maybe there are other possibilities to find a solution, aren't there? I hope, you have understand what I want to realize. If not, please feel free to ask me! Thank you for answers and hint in advanced! Konstantin Hi I have a problem with a form in my site he http://www.21centuryanswers.com/submit.php if no field is filled and you click submit, an alert will be shown, yet the next page will still load! How do I fix it? the code for the form is: <form action="privacy.php" method="post" onsubmit="return checkform(this);"> <fieldset> <center> E-mail: <input type="textfield" name="email" size="60" value="" /><br/></br> Question: <input type="textfield" name="question" size="70" value="" /><br/><br/> <input type="submit" value = "Submit"/> </center> </fieldset> </form> and here is the validation script: <script language="JavaScript" type="text/javascript"> <!-- function checkform ( form ) { // ** START ** if (form.email.value == "") { alert( "Please enter your email." ); form.author.focus(); return false ; } if (form.question.value == "") { alert( "Please enter the question." ); form.title.focus(); return false ; } // ** END ** return true ; } //--> </script> Please help! I've been having problems getting my select option to change the options of another select option. I'm not much of a javacsript coder, so I'm at a lost. When I select the first option nothing appears in the second option. here's the javascript code: Code:
function createOption(OptionText, OptionValue){
var temp = document.captcha_form("option");
temp.innerHTML = OptionText;
temp.value = OptionValue;
return temp;
}
function valChange(){
var firstList = document.getElementById("emailaddress");
var secondList = document.getElementById("subject");
while(secondList.hasChildNodes())
secondList.removeChild(secondList.childNodes[0]);
switch(firstList.value){
case "1":{
secondList.appendChild(createOption("Report Site Browsing Issue", Report Site Browsing Issues));
secondList.appendChild(createOption("Report Page Errors", Report Page Errors));
secondList.appendChild(createOption("Other", Other));
break;
}
case "2":{
secondList.appendChild(createOption("Report Unauthorized Game", Report Unauthorized Game));
secondList.appendChild(createOption("Report Spam", Report Spam));
secondList.appendChild(createOption("Report Harassment", Report Harassment));
secondList.appendChild(createOption("Report Illegal Activities", Report Illegal Activities));
secondList.appendChild(createOption("Request Account Removal", Request Account Removal));
break;
}
// ....
default:{
secondList.appendChild(createOption("Please select from the first list", ""));
break;
}
}
}
window.onload = valChange;
this is the form code Code: <div class="mailto_form"> <form method="POST" id="captcha_form" name="captcha_form" action="../includes/mailform.php"> <div style="padding-bottom: 1em;">Choose Recipient: <select name="emailaddress" id="emailaddress" onchange="valChange();"> <option value=""></option> <option value="1">Webmaster</option> <option value="2">Admin</option> </select> </div> <div style="padding-bottom: 1em;">Subject: <br /><select name="subject" id="subject"> </div> <div style="padding-bottom: 1em;">From: <br /><input type="text" name="email" id="email" value=""> </div> <div style="padding-bottom: 1em;">Enter the text contained in the image into the text box: <br /><img src="../includes/captcha.php" /> <br /><input type="text" name="userpass" value=""> </div> <div style="padding-bottom: 1em;">Message: <br /><textarea name="message" id="message" rows="10" cols="60"><?php echo "</tex" . "tarea>"; ?> </div> <div style="padding-bottom: 1em;"><input name="submit" type="submit" value="Submit"> </div> </form> </div> Link to the page http://www.netgamegurus.com/contact/ Hey chaps, hope someone can help with this: I have a PHP form, with a couple of dynamic Select menus, which are populated from two SQL tables: // tbl_main_colour: Code: ID, NAME 1, Red 2, Blue 3, Green // tbl_shade_colour: Code: ID, NAME, FK_MAIN_COLOUR_ID 1, Light Red, 1 2, Dark Red, 1 3, Light Blue, 2 4, Dark Blue, 2 5, Light Green, 3 6, Dark Green, 3 What I'm after is something to filter the second select option, after the first select option has been chosen // Select 1: Code: Red // Select 2: Code: Light Red Dark Red I'm pretty sure this is possible, but not sure how to go about it, any help would be most appreciated. Hey Guys When a user changes the select list called "reason_code_master" I need the uodatecodes() function to update all the other select list with the id of "reason_codes" with the same . How can I do this. <select size='1' onchange="updatecodes()" name='reason_code_master'> <option value='' > - SET REASON - </option> <option value='BROKEN' >BROKEN</option> <option value='ENTERED' >ENTERED</option> <option value='SHORT' >SHORT</option> </select> <select size='1' name='reason_codes' id='reason_codes'> <option value='' > - SET REASON - </option> <option value='BROKEN' >BROKEN</option> <option value='ENTERED' >ENTERED</option> <option value='SHORT' >SHORT</option> </select> <select size='1' name='reason_codes' id='reason_codes'> <option value='' > - SET REASON - </option> <option value='BROKEN' >BROKEN</option> <option value='ENTERED' >ENTERED</option> <option value='SHORT' >SHORT</option> </select> <select size='1' name='reason_codes' id='reason_codes'> <option value='' > - SET REASON - </option> <option value='BROKEN' >BROKEN</option> <option value='ENTERED' >ENTERED</option> <option value='SHORT' >SHORT</option> </select> <select size='1' name='reason_codes' id='reason_codes'> <option value='' > - SET REASON - </option> <option value='BROKEN' >BROKEN</option> <option value='ENTERED' >ENTERED</option> <option value='SHORT' >SHORT</option> </select> |
|||||||