|
JavaScript - Dropdown Width Problem In Ie7
Hi
After searching on Google and looking on numerous forums I can't seem to find a good solution which works the way I want. I have a select box which is a set width. Some of the text in the dropdown list is longer than the set width. In Firefox / Chrome the width of the dropdown will expand to display all the text, and thats exactly how I want it. However, in IE7 the width of the dropdown will not expand. I do not want to resize the select box itself as it will mess up the look of the page. I know this is an issue with IE but was wondering is there any solution, or can anyone point me in the direction of a solution. See attachments on a simple example to see what I mean. I'm sure there must be some fix for this, maybe JavaScript. Any ideas would be great. Here is some simple code used in the screenshots Code: <html> <head> <body> <select id="list" style="width:100px;"> <option value="text1">Some text</option> <option value="text2">Some longer text</option> <option value="text3">Some even longer text</option> </select> </body> </head> </html> Similar TutorialsOK, I think this is an error with the js. I'm in the process of putting together a website in which when the user clicks on the nav bar, it drops down displaying the submenu. I'm working with HTML Kit and in the preview screen (which if I remember correctly is IE7) it works fine. However, when I save the file and open it up in any browser (FF, IE, Chrome)only kids and community work section works. I'm not seeing anything wrong. Does anyone have a clue what's going on? Or would it be a problem with the HTML/CSS EDIT: Guess I should post the link http://tinyurl.com/67w4epj Hi Chaps, I'm trying to get a AJAX script to work, but am having problems. I have a page with two dropdown menus, the idea is that the first dropdown [customers] will then filter the options of the second [contacts]: //DROPDOWN.PHP PHP Code: <form method="post" action=""> <select name="customer" onChange="ContactGrab('."'".'ajaxcalling.php?id='."'".'+this.value);"> <option value="">Select Customer</option> <?php do { ?> <?php echo "<option value=".'"'.$row_rsCustomer['custid'].'" >'.$row_rsCustomer['custname']."</option>";?> <?php } while ($row_rsCustomer = mysql_fetch_assoc($rsCustomer)); $rows = mysql_num_rows($rsCustomer); if($rows > 0) { mysql_data_seek($rsCustomer, 0); $row_rsCustomer = mysql_fetch_assoc($rsCustomer); } ?> </select><br /> <div id="details"> <select name="details"> <option value="">Select Contact</option> <?php do { ?> <option value="<?php echo $row_rsContact['contactname']?>"><?php echo $row_rsContact['contactname']?></option> <?php } while ($row_rsContact = mysql_fetch_assoc($rsContact)); $rows = mysql_num_rows($rsContact); if($rows > 0) { mysql_data_seek($rsContact, 0); $row_rsContact = mysql_fetch_assoc($rsContact); } ?> </select> </div> </form> The OnChange action should call the AJAXCALLING.PHP page, where the other select options are filtered, by column [FK_custid] //AJAXCALLING.PHP PHP Code: <select name="details"> <option value="">Select Contact</option> <?php do { ?> <option value="<?php echo $row_rsContact['contactid']?>"><?php echo $row_rsContact['contactname']?></option> <?php } while ($row_rsContact = mysql_fetch_assoc($rsContact)); $rows = mysql_num_rows($rsContact); if($rows > 0) { mysql_data_seek($rsContact, 0); $row_rsContact = mysql_fetch_assoc($rsContact); } ?> </select> This is powered by the AJAXSCRIPT.JS page Code: function CreateXmlHttpObject() { //fuction to return the xml http object
var xmlhttp=false;
try{
xmlhttp=new XMLHttpRequest();//creates a new ajax object
}
catch(e) {
try{
xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");//this is for IE browser
}
catch(e){
try{
req = new ActiveXObject("Msxml2.XMLHTTP");//this is for IE browser
}
catch(e1){
xmlhttp=false;//error creating object
}
}
}
return xmlhttp;
}
function CategoryGrab(strURL)
{
var req = CreateXmlHttpObject(); // fuction to get xmlhttp object
if (req)
{
req.onreadystatechange = function()
{
if (req.readyState == 4) { //data is retrieved from server
if (req.status == 200) { // which reprents ok status
document.getElementById('details').innerHTML=req.responseText;//put the results of the requests in or element
}
else
{
alert("There was a problem while using XMLHTTP:\n");
}
}
}
req.open("GET", strURL, true); //open url using get method
req.send(null);//send the results
}
}
My problem is that when I open the dropdown.php page, the browser status says 'Done, but with errors on the page' and the second dropdown isn't filtering. I can get rid of the status warning by removing: Quote: ...onChange="ContactGrab('."'".'ajaxcalling.php?id='."'".'+this.value);"> But obviously that is something that is needed to pass the [custid] in the URL parameter.... Can anyone help me on this, as I haven't got a clue what I'm missing or where I have gone wrong! Is there any way to make the select boxes behave in IE the way they do in Firefox? I am setting a fixed width for the select box but IE chops it off. In Firefox it works good. <select width="60" STYLE="width: 60px" name="Category1"> <option value="null">code<?php for($i=0; $i<count($categories); $i++) { echo "<option value=$categories[$i]>$categories[$i] --> $descriptions[$i]"; } ?> </select> please help me~~Hi I have to create a table using javascript. Firefox displays the expected result but for IE, the column width is screwed >"< I have to use the col tag to set width because sometimes the first row maybe merged. All I need is to create a table that strictly displays according to the inputted column widths from my program. In below I have setup very short example that construct table in a similar way to my original javascript function. I also draw a ruler to help showing the proper width of 400px on the screen. column 1 should be 100px width and column 2 should be 300px. Please help me~~T_T Code: <?xml version='1.0' encoding='UTF-8'?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<body onload="init()">
Hard Coded:
<DIV style="WIDTH: 400px; HEIGHT: 25px;overflow:hidden;">
<TABLE style="border:none; BORDER-SPACING: 0px; WIDTH: 400px; TABLE-LAYOUT: fixed" cellSpacing="0" cellpadding="0">
<col width="100px">
<col width="300px">
<TBODY>
<TR>
<TD style="background-color:blue">
a
</TD>
<TD style="background-color:green">
b
</TD>
</TR>
</TBODY>
</TABLE>
</DIV>
Ruler:
<div id='ruler' style="background-color:yellow;width:400px;height:28px;"></div>
Javascript inserted:
<div id="hi">
</div>
</body>
<script language="javascript">
function init() {
var w = [100, 300]
// test table create
var testDiv, testTBody, testTable, testTr, testTd, testCol;
document.getElementById("hi").appendChild(testDiv = document.createElement("div"));
with (testDiv.style) {
width="400px";
height="25px";
}
testDiv.appendChild(testTable = document.createElement("table"));
with (testTable) {
style.tableLayout="fixed";
style.borderSpacing="0px";
style.width = "400px";
appendChild(testCol = document.createElement("col"));
testCol.style.width = 100 + 'px';
appendChild(testCol = document.createElement("col"));
//testCol.style.width = 300 + 'px';
appendChild(testTBody = document.createElement("tbody"));
cellSpacing= 0
}
testTBody.appendChild(testTr = document.createElement("tr"));
with (testTr){
}
for (var i= 0; i < 2; i++) {
testTr.appendChild(testTd = document.createElement("td"));
testTd.innerHTML = "Testing";
with (testTd) {
style.borderTop = "1px solid lightgray";
style.borderLeft="1px solid lightgray";
style.borderRight="1px solid black";
style.borderBottom="1px solid black";
}
}
}
</script>
</html>
Hello, let me try to explain better what I'm trying to do. I'm a real newbie I don't know much javascript but I understand more or less the logic behind it... tell me if this solution should work and if you know how to do it please show me. I have this page. http://felixdeportu.com/5/ The images are inside a div#content div#photo. I need to make div#photo's width to match the total width measurement of all the images it contains. If you load the page and you don't touch the size, it will work fine... but that's not realistic. If I resize the page, which will happen often on this kind of page (I'm assuming), the whole thing goes haywire (try it, scroll to the last image and resize the page you'll see what I mean). What can I do? Is my idea the right solution? Am I not explaining this clearly enough? Let me know please, I'm desperate. I've been trying to get CSS to do this for me for 3 hours now. Nothing works... Hi, I'm trying to integrate an address finder (http://www.craftyclicks.co.uk/) into my shopping cart (OsCommerce). I can get it to work but I need to add my own functionality. I'm not very experienced with JavaScript and my head has entered an infinite loop by now. The problem is that the address finder script can change the selected country in a drop-down list depending on the postcode entered by the user (using the onblur event handler). What I need it to do is to remove all other countries depending on the postcode. I can get it to remove all other countries but how do i return to the original list of countries when the postcode is changed again? Once all other counties are removed, the drop-down list will obviously only have one option left... I guess the question is also how does a function remember what it has done before, when it is called again? I have written this short test script as it is easier to work with than the craftyclicks oscommerce contribution: 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>
<title>HTML Template</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript">
//<![CDATA[
function store(element) {
// store values
var cl = element;
var text_list = new Array();
var value_list = new Array();
var length = cl.length;
for (var foo=0; foo<length; foo++) {
text_list[foo] = cl.options[foo].text;
value_list[foo] = cl.options[foo].value;
alert("text array " + foo + " " + text_list[foo]);
alert("value array " + foo + " " + value_list[foo]);
}
populate(cl, text_list, value_list);
}
function populate(element, text, value) {
// populate options with previously stored values
var cl = element;
var length = cl.length;
cl.options.length=0;
for (var bar=0; bar<length; bar++) {
cl.options[bar]= new Option(text[bar], value[bar], false, false);
}
}
function crafty_set_country(code) {
var cl = document.getElementById('select');
store(cl);
for (var i=0; i<cl.length; i++) {
if (cl.options[i].value == code) {
alert(cl.options[i].value + " found");
var value = cl.options[i].value;
var text = cl.options[i].text;
cl.options.length=0;
cl.options[0]=new Option(text, value, true, true);
/*
for (var j=0; j<cl.length; j++) {
alert("second loop " + cl.options[j].text);
if (cl.options[i].value != code) {
cl.options[j]
}
}
*/
} else {
alert(cl.options[i].value);
}
}
}
//]]>
</script>
</head>
<body>
<form>
<select id="select">
<option value="10">ten</option>
<option value="20">twenty</option>
<option value="30">thirty</option>
<option value="40">fourty</option>
<option value="50">fifty</option>
<option value="60">sixty</option>
</select>
<input type="button" value="remove" name="button" onClick="crafty_set_country(50)">
<input type="button" value="repopulate" name="button" onClick="crafty_set_country(100)">
</form>
</body>
</html>
Many thanks! Martin hey guys The first dropdown has some options as : abc(a) bcd(a) cde(b) def(b) efg(c) fgh(c) The second dropdown has : a b c On selecting abc(a) in first dropdown the 'a' must get selected in second dropdown,on selecting cde(b) second dropdown must have 'b' and so on,also the second dropdown value should be disabled(grayed out) for user.Need the code in javascript.ty in advance. I want to set the width of a div to be the same width of the image inside the div. The following code works great. But... The images are different widths, so both wrappers are set to the width of the first image. Without having to add an ID to each wrapper or image, can the wrapper width be set to the image width using the name of the image as the unique identifier? Any help would be great! PHP Code: jQuery: $(document).ready(function(){ var newWidth = $('div.wrapper img').attr('width'); $('div.wrapper').width(newWidth); }); HTML: <div class="wrapper"> <p><img src="image1.jpg" width="200" /><br /> Caption</p> </div> <div class="wrapper"> <p><img src="image2.jpg" width="250" /><br /> Caption</p> </div> Hello, I am completely new to HTML/JS/CSS, therefore I know very little. I have two drop-down prompt controls with month names. One has just one value (say "July") and the other has all the months of the year ("January".."December"). The first prompt control is hidden on the page. How do I set the default selection of the second prompt control to the value present in the first prompt control? So, when the page is run, the second prompt control should automatically show "July". I was reading up on the selectedIndex property (?), but I know that it won't work because I want Index 0 to be selected in the first control and Index 6 in the second, and I expect it to change every month (next month it will be index 7 that should be automatically selected). If it matters, I am using IE8. Thanks! Need to set the width of a Table that is being spit out by this god awful CMS... please help me... change the html attribute width! Hi, I have two dropdown lists with the second one being dependent on the selection in the first. Options in list 1: 1,3 or 4 List two should be enabled when 3 or 4 is selected in list 1. So far so good, managed to get it to work with only one set of lists, but I actually have 18 of those sets in this form: Code: <select name="fw[$i]" id="fw[$i]"> <option value="1">FWH</option> <option value="3">links</option> <option value="4">rechts</option> <option value="0" selected></option> </select><br /> <select name="lie[$i]" id="lie[$i]" disabled="disabled" onchange="showBox($i,xxx);"> <option value="0" selected>---</option> <option value="1">gut</option> <option value="2">schlecht</option> <option value="3">Strafschlag</option> <option value="4">OB</option> </select> $i is my index generated by my PHP script and runs from 1 to 18. Everything works just fine as long as the index is not in play. With the index my function breaks, most probably due to my inability to extract the second parameter (xxx above) from the selection field. Here's my function, there could be something wrong there too with how exactly to specify the proper dropdown list to enable. Code: function showBox(field,val) {
if (val > 1) {
var box = 'lie[' + field + ']';
document.form1.box.disabled == false;
}
else {
document.form1.box.disabled == true;
}
}
Finally, I'm not that adept in javascript programming, more like a trial and error guy, how has hit the wall with this problem. Thanks in advance! Joe I am just learning but this is driving me nuts. Any help would be appreciated. I am trying to change the value of a quantity dropdown on this page: http://www.walmart.com/ip/Energizer-...Pack/872068#rr This will change it in the browser but the 3 value is not retained when I add the item to cart. Do I have to do something with onchange? What? Code: document.getElementsByClassName('stripitems')[0].childNodes[3].childNodes[3].value= 3
Okay well here is my code. i want to mkae it so the functions add together to get a total price, i need some help Code: <html>
<head>
</head>
<script type="text/javascript">
function addit(){
if(document.getElementById("add").value=="0")
{
document.getElementById("amount").value="$0.00"
}
if(document.getElementById("add").value=="1")
{
document.getElementById("amount").value="$5.00"
}
if(document.getElementById("add").value=="2")
{
document.getElementById("amount").value="$10.00"
}
if(document.getElementById("add").value=="3")
{
document.getElementById("amount").value="$15.00"
}
}
function addit2(){
if(document.getElementById("add2").value=="4")
{
document.getElementById("amount").value="$30.00"
}
if(document.getElementById("add2").value=="5")
{
document.getElementById("amount").value="$40.00"
}
}
</script>
<body>
<table class="comparison pricing-email" border="0" cellspacing="1" cellpadding="0" width="30%">
<tbody>
<tr class="row1">
<td class="col1">Choose # of EMAIL accounts:
<select style="width: 60px; font-size: 17px;" name="add" id="add" onChange="addit()">
<option value="0"> </option>
<option value="1">1</option>
<option value="2">3</option>
<option value="3">6</option>
</select>
</td>
</tr>
<tr class="row2">
<td class="col2">Choose # of EMAIL accounts:
<select style="width: 60px; font-size: 17px;" name="add" id="add2" onChange="addit2()">
<option value="0"> </option>
<option value="4">44</option>
<option value="5">43</option>
<option value="3">342</option>
</select>
</td>
</tr>
<tr class="row1">
<td class="col1">Total Price: <input type="text" id="amount" value="" style="border:none; font-size:13pt;"></td>
</tr><tr>
<td>
<input type="submit" name="submit" value="Sign-Up">
</td>
</tr>
</tbody>
</table>
</form>
</body>
if i press any key from keyboard all related word to that alphabet will display below the dropdown.what is the code for it.thanks.
if I had two dropdown boxes... If I select the first one with the value of the month name .. eg.. January. How can I get the second dropdown box below to get that same value.?? Thanks S. I have a the following code for displaying a tooltip: Code: <a style='margin-left: 10px; position:relative' class="tooltip" title="This is some text to display"> The javascript for the tooltip is as follows: Code: $(document).ready(function(){
$("a.tooltip").live( {
mouseenter:
function(e){
this.t = this.title;
this.title = "";
$("body").append("<p id='tooltip'>"+ this.t +"</p>");
$("#tooltip")
.css("top",(e.pageY - 10) + "px")
.css("left",(e.pageX + 20) + "px")
.fadeIn("fast");
var css_width = $('#tooltip').width();
var text_width = $('#tooltip').textWidth();
if (css_width > text_width) {
$('#tooltip').width(text_width);
}
},
mouseleave:
function(){
this.title = this.t;
$("#tooltip").remove();
}
}
);
});
$.fn.textWidth = function textWidth() {
var html_org = $(this).html();
var html_calc = '<span>' + html_org + '</span>';
$(this).html(html_calc);
var width= $(this).find('span:first').width();
$(this).html(html_org);
return width;
}
What I want to do is to be able to add another variable 'width' to be able to set the width of the tooltip like so: Code: <a style='margin-left: 10px; position:relative' class="tooltip" width="100" title="This is some text to display"> This width will then be passed into the javascript above and used to set the width of the tooltip. How can I modify the above code to do this?? Thanks I hope someone can help me. I am having a problem with a dropdown selection box. I think Javascript is the way to solve it, but I am unfamiliar with the language, any help would be much appreciated. My drop down box selection box is created dynamically with data from a mysql database. It is a list of artists/musicians. I have 1 column in the db table called artist_name and another called artist_id. The sql query selects both of these columns and displays artist names in the select box. What I need is for the artist_id to be sent along with whichever artist is selected in the select box to the next page upon submitting the form. I put in a input field, which I will make hidden eventually. But I want the input field to change to whatever the correct id is when the select box is changed. I am thinking that the way to do this would be with a javascript onchange event. Will this work ? If so I need help with the code. I have searched for examples online and while somewhat helpful, I am such a newbie with Javascript that I could not figure out how to modify the examples to what I need. Here is the php/mysql code I have so far: PHP Code: $query4 = "SELECT artist_id,artist_name FROM artists ORDER BY artist_name"; $result4 = mysql_query($query4) or die(mysql_error()); echo "<select name='artist'> <option value=''>Select Artist</option>"; while($row=mysql_fetch_array($result4)) { $artist_id=$row['artist_id']; echo "<option value='". $row['artist_name'] ."'>". $row['artist_name'] ."</option>"; } echo "</select> <input type='text' name='artist_id' id='artist_id' size='5' class='textfield' value='$artist_id'>"; Hi all! I'm new and, well, I don't know a whole lot about javascript, honestly. I'm much more of an artistic design person than I am a coder. That said, I recently made a dropdown menu using an old version of Fireworks, but I've been having trouble getting it working on my site. The menu displays alright, but the dropdown does not appear right below it...instead, it's off and to the right somewhere. For the life of me, and with my limited knowledge, I cannot figure out how to fix it. The menu in question is the 'store' button on the following webpage- http://rlfcomic.com/test2.php# Note how the dropdown just seems to float at an arbitrary spot. Any ideas on what I'm doing wrong? Hi I have DropdwonList with elements, 1,2,3 and 4.. and I have another DropdownList with options Normal, Standard, Emegency, and Expendited. Can you help me with a code, so that when I select "1" option on the first dropdown, the "Emegency" option on the second dropdown is set/selected. Thanks in advance |
|||||||