We Keep Coding

Various divs with same classname and onclick function to call to open corresponding message div

I have a problem with my javascript function that is working for now. I want to change it to a Jquery function but I don't know how.
I have a page with a lot of div's with the same class ("message"). These message windows opens when clicked on "delete" with a onclick function delete_on('. $id .') Inside the message window is a onclick function to close the window.
Message window that opens and closes:
<div class="message">
Sure you want to delete?
YES <a onclick="delete_off('. $id .')">NO</a>
</div>
Link that opens the message window:
<a onclick="delete_on('. $id .')">delete</a>
Javscript functions:
function delete_on($id) {
document.getElementsByClassName("message")[$id].style.display = "block";
document.body.style.overflowY = "hidden";
}
function delete_off($id) {
document.getElementsByClassName("message")[$id].style.display = "none";
document.body.style.overflowY = "auto";
}
I give every onclick function an $id that is counting up for every div and "delete" link. The javascript function knows which div it has to open caused by the $id.
The [$id] part in the function is the problem. I can't make it work in Jquery?!
Can someone help me? Is there another way to combine the javascript function to the right div?

Try setting event listeners using $.on like so:
$('.message').on('click', function () {
// $(this) is the thing clicked...
});
Once you get the $(this) you can navigate around that element relatively. To get its parent, for example:
$('.message').on('click', function () {
var parent = $(this).parent();
});
And manipulate it however you wish.
https://jsfiddle.net/ozdzug33/1/
Good luck!

Closing multiple modals using one jquery code

I am making a website in which there are around 20 modals (bootstrap) on a single page. Each modal contains an iframe which plays a youtube video.
Till now, all I did was created all 20 modals with div #myModal1, #myModal2 ........... #myModal20.
Then, I looked for a javascript code which can stop a youtube video when I close the modal and found the jquery code (shown below)
jQuery(".modal-backdrop, #myModal2 .close, #myModal2 .btn").on("click", function() {
jQuery("#myModal2 iframe").attr("src", jQuery("#myModal2 iframe").attr("src"));
});
The above code stops the youtube video when I close the modal with div #myModal2.
Now, since there are 20 modals and I wrote the same code for all of them just changing #myModal3, #myModal4,...........and so on.
Can I do the same using for loop (I am new to this javascript) but I tried something and it is not working.
The code I wrote was:
for(i=1; i<21; i++) {
var modal = "#myModal"+i;
jQuery(".modal-backdrop, " + modal +" .close, " + modal +".btn").on("click", function() {
jQuery(modal+" iframe").attr("src", jQuery(modal+" iframe").attr("src"));
});
}
It is not working.

Essentially you do not need a for loop for this, just bind a click handler to [id*='myModal'] which are all the elements having id starting with myModal
jQuery("[id*='myModal'] .close, [id*='myModal'] .btn").on("click", function() {
var that = this;
jQuery(that).find("iframe").attr("src", jQuery(that).find("iframe").attr("src"));
});
And now clicking on the backdrop should stop all the videos
jQuery(".modal-backdrop").on("click", function() {
jQuery([id*='myModal']).find("iframe").attr("src", jQuery([id*='myModal']).find("iframe").attr("src"));
});
Why your code is not working because the value of i is constantly changing and is not preserved per click handler.
To make it work you should use IIFE.

I changed my code a little bit by defining immediately-invoked function expression IIFE.
I had the jquery to stop the youtube video on clicking close button and just needed to input a variable which will work for all the modals so I added [id^='myModal] to the input that is i which the function takes to execute the code.
(function(i) {
//Defining a variable "modal" equating it to "[id^='myModal']"
//'i' will be any modal having id starting with **myModal**
var modal = i;
//Jquery to stop the youtube video
jQuery(".modal-backdrop, " + modal +" .close, " + modal +".btn").on("click", function() {
jQuery(modal+" iframe").attr("src", jQuery(modal+" iframe").attr("src"));
});
}
("[id^='myModal']"));

jquery, time out another jquery function if a user clicks a div?

I have the following script which fades in multiple divs called 'noti_box'. If a user closes these divs then another div 'advert' fades in in its place.
<script>
$(document).ready(function(){
var animations = [];
$('.noti_box').each(function(i) {
animations.push(
$(this).hide().delay(i * 1000).fadeIn(1500).promise()
);
});
$.when.apply($, animations).done(function () {
time=setInterval(function(){
if ( $('.noti_box:visible').length === 0 ) {
$(".advert").fadeIn("slow");
} },200);
});
});
</script>
this works fine, basically what happens here is my last function is stuck on a loop, where the 'advert' div fades in when 'noti_box' is not visible on the page.
However, now I want a user to click a div called 'icons' and if they do, then this should re-fade in the 'noti_box' divs and fade out the 'advert' div using this code:
<script>
$('.icons').click(function(){
$('.advert').fadeOut('fast');
$('.noti_box).fadeIn('fast');
});
</script>
The problem I have here is the 'advert' div fades in and out again in the blink of an eye, without fading in my 'noti_box' div. This is because my first javascript function is still on a loop and preventing my second script from executing.
So what I need to do, I think is set a time out interval for my first script when a user clicks my div 'icon' and then clear the time out interval once the script has executed and the 'noti_box' divs are once again showing.
Can someone please show me how I would be able to do this as I am brand new to jquery. Thanks

function notiBox(ele){
this.ele=ele;
this.ele.hide().fadeIn('slow');
console.log("I have been born! "+ele);
}
notiBox.prototype={
constructor:notiBox,
advert:function(){
var ele=this.ele;
this.ele.fadeOut('fast',function(){ele.next('.advert').fadeIn('slow');});
},
fadeBack:function(){
var ele=this.ele;
this.ele.next('.advert').fadeOut('slow',function(){ele.fadeIn('slow');});
},
}
$(document).ready(function(){
var timeIn=1;
$('.noti-box').each(function(){
var self=this;
this.timer=setInterval(function(){self.notiBox=new notiBox($(self));clearInterval(self.timer);},1000*timeIn);
timeIn++;
});
$('.icon').click(function(){
$('.noti-box').notiBox.fadeBack();
});
});
Right the above is a 'OOP' based approach to your problem. The only problem you might have with this is that your advert divs are not next to the box div. Sorry I guess your DOM elements and layout. Also my methods my not be correct because it's been so long since I've written something like that. I'll do some tests. In the mean time, could you put up some HTML? So that I can adjust my code :d

JQuery: div appears and disappears normally but second time clicked it does not work

I am pretty new to JQuery. I was looking for divs to hide and show in my homepage. This worked with following code pretty good:
jQuery(document).ready(function () {
jQuery(".tab-filteractivation2").hide(); //hide at the beginning
function hideDiv(e) {
e.preventDefault();
jQuery(this).text('open it') // text after first click
.click(showDiv)
.siblings(".tab-filteractivation2").hide(400);
}
function showDiv(e) {
e.preventDefault();
jQuery(this).text('close it') // text when it is open
.click(hideDiv)
.siblings(".tab-filteractivation2").show(400);
}
jQuery('.hover').click( showDiv );
This is my HTML-code:
<div class="filter">
<a class="hover" href="javascript:;">open</a>
<div class="tab-filteractivation2">test</div>
</div>
My DIV is called tab-filteractivation2 and it appears and disappears as I want. But only for the first click: As soon as I click more than one time the show button, it appears somehow exponential.
Here is a little step-by-step introduction:
1. I click on "open" and the tab appears with the delay (400) (with the text "test")
2. I click on "close it" and the tab disappears with the delay (400) (until here everything is fine)
3. I click again on "open it" and the tab appears BUT first it appears with the delay (400) and then immediately disappears with the delay (400) and then again appears with the delay (400).
4. I click on "close it" and the tap disappears with the delay (400) and it appears with the delay and it disappears with the delay and it appears with the delay and it disappears with the delay (400).
Therefore I wrote it is somehow exponential. It will be from click by click more and more actions until it is finished. But I would be happy only having this delay once and all the other steps not.
Can someone help me by this function and say how I could prevent it? That would be great!
Many thanks in advance. And I hope it was somehow clear for you guys.

Try:
jQuery(".tab-filteractivation2").hide(); //hide at the beginning
function showDiv(e) {
e.preventDefault();
if(jQuery(this).text() == 'close it'){
jQuery(this).text('open it').siblings(".tab-filteractivation2").hide(400);
}
else{
jQuery(this).text('close it').siblings(".tab-filteractivation2").show(400);
}
}
jQuery('.hover').click( showDiv );
DEMO here.

you could use toggle():
jQuery('.hover').click(function (e) {
e.preventDefault();
var $this = $(this);
$this.siblings(".tab-filteractivation2").stop().toggle(400, function () {
$this.text($(this).is(':visible') ? 'close it' : 'open it');
});
});

You add an event listener every time you hide or show the tab. You need to initialize nodes' listeners separately.

$('.hover').on('click', function() {
if($('tab-filteractivation2').is(':visible')) {
$('.tab-filteractivation2').slideUp(400);
} else {
$('.tab-filteractivation2').slideDown(400);
}
});
The code above will do what you are trying to do in a much more simple manner. If you are struggling to understand how it works give me a shout :).

ajax: how to reopen a div after closing using ajax

I call a page with ajax in a div. when the page opens, there is a "close "button to hide the div. After clicking the close button, I need to refresh the page to reopen the div.
What should I do to open and close the div as much as I like without refreshing the page?
code:
<script>
$(document).ready(function(){
$('#close').click(function() {
$('#show_options').hide();
$(window).unload( function () { alert("Bye now!"); } );
});
});
</script>
Close <div id="show_options" style="position:absolute; width:500px; padding:10px; left: 246px; top: 41px; z-index:900;"></div>My selection: <span id="select-result" style="font-family:Arial, Helvetica, sans-serif;font- size:10pt;color:#444;">leeg</span> </div>
<a ONClick="xmlhttpPost('selected_output_team.php', 'options', 'show_options'); return false; " id="show_options"> edit</a>

I haven't tested this, but at the "close" anchor, try this:
Close
... stuff ...
Open
Once you have that, you can, instead of removing the div, simply remove (and readd) its contents:
function closeDiv()
{
document.getElementById("show_options").innerHTML = "";
}
function openDiv()
{
document.getElementById("show_options").innerHTML = "...whatever...";
}
There are other ways of course, but this is one of them. Note that I haven't tested the code.

use toggle() instead of hide() or show()

I am not an expert but if you do not want to hide or show the div tag with animation, you can simply change the visibility of the div tag using CSS. You can have the following functions to close and open the div tag:
function close() {
document.getElementById("show_options").style.display = "none";
}
function open() {
document.getElementById("show_options").style.display = "block";
}
Nice thing about CSS is that you don't have to regenerate content, therefore I think it should work faster and your code could be shorter.

I'm not really sure that I understand your question. However, if you simply wants the close-link to execute the javascript function, and nothing else, replace the "#" with "javascript:;" in the link-tag. The anchor might give you some unexpected behavior at times.