I can't quite figure out why my jQuery isn't removing/hiding a specific div I've looked at several examples and it should work perfectly fine. This is done on jQuery on Drupal 7. Here's the site in which its live on:http://mahonysbeta.scdmarketing.com/
HTML
<div id="closingnote">
<div class="xbutton">X</div>
<img class="note" src="/sites/default/files/ClosingNote.png">
</div>
CSS
/*closing note*/
#closingnote {
left: 20%;
position: absolute;
top: 175px;
z-index: 9999;
}
.xbutton {
position: absolute;
padding: 3px 5px 0px;
left: 237px;
top: 10px;
color: black;
border: 1px black solid;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
font-size: 10px;
}
JS
(function ($) {
$('.xbutton').click(function(){
$('#closingnote').remove();
});
})(jQuery);
The code you've provided works fine.
If you're dynamically adding your "closingnote" or "xbutton" divider, you'll need to delegate the click event to an ancestor which was created prior to that being added to the page using jQuery's on() method:
$('body').on('click', '.xbutton', function() {
$('#closingnote').remove();
});
If this still doesn't work, one can only conclude that you've either forgotten to include jQuery, have included jQuery after your code or are using multiple elements with the same id.
Check your browser's JavaScript console to see if any errors are being thrown, and ensure that your ids are unique.
Related
This is the iframe (a chatbot html page) , which I am calling in another HTML project. So, i need to toggle the classes (shown below) as an onclick event or by any other functions
chatbot html page=> there is a logo, which I placed in bottom right and when someone clicking on that logo, a form div is opening... this project I'm calling in another project inside iframe
<iframe id="overlayDiv" class="overlayDiv" src="http://127.0.0.1:5501/index.html" frameborder="0"</iframe>
classes for toggling
<style>
.overlayDiv {
border: 1px solid red;
z-index: 999;
position: fixed;
right: 0;
bottom: 0;
height: 91px;
width: 92px;
cursor: pointer;
}
.overlayDivActive {
height: 470px;
width: 390px;
position: fixed;
right: 0;
bottom: 0;
z-index: 999;
border: 1px solid red;
}
</style>
for that , below functionality is not working
$(document).ready(() => {
$('#overlayDiv').click(function (e) {
$('#overlayDiv').toggleClass('overlayDivActive')
})
})
I'm a little unsure what you're trying to achieve exactly. You can make use of
//js
document.getElementById("overlayDiv").classlist.toggle("someClass");
//jQuery
$(".overlayDiv").toggle();
if that is what you're referring to.
You may or may not find this to be useful as well: https://www.w3schools.com/tags/tag_details.asp
I hope this helps a little bit since you've given minimal examples
You can use either of these two options and it will work for you. The important thing is that you order well what you have to do.
This would be using Javascript
document.getElementById("overlayDiv").classlist.toggle('active');
This would be using jquery
$(".overlayDiv").toggle('active');
This will add the 'active' class to your tag, so now you can work on your css like this
.overlayDiv {
border: 1px solid red;
z-index: 999;
position: fixed;
right: 0;
bottom: 0;
height: 91px;
width: 92px;
cursor: pointer;
}
.overlayDiv.active {
height: 470px;
width: 390px;
position: fixed;
right: 0;
bottom: 0;
z-index: 999;
border: 1px solid red;
}
The toggle is a very powerful tool that you will use more than once in projects.
I hope this helps you.
I have the following html.
<div id="video-popup-overlay"></div>
<div id="video-popup-container">
<div id="video-popup-close" class="fade"><i class="fa fa-times"></i></div>
<div id="video-popup-iframe-container">
<iframe id="video-popup-iframe" src="" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</div>
Basically I have a video playing when the #video-popup-container is showing. I want to be able to hide this video. But normally when the element is hidden, the video still plays in the background.
That is why I want to change the src. But when I change the src, the elements don't hide. But the hide commands work if I don't change the src.
Is there a reason this would be happening?
$("#video-popup-close, #video-popup-overlay").on('click', function(e){
$("#video-popup-iframe").attr('src', "");
$("#video-popup-overlay").hide();
$("#video-popup-container").hide();
});
Here is an example
Is it a requirement to be able to potentially show again after it is hidden? Since you're setting the src param in the iframe to blank I'll assume probably not?
If that is the case, I would recommend to try using the .remove() function instead of hiding. ie:
$("#video-popup-close, #video-popup-overlay").on('click', function(e){
$("#video-popup-overlay, #video-popup-container").remove();
});
UPDATE:
Based on the fiddle provided it looks like you are calling the wrong ID's to close. View fiddle here: https://jsfiddle.net/g139c9b0/2/
$("#video-popup-close, #video-popup-overlay").on('click', function(e){
$("#video-popup-overlay, #video-popup-iframe-container, #video-popup-close").hide();
$("#video-popup-iframe").attr('src', '');
});
MORE UPDATE:
Sorry, I thought that would be enough to extrapolate. Yes, you will have to add a show() function since you are hiding the elements. Here is the full fiddle, working as I think you would expect it to: https://jsfiddle.net/g139c9b0/3/
My best guess as to why you see the odd behavior is that the iframe itself is NOT being treated as part of the current DOM, so hiding it's container won't necessarily cascade to the iframe window. Generally you cannot interact with an iframe using javascript (without some workarounds). It definitely feels like a bit of a browser bug, but it's possible that it works as such for security reasons.
what kind of video are you playing?
Is a locally hosted file, a YouTube video, Vimeo? I'm asking because if it is YouTube, maybe you could just use jQuery to stop the video.
this being said, I've tested your code and it seems to work ok.Are you getting any errors on the browser console?
$(".clickme").on('click', function(e){
e.preventDefault();
$("#video-popup-iframe").attr('src', "//player.vimeo.com/video/"+$(this).attr('id'));
$("#video-popup-overlay, #video-popup-container").show();
});
$("#video-popup-close, #video-popup-overlay").on('click', function(e){
$("#video-popup-overlay, #video-popup-container").hide();
$("#video-popup-iframe").attr('src', '');
});
#video-popup-overlay {
display: none;
position: fixed;
z-index: 995;
top: 0;
background-color: #000;
opacity: 0.8;
width: 100%;
height: 100%;
}
#video-popup-container {
display: none;
position: fixed;
z-index: 996;
width: 60%;
left: 50%;
margin-left: -30%;
top: 20%;
background-color: #fff;
}
#video-popup-close {
cursor: pointer;
position: absolute;
right: -10px;
top: -10px;
z-index: 998;
width: 25px;
height: 25px;
border-radius: 25px;
text-align: center;
font-size: 12px;
background-color: #000;
line-height: 25px;
color: #fff;
}
#video-popup-close:hover {
color: #DE0023;
}
#video-popup-iframe-container {
position: absolute;
z-index: 997;
width: 100%;
padding-bottom: 56.25%;
border: 2px solid #000;
background-color: #000;
border-radius: 2px;
}
#video-popup-iframe {
z-index: 999;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="clickme" id="161171581">
Click me
</div>
<div id="video-popup-container">
<div id="video-popup-close" class="fade">x</div>
<div id="video-popup-iframe-container">
<iframe id="video-popup-iframe" src="" width="100%" height="100%" frameborder="0"></iframe>
</div>
</div>
another possible solution:
Stop embedded youtube iframe?
EDIT: take a look at the updated code, is this the expected behavior?
EDIT2: https://jsfiddle.net/588chuyb/
Try hide before change the src. And look at the console and see if there is some message, it should helps.
$(document).on('click', '#video-popup-close, #video-popup-overlay', function(e){
$("#video-popup-overlay, #video-popup-container").hide();
$("#video-popup-iframe").attr("src", "");
});
Through the years I already found a lot of answers over here, but now I'm really stuck on something and writing my first posted question ever!
I am making a website with some graphs. The background of the graph is an image showing the x and y-axis. I am drawing all the dots using Javascript and positioning them based on data out of a .txt-file. That is all working (yay!), but... here's my problem:
I've got 15 people who answered in 7 graphs. When you click on a dot from person1 in graph1, I want this dot and all the dots from this person in the other graphs to become bigger. All the dots have 2 classes: .circle and .circle[number] (each circle[number] appears in every graph, so the [number] is the person ID). So I though adding the class .big to .circle1 when clicked would do the trick, but I for some reason the class is never added.
I tried all my stuff that usually works, also tried a lot of answers I found over here and when I try this on for instance the title of my page it is working. So I have a feeling the problem lies with the dots... I already made sure that the dots are above the image, so that is not the problem. And when I style the dot with an hover it does know on which one I'm hovering and makes it bigger. Also tried adding some HTML in the divs, but still not working.
I'm drawing the dots using Javascript in HTML like this:
<div class="circle circle0" style="position: absolute; left: 275.988px; top: 165.559px;"></div>
<div class="circle circle1" style="position: absolute; left: 231.204px; top: 141.898px;"></div>
<div class="circle circle2" style="position: absolute; left: 228.308px; top: 138.01px;"></div>
etc... (in every graph, so 7 times but every time different positions based on the data)
.circle {
border-width: 2px;
border-style: solid;
border-color: black;
border-radius: 50%;
width: 10px;
height: 10px;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
z-index: 999;
}
An example of what is not working (only on the dots, when using a title it is working):
$(".circle").on("click",function(){
$(".circle").addClass("big");
});
Does anyone have an idea of why this is not working and how it can work?
Thanks!
ANSWER: There was nothing wrong with the code, I just had to move my code a level higher (stupid! Sometimes it's so simple..)
You're missing the "big" class in your CSS, so that might be one reason it's not working. Here's an example of it working with your code and the class added:
$(document).ready(function() {
$(".circle0").on("click",function(){
$(".circle0").toggleClass("big");
});
$(".circle1").on("click",function(){
$(".circle1").toggleClass("big");
});
$(".circle2").on("click",function(){
$(".circle2").toggleClass("big");
});
});
.circle {
border-width: 2px;
border-style: solid;
border-color: black;
border-radius: 50%;
width: 10px;
height: 10px;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
z-index: 999;
}
.big {
width: 15px;
height: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="circle circle0" style="position: absolute; left: 275.988px; top: 165.559px;"></div>
<div class="circle circle1" style="position: absolute; left: 231.204px; top: 141.898px;"></div>
<div class="circle circle2" style="position: absolute; left: 228.308px; top: 138.01px;"></div>
I have a very nice CSS-only hover tooltip solution like so:
Works great on non-touchscreens but on touchscreens a click shows the tip and it never hides. I am trying to get a toggling solution which keeps the work I have done and adds a touchscreen jQuery or CSS solution to show and hide the tooltips. I'd like to have the show/hide toggle on click but a solution with delay() would also do.
I have read
Selecting and manipulating CSS pseudo-elements such as ::before and ::after using jQuery
Access the css ":after" selector with jQuery
How to modify programmatically with javascript the css ::before and ::after
Here is the current code
JS added today to try to resolve for touchscreens:
$('.tooltip').click(function() {
$(this).addClass('tooltipBefore tooltipAfter').delay( 800 ).removeClass('tooltipBefore tooltipAfter');
});
HTML
<a href="#" class="tooltip" title="Putts per round is the average number of putts per round played." >
<span title="Info"><img src="/g/inputs/help.png"></span>
</a>
CSS - modified today to add .tooltipBefore .tooltipAfter which I also tried with :before and :after selectors added
.tooltip{
display: inline;
position: relative;
background:none;
border:none;
}
.tooltip:hover:after, .tooltipAfter:after {
background: #333;
background: rgba(0,0,0,.8);
border-radius: 5px;
bottom: 26px;
color: #fff;
content: attr(title);
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 220px;
}
.tooltip:hover:before, .tooltipBefore:before{
border: solid;
border-color: #333 transparent;
border-width: 6px 6px 0 6px;
bottom: 20px;
content: "";
left: 50%;
position: absolute;
z-index: 99;
}
EDIT 2
Revised JS per #maioman answer to below. Console log i verifying that the correct element is being selected by $(this) but in Chrome inspector the class flashes but is never modified by addClass or removeClass. Also tried toggleClass but class is not added.
END EDIT 2
console.log($(this).attr("Title"));
$(this).addClass('tooltipBefore').addClass('tooltipAfter').delay( 3000 ).removeClass('tooltipBefore').removeClass('tooltipAfter');
EDIT 3
OK, so edit #2 has issues with how I call the addClass and removeClass. This version works in browser but and toggles class correctly but still does not work on phone:
$('.tooltip').bind( "click touchstart", function() {
$(this).toggleClass('tooltipBefore tooltipAfter');
});
END EDIT 3
try changing this
$('.tooltip').click( function () {
to
$('.tooltip').on('click touchstart', function () {
I am simulating a pop up window that fades the background out. I do this by simply toggling a div that fills the whole screen. I would like to be able to close the pop up by clicking the outside background, but not when you click on the new content area, which is what is currently happening. My code:
JS:
function popbox() {
$('#overbox').toggle();
}
HTML:
<div class="popbox" onclick="popbox()"> Click Here </div>
<div id="overbox" onclick="popbox()">
<div id="infobox1">
<p>This is a new box</p>
<br />
<p>hello </p>
<br/><br/>
<p style="color:blue;text-align:center;cursor:pointer;" onclick="popbox()">close</p>
</div><!-- end infobox1 -->
</div> <!-- end overbox -->
CSS:
#overbox {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: rgba(64, 64, 64, 0.5);
z-index: 999999;
display: none;
}
#infobox1 {
margin: auto;
position: absolute;
left: 35%;
top: 20%;
height: 300px;
width: 400px;
background-color: white;
border: 1px solid red;
}
.popbox {
cursor: pointer;
color: black;
border: 1px solid gray;
padding: 5px; 10px;
background: ghostwhite;
display: inline-block;
}
JSFiddle link: http://jsfiddle.net/RrJsC/
Again, I want it to toggle only when you click the faded background or "close" (which isnt working in the jsfiddle but is on my site), but not when you click inside the white box that it contains.
After some research it seems like I might be looking for .stopPropagation(), but I haven't been able to get it to work at all.
I got it to work using jQuery's event handlers:
$('#container').on('click', '.popbox, #overbox', function(e){
$('#overbox').toggle();
});
$('#container').on('click', '#infobox1', function(e){
e.stopPropagation();
});
I replaced document with '#container' for better performance. You should wrap all your divs in <div id="container">...</div> so the the callback doesn't fire on the dom every time there is a click (even thought that callback is only called when the selector matches).
You'll also need to get rid of your onclick html attributes, because they will throw an error if that function is not defined.
I hope I understand well your problem.
If it is the case, you should have this:
<div id="overbox">
instead of this:
<div id="overbox" onclick="popbox()">
here is the updated jsfiddle