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.
Related
I have a list of buttons on my page. I'm trying to make a feature so that when you click a button it becomes selected (I will change its color), and the last clicked button will come back to normal.
The only idea that I could come up for this (based on my newbish skills) is to make a javascript function, which will iterate through all the buttons from the page, and change the color for each of them to the default color, then change color for the clicked button.
This way doesn't seem optimum, as I iterate through the entire list of buttons when I only need to change two. How can I do it in a better way?
I'm not looking for code, just an idea.
Use jQuery.
$('.btn').on("click", function() {
$('.active').removeClass("active");
$(this).addClass("active");
});
Give all the buttons you want this functionality the "btn" css class and then make another css class called active.
you can add a class to changed button
$('#someid').addClass('someclass');
and then check if the button has class
$('#someid').hasClass(className);
UPD
this should work as well
$('.classForAllButtons').css(/*css here*/);
$('clicked element').css(/*css here*/);
this will add style to all buttons and then immediately add css to the clicked button
I am trying to do a show/hide animation. 1st div will show and 2nd div hide for first time then when i will "details" button which is in 1st div then show 2nd and same when i click "close" button which is in 2nd div then show 1st div and hide 2nd div. i did that no problem but i want to add some css effect when it will show and hide exmple like http://tympanus.net/Tutorials/OriginalHoverEffects/index7.html there have many cool effect all are base on rollover effect i want to this on my click.. can you guess help me how to do..
Basic example here: http://jsfiddle.net/Q5e76
$("#details").click(function () {
$(".one").hide();
$(".two").show();
});
$("#close").click(function () {
$(".two").hide();
$(".one").show();
});
Instead of using .show(); and .hide(); you could use .fadeIn(n) and .fadeOut();
where n is the number of miliseconds it will take.
e.g.
$('.one').fadeOut(500); // half a second.
PS: if these are unique, you should give them ID's to prevent an interaction being executed on multiple elements.
Also it will help yourself if you give your elements proper names.
e.g. id="detail-box" for instance.
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();
});
I have a context menu with 4 option, I want to hide or disable 1 option after clicking it. these are my script fragments. After I click the save option, whenever I right click again on the div I want only the Move option available in the context menu. drag is the div class. is it possible?
var menu = [
{'Move':function(menuItem,menuObject){
$(this).css({'backgroundColor':'red'});
return true;
}
},
{'Save':function(menuItem,menuObject){
$(this).css({'backgroundColor':'blue'});
return true;
}
}
];
$(function() {
$('.drag').contextMenu(menu,{
showSpeed:500,
hideSpeed:500,
showTransition:'fadeIn',
hideTransition:'fadeOut'
});
});
Thanks in advance
First of all the class drag is the class of the parent element.
So you have to find the class of the "save" element. Lets suppose the class is .save, then on click remove it. This is done with this code:
$(".save").click(function{
$(this).remove();
})
If you right click again, the element will be created again and the above function loses its purpose. So as I can see it, this is your problem.
But why do you need to hide the save button after something is "saved"? Maybe the user wants to save again.
It would be helpful if we could see a demo in order to understand the app you are trying to implement.
If you try to apply a rule only on changed (dragged) element you have to flag the changed ones in the class or in your db which holds the positions of the elements.
Then you can manipulate only the flagged (changed) through the jquery selector.
if ((.drag).hasClass('.changed')){
$(".save").css({"visibility: visible"});
}
Dont forget to hide by default the element in css
.save{visibility: none}
I'm using Javascript/Jquery to have a button toggle which div is displayed in the user's window. I have my initial background div #container which gets toggled with a different div if the user clicks on a certain location. A back button is toggled on once the new div is displayed. I want the back button to switch the div back to the initial #container if it is pressed. The back button's display should be toggled off again if this happens.
Since I have different divs that the back button shows up in, I need to determine which background div the user is viewing in order to toggle that specific div off and the #container back on. The container will not display again if I do not toggle the current div off.
Here's my code for an example of one instance:
JS:
$(document).ready(function()
{
$("#backButton").click(function(e)
{
if(THE CURRENT DIV IS REGION 1)
{
$("#container").toggle(); //toggle the container on
$("#region1").toggle(); //toggle region 1 off
$("#backButton").toggle(); //toggle the back button off
}
});
});
Obviously, I do not know what code to use to determine which div the user is looking at. I tried if(document.getElementById('region1');) but it didn't work; I didn't think it would, but that's the direction I'm going as to how to determine the current div.
Any help would be greatly appreciated!
if($('#region1').is(":visible")){ etc... }
If you are talking about a back button located in the DOM inside the div region1, you could use:
if($(this).parents("#region1").length > 0)
Which says "if the number of parents of this button containing ID region 1 are non-zero". For more information see parents. In general the traversing functions in jQuery will be helpful to you.
This might be what you're looking for:
http://api.jquery.com/parent-selector/
If all you're doing is switching two DIVs back and forth, you don't even have to check which DIV is currently displayed, because the .toggle() function should do that for you out-of-the-box.
Consider you have two DIVs, make sure one is hidden and one is shown, like so:
<div id="region1">foo</div>
<div id="region2" style="display:none;">bar</div>
Now, when you click on the button, you just have to call .toggle() on both of them.
$('#backButton').click(function(){
$('#region1, #region2').toggle();
});
You can even get by with using only one button to do that, and just switch the text inside the button if you'd like.
// inside the click handler
$(this).val( $(this).val() == 'Next' ? 'Back' : 'Next' );
Full code example here: jsFiddle example