So I have a sprite of buttons that I want to use for my website (https://www.metsales.com/MetropolitanSales/microsite/epson/images/epson_buttons.png),
and I was wondering if it is possible to set a section of each button to open up a drop down menu.
This may get a bit confusing but, for each button, when you hover over the entire button I have a hover image in the sprite, but I want to distinguish between clicking the arrows on each button and the button itself. So the arrows will bring a drop down menu and the button will take you to an overview page.
How can I go about doing this? haven't been able to find anything with nearly enough information to help me out.
Simple approach would be put a child in the link, if child is clicked... open dropdown, if not follow link
Position and size the child accordingly
<a class="buttonClass" href="foo.html"><span class="toggleDropdown"></span></a>
jQUery
$('a.buttonClass').click(function(e){
if( $(e.target).is('.toggleDropdown') ){
/* prevent href being opened*/
e.preventDefault()
/* run dropdown code here */
}
})
User wouldn't see child as it would be transparent
Yes you can all you need to do is tweak the elements inside each button, in my case i use a and div ul please review this demo
http://jsfiddle.net/BFWQa/13/
and ask any question if it's what you expected.
You should use from background-image and background-position rules of CSS. for more details check this link.
Please voteup it or/and mark it as answer if it helped you.
Related
Please bear with me since I am a newbie in this web development world.
I have a Hamburger Menu Button in my site and right now the only way to show the full page OffCanvas Section (and by doing so, will hide the Homepage Section) in Hamburger Menu Button is by the Click Function.
I want to change the Click Function with Hover Function to make it easier for the visitor. And if the visitor is not interested to click the options inside the OffCanvas Section, they able to exit the OffCanvas Section (and go back to the Homepage Section) using Click Function.
I tried to tweak this JavaScript code for a few times, but it didn't work.
Here is the code.
jQuery('.menu-button').click(function(){
jQuery('body').toggleClass('offcanvas-opened');
});
Any help would be much appreciated. Thank you.
There is the simple trick behind it
let me suppose you use the class "offcanvas-colosed" to hide
it
like this
.offcanvas-colosed{
display: none ;
}
/* now to change it with hover just do this */
.offcanvas-colosed:hover{
/* just overwrite the older function */
display: block ;
}
in simple words take the css part of offcanavas-opened class to the hover of the closed class.
and will see the change
there is no need to toggle the class
I am working on a system where a user can add notes over an image that they submit. Currently I have a note div that when clicked, will open up a text box to edit it. When hovering over this div, I use Bootstrap Tooltip to preview the information within the textbox.
I also have a list of the notes within a separate right panel. Is is possible to hover over the listed note in the right panel, and show the tooltip on the note div? In general, my question is: Is it possible to activate a tooltip from a separate div?
Here is the primary div that when hovered, shows a tooltip
<div originalh="85" originalw="122" originaly="501" originalx="490" h="23.071428571428" w="33.114285714286" y="135.98571428571" x="133" noteid="1153" note="TEST" class="noteBox helpTip" onclick="process.editNote(this)" id="note1153" data-original-title="TEST<br></div><small>Type: Color Correction</small><br/><small>Status: Awaiting Approval</small><br /><small>By: Josh Admin<br />Today 10:54 AM</small>"></div>
Is is possible for me to apply some code to a separate div that would allow me to hover over it, and trigger the tooltip on #note1153 above?
Yes, you can trigger the tooltip on any element via JavaScript. See the tooltip documentation for more information.
You would just do:
$('#whatever').tooltip('show');
Here's an example of it in action: http://jsfiddle.net/sJ88m/
Building a simple Multilevel push menu based on CSS classes, It has no javascript animations and runs on CSS transform/transitions. It works fine on every part other than toggling the is-open classes.
When a user clicks on a link, it should first remove the .is-open class. Then add it so the animation activates.
If i say change the .is-open class in the second stage to .addClass("foo"); it has no problem removing the .is-open class and adding the .foo class. So i'm wondering what the problem is with this section of the code.
You can find the code here http://jsbin.com/EjUQ/2/
On the demo you'll find that menus without a submenu load nothing. This is the correct behavior. The problem I'm having is that I would like the Menu to close before opening a new one. So removing the .is-open class then applying it again.
e.g
Link 1, 4,7 don't have submenu's so nothing with open on click/touch, clicking the menu button will prompt nothing to happen. This is the correct behaviour.
Link 2,3,5,6 have submenu's, so it opens on click/touch and the menu button will toggle the menu to open/close.
Hopefully someone can point me the direction of what i'm doing wrong. Thanks.
You should utilize the transitionend event. So that you listen for the animation to complete before adding the 'is-open' class back to the sidebar and content. Ex:
sidebar.one('transitionend', function() {
sidebar.addClass("is-open");
content.addClass("is-open");
});
Now, what I have here isn't perfect, but I believe it conveys the concept: http://jsbin.com/EjUQ/9
I am using JQuery Overlay from FlowPlayer.
I have this that opens my overlay:
<a rel="#overlay1" class="miniOpenBtn">Open</a>
$("a[rel]").overlay({mask: '#EFEFEF'});
I am bored of the standard close button and would like to add my own button, that's positioned anywhere inside my overlay:
<a id="closeOverlay" class="miniCloseBtn">x</a>
How can I get this link to close the overlay?
I looked at the documentation and they only give an example of replacing the original close button in the corner of the overlay, using class "close". I want to get rid of that original close button altogether and place additional ones inside the overlay.
I have looked at some old answers here on StackOverflow but having only started to learn JQuery last week, it's a little confusing to say the least.
Any help gratefully received.
You could just remove the div that the overlay is:
$('.miniCloseBtn').click(function(){
$('.overlay_div').remove();
});
If you can get a handle on the overlay to select against (say, it has an ID of 'overlay'), you can do this:
$('#overlay').find('.close').replaceWith('x');
In general, I think anything you create with a class of 'close' will close the overlay.
I tried this and got it working, after a long hard search in their forums. By applying (close:"a.closeOverlayBtn"), it allows me to use a different button for closing the overlay.
The JQuery
$("a[rel]").overlay({
mask: '#EFEFEF',
close: "a.closeOverlayBtn"
});
The Overlay Close Button
<a class="closeOverlayBtn" onclick="flashElement(<%=rsPhotoData.Fields("photoID")%>)">
x
</a>
Which as you can see allows me to call JS functions using my close button, the original one didn't easily allow this.
I'm using Javascript/Jquery to have a button toggle which div is displayed in the user's window. I have my initial background div #container which gets toggled with a different div if the user clicks on a certain location. A back button is toggled on once the new div is displayed. I want the back button to switch the div back to the initial #container if it is pressed. The back button's display should be toggled off again if this happens.
Since I have different divs that the back button shows up in, I need to determine which background div the user is viewing in order to toggle that specific div off and the #container back on. The container will not display again if I do not toggle the current div off.
Here's my code for an example of one instance:
JS:
$(document).ready(function()
{
$("#backButton").click(function(e)
{
if(THE CURRENT DIV IS REGION 1)
{
$("#container").toggle(); //toggle the container on
$("#region1").toggle(); //toggle region 1 off
$("#backButton").toggle(); //toggle the back button off
}
});
});
Obviously, I do not know what code to use to determine which div the user is looking at. I tried if(document.getElementById('region1');) but it didn't work; I didn't think it would, but that's the direction I'm going as to how to determine the current div.
Any help would be greatly appreciated!
if($('#region1').is(":visible")){ etc... }
If you are talking about a back button located in the DOM inside the div region1, you could use:
if($(this).parents("#region1").length > 0)
Which says "if the number of parents of this button containing ID region 1 are non-zero". For more information see parents. In general the traversing functions in jQuery will be helpful to you.
This might be what you're looking for:
http://api.jquery.com/parent-selector/
If all you're doing is switching two DIVs back and forth, you don't even have to check which DIV is currently displayed, because the .toggle() function should do that for you out-of-the-box.
Consider you have two DIVs, make sure one is hidden and one is shown, like so:
<div id="region1">foo</div>
<div id="region2" style="display:none;">bar</div>
Now, when you click on the button, you just have to call .toggle() on both of them.
$('#backButton').click(function(){
$('#region1, #region2').toggle();
});
You can even get by with using only one button to do that, and just switch the text inside the button if you'd like.
// inside the click handler
$(this).val( $(this).val() == 'Next' ? 'Back' : 'Next' );
Full code example here: jsFiddle example