I am using this jquery code to hide/show a image with fixed position:
$(document).on('mouseover',".multiverseid", function (e) {
var mid = $(this).attr("id");
$('#picture').attr('src', mid);
$('.image-content').css("display", "flex");
});
$(document).on('mouseout',".multiverseid", function (e) {
$('#cardpicture').attr('src', "");
$('.image-content').css("display", "none");
});
the code is working great as long as the image is preloaded. When I do the mouseover on a large picture that is not fully loaded the image do not appear and even staying on the mouseover area longer does not show up the image. i have to move out of the area and reenter the mouseover area to show it.
So I tried it with this code:
$(document).on('mouseover',".multiverseid", function (e) {
var mid = $(this).attr("id");
$('#picture').attr('src', mid);
$("#picture").load(function() {
$('.image-content').css("display", "flex");
});
});
$(document).on('mouseout',".multiverseid", function (e) {
$('#cardpicture').attr('src', "");
$('.image-content').css("display", "none");
});
but I had no success. Same issue. What I am doing wrong?
You don't need to remove the src attribute for that. It is enough to just hide the element with display: none.
Setting the src to an empty string actually cancels the load process and the browser probably keeps the "faulty" state in its cache.
Related
FINAL EDIT: I found a better solution and more simpler on this codepen. A demo of the working functionality.
EDIT: I found where the bug is coming from you can see an example here. When you click on lets say the About tab and hover over and out on contact the content should be hidden. But you go back to hover over About and out the content stays visible, which is not. How do I ensure the mouseout event is being triggered after clicked?
EDIT 2: So I noticed the unbind() method prevents that. When I remove it I can't seem to get the content area to stay active when clicked as the mouseout method overrides it.
I did some research on this but could not find a solution as to why on hover the removeclass does not work. I have encountered a bug with addClass() and removeClass() functions. The thing is I have those function firing on hover or mouseover/mouseout and on click so it gets a bit confusing. Here is a demo of what I'm working with: JSFiddle.
Full screen for better view.
My JavaScript can be kind of messy but ultimately the way this is suppose to work:
1. If you hover over a dot on the map the content on the left red box should reveal what's relevant to the location as well as a 'tooltip' of the location name. (this part works)
2. You mouse out it's suppose to go back to the list of locations and the tooltip disappears. Almost like a reset.
3. Now if you click on the dot, both the tooltip and the content on the left should remain active. Until you either click on the "Back to the list" link on the red box or hover over the other dots. (this also works)
The bug I encountered is if you click around the list panel and hover over a couple of the location dots after a certain while the hover state stays active when you hover over a couple of the locations (which is not suppose to happen). Everything is suppose to go back the list panel when you hover out of the location dot on the map.
$('a.location').click(function (event) {
var loc = this.id;
if ($('div.panel').hasClass('list')) {
$('div.' + loc).removeClass('current');
$('.list').addClass('current');
}
$('.list').removeClass('current');
$('div.panel.' + loc).addClass('current');
event.preventDefault();
}); //click function
$('.back-list').click(function (e) {
$('.panel').removeClass('current');
$('.list').addClass('current');
$('div.location-title.show').removeClass('show').addClass('hide');
$('div.location-title.view').removeClass('view');
e.preventDefault();
}); //back button
$('ul.locations li > a').hover(function () {
//show location hover
var dot = this.id;
$('div.location-title.' + dot).removeClass('hide').addClass('show');
}, function () {
var dot = this.id;
//hide location hover
$('div.location-title.' + dot).removeClass('show').addClass('hide');
}).click(function (event) {
var dot = this.id;
if (!$('div.location-title.' + dot).hasClass('hide')) {
$('div.location-title.' + dot).addClass('view');
} else {
$('div.location-title.' + dot).removeClass('view');
}
event.preventDefault();
});
$('.map__container > span').on({
mouseover: function () { //mouseover
var loc = $(this).attr('class');
$('.panel').siblings().removeClass('current'); //resets all classes that have current
$('.list').removeClass('current');
$('div.panel.' + loc).addClass('current');
$('div.show').removeClass('show').addClass('hide');
$('div.location-title.' + loc).removeClass('hide').addClass('show');
var asb = $('.location-title').siblings();
$('div.location-title').siblings().removeClass('view');
},
mouseout: function () { //mouseout
var loc = $(this).attr('class');
$('div.' + loc).removeClass('current');
$('div.location-title.' + loc).removeClass('show').addClass('hide');
if (!$('div.' + loc).hasClass('current')) {
$('.list').addClass('current');
} else {
$('.list').addClass('current');
}
},
click: function () {
$(this).off('mouseout');
var loc = $(this).attr('class');
$('div.location-title.show').removeClass('show').addClass('hide');
$('div.location-title.' + loc).removeClass('hide').addClass('show');
}
});
Also if you have better suggestions to clean up my JavaScript I'm all ears. Thanks so much!
If i understand right, you might want to try with the event Mouseleave, and i would use to modularize the function toggleClass:
ToggleClass function Jquery
Mouseleave explanation:
mouseleave: function () { //mouseout
var loc = $(this).attr('class');
$('div.' + loc).removeClass('current');
$('div.location-title.' + loc).removeClass('show').addClass('hide');
if (!$('div.' + loc).hasClass('current')) {
$('.list').addClass('current');
} else {
$('.list').addClass('current');
}
},
I hope this helps you. Salutations!
FINAL EDIT: I found a better solution and more simpler on this codepen. A demo of the working functionality.
My problem was in the code example above the $(this).off('mouseout'); was removing the mouseout when clicked. So if you were to hover back to that dot on the map and mouseout the 'tooltip' would stay active, it won't disappear when you mouseout, which it should disappear. I couldn't find a way to bind it again so the toggleClass() was much better. I been pulling my hair on this!
$('.map__container span').click(function(mapIcon){
mapIcon.preventDefault();
var icon = $(this).attr('class');
var panel = $(this).attr('class');
$('.panel').removeClass('clicked');
$('.location-title').removeClass('clicked');
$('.panel.' + panel).addClass('clicked');
$('.location-title.' + icon).addClass('clicked');
});
//Show bubbles over dots on map
$('.map__container span').hover(function(){
var hoverdot = $(this).attr('class');
$('.location-title.' + hoverdot).toggleClass('selected');
});
//Show bubbles on hover over anchor links
$('a.location').hover(function(){
var hoverlink = this.id;
$('.location-title.' + hoverlink).toggleClass('selected');
});
//Anchor links show panels and bubbles
$('a.location').click(function(e){
e.preventDefault();
var panel = this.id;
var icon = this.id;
$('.panel').removeClass('clicked');
$('.location-title').removeClass('clicked');
$('.panel.' + panel).addClass('clicked');
$('.location-title.' + icon).addClass('clicked');
});
//back button
$('.back-list').click(function(backButton) {
backButton.preventDefault();
$('.panel').removeClass('clicked');
$('.location-title').removeClass('clicked');
$('.list').addClass('clicked');
});
I have the following code in my JS file:
jQuery("document").ready(function (e) {
var menu = e(".menu-container");
var button = e(".menu-functions");
e(window).scroll(function () {
if (e(this)
.scrollTop() > 150) {
menu.addClass("f-nav");
button.addClass("collapse-expand");
button.addClass('collapse');
} else {
menu.removeClass("f-nav");
button.removeClass("collapse");
button.removeClass("expand");
button.removeClass("collapse-expand");
}
});
//problem area
$('#menu-functions').click(function(){
if(button.hasClass('collapse'))
{
button.addClass('expand');
button.removeClass('collapse');
}
if(button.hasClass('expand'))
{
button.addClass('collapse');
button.removeClass('expand');
}
});
});
Now I need to make it so that the part under the // problem area starts to work. I reckon there's a toggleClass in jQuery, right? Some advanced conditions could do the trick, however I'm still learning and I need some help. I also need to find a way to animate() the .menu-container div whether the button state is expand or collapse:
If the button was clicked while it had the expand class
animate the menu from bottom to top with 98px;
If the button was clicked while it had the collapse class
animate the menu from top to bottom with 98px.
EDIT - JSFIDDLE:
jsfiddle.net/rcdhnh7L
Try it like this instead. Don't use e as the var for jQuery, that's just strange. And I simplified the problem area to directly grab the elements you want instead of iterating an existing collection.
jQuery("document").ready(function ($) {
var menu = $(".menu-container");
var button = $(".menu-functions");
$(window).scroll(function () {
if ($(this)
.scrollTop() > 150) {
menu.addClass("f-nav");
button.addClass("collapse-expand");
button.addClass('collapse');
} else {
menu.removeClass("f-nav");
button.removeClass("collapse");
button.removeClass("expand");
button.removeClass("collapse-expand");
}
});
//problem area
$('#menu-functions').click(function () {
$('.menu-functions.collapse').addClass('expand').removeClass('collapse');
$('.menu-functions.expand').addClass('collapse').removeClass('expand');
});
});
Or this should work as well:
//problem area
$('#menu-functions').click(function () {
$('.menu-functions.collapse, .menu-functions.expand').toggleClass('expand collapse');
});
I have a website where there is implemented a CSS overlay when the menu is accessed. This overlay fades in and out over the rest of the page but not the menu itself via the z-index. All works well on mouseover, the overlay fades in, and the rest looks dimmed.
However when the mouse is not on the menu anymore, the fadeout of the overlay is messed up. The overlay itself fades out correctly, but all images show up immediately (opacity 1?) and that makes it look strange. I think the images have to be fade-in when the overlay fades-out. You can see an example on www.appartement-tekoop.nl of the behavior.
I think the problem is with the z-index of the images, but am not sure.
This is my javascript for the overlay:
<script type="text/javascript">
jQuery(function () {
var $menu_main_nav = jQuery('#menu-main-nav');
var $menu_main_nav_items = $menu_main_nav.children('li');
var $oe_overlay = jQuery('#oe_overlay');
var $pricetable_dropdown = jQuery(".price-header");
var $menutoggle = jQuery('.menutoggle');
var $mainmenu = jQuery('.main-nav');
$menu_main_nav_items.bind('mouseenter', function () {
var $this = jQuery(this);
$this.children.addClass('slided selected');
// updated code starts
if($this.children('.menu-item-has-children').hasClass('not-shown')){
$menu_main_nav_items.not('.slided').children('.menu-item-has-children').hide();
$this.removeClass('slided');
}
else {
$this.children('.menu-item-has-children').css('z-index', '9999').stop(true, true).slideDown(200, function () {
$menu_main_nav_items.not('.slided').children('.menu-item-has-children').hide();
$this.removeClass('slided');
});
}
// updated code ends
})
.bind('mouseleave', function () {
var $this = jQuery(this);
$this.removeClass('selected').children('.menu-item-has-children').css('z-index', '1');
});
$menu_main_nav.bind('mouseenter', function () {
var $this = jQuery(this);
$oe_overlay.stop(true, true).fadeTo(1000, 0.3);
$oe_overlay.css('z-index', '40');
$this.addClass('hovered');
})
.bind('mouseleave', function () {
var $this = jQuery(this);
$this.removeClass('hovered');
$oe_overlay.stop(true, true).fadeTo(1000, 0);
$oe_overlay.css('z-index', '0');
$menu_main_nav_items.children('.menu-item-has-children').hide();
});
$pricetable_dropdown.bind('click', function() {
if (jQuery( this ).hasClass('clicked')) {
jQuery( this ).removeClass('clicked');
jQuery( 'section.detail-page' ).css('display', 'none');
jQuery( 'section.detail-page' ).css('display', 'block');
} else {
jQuery( this ).addClass('clicked');
// $initialDivHeight = jQuery('section.detail-page').height();
}
jQuery( this ).next().fadeToggle();
});
$menutoggle.bind('click', function() {
$mainmenu.toggle();
});
});
</script>
You're right, the z-index is messing things up... The Overlay is jumping behind some elements on the page before the transition has finished.
There is no need to change the overlays z-index on mouseover, remove this from your JS. Set the overlays 'z-index: 40' in your css and set it to 'display: none' also.
Thats all you need. When you fadeOut() an element it sets 'display: none' on it after it's finished animating, so your mouse won't be able to interact with it, and you can click on anything underneath it.
Hope this helps!
I've tried to create a jQuery effect using fancy box to contain my content and within that is a large image with thumbnails below. What I was trying to make happen was when the thumbnails are clicked then the large image updates (see RACE Twelve image as an example). This works fine but the problem is when I go to another fancy box on my website (SEE RACE ONE box) then that image has been updated to be whatever thumbnail was clicked last.
I thought this might be event bubbling but preventing default hasn't helped.
I'm very new to jQuery and know that this is something stupid that I'm doing.
Any advice would be greatly appreciated? Thank you :)
Live version of page: http://www.goodwood.co.uk/members-meeting/the-races.aspx
jsfiddle for jQuery: http://jsfiddle.net/greenhulk01/JXqzL/
(function ($) {
$(document).ready(function () {
$('.races-thumbnail').live("click", function (e) {
$('.races-main-image').hide();
$('.races-image-wrap').css('background-image', "url('http://www.goodwood.co.uk/siteelements/images/structural/loaders/ajax-loader.gif')");
var i = $('<img />').attr('src', this.href).load(function () {
$('.races-main-image').attr('src', i.attr('src'));
$('.races-image-wrap').css('background-image', 'none');
$('.races-main-image').fadeIn();
});
return false;
e.preventDefault();
});
$(".races-image-wrap img").toggle(function () { //fired the first time
$(".races-pop-info").show();
$(this).animate({
width: "259px",
height: "349px"
});
}, function () { // fired the second time
$(".races-pop-info").hide();
$('.races-main-image').animate({
width: "720px",
height: "970px"
});
});
$('#fancybox-overlay, #fancybox-close').live("click", function () {
$(".races-pop-info").show();
$(".races-main-image").animate({
width: "259px",
height: "349px"
});
});
});
})(jQuery);
$('.races-main-image') will select all elements with that class, even the ones which aren't currently visible.
You can select the closest '.races-main-image' to the clicked element as per the code below (when placed inside the click event handler)
$('.races-main-image', $(e.target).closest('.races-fancy-box'))
So your new code should look like:
$('.races-thumbnail').live("click", function (e) {
var racesmainimage = $('.races-main-image', $(e.target).closest('.races-fancy-box'));
var racesimagewrap = $('.races-image-wrap', $(e.target).closest('.races-fancy-box'));
racesmainimage.hide();
racesimagewrap.css('background-image', "url('http://www.goodwood.co.uk/siteelements/images/structural/loaders/ajax-loader.gif')");
var i = $('<img />').attr('src', this.href).load(function () {
racesmainimage.attr('src', i.attr('src'));
racesimagewrap.css('background-image', 'none');
racesmainimage.fadeIn();
});
return false;
});
I've also removed your 'e.preventDefault();' return false; includes that, and was preventing e.preventDefault() from being executed in any case.
I would like to create a slide down button to show the content of a DIV that has no height. I did an example here:
fiddle
I looked for this special form of sliding buttons but all I have found were examples where a DIV and its content has given width and height.
In my example the structure is different to that but it is quiet simple. There are three different divisions. A head with given height, the content div (depends from padding) that should be shown and below that the slider/trigger (also with given height) as a button.
Now I would like click on the trigger that slides down about the height of the content div and finally the content div should be appear.
It would be great if someone could help me out.
Thanks alot.
I think this is what you are looking at.
Fiddle
$(document).ready(function () {
$('.content').hide(); //hide initialy
$('.slide').click(function () {
var $this = $(this);
// target only the content which is a sibling
$(this).siblings('.content').slideToggle(200, function () {
$this.text($(this).is(':visible') ? 'click to close' : 'click to open');
});
});
});
You should try slideToggle() instead (it also helps when jQuery is loaded, but that was probably just an oversight when you made it):
$(document).ready(function () {
$('.slide').click(function () {
$(this).prev('.content').slideToggle(500, function () {
$this = $(this);
$slide = $('.slide');
if ($this.is(':visible')) {
$slide.text('Click to close');
} else {
$slide.text('Click to open');
}
});
});
});
fiddle