On scroll add class (changing background colour) - javascript

I wish to create this on scroll effect by changing the menu btns colour. Perhaps adding a class initiated on scroll hitting the element??
Each of the menu btns and divs are categorised by different IDs. Any ideas what javascript i would need to use?

Basic idea is simple - you have some anchors in you main html and each anchor is connected to icon (li) in menu.
When some anchor becomes visible, you 'turn off' all othe menu items, and 'turn on' connected one.
So what you have to find out - is which anchor becomes visible when user scrolls. You can use external libraries for that, i'd suggest InView library or write your one function that triggers on window scroll.
Basic construct of you code is this:
//Main listener
window.addEventListener("scroll", checkAnchors);
function checkAnchors(){
//Here you check all your anchors and find one that was invisble and became visible
if (visibleAnchor) {
triggerMenu(visibleAnchor);
}
}
function triggerMenu(visibleAnchor) {
//turn off all menu's lis and turn on the one connected to visibleAnchor
}

Related

Synchronizing top-nav mouseleave for a tab and its associated submenu

I'm trying to create a top-nav menu as follows:
The idea is that when you click a tab, the tab itself gets highlighted in black and an associated menu shows up beneath it. This works fine.
I also want the menu to disappear and the tab to be unhighlighted if the mouse leaves either the tab or the menu. This is where I'm running into trouble. At the moment, the JQuery I use to handle this is roughly as follows:
$('.item-support a').click(function(e){
// removeClass('curr') from all other tabs
$('.item-support').addClass('curr');
$('#submenu-support').fadeIn('fast');
$('.item-support').mouseleave(function(e) {
$('.item-support').removeClass('curr');
$('#submenu-products').fadeOut('fast');
});
}else{ // Click again
$('.item-support').removeClass('curr');
$('#submenu-support').fadeOut('fast');
}
return false;
});
$('#submenu-products').mouseleave(function(e) {
$('.item-support').removeClass('curr');
$('#submenu-products').fadeOut('fast');
});
// Similar code for the other tabs
The problem is that the mouseleave events for the tab and sub-menu are not synchronized. So, for example, if the mouse leaves the support tab and enters the submenu below it, the submenu vanishes. I've tried many different approaches to get around this and even have one that crudely works using pageX and pageY co-ordinates, but I'm looking for a more elegant solution. How do I get the tab and its associated submenu to work in tandem? Is there a way to bind the two divs together? Or make mouseleave recognize an exception when entering a certain div?
You can check if either element is hovered, and do something like this:
$('.item-support, #submenu-support').mouseleave(function() {
setTimeout(function() {
if (!$('.item-support').is(':hover') && !$('#submenu-support').is(':hover')) {
$('.item-support').removeClass('curr');
$('#submenu-support').hide();
}
}, 50);
});
You also shouldn't bind your mouseleave event in the callback of another event. Currently every time you click item-support, you are binding another mouseleave event to it.

Prevent HTML contents from being interacted with

I have a site menu which sits underneath an overlying and is revealed by clicking on a button on the overlying , which slides it aside.
What I want to do is, while the site menu is open, prevent the overlying (everything but the menu button, ideally) from being interacted with.
I can do this by hiding and showing a container that sits over top of all the overlying content, but I was wondering if there's a way to just set some sort of property with CSS (best option) or javascript to disable click / touch events on the overlying . Any ideas?
You could use a JQuery modal overlay to prohibit the user from using anything else but whatever is in the modal div.
http://jqueryui.com/demos/dialog/#modal
When the menu is open, add this attribute to whatever controls you would like to disable
onclick="return false;"
Then remove the attribute when the menu is closed. This will prevent the default action from occuring.
You can do this without adding an attribute by using this code:
document.getElementById("myElement").onclick = function() { return false; }
CSS is about the look, not the behavior. So you can't enable or disable elements by applying CSS to them.
Your solution with an overlay is quite capable, i would do it this way too. Note that your overlay can be transparent or semi-transparent.
It is possible to be solved by overriding the click event with Javascript, but why bother creating a complicated solution (you'll have to redefine the onclick event on every element and then somehow set it back to normal) if you've already got a short clean solution?
As mbsurfer has already suggested, a quick way of disabling everything except your menu is to use the jQuery UI's .dialog with the modal option:
$(function() {
$( "#menu" ).dialog({
modal: true
});
});
More info in the docs: http://api.jqueryui.com/dialog/

HTMLDivElement not toggling

you will find my page here.
The issue that I'm having all of a sudden, is that when you click the start button on the lower left-hand corner of the document AFTER CLICKING IT ONCE and clicking on 'Media', the menu div will not toggle.
I've tried debugging and looking at the div in Chrome, and when I set the display of it manually, and check the div (by typing "menu" into the console [the variable for it]), it shows the updated display, but the actual page is not showing the change.
So, step by step:
1. Click the start button
2. Click on "Media".
3. Watch and ponder as the menu div will not toggle afterwards, even when you click on the start button again
Any ideas? I think it has something to do with the function that I use to open a "window".
Your problem is that by using document.getElementById("screentop").innerHTML+=all; you redefine the content of screentop and also the menu.
To fix it you simply need to redefine menu after adding the window.
Your function should look like this:
function openWin(url,icon,title)
{
//...
var all="...";
document.getElementById("screentop").innerHTML+=all;
menu=document.getElementById("menu");
//...
}

Mouseover events in one object, and mouse out events on an object resulting of the first event

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");
});
});

issue with accordian Jquery script

I wrote accordion script to deploy in mobile website, every thing is working fine. However I am facing one issue when the page length is increasing.
there are about 8 to 10 bars in accordion. when i am scrolling down and clicking any of the item bar to display content, page is moving to top instead of staying at current position where i have clicked.
Please advice me the solution.
below is the script
$('.acc_container').hide();
$('.acc_container1').hide();
$('.acc_trigger').click(function(){
$(this).siblings('.acc_container1').slideUp('fast');
$(this).parent().siblings('div').children('.acc_container1').slideUp('fast');
$(this).parent().siblings('div').children('.acc_container').slideUp('fast');
$(this).next().siblings('.acc_container').slideDown('fast');
});
On each of your accordion's triggers which display content, which I assume are anchor tags, you need to prevent the default behavior of the event. Which in the case of anchor tags, is to take you too the href attribute of the tag. If the href attribute is set to #, clicking on the anchor tag will take you to the top of the page. So, something like this should work, calling preventDefault() on jQuery's event object, assuming .acc_trigger is the selector for all of your accordian triggers:
$(".acc_trigger").click(function(e) {
$(this).siblings('.acc_container1').slideUp('fast');
$(this).parent().siblings('div').children('.acc_container1').slideUp('fast');
$(this).parent().siblings('div').children('.acc_container').slideUp('fast');
$(this).next().siblings('.acc_container').slideDown('fast');
e.preventDefault();
});
I am assuming your click might a href click if so
$("a").click(function(event) {
// do all your logic here and add the below link
event.preventDefault();
});
If that is not href
Give your .acc_container class a set height of you need like 500px or so, and an
height:600px;
overflow: hidden;
That should take carek

Categories