Using jquery, I am interested in using onclick and onmouseover together for one volume button (found in a html5 player).
To help you visualize it, think of it as being the YouTube volume button:
Normally:
When you hover:
When you click (to mute):
In my case, both events onclick and on mouseover will work, under the condition that you don't use them together.
If you add them both like the code below, then the onclick event won't work, the other will.
My code (simplified):
//When the user clicks on the volume button
$(".volume").on("click",function() {
$(".volume").hide();
$(".volume_mute").show();
});
//When the user clicks on the volume button
$(".volume").on("mouseover", show_volume_bar);
//show_volume is a function here which shows the volume bar
//which will make the user change the volume (doesn't interest you).
The jQuery I am using:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
How can I make the both events (onclick and onmouseover) work together for the same button? As I said, when I use them together one of them won't work (which is onclick).
You can use jQuery .bind() to bind multiple events.
$( ".volume" ).bind({
click: function() {
$(".volume").hide();
$(".volume_mute").show();
},
mouseover: function() {
show_volume_bar();
}
});
Other solution than the bind is just to use the .click() and .mouseover() functions :
$(".volume").click(function() {
$(".volume").hide();
$(".volume_mute").show();
}).mouseover(function() {
show_volume_bar();
});
You can also use CSS instead
`HTML
<div class="container">
<div id="transition-hover">
<span>Transition Hover</span>
<div id="transition-hover-content">
This content or image is visible only when you mouse hover the parent div and it has transition effect.
</div>
</div>
CSS
#transition-hover-content {
opacity:0;
-webkit-transition:.5s;
-moz-transition:.5s;
-o-transition:.5s;
-ms-transition:.5s;
transition:.5s;
}
#transition-hover:hover #transition-hover-content {
opacity:1;
}
</div>
I used tutorial from this a link
Related
In current Github website, there is a toggle ability to show/hide the profile menu. on the following screen-shot, there is a transparent layer with full width and height behind the menu and if for example I click on "Explore", my first click will trigger the onclick event on the transparent layer and it only will hide the menu and transparent layer itself. Then I need to click again on "Explore" to make action.
but in current stackoverflow website, there is similar toggle ability without above limitation and when the menu is open, I can act like a normal webpage without any limitation to Select, Hover and click.
In both of websites when you click around, the menu will close, but I could not find any transparent layer in stackoverflow and I am not sure these are using the similar way.
As I know there is several ways to solve these problems:
Simulate a click by using x,y
It is not the correct answer, because in this way, it is not possible to use hover like what stackoverflow is doing now (you can hover over any objects behind the menu).
Make an element “invisible” to clicks
It is not the correct answer, because in this way, it is not possible to use onclick event to hide menu itself.
JavaScript to prevent Default action
It is not the correct answer, because in this way, it is not possible to use hover and onclick events at the same time. then it is not possible to make it like stackoverflow.
Can you please guide me how stackoverflow is passing the Github limitation?
Just don't create a transparent overlay at all.
Instead listen for the click event on document and close the menu if it's fired.
document.querySelector('button').addEventListener('click', e => {
console.log('button clicked')
})
document.addEventListener('click', e => {
console.log('click reached document, close menu')
})
<div>
<button>Click me</button>
</div>
First you need to toggle menu using classes like this:
when it is close:
<div class="menu">...</div>
when it is open:
<div class="menu open">...</div>
and in CSS:
.menu {
display: none;
}
.menu.open {
display: block;
}
then you need to add an onclick event on the document to find all open menus and remove open class of them.
<script type="text/javascript" language="JavaScript">
document.onclick = closeAllOpenMenus;
function closeAllOpenMenus() {
const all_open_menus = document.querySelectorAll(".menu.open");
[].forEach.call(all_open_menus, function(el) {
//remove 'open' class
el.classList.remove("open");
});
}
</script>
you need to work more on the above function to prevent closeAllOpenMenus when the user is clicked over the menu itself.
I'm pretty new to Jquery Mobile and I'm trying to trig a tap event.
It's working. If I click the div the class will be added. But if I click the a tag the class will be added to the a tag too.
How can I make the class be added just to the div, no matter if I click the div or a?
Here is the code:
<div id="measure-success">
<div class="measures">How long to prepare each campaign?</div>
<div class="measures">Size of Database</div>
</div>
$(function() {
$("#measure-success .measures").bind("tap", tapHandler);
function tapHandler (event) {
$(event.target).addClass("tap");
}
});
Change $(event.target) to $(this) leave the rest of the code as is.
I am very new in programming. Please give me a mercy.
According to the post mouseover/out combined with click behavior .
I would like to ask further question since I still cannot achieve the task.
Here below is my code:
Child.html
<div id="custom_div">This div will be highlighted</div>
Parent.html
<iframe id="iframeID" src="Child.html"></iframe>
Click to highlight the custom div in Child.html
<script>
$('#iframeID').contents().find('#custom_div');
$('#custom_Link').hover(function () {
$('#custom_div').toggleClass('highlight');
});
$('#Custom_Link').click(function (e) {
$('#Custom_div').addClass('highlight');
$(e.currentTarget).unbind('mouseenter mouseleave');
});
</script>
What I want to do is:
when the user hovers mouse on "custom_link", the "custom_div" is being highlighted.
when the user moves mouse out off "custom_link", the highlight at "custom_div" is eliminated.
when the user clicks at "custom_link", "custom_div" is being highlight. However, when the user moves mouse out, the 'highlightDiv' is still being added to "custom_div".
Could you please help me to dissolve this? I sought a lot of "accessing iframe element by Jquery" issue ,however, I still cannot understand. It would be very nice if you could provide Jsfiddle example as well.
If I have understand your requirement currently this should resolve this issue
<script type="text/javascript">
$(window).load(function (){
var triggered_div = $('#iframeID').contents().find('#custom_div');
$('#custom_Link').hover(function () {
triggered_div.toggleClass('highlight');
});
$('#Custom_Link').click(function (e) {
triggered_div.addClass('highlight');
$(e.currentTarget).unbind('mouseenter mouseleave');
});
});
</script>
this fiddle: http://jsfiddle.net/W4dUa/ should do what you are asking for, if I understood right, however:
First of all, classes and IDs are case sensitive - revise your code, as you have bits like this: $('#Custom_Link') with uppercase C that is different from id="custom_Link"
I believe that this is because you're unbinding mouseenter mouseleave on click:
$(e.currentTarget).unbind('mouseenter mouseleave');
from http://api.jquery.com/hover/
The .hover() method binds handlers for both mouseenter and mouseleave events.
for that reason,
$('#custom_Link').hover(function () {
$('#custom_div').toggleClass('highlight');
});
does not "work" anymore and the highlight class stays on your div
I'm trying to change the background colour of the <body> depending on what tab specific is active.
When a tab is active, a class called 'st_view_active' is added onto the tab content. In the tab content I add a hidden div with the hex code of what my body background colour should be when that tab is active, my jQuery code looks like this:
$(document).ready(function() {
$(function(){
$('body').css('backgroundColor',$('.st_view_active').find('.background').text());
});
});
And my html code when the tab is active is following:
<div class="tab-6 st_view st_view_active" >
<div style="display:none" class="background">yellow</div>
<div class="st_view_inner">
tab 6
</div>
</div>
So when tab6 is active the background of the body should be yellow. However, this is not working, the background colour is not changing, what am I doing wrong here?
DEMO and JSfiddle
Thanks
PS: The red and blue square is the next and previous tab handler..
See here: http://jsfiddle.net/CNYDU/25/
I put the default color at the end of sColor, but you could instead grab the first view and use its color. I did it this way to cut down on testing since your fiddle is painful to work with.
$(document).ready(function() {
var hsh = window.location.hash.replace('#','');
var sColor = hsh ? $("#slidetabs_45").find("."+hsh+" .background").text() : "#3b0";
$("body").css("background-color", sColor);
$("#slidetabs_45").slidetabs({
onContentVisible:function(e){
var color = $("#slidetabs_45").find(".st_view_active .background").text();
$("body").css("background-color", color);
}
});
});
I also added the .st_view_active class to the first view so that it will start correctly.
I also added a CSS3 transition to the background color, which isn't necessary.
This sounds like a great opportunity to use data elements in html. Rather than having a hidden div with the background color you want, you can simple add a data-color attribute to your tab a tag. Then when the div is clicked you can set the color easily with an event handler.
link to an updated fiddle - http://jsfiddle.net/CNYDU/15/
Note: The next and previous tabs do not work in this example, but it should be easy to get them working, just attach a listener to each that runs
$('body').css('background-color', $(".st_tab_active").attr('data-color'));
as its callback.
Check out the livequery plugin for jQuery.
Live Query also has the ability to fire a function (callback) when it matches a new element and another function (callback) for when an element is no longer matched. This provides ultimate flexibility and untold use-cases. For example the following code uses a function based Live Query to implement the jQuery hover helper method and remove it when the element is no longer matched.
Their example:
$('li')
.livequery(function(){
// use the helper function hover to bind a mouseover and mouseout event
$(this)
.hover(function() {
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
}, function() {
// unbind the mouseover and mouseout events
$(this)
.unbind('mouseover')
.unbind('mouseout');
});
You should be able to adapt this to your css changes like fired events, and therefor perform your actions based on which tab is active.
I have forked Jlange's jsfiddle, which uses the data attribute, for a demo of how this plugin would be used:
http://jsfiddle.net/nj6ZY/2/
http://jsfiddle.net/nj6ZY/2/show/#tab-10 - Also works with a link to activate a specific tab
And the relevant bits:
$('.st_tabs_ul li a.st_tab_active').livequery(function(){
$('body').css('background-color', $(this).data('color'));
});
Put ID's on your tabs. Example for id="tab6":
$(document).ready(function() {
if ($('#tab6').attr('class') == 'tab-6 st_view st_view_active') {
$('body').css('background-color', 'yellow');
}
});
However, why would you attach this function to document ready only? I would bind the function to when the element is clicked...
A client has a site built in Magento, and there's this bit of javascript controlling how the menu is displayed:
<script type="text/javascript">
jQuery('.nav-add li.level0, .nav li').hover(
function(){
jQuery(this).children('.nav-widget:not(.inSlide), ul:not(.inSlide)').addClass('inSlide').slideDown(700,function(){
});
},
function(){
jQuery(this).children('.nav-widget, ul:not(.active)').delay('2000').slideUp(500,function(){
jQuery(this).removeClass('inSlide');
});
}
)
jQuery('.nav-widget').hide();
</script>
Right now it's set to expand whenever the user hovers on an item, but it's rather annoying to try to navigate that way. Is it possible to modify this code so that it expands when a user clicks on an item?
I tried replacing .hover with .click or .mouseup to no avail.
Assuming you just want to toggle the hover behavior by click instead of hover you can try something like this.
jQuery('.nav-add li.level0, .nav li').click(function(){
if(!$(this).data('clicked')){
jQuery(this)
.data('clicked', true)
.children('.nav-widget:not(.inSlide), ul:not(.inSlide)')
.addClass('inSlide')
.slideToggle(700,function(){
});
}
else{
jQuery(this)
.data('clicked', false)
.children('.nav-widget, ul:not(.active)')
.delay('2000')
.slideUp(500,function(){
jQuery(this).removeClass('inSlide');
});
}
});
jQuery('.nav-widget').hide();
The reason it doesn't work by simply replacing the .hover() with .click() is because the hover event needs two functions, one for onhover one for offhover. The .click() event only takes one function. I assume you want the top function as your click event.
jQuery('.nav-add li.level0, .nav li').click(
function(){
jQuery(this).children('.nav-widget:not(.inSlide),
ul:not(.inSlide)').addClass('inSlide').slideDown(700,function(){
});
}