I need to create a drop down list that contain multiple checkboxes as well as multiple levels. The user should be able to select an option and/or dig deeper to select sub categorical. See the example from the code below.
So far, I was able to create the drop down list and the check boxes. I am having problems getting the id of the button selected and opening the corresponding div
http://jsfiddle.net/Ammarcola/e5CZb/
How can I get the button working?
edit: I will explain my approach to make the code easier to read.
I am trying to create multiple with each of them containing a list of check boxes. Whenever a button is clicked, all the s should .hide() and only the requested would .show(). I am not worried about how the main would be reached again, but all the should reset once the drop down list is collapsed. Hope that helps.
I have given the corresponding id of the buttons to the Div's that have to be manipulated.. Then finding the button that was clicked and constructing the div that has to be opened..
Check this FIDDLE and let me know if this is what you were looking for ..
Or is it a different requirement..
$("button").click(function() {
$("p").toggle();
var btnID = $(this).attr('id');
var coresDiv = $('div#' + btnID);
coresDiv.toggle();
});
Related
I am a student (beginner coding level) coding a prototype and I am trying to make a custom scrollbar that shows highlighted markers of selected items on the page, similar to VS. I was wondering if anyone might help me with this or be able to point me to a source that shows examples of how to do this?
We have html, some css and javascript coded. I am a beginner so I have I have tried searching on websites for examples but have found none.
Our Javascript for selecting items:
$('.highlight').click(function () {
// Get the second class name of the parent li
var highlightClass = $(this).parent().parent().attr('class').split(' ')[
var highlightItem = '.' + highlightClass + ' > .menuDiv'
$(highlightItem).toggleClass('highlight-show')
})
The user should be able to select an icon that highlights that object from a long list of other objects, and then scroll down the page to be able to see all of the objects of the same ID that have been highlighted. There are multiple objects with the same ID on the page, so they would all be highlighted when the user selects one of them.
With the final result, those highlighted objects would show up as 'ticks' on the scrollbar so the user can easily find them on the page. This functionality would be used so that the user can easily find a certain item from a long list of items.
Thank you in advance.
I am working on an ecommerce site, I have a page that shows the products grid. There are two button side by side. One contains link to the post and other opens a dialogue box with textarea inside. (see picture)
Image 1
Image 2
Now, what I want is when I click the GETLINK BUTTON button it must take the href attribute of the VIEW BUTTON and populate in the textarea. But what I get in the link of 1st product only even if I click the other Get Link Buttons.
Here's the JS code:
function opengetlink(){
var sacprodlink = document.getElementById("sac_prod_link").href;
jQuery("#sac_link_text").html(sacprodlink);
}
Help would be appreciated, thanks in advance.
EDIT: Solved
$(".open").click(function() {
var link = $(this).closest('div.viewbutton').find('a.btn-link').attr('href');
$("#link_text").html(link);
});
Ids are given to HTML elements to make them unique. Since you have many elements of the same kind and want to perform the same operation on each of them, you should use classes. Give your View and Get Link buttons a class.
$(".sac_open_link").click(function() {
var link = $(this).siblings(".sac_prod_link").href;
$(this).html(link);
});
Really hope someone can help with this.
I am building a site and need to be able to have people display a price based on their preferred option.
To see what I mean, please look at this link where it is done perfectly: https://swiftype.com/pricing
...when people select monthly or yearly, the displayed price in the chart beneath changes dynamically and instantly (without page reload).
This is what I need (except with three option to choose, not one). I suspect it is jquery with dynamic divs, but I cannot make it happen.
If anyone can help, I would be so so grateful.
Best wishes, and thanks for your time. AB.
// make the billing period selected tabs work
$(function() {
var $pricingTable = $('#pricing-table');
$('#billing-picker .tab').click(function() {
var $selectedTab = $(this);
var selectedPeriod = $selectedTab.data('period-length');
$('.tab').removeClass('selected');
$selectedTab.addClass('selected');
$pricingTable.removeClass().addClass(selectedPeriod);
})
});
This is the SCRIPT which does the selection of button ..
The link that you provide, is using a monthly or yearly class to hide and show the divs that already contains the prices, without any Ajax call. Try to inspect the elements with firebug or other console and you will see by yourself how is working.
You can either have an empty div which, on button click loads ajax content dynamically. If it's always going to be the same content, than I would suggest just have three divs and simply hiding the ones that are not being shown.
Have a look into the Jquery 'hide' method.
Hope that helps
I am able to add a row with the dom but how can I get a div to display to the right of drop down depending on what is selected?
Here is an example of what I have so far: http://jsbin.com/#/afojid/1/edit
The first drop down is working correctly but the rest I would like to add when the button is clicked and I would like them to work the same way as the orginal drop down menu. So that if Asian is selected an add section will appear to the right, if Other is selected an other add section will appear to the right, and so on for each time the add button is clicked. I tried clone but I don't want anything to be selected when the add button is clicked
The fact that you're working with ids instead of classes more or less universally makes this very challenging. You should update your code to work with classes and appropriately clone the *Info tables when you create new dropdowns.
You're using an old version of jQuery, so .on is not available to you for delegation. Instead, use .delegate:
$(document).delegate('#typeofEthnicity,[id^=newDDMenu]', 'change', showEthnicity)
This will call the showEthnicity function for the original dropdown and any added dropdowns, but you also have to clone all of the *Info divs and put them in the appropriate spot in the table (I suppose the same spot as the appended row). If you use classes, then it's a simple matter of finding the dropdown's parent row and then locating the corresponding child with the appropriate class to be shown.
I've got a cool interface to build.
There's a horizontal scrolling div containing "tiles" of images, and a radio button under each. A user will scroll and decide on an image, then click it. The radio button checks, and jQuery shows another horiz scrolling div below, "now select subcategory"... The user can then further refine the selection by choosing another "tile". That's the process complete.
The problem is I'm not sure how to hide all the elements in the 2nd tier of selection if they don't have a class that matches that of the first selection. Sounds confusing maybe. Here's some simplified HTML, I've posted it on jsfiddle to save space here. http://jsfiddle.net/RTGC3/
So in summary, you'll see from the HTML what needs to happen. A user will see categories, when they click a category, subcategories without the same id as the clicked parent category will be hidden. All others will remain visible ready for the containing div to "show".
I hope I've explained the problem well enough. Thanks for any help offered.
Mike.
Try with this Code:
$(document).ready(function() {
$('input[type=radio][name="type"]').live('change', function() {
var className = $(this).parent().attr("class");
var clsID = className.split('_')[2];
var subID = "in_cat_" + clsID;
$("div[class*=in_cat]").hide();
$("div." + subID).toggle("slow");
});
});
This is the JSFiddle Link:
http://jsfiddle.net/RTGC3/3/
Easiest if you name both container divs with id 1 for example to the same thing, so you would have TWO class="cat_id_1".
Then something liek this:
$('#cat-container div input').on('change', function() {
var id = $(this).parent().attr('class');
$('#des-container div.'+id).fadeToggle();
});
and in CSS you have display:none; on all divs in #des-container (for starters). This will listen for the radio button when it changes, first change it will call .fadeToggle() on div with matching class in your second row and show it, and second change will hide it again.
Was this what you wanted?
Actually I assuem you want all items in the second row to be displayed, but when checking a radio box you want to hide everything besides the one matching the id of the radiobutton? Then you could do like this:
$('#des-container div'+id).addClass('show');
$('#des-container div').not('div.show').fadeToggle();
So basically you add a class to the objects you decide to show, and hide everything that doesn't have that class. Ofcourse for this to work the other way (if you uncheck a radio-box) you would need to add a if-statement seeing the radio button that was changed was changed to checked or unchecked, if unchecked you just remove the class "show" from the element.