Semantic-ui main menu CSS hover and focus - javascript

I have am problem with the styling of my navbar with semantic-ui. I like to change the color and background-color on hover and change the focus. But everything I do it just does not change the hover. I was only able to do it with jQuery, but that should not be the solution for this problem.
This is the code I use for that part:
$(document).ready(function() {
$('.main.menu').visibility({
type: 'fixed'
});
})
;
a.nav.item:hover {
background: #1B1C1D;
color: #17AA1C;
}
<div class="ui borderless inverted stackable main menu">
<div class="ui text container">
<div href="#" class="header item">
<i class="code icon" id="myicon"></i>
Name
</div>
Me
Current Projects
Blog
Contact
</div>
</div>

The style you want to override is chained with the .inverted class.
This will work for example.
.ui.inverted.menu .dropdown.item:hover,
.ui.inverted.menu .link.item:hover,
.ui.inverted.menu a.item:hover,
.ui.link.inverted.menu .item:hover {
background: #1B1C1D;
color: #17AA1C;
}
jsbin https://output.jsbin.com/yijowusiqe

Related

CSS changing separate elements on hover while all of them are hovered

I was looking for the solution over stackoverflow, but didn't find anything.
I have a set of icons. By default they're grey and only 4 out of 7 are visible.
When I hover on div with icons I want 7 of 7 to be visible and grey.
And while hovering them, I want every separate icon, that is hovered, to be changed with the same icon of different color ( I have 2 different SVGs for every icon - grey and blue one)
.card-list .social span img {
height: 13px;
margin-top: -2px;
}
.card-list .social:hover>.hidden {
display: inline;
}
.card-list .social:hover>.visible {
display: none;
}
.card-list .social .hidden span:hover {}
<div class="align-self-center social col-8 col-md-2 px-0">
<div class="visible mx-0 px-0">
<span class="visible"><img src="images/email-normal.svg"></span>
<span class="visible"><img src="images/telegram_normal.svg"></span>
<span class="visible"><img src="images/twitter_normal.svg"></span>
<span class="visible"><img src="images/facebook-normal.svg"></span>
</div>
<div class="hidden mx-0 px-0">
<span class=""><img src="images/more_normal.svg"></span>
<span class=""><img src="images/email-normal.svg"></span>
<span class=" "><img src="images/telegram_normal.svg"></span>
<span class=""><img src="images/phone-normal.svg"></span>
<span class=""><img src="images/twitter_normal.svg"></span>
<span class=""><img src="images/facebook-normal.svg"></span>
<span class=""><img src="images/bitcoin_normal.svg"></span>
</div>
</div>
So if I write something in the last selector it screws up in html on hover, as I guess one hover overlays other and it goes wild)
Will be happy for any suggestions (JS and JQuery too), because I am a little bit puzzled)
You shouldn't use seperate DIV elements for this. Instead, you can simply use a single div element and show / hide the icons on hover. I don't have your images here, so I'll just use Google's Material Icons to show you an example:
.hidden {
display: none;
}
.icons:hover .hidden{
display: inline;
}
span:hover {
color: red;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class='icons'>
<span><i class="material-icons">accessibility</i></span><br/>
<span><i class="material-icons">face</i></span><br/>
<span class='hidden'><i class="material-icons">android</i></span><br/>
<span class='hidden'><i class="material-icons">autorenew</i></span>
</div>
The span elements with class hidden will be shown when the div is hovered. When you hover an icon, its color will be changed to red. The same idea would apply to your images. Instead of using <img/> elements, use <div/> elements and use CSS to set the image as the background of that div. That will allow you to use CSS to set the background image to another one on hover.

a robust way to toggle item display in Jquery

I want to toggle whether to display an item I should do the following:
$(item).css("display", "none")
$(item).css("display", "block")
But this method is not robust enough, given that the item might be "display: flex" or "display: table".
I think in react, I can just delete that element and re-render it when I need to, but is there any simple way to do that using jQuery besides directly modify the html to delete that element?
Thanks.
you should use toggleClass() in case you are working with flex then it would be a better approach to keep the flex properties in a separate class and add/remove or in easy words toggle the flex class if you want to hide or show that container with defaults set to display:none in a separate class, in this way either the container is flex or table it works either ways see the example below
$(".show").on('click', function() {
if ($(this).siblings('.my-item').css('display') == 'flex') {
$(this).siblings('.my-item').toggleClass('myflex');
} else {
$(this).siblings('.my-item').toggleClass('myTable');
}
})
.my-item {
display: none;
}
.myflex {
display: flex;
background-color: #f8f8f8;
}
.myTable {
display: block;
background-color: #d8d8d8;
}
.container {
margin-top: 10px;
border: 5px dashed #c8c8c8;
}
.show {
padding: 10px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<a class="show">TOGLLE THIS ITEM</a>
<div class="my-item myflex">1
</div>
</div>
<div class="container">
<a class="show">TOGLLE THIS ITEM</a>
<div class="my-item myflex">2
</div>
</div>
<div class="container">
<a class="show">TOGLLE THIS ITEM</a>
<div class="my-item myTable">TABLE DISPLAY
</div>
</div>
<div class="container">
<a class="show">TOGLLE THIS ITEM</a>
<div class="my-item myflex">3
</div>
</div>
<div class="container">
<a class="show">TOGLLE THIS ITEM</a>
<div class="my-item myflex">4
</div>
</div>
<div class="container">
<a class="show">TOGLLE THIS ITEM</a>
<div class="my-item myflex">5
</div>
</div>
You could also add a custom css class and switch them using below. This would also give a bit more control over styling.
$(item).addClass('display-none');
$(item).removeClass('display-none');
$(item).removeClass('display-none display-flex'); // For removing multiple classes
and for example the css properties would be like
.display-none{
display: none !important;
}
Why not just use jQuery's show/hide functions?
$(item).hide();
$(item).show();
hide function is roughly equivalent to calling .css( "display", "none" ), except that the value of the display property is saved in jQuery's data cache so that display can later be restored to its initial value. (from jQuery documentation)
$('#btnToggle').click(function(){
if($('#item').is(':visible'))
{
$('#item').hide();
}
else
{
$('#item').show();
}
$('#log').html("Current display state: " + $('#item').css('display'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btnToggle">toggle</button>
<div id="item" style="display: flex;">
flex div
</div>
<div id="log">
</div>
You can do a
$(item).css("display", "none")
and assign the flex or table value of the display property to any custom attribute, e.g. $(item).attr("disp_prop","flex") and on returning back to display you can do a simple.
$(item).css("display", $(item).attr("disp_prop"))

How to use css bootstrap list-group with affix to create a sticky menu in a column?

I am trying to create a sticky menu using CSS Bootstrap affix and list-group menu.
I manage to get most of it to work except for when the user scrolls down.
When the user scrolls down, the menu seems to take the entire with of the page.
I tried to set it up via data attributes
using something like this
<div class="container">
<div class="row">
<div class="col-md-3" id="leftCol">
<div data-spy="affix">
<div class="list-group list-group-root well">
<a class="list-group-item" href="#introduction">Introduction</a>
<a class="list-group-item" href="#features">Features</a>
<a class="list-group-item" href="#dependencies">Dependencies</a>
</div>
</div>
</div>
<div class="col-md-9" id="mainCol">
Some long text for the body along with some tables.
</div>
</div>
</div>
But the data attribute did not make the menu stick! it just kept it on the top.
So I tried to use JS to get the job done like this
$(function(){
$('#leftCol').affix({
offset: {
top: 100,
bottom: function () {
return (this.bottom = $('.footer').outerHeight(true))
}
}
});
});
I created jsFiddle to show you the current behavior.
How can I fix this affix so when the user scrolls down the menu maintain the same shape?
First of all, you should use either data-attributes or JS.
I updated your jsFiddle. The position of id="leftCol" was changed:
<div class="col-md-3" >
<div id="leftCol">
...
</div>
</div>
and style was added:
#leftCol {
width: 220px;
}
Also, you should add media queries to remove affix from mobile view.
As an "unacceptable" workaround, I set a max width of the menu to 250px like so
.list-group.list-group-root {
padding: 0;
max-width: 250px;
}
I am not sure how to get it to work without adding a max-with the max with should be defined by the parent. In this case class="col-md-3"
UPDATED
javascript to the rescue!
I added the following JS code to solve this problem once an for all.
It basically resize the menu everytime affix.bs.affix event is fired
$(document).on('affix.bs.affix', '#docs-menu', function() {
$(this).width($(this).width());
});
From the docs
affix.bs.affix => This event fires immediately before the element has
been affixed.
Ok I believe I got most of the code working like you want it to. The main changes I made were adding this CSS:
#leftCol {
display: block;
height: auto;
padding: 0;
width: 100%;
}
.navbar-fixed-top-again {
position: static;
top: 60px;
z-index:1031;
}
.navbar-inner {
background: red;
padding: 5px;
}
.affix {
position: fixed !important;
}
and I changed up some of the structure on your HTML:
<div class="container body-content">
<div>made up content to allow the navigation to scroll more before it becomes sticky. This height will need to be set in the data-offset-top which is in the leftCol DIV just below this content. The same will apply if you need to set it for a footer offset.</div>
<!-- new nav section -->
<div class="col-md-3 navbar-fixed-top-again" id="leftCol" data-spy="affix" data-offset-top="80">
<div class="navbar-inner">
<div class="list-group list-group-root well">
*the rest of your code*
</div>
</div>
</div>
</div>
The main problem now is having a sticky navigation menu with variable height. If you notice when you scroll your reading content underneath jumps up and gets hidden. It seems that it is possible to fix this using JavaScript (link to SO question).
Heres the link to your updated Fiddle. Hope that helps.

Why does the selected element not always pop out during my Bootstrap Tour?

This is the HTML that my Bootstrap Tour is working on:
<body class="top-navigation">
<div id="wrapper">
<div id="page-wrapper">
<div class="row border-bottom">
<nav class="navbar navbar-static-top">
<div class="navbar-header">
<a href="/">
<img class="navbar-brand" alt="image" src="logo.png" />
</a>
<form class="navbar-form-custom" action="/profiles" accept-charset="UTF-8" method="get">
<input type="text" name="q" id="top-search" class="form-control"/>
</form>
</div>
<ul class="nav navbar-top-links navbar-right">
<li>
<a class="coach-dashboard" href="/dashboard">
<i class="fa fa-dashboard"></i> My Dashboard
</a>
</li>
<li>
<a class="my-favorites" href="/profiles?filter=favorites">
<i class="fa fa-list"></i> My Favorites
</a>
</li>
<li>
<a class="settings" href="/users/registration/edit">
<i class="fa fa-sliders"></i> My Settings
</a>
</li>
</ul>
</nav>
</div>
<div class="row wrapper border-bottom gray-bg page-heading">
<h2><span class="num-players">14 Players - Tryouts One 2016</span</h2>
</div>
<div class="wrapper wrapper-content">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
<div class="contact-box profile-24">
<a href="/profiles/24">
<div class="col-lg-offset-1 col-lg-4 col-xs-4">
<div class="text-center">
<img alt="image" src="profile-24.jpg" />
Age: 30
</div>
</div>
<div class="col-lg-offset-1 col-lg-6 col-xs-8">
<h3><strong>Jimmy Choos</strong></h3>
<address>
<strong>St. George's College</strong><br>
Grade: <br>
Height: N/A<br>
Weight: N/A<br>
</address>
</div>
<div class="clearfix"></div>
</a>
</div>
</div>
This is the JS that triggers that the tour:
<script type="text/javascript">
$(document).on('turbolinks:load', function() {
var tour = new Tour({
storage: false,
backdrop: true,
steps: [
{
element: "div.navbar-header input#top-search",
title: "Search",
content: "Here you can search for players by their name, school, positions & bib color (that they wore in our tournament)"
},
{
element: "div.page-heading h2 span.num-players",
title: "Number of Players",
content: "This is the number of players are in our database for this Tournament"
},
{
element: '#page-wrapper div.contact-box.profile-<%= #profiles.first.id %>',
title: "Player Info",
content: "Here we have a quick snapshot of the player stats"
}
]});
// Initialize the tour
tour.init();
// Start the tour
tour.start();
});
</script>
Here is how the tour looks with the backdrop:
This is rendered correctly:
These two are not rendered correctly with the highlighted element not visible:
How do I get all of the elements to render like the top one, where the highlighted element is visible?
Edit 1
Here is a JSFiddle that shows the behavior:
https://jsfiddle.net/nrkry27p/
Specifically, pay attention to the 2nd step where it doesn't get highlighted like the search in the demo gets highlighted. Except in my real code, search doesn't get highlighted...but you should be able to get an understanding of what's happening.
Final Edit
After many rounds of edits, constant backing and forthing, we finally figured it out. So, I have decided to clean up all of the edits that don't really add value to understanding the problem and the solution.
Currently the .tour-step-background element has a background-color:inherit property, which is inheriting transparent from the body. The reason the search element is displaying, is that it defaults to having a background colour of white from the browser.
Try adding a background colour to the .tour-step-background element, or alternatively, set a background-color for your body element. This should "highlight" the step that it's on.
JSFIDDLE
.tour-step-background{
background-color:#FFF;
}
EDIT
This is still a z-index and background-color issue that you're encountering. Based upon our discussion, it turned out that the supplied JS fiddle did not include the offending CSS from bootstrap regarding the z-index of navbar-fixed-top. Once this was identified, we needed to add some JS and some CSS to fix the problem. The JS applies a class to the body called is-touring when you start touring and removes the class when you end.
Using this class we override the z-index value of navbar-static-top so that we can display its internal elements above the tour display. The onStart and onEnd functions are available in the API reference for bootstrap tour.
CSS
/* ALSO REMOVE THE Z-INDEX VALUE ON THE RULE (line 247) */
.navbar-form-custom .form-contro{}
/* ADD THIS STYLE */
.is-touring .navbar-static-top{
z-index:auto;
}
/* BEGIN OPTIONAL CSS */
.tour-step-background {
background-color:#fff;
z-index: 2101;
}
.tour-step-backdrop{ /* this exists already, so update */
z-index: 2102;
}
.tour-backdrop {
z-index: 2100;
opacity: .7;
}
.popover[class*=tour-] {
z-index: 2101;
}
/* END OPTIONAL CSS */
JS
var tour = new Tour({
storage: false,
backdrop: true,
onStart: function(){
$('body').addClass('is-touring');
},
onEnd: function(){
$('body').removeClass('is-touring');
},
steps: [
{
element: "div.navbar-header img.navbar-brand",
title: "Go Home",
content: "Go home to the main page."
},
{
element: "div.navbar-header input#top-search",
title: "Search",
content: "Here you can search for players by their name, school, positions & bib color (that they wore in our tournament)"
},
{
element: "span.num-players",
title: "Number of Players",
content: "This is the number of players that are in our database for this Tournament"
},
{
element: '#page-wrapper div.contact-box.profile-24',
title: "Player Info",
content: "Here we have a quick snapshot of the player stats"
}
]});
UPDATED FIDDLE
I've played with your code and found a solution. The thing is it adds a class to your span and hence that does not have a white background you won't get the highlight behaviour. So if you add this in your css:
.num-players.tour-step-backdrop {
background-color: white;
}
It will work. And for your last one as well:
.contact-box.profile-24.tour-step-backdrop {
background-color: white;
}
Or you could use a general rule like this:
.tour-step-backdrop {
background-color: white;
}
UPDATE:
Based on your screen shot and changing the styles, I realised that you have a lower z-index on the class than the backdrop itself, so changing background alone doesn't help:
.tour-step-backdrop {
background-color: white;
z-index: 3100;
}
UPDATE 2:
That class is generic and shouldn't be used alone. I've tried a couple of variations and this seems to be working:
.tour-step-backdrop.tour-tour-element {
z-index: 4000;
background-color: white;
}
You must give initial background value to the elements you want to style to because there was no default background style even inherit on both span and h2 elements. It's easy to solve this problem as long as giving both span.num-players and its parent h2 a style is background: inherit. Just append that as following.
h2 {
/* Other style */
background: inherit;
}
.tour-step-backdrop {
/* Other style */
background: inherit;
}
EDIT
JSFiddle
I commented z-index of .tour-backdrop because it overlaid .tour-step-backdrop element.
.tour-backdrop {
/* z-index: 2100; Disable this style. */
opacity: .7;
}

Share buttons on hover

I've been trying to make the share buttons to appear when hovering on an article "Mashable style" but I can't seem to get it right. Any help will be appreciated.
<div class="c-container">
<article class="c-news">
<header>
<a href="#">
<img src="http://a_really_long_url.jpg"
alt="post-image" class="post-image">
</a>
</header>
look at jsFiddle
You need to use the :hover CSS selector:
First hide the elements:
.st_facebook_hcount, .st_twitter_hcount {
position:relative;
display:none; /* Hide It*/
width:6rem;
top: -1.2rem;
left:18rem;
}
Then set the :hover to show:
.c-news:hover .st_facebook_hcount, .c-news:hover .st_twitter_hcount {
display:inline-block;
}
The demo http://jsfiddle.net/nJRtm/6/

Categories

Resources