I am wondering if there is a style that keeps the text within a div locked into a straight line no matter what the width of the container is? (No stacked text)
See I have a slide-in menu that is working nicely, the buttons look great, but there's just one thing that's visually offputting and it's that the text is stacked up as it slides out and then flattens out as the width of the container is increased to full screen.
Here's the HTML of a menu item:
<div class="navigation-menu-slide-in-10">
Account
</div>
And here's the CSS of the menu item:
.navigation-menu-slide-in-10 {
width: 100%;
height: 6vh;
background-color: transparent;
display: flex;
justify-content: left;
align-items: center;
font-family: bahnschrift;
font-size: 28px;
font-weight: bold;
}
.navigation-menu-slide-in-10 a {
padding-left: 24px;
text-decoration: none;
color: #ffffff;
}
As for how the menu unfolds, here's the Javascript. The button is clicked and then goes out of visual existence. Then the other button is made visible within my slide-out-menu. Then the slide-out-menu is made visible. And then is increased to 100% width with a transition delay which acts as an animation.
function mobileNavigationButtonOn() {
document.getElementById("mobileNavigationButtonOff").style.display = "none";
document.getElementById("mobileNavigationButtonOn").style.display = "flex";
document.getElementById("mobileNavigationMenuSlideIn").style.visibility = "visible";
document.getElementById("mobileNavigationMenuSlideIn").style.width = "100%";
}
Oh, and I guess the CSS for the slide-in-menu might be pertinent too. Here is that:
.navigation-menu-slide-in {
width: 0%;
height: 100%;
background-image: linear-gradient(to right, #ff3300, #ff7700);
position: fixed;
visibility: hidden;
transition-duration: 0.6s;
transition-property: width;
overflow-x: hidden;
z-index: 3;
}
Yeah, so I'm looking for a way to keep the text fixed into a straight line. Thanks.
I found the style that works if anyone is having this same issue...
white-space: nowrap;
The main issue is caused by a button being circular. But I really want a circular button, which is leading to hovering problems!
All I want is to have a circular <a> button that when hovered-over will reveal another element below it, like a div or another a tag. These two elements are separated by a gap.
Then I should be able to move my mouse down and hover over the revealed element and click on it or whatever. But of course if you unhover the original <a> then the other element will disappear, especially since there is a gap between the two elements. What is the best way to make it so that I can move my mouse from element 1 to element 2 without element 2 vanishing during mouse travel?
Ideally this shouldn't require JS.
I've created a basic setup for this so far to get started:
body {
padding: 30px;
height: 100vh;
}
#myBtn {
background-color: grey;
padding: 20px;
border-radius: 50%;
}
#hoverInfo {
display: none;
margin-top: 40px;
background-color: green;
width: 100px;
height: 50px;
}
#myBtn:hover + #hoverInfo, #hoverInfo:hover {
display: block;
}
<a id="myBtn" href="/">
button
</a>
<a id="hoverInfo" href="/">hover info</a>
Here's an explanation of an old solution attempt of mine:
My first solution to stop element 2 from vanishing upon downward movement of the mouse was to put an invisible hoverable element between elem 1 and 2 which would keep elem 2 active while the mouse moves down to it. And this would work great, IF all elements were rectangular. But my elem 1 is circular!
This means that there is literally one single pixel of contact between the middle hover buffer element and elem 1 because there are those circular "corner" gaps between elem 1 and the invisible middle element. So whenever you move your mouse down, you are still going to miss that middle hover element 99% of the time.
And you can't put it behind elem 1 either to fill in those circular "corners" because the circular element has a bounding box that you can only see in inspect element and this bbox prevents you from filling up those "corners" with an area that actually interacts with the mouse, therefore making this solution useless. It's quite confusing in my explanation but try it out if you manage to implement this "solution".
The first solution to come to mind is wrapping the circular button into a parent div, which will be the div that will activate the hover effect. This way, you can add padding-bottom to imitate the gap look while still making the "gap area" trigger the hover effect. In the snippet below, I made the wrapper div have a red background so you can see how it works. If you remove the red background, it should function as intended.
https://codepen.io/xenvi/pen/yLONOEa
body {
padding: 30px;
height: 100vh;
}
.buttonWrapper {
display: inline-block;
margin-bottom: 40px;
background: red;
}
#myBtn {
background-color: grey;
padding: 20px;
border-radius: 50%;
}
#hoverInfo {
display: none;
background-color: green;
width: 100px;
height: 50px;
}
.buttonWrapper:hover+#hoverInfo,
#hoverInfo:hover {
display: block;
}
.buttonWrapper:hover {
margin: 0;
padding-bottom: 40px;
}
<div class="buttonWrapper">
<a id="myBtn" href="/">
button
</a>
</div>
<a id="hoverInfo" href="/">hover info</a>
You can solve this easily using a pseudo element that will make the hoverable area bigger and that you activate only on hover:
body {
padding: 30px;
height: 100vh;
}
#myBtn {
background-color: grey;
padding: 20px;
border-radius: 50%;
position:relative;
}
#myBtn:before {
content:"";
display:none;
position:absolute;
top:90%;
left:0;
right:0;
height:28px;
}
#hoverInfo {
display: none;
margin-top: 40px;
background-color: green;
width: 100px;
height: 50px;
}
#myBtn:hover::before {
display:block;
background:rgba(0,0,255,0.2); /* to illustrate */
}
#myBtn:hover + #hoverInfo, #hoverInfo:hover {
display: block;
}
<a id="myBtn" href="/">
button
</a>
<a id="hoverInfo" href="/">hover info</a>
I'm in process of setting up a drop down menu. I'm trying to get the div .nav_main to have the background-color I've given it in my CSS so that it matches the background-color of my burger menu. The .nav_main background-color doesn't show up for me for some reason. I know it's trivial but I can't figure out why this is happening...
.nav_main {
display: block;
width: 100%;
background-color: #282828;
}
.nav_main a {
display: none;
width: 100%;
background-color: #282828;
text-decoration: none;
height: 100%;
padding-top: 32px;
padding-bottom: 32px;
margin: 0;
text-align: center;
font-size: 50px;
color: #fff;
}
.nav_main a:last-child {
display: inline-block;
width: auto;
}
<header>
<h1>Facilities Portal</h1>
<div class="nav_main">
<a class="activeNav" href="index.html">Facilities Info</a>
Log Action
View Actions
Key System
<a id="burgerIcon" class="icon" onclick="#">☰</a>
</div>
</header>
I'm wondering if the .nav_main a display: none is causing the issue. If so how do I get around this so the div .nav_main background-color appears and fills the entire width of the page?
Basically I want .nav_main div background-color to appear and fill out the entire width of the page with the burger icon floating to the right. Essentially I'll set the burger up to make .nav_main a display change to block.
I have tested your code and it works just fine on my end.
What I noticed;
That you are setting the same color for the div as well as the links. This might be the reason you are not seeing a difference.
You are hiding the links with display:none and hence might also not be able to tell which color they are.
You might want to run the code on another machine to make sure the issue is not with your machine.
A user hovers over glyphicon-globe image and behind it lies a like button and a comment form. When a user goes to click on the button or the comment form nothing happens. How can I make clickable what lies behind the globe?
view
<div class="image-container">
<span class="glyphicon glyphicon-globe" style="font-size: 7em; color: white; text-align: center; width: 100%; background-color: #446CB3; border-radius: 4px; padding: 19%;" id="image-foreground"></span>
<div class="text-wrapper">
<div class="like-button">
<%= link_to like_challenge_path(:id => #challenge.id), class: "btn", method: :post do %>
<span class='glyphicon glyphicon-thumbs-up'></span> Like
<% end %>
</div>
<div class="text-background">
<%= render "comments/form" %>
</div>
</div>
</div>
css
.image-container {
position: relative;
height: auto;
#image-foreground {
position: absolute;
z-index: 2;
opacity: 1;
&:hover {
opacity: 0;
}
}
}
.text-wrapper {
opacity: 1;
}
no hover
hover
There's two ways I'd try. So you know, giving an element opacity: 0; won't make it disappear completely. It is still there in position but not able to be seen. To have an element removed also use both opacity: 0; and visibility: hidden in your &:hover action.
The second way you could do it is stick with opacity: 0 but also set z-index: 0 (or any number below the z-index of the underlying layers. You have the hover working nicely but because it has a higher z-index than the underlying layers, it is still technically sitting on top of them and covering them, making them unclickable.
Hope that helps
Also a side note to the answer below, one of the answers here suggested using display: none in your hover action. display: none doesn't work for this as once an element is set to display: none, it is no longer there, not part of the DOM and so breaks the hover action.
you could do on hover display the blue screen as none.
.image-container:hover {
display: none;
}
it that what you wanted ?
Here was the trick that worked:
.hide-globe {
position: absolute;
width: 100%;
background-color: #ccac00;
padding: 100px;
}
.text-wrapper {
position: absolute; // This was essential
opacity: 0;
z-index: 1;
width: 100%;
&:hover {
opacity: 1;
background-color: white; // And this helped make the image seemingly go away
}
}
I currently set the title attribute of some HTML if I want to provide more information:
<p>An <span class="more_info" title="also called an underscore">underline</span> character is used here</p>
Then in CSS:
.more_info {
border-bottom: 1px dotted;
}
Works very nice, visual indicator to move the mouse over and then a little popup with more information. But on mobile browsers, I don't get that tooltip. title attributes don't seem to have an effect. What's the proper way to give more information on a piece of text in a mobile browser? Same as above but use Javascript to listen for a click and then display a tooltip-looking dialog? Is there any native mechanism?
You can fake the title tooltip behavior with Javascript. When you click/tab on an element with a title attribute, a child element with the title text will be appended. Click again and it gets removed.
Javascript (done with jQuery):
$("span[title]").click(function () {
var $title = $(this).find(".title");
if (!$title.length) {
$(this).append('<span class="title">' + $(this).attr("title") + '</span>');
} else {
$title.remove();
}
});
CSS:
.more_info {
border-bottom: 1px dotted;
position: relative;
}
.more_info .title {
position: absolute;
top: 20px;
background: silver;
padding: 4px;
left: 0;
white-space: nowrap;
}
Demo: http://jsfiddle.net/xaAN3/
Here is a CSS only solution. (Similar to #Jamie Pate 's answer, but without the JavaScript.)
We can use the pseudo class :hover, but I'm not sure all mobile browsers apply these styles when the element is tapped. I'm using pseudo class :focus because I'm guessing it's safer. However, when using pseudo class :focus we need to add tabindex="0" to elements that don't have a focus state intrinsically.
I'm using 2 #media queries to ensure all mobile devices are targeted. The (pointer: coarse) query will target any device that the primary input method is something "coarse", like a finger. And the (hover: none) query will target any device that the primary pointing system can't hover.
This snippet is all that's needed:
#media (pointer: coarse), (hover: none) {
[title] {
position: relative;
display: inline-flex;
justify-content: center;
}
[title]:focus::after {
content: attr(title);
position: absolute;
top: 90%;
color: #000;
background-color: #fff;
border: 1px solid;
width: fit-content;
padding: 3px;
}
}
/*Semantic Styling*/
body {
display: grid;
place-items: center;
text-align: center;
height: 100vh;
}
a {
height: 40px;
width: 200px;
background: #fa4766;
color: #fff;
text-decoration: none;
padding: 10px;
box-sizing: border-box;
border-radius: 10px;
}
/*Functional Styling*/
#media (pointer: coarse), (hover: none) {
[title] {
position: relative;
display: flex;
justify-content: center;
}
[title]:focus::after {
content: attr(title);
position: absolute;
top: 90%;
color: #000;
background-color: #fff;
border: 1px solid;
width: fit-content;
padding: 3px;
}
}
<a title="this is the Title text" tabindex="0">Tag with Title</a>
Obviously, you'll need to open this on a mobile device to test it.
Here is a Pen with the same code.
Given that a lot of people nowadays (2015) use mobile browsers, and title still hasn't found a form of exposure in mobile browsers, maybe it's time to deprecate reliance upon title for meaningful information.
It should never be used for critical information, but it is now becoming dubious for useful information, because if that information is useful and cannot be shown to half the users, then another way of showing it to almost all users needs to be found.
For static pages, perhaps some visible text near to the relevant control, even as fine print. For server-generated pages, browser sniffing could provide that only for mobile browsers. On the client side, javascript could be used to trap the focus event, via bubbling, to show the extra text next to the currently focussed element. That would minimise the screen space taken up, but would not necessarily be of much use, since, in a lot of instances, bringing focus to a control can only be done in a way that immediately activates its action, bypassing the ability to find out about it before using it!
Over all though, it appears that the difficulties of showing the title attribute on mobile devices, may lead to its demise, mostly due to needing an alternative that is more universal. That is a pity, because mobiles could use a way to show such extra info on-demand, without taking up the limited screen space.
It seems strange that the w3c and mobile browser makers did not do anything about this issue a long time ago. At least they could have displayed the title text on top of the menu that appears when a long press on a control is made.
Personally, I wish it was placed at the top of a right-click/long-touch menu, as it won't timeout, and would be available on all browsers.
The other alternative is to construct footnotes, so an [n] type superscript is put next to the element/text needing more info, linking to explanatory text in a list at the bottom of the page. Each of those can have a similar [n] type link back to the original text/element. That way, it keeps the display uncluttered, but provides easy bidirectional swapping in a simple way. Sometimes, old print media ways, with a little hyperlink help, are best.
The title attribute has been hijacked by some browsers to provide help text for the pattern attribute, in that its text pops up if the pattern doesn't match the text in the input element. Typically, it is to provide examples of the right format.
Slightly more elaborated version of flavaflo's answer:
Uses pre-defined div as pop-up that can hold HTML, rather than reading from a title attribute
Opens/closes on rollover if mouse is used
Opens on click (touch screen) and closes on click on the open pop-up or anywhere else on the document.
HTML:
<span class="more_info">Main Text<div class="popup">Pop-up text can use <b>HTML</b><div></span>
CSS:
.more_info {
border-bottom: 1px dotted #000;
position: relative;
cursor: pointer;
}
.more_info .popup {
position: absolute;
top: 15px; /*must overlap parent element otherwise pop-up doesn't stay open when rolloing over '*/
background: #fff;
border: 1px solid #ccc;
padding: 8px;
left: 0;
max-width: 240px;
min-width: 180px;
z-index: 100;
display: none;
}
JavaScript / jQuery:
$(document).ready(function () {
//init pop-ups
$(".popup").attr("data-close", false);
//click on pop-up opener
//pop-up is expected to be a child of opener
$(".more_info").click(function () {
var $title = $(this).find(".popup");
//open if not marked for closing
if ($title.attr("data-close") === "false") {
$title.show();
}
//reset popup
$title.attr("data-close", false);
});
//mark pop-up for closing if clicked on
//close is initiated by document.mouseup,
//marker will stop opener from re-opening it
$(".popup").click(function () {
$(this).attr("data-close",true);
});
//hide all pop-ups
$(document).mouseup(function () {
$(".popup").hide();
});
//show on rollover if mouse is used
$(".more_info").mouseenter(function () {
var $title = $(this).find(".popup");
$title.show();
});
//hide on roll-out
$(".more_info").mouseleave(function () {
var $title = $(this).find(".popup");
$title.hide();
});
});
Demo here https://jsfiddle.net/bgxC/yvs1awzk/
As #cimmanon mentioned: span[title]:hover:after { content: attr(title) } gives you a rudimentary tooltip on touch screen devices. Unfortunately this has problems where the default ui behavior on touch screen devices is to select the text when any non-link/uicontrol is pressed.
To solve the selection problem you can add span[title] > * { user-select: none} span[title]:hover > * { user-select: auto }
A full solution may use some other techniques:
Add position: absolute background, border, box-shadow etc to make it look like a tooltip.
Add the class touched to body (via js) when the user uses any touch event.
Then you can do body.touched [title]:hover ... without affecting desktop users
document.body.addEventListener('touchstart', function() {
document.body.classList.add('touched');
});
[title] {
border-bottom: 1px dashed rgba(0, 0, 0, 0.2);
border-radius:2px;
position: relative;
}
body.touched [title] > * {
user-select: none;
}
body.touched [title]:hover > * {
user-select: auto
}
body.touched [title]:hover:after {
position: absolute;
top: 100%;
right: -10%;
content: attr(title);
border: 1px solid rgba(0, 0, 0, 0.2);
background-color: white;
box-shadow: 1px 1px 3px;
padding: 0.3em;
z-index: 1;
}
<div>Some text where a portion has a <span title="here's your tooltip">tooltip</span></div>
Depending on how much information you want to give the user, a modal dialogue box might be an elegant solution.
Specifically, you could try the qTip jQuery plugin, which has a modal mode fired on $.click():
The title attribute is not supported in any mobile browsers **in a way that it would show the tooltip the same as to desktop mouse users** *(the attribute itself is ofcourse supported in the markup)*.
It's only basically for desktop users with a mouse, keyboard only users can't use it either, or screenreaders.
You can achieve almost similar with javascript as you said.
I was searching for an easy CSS only solution, and this is really the most easy one I found:
<link rel="stylesheet" href="https://unpkg.com/balloon-css/balloon.min.css">
<span aria-label="Whats up!" data-balloon-pos="up">Hover me!</span>
Working example: https://jsfiddle.net/5pcjbnwg/
If you want to customize the tooltip, you find more info here:
https://kazzkiq.github.io/balloon.css/
To avoid using JavaScript, I used this CSS-only tooltip:
http://www.menucool.com/tooltip/css-tooltip
It works great in Mobile and Desktop, and you can customize the styles.
Thanks to #flavaflo for their answer. This works in most cases but if there is more than one title to lookup in the same paragraph, and one opens over the link to another, the unopened link shows through the first. This can be solved by dynamically changing the z-index of the title that has "popped up":
$("span[title]").click(function () {
var $title = $(this).find(".title");
if (!$title.length) {
$(this).append('<span class="title">' + $(this).attr("title") + '</span>');
$(this).css('z-index', 2);
} else {
$title.remove();
$(this).css('z-index', 0);
}
});
Also, you can make both the hover over display and the click display multiline by adding
(linefeed) to the title='' attribute, and then convert that to <br /> for the html click display:
$(this).append('<span class="title">' + $(this).attr("title").replace(/\\n/g, '<br />') + '</span>');
Extremely late to the party but for future visitors, here is a tweak of #Flavaflo's answer to fade the "tooltip" in and out
JQuery:
$(".more_info").click(function () {
var $title = $(this).find(".title");
if (!$title.length) {
$(this).append('<span class="title">' + $(this).attr("title") + '</span>');
} else {
$($title).fadeOut(250, function() {
$title.remove();
});
}
});
CSS:
.more_info {
border-bottom: 1px dotted;
position: relative;
}
.more_info .title {
position: absolute;
top: 20px;
background: green;
padding: 4px;
left: 0;
color: white;
white-space: nowrap;
border-radius:3px;
animation: fadeIn linear 0.15s;
}
#keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
Fiddle here: http://jsfiddle.net/L3paxb5g/
I know this is an old question, but i have found a CSS solution that works on mobile too, it doesn't use title at all and it's easy to implement, explained here:
https://www.w3schools.com/css/css_tooltip.asp
Explanation:
On mobile, with the touchscreen,the first input acts as css hover, so it works like a toggle tooltip when you press on it.
Code example:
.tooltip {
position: relative;
display: inline-block;
border-bottom: 2px dotted #666;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 15em;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -8em;
opacity: 0;
transition: opacity 0.3s;
padding: 0.5em;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>