Develop Reference

CSS a:focus "forget" last position if i click inside iframe

The a:focus on my CSS are working good, but only if i don't click on the iframe or in other place of the page.
How to avoid the a:focus loss last position, whatever where i click?
It's possible only with CSS or simple JavaScript?
While i navigate on SideNav it's working good:
If i click in other place of page, SideNav lost the last position:
My CSS and HTML
ul.SideNav_Main li a {
text-decoration: none;
color: #2e849e;
padding: 10px 20px;
display: block;
}
ul.SideNav_Main li a:focus { background-color: #ffdb99;}
<li>
Segurança
<ul class="SideNav_Sub" id="T301" style="display: block;">
<li>Change Password</li>
<li>Change eKey</li>
</ul>
</li>
<li>Logout</li>

Simplest is to use javascript (if you are interested in solving the problem using pure css, you can look into radio inputs). Add "mySidebarLinks" class to your links
css:
.myStyle{color: red;}
javascript:
const links = document.getElementsByClassName("mySidebarLinks");
for (var i = 0; i < links.length; i++) {
links[i].addEventListener("click", (e) => {
for (var j = 0; j < links.length; j++) {
if (links[j]!=e.target){
links[j].classList.remove('myStyle');
}else links[j].classList.add('myStyle');
}
});
}

Ensure an element has a proper offset from another element?

I'm not exactly sure how to better phrase the title above so if you can think of a more clear and concise title feel free to re-phrase it.
I am creating a generic tool-tip with HTML, CSS, and Javascript (no jQuery, Angular, etc.). I've made it to a point where everything looks pretty clean, until I resize the window and scroll down. Now, from my understanding, mobile devices do not have an onmouseover or onmouseout event and therefore I do not need to account for this; however, if I take into account the smaller screens of some laptops (I've seen 10 inch screens) then this could be an issue.
When I hover over one of the elements (they are all a elements in this example), the tool-tip appears as it should, however when I resize as I described above, the onmouseout event is firing because the mouse is technically over the tool-tip, not the element anymore. I thought that offsetting from the position of the element by its height plus five pixels that I would be safe from that issue, but it seems that the position isn't the position I'm expecting.
I am currently using getBoundingClientRect() to calculate the positions but I believe this is based on the view port position while I think I'm needing based on the position in the page instead that way as the page moves so does where the tool tip is. I've included my code below and you can test it out and see what I'm talking about.
var tooltip = document.getElementById("globalTooltip");
function showTooltip(sender) {
var senderBounds = sender.getBoundingClientRect();
var top = senderBounds.y + senderBounds.height + 5;
tooltip.dataset.owner = sender;
tooltip.innerHTML = sender.dataset.tooltip;
tooltip.classList.add(sender.dataset.tooltiptype);
if (top + tooltip.getBoundingClientRect().height + 5 > window.innerHeight)
top = senderBounds.y - tooltip.getBoundingClientRect().height - 5;
tooltip.style.top = top + "px";
tooltip.style.left = (senderBounds.x + 5) + "px";
tooltip.classList.add("active-tooltip");
}
function hideTooltip(sender) {
tooltip.style.left = "-250px";
tooltip.classList.remove("error");
tooltip.classList.remove("warning");
tooltip.classList.remove("success");
tooltip.classList.remove("neutral");
tooltip.classList.remove("active-tooltip");
}
body {
margin: 0;
text-align: center;
}
.disabled-link {
color: #777;
cursor: default;
}
li {
padding: 5px;
list-style-type: none;
}
.tooltip {
position: absolute;
padding: 10px;
cursor: default;
border-radius: 25px;
color: #333;
opacity: 0;
transition: all 0.2s ease-in-out;
max-width: 30vw;
}
.neutral { background-color: #ddd; }
.success { background-color: #7c7; }
.warning { background-color: #fc3; }
.error { background-color: #f55; }
.active-tooltip { opacity: 1; }
<div class="container">
<ul>
<li>
<a class="disabled-link"
data-tooltip="This link is available in another location."
data-tooltiptype="warning"
onmouseover="showTooltip(this)" onmouseout="hideTooltip(this)">
Hover Over This Disabled Link</a>
</li>
<li>Some Active Link</li>
<li>
<a class="disabled-link"
data-tooltip="Something great is coming soon!"
data-tooltiptype="success"
onmouseover="showTooltip(this)" onmouseout="hideTooltip(this)">
Hover for more details...</a>
</li>
<li>Some Active Link</li>
<li>
<a class="disabled-link"
data-tooltip="This area is currently under maintenance."
data-tooltiptype="error"
onmouseover="showTooltip(this)" onmouseout="hideTooltip(this)">
Another Disabled Link</a>
</li>
<li>Some Active Link</li>
<li>Some Active Link</li>
<li>Some Active Link</li>
<li>
<a class="disabled-link"
data-tooltip="This is an example of what happens when the text supplied to the tooltip is rather verbose instead of the enjoyable concise messages that are typically used to relay information instead. No one likes to read a novel in a tooltip, but hey, it's not my decision, it just has to be accounted for due to an excessive and old page."
data-tooltiptype="neutral"
onmouseover="showTooltip(this)" onmouseout="hideTooltip(this)">
Really Verbose Message</a>
</li>
</ul>
</div>
<i id="globalTooltip" data-owner="none" class="tooltip"></i>
How can I ensure the tool-tip is always offset from the element instead of flying in over it?

Closing drop-down menu by clicking on the button itself

I've seen a lot of questions on this wesite about closing a drop-down menu by clicking anywhere on the page.
My question is a little bit different though. I don't want the dropdown-menu to close by clicking outside of it. The moment I click on the button that shows me the menu, I want the menu to stay like that (drop-downed) untill the user clicks on that same button again. Also, the moment when the menu is shown, I want it to push the other elements direcly beneath it down. These elements could be for example other buttons. You guys might have seen this concept on some websites and I like the idea. I want to create the same thing, but I don't how.
This will probably be made with Javascript since this is easier, but I don't know how to do it. Do you guys have any ideas or tips?
I would be very grateful. Thanks in advance.
Edit: Here's an example of what I ment: Link to jsfiddle ->https://jsfiddle.net/Cerebrl/uhykY/
I want to push down button 2 and 3 the moment the first menu is drop downed, so it can create it's own space to display. And secondly, the menu should only close the moment I push the button, not by clicking outside of it.

Your can use toggleSlide method in two lines like
$(function(){
$('button').click(function(){
$('ul').slideToggle();
});
});
ul {
background: none #FA982E;
margin: 0;
padding: 0;
list-style: none;
display: none;
}
ul a {
display: block;
padding: 5px 20px;
text-decoration: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
<button data-toggle="#menu-main" title="Click to toggle">Toggle Menu</button>
</p>
<ul id="menu-main">
<li>Menu item 1</li>
<li>Menu item 2</li>
</ul>

If you want the menu to push the content below, than put it in normal flow. What you need is a simple jQuery's slideToggle method and to hide the menu by default:
$('[data-toggle]').on('click', function(e){
e.preventDefault;
var thisLink = $(this);
var toToggle = $( thisLink.data('toggle') );
toToggle.slideToggle(200);
})
* {
font-family: sans-serif;
}
.toggle-menu a {
display: block;
float: right;
padding: 5px 20px;
text-align: center;
background: none #F1B475;
cursor: pointer;
}
#menu-main {
background: none #FA982E;
margin: 0;
padding: 0;
list-style: none;
display: none;
}
#menu-main a {
display: block;
padding: 5px 20px;
text-decoration: none;
}
#menu-main a:hover,
#menu-main a:focus {
background: none #D0812D;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="toggle-menu">
<p>
HALLO
<a data-toggle="#menu-main" title="Click to toggle">+</a>
</p>
</div>
<ul id="menu-main">
<li>Menu item 1</li>
<li>Menu item 2</li>
</ul>
<p>
Other content
</p>
Since the menu has no absolute or fixed position, it will push the content below it. JSFiddle playground

Replace main navigation links with submenu links on hover - instead of a dropdown

I recently saw a navigation effect I liked on a website, but can't find it to check the code and see how it was done. There was a standard menu bar that was 100% width and aprox 30px in height, with each link equally spaced within it. When you hovered on the gallery link the whole menu bar changed and the links were replaced with the submenu. No dropdown, the whole menu bar was changed to the submenu items. I can't quite sort out how this was done. Any suggestions would be appreciated. Here is the example html markup I am working with:
<nav>
<ul class ="menu">
<li class ="nav__item">about</li>
<li class ="nav__item">galleries
<ul class="submenu">
<li class ="nav__subitem">one</li>
<li class ="nav__subitem">two</li>
<li class ="nav__subitem">three</li>
<li class ="nav__subitem">four</li>
<li class ="nav__subitem">five</li>
<li class ="nav__subitem">six</li>
</ul> <!-- close sub -->
</li>
<li class ="nav__item">stories</li>
<li class ="nav__item">contact</li>
<li class ="nav__item">thank you</li>
</ul>
</nav>

Not sure if this is what you are looking for but check out this fiddle
Setting a fixed height to the navigation with relative positioning and targeting the parent of the nested ul on mouse over I was able to achieve this effect.
nav {
height: 50px;
overflow: hidden;
position: relative;
background: #999999;
}
.menu {
list-style-type:none;
position: relative;
}
ul {
padding: 0;
margin: 0;
}
li.nav__item {
float:left;
}
li.nav__item a {
padding: 0 15px;
line-height:50px;
}
.submenu {
position:absolute;
left:15px;
}
.nav__subitem {
line-height: 50px;
float: left;
list-style: outside none none;
}
And the little bit of jQuery magic to tie it all together.
$(".has-children").mouseover(function () {
$(".menu").css("top", "-50px");
});
$(".main-navigation").mouseleave(function () {
$(".menu").css("top", "0px");
});

I can't get my slide menu to change lists as I click on the links

I am currently working on a Web page that shares recipes for cooking. I am trying to use a slide menu to hide some of the menu options. Basically what I am wanting to do is show a menu with all the food categories as clickable links. When a user clicks one of these links a slide menu appears with the sub-categoroies. I am able to get the slide menu to show but will not change if the user clicks on a different menu category. How do I get the slide menu to change as the user clicks another category?
Thank you for any help. Here is my code:
HTML File:
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC-"//W3C//DTD XHTML 1.0 Strict/EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--
Name: Collin Klopstein
Date: December 14, 2013
filename: dinnerplate.htm
supporting files: dinner.css, menus.js
description: A web site created to let people share their love for cooking, post favorite recipes, share tips, and learn about cooking. The site consists of several links to link the users to specific recipes for breakfast, lunch and dinner, as well as recipes organized by food groups and dietary concerns. The menus.js file will use javascript to place the links into a simple menu system that will not overwhelm the web page. The dinner.css will style the Web Page.
-->
<title>Dinner Menu</title>
<link type="text/css" rel="stylesheet" href="dinner.css">
<script type="text/javascript" src="menus.js"></script>
</head>
<body>
<div id="page">
<div id="left">
<h3>Assignments</h3>
<ul class="assignmentLinks">
<li>Index</li>
<li>Happy Birthday</li>
<li>Dinner Plate</li>
<li>Shakespeare</li>
</ul>
<hr style="color: white" />
<h3>Menu</h3>
<ul class="menu">
<li class="categories">Home</li>
<li class="slideMenus">Appetizers
<ul>
<li>Antipasto</li>
<li>Seafood</li>
<li>Beans and Legumes</li>
<li>Canapes</li>
<li>Cheeses</li>
<li>Dips and Spreads</li>
<li>Fruits</li>
<li>Meat</li>
<li>Nuts and Seeds</li>
<li>Pastries</li>
<li>Vegetables</li>
</ul>
</li>
<li class="slideMenus">Breakfast/Brunch
<ul>
<li>Baked Goods</li>
<li>Beverages</li>
<li>Casseroles</li>
<li>Cereals</li>
<li>Fruits</li>
<li>Meat</li>
<li>Potatoes</li>
<li>Quiches</li>
<li>Crepes</li>
<li>Egg Dishes</li>
<li>French Toast</li>
<li>Pancakes</li>
<li>Waffles</li>
</ul>
</li>
<li class="slideMenus">Desserts
<ul>
<li>Cakes</li>
<li>Candies</li>
<li>Chocolate</li>
<li>Cookies</li>
<li>Custards and Puddings</li>
<li>Gelatins</li>
<li>Pies</li>
<li>Frozen Treats</li>
<li>Meringues</li>
<li>Mousse</li>
<li>Trifles</li>
</ul>
</li>
<li class="slideMenus">Main Dishes
<ul>
<li>Burgers</li>
<li>Casseroles</li>
<li>Fish and Seafood</li>
<li>Salads</li>
<li>Meatless</li>
<li>Meatloaves</li>
<li>Pizza and Calzones</li>
<li>Quiche</li>
<li>Ribs</li>
<li>Roasts</li>
<li>Sandwiches</li>
<li>Steaks and Chops</li>
<li>Stir-Fries</li>
<li>Stuffed Peppers</li>
<li>Mexican</li>
</ul>
</li>
<li class="slideMenus">Salads
<ul>
<li>Bean</li>
<li>Coleslaw</li>
<li>Croutons and Toppings</li>
<li>Dressings and Vinaigrettes</li>
<li>Egg Salads</li>
<li>Fruit Salads</li>
<li>Grains</li>
<li>Green Salads</li>
<li>Pasta Salads</li>
<li>Potato Salads</li>
<li>Vegetable Salads</li>
</ul>
</li>
<li class="slideMenus">Soups
<ul>
<li>Beans and Legumes</li>
<li>Broths and Stocks</li>
<li>Chili</li>
<li>Chowders</li>
<li>Cream and Cheese</li>
<li>Dessert Soups</li>
<li>Dry Soup Mixes</li>
<li>Noodle Soups</li>
<li>Seafood</li>
<li>Slow Cooker Soups</li>
<li>Stews</li>
<li>Vegetables</li>
<li>Vegetarian</li>
</ul>
</li>
<li class="slideMenus">User
<ul>
<li>Post a Recipe</li>
<li>Discussion Forum</li>
<li>My Profile</li>
<li>My Recipe Book</li>
</ul>
</li>
</ul>
</div>
<div id="logo">
<img src="dplogo.jpg" alt="Dinner Plate" />
</div>
<div id="main">
<img src="torte.jpg" height="300" width="320"alt="Apple Bavarian Torte" />
<h1>Recipe of the Week</h1>
<h2>Apple Bavarian Torte</h2>
<h3>Ingredients:</h3>
<ul id="ingrd">
<li>1/2 cup butter</li>
<li>1/3 cup white sugar</li>
<li>1/4 teaspoon vanilla extract</li>
<li>1 cup all-purpose flour</li>
<li>1 (8 ounce) package cream cheese</li>
<li>1/4 cup white sugar</li>
<li>1 egg</li>
<li>1/2 teaspoom vanilla extract</li>
<li>6 apples - peeled, cored, and sliced</li>
<li>1/3 cup white sugar</li>
<li>1/2 teaspoon ground cinnamon</li>
<li>1/4 cup sliced almonds</li>
</ul>
<h3>Directions</h3>
<ol id="dir">
<li>Preheat oven to 450° F (230° C).</li>
<li>Cream together butter, sugar, vanilla, and flour</li>
<li>Press crust mixture into the flat bottom of a 9-inch springform pan. Set aside</li>
<li>In a medium bowl, blend cream cheese and sugar. Beat in egg and vanilla. Pour cheese mixture over crust.</li>
<li>Toss apples with sugar and cinnamon. Spread apple mixture over all.</li>
<li>Bake for 10 minutes. Reduce heat to 400° F (200° C) and continue baking for 25 minutes.</li>
<li>Sprinkle almonds over top of torte. Continue baking until lightly browned. Cool before removing from pan.</li>
</ol>
<div id="summer">
<h3>Summer Entertainment Tips</h3>
<p>With the summer fast approaching, it's time to start planning outdoor parties. Keep your guests cool and happy with the summer time tips.</p>
<ul class="tips">
<li>Keep plenty of ice on hand for cooling people, food, and drinks by filling plastic freezer bags with ice from your trays.</li>
<li>For extra flavor, use frozen cubes of lemonade or juice to cool drinks instead of regular ice.</li>
<li>Keep a bag packed with picnic gear for spur-of-the-moment excursions.</li>
<li>Throw a summer harvest party to swap surplus fruits and vegetables with your gardener friends.</li>
<li>Stock extras for guests including sunblock, bug repellant, hats, and towels</li>
</ul>
</div>
<div id="grill">
<h3>Grilling Tips</h3>
<p>Is there anything better on the grill than beef? To get the most out of steaks, apply the following tips:</p>
<ul class="tips">
<li>For direct grilling place beef 3 to 6 inches from the heat source and cook at medium heat.</li>
<li>For thicker cuts, use indirect grilling with the beef placed farther that 6 inches from the heat source.</li>
<li>Leave at least 1/8" of fat in your steaks to help seal in the juices while the meat is cooking. Slash the fat at 1" intervals around the steak perimeter so that the meat willl not curl up during the grilling process.</li>
</ul>
</div>
</div>
</div>
</body>
</html>
JavaScript File:
/*
Name: Collin Klopstein
Date: December 14, 2013
Filename: menus.js
Function List:
makeMenus()
Initializes the contents of the mystery.htm Web page, locating
the sliding menus, setting their initial positions and
display styles and defining the onevent handlers.
showSlide()
Shows a sliding menu while hiding any inactive menus
closeSlide()
Closes an inactive sliding menu
moveSlide()
Moves a sliding menu horizontally across the page
-------------------------------------------------------------
Global Variable List:
currentSlide
An object variable pointing to the currently active sliding menu
leftPos
The current left position of the sliding menu as it is
moved across the page
*/
window.onload = makeMenus;
var currentSlide = "null";
var leftPos = 0;
function makeMenus() {//create a reference to all sliding menus in the doc and apply event handlers
var slideMenus = new Array();//creates slideMenus array
var allElems = document.getElementsByTagName("*");//stores all elements in the document in allElems array
for (var i = 0; i < allElems.length; i++) {
if (allElems[i].className == "slideMenus") slideMenus.push(allElems[i]);
}
for (var i = 0; i < slideMenus.length; i++) {
slideMenus[i].onclick = showSlide;//creates eventhandler onclick to call showSlide()
slideMenus[i].getElementsByTagName("ul")[0].style.left = "0px";//sets the left property value of ul elements to 0px
}
//create event handler onclick that calls the closeSlide() when a user clicks anywhere in the "logo" or "main" div
document.getElementById("logo").onclick = closeSlide;
document.getElementById("main").onclick = closeSlide;
document.getElementById("left").onclick = showSlide;
}
function showSlide() {//displays a sliding menu on the web page
var slideList = this.getElementsByTagName("ul")[0];
//test whether a sliding menu is currently displayed on the page
if (currentSlide != "null" && currentSlide.idName == slideList.idName)
closeSlide;
else {
closeSlide;
currentSlide = slideList;
currentSlide.style.display = "block";
currentSlide.style.backgroundColor = "black";
currentSlide.style.border = "2px solid rgb(218, 165, 32)";
currentSlide.style.left = "125px";
currentSlide.style.top = "-100px";
}
}
function closeSlide() {//close any active sliding menu
if (currentSlide) {
currentSlide.style.left = "0px";//sets style of left property to 0px of currentSlide object
currentSlide.style.display = "none";//sets display of currentSlide to "none"
currentSlide = "null";//sets value of currentSlide to "null"
}
}
function moveSlide() {//move a sliding menu horizontally across page until left coordinate exceeds 220
leftPos += 5;
if (parseInt(currentSlide.style.left) <= 220)
currentSlide.style.left = leftPos + "px";
else {
leftPos = 0;
}
}
And the CSS:
body {background-color: black}
ul {list-style-type: none}
ul a {text-decoration: none; color: black}
#left {width: 150px; float: left; background-color: black; height: 100%;}
#left h3{text-align: center; font-weight: normal; letter-spacing: 0.25em;
font-size: 14px; color: white; margin-bottom: 15px}
#left li {position: relative; margin: 5px; padding-top: 0.5em}
#left a {color: rgb(218, 165, 32); text-decoration: underline; display: block}
#left a:hover {color: white; text-decoration: underline; font-weight: bold}
#left ul ul {display: none; position: absolute; top: 0px; left: 100%; width: 100%}
#left.slideMenu > a {z-index: 2; position: relative;}
#logo {float: left; width: 1200px; padding-left: 10px; margin-left: 20px; margin-bottom: 15px; background-color: white}
#main {float: left; width: 1200px; padding-left: 10px; margin-left: 20px; background-color: white;}
#main h1 {font-weight: normal; font-family: Script; letter-spacing: 0.5em; border: 1px solid black; background-color:
rgb(218, 165, 32); margin-right: 20px}
#main img {float: right; margin: 0px 0px 10px 10px; position: absolute; top: 325px; left: 925px; border: 25px inset
rgb(218,165,32)}
#main p {margin: 10px 0px; font-size: 1.25em; }
#main h2, h3 {text-decoration: underline}