We Keep Coding

mousedown doesn't work on a div with an iframe

I have a website that's running WordPress and I'm making the editor look like it's using Gutenberg but with the classic editor and ACF. I'm trying to show some options when you click on a WYSIWYG editor. What I've found is the best way to show this is to use mousedown when the cursor is in a region and appears when you click down on the mouse.
The problem I'm having is that div that needs to be clicked to show some options has an IFRAME and I've tried everything online and nothing appears to work.
Here's my code to show the problem I'm having. What's suppose to happen is when you click on the div with a border, the text at the bottom has a green background.
$(".test iframe").on("mousedown", function() {
$('.bottom').css('background','green');
});
.test {border:1px solid #ccc;width:450px;height:110px}
.test iframe {width:100%;height:100%;border:0}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test"><iframe></iframe></div>
<div class="bottom">bottom</div>

Creating a preview effect for gallery images that closes when clicked outside

I am making a preview box that pops up when you click a gallery image and need to make it disappear when you click outside of it. I found many solutions but none work with my code. I think the problem is I may need a while loop but I tried several conditions and all were infinite.
This is the last solution I tried. The preview works but I can't get it to close when I click out.
DEMO
$('.portPic').click(function() {
if ($(this).attr('data-src2')) {
$('#clickedImg').attr('src', $(this).attr('data-src2'));
} else {
$('#clickedImg').attr('src', $(this).attr('src'));
}
$('#clickedImg').css('visibility', 'visible');
$('#clickedImg').blur(function() {
$('#clickedImg').css('visibility', 'hidden');
});
});

I've done a similar thing with a pop-out menu, where the user clicks "off" the menu and it closes. The same can be applied here.
I used an overlay div which spans the whole screen (with a translucent opacity - maybe 0.6 black or similar; or whatever colour you want) which gives a nice modal effect. Give it an id - let's say modal-overlay.
You can put it static in your page code, and set the display to none and make it the full-size of the page (through a CSS class).
<div id="modal-overlay" class="full-screen-overlay"></div>
Set the z-index of the overlay to higher than the rest of your page, and the z-index of your popup to higher than the overlay. Then when you show your popup, also set the visibility of the modal-overlay to visible, too.
In your script code, put an event handler for when the modal div is clicked:
$('#modal-overlay').click(function() {
$('#clickedImg').hide();
$('#modal-overlay').hide();
})
I would also use the .hide() jQuery method, which is easier than typing out the visibility.
Better still, if you have more than 1 thing going on (which you would with a modal overlay), wrap your "show/hide" of the popup in a hidePopup() or closePopup() method and call it onClick to save re-using code.
For effects when opening the popup/overlay, you can also use jQuery animations like .fadeIn() or .slideDown(). Use fadeOut and slideUp to hide.
These animations also perform the showing/hiding, so you wouldn't need to call .hide() or .show().
Check out this link to jQuery's API documentation for animations. Very useful and a good read.
Hope this helps!

You'll need to create a seperate div that is most likely fixed position that sits just one step lower (z-index) than your popped-up image. Attach a click handler to this div (overlay) and do your showing/hiding functions in there.

You can use modal photo gallery.
http://ashleydw.github.io/lightbox/
You can use this codepen code, too. SO is not letting me post the link here. So serach using thi "Bootstrap Gallery with Modal and Carousel".
Hope this helps..

Javascript for changing background image depending on area user is in

My navigation has 5 buttons [Home, About, Services, Events, Contact] and each button has a background image of "blue-button.png". I want to switch it to "white-button.png" when the user is in that section. I wish it were as simple as a:active, but it's not and i'll explain why;
All of the content is displayed in an overlay. The way the website is built, you never leave the index page, but the content is loaded into the index page. This is why the a:active doesn't work.
Now for example, when the user opens the "About" page, the content (which I will call "About Main") appears, and has links to "About-Me", "About-You", and "FAQ". I want the "About" button to change background images (to white) whenever the user is in any of the areas that pertain to "About" (About Main, About me, About you, FAQ)... I also want the button to change back to blue when the user goes to a different section (EX: Contact) and then have the Contact button become white.
The only way I've noticed to tell where the user is, is that the overlay they are on has a css style of display:block while all the others are hidden with display:hidden...
So, I was thinking javascript similar to this:
if (About Main, About Me, About You, FAQ) is display:block
{ $(".about").css('background-image', 'url(../img/white-button.png)' }
else
{ $(".about").css('background-image', 'url(../img/blue-button.png)' }
if (contact) is display:block
{ $(".contact").css('background-image', 'url(../img/white-button.png)' }
else
{ $(".contact").css('background-image', 'url(../img/blue-button.png)' }
the navigation buttons have Classes like: <a class="about"><a class="contact">
while the overlays have IDs like: <div class="simple_overlay" id="about"><div class="simple_overlay" id="contact">
I know it's a lot of information but hopefully someone can help me clear up the specifics, I'm not very good with javascript...
Heres a link to the site if you want to look to get a better understanding
Thank you so much for your time in advance, This one is really killing me!

You're better off just adding and removing a .selected class from each of your links when you click on them. Then set the .selected class to have a background image of white-button.png. You would need to add click handlers to your navigation links so it would first remove any existing .selected classes from all of them, and then add .selected to the link you clicked on.
CSS
.navigation a.selected
{
background-image: url(../img/white-button.png);
}
Javascript - I see you're using jQuery so that makes this easy. Add the code below to your initialization section. I haven't tested this script but it should be pretty close.
// Add click event handler to all navigation links
$('.navigation a').click(function() {
// First remove selected class from all navigation links
$('.navigation a').removeClass('selected');
// Now add the selected class to the current link
$(this).addClass('selected');
});
EDIT: I tweaked this a little and added a jsfiddle for you to see it in action:
http://jsfiddle.net/VCaSV/

Content box on image hover?

I have a bunch of images in a gallery on a new website im building and Im wanting to have content displayed when a user hovers over an image.
For example if a user hovered over a picture of a car in my gallery then a low opacity content div would fade over the entire image to show text and maybe a link.
I presume this effect could be done with a bit of JS or even CSS Transitions to give the fade.
I just need to know how to make a content box appear over the image on hover, possibly at 80% opacity.
Heres an example of what I have in mind:
Thanks for the help, if anyone could point me in the right direction it would be appreciated.
I can post more information if needed.

This is somewhat simple way of implementing a hover show and hide with jquery.
Working example: http://jsfiddle.net/va2B8/2/
jQuery ( http://jquery.com/ ):
$(document).ready(function() {
$("#Invisible").hide()
$("#hoverElement").hover(
function () {
$('#Invisible').stop().fadeTo("slow", 0.33);
},
function () {
$('#Invisible').stop().fadeOut("slow");
}
);
});
html:
<p id="hoverElement">This little piggy will show the invisible div.</p>
<div id="Invisible">This is the content of invisible div.</div>
css:
#Invisible { background: #222; color: #fff; }
Edit: I changed url for the working example cause i forgot to fade out on mouse out.
Edit2: Changed url again and changed the code cause i had some extra code there.. plus i thought that i might as well add those two .stop() in there so that it stops the animation If the mouse over or mouse out occurs while animation is going on.
( Without the stops one could hover in and out several times and then when he would stop, the animation would still keep going till it has done each animation as many times as he triggered it. You can test that in here http://jsfiddle.net/va2B8/1/ )

You can start using this fiddle :
http://jsfiddle.net/Christophe/2RN6E/3/
1 div containing image and span like :
<div class="image-hover">
<img src="" />
<span class="desc">text to be displayed when imae hover</span>
</div>
Update
All can be done with CSS...
http://jsfiddle.net/Christophe/2RN6E/4/

Here's an easy jQuery plugin you can implement: http://file.urin.take-uma.net/jquery.balloon.js-Demo.html
It works like this:
$(function() {
$('img').balloon(options);
});
This jQuery applied the balloon function to all images on the page. Here's your HTML:
<img src="example.png" alt="Here's your caption." />
The text in the balloon is going to be whatever is in the alt attribute for images and whatever is in the title attribute for other tags.

I've just done this:
http://twostepmedia.co.uk
It uses hoverintent jquery plugin so there is a delay of 250ms after the user hovers over to avoid erratic hover behaviour.

Trying to make a onmouseover javascript drop down menu

Effect I want . Basically I want to popup a simple menu when the user mouseovers a link .
I tried several ready made scripts , but had trouble integrating them with my site. SO decided to built my own.
here is what I am trying to do:
<li onmouseover=showlist1() onmouseout=hidelist1() ><a class="navigation" href="show_delhi_items.php">Menu heading</a></li>
function showlist1() //onmouseover
{
document.getElementById('list1').style.visibility='visible' ;
}
function hidelist1() //onmouseout
{
if (menu elements don't have focus)
{
document.getElementById('list1').style.visibility='hidden' ;
}
}
now in this how do I implement the 'menu elements don't have focus' part ? I know its not possible to know which elemtn has focus. so I need an alternative. Basically the problem is that as soon as the mouse moves outside the main link(the link that popups the hidden menu), the menu hides. what i want is for the menu to remain visible if it gets focus. but currently it gets hidden as soon as the mouse outside our main link
hope I was clear enough.

Make the menu overlap the list item that has the onmouseover menu. Then only close the menu if the mouse is outside both the list item and the menu. You will have to use:
position: absolute;
top: some-y-value;
left: some-x-value;

Hmm now I made that comment i better back it up with an actual way of doing it :)
Go here and read all about suckerfish dropdowns
Go here to see an example implementation