i am trying to control a set of drop-down menus,by changing the first menu then all the others will have the first menu selected item as selected.
In my example,what i want to achieve is : when changing the selected value of the 'select for All' then the rest should be set to that value.
i hope i made it clear.
thanks in advance.
Check the below screenshot:
UPDATED!!!! Try this link DEMO
$("#sortedby").change(function () {
$("select").val($(this).val());
});
UPDATED!!!!
Here's an example of a jQuery implementation (change your selectors accordingly):
$(function() {
$('select.select-all').change(function() {
$('select', $(this).closest('tr')).val(this.value);
});
});
Related
I use summernote on the bootstrap modal.But when click the dropdown item on the toolbar, the dropdown menu not show on the right place or even not exit the drop down DOM.I'll show you the picture below:
enter image description here
And I've search for a long time in summernote github issue list and stackoverflow.I try add "dialogsInBody: true", but not working.Anyone can help me about this problem.Thank you!
use $('.dropdown-toggle').dropdown();
Try this. Here work fine.
callbacks: {
onInit: function() {
//when inside a modal, re-link the dropdown
var thisNote = $(this);
if(thisNote.closest('.modal').length>0){
thisNote.next().find('.dropdown-toggle').dropdown();
}
}
}
I'm using a selectbox on a Bootstrap platform to list multiple country flags that can be selected. On select the URL should be changed to the page of the country.
However, since I am not using <option> values, I don't know how to accomplish this. When I do work with <option> the flags won't display as shown below. Does anyone know how to add on select for this function?
<div class="bfh-selectbox bfh-countries pull-left" data-flags="true" data-country="NL" data-flags="true" data-blank="false" data-available="NL,BE">
</div>
Got it.
$(document).ready(function(){
$('.bfh-selectbox').on('change.bfhselectbox', function () {
if($(this).val()=="something"){
window.location.href="http://www.somelink.com";
}
else if($(this).val()=="somethingelse"){
window.location.href="http://www.someotherlink.com";
}
else {
}
});
});
Is there a way I can use a button(input type="button") to show the Bootstrap modal. Basically the default is using anchor based on the documentation. I have tried experimenting but no luck.
I'm not sure if my coding is wrong or the Bootstrap modal can only be activated if it is an anchor tag. I have also tried googling or researching if anyone has created this kind of result.
This should work the same way as with an anchor tag.
The problem is, it's based on the href attribute, referring to the id of the modal window, and placing this attribute on a button might cause some html validation to go wonky.
If you don't care about that kind of stuff you can just replace your a tag with a button tag.
Edit: just noticed you were using an input element rather than a button. Either way, it should still work.
Edit2: Just verified if what I was saying wasn't total BS by looking at the bootstrap code (2.3.2), and found this snippet:
$(document).on('click.modal.data-api', '[data-toggle="modal"]', function (e) {
var $this = $(this)
, href = $this.attr('href')
, $target = $($this.attr('data-target') || (href && href.replace(/.*(?=#[^\s]+$)/, ''))) //strip for ie7
, option = $target.data('modal') ? 'toggle' : $.extend({ remote:!/#/.test(href) && href }, $target.data(), $this.data())
e.preventDefault()
$target
.modal(option)
.one('hide', function () {
$this.focus()
})
})
Looking at this, the href attribute isn't required, and you can use data-target instead when working with inputs and buttons.
simply u can fire event on Button Click and call function "onclick=showModal()"
JS CODE
function showModal()
{
$("#modal-window-id").modal("show");
}
I have a select menu that acts as a navigation to different absolutely positioned divs. whichever option is shown, that div fades into view via the added class having opacity equal to 1. I can get the divs to add the class based on the menu, but I can't seem to remove that 'active' class if the option is not selected- my JS is as follows:
$("#hine").change(function() {
var who=$('#hine option:not(:selected)').val();
var whon=$('#hine option:selected').val();
$(who).removeClass('active');
$(whon).addClass('active');
});
I have a jsfiddle setup here: http://jsfiddle.net/nwT9c/4/
Try this:
var whon = $('#hine option:selected').val();
$('.active').removeClass('active').addClass('inactive');
$(whon).removeClass('inactive').addClass('active');
jsFiddle
You are assigning the value of the not selected elements to the who variable.
Change to :
var who=$('#hine option:not(:selected)');
var whon=$('#hine option:selected');
and you should be good
I'd like to add a Next button to all (well... all except the last) panes of an accordion navigation device. As you'd expect, when you click the Next button, the current pane collapses and the next one opens.
It's on a Joomla site, and so we're using MooTools.
I'm having trouble getting the action of the click event to work. Any thoughts?
window.addEvent('domready', function() {
var accordion = new Fx.Accordion($$('#accordion h2'),$$('#accordion .content'), {
onActive: function(toggler,element) { toggler.addClass('active');element.addClass('active'); },
onBackground: function(toggler,element) { toggler.removeClass('active');element.removeClass('active'); }
});
$$('.button.next').addEvent('click', function(event){
event.stop();
accordion.display.getNext(); //HELP HERE PLEASE
});
});
Many thanks!!
Dan
Inspect your accordion instance in console.log(accordion) ;) Try accessing previous property of accordion instance. It doesn't documented and may change with future versions of MooTools More, but it is the easiest way to do what you want:
$$('.button.next').addEvent('click', function(event){
event.stop();
accordion.display(accordion.previous + 1);
});
Working fiddle here: http://jsfiddle.net/9859J/