We Keep Coding

Hiding images with same data value jquery

Im trying to code a site where the objective is to click on two identical images and it hides the both the images you've managed to match to eachother.
$(document).ready(function(){
var animal1;
var animal2;
$(".memory1").on("click", function(){
animal1 = $(this).data('animal');
});
$(".memory2").on("click", function(){
animal2 = $(this).data('animal');
if (animal1==animal2){
$(this).data('animal').hide();
}
else {
alert("Wrong, Try again!");
}
});
});
so the line where its going wrong is obviously
$(this).data('animal').hide();
But I cant figure out a way to hide both images, or a better way of going about it.. :/
http://jsfiddle.net/4vgfca76/

This doesn't work the way you think it does
$(this).data('animal').hide();
When data is used with one argument, it get's the data attribute, which you should already know as you're doing it a few lines above.
What you get is the string hund etc. and that string doesn't have a hide() method.
You should be using the attributes selector to select the elements with that attribute instead
$(document).ready(function () {
var animal1, animal2;
$(".memory1").on("click", function () {
animal1 = $(this).data('animal');
});
$(".memory2").on("click", function () {
animal2 = $(this).data('animal');
if (animal1 == animal2) {
$('img[data-animal="'+animal1+'"]').hide();
} else {
alert("Fel! Försök igen");
}
});
});

Can I check if Bootstrap Modal Shown / Hidden?

Can I check if Bootstrap Modal currently Shown / Hidden Programatically?
Like bool a = if("#myModal").shown(); ?
I need true/false

alert($('#myModal').hasClass('in'));
It will return true if modal is open

The best method is given in the docs
$('#myModal').on('shown.bs.modal', function () {
// will only come inside after the modal is shown
});
for more info refer http://getbootstrap.com/javascript/#modals

its an old question but anyway heres something i used incase someone was looking for the same thing
if (!$('#myModal').is(':visible')) {
// if modal is not shown/visible then do something
}

All Bootstrap versions:
var isShown = $('.modal').hasClass('in') || $('.modal').hasClass('show')
To just close it independent of state and version:
$('.modal button.close').click()
more info
Bootstrap 3 and before
var isShown = $('.modal').hasClass('in')
Bootstrap 4
var isShown = $('.modal').hasClass('show')

When modal hide? we check like this :
$('.yourmodal').on('hidden.bs.modal', function () {
// do something here
})

Use hasClass('in'). It will return true if modal is in OPEN state.
E.g:
if($('.modal').hasClass('in')){
//Do something here
}

In offical way:
> ($("element").data('bs.modal') || {})._isShown // Bootstrap 4
> ($("element").data('bs.modal') || {}).isShown // Bootstrap <= 3
{} is used to avoid the case that modal is not opened yet (it return undefined). You can also assign it equal {isShown: false} to keep it's more make sense.

Here's some custom code that gives the modal states more explicitly named classes:
$('.modal').on('show.bs.modal', function(e)
{
e.currentTarget.classList.add("modal-fading-in");
e.currentTarget.classList.remove("modal-fading-out");
e.currentTarget.classList.remove("modal-hidden");
e.currentTarget.classList.remove("modal-visible");
});
$('.modal').on('hide.bs.modal', function(e)
{
e.currentTarget.classList.add("modal-fading-out");
e.currentTarget.classList.remove("modal-fading-in");
e.currentTarget.classList.remove("modal-hidden");
e.currentTarget.classList.remove("modal-visible");
});
$('.modal').on('hidden.bs.modal', function(e)
{
e.currentTarget.classList.add("modal-hidden");
e.currentTarget.classList.remove("modal-fading-in");
e.currentTarget.classList.remove("modal-fading-out");
e.currentTarget.classList.remove("modal-visible");
});
$('.modal').on('shown.bs.modal', function(e)
{
e.currentTarget.classList.add("modal-visible");
e.currentTarget.classList.remove("modal-fading-in");
e.currentTarget.classList.remove("modal-fading-out");
e.currentTarget.classList.remove("modal-hidden");
});
You can then easily target the modal's various states with both JS and CSS.
JS example:
if (document.getElementById('myModal').hasClass('modal-fading-in'))
{
console.log("The modal is currently fading in. Please wait.");
}
CSS example:
.modal-fading-out, .modal-hidden
{
opacity: 0.5;
}

With Bootstrap 4:
if ($('#myModal').hasClass('show')) {
alert("Modal is visible")
}

if($('.modal').hasClass('in')) {
alert($('.modal .in').attr('id')); //ID of the opened modal
} else {
alert("No pop-up opened");
}

For me this works
if($("#myModal").css("display") !='none' && $("#myModal").css("visibility") != 'hidden')
alert("modal shown");

I try like this with function then calling if needed a this function. Has been worked for me.
function modal_fix() {
var a = $(".modal"),
b = $("body");
a.on("shown.bs.modal", function () {
b.hasClass("modal-open") || b.addClass("modal-open");
});
}

This resolved your problems, if true no refresh, and false refresh
var truFalse = $('body').hasClass('modal-open');

disable function using jQuery

I'd like to disable a javascript function (dialogs()) using jQuery.
What I thought to do was:
Wrap the function in a span: "<span class = 'auto'>" + dialogs(i,0); + "</span>"
If the checkbox is checked, do: (this if statement is in $(document).ready(function(){)
if ($("#autodialog").is(":checked")) {
$(".auto").remove(); }
But this doesn't seem to be working.
Any thoughts?

Make your dialogs methods to handle a extra parameter isEnabled, a boolean dataType.
function dialogs(i,0,isEnabled) {
if(isEnabled) {
//Todos
}
}
then make it to look like this
if ($("#autodialog").is(":checked")) {
dialogs('i',0,false); //I'm not sure about the values of parameter i
}
So there is no need of using span tag as a wrapper.
Hope you understand.

A little more context would be helpful (do you have a jsfiddle we can see?)
I think you may be confusing the Javascript function and the value returned from the function. Are you trying to remove a string of HTML generated by the dialogs() function, or are you trying to remove the actual dialogs function itself?
If you want to disable the dialogs function:
<script>
function getDialogs(a,b) {
// ...
}
var dialogs = getDialogs; // Make dialogs refer to getDialogs
</script>
Elsewhere you'll have something like:
<script>
if ( $("#autodialog").is(":checked") ) {
dialogs = function __noop__() {};
} else {
dialogs = getDialogs;
}
</script>

you will have to add a click handler to the checkbox
$("#autodialog").click(function(){
if ($(this).is(":checked")) {
dialogs(i,no,false); }
else
dialogs(i,no,true);
});
function dialogs(i,no,flag){
if(!flag)
{event.preventDefault();return flag;}
else{
......//your working code}
}

jQuery: Call a function twice

I'm trying to run a function twice. Once when the page loads, and then again on click. Not sure what I'm doing wrong. Here is my code:
$('div').each(function truncate() {
$(this).addClass('closed').children().slice(0,2).show().find('.truncate').show();
});
$('.truncate').click(function() {
if ($(this).parent().hasClass('closed')) {
$(this).parent().removeClass('closed').addClass('open').children().show();
}
else if ($(this).parent().hasClass('open')) {
$(this).parent().removeClass('open').addClass('closed');
$('div').truncate();
$(this).show();
}
});
The problem is on line 13 where I call the truncate(); function a second time. Any idea why it's not working?
Edit jsFiddle here: http://jsfiddle.net/g6PLu/

That's a named function literal.
The name is only visible within the scope of the function.
Therefore, truncate doesn't exist outside of the handler.
Instead, create a normal function and pass it to each():
function truncate() { ...}
$('div').each(truncate);

What's the error message do you get?
You should create function and then call it as per requirement
Define the function
function truncate(){
$('div').each(function(){
});
}
Then call the function
truncate();

Another approach is to establish, then trigger, a custom event :
$('div').on('truncate', function() {
$(this).......;
}).trigger('truncate');
Then, wherever else you need the same action, trigger the event again.
To truncate all divs :
$('div').trigger('truncate');
Similarly you can truncate just one particular div :
$('div#myDiv').trigger('truncate');
The only prerequisite is that the custom event handler has been attached, so ...
$('p').trigger('truncate');
would do nothing because a truncate handler has not been established for p elements.

I know there's already an accepted answer, but I think the best solution would be a plugin http://jsfiddle.net/g6PLu/13/ It seems to be in the spirit of what the OP wants (to be able to call $('div').truncate). And makes for much cleaner code
(function($) {
$.fn.truncate = function() {
this.addClass('closed').children(":not('.truncate')").hide().slice(0,2).show();
};
$.fn.untruncate = function() {
this.removeClass('closed').children().show();
};
})(jQuery);
$('div').truncate();
$('.truncate').click(function() {
var $parent = $(this).parent();
if ($parent.hasClass('closed')) {
$parent.untruncate();
} else {
$parent.truncate();
}
});

check toggle and check default

Anybody have a better way to write this jquery method. If a user comes to the page and the checkbox is checked, show else hide, but if the user clicks the checkbox then display.
$('#rush').is(':checked') ? $("#rushJustificationContainer").show() : $("#rushJustificationContainer").hide();
$('#rush').click(function() {
$("#rushJustificationContainer").toggle(this.checked);
});

use this
document.ready(function(){
myToggle($('#rush').is(':checked'));
}
$('#rush').click(function(){
myToggle(this.checked);
}
function myToggle(isChecked) {
if(isChecked) {
$("#rushJustificationContainer").show();
} else {
$("#rushJustificationContainer").hide();
}
}

try this
function Toggle(o, toggle){
o.toggle(toggle);
}
document.ready(function(){
Toggle($("#rushJustificationContainer", $('#rush').checked);
});
$('#rush').click(function(){
Toggle($("#rushJustificationContainer", this.checked);
});

Try this
$(function(){
$("#rushJustificationContainer").css({display:$('#rush').is(':checked')?"block":"none"});
$('#rush').click(function() {
$("#rushJustificationContainer").toggle();
});
});

The question code is pretty optimal for a one-off; I'd prefer it over the alternatives so far.
You might shave some microseconds with:
$('#rush')[0].checked ? $("#rushJustificationContainer").show() : $("#rushJustificationContainer").hide();
While:
$("#rushJustificationContainer").toggle ( $('#rush').is (':checked') );
might be easier on the scrollbar. :)
~~~
The only other thing is if you might do this kind of thing more than once, then DRY-ize it.:
function activateCB_toDivControl (cbID, nodeID) {
$('#' + nodeID).toggle ( document.getElementById (cbID).checked );
$('#' + cbID).click (function (e) {
$('#' + nodeID).toggle (e.currentTarget.checked);
} );
}
Call like so:
activateCB_toDivControl ('rush', 'rushJustificationContainer');
activateCB_toDivControl ('COD', 'likeHellContainer');