Trigger method not firing

JavaScript
1

I want to trigger the mouseover event of a a list item which is a child element of an the object I am working with but the event refuses to be triggered. I used the hover pseudo selector in CSS and now trying to get approach it in Javascript; could that be the reason for the defiance? My code below:

(function() {
			$(document).scroll(function() {
				var pullOnce = false;

				if (!pullOnce) {
					if ($("html body")[0].scrollTop > 290) {
						$(".how").css("margin-top", "initial");
						pullOnce = true;
					}
				}

				// Using true here since the above condition would have set it to true (680 > 290 ;) )
				if (pullOnce) {
					if ($("html body")[0].scrollTop > 680) {
						$(".header").addClass("fix");
						$("h1.header").css("width", "70%").siblings("#amount").css({"right": "0", "width": "10%"}).siblings("nav").css("right", "10%").find("li").trigger("mouseover");
					}
					else {
						$(".header").removeClass("fix").find("li").trigger("mouseout");
					}
				}
			});
		})();

Markup can be found at

2

You don’t want that type of code running on the scroll event.

If you want to trigger things when a certain part of the page is reached look at the waypoints plugin, that will only fire things once.

Don’t do this either:

$(".header").addClass("fix");
$("h1.header")
    .css("width", "70%")
    .siblings("#amount")
    .css({"right": "0", "width": "10%"})
    .siblings("nav")
    .css("right", "10%")
    .find("li")
    .trigger("mouseover");

All of those styles can go in the css under .header.fixed { ... }
If the elements you want to move are not children of the fixed element consider adding ‘header-fixed’ to the body instead. Then you can style everything in the page with a single class.

1 Like
3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.