We Keep Coding

How to open and close an action menu using CSS?

I am creating a floating action button.
My code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<a href="#" class="float" id="menu-share">
<i class="fa fa-share my-float"></i>
</a>
<ul>
<li>
<i class="fa fa-facebook my-float"></i>
</li>
<li>
<i class="fa fa-google-plus my-float"></i>
</li>
<li>
<i class="fa fa-twitter my-float"></i>
</li>
</ul>
Fiddle Link: jsfiddle.net/7zkjas08.
Currently in my code when the user click the action button the popup appears and the user need to click or tap in somewhere on the screen to close the popup.
I want functionality like this: jsfiddle.net/r2hxbL5j
When the user click the button it shows the cross X closing sign. So the user can tap/click the cross sign and popup disappears.

Cool menu, and that you're trying to achieve that with CSS. I wanted to do that myself for a while. What bootstrap is using is something called pseudo elements to display the character. You just need to replace that character with something else on hover.
I inspected the #menu-share element to find all this out. Just add the following code, and it will work out.
/* when hovering the "a" tag, change the content in the pseudo-element "before" */
a#menu-share:hover > i::before{
content: '✕';
font-weight: bold;
}
I added the multiplication character. If you want to go with an X, I suggest that you change the font-family to a sans-serif, like Arial.
[edit]
It's IMHO impossible to add close functionality to the button with CSS, so it's needed to add the following functions:
/* Old code, but you need to put the next one below this one */
a#menu-share:hover + ul{
visibility: visible;
animation: scale-in 0.5s;
}
/* When giving the element focus (=clicking or tabbing to), close */
a#menu-share:focus + ul {
visibility: hidden;
}
/* Ignore any kind of pointer interaction */
.float > i {
pointer-events: none;
}
<a onmouseout="this.blur()" href="#" class="float" id="menu-share">
this means "this element", namely the a tag. blur() means remove focus from. I also needed to add .float > i syntax to the CSS in order for this to work.

Making the popup from bootstrap stay within the screen

I am creating popups with popover bootstrap option in creating an interactive html. I first used the following tag:
<a class="btn popoverOption"
data-content="A group of people with a shared characteristic. It is an object of observation in epidemiological studies."
data-original-title="cohort"
data-placement="bottom"
href="#"
rel="popover"
style="font-size: inherit; vertical-align: baseline; padding: 0; font: inherit;">
cohort
</a>
I have purposely made spces to show the syntax. The popup is below the text, so I tried adding data-container='body', but in this way when I zoom in the popup is frequently outside the screen. How can I make the popup always stay within my screen (without fixing the size in any way, if possible)?
Thanks in advance! Please tel me if I need to show more code, I didn't do it for brevity.

voting arrows like stack overflow with bootstrap, how do I reduce the size of glyph-icon items and bring them tighter

Hello I'm trying to implement voting system like stack overflow, I've finished the backend//whole functionality but I'm having problem displaying them in UI. right now, the arrows look too far apart and the number isn't quite centered. Also if it's possible I want the color of the arrow to be toggled when clicked/unclicked. I've tried this, but keep getting messed up UI. Can someone please help me with this? thank you in advance.
<td class="vert-align">
<div>
<a href="/post/{{ post.slug }}/vote?is_up=1" class="vote">
<span class="glyphicon glyphicon-triangle-top" style="" aria-hidden="true"></span></a>
<br /> //upper arrow
<span class="number"><h4 id="vote_count_{{ post.slug }}">{{ post.get_vote_count }}</h4></span> <br> //number gets displayed here
<a href="/post/{{ post.slug }}/vote?is_up=0" class="vote">
<span class="glyphicon glyphicon-triangle-bottom" aria-hidden="true"></span></a>
</div> //under arrow
</td>
Also I have one js file for this voting
function vote(node) {
var thread_id = node.attr("href").split('\/')[2];
$.ajax({
url: node.attr("href"),
dataType: "json",
success: function(data) {
$("#vote_count_"+thread_id).html(data.count);
},
error: function(data) {
alert(data.responseJSON.error_message);
}
});
}
$("a.vote").on("click", function() {
vote($(this));
return false;
});
thank you.

To achieve this design with bootstrap (which I can see that you are using) you can simply use this template :
<div class="row">
<div class="col-md-1" style="font-size: 30px; color:#606060; text-align: center;">
<span class="glyphicon glyphicon-triangle-top col-md-12"></span>
<span class="col-md-12">0</span><!-- Number goes here -->
<span class="glyphicon glyphicon-triangle-bottom col-md-12"></span>
</div>
</div>
If you want to toggle the arrow color when clicked use a Javascript method that uses a var (boolean) to determine wether the button is clicked or not, then with the jQuery method .css() you can change the color of the wanted button.
Live example - http://www.bootply.com/6KzWhJefif

I wouls create a CSS class and add it to the '' tag your glyphicons are in. In this class you can set the 'font-size' which will size your iccn. You also should be able to adjust the padding which is what I assume your issue with the incorrect rendering is. If that doesn't help you'll have to use developer tools on your browser and see where you'll need to adjust the padding.
The final thing to do is to set your active, hover and focus on your a tag but using the class. If you've never did this before with CSS it's something like this.
.customClass > a:active, a:hover, a:focus{
color:#fff
}
Hope this helps. If you need more detail let me know but this should be all you need to get it working.

Javascript: Vertical Spacing between two elements

My website consists of a navigation bar (class .nav-primary), a widget box (id #mw-panel) and an article. Recently, I tried to move the widget box up to the top, by applying the following changes to my CSS file:
.mw-panel{top: 50px;}
The problem with this option was, that my element was fixed to a specific position. Instead I wanted the widget element to be exactly 100px under the menu bar (and moving when I am scrolling down the page). Instantly, I knew that JavaScript would be the correct way to solve this problem.
Because I had no success, I asked the StackOverflow community, which helped me a lot.
The JavaScript code in the JS section of the attached code snippet, was partially done by me, but it does not work as it should.
Can someone explain me what I need to change to get this JS code working? Again, #mw-panel has to be positioned exactly 100px beneath .nav-primary.
var menu = document.getElementsByClassName("nav-primary")[0];
var widget = document.getElementById("mw-panel");
var difference = widget.offsetTop - menu.offsetBottom;
if (difference > 100) {
document.getElementById("mw-panel").style.top = (menu.offsetBottom + 100) + "px";
}
.content .entry {
margin-top: 40px;
padding-bottom: 400px;
}
<body class="full-width-content">
<link rel="stylesheet" id="child-theme-css" href="http://vocaloid.de/wp-content/themes/Vuturize/style.css" type="text/css" >
<div class="site-container">
<nav class="nav-primary">
<div class="wrap">
<ul class="menu genesis-nav-menu menu-primary">
<li class="menu-item">Home
</li>
<li class="menu-item">News
</li>
<li class="menu-item">Ranking
</li>
</ul>
</div>
</nav>
</div>
<div class="site-inner">
<div class="content-sidebar-wrap">
<main class="content">
<article class="page entry">
<div>
<h1>Test Article</h1>
</div>
</article>
</main>
</div>
</div>
<div id="mw-panel">
<div>
<h3>Navigation</h3>
<div>
<ul>
<li>Letzte Änderungen
</li>
</ul>
</div>
</div>
<h3>Werkzeuge</h3>
<div>
<ul>
<li>Datei hochladen
</li>
<li>Spezialseiten
</li>
</ul>
</div>
</div>
</body>

There's No such property as offsetBottom. Redo your code ONLY considering offsetTop + offsetHeight to get bottom number.
Example:
var menu = document.getElementsByClassName("nav-primary")
var TrueOffset=menu[0].offsetTop+menu[0].offsetHeight;
You're getting the error because there is no offsetBottom property.
Do console.log(menu) in chrome to see the objects available properties
**Update:
Add this to your css:
.mw-panel{
position: absolute;
}
Here it is in action
Updated code in action

After re-reading your question, I missed one key detail: you're trying to do this JavaScript. This is your problem.
If I understand correctly, you have three items: a nav, an article, and a widget box. You want the widget box to stand 100px below the nav, and then move with the page when you scroll.
if this is the case (if not, correct me), then there's only a few things you need to do:
Keep your nav the way it is. Good job here.
I'm assuming you want the widget next to the article (on the left?). So you'll need to make two columns (some sort of containers, each height: 100%). Your widget container will have the property position: fixed; and the article will have position: static; (or relative, you decide).
Each container will have a width, you might choose 30% for the widget container and 70% for the article, for example.
Now you have two columns, one will move with the page as you scroll.
Here are some links to get you started:
Best Way to do Columns in HTML/CSS
https://css-tricks.com/guide-responsive-friendly-css-columns/
http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/

Bootstrap: In Navbar, Show Different Content Based on Li Link Hovered in a Single Location?

I've tried a few JQuery and CSS implementations of this, but can't seem to get it quite right. I'm utilizing FontAwesome icons in the navbar for Bootstrap, and I would like to have a single location where, when the icons are hovered, a text description of them is shown/hidden.
This implementation has gotten me the farthest, with the different captions showing up. However, I need them all to appear in one location (preferably to the front of the ul navbar-nav grouping, as they will be right aligned).
CSS:
div#navbar a span {display: none;}
div#navbar a:hover span {display: block; position: absolute; top: 40px; left:-50px; width: 125px; padding: 5px; margin: 10px; z-index: 100;color: #AAA; background: black;font: 10px Verdana, sans-serif; text-align: center;}
HTML:
<ul class="nav navbar-nav">
<li><div class="nav-button"><i class="fa fa-user"></i></div><span>Text Goes Here</span></li>
<li><div class="nav-button"><i class="fa fa-umbrella"></i></div><span>Text Goes Here 2</span></li>
<li><div class="nav-button"><i class="fa fa-star"></i></div><span>Text Goes Here 3</span></li>
</ul>
The implementation above is based off MeyerWeb's CSS Popup Demo
I have tried JQuery Fiddles that worked for simple classes/links such as this: http://jsfiddle.net/AstroCB/42gV5/ , but I'm uncertain if the depth of Bootstrap classes is causing some sort of override, as I cannot seem to get JQuery show/hide functions based on the examples I've seen to work.
I have also tried ~ relations such as: http://jsfiddle.net/YsHA4/ but am again hitting a wall.
It's highly likely I am just approaching this the wrong way, but I've been attempting to solve this problem for a few days now and just can't seem to find a solution. A fresh set of eyes and any and all help would be absolutely appreciated. If there's any way I can clarify, please let me know. Thank you!!
EDITED TO ADD: I do not need the final result to be spans inside the links in any regard, they can be hidden external divs, etc. The example I gave is the farthest I have managed to get the functionality to what I want (separate information showing up for each hover), but if a different approach using JS/etc removes the spans or hard codes the text into a JS string in some way, so be it. I am just looking to get this functionality to work as anticipated with Bootstrap, whatever implementation best gets it there!
Also, see my comment for an image representation of what I am trying to achieve.

I made a Fiddle based on your image.
It uses bootstraps right section for the menu.
I have applied a loop to each link:
$.each($('a'), function() {
$(this).hover(function() {
$('.placeholder').html($(this).html());
});
});
It simply takes the HTML inside a tag and places in the menu item with the class placeholder.
Update:
In your case your links are bit more complex so the selector for the loop would look like this:
$.each($('a > span'), function() {
// do stuff here
});
This fetches all links in your document and then the span element inside that.
Aaand finally a Fiddle for the HTML you have provided here.
Code below edited since loops are unecessary:
$('a').hover(function() {
$('.placeholder').html($(this).html());
});
$('a > span').hover(function() {
// do stuff here
});

HTML
<ul class="nav navbar-nav">
<li class="hover"><div class="nav-button"><i class="fa fa-user"></i><span class="text hidden"> Text Goes Here</span></div>
</li>
<li class="hover"><div class="nav-button"><i class="fa fa-umbrella"></i><span class="text hidden"> Text Goes Here 2</span></div>
</li>
<li class="hover"><i class="fa fa-star"></i> <span class="text hidden">Text Goes Here 2</span>
</li>
</ul>
JS
$(document).ready(function () {
$('.hover').each(function (index, el) {
var thiz = $(this);
var text = thiz.find('.text');
thiz.on('mouseover', function (e) {
text.removeClass('hidden');
});
thiz.on('mouseleave', function(e){
text.addClass('hidden')
});
});
});
jsFiddle