Develop Reference

closing a box with mousehover

I created this box. I want this box to open when I hover my mouse over the part that is still visible. Now when I hover my mouse nothing happens. I think the error must be the JS file. Calling the function goes okay because if put for example an
alert("test")
in the close box function everything works except the box.
HTML:
<div class="box" onmouseover="boxclose();">
<h4 class="AlarmHeader"> Alarm Times!</h4>
</div>
CSS:
.box{
height: 150px; width: 400px;
background-color:black;
border-radius: 20px 20px 0 0;
padding: 5px;
position:fixed;
bottom:-100px;
right:5px;
JS:
function boxclose() {
document.getElementsByClassName("box").style.bottom="0px"
}
Useful link: https://www.w3schools.com/cssref/pr_pos_bottom.asp

You're using getElementsByClassName, which returns a list instead of one element, so you just need to tell it which element to target:
document.getElementsByClassName("box")[0].style.bottom="0px"
Working example:
function boxclose() {
document.getElementsByClassName("box")[0].style.bottom="0px"
}
.box{
height: 150px; width: 400px;
background-color:black;
border-radius: 20px 20px 0 0;
padding: 5px;
position:fixed;
bottom:-100px;
right:5px;
<div class="box" onmouseover="boxclose();">
<h4 class="AlarmHeader"> Alarm Times!</h4>
</div>

You dont need javascript there, you can do that with css, too i will add a transition, try the following:
.box{
height: 150px; width: 400px;
background-color:black;
border-radius: 20px 20px 0 0;
padding: 5px;
position:fixed;
bottom:-100px;
right:5px;
transition:all .8s cubic-bezier(1,.65,1,.61);
}
.box:hover {
bottom:0;
}
<div class="box">
<h4 class="AlarmHeader"> Alarm Times!</h4>
</div>

If i'm not wrong changing your js file like this will work,
function boxclose() {
document.getElementsByClassName("box")[0].style.bottom="0px"
}

Hello If i Properly understand you then please try this.
.box-popup {padding: 5px 10px; border:1px solid #ddd; position:relative;}
.box-popup span {display: none;}
.box-popup:hover span {display: block; padding: 10px; width: 200px; height: 100px; border:1px solid #eee; position: absolute; left:0; top: 30px;}
<div class="box-popup">
Hover
<span>
Hover Data
</span>
</div>

How to keep <a href> element with a class tied to javascript from acting as a block element

I'm trying to format an inline navigation, but the last link which has a class tied to a piece of javascript seems to be causing the entire link to become a block element rather than putting it inline with the rest of the links in the navigation.
I tried removing the class, changing the class to something else (not tied to any script) and it puts the link back in line, which is what leads me to believe it has something to do with the javascript it's tied to. I've also tried calling a.show in css to display it inline and inline-block to no avail. I feel like I'm missing a well know rule of thumb.
The <a href="#" class="show"> is on Line 20 and the <script> tag is on Line 25 of the HTML
CSS
#nameTag {
max-width: 800px;
min-width: 320px;
margin: 0 auto;
background-color: #FFFFFF;
-webkit-box-shadow: 2px 2px 2px 1px hsla(0,0%,0%,0.72);
box-shadow: 2px 2px 2px 1px hsla(0,0%,0%,0.72);
border-radius: 43px;
border: 2px solid #4B4949;
}
#tagTop{
width: 100%;
height: auto;
display:block;
color: #fff;
font-size:30px;
text-align: center;
border-top-left-radius: 40px;
border-top-right-radius: 40px;
background-color: #0033AA;
padding-top: 5px;
padding-bottom: 10px;
}
#tagBottom{
width: 100%;
height: 50px;
display: block;
color: #FFFFFF;
text-align: center;
border-bottom-left-radius: 40px;
border-bottom-right-radius: 40px;
background-color: #0033AA;
padding-top: 5px;
padding-bottom: 10px;
}
#tagBottom > a:link, a:visited{
color:#fff;
}
#container{
padding:20px
}
.miniNav{
text-align:center;
font-size:18px;
font-weight:600;
margin-bottom:10px;
}
.miniNav a:link,a:visited{
color:#0033AA;
text-decoration:none;
}
.miniNav a:hover,a:active{
color:#000;
}
HTML
<div id="nameTag">
<div id="tagTop">
<h3>HELLO</h3>
my name is
</div>
<div id="name">
<div class="show">
<img src="images/name.jpg" width="100%" alt="First slide image" class="center-block">
</div>
</div>
<div id="container">
<div class="miniNav">
Change Font​
|
Download Graphic CV​
|
Download Typed CV
|
<a class="show" href="#">Close CV</a>
</div>
</div>
<div id="tagBottom">
</div>
<script>
$("#container").hide();
$(".show").click(function() {
$("#container").slideToggle("slow");
});
</script>
</div>

UPDATE2
In order to prevent the jerking behavior when clicking the .hide and .show links, simply add event.preventDefault() to your jQuery function.
<script>
$("#container").hide();
$(".show, .hide").click(function(event) { // Pass the event object here
event.preventDefault(); // Then use the preventDefault() property
$("#container").slideToggle("slow");
});
</script>
UPDATE
I misunderstood what the question was, I believe that you wanted the toggle image inline with the other anchors. That would be more trouble than what it's worth. .show is in another div and nested. So just add an identical img inside .miniNav and make sure the other image disappears. Also, I used a background-image for the one inside .miniNav because it's easier to handle as a link. It's better if you look at the jQuery than for me to explain it. I also changed the "Close CV" link's class to .hide so it doesn't share styles and then added .hide to the jQuery in order to keep functionality.
The last link "Close CV" is ok as long as your #nameTag is # 550px wide, else the link will naturally wrap to the next line if less than 550px. If you make .miniNav and the anchors behave like table components, there will be no wrapping to the next line. Add display:table-row to .miniNav and display:table-cell to each anchor.
Changed padding so that links conform when #nameTag is compact. Removed | and added border-right: 1px solid blue;. To center the links, margin: 0 auto; display: table; was added to #container.
You could use percentages or ems instead of px for margins and padding so that your text will stay on one line consistently. That takes some experimenting so I'll leave you that to decide.
BTW, when designating selectors in CSS, if you have multiple selectors that apply to a ruleset, you need to be specific on each one.
Example
.miniNav a:hover,
a:active {
color: #000;
}
Anchors that are descendants of .mini-nav are black when hovered over / Any anchor that is active is black.
.miniNav a:hover,
.miniNav a:active {
color: #000;
}
Anchors that are descendants of .mini-nav are black when hovered over or is active.
Changes
#container {
padding: 10px 0px 15px 7px;
margin: 0 auto;
display: table;
}
.miniNav {
text-align: center;
font-size: 18px;
font-weight: 600;
margin-bottom: 10px;
display: table-row;
}
.miniNav a,
.miniNav a:link,
.miniNav a:visited {
color: #0033AA;
text-decoration: none;
display: table-cell;
border-right: 1px solid blue;
padding: 0 7px;
}
...
.miniNav a:last-of-type {
border-right: 0px none transparent;
}
SNIPPET
$("#container").hide();
$(".show, .hide").click(function() {
$('.show').toggle();
$("#container").slideToggle("slow");
});
#nameTag {
max-width: 800px;
min-width: 550px;
margin: 0 auto;
background-color: #FFFFFF;
-webkit-box-shadow: 2px 2px 2px 1px hsla(0, 0%, 0%, 0.72);
box-shadow: 2px 2px 2px 1px hsla(0, 0%, 0%, 0.72);
border-radius: 43px;
border: 2px solid #4B4949;
}
#tagTop {
width: 100%;
height: auto;
display: block;
color: #fff;
font-size: 30px;
text-align: center;
border-top-left-radius: 40px;
border-top-right-radius: 40px;
background-color: #0033AA;
padding-top: 5px;
padding-bottom: 10px;
}
#tagBottom {
width: 100%;
height: 50px;
display: block;
color: #FFFFFF;
text-align: center;
border-bottom-left-radius: 40px;
border-bottom-right-radius: 40px;
background-color: #0033AA;
padding-top: 5px;
padding-bottom: 10px;
}
#tagBottom > a:link,
a:visited {
color: #fff;
}
#container {
padding: 10px 0px 15px 7px;
margin: 0 auto;
display: table;
}
.miniNav {
text-align: center;
font-size: 18px;
font-weight: 600;
margin: 0px auto 10px;
display: table-row;
}
.miniNav a,
.miniNav a:link,
.miniNav a:visited {
color: #0033AA;
text-decoration: none;
display: table-cell;
border-right: 1px solid blue;
padding: 0 7px;
}
.miniNav a:hover,
.miniNav a:active {
color: #000;
}
.miniNav a:last-of-type {
border-right: 0px none transparent;
}
a.img {
background: url(http://placehold.it/80x50/eea/e00?text=First=slide+image)no-repeat;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="nameTag">
<div id="tagTop">
<h3>HELLO</h3>
my name is
</div>
<div id="name">
<div class="show">
<a href="#">
<img src="images/name.jpg" width="100%" alt="First slide image" class="center-block">
</a>
</div>
</div>
<div id="container">
<div class="miniNav">
<a href="#" class='img'>First slide image</a>
Change Font​
Download Graphic CV​
Download Typed CV
<a class="hide" href="#">Close CV</a>
</div>
</div>
<div id="tagBottom">
</div>
</div>

It appears jQuery's slideToggle() function defaults to display:block, so you can use a callback to set it to display: inline-block manually, as explained in this answer from user black.
Your code would then be:
$("#container").hide();
$(".show").click(function() {
$("#container").slideToggle("slow", function() {
if ($("#container").is(':visible'))
$("#container").css('display','inline-block');
});
});
You'll also need to style your container as display: inline-block, unless I'm misunderstanding your question.

Possibly better way to code this hacky toggle button?

I have a toggle button that has been coded up, but I dont think its good to use in my form, since its a pretty bad hacky code to select either option.
Is there a better/efficient way to code this toggle button instead? I am not good with jQuery, so any help with provided functionality would be helpful.
If there is also a way of programming it to slide the toggle left/right instead of clicking left/right would be great also.
I have also attached these images to show the behaviour of how it should function:
toggle behaviour diagram
current html file(below) button look for left/right toggle buttons
Any questions, please ask...
<html>
<head>
<style>
#toggle-slide {
border: 4px #303F9F solid;
border-radius: 5px;
display: flex;
width:300px;
color: white;
font-weight: 700;
text-align: center;
cursor: pointer;
}
#toggle-slide div {
flex:1;
padding: 10px 20px;
}
#toggle-option-0 {
background-color:#3F51B5;
}
#toggle-option-1 {
background-color:white;
}
</style>
<script>
function toggle() {
realToggle = document.getElementById('real-toggle');
if (realToggle.value == 0) {
realToggle.value=1;
document.getElementById('toggle-option-0').style.backgroundColor='#3F51B5';
document.getElementById('toggle-option-1').style.backgroundColor='#FFF';
} else {
realToggle.value=0;
document.getElementById('toggle-option-0').style.backgroundColor='#FFF';
document.getElementById('toggle-option-1').style.backgroundColor='#3F51B5';
}
}
</script>
</head>
<body>
<div id='toggle-slide' onclick='toggle()'>
<div id='toggle-option-0' class='active'>Private</div>
<div id='toggle-option-1'>Public</div>
<input id='real-toggle' type=hidden name=private value=1 />
</div>
</body>
</html>

A pure CSS version:
On the following snippet there's a hidden checkbox that becomes checked/unchecked when the content in label is clicked. Using the CSS :checked selector, the #background position is changed from 0% to 50% and it's color changes from red to blue.
The background is separated from the text and set with position:absolute (to be easily moved) plus z-index:-1 (which brings it to behind the subtitles). A CSS transition added on the #background animates the changes on it's position/color.
.toggle-slide {
border: 4px #555 solid;
border-radius: 5px;
display: flex;
width: 300px;
color: white;
font-weight: 700;
text-align: center;
cursor: pointer;
position: relative;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE/Edge */
user-select: none;
}
.toggle-slide .subtitle {
flex: 1;
padding: 10px 20px;
}
#background {
width: 50%;
height: 100%;
top: 0;
left: 0;
position: absolute;
z-index: -1;
background-color: tomato;
-webkit-transition: all 0.6s; /* Safari */
transition: all 0.6s;
-webkit-transition-timing-function: cubic-bezier(0.2,1,0.2,1);
transition-timing-function: cubic-bezier(0.2,1,0.2,1);
}
input[type=checkbox] {
display: none;
}
#real:checked ~ label #background {
background-color: skyblue;
left: 50%;
}
<input id=real type=checkbox name=real />
<label class=toggle-slide for=real>
<div id=background></div>
<div class=subtitle>Private</div>
<div class=subtitle>Public</div>
</label>

You can do this completely in pure css, but since you were asking for jQuery...
$(document).ready(function() {
$('.input-button').click(function() {
if ($('.public').hasClass('selected')) {
$('.public').removeClass('selected');
$('.private').addClass('selected');
$('.slider').stop().animate({
left: '48%'
}, 200);
} else {
$('.private').removeClass('selected');
$('.public').addClass('selected');
$('.slider').stop().animate({
left: '2%'
}, 200);
}
});
});
html,
body {
padding: 0;
margin: 0;
}
.input-button {
width: 200px;
height: 40px;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -20px;
position: absolute;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
color: #FFF;
background-color: #2E86AB;
border-radius: 4px;
line-height: 40px;
font-family: sans-serif;
-webkit-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2);
box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2);
cursor: pointer;
}
span {
width: 50%;
height: 100%;
float: left;
text-align: center;
cursor: pointer;
-webkit-user-select: none;
}
.input-button div {
width: 100px;
height: 85%;
top: 50%;
left: 2%;
transform: translateY(-50%);
position: absolute;
background-color: #FFF;
border-radius: 4px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='input-button'>
<div class='slider'></div>
<span class='private'>Private</span>
<span class='public selected'>Public</span>
</div>

Here is a good example of what you were trying to create
jQuery on-off-switch.js Plugin
It also implemented with jQuery and supports the sliding on drag functionality.
How to use the plugin

Displaying some text when mouse is over an input text box

I have an input text box, on which I would like to display some text area when the user's mouse get over it, giving to him informations on the text to enter.
here is my HTML code :
<html>
<body>
<style type="text/css">
.mouseover
{
}
</style>
<span onmouseover="this.classname='mouseover'" onmouseout="this.classename=''"></span>
<input id="mybox" type="text" />
</body>
</html>
What is the best CSS trick that would help to do that ?
Thank you for help in advance.

You can do all of this with CSS. Play around with CSS triangles for the tooltip but what you're mainly looking for is to use the :hover pseudo-class. No need for Javascript.
.input {
position: relative;
}
.tooltip {
display: none;
padding: 10px;
}
.input:hover .tooltip {
background: blue;
border-radius: 3px;
bottom: -60px;
color: white;
display: inline;
height: 30px;
left: 0;
line-height: 30px;
position: absolute;
}
.input:hover .tooltip:before {
display: block;
content: "";
position: absolute;
top: -5px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid blue;
}
http://jsfiddle.net/v8xUL/1/

You can use Jquery Tooltip:
Jquery Tooltip

Just one more way to do that...
Filldle Demo
For me in IE8 OK DEMO
<input type="text">
<span>Some Text inside... </span>
span {
background-color: rgba(0,102,255,.15);
border: 2px solid rgba(0,102,255,.5);
border-radius: 10px;
color: #000;
display: none;
padding: 10px;
position: relative;
}
span:before {
content: "";
border-style: solid;
border-width: 0 15px 15px 15px;
border-color: transparent transparent rgba(0,102,255,.5) transparent;
height: 0;
position: absolute;
top: -17px;
width: 0;
}
input {
display: block
}
input:hover + span {
display: inline-block;
margin: 10px 0 0 10px
}

* simple css-based tooltip */
.tooltip {
background-color:#000;
border:1px solid #fff;
padding:10px 15px;
width:200px;
display:none;
color:#fff;
text-align:left;
font-size:12px;
/* outline radius for mozilla/firefox only */
-moz-box-shadow:0 0 10px #000;
-webkit-box-shadow:0 0 10px #000;
}
// select all desired input fields and attach tooltips to them
$("#myform :input").tooltip({
// place tooltip on the right edge
position: "center right",
// a little tweaking of the position
offset: [-2, 10],
// use the built-in fadeIn/fadeOut effect
effect: "fade",
// custom opacity setting
opacity: 0.7
});
got to this link http://jquerytools.org/demos/tooltip/form.html

Try this property it's asp but may work for your case
ErrorMessage="Your Message";

Hide and show dialogs using JavaScript

What I am trying to do is when you click on a button that has the class ".option" it will show the div that has the id "#dialog" and then it will add the class .active to the button clicked (there maybe more than one button that shows different dialogues later one) as well as adding the class ".noScroll" to the body. When the dialogue is shown it can be closed by clicking anywhere on the "#dialog" but NOT the ".dialogPage" which is the div that is inside the "#dialog" div. If the dialogue has been closed, the class that has been added to the body and to the button shall be removed.
Here is the button that need to be clicked to show the dialog:
<a class="option" href="edit_account.php">Your Account</a>
The following HTML represents the structure of my Dialog:
<div id="dialog">
<div id="dialogPage" class="dialogPage">
<p>Edit your account here</p>
</div>
</div>
Here is the related CSS:
body {
color: #4A4A4A;
background-color: #F7F7F7;
font-family: 'arial', sans-serif;
font-size: 0.95em;
line-height: 150%;
text-align: center;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: none;
-webkit-overflow-scrolling: touch;
overflow-y: auto;
overflow-x: hidden;
}
#dialog {
display: none;
background-color: rgba(25,30,37,0.95);
width: 100%;
position: fixed;
bottom:0; top: 0; left: 0; right: 0;
margin-top: 70px;
z-index: 900;
overflow-y: auto;
overflow-x: hidden;
}
.dialogPage {
background-color: #F7F7F7;
border: 2px solid #ffffff;
width: 900px; min-width: 900px;
padding: 20px;
margin: 50px auto;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-webkit-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.4);
box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.4);
}
.noScroll {
overflow-y: hidden;
overflow-x: hidden;
}
Here is the JavaScript I am currently using, but please do not built on it as it is wrong I am sure:
$(".option, #dialog").on('click', function() {
$("#dialog").toggle(29);
$("body").toggleClass("noScroll");
if (e.target.id != 'dialogPage' && !$('#dialogPage').find(e.target).length) {
$("#dialog").hide();
}
});

Try the following:
$('.option').click(function(e) {
e.preventDefault();
$('#dialog').show();
$('body').addClass('noScroll');
$(this).addClass('active');
return false;
});
$('#dialog').click(function(e) {
$(this).hide();
$('body').removeClass('noScroll');
$('.option').removeClass('active');
});
$('#dialogPage').click(function(e) {
e.stopPropagation();
});
I didn't see any use of the .active class in your current code, so that is just a guess.
Demo: http://jsfiddle.net/verashn/2Xh7d/