I'm attempting to make a menu bar that sticks to the bottom of the screen. Due to it's position on the screen I can't use anchor tags for hyperlinking because in Google Chrome it causes that small link bar to appear in the bottom corner (which overlays ontop of the menu).
As such, each menu icon is a DIV with a unique ID (eg. "profile") and the class "menu-item" is applied to it. Each of these icons will link to a specific page when clicked on (eg. why I want to use the onClick javascript event). However, when each of these icons is hovered over it pops a contextual tooltip (or submenu) above it. Inside this tooltip a further options or links. Consequently, I have come up with the following html construct:
example image located here: http://i.stack.imgur.com/hZU2g.png
Each menu icon will have its own unique onClick link, as well as its own unique submenu/tooltip (which may have more links to different pages).
I am using the following jQuery to pop each submenu:
$(".menu-item").hover(function() {
$('#' + this.id + '-tip').fadeIn("fast").show(); //add 'show()'' for IE
},
function() { //hide tooltip when the mouse moves off of the element
$('#' + this.id + '-tip').hide();
}
);
The issue I'm having is keeping the tooltip visible when the cursor is moved off the icon and onto the submenu/tooltip (currently it disappears the second the icon is no longer hovered on). I want to jQuery fadein and fadeout effects to be applied to the appearance of the tooltip/submenu.
Comments, suggestions, code and jsfiddle examples would be greatly appreciated. Happy to clarify further if I was unclear on any aspects.
Thanks in advance.
You need to wrap the menu-item and tip links in a parent div like so:
<div class="item-wrapper" rel="profile">
<div id="profile" class="menu-item"></div>
<div id="profile-tip" class="tip">
Link1
Link2
</div>
</div>
Then apply the hover function to .item-wrapper and reference the rel attribute (or any other attribute of your choosing):
$(".item-wrapper").hover(function() {
$('#' + $(this).attr("rel") + '-tip').fadeIn("fast").show(); //add 'show()'' for IE
},
function() { //hide tooltip when the mouse moves off of the element
$('#' + $(this).attr("rel") + '-tip').hide();
});
This way when you hover over the links you will still be hovering over the .item-wrapper div.
UPDATE:
To answer your follow-up question, you will need to use setTimeout():
var item_wrapper = {
onHover: function($obj, delay) {
setTimeout(function() {
$('#' + $obj.attr("rel") + '-tip').fadeIn("fast").show(); //add 'show()'' for IE
}, delay);
},
offHover: function($obj, delay) {
setTimeout(function() {
$('#' + $obj.attr("rel") + '-tip').hide();
}, delay);
},
initHover: function($obj, delay) {
$obj.hover(function() {
item_wrapper.onHover($(this), delay);
}, function() {
item_wrapper.offHover($(this), delay);
});
}
};
item_wrapper.initHover($(".item-wrapper"), 1000);
The second argument to setTimeout() is the delay in milliseconds.
Related
Just messing around with making a new tab page for chrome just for learning purposes. What it is doing is each time the #refresh div is clicked the background changes, then when #pin is clicked it will pin the background so it doesn't change when the page is loaded.
I have an issue where my #pin div does not call the the click function if the #refresh is clicked twice.
So what is happening currently is that if I select #pin the icon changes to a filled in heart icon (as opposed to the unpinned empty heart icon). Then when refresh is clicked it will refresh the background and change the icon back to the unpinned icon. (empty heart).
This is working though when I click #refresh while the #pin has class "glyphicon glyphicon-heart-empty" already then clicking #pin again does nothing
$("#pin").click(function() {
var storedbg = document.getElementById('background').style.backgroundImage;
if($(this).hasClass("glyphicon glyphicon-heart-empty")){
$(this).removeClass("glyphicon glyphicon-heart-empty");
$(this).addClass("glyphicon glyphicon-heart");
chrome.storage.sync.set({'background' : storedbg});
}
else if ($(this).hasClass("glyphicon glyphicon-heart")){
$(this).removeClass("glyphicon glyphicon-heart");
$(this).addClass("glyphicon glyphicon-heart-empty");
chrome.storage.sync.clear();
}
});
$("#refresh").click(function() {
$('body').css({'background-image': 'url(' + background[Math.floor((Math.random() * 26) + 0)] + ')'});
chrome.storage.sync.clear();
$('#pin').removeClass("glyphicon glyphicon-heart");
$('#pin').addClass("glyphicon glyphicon-heart-empty");
});
Seems the way I wrote the removal of classes was the issue!
Managed to fix with:
$("#refresh").click(function() {
$('body').css({'background-image': 'url(' + background[Math.floor((Math.random() * 26) + 0)] + ')'}); //sets random background*/
if ($('#pin').hasClass("glyphicon glyphicon-heart")){
$('#pin').removeClass("glyphicon glyphicon-heart");
$('#pin').addClass("glyphicon glyphicon-heart-empty");
chrome.storage.sync.clear();
}
});
I want to stop the fading out of a JQueryUI menu.
Same context: FireFox 43, Linux/Debian/Sid, Jquery2.2, JqueryUI1.11.4, as for this question; the alpha-stage MELT monitor, GPL free software on Linux/Debian with recent Firefox 38 or 43 on Linux; this is commit b505eccc1... on github
(JsFiddle MVCE example at end of question)
In my file webroot/nanoedit.js I hve a global variable mom_menucmdel which hold a JqueryUI menu (a dropdown menu). The mom_removecmdmenu function is clearing that global and removing that menu from the DOM.
I want this menu to fade out and be removed in a bit more than 9 seconds, if the user don't do any interaction. But if the user is moving the mouse inside the menu, I want the fading to abort. So I coded:
var curmenu = mom_menucmdel;
curmenu.mousemove
(function(ev)
{ console.log("momdelayrepl movefinishing ev=", ev, " curmenu=", curmenu);
curmenu.finish();
});
setTimeout(function()
{
console.log("mom_cmdkeypress-delayedreplmenudestroy curmenu=",
curmenu);
curmenu.delay(100).fadeOut(800+75*dollvalseq.length,
function () {
console.log ("momdelayrepl finalfaderemove curmenu=", curmenu);
mom_removecmdmenu();
});
}, 9500);
near line 427 of that nanoedit.js; my understanding is that finish would abort animations. But it does not work. The fading remains, and the menu disappears, even after mouse movements.
If you are brave enough to compile the MELT monitor, browse http://localhost.localdomain:8086/nanoedit.html, type $ e in the textearea, then the esc key.
JsFiddle example (MVCE)
See this JsFiddle which is a simplified variant of above; run it twice. First, click on the button and wait 10 seconds at least. The menu is fading out and disappears. Then, run it again, click on the button, and move the mouse inside the menu (perhaps even selecting some item), the menu still disappears in about 10 seconds but I want it to stay, perhaps indefinitely (in my nanoedit.js code the select function would remove it, in this JsFiddle I don't care)!
var mymenu;
var mybutton;
var count = 0;
var menuTO;
function remove_menu() {
if (!mymenu) return;
console.log("removing mymenu=", mymenu);
mymenu.remove();
}
function fadeOutMenu() {
console.log("fading mymenu=", mymenu);
mymenu.delay(100).fadeOut(900, remove_menu);
}
$(document).ready(function() {
mybutton = $("#mybutton_id");
mybutton.on("click", function() {
count++;
var menuid = "menuid_" + count;
$("#mymenudiv_id").append("<ul class='menucl' id='" + menuid + "'</ul>");
mymenu = $("#" + menuid);
mymenu.append("<li>first</li><li>counting " + count + "</li><li>last</li>")
mymenu.menu({
select: function(ev, ui) {
console.log("selected ui=", ui);
$("#message_id").html("<b>selected</b> <i>" + ui.item.text() + "</i> menu#" + count);
}
});
mymenu.mousemove(function(ev) {
console.log("mousemove ev=", ev);
clearTimeout(menuTO);
menuTO = setTimeout(fadeOutMenu,
9000);
//mymenu.finish();
})
menuTO = setTimeout(fadeOutMenu,
9000);
})
})
ul.menucl {
background-color: lightpink;
color: navy;
font-size: 80%;
display: inline-block;
}
p.explaincl {
font-size: 75%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<p>
See <a href='http://stackoverflow.com/q/34818540/841108'>this SO question</a>
</p>
<h2> my menu </h2>
<p class='explaincl'>
First, try clicking the button, and do nothing more: the menu disappears in 10 sec. Then, try again, click the button, move the mouse inside the menu, it is still disappearing but I want it to stay!</p>
<button id='mybutton_id'>click me</button>
<div id='mymenudiv_id'>
Here
</div>
<p id='message_id'>
</p>
I have stored Timeout id in a variable menuTO. Then on every mousemove I reset Timeout so that the menu won't fade out if mouse is moving inside the menu.
Also keep in mind if your cursor is inside menu but is not moving, then it will obviously fade out in next 9 to 10 seconds.
The accepted answer will unnecessarily create and clear huge lot of timeouts when the mouse moves around.
You can use the built in menu event focus and blur to better handle this as shown below:
mymenu.menu({
focus: function(e, ui) {
clearTimeout($(this).data('timeout'));
}
});
mymenu.on('menublur', function(e, ui) {
var timeout = setTimeout(function() {
console.log("fading mymenu");
}, 5000);
$(this).data('timeout', timeout);
});
mymenu.trigger('menublur'); // start the timeout for the first time
menublur is an internal (documented) jquery ui event which is triggered when a menu item lose focus.
Note that we should bind the event you want to trigger manually using on() method, outside the options object.
Updated Fiddle
I don't know how much people have used this plugin, demo but what I want is to change the default behavior of the plugin to something like animated. Currently, when you click on next or previous button, the images will be just appended without any visual animation. I just want to animate the images while appending! Can anybody suggest any good solution!! Below is the code where appending on the image takes place:
if (href.match(/\.(jpeg|jpg|gif|png)$/i) !== null) {
var img = $('<img>', { src: href });
img.one('load', function () {
var wrap = $('<div class="nivo-lightbox-image" />');
wrap.append(img); //gets appended here
content.html(wrap).removeClass('nivo-lightbox-loading');
// Vertically center images
wrap.css({
'line-height': $('.nivo-lightbox-content').height() + 'px',
'height': $('.nivo-lightbox-content').height() + 'px' // For Firefox
});
}).each(function () {
if (this.complete) $(this).load();
});
}
OK with any sort of animation
Well I just added a fadeIn after appending which seems to do some sort of animation although which is what I was accepting. Here is what I did:
wrap.append(img).fadeIn('4000');
ive a problem which is driving me crazy. im trying to explain...
i have a very long scrolling page with about 10 divs, one below the other (no space between).
at the bottom of the viewing port is a button with an id and a position: fixed. when i scroll up or down the button is fixed while the divs move up or down.
i want to have different id's on the button depending on which div layer is in the viewing port. that means if one divlayer fills over 50% of the available space the href of the button should change...
i tried the inview.js, but the problem is, that 2 divs at the same time have the inview class...
my current code:
$('#div4, #div5, #div6').bind('inview', function (event, visible) {
if (visible == true) {
$(this).addClass("inview");
} else {
$(this).removeClass("inview");
}
});
var $div4 = $('#div4');
if($div4.hasClass("inview")){
$('#button1').attr('id', 'button2');
}
you see, every div which is in the viewport the button gets a new id.
has anyone of you a solution?
thanks ted
You can try to remove the inview class before adding it.. Something like this:
var $divs = $('#div4,#div5,#div6';
$divs.bind('inview', function (event, visible) {
$divs.not(this).removeClass("inview");
if (visible == true) {
$(this).addClass("inview");
}
});
Another suggestion is to use the Waypoints plugin and fire when the div crosses the 50% mark.
The only difficult part is that depending on the direction you'll need to select the current div or the one above.
Plugin: http://imakewebthings.com/jquery-waypoints/
Demo: http://jsfiddle.net/lucuma/nFfSn/1/
Code:
$('.container div').waypoint(function (direction) {
if (direction=='up')
alert('hit ' + $.waypoints('above')[$.waypoints('above').length-2].id);
else
alert('hit ' + $(this).attr('id'));
}, {
offset: $.waypoints('viewportHeight') / 2
});
Have a few divs that need to show/hide and the buttons within need to know when it's on and when it's off. Somehow they need to "communicate with another" to know when to be hidden or visible. Oh yeah, I'd like to keep the smooth fadein/fadeout effect on all elements.
Thanks!!
My fiddle is here:
http://jsfiddle.net/Pe9jn/
Here's the code I've got that mostly works, but it's a bit quirky:
//hide maximize link on page load
$('.maximize_menu').css('display','none');
//settings
var opacity = 1, toOpacity = 0, duration = 350;
//set opacity ASAP and events
$('.toggle_all, .toggle_all2').css('opacity',opacity).toggle(function() {
$('#content, .maximize_menu, #menu, .minimize_menu').fadeTo(duration,toOpacity);
}, function() {
$('#content, .maximize_menu, #menu, .minimize_menu').fadeTo(duration,opacity);
}
);
// this minimizes the menu and should make the mazimize_menu link visible when toggled off
$('.minimize_menu').css('opacity',opacity).toggle(function() {
$('#menu, .minimize_menu,.maximize_menu').fadeTo(duration,toOpacity);
}, function() {
$('.maximize_menu, #menu, .minimize_menu, .maximize_menu').fadeTo(duration,opacity);
$('.maximize_menu').show(duration,toOpacity);
$('.maximize_menu').css('display','block');
}
);
// this maximizes the menu and should disappear once the menu is visible
$('.maximize_menu').css('opacity',opacity).toggle(function() {
$('#menu, .minimize_menu,').fadeTo(duration,toOpacity);
}, function() {
$('#menu, .minimize_menu, .maximize_menu').fadeTo(duration,opacity);
}
);
I think that you should rethink all the logic, because you are not actually hiding the elements, you are just setting the opacity to 0. What you should really use is fadeOut() and fadeIn()