controlling the width for a select box - javascript

i was trying to change the width of a particular optional value under <select> attribute, something like this. But i am getting troubled as in IE the select box along with the option value gets expanded. Is there any simple way to make the <option> only to expand and not the <select> box.. mainly in IE ....

<select width="123" style="width: 123px;">...</select>
Seems to be quite compatible solution working with all newer browsers.

This can be done using the jQuery plugin found at
http://www.jainaewen.com/files/javascript/jquery/ie-select-style/#demo
The plugin is very simple to use. Here's a breakdown of some full working code.
HTML
<select id="test" >
<option>choose on</option>
<option>aaaaaaaaaaaaaaaaaaaaaaa</option>
<option>bbbbbbbbbbbbbbbbbbbbbbb</option>
<option>ccccccccccccccccccccccc</option>
<option>ddddddddddddddddddddddd</option>
</select>
CSS
#test{
width:100px;
border:1px solid red;
}
jQuery
Don't forget to include the jQuery Js file and this plugins' Js file.
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://files.jainaewen.com/files/javascript/jquery/ie-select-style/jquery.ie-select-style.min.js"></script>
Then put the following right after:
<script type="text/javascript">
$('#test').ieSelectStyle();
</script>
All this should go before the closing </body> tag
Check working example at http://jsfiddle.net/7Vv8u/2/

Styling <select> items is a bit of a problem since there is no cross-browser solution without using JavaScript - since each browser handles rendering of the form controls differently.
I would suggest using an <ul> element and applying the functionality/design to act more like a <select> element - using JavaScript
this article may help you with this

Related

search is disabled with select2 library with bootstrap modal

I am trying to use select2 library with my page using php everything working perfect even is behaving well but problem is that i cannot search anything the search is by default disabled which was my main reason to use this library.
<https://jsfiddle.net/udp3qq7t/5/
I don't see any problem in your code. Here is the working demo of select two I extracted from your code.
<select class="scselect" name="cname">
<option>Select</option>
<option>Pakistan</option>
<option>Dubai</option>
<option>Bangladesh</option>
</select>
<script>
$(document).ready(function() {
$(".scselect").select2({});
});
</script>
JSfiddle
Make sure PHP code is not breaking your output
I have sort out the issue by Select2 doesn't work when embedded in a bootstrap modal
post.By (remove tabindex="-1" from modal)

Uncaught TypeError: Object function (a,b){return new e.fn.init(a,b,h)} has no method 'widget'

I am using Jquery-ui-multiselect-widget for converting noramal select box to multiselect MultiSelect Widget.
Link for jquery UI pluggin : https://github.com/ehynds/jquery-ui-multiselect-widget
HTML :
<select id='noOFRows' multiple="multiple" > <option value="10">10<option value="20">20<option value="30">30<option value="40">40<option value="50"> 50 </option> </select>
JS code :
$(document).ready(function(){
$("#noOFRows").multiselect();
});
but getting this error.
Error in Jquery.multiselect.js:
Error in mail index.php
Looks like you are missing jQuery UI library because the widget framework is provided by jQuery UI
If you do not want any other widgets from jQuery UI, then go the the custom download option ans select only widget option and download, then add the jquery-ui-xxx.js file to the page after jQuery is included
There was one more case regarding the extensions you installed in your browsers. in some case the add blocker will be the root cause of these errors. In chrome you have "incognito window", make sure it working on that window.
The thing is, when you include jQuery UI library, you should make sure that this library is before the multiselect library.
Say:
<script src="JS/jquery-ui.min.js" type="text/javascript"></script>
<script src="JS/jquery.multiselect.js" type="text/javascript"></script>

My div show/ hide code works fine on a static HTML page but doesn't work on a Wordpress 3.5.1 page

This is sort of a condensed version of the code, the real version is too long to post but this is enough to represent the concept. I am using this to switch guitar diagrams based on several choices represented by anchors with the corresponding id in the href="". After spending several days getting it to work just right on a static html page, the script won't work in a Wordpress page which is where I intend to use it. I have tried it with the script in the head or inline (which shouldn't matter) - but either way it will not function. I know that Wordpress and certain plugins use Jquery so there may be a version mismatch causing conflicts. I am not (yet) an expert in javascript but I know there are several ways to skin a cat as the saying goes, I just need to find one that plays nice with Wordpress. Any help would be greatly appreciated...
<script src="http://code.jquery.com/jquery-1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
var divswitch = $('div.diagram_container a');
divswitch.bind('click',function(event){
var $anchor = $(this);
var ids = divswitch.each(function(){
$($(this).attr('href')).hide();
});
$($anchor.attr('href')).show();
event.preventDefault();
});
});
</script>
<style>
.diagram {
margin: 0;
width: 100%;
}
.diagram_container {
width: 100%;
}
</style>
<div id="RH_RW_Div" class="diagram_container" style="float:left; display:block;">
<div class="diagram_menu">
<a class="checked" href="#RH_RW_Div"><span class="checkbox_label">Right Handed</span></a>
<a class="unchecked" href="#LH_RW_Div"><span class="checkbox_label">Left Handed</span></a>
</div>
<img class="diagram" src='images/RH_RW.gif' /><br />
</div>
<div id="LH_RW_Div" class="diagram_container" style="float:left; display:none;">
<div class="diagram_menu">
<a class="unchecked" href="#RH_RW_Div"><span class="checkbox_label">Right Handed</span></a>
<a class="checked" href="#LH_RW_Div"><span class="checkbox_label">Left Handed</span></a>
</div>
<img class="diagram" src='images/LH_RW.gif' /><br />
</div>
Wordpress uses by default jQuery.noConflict(). This is to assure that there is no conflict by other libraries using the $ variable. That's why your console says it's not a function.
However, obviously, the jQuery variable still works, and you should use that, and passing to your function the $ variable yourself to enable the shorthand version of jQuery.
So your code should look like this:
jQuery(document).ready(function($){
// Your functions go here
});
My guess is that your Wordpress install or a plugin is already loading up jQuery in the head. Check to see if it exists there, and if it does, don't call it again.
If that doesn't do it and you have this site online, send me the link and I'll take a look.
Calling jQuery twice will often lead to problems. There is also a proper way to load jQuery and override the Wordpress version if you specifically need 1.8.3 (wp_register_script and wp_enqueue_script), but I don't think you need to go down that route yet.

How can I build a <select> with multiline options? [duplicate]

This question already has answers here:
Are Multi-line Options in Html Select Tags Possible?
(8 answers)
Closed 8 years ago.
I need to build a multi-line select control. All the <option>'s where text is wider than 300px (for example) become to have the necessary lines to don't exceed the mentioned limit.
These images speak for themselves:
First of all I tried this, but does not work.
<html>
<head>
<style>
option{
width: 100px;
white-space: wrap;
}
</style>
</head>
<body>
<select>
<option>I'm short</option>
<option>I'm medium text</option>
<option>I'm a very very very very very very very very very long text</option>
</select>
</body>
</html>
I'm using bootstrap framework and I thought that maybe I could use dropdown control to obtain the result. I've tried setting the max-width CSS property, but it does not work too...
How can I achieve this?
<option> tags have limited styling capabilities and do not support formatting.
You can use a JavaScript-based alternative. There are plenty out there if you look around.

ColdFusion: Modify combobox options in cfgrid

I have a <cfgrid> with one <cfgridcolumn>. I'm using the values attribute for that column:
<cfform>
<cfgrid name="grdBrokers"
format="html"
bind ="cfc:CFC.Brokers.getGridData ( {cfgridpage},{cfgridpagesize},{cfgridsortcolumn},{cfgridsortdirection})"
onChange="cfc:CFC.Brokers.editGridData( {cfgridaction},{cfgridrow},{cfgridchanged})"
selectMode = "edit">
<cfgridcolumn name="name" header="Name" values="Item1,Item2" >
</cfgrid>
</cfform>
The values attribute causes a combobox to appear when the user edits a cell in the Name column:
I need to dynamically (without reloading the page) change the options list of that combobox. After much research (stackoverflow.com, raymondcamden.com, etc.) I concluded there are no ColdFusion methods for doing this, so I figured I'd use JavaScript. To locate the id for the combobox I viewed the HTML source for my page and found the following:
<form name="CFForm_1" id="CFForm_1" action="/index2.cfm" method="post" onsubmit="return _CF_checkCFForm_1(this)">
<div id="cfgrid1344103796431" style="border: 1px solid #cccccc; overflow: hidden;"></div>
<select id='cf_grid_select0' class='ygrid-editor'>
<option value='Item1'>Item1</option>
<option value='Item2'>Item2</option>
</select>
<div>
<input type="hidden" name="__CFGRID__CFForm_1__grdBrokers" value="" /></div>
</form>
So, the id I want is cf_grid_select0. However, this element isn't found by document.getElementById(). I have also inspected the page using FireBug and can't find the cf_grid_select0 element on the DOM tab. It's contained in document.body.innerHTML as raw HTML text, but not as its own element in the DOM.
Here is my code that attempts to find cf_grid_select0:
<script type="text/javascript">
function find( ) {
var cbxFind = document.getElementById( 'cf_grid_select0' );
if ( cbxFind ) alert( "Found!" );
else alert( "Not found!" );
}
</script>
<form>
<input id="btnFind" type="button" onclick="find();" value="Find">
</form>
When I click the Find button, I get a popup saying "Not found!".
My question is: using JavaScript or jQuery, how can I locate a <select> that my browser obviously knows about, but doesn't seem to be in the DOM? I suspect ColdFusion.getGridObject() might be what I'm looking for, but I can't find a way to select the combobox using that method, either.
Thank you!
UPDATE:
It appears that ColdFusion is using ExtJS to transform the <select> into a ComboBox after the page loads, apparently removing the <select> from the DOM. I am now researching how to locate a ExtJS ComboBox.
I would almost certainly use jQuery! Try this:
<script>
$(document).ready(function() {
var $mySelect = $("#cf_grid_select0");
alert("I found it..." + $mySelect.attr("id"))
});
</script>
Good luck.
NINJA EDIT
If you're viewing the real source then it IS in the DOM. If you're viewing a "generated" JS kind of source, then it is tricky, but I think jQuery can detect new elements added to the DOM anyway.

Categories