I have a JavaScript function that looks like this:
function UpdateFilterView() {
if (_extraFilterExists) {
if ($('#F_ShowF').val() == 1) {
$('#extraFilterDropDownButton').attr('class', "showhideExtra_up");
$('#extraFilterDropDownButton').css("display", "block");
if ($('#divCategoryFilter').css("display") == 'none') {
$('#divCategoryFilter').show('slow');
}
return;
} else {
if ($('#divCategoryFilter').css("display") == 'block') {
$('#divCategoryFilter').hide('slow');
}
$('#extraFilterDropDownButton').css("display", "block");
$('#extraFilterDropDownButton').attr('class', "showhideExtra_down");
return;
}
} else {
if ($('#divCategoryFilter').css("display") != 'none') {
$('#divCategoryFilter').hide('fast');
}
$('#extraFilterDropDownButton').css("display", "none");
}
}
This will be triggered by the following code (from within the $(document).ready(function () {}):
$('#extraFilterDropDownButton').click(function() {
if ($('#F_ShowF').val() == 1) {
$('#F_ShowF').val(0);
} else {
$('#F_ShowF').val(1);
}
UpdateFilterView();
});
The HTML for this is easy:
<div id="divCategoryFilter">...</div>
<div style="clear:both;"></div>
<div id="extraFilterDropDownButton" class="showhideExtra_down"> </div>
I have two problems with this:
When the panel is hidden and we press the div button (extraFilterDropDownButton) the upper left part of the page will flicker and then the panel will be animated down.
When the panel is shown and we press the div button the panel will hide('slow'), but the button will not change to the correct class even when we set it in the UpdateFilterView script?
The correct class will be set on the button when hovering it, this is set with the following code:
$("#extraFilterDropDownButton").hover(function() {
if ($('#divCategoryFilter').css("display") == 'block') {
$(this).attr('class', 'showhideExtra_up_hover');
} else {
$(this).attr('class', 'showhideExtra_down_hover');
}
},
function() {
if ($('#divCategoryFilter').css("display") == 'block') {
$(this).attr('class', 'showhideExtra_up');
} else {
$(this).attr('class', 'showhideExtra_down');
}
});
To set a class completely, instead of adding one or removing one, use this:
$(this).attr("class","newclass");
Advantage of this is that you'll remove any class that might be set in there and reset it to how you like. At least this worked for me in one situation.
Use jQuery's
$(this).addClass('showhideExtra_up_hover');
and
$(this).addClass('showhideExtra_down_hover');
<script>
$(document).ready(function(){
$('button').attr('class','btn btn-primary');
}); </script>
I like to write a small plugin to make things cleaner:
$.fn.setClass = function(classes) {
this.attr('class', classes);
return this;
};
That way you can simply do
$('button').setClass('btn btn-primary');
Related
I have read how to show/hide a div with jquery when there is a dropdown selection, built with "select" and options.
However, I am trying to figure out how to do this when I have the following code for a dropdown selection.
<?php echo $this->lists['catid']; ?>
This list displays a dropdown of options and I want for a specific option to show/hide a div.
The following code could work for a select with a specific id,"purpose", for example, but in my situation how I am supposed to use it?
$('#catid').on('change', function() {
if ( this.value == '37');
{
$("#business").show();
}
else
{
$("#business").hide();
}
});
})
This is the html of the output of the php code
Thank you
Try code should work for you
$(document).ready(function(event) {
$('#catid').on('change', function() {
let selected = $('#catid').val();
if (selected == 37) {
$("#business").show();
} else {
$("#business").hide();
}
});
});
#business {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<select id="catid">
<option value="38">option 38(hide)</option>
<option value="37">option 37(show)</option>
<option value="39">option 39(hide)</option>
</select>
<div id="business">
Division Visible!
</div>
You can loop through each option and check the value. If the value is 37, then show that option (or any other div that you want to show):
$('#catid').on('change', function() {
$('#catid option').each(function() {
if ($(this).val() === '37') {
$(this).show()
} else {
$(this).hide()
}
})
})
NOTE: You can replace $(this) with the element/div that you want to show/hide if you want to show/hide something else.
Working JSFiddle here.
$('#purpose').on('change', function() {
if (this.value == '37')
{
$("#business").css('display','');
}
else
{
$("#business").css('display','none');
}
});
You also use this ans
$('#purpose').on('change', function() {
if (this.value == '37')
{
$("#business").show();
}
else
{
$("#business").hide();
}
});
I am currently working on a website and I have several titles. When I click on a title it shows images below, but when I click in two or more titles everything goes to the wrong place, the whole page gets messed up.
I am trying to fix it with an if statement but it doesn't seem to work.
This is the javascript that I have so far:
$(document).ready(function(){
$("#button1").click(function(){
$(".close1").toggle();
$("#button2").toggleClass("movedown");
$(".tab").toggleClass("movetab");
$(".me").toggleClass("moveme");
});
$("#button2").click(function(){
$(".close2").toggle();
$("#button3").toggleClass("movedown");
$(".tab").toggleClass("movetab");
$(".me").toggleClass("moveme");
});
$("#button3").click(function(){
$(".close3").toggle();
$("#button4").toggleClass("movedown");
$(".tab").toggleClass("movetab");
$(".me").toggleClass("moveme");
});
$("#button4").click(function(){
$(".close4").toggle();
$("#button5").toggleClass("movedown");
$(".tab").toggleClass("movetab");
$(".me").toggleClass("moveme");
});
$("#button5").click(function(){
$(".close5").toggle();
$("#button6").toggleClass("movedown");
$(".tab").toggleClass("movetab");
$(".me").toggleClass("moveme");
});
$("#button6").click(function(){
$(".close6").toggle();
});
if ((document.getElementById('#info4').display === 'block') &&
(document.getElementById('#info5').display === 'block')) {
$(".me").toggleClass("moveme2");
}
else {
return;
}
});
Put this outside of .ready function
if ((document.getElementById('#info4').display === 'block') &&
(document.getElementById('#info5').display === 'block')) {
$(".me").toggleClass("moveme2");
}
else {
return;
}
Hiding a div (for example #popover) on click is easy:
$(document).ready(function() {
$("#trigger").click(function(e) {
$("#popover").toggle();
e.stopPropagation();
});
$(document).click(function(e) {
if (!$(e.target).is('#popover, #popover *')) {
$("#popover").hide();
}
});
});
But isn't this function fired every time the user uses a click? (Which does not make sense for me). Can I somehow limit this function to fire only if #popover is already visible?
In that case you can try using $(document).one(function(e) {...}); every time you show #example.
$(document).ready(function() {
var didBindToBody = false;
function closePopOverOnBodyClick() {
didBindToBody = true;
$(document).one('click', function(e) {
if (!$(e.target).is('#popover, #popover *')) {
$("#popover").hide();
}
else {
closePopOverOnBodyClick();
}
didBindToBody = false;
});
}
$("#trigger").click(function(e) {
$("#popover").toggle();
e.stopPropagation();
if (!didBindToBody && $("#popover").is(":visible")) {
closePopOverOnBodyClick();
}
});
closePopOverOnBodyClick();
});
DEMO
You could try something like
$(document).click(function(e) {
if (!$('#example').is(":visible")) {
return false;
} else if (!$(e.target).is('#popover, .login-panel *')) {
$("#popover").hide();
}
});
Or you could combine the two conditionals into one, just thought I'd keep it separate for readability and to make my suggestion easier to spot.
I tried this but it isn't working:
$('cbxShowNotifications').click(function()
{
var tview = $('#treeview');
if ($(this).checked)
{
tview.show();
}
else
{
tview.hide();
}
});
EDIT -
Fixed a few things but I'm still unable to show the DIV AFTER I hide it:
$('#cbxShowNotifications').on('click', (function()
{
var tview = $('#treeview');
if ($(this).checked)
{
tview.show();
}
else
{
tview.hide();
}
}));
change ($(this).checked) to ($(this).is(':checked'))
You have some syntax issues, and you should monitor the change event on checkboxes:
$('#cbxShowNotifications').on('change', function () {
var tview = $('#treeview');
if ($(this).prop('checked')) {
tview.show();
} else {
tview.hide();
}
});
NOTE: You can set the initial state by the trigger of the change event:
$('#cbxShowNotifications').trigger('change');
You can do it like this:
$('#treeview').on({
'change': function(){
if ($('div').css('display') == 'block') {
$('div').hide();
} else {
$('div').show();
}
}
})
jsfiddle: http://jsfiddle.net/PWAwz/
is this what you're searching? I wrote the codes below you can check they are working in example too. http://jsfiddle.net/jquerybyexample/xe7aL/
$(document).ready(function(){
$('.checkbox1').change(function(){
$('.tview').toggle('fast');
});
});
I know your question is related to jQuery, but if the purpose is purely presentational, perhaps you can consider a CSS way to accomplish the same thing:
#treeview {
display: none
}
#cbxShowNotifications:checked ~ #treeview {
display: block
}
You can take a look at an example here: http://jsfiddle.net/BZQX4/5/
here is my script. Now i can click one of these IDs and class "inputs" are visible. What i want is that I have to click on all elements.
$('#zwei,#sechs,#neun').bind('click', function() {
if( $(this).is(':checked')) {
$('.inputs').show();
} else {
$('.inputs').hide();
}
});
JSFiddle:
http://jsfiddle.net/CLYC6/20/
can you help me please? whats wrong?
FK
Use this:
$('#zwei,#sechs,#neun').bind('click', function() {
$('.inputs').show();
$('#zwei,#sechs,#neun').each(function (e) {
if (!$(this).is(':checked')) {
$('.inputs').hide();
return;
}
});
});
Here is a LIVE DEMO.
Because #Rastko is not happy with the current solution here is one more:
$('#zwei,#sechs,#neun').bind('click', function() {
var showInput = true;
$('#zwei,#sechs,#neun').each(function (e) {
if (!$(this).is(':checked')) {
showInput = false;
return;
}
});
if (showInput) {
$('.inputs').show();
} else {
$('.inputs').hide();
}
});
One more LIVE DEMO.
If statement should check whether all three are checked, and if input is not visible.
so:
if($('#zvei').is(':checked') && $('#neun').is(':checked') && $('#sechs').is(':checked') {
$('.inputs').show();
}