How to give a button (class) active hover-status on document ready? - javascript

On a website I have 4 clickable buttons (service buttons) on the homepage. They all respond individually to a css hover effect (background-color change) when the user hovers over one of the buttons. So far so god, this is what i want.
CSS:
.service-button:hover {
background: #F7AA06;
color: #1F213F;
}
The FIRST of the four buttons is the most important service. Therefore I want to highlight this button by having it "active" with the hover effect (background-color) when a user first enters the page. If the user hovers over one of the other buttons, the first button should "lose" it's hover-status and return to standard bg-color (white).
My temporary solution so far is to give the first button it's highlighted color with the nth:first-child selector from css. This kind a works as it sets the correct background-color to the first button. The problem is that the button does not change back to standard color if users hovers over on of the other buttons.
Is it possible to accomplish this from just css, or do I need to use jQuery?
https://imgur.com/Jutg3RS
NEW fix! I actually got it working with some jQuery. Guess it's not the cleanest solution, but it does the job! Could/should it be resolved in a better way..?
jQuery(document).ready(function($){
// Add hover class to first button
$('.service-button.totalentreprise').addClass('bg-orange');
$('.service-button').hover(
function() {
// Remove hover class from first button
$('.service-button.totalentreprise').removeClass('bg-orange');
// Add hover class to any button
$( this ).addClass('bg-orange');
}, function() {
$( this ).removeClass('bg-orange');
}
);
});

try these
window.addEventListener('load', function(){
$(".service-button").hover(function(e) {
$(this).css("background-color",e.type === "mouseenter"?"#F7AA06":"transparent")
});
})

Related

How create a transparent layer without restrict 'click', 'hover' and 'select' events?

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.

Mouse hover and click to display text with CSS and JS

Currently I have this: http://jsfiddle.net/TW2Le/95/
I want to be able to click the box to display the text, then click anywhere else to hide the text. One click = show, 2nd click anywhere else = hide. (This part works)
When it is not "clicked", it should show the text when I hover over, but it should not display the text on top of the old text when I hover it while it is clicked.
i am running into a problem, where it displays double the text when I hover over while it is clicked. I have no idea how to disable "hover" while it is under the show condition. It should not repeat the same texts.
http://jsfiddle.net/TW2Le/97/
Try this.
$('.wrap').removeClass('reveal');
$('.wrap').addClass('reveal');
I added these into your jquery so that when "show" is visible, hovering does nothing.
DEMO
JS
$(function() {
$(document).on('click', function(e) {
if ( $(e.target).closest('.wrap').length ) {
$('.show').slideToggle();
$('.noshow').slideToggle();
$(".here").addClass("hide");
}else{
$('.show').slideDown();
$('.noshow').slideUp();
$(".here").removeClass("hide");
}
});
});
Add new CSS rule
.wrap:hover .here.hide {
display:none;
}

Change css when tab has active class

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...

How to make bootstrap tooltip remain visible till the link is clicked

I have a link which I am going to use as notification when a user has some new notification I am going to notify the user by showing a tooltip(twitter bootstrap tooltip). What I want to achieve is, that tooltip should remain visible till the user clicks the link. once the user clicks the link, the tooltip should destroy.
this is what I have till now, http://jsfiddle.net/testtracker/QsYPv/
HTML
<p>Notification.</p>​
JavaScript
$('p a').tooltip({placement: 'bottom'}).tooltip('show');​
What's happening there is, tooltip stays visible till you hover it, and takes its default behaviour (show on hover) once you hover it.
I hope I have given proper info and cleared what I want to do.
Here is the solution http://jsfiddle.net/testtracker/QsYPv/8/
Added the option "trigger"
$('p a').tooltip({placement: 'bottom',trigger: 'manual'}).tooltip('show');
then, with this line
$('p a').on('click',function(){$(this).tooltip('destroy');});
destroy tooltip on click.
You can add a variable to trigger off the mouseleave event to re-show the tooltip, and then as you said in your comment, just destroy the tooltip when clicked, so it doesn't show when you mouseover again:
var clickedNotify = false;
$('p a').tooltip({placement: 'bottom'}).tooltip('show');
$('p a').mouseleave(function() { if (!clickedNotify) { $('p a').tooltip({placement: 'bottom'}).tooltip('show'); } });
$('p a').click(function() { clickedNotify = true; $(this).tooltip('destroy'); });
This way, the tooltip is always shown, even after a mouseleave, until the link is clicked. After the link is clicked, the tooltip is destroyed, and still won't generate javascript errors on the page on mouseleave.

Jquery click function only gets called once

I am trying to use JavaScript to implement a functionality. I have an icon on my html page (div tag). and I want to implement the functionality that when I click on it once it changes to another icon. But the condition it when i click on that changed icon, it should revert back to the original icon.
Now, here is the problem, the icon changes to another icon on first click but it does not revert back to original icon on second click. Actually, its jquery's click function is not getting called when i click it second time.
any ideas?
Following is the code:
$("#volume-slide-img").hide();
$("#volume-icon").click(function() {
if (document.getElementById('volume-slide-img').style.display == 'none') {
$("#volume-slide-img").show();
}
else {
$("#volume-slide-img").hide();
}
});
You can make your code a lot simpler. Try this:
$('#volume-slide-img').hide();
$('#volume-icon').click(function(){
$('#volume-slide-img').toggle();
});
I think what you want to do is toggle the class on #volume-icon when it is clicked.
I mocked it up on jsFiddle. When the icon is clicked, toggleClass will do what it says, toggle a class (if it is applied, unapply it, if not, apply it). The class can be used to set the icon.
I might be missing something though...you say "I have an icon" and you want to do something "when I click on it" but your code sample seems to change something else when the icon is clicked.
#Don Zacharias nailed it, but I found some pretty volume icons so here's a similar approach to his but with background images.
http://jsfiddle.net/pxfunc/xbUQZ/
HTML:
<div id="volume-icon" title="click to toggle!"></div>
CSS:
#volume-icon {
width:256px;
height:256px;
cursor:pointer;
background-image:url('http://icons.iconarchive.com/icons/icons-land/vista-multimedia/256/Volume-Hot-icon.png')
}
#volume-icon.mute {
background-image:url('http://lh3.ggpht.com/_uU5cLRayUdQ/S48MYDVnjlI/AAAAAAAADik/GWYRNg06mhE/Volume-Normal-Red-icon.png');
}
jQuery:
$('#volume-icon').click(function() {
$(this).toggleClass('mute');
});

Categories