What I am trying to achieve is a second dropdown list to be populated with values based on the selection of the first dropdown list.
I've got it to work using the following:
http://jsfiddle.net/ydPfH/6/
The problem is that an external plug in that I am using to display images in a drop down list somehow stops this code from working properly.
The code that initalises this plug-in is $("body select").msDropDown(); and what I have below the simple search form that uses this plug-in is a jquery expandable div so you click Advanced Search to expand the form with the dynamic dropdowns.
<a href="#" rel="toggle[advancedsearch]" data-openimage="images/collapse.png" data-
closedimage="images/expand.png">Advanced Search<img id="expand"
src="images/collapse.png"/> </a>
<div id="advancedsearch">
<p>Document Properties:</p>
<form>
<select id="tags" name="tags" class="tags">
etc....
What I'm hoping for is some kind of onclick or something even easier to call to another JS method to somehow remove the $("body select").msDropDown(); initialisation or to even initialise something silly that in turn removes it.
Full source of the page can be seen here if it helps: http://jsfiddle.net/pQ9LT/
Thanks,
Martin
If I'm getting this right, here is the answer:
You should add class attributes to the <select> elements that are going to be using your msDropDown plugin. Then initialize the plugin like this $('select.yourClass').msDropDown();
where yourClass is the class name you assigned these <select> elements.
The body part in your selector is superflous.
This way, jQuery will only apply the plugin to the <select> elements "marked" with you class name and not all of them so you can use the other "normal" <select> elements without interference.
Hope I helped you out.
I'm not completely clear on what your overall requirements are and what may or may not be acceptable so where are a few thoughts that I have.
Give the select elements you do not want styled as image combo boxes a class or an id. Then use the :not() selector in combination with your msDropdown initialization
$("body select:not('.nostyle')").msDropDown(); //using the class 'nostyle' to filter out the elements that should get the image combobox
Use a more specific selector in the initialization call; this is kinda the opposite of the above
$("body select.classOfSelectsTobeStyled").msDropDown(); //using the class 'classOfSelectsTobeStyled' on elements that should get the image combobox
Related
I have a small button that hides/shows an article on a WordPress implementation food blog.
jQuery('.post-entry p').nextUntil('div.tasty-recipes').wrapAll( "<div class='recipe-article recipe-hidden'></div>");
jQuery('#display-recipe-toggle').click(function(){
jQuery('.recipe-article').toggleClass('recipe-hidden');
})
The recipe card is injected, otherwise I would just include it in the template files.
Ideally, I would like my hide/show to include the first paragraph, but does not. I have tried all sorts of variations of
jQuery('.post-entry').nextUntil('div.tasty-recipes').wrapAll( "<div class='recipe-article recipe-hidden'></div>");
but the toggle doesn't work (doesn't get wrapped in the div appropriately).
Here is a page
If I correctly understood your requirement, you want to show 1st paragraph always, and other piece of article toggle on btn click. If so, you can exclude them using jQuery not() function.
jQuery('#display-recipe-toggle').click(function(){
jQuery('.recipe-article').children().not('ul, h2:first, p:first').toggle();
})
Also, I'd advise you to use jQuery native toggle() method instead of toggleClass. It makes no sense to toggle class with only property display:none; when native method is provided to do the same work.
I have a checkbox that I'm using with the jqueryui button widget and I would like to be able to show or hide it depending on other factors. However, I'm finding that .hide() doesn't work. Upon digging deaper, it appears that it doesn't work because caling .hide() on the checkbox would only affect the checkbox element and not the button element being displayed to the user.
I'm sure that I could use jquery and some knowledge of how the button is rendered to hide the element, but that becomes implementation dependent and I would prefer to avoid that so it doesn't break with a future version.
Alternatly, I could wrap the whole thing in some other element and show or hide that instead. This is probably the best idea of the ones I've been able to think of, but I'll have to play with the CSS to make sure that this extra element doesn't throw off the layout of the rest of the page.
Is there a correct way to do this?
Here is a jsfiddle showing that .hide() does not work.
http://jsfiddle.net/ormico/2zxde/
<label for="a">AAA</label><input id="a" type="checkbox"/>
<button id="h">Hide</button>
$("#a").button();
$("#h").click(function(e){
e.preventDefault();
$("#a").hide();
});
this work but i don't know why... put the html code into a div an hide/show this
<div id="pre"><input id="a" type="checkbox"/><label for="a">AAA</label></div>
<button id="h">Hide</button>
and jquery
$("#a").button();
$("#h").click(function(e){
e.preventDefault();
$("#pre").hide();
});
You can find documentation for your button/checkbox here : http://api.jqueryui.com/button/#method-destroy
You can do it this way :
$("#a").button();
$("#h").click(function(e){
e.preventDefault();
// destroy jQueryUI button
$("#a").button('destroy');
// and then hide the original checkbox
$("#a").hide();
});
You are correct it is only hiding the actual input element. If you also want to hide the label, (ui-widget). You could do something like #13ruce1337 said or something like this:
$("#a, label[for=a]").hide();
Here is a jsfiddle example.
The answer is simple: the button consists of 2 DOM elements in your html tree.
Simply call hide() and show() on both instead of just 1:
$("label").hide();
$("#a").hide();
Demo: http://jsfiddle.net/2zxde/16/
I'm not really into using javascript and jQuery so please add detailed answers.
I need to add a jQuery effect to different divs with the same class, so that when I click on a div 1 with class item, another div info will appear in a specific container.
Also, if I click on div 2 with the same class item, another div pics will appear in the same container as info while info will disappear.
I was going to use this:
$(document).ready(function(){
$("#box1").click(function(){
$("#box1").fadeOut(250);
});
$("#box1").click(function(){
$("#box2").fadeIn(500);
});
});
But this is not valid for using about 10 divs and another 10 displaying and hiding divs.
I would use many lines of code and I am not sure that it would work.
You could use the selector $(".item") to get all the divs you're interested in.
Class selector sounds like what you need: http://api.jquery.com/class-selector/
You can differentiate the ids once you're inside the click call and take a different action. but the class selector will let you use the click event handler on all of the divs you're interested in.
sample code below
$(document).ready(function(){
$(".item").click(function(e){
// output the id of the clicked item
console.log($(e.target).attr("id"));
if($(e.target).attr("id")=="box1"){
//do something for if the clicked item is box1.
$("#box1").fadeOut(250);
$("#box2").fadeIn(500);
}
});
});
Without your html, it's hard to say exactly. But, here's a starter point.
Your existing jQuery is like so, which is grabbing every div by ID.
$(document).ready(function(){
$("#box1").click(function(){
$("#box1").fadeOut(250);
});
$("#box1").click(function(){
$("#box2").fadeIn(500);
});
});
An improvement would be to use a class rather than an ID, and you could do something like so.
NOTE: The below assumes you assign either a different class, or an additional class of itempic to the div(s) you want to trigger the pics to be displayed:
$(document).ready(function(){
$(".item").click(function(){
$(".info").fadeOut(250);
});
$(".itempic").click(function(){
$(".pics").fadeIn(500);
});
});
If you have multiple divs that are going to have this same functionality (for example, you've got a bunch of products, each with an info box and a pic box), then you'll need to do something with "containing" the selectors to the given items. With some example HTML, I could provide an answer that takes that into account.
Structure you html similar to this
<div id="container">
<div id="info">info contents</div>
<div id="pic">pic contents</div>
</div>
<div class="item" data-related="#info">your contents</div>
<div class="item" data-related="#pic">your contents</div>
..etc.
and use
$(function(){
$('#container').children().hide(); // initial hiding
$('.item').click(function(){
var relatedId = $(this).data('related');
$(relatedId).show().siblings().hide();
});
});
Demo at http://jsfiddle.net/gaby/mTSZv/
When selecting with jQuery you need to use #id_name for IDs and .class_name for classes. When selecting div, tr, td, ... you need no special symbol before the name. So:
$('#id_name').click(); // click on every item of the ID 'id_name'
$('.class_name').hide(); // make all items invisible that have class 'class_name'
$('tr').addClass('class_name'); // adds the class 'class_name' to all tr items
IDs are unique. Classes can appear more than once.
Just read the examples on jQuery API
In order to get started with JS jQuery is very good. Very fast to do, but don't forget jQuery is a library that has to be loaded making these short commands possible. Pure javascript will be faster.
Don't forget, you can combine JS and jQuery, as jQuery is JS. Switching to pure JS will also make you see what your scripts exactly do.
I am having a aspx page,in which there is a Select box control
<select name="selViewPerPage" id="selViewPerPage" style="width:30px">
In order to bring a particular style in all browsers, i am replacing this html control with dynamic select box using "selectBox.js" . Now the problem is , i am having two dropdowns in the page ,during runtime they are generated with same class name without any ids.So while trying to position the controls using css,the both drop downs takes the same position.
So i am not sure ,how to handle this situation .Please let me know,if you need more information.
Thnks
Try using a pseudo-selector to get just a specific item, such as the first, last, or nth item. See :eq() or :first() or :last() for example: http://api.jquery.com/category/selectors/. Using one of those sorts of selectors, you can get just the element you want to modify and apply styles to it individually. Ex.
$('ul').first()
or
$('ul:last')
or
$('ul').eq(1)
Or some other variant of these.
If you have multiple instances of items with the same class, use the .eq() selector.
$('.someSelect').eq(0) <-- first instance
$('.someSelect').eq(1) <-- second instance
I'm trying to come up with a javascript/jquery method that will allow me to remove all select list options containing a particular text pattern on page load.
So far I have:
$('select option:contains(\'foo\')')
Which returns me all the elements - how can I remove them? My initial thought was something along the lines of:
$('select option:contains(\'foo\')').each().remove();
But this throws an exception.
Am I approaching this incorrectly?
$("select option:contains('foo')").remove();
jQuery functions automatically work on all selected elements. No need to use each() here.