I have an image+text slider with recent blogposts which loop through the recent posts whilst a vistor keeps looking at a certain page.
You can see all the code on http://jsfiddle.net/GsgPM/16/
It is about the big image + text slider where it doesn't fire.
THe event does fire on the pink button.
Does not compute for me really... why does it work for the one, and not for the other?
Now I want to redirect people to the right blogpost with an onclick event on the containing div(slider) with the black borders.
The only puzzling thing is, the click event doesn't fire, nor does the cursor get changed to the right image(a hand) as defined in the css stylesheed, but the 1px border does get added.
On a test div, in my code on http://jsfiddle.net/GsgPM/16/ below my trouble code it does fire.
On another page of my blog I have no issues at a ll with the click event.
when I view the code changes in google chrome inspect elements window the click event does get transported on the div changes.
JSLint shows no errors, my console doesn't show any errors either. The entire event simply doesn't fire.
Who knows what the underlying cause is for this problem?
The problem is the shadow div. When you click on your slider, the click is registered on the div with id="shadow". Try to remove that div, and then it works. If you need that div, you have to make sure it is below the slider divs.
In your code you have
onclick="window.alert('Hello Raxacoricofallapatorius'
your missing a ); so it would be
onclick="window.alert('Hello Raxacoricofallapatorius');
A more Jquery way to react to click on img is to use on
$('#smallphotos div').on('click','img',function() {
alert('here');
});
to further this you could store the target on a data attribute like
<img src="http://www.freedigitalphotos.net/images/gal_images/av-_50.jpg" title="test2" data-target="www.google.com" />
which could then redirect your page like so.
$('#smallphotobox').on('click','#smallphotos div',function() {
window.location.href=$(this).data('target');
});
Also #slider is in the way you will notice i removed it and everything works.. try setting its z index to be behind the rest.
NOTE this wont work on jsfiddle due to restrictions.
fiddle
Related
Hi please feel free to suggest a better title I couldn't think of a way to word it.
Issue
I have a Google Maps with pointer events set to none; this stops the map being scrolled into when you scroll over it and it works great.
I have a div that is wrapped around this element and when you click into it, it allows all pointer events on the map inside it therefore allowing you too scroll on the map.
Once you then leave the map with your mouse it re-enables pointer events none so that you can scroll over it.
The main issue is that when you click the map you then have to click it again to scroll.
I want to know if it possible to click on the overlay then to get it to un-click and click again for the user to save them being confused about having to click again. The reason this may be difficult is because when the user has clicked down it needs to un-click and click whilst they are still pressed down.
Code
The issue I am having is that I have a Google Maps inside a div like so in the HTML:
<div id="gmap-holder" class="dealer-details__map gmap-scroll-block--on">
<div id="map" class="dealer-details-gmap"></div>
</div>
JS working as explained in the header
$('.dealer-details__map').on('click', function(){
$(this).removeClass('gmap-scroll-block--on');
$(this).addClass('gmap-scroll-block--off');
});
$('.dealer-details__map').on('mouseleave', function(){
$(this).addClass('gmap-scroll-block--on');
$(this).removeClass('gmap-scroll-block--off');
});
Pseudo of what I am trying to achieve
$('.dealer-details__map').on('click', function(){
$(this).removeClass('gmap-scroll-block--on');
$(this).addClass('gmap-scroll-block--off');
//pseudo start
//$(this).unclick()
//$(this).child().click();
//pseudo end
});
You might want to use Custom Controls, so that you can create your own controls to handle interaction with the user. This involves Drawing Custom Control, Handling Events from Custom Controls and Positioning Custom Controls, it will also be easier to track as your function is in a button. You can take a look on the sample code, for reference on how the implementation would be. Hope this helps!
$('.dealer-details__map').on('click', function(event){
event.stopPropagation();
$(this).child().click();
});
Background:
I'm helping an old friend who has a mixed media slideshow, and one of the slides is an iframe embed of a lytro camera image (it's interactive and you can click or tap on mobile to change the focus).
Issue:
The issue that I'm having is that when you interact with the iframe, it steals keyboard focus on desktops and that prevents the arrow keys from allowing you to change slides.
What I've tried:
My main attack angle on this had been trying to use jquery to set a timer that periodically sets focus on the parent document, to remove focus from the iframe and allow the keystrokes to be captured properly. I've noticed that if I click anywhere outside of the iframe then I can use the arrow keys properly.
Here's my jquery code, along with comments about why I tried each method. Unfortunatly nothing has worked (I've also tried including the lytro image with an embed tag instead of the iframe tag with no change in results).
<script>
//make sure body maintains focus, so that swipe and arrows still work
function focusit(){
$('#focushere').focus(); // this is a div on the main page that I tried to set focus to
$('body').focus(); // tried moving focus to the body
$('embed').blur(); // tried bluring the embed
$('iframe').blur(); // tried bluring the iframe
$('body').click(); // tried faking a click on the body
$('#focushere').click(); //tried faking a click on a element
$(document).click(); // tried click on document
$(document).focus(); //tried setting focus to document
}
setTimeout(focusit, 100);
</script>
Your issue seems to be two-fold.
You are using setTimeout which will only run your callback once. I think you mean to use setInterval, which will repeatedly run the callback.
You can't set focus to document using the focus method natively or in jQuery. In order to restore focus to the body, you should call the blur method on the currently active element using document.activeElement.
Example:
function focusit(){
if(document.activeElement)
{
document.activeElement.blur();
}
}
setInterval(focusit, 100);
CodePen Demo
Basically my client wants hidden navigation to appear when mouseover an image. I've solved the problem of the navigation not hiding when you mouseover the navigation and then hiding when you leave the navigation. There are two problems I'm running into and I've tried a variety of different combinations that I thought would work, but of course didn't. The two problems are:
When you mouseout the image without mouseover the navigation then the navigation needs to hide, as of right now it stays open until you either mouseover the image again or mouseleave the navigation.
Second problem is when you mouseleave the navigation directly to mouseover the image it loops the function and hides the nav then opens the nav again, I've tried changing slideToggle to show, but that causes a whole bunch of other issues.
Right now the code is behaving as close to how I want it and could be considered acceptable, but I'd love to know how to solve the problems above. I thought about using the hoverIntent plugin to sense the mouse movements and only trigger the functions once the mouse has slowed, but couldn't get it working properly. Clearly, I am a novice when it comes to javascript and jquery so please forgive me, but I'd really appreciate any help.
Here is my code
$(document).ready(function(){
$(".nav-body").hide();
$(".nav-head").mouseover(function(){
$(this).next(".nav-body").slideToggle(600);
$(".nav-body").mouseleave(function(){
$(this).hide(700);
});
});
});
Here is my html:
<p class="nav-head"><img src="/images/face-btn.jpg" /></p>
<div class="nav-body">
<ul><?php wp_list_pages('title_li=&child_of=12&depth=1'); ?></ul>
</div>
Markup change
<div class="nav-container">
<p class="nav-head"></p>
<div class="nav-body"></div>
</div>
Javascript
var eventHandler;
eventHandler = function(){$(".nav-head").one("mouseover",function(){
$(this).next(".nav-body").slideToggle(600);
$(".nav-container").one("mouseleave", function(){
$(this).find(".nav-body").hide(700, eventHandler);
});
});};
eventHandler();
The first change is from mouseleave to mouseout. Inside the navigation, there are likely to be descendent elements that cover the actual nav-body. With mouse leave, the handler only triggers when the mouse leaves the bound element. If it goes over descend it elements, it is considered leaving. Mouseout only triggers if it is outside the bounds of the bound object.
The second thing I did was assign a delegate to the handler binding operation so that I could use it as a callback function for hide(). This way, the event handler won't be restored to the nav-head until the hide is completely done.
The last was to assign the mouseout handler to the containing div. This way, the so long as it leaves the nav-head (or the nav-body) since its contained, the body will hide.
The title is a little bit messy, so let me try to explain in the actual question:
Suppose I have the following HTML setup.
<div id="userMenu">
<div id="userMenu-expanderLink">Mouseover here!</div>
<div id="userMenu-collapserLink">You can close the menu by mouse out.</div>
<div id="userMenu-expandedContent">Extra Content</div>
</div>
Now, userMenu and userMenu-expanderLink are shown by default. userMenu-expandedContent and userMenu-collapserLink are hidden by default.
What I am trying to do in jQuery is to slideDown the userMenu-expandedContentwhen a mouseover event occurs on userMenu-expander. All good there, this is my code:
$("#userMenu-expanderLink").mouseover(function() {
$("#userMenu-expandedContent").stop().slideDown(200);
$("#userMenu-expanderLink").hide();
$("#userMenu-collapserLink").show();
$("#userMenu").addClass("userMenu-expanded");
});
As you can see, I'm also hiding the expanderLink and showing the collapserLink; and also adding a class called userMenu-expanded to #userMenu. Until now, this code has no problems. Everything works well.
But now, I want that when the user has a mouseOut event on #userMenu.userMenu-expanded, effectively moving his mouse out of the #userMenu that is expanded, I want when that happens, the expandedContent is slideUp'd, the expander and collapser links swapped, and the class removed. I know how to do that, but handling the event seems to be a problem.
Putting $("#userMenu.userMenu-expanded")... directly alongside the code I have of course does not work, since a div with such id and such class is only generated if the menu has been expanded, and the div's class is removed once the menu is collapsed. I don't directly use a mouseover/mouseout event on one object because I want the collapsing to be triggered only when the user takes his mouse out of the menu, not the expander link.
So, here's my problem. How can I get such mouse out event? I have tried adding the event handler in the callback of .addClass, but no avail, it would basically permanently close that expanded menu (basically I can't ever expand it again until I reload the page).
How can this be done? I'm not very experienced with jQuery, so a detailed answer would be most appreciated. I'm more interested on how can this be done rather than just accomplishing it, I want to learn ^_^.
Thanks!
I have found a correct way to do this. This is my final implementation.
$(document).ready(function() {
// UserMenu Expander, which is also a form of drop down
$("#userMenu-expander").mouseenter(function() {
//alert("Usermenu expanding…");
$("#userMenu-expandedContent").slideDown(200, function() {
$("#userMenu").addClass("userMenu-expanded");
});
$("#userMenu-expanderLink").hide();
$("#userMenu-collapserLink").show();
});
$("#userMenu.userMenu-expanded").live('mouseleave', function() {
//alert("Usermenu de-expanding…");
$("#userMenu-expandedContent").slideUp(200);
$("#userMenu-expanderLink").show();
$("#userMenu-collapserLink").hide();
$("#userMenu").removeClass("userMenu-expanded");
});
});
I have a .hover() action assigned to an element to hide/show something depending on the cursor being over it. The problem I am running into is that when the page loads and the cursor is OVER the element it doesn't register as being over because its not firing the mouseenter event.
Is there a another way to tell if the cursor is over a desired element?
Using the mouse position on page load you could call
var currentElement = document.elementFromPoint(x, y);
then if the element found at that position is the one with the hover event. You can trigger that hover event manually
$(currentElement).trigger('hover');
If you hide the element(s) until the page is done loading and then show them all at once, will your mouseover event now fire?
<div id='allmyelementsinhere' style='display:none'>
then use javascript to remove the display:none on page load.
I'm thinking that your mouseevent will fire as soon as you display the elements.
I also had this issue with next and previous navigation buttons that navigate between consistently designed pages.
A user would click next to go to the next page, and because their mouse was in the same position on the page load of the second page, they were able to click next again to continue navigating through the collection of pages. Essentially a convenient next/previous UI.
Except of course that the hover state didn't display on page load for the second and subsequent pages.
So I added a url parameter (action='next or action=prev) and then on load I put the next or previous button into the hover state if the relevant url parameter is present. If the user has somehow moved their mouse and isn't over the button then you do get a button incorrectly in it's hover state until the first mousemove event.
It's not perfect and it only suits this specific circumstance where a user is using a consistent UI within pages on your site, but as this sort of UI is a fairly common - especially in blogs/galleries I though I'd mention it.
Here is the jquery method to track mouse position starting from page load.
(function($) {
$.mousePos = {x: 0, y: 0};
var recordPos = function(e) {
$.mousePos.x = e.pageX;
$.mousePos.y = e.pageY;
};
$(document).mousemove(recordPos).mouseover(recordPos);
})(jQuery);
This will populate $.mousePos.x and $.mousePos.y as soon as the mouse starts to interact with the page.
Script to get mouse coordinates on load