Change only one select style in jquery plugin - javascript

So I am using chosen - jquery plugin for selects.
Say I have four selects on the webpage, and I want the last one to open upward. I know how to change style to open select upward, but I can't figure out how to do this for only one select. It is probably trivial but I couldn't find the answer anywhere
To install it I downloaded files chosen.jquery.min.js as well as chosen.css and I put following code into my js file that handles all selects:
$(document).ready(function() {
$('select').chosen({ width: '100%', disable_search_threshold: 9 });
});
I should probably add classes to selects, add style that I want to override to chosen2.css, right? But then how to connect those particular selects with new css file?
Here is a fiddle of what I am trying to accomplish:
fiddle

EDITED:
I modified your fiddle, just put your last select inside a div and apply your css just to selects inside that div:
Drop Up
<div class="drop-up">
<div class="box" style="margin-left: 50px; margin-top: 15px;">
<select class="chosen-select">
<option selected="selected">10</option>
<option>20</option>
<option>50</option>
<option>100</option>
</select>
</div>
</div>
CSS
.drop-up .chosen-container .chosen-drop {
border-bottom: 0;
border-top: 1px solid #aaa;
top: auto;
bottom: 40px;
}
Let me know if this is what you are looking for :)

I think you can use classes or Ids on your select tag
for example :
$(document).ready(function() {
$('select.last').chosen({ width: '100%', disable_search_threshold: 9 });
});
or
$(document).ready(function() {
$('#last').chosen({ width: '100%', disable_search_threshold: 9 });
});

Related

Right-align dropdown menu in select2

Is there a way to right-align the dropdown menu with dropdownAutoWidth: true in a select2, instead of the standard left-align? I want the select to stay the same, but the dropdown to move to the left so it aligns with the select on the right side. See snippet below with the wrong alignment...
Note: I want different sizes of the select and the dropdown just as shown.
Edit // Updated with suggestion to add direction: rtl; text-align: right;. This only right-aligns the text. I want the whole dropdown to right-align with the selected option above it. E.g. the dropdown should stick out to the left of the selected option, not to the right.
Edit 2 // Updated with .select2-dropdown { left: -69px !important; } This makes it look the way I want, but is there a way to not have to set a fixed value of -69px?
$(".form-control").select2({
width: '100px',
dropdownAutoWidth : true,
});
.select2-container--default .select2-results > .select2-results__options { direction: rtl; text-align: right; }
.select2-dropdown {
left:-69px !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<select class="form-control">
<option selected="selected">orange</option>
<option>white</option>
<option selected="selected">purple</option>
</select>
I want it to look like this, but not with a fixed value to achieve it.
As you want to have different sizes of the select and the dropdown, here is my solution using select2 built-in options and some CSS, but maybe not perfect one.
Making rtl is dead easy, just use dir, but we need to pass some other options as shown below:
$('select').select2({
dir: "rtl",
dropdownAutoWidth: true,
dropdownParent: $('#parent')
});
The key here is dropdownParent, also you need to edit your HTML as follow:
<div id='parent'>
<select>
<option selected="selected">orange</option>
<option>white</option>
<option selected="selected">purple</option>
</select>
</div>
And finally you need some CSS:
#parent {
/* can be any value */
width: 300px;
text-align: right;
direction: rtl;
position: relative;
}
#parent .select2-container--open + .select2-container--open {
left: auto;
right: 0;
width: 100%;
}
You can see it in action here on codepen
If you have more that one select, you need some JS code to handle dropdownParent option. btw your life will be easier if you remove dropdownAutoWidth option ;)
I managed to make it work slightly different. I needed to expand the dropdown to the left while keeping the options texts aligned left. I thought it's worth sharing. Here is the setup:
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/js/select2.min.js"></script>
<div id="select2-container">
<select class="form-control">
<option selected="selected">orange</option>
<option>white</option>
<option>purple</option>
</select>
</div>
CSS
.select2-container.select2-container--default.select2-container--open {
right: auto;
left: unset !important;
}
.select2-container.select2-container--default.select2-container--open .select2-dropdown.select2-dropdown--below {
width: fit-content !important;
left: unset;
right: 0;
}
JavaScript
$('.form-control').select2({ dropdownParent: $('#select2-container') });
Result looks like:
If still looking for an alternative method. I recently needed to achieve this as well and the RTL answer was not a viable solution for my project. If you are using the select2.js(4.0.6) and do not mind modifying the script you can replace the following code and achieve right positioning with adding a class to the target element.
Look for lines 4381 to 4384
var css = {
left: offset.left,
top: container.bottom
};
Replace with the following
var containerWidth = this.$container.outerWidth()
var right = ($("body").outerWidth() - (offset.left + containerWidth));
if (this.$element.hasClass("right-align")) {
var css = {
right: right,
top: container.bottom
};
} else {
var css = {
left: offset.left,
top: container.bottom
};
}
Add the class right-align to your target select input.
<select id="client_select" class="form-control right-align">
<option value="01">Example One</option>
<option value="02">Example Two</option>
<option value="03">Example Three</option>
</select>
That should be all you need. If the target element has the class then the code will position the dropdown using right instead of left positioning. Should work the same if container is set to a parent. However, this is not thoroughly tested. It may not be an elegant solution, but it does not require overriding anything with CSS. Should do the trick until an update is made to add an option for handling right aligned dropdowns. Hope it helps.
init select with dir: "rtl" such as:
$('select').select2({
dir: "rtl,
...
...
...
...
})
option tag of select cannot be modified by css it need to be done jquery plugin
http://selectric.js.org/demo.html
It should help you my friend
I think it will help you to get what exactly you need.if u wont get it ping me back
select {
text-align-last: right;
}
option {
direction: rtl;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<select class="form-control">
<option selected="selected">orange</option>
<option>white</option>
<option selected="selected">purple</option>
</select>

do conditional things in noscript

Good day,
I have a function inside a javaScript file. I have 10 button will trigger this function to do something based on the button name. The code is something as follow:
function doSomething( name ){
switch(name){
case "1";
alert("i am 1");
break;
case "2";
alert("i am 1");
break;
// and so on...
}
}
This doSomething is working fine. However, I would like to alert other things when there is noscript or JavaScript is disable.
I do something like:
<noscript>
// if click on button 1, display <image src="image/img1" />
// if click on button 2, display <image src="image/img2" />
// and so on..
// I would like display different image when different button clicked.
</noscript>
Kindly advise.
No way. HTML5 itself is just a document sturcture and CSS3 provides style. That is, HTML5 as is has no behavior, thus, you won't be able to interact with the document without JavaScript.
If JavaScript is disabled and you provide a <noscript> element, you should tell your users that your Web application won't work without JavaScript.
You could do something like the checkbox hack in css to show a message in a hidden div, Style the labels like your buttons.
input[type=checkbox] {
position: absolute;
top: -9999px;
left: -9999px;
}
label {
background: #08C;
padding: 5px;
border: 1px solid rgba(0,0,0,.1);
border-radius: 2px;
color: white;
font-weight: bold;
}
.to-be-changed {display:none;}
input[type=checkbox]:checked ~ .to-be-changed {
display:block;
margin-top:30px;
font-size:120%;
color:red;
}
<noscript>
<div id="buttons">
<input type="checkbox" id="button1"><label for="button1">button 1</label>
<input type="checkbox" id="button2"><label for="button2">button 2</label>
<input type="checkbox" id="button3"><label for="button3">button 3</label>
<div class="to-be-changed"> You need to have javascript activated for the buttons to work !</div>
</div>
</noscript>
Obviously turn js off to se it working. Here's a link to the page I got the info from Css click events

Scrolling a DIV to Specific Location

There is a plethora of similar questions around but none of them seem to be looking for what I'm looking for, or else none of the answers are useful for my purposes.
The jsfiddle: http://jsfiddle.net/tumblingpenguin/9yGCf/4/
The user will select an option and the page will reload with their option applied. What I need is for the "option list" DIV to be scrolled down to the selected option such that it is in the center of the option list.
The HTML...
<div id="container">
<a href="#">
<div class="option">
Option 1
</div>
</a>
<!-- other options -->
<a href="#">
<div class="option selected"> <!-- scroll to here -->
Option 4
</div>
<!-- other options -->
<a href="#">
<div class="option">
Option 7
</div>
</a>
</div>
The selected option is marked with the selected class. I need to somehow scroll the DIV down to the selected option.
The CSS...
#container {
background-color: #F00;
height: 100px;
overflow-x: hidden;
overflow-y: scroll;
width: 200px;
}
a {
color: #FFF;
text-decoration: none;
}
.option {
background-color: #c0c0c0;
padding: 5px;
width: 200px;
}
.option:hover {
background-color: #ccc;
}
.selected {
background-color: #3c6;
}
I've seen this done on other websites so I know it's possible—I just haven't a clue where to begin with it.
P.S. jQuery solutions are acceptable.
Something like this http://jsfiddle.net/X2eTL/1/:
// On document ready
$(function(){
// Find selected div
var selected = $('#container .selected');
// Scroll container to offset of the selected div
selected.parent().parent().scrollTop(selected[0].offsetTop);
});
Without the jQuery (put this at the bottom of the < body > tag:
// Find selected div
var selected = document.querySelector('#container .selected');
// Scroll container to offset of the selected div
selected.parentNode.parentNode.scrollTop = selected.offsetTop;
demo: http://jsfiddle.net/66tGt/
Since you said JQuery answers are acceptable, here's an example of what you're looking for:
$('body, html').animate({ scrollTop: div.offset().top-210 }, 1000);
Replace div for whatever element you want to scroll to.
Here is one possible solution that may work for you:
Demo Fiddle
JS:
$('#container').scrollTop( $('.selected').position().top );
Take a look at this fiddle : http://jsfiddle.net/9yGCf/8/
As requested it scrolls to the middle of the div (you can change the offset by however much you want to make little adjustments). I would probably suggest setting either a line height with some padding and whatnot and then do the math to change the offset that I have at -40 so that it does put it in the middle.
But I used jquery and came up with this quick little code... also added some code to change the selected option
$('.option').click(function(){
$('.selected').removeClass('selected');
$(this).addClass('selected');
$(this).parent().parent().scrollTop(selected[0].offsetTop - 40);
});
This magical API will automatically scroll to the right position.
element.scrollIntoView({ block: 'center' })
See more details:
https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

Style Select Element with same style as the selected option

I am trying to style a select element that is created in php. The select code is very simple and I can style the text color of the drop down. But this doesn't style the select element when a option is selected. Also this code doesn't work on Safari at all.
Code:
<div class="theme">
<select class="theme" name="select_theme">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>
</div>
CSS:
.theme {
width: 200px;
}
.theme select {
width: 200px;
background-color: rgba(200,200,200,0.8);
}
.theme select option[value="red"] {
color: red;
}
.theme select option[value="green"] {
color: green;
}
.theme select option[value="blue"] {
color: blue;
}
How do I style the default select so that it matches the option style rule?
How to get this to work on Safari? Possibly IE I haven't checked it yet no Windows system ATM.
Is there a way to get these rules to display an image as well? I've tried a few things but seems it requires Javascript which I try to avoid when I can.
I made a JSFiddle to demonstrate this.
There's no way you can accomplish this without JavaScript:
$('select.theme').change(function () {
$(this).css('color', $(this).find('option:selected').css('color'));
}).change();
Here's your fiddle: http://jsfiddle.net/uCmSR/2/

Jquery text toggle

I am trying to make a jquery text toggle. If you rollover the element, the text appears next to it and vice versa, it dissappears when you leave the element area.
My code does not work yet. Also, i would like to include different texts for different links. If there is a simpler way please suggest.
HTML
<div id="container"></div>
clickclickclick
JS
$("#ovr").mouseenter(function() {
$(#container).html("wazaap");
}).mouseleave(function() {
$(#container).html();
});
You are forgetting the quotes in the jQuery selector:
$("#ovr").mouseenter(function() {
$("#container").html("wazaap");
}).mouseleave(function() {
$("#container").html("");
});
Edit
If you want different sentences, you can do this:
JS
var description=new Array();
description["one"]="Here comes the first";
description["two"]="And here the second";
description["three"]="Now let's have the third";
description["four"]="Finally the last one, fourth";
$("a.link").mouseenter(function(){
$("span#description").text(description[$(this).attr("id")]);
}).mouseleave(function(){
$("span#description").text("");
})​
HTML
one
two
three
four
<span id="description"></span>​
Check working here
http://jsfiddle.net/Wpe2B/
Try to do it with hover() function. Code will be cleaner.
Basic example:
jQuery:
$("#container").hover(
function() {
$('.cText').text("click");
},
function() {
$('.cText').text("");
});
CSS:
#container {
position: relative;
background-color: #EEEEEE;
width: 100px;
height: 100px;
position: relative;
display: block;
}
HTML:
div id="container"></div><span class="cText"></span>
Regards
Update
Base on OP's comments wanting to use several links to show text I tried this:
http://jsfiddle.net/cZCRh/4/
It doesn't quite work with a class because all links get the same text
This works http://jsfiddle.net/cZCRh/1/
<div id="container"></div>
clickclickclick
$("#ovr").mouseenter(function() {
$('#container").html("wazaap");
}).mouseleave(function() {
$("#container").html("");
});
​
The problem was the mouseleave was in the wrong place as well as missing quotes around the element IDs

Categories

Resources