I've got a function that applies to all radio buttons on a page, I can't seem to specify it to run only for specific ones.
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(function() {
var $divs = $('#divs > div');
$divs.first().show()
$('input[type=radio]').on('change',function() {
$divs.hide();
$divs.eq( $('input[type=radio]').index( this ) ).show();
});
});
});//]]>
Give each radio button a unique id and then just select the ones you want:
$('#id_radio1, #id_radio4, #id_radio9').on('change', function() {...
Related
I am using quicksand jquery and i have searched for solutions and none work. I am trying to auto-click a category when the page loads to filter what I want to filter.
Here is the links on the page that allow users to click and filter
<li>Everything</li>
<li>cat1</li>
<li>cat2</li>
<li>cat3</li>
<li>cat4</li>
when the page loads, it show ALL items and then the user can select the category to filter by. i want to auto click one, and am looking for the function to generate the click.
here is what i have tried with no solution:
<script type="text/javascript">
$(document).ready(function() {
$(".filter li a.cat2").trigger('click');
});
</script>
and
<script type="text/javascript">
$(document).ready(function() {
$(".filter li a.cat2").trigger('click');
});
</script>
and
<script>
$(function() {
// It would be better to create a function for this, but
// to avoid code duplication the click() event is triggered/reused
$('.filteroptions li a cat2').click();
});
</script>
Here is the js file it operates from and why i chose to remove "filteroptions" and try "filter" as was suggested in other posts. as mine shows ".filter li a" not filteroptions li a
// DOMContentLoaded
$(function () {
// bind radiobuttons in the form
var $filterType = $('.filter li a');
// get the first collection
var $applications = $('#list');
// clone applications to get a second collection
var $data = $applications.clone();
// attempt to call Quicksand on every form change
$filterType.click(function (e) {
$('.filter li a').removeClass('selected');
$(this).addClass('selected');
if ($(this).attr('id') == 'all') {
var $filteredData = $data.find('li');
} else {
var $filteredData = $data.find('li[class=' + $(this).attr('id') + ']');
}
// finally, call quicksand
$applications.quicksand($filteredData, {
duration: 800,
easing: 'easeInOutQuad',
attribute: 'id'
}, function () {
$("a[data-rel^='prettyPhoto']").prettyPhoto({ animationSpeed: 'slow', social_tools: false, slideshow: 2000 });
});
});
});
And here are other posts that you may say are the same, but i tried them and they do not work. They are using an older type of quicksand.
JQuery Quicksand: Link directly to pre-filtered Quicksand from another page
First open limited item not all in jQuery Quicksand?
You are using id on not class so change your click tigger to
$(".filter li #cat2").trigger('click');
I have a Select option where if I select any option related div Shows up. Upto this it's fine. But I am wanting to make something like if I select the option it will display the related div but option it self will be removed.
FIDDLE
Is this possible ? Any help will be appreciated.
JS
$(document).ready(function() {
$('#contact-location').change(function(){
var location = $(this).val(),
div = $('#' + location);
$('div').hide();
div.show();
});
});
Fixed my answer to reflect the update in the question:
$(document).ready(function() {
$('#contact-location').change(function(){
var location = $(this).val(),
div = $('#' + location);
var selIndex = $("#contact-location").prop('selectedIndex');
$("#contact-location").prop(selIndex).remove();
$('div').hide();
div.show();
});
});
http://jsfiddle.net/uwt73sj3/
var selIndex = $("#contact-location").prop('selectedIndex'); here we set the select element index to a variable we can work with later.
$("#contact-location").prop(selIndex).remove(); removed the index value from the select drop down.
You could try something like:
$(document).ready(function() {
$('#contact-location').change(function(){
$('#contact-location option').show(); //clean alls
$('option:selected',this).hide(); // hide selected
var location = $(this).val(),
div = $('#' + location);
$('div').hide();
div.show();
});
})
LIVE DEMO
Why not make things more generic at the same time?
$(function () {
$('#contact-location').change(function () {
var $this = $(this);
// show only correct location
$('div').hide(); // maybe use a class rather than hiding every <div>
$('#' + $this.val()).show();
// show only alternate options
$this.find('option').show();
$this.find('option:selected').hide();
});
});
one solution is to use click on the children of select (i.e. the options) and then hide this (which is the option). Then the value of the select still has the value of the selected option and you have to reset it manually (I used the content of the first child via the css :first-child selector but you could use anything else, too).
$(document).ready(function(e) {
$('#contact-location').children().click(function(){
var $select = $(this).parent();
var $clicked = $(this);
var location = $clicked.val(); //is the same like $select.val()
var $div = $('#' + location);
$clicked.hide();
$select.val($select.children(":first-child"));
$div.show();
});
});
I used $ before the names of some variables to indicate that these variables store jQuery objects.
You can get the selected option like this:
$("option:selected", this);
From there you can hide or remove it:
$("option:selected", this).hide();
$("option:selected", this).remove();
I have written a script that is supposed to render text (later a partial view) inside a div on click. I detect if div is visible or not and if not, I add text on click and make the div visible. This part works perfectly. When clicked and the div is visible I want to remove what has been added so that it wont multiply if I click it multiple times.
I get both alert - so detection of div visibility works but the text is not removed and it multiplies if I click it many times.
Here is my code - can you tell me what i am doing wrong?
<script language="javascript">
$(document).ready(function () {
$(".content").hide();
$(".heading").click(function () {
var id = $(this).attr("id");
var content = $(this).next(".content");
if (content.is(":hidden")) {
content.append("<p id='render-object'>Testing rendering on click</p>");
alert('Content is opening');
}
else if (content.is(":visible")) {
content.next("#render-object").remove();
alert('Content is closing');
}
content.slideToggle(100);
});
});
</script>
You probably want to use .find() instead of .next() when removing.
Use .html() instead of .append()
<script language="javascript">
$(document).ready(function () {
$(".content").hide();
$(".heading").click(function () {
var id = $(this).attr("id");
var content = $(this).next(".content");
if (content.is(":hidden")) {
content.html("<p id='render-object'>Testing rendering on click</p>");
alert('Content is opening');
}
else if (content.is(":visible")) {
content.find("#render-object").remove();
alert('Content is closing');
}
content.slideToggle(100);
});
});
</script>
Edit : - use .find() instead of .next() as render-object is child of content and not sibling
use .find instead of .next and use .html instead of .append
<script language="javascript">
$(document).ready(function () {
$(".content").hide();
$(".heading").click(function () {
var id = $(this).attr("id");
var content = $(".content");
if (content.is(":hidden")) {
content.html("<p id='render-object'>Testing rendering on click</p>");
alert('Content is opening');
}
else if (content.is(":visible")) {
content.find("#render-object").remove();
alert('Content is closing');
}
content.slideToggle(100);
});
});
</script>
I need help with div' showing up.
I know, that code:
$( "#Button" ).click(function() {
$('#leftDiv').toggle(2000);
});
will make my leftDiv dissappear (when I click Button), but what should I do to set my div default-hided(toggled down?) so that after I click Button, leftDiv should toggle up (appear)?
If you want the div hidden when the page loads, then .hide() it first:
$('#leftDiv').hide();
$( "#Button" ).click(function() {
$('#leftDiv').toggle(2000);
});
If you want the div to be hidden on load, you would do something like:
function load() {
document.getElementById("leftDiv").style.visibility="hidden";
}
<body onload="load"></body>
Would that not work?
var $leftDiv = $('#leftDiv');
var $button = $("#Button");
$leftDiv.hide();
$button.on('click', function() {
$leftDiv.toggle(2000);
});
I’m using the following jQuery for hiding and showing content (toggle), as a tree navigation menu in my website. I found this code extremely useful because by clicking, it displays only one div at a time.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
function show_region(chosen_region) {
$('.city_div').each(function(index) {
if ($(this).attr("id") == chosen_region) {
$(this).slideDown(200);
}
else {
$(this).slideUp(600);
}
});
}
</script>
<style type="text/css">
.city_div {display: none;}
</style>
North<br>
<div class="city_div" id="box01">Div #01</div>
Centre<br>
<div class="city_div" id="box02">Div #02</div>
South<br>
<div class="city_div" id="box03">Div #03</div>
The problem is that I can close a div only by opening another div.
How to close the div by a second click on it?
You can use slideToggle, change from slideDown to slideToggle:
function show_region(chosen_region) {
$('.city_div').each(function(index) {
if ($(this).attr("id") == chosen_region) {
$(this).slideToggle(200); // instead of slideDown
}
else {
$(this).slideUp(600);
}
});
}
First of all, don't use inline event handlers.
<script type="text/javascript">
$(document).ready(function() {
var boxes = $('.city_div');
$('.city-toggle').click(function(e) {
var box = $(this).next();
var isHidden = box.is(':hidden');
boxes.slideUp(600);
if(isHidden) {
box.slideDown(200);
}
e.preventDefault();
});
});
</script>
<style type="text/css">
.city_div {display: none;}
</style>
North
<div class="city_div" id="box01">Div #01</div>
Centre
<div class="city_div" id="box02">Div #02</div>
South
<div class="city_div" id="box03">Div #03</div>
Also, if your links don't go anywhere meaningful, use # as the href and make sure the boxes are visible by default. (Hide them using boxes.hide(); right at the start.)
Also also, <br> isn't what you should use there. <div>s are already block-level elements. If you want more padding, give them a top margin.
try this:
$(document).ready(function(){
$('.city_div').click(function(){
$(this).hide(); //or whatever code you want to hide it
});
});
that way when you click on a div, it will hide it.
Since you are using jQuery you could try using the jQuery.toggle function.
function show_region(chosen_region) {
$('#' + chosen_region).toggle('slide');
return false;
}
Keep track of the div you have clicked last:
var globalLastClickedButtonId;
$("div.city_div").click(function() {
if (globalLastClickedButtonId == $(this).attr("id")) {
$(this).hide();
} else {
var box = $(this).next().next();
var clickedId = $(this).attr("id");
$("div.city_div").each(function() {
if ($(this).attr("id") == clickedId)
box.slideDown(200);
else
box.slideUp(600);
}
}
globalLastClickedButtonId = $(this).attr("id");
});
First, why are you using such an old version of jQuery?
Second, your JavaScript can be simplified. jQuery works on sets; you don't need the .each, or loops.
Here is a working example: http://jsfiddle.net/gibble/25P9z/
Simplified HTML:
North<br>
<div class="city_div" id="box01">Div #01</div>
Centre<br>
<div class="city_div" id="box02">Div #02</div>
South<br>
<div class="city_div" id="box03">Div #03</div>
New JavaScript:
function show_region(e) {
var $target = $(e.target);
var chosen_region = $target.attr('data-contentDiv');
var openDiv = $('#' + chosen_region);
openDiv.slideDown(200);
$('.city_div').not(openDiv).slideUp(600);
}
Last, attach events, don't inline them in your HTML.
$('a[data-contentDiv]').click(show_region);
Because you are using an animation it is best to keep track of the div that is currently shown. If you don't, then you will start to see multiple divs showing if you click links in quick succession.
You can use this:
$(function() {
$("a").click(function(e) {
e.preventDefault();
var selectedDiv = $("#" + $(this).attr("href"));
var hide = selectedDiv.data("shown");
$(".city_div").slideUp(600);
$(".city_div").data("shown", false);
if (hide) {
selectedDiv.data("shown", false);
}
else {
selectedDiv.data("shown", true);
selectedDiv.slideDown(200);
}
});
});
Here is a working example
You should keep a variable with your old chosen region name
<script type="text/javascript">
var old_chosen_region="";
function show_region(chosen_region) {
$('.city_div').each(function(index) {
if (($(this).attr("id") == chosen_region)&&(chosen_region!=old_chosen_region)) {
$(this).slideDown(200);
old_chosen_region=chosen_region;
} else {
$(this).slideUp(600);
}
}
old_chosen_region='';
});
</script>
This allows you to 'remember' which region you chose last and, if the chosen one equals the last you close it.
You should set old_chosen_region='' in the end to let the tab reopen.