Javascript "close button" not working - javascript

Today I tried to make the simpliest close button in javaScript. It unfortunately does not work. This is how it look like:
<div id="popup_bg">
<div id="popup_window">
<span id="popup_close">
</span>
</div>
</div>
and the js code is:
<script type=”text/javascript”>
$("#popup_close").click(function() {
$("#popup_bg").fadeOut();
event.stopPropagation();
});
</script>
I'd also like to make it apply to any of those "popups", so I'd probably change my it to something like $(this).parent().parent().fadeOut(); - is it possible to do so?
Thanks for help guys! :)
#EDIT
As none of Your solutions work I'll place my code literally :D Maybe You'll find some mistakes that makes it faulty:
<?php if(isset(errors['user'])) : ?>
<script type="text/javascript">
$(function()
{
$("#popup_close").on('click', function() {
$("#popup_background").fadeOut();
//event.stopPropagation();
});
});
</script>
<div id="popup_background" >
<div class="popup_window">
<span class="title">
error
</span>
<span class="message"><?php echo errors['user']; ?>
</span>
<span id="popup_close" class="button">OK</span>
</div>
</div>
<?php endif; ?>
I hope that will help You spot any errors. It displays correctly, I click on my "OK" span, nothing happens :p I hate js :D

I saw your code, the jquery part of the code is working..
Check here: Jsfiddle -> http://jsfiddle.net/Zahinize/7YD4D/13/
You should rewrite your conditional If statement like this,
<? ini_set('error_reporting', E_ALL); ?>
<script type="text/javascript">
$(function()
{
$("#popup_close").on('click', function() {
$("#popup_background").fadeOut();
//event.stopPropagation();
});
});
</script>
<div id="popup_background" >
<div class="popup_window">
<span class="title">
error
</span>
<span class="message">
<?php
if(isset(errors['user'])){
echo errors['user'];
}
?>
</span>
<span id="popup_close" class="button">OK</span>
</div>
</div>
set error_reporting at that the top..
See more here: http://php.net/manual/en/function.error-reporting.php
Maybe this would help, but frankly i haven't seen error handling like this: error['user'] anywhere.. you should see error handling for writing better code ;)

IDs must unique, you should use classes instead:
<div class="popup_bg">
<div class="popup_window">
<span class="popup_close"></span>
</div>
</div>
Then for selecting the target parent of the clicked element you can use closest method:
$(function() {
$(".popup_close").click(function(event) {
$(this).closest(".popup_bg").fadeOut();
// event.stopPropagation();
});
});
Note that in your code event is undefined you should pass the event object to your handler.

Add document.ready and/or use .on function
<script type=”text/javascript”>
$(function(){
$("#popup_close").on('click', function() {
$("#popup_bg").fadeOut();
event.stopPropagation();
});
});
</script>
Also, ID's may not repeat in your document, use other selector like class

If there are more than one popup better to use class instead of id.
Example.
$(function()
{
$(".popup_close").on('click',(function()
{
$(this).parents("div.popup_bg").fadeOut();
});
});
And html
<div class = "popup_bg">
<div class = "popup_window">
<span class = "popup_close"></span>
</div>
</div>

You need some content in your span or set height and with. Then you will be able to click on it and it will work.
Avoid tricks with parent().parent() this may break if you change your div structure.
As others have said use the jquery document ready (read a tutorial) and use classes not ids if you intend to reuse the code (read a CSS tutorial)...

Related

Using PHP to search for a CSS Class

I´ve got this code snipped:
<?php
if (class_exists('countdown')) {
$myclass = "counter";
}else{
$myclass = "";
}
?>
<div class="jumbotron <?php echo $myclass; ?>
<div class="bg_wrapper">
<div class="bg_banner"
<div class="container">
<div class="content_wrap">
<ul class="countdown">
</ul>
</div>
</div>
</div>
</div>
</div>
What I want to do is, PHP need to check at the DOM if the div with the class "countdown" exits and if yes, create a new one.
Can you help me, with class_exists its not working.
Thank
The class_exists() function is a PHP function, which doesn't know anything about your HTML or CSS. PHP does something on your webserver, and your webserver sends everything (HTML) to your browser. From that moment, you need JavaScript to manipulate your DOM.
Read about class_exists() on: http://php.net/manual/en/function.class-exists.php
You can use jQuery (a JavaScript library) to check if a CSS class exists:
if ($('.countdown').length > 0) {
// exists
}
If your class exists you can add the class 'counter' to your jumbotron:
if ($('.countdown').length > 0) {
$('.jumbotron').addClass('counter');
}
You should place this code in a document ready handler, so it will be executed automatically when your page is loaded:
$(document).ready(function () {
if ($('.countdown').length > 0) {
$('.jumbotron').addClass('counter');
}
}
Don't forget to include jQuery to your page, otherwise it won't work:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
And for more information about DOM manipulation using jQuery: http://api.jquery.com/

Javascript not firing in Wordpress 4.6.1

The code below is working in a jfiddle, but once on my WordPress site it's not firing. I am updated to 4.6.1. I can't seem to find any errors in the console, either. Any ideas?
CSS:
<style>.bluebg { background: cyan; }</style>
HTML:
<nf-field>
<div class="nf-field-container textbox-container label-left ">
<div class="nf-before-field"><nf-section></nf-section></nf-section></div>
<div class="nf-field"><div id="nf-field-8-wrap" class="field-wrap textbox-wrap nf-pass" data-field-id="8">
<div class="nf-field-label">
<label for="nf-field-8" class="">Full Name <span class="ninja-forms-req-symbol">*</span></label></div>
<div class="nf-field-element">
<input id="nf-field-8" name="nf-field-8" class="ninja-forms-field nf-element" value="" type="text">
</div>
</div>
</div>
<div class="nf-after-field"><nf-section><div class="nf-input-limit"></div><div class="nf-error-wrap nf-error"></div></nf-section>
</div>
</div>
</nf-field>
JAVASCRIPT:
<script>
$('input.nf-element').bind('focus blur', function () {
$(this).closest('nf-field').find('.nf-field-container').toggleClass('bluebg');
});
</script>
UPDATE
It looks like the problem is in the plugin that is generating the HTML, not the javascript I'm using. If I paste the same HTML in manually, that input field does change the parent class, but none of the fields that the form plugin generates (NinjaForms) will change.
I'm not sure if that's out of scope for assistance here, but if anyone has any ideas why that would be, I'd be appreciative!
Simply replace "$" with "jQuery".
To account for wordpress likely using jQuery.noConflict() try changing to:
(function($) {
$(function() {
$('input.nf-element').on('focus blur', function() {
$(this).closest('nf-field').find('.nf-field-container').toggleClass('bluebg');
});
});
})(jQuery);

Jquery Html Element Selector

I have a HTML code like this,
<div class="panel-footer">
<div class="post-activity">
<i class="loading-icon"></i>
<button onclick="ChangeColor(this);">Change Color</button>
</div>
<div class="comments-ch"></div>
</div>
When I write this Jquery code
function ChangeColor(element)
{
$(element).closest(".panel-footer").find(".comments-ch").css("background-color","#CC0000")
}
Not working for class = comments-ch,
But If I write this code like this,
function ChangeColor(element)
{
$(element).closest(".panel-footer").find(".post-activity").css("background-color","#CC0000")
}
working.
Summary, first div under the "panel-footer" is OK, but the second/last div NOT OK.
How can i reach the second/last div element? Thanks
Try .show() after setting the CSS:
function ChangeColor(element) {
$(element).closest(".panel-footer").find(".comments-ch").css("background-color", "#CC0000").show()
}
When using a class selector, make sure you specify a period in front.
For example, in:
$(element).closest(".panel-footer").find("comments-ch").css("background-color","#CC0000")
Change from find("comments-ch") to find(".comments-ch")

fade out <a href> element

I'm trying to face a particular class .mosaic-block to fade on clicking this:
<a href="#">
<div id="t0" class="n0 lfloat"><img src="images/home.png"><br>Home</div>
</a>
My Jquery code is:
<script type="text/javascript">
$(function () {
$('a #t0').click(function() {
$(".mosaic-block").animate({
opacity: 0.0
}, 1500 );
});
});
</script>
But I'm not getting the desired results.
EDIT#1
My .mosain-block HTML code:
<div class="mosaic-block bar">
<h4>Sloppy Art</h4>
<p>abcd</p>
</div>
Your code is fine.
You can see it in action here.
So the error is elsewhere. For example in the jQuery import (yes, I got a hint on this one ;) ) which could look like this :
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
Why not use the inbuilt fadeOut() method
$(".mosaic-block").fadeOut(1500);

Why isnt my Jquery background image switching?

Heres my Jquery
$(".sectiontitle").click(function (e) {
$(this).next('div').slideToggle("slow");
el = $(this).find(".toggler > a.toggle");
currBg = el.css('background-image');
if (currBg == "url(http://blah/resources/img/close.gif)") {
currBg = "url(http://blah/resources/img/open.gif)";
console.log('open gif');
}
else {
currBg = "url(http://blah/resources/img/close.gif);"
console.log('close gif');
}
console.log(currBg);
el.css('background-image', currBg);
return false;
});
Heres my HTML panel (of which there are many)
<div class="majorsection">
<div class="sectiontitle">
<h2>Restaurant Bookings</h2>
<div class="toggler">
<a title="click to hide" class="toggle" href="http://blah/index.php/console/index"><span>-</span></a>
</div>
<div class="clear"></div>
</div>
<div class="msectioninner">
<div class="minorsection">
<div class="sectionlist">
<div class="section"></div>
</div>
<div class="sectionoptions">
<div class="clear"></div>
</div>
</div>
</div>
</div>
The image switches on the first click and the panel slides all cool both ways but the image doesn't change back
Why not use two css classes instead.
It will make the code much cleaner and maintainable.
Failing that one thing to try is to change
.css('background-image', currBg)
to
.css('backgroundImage', currBg)
I remember there was an issue with this (but thought it had been fixed). If this does not work have you got a url showing the issue?
Have you tried console.log(currBg); right after you retrieve it? The url() property may be getting rewritten/resolved. Not sure - but a similar problem arises if you are testing the .attr('src') of an image - it might not be what you set it to anymore.
A suggestion though: Rather than hard coding the background-image values, consider doing something like:
$(document).ready(function(){
$('a.toggle').addClass('closed');
$(".sectiontitle").click(function(e){
$(this).next('div').slideToggle("slow");
el = $(this).find(".toggler > a.toggle");
// jQuery 1.3 has this:
// el.toggleClass('.closed');
// otherwise - use this:
if (el.is('.closed'))
{
el.removeClass('closed');
} else {
el.addClass('closed');
}
return false;
});
});
Then your a.toggle picks up the background-image property of the "open" and a.toggle.closed gets the "closed" image in your CSS files.

Categories

Resources