Need to make box relative to header HTML CSS? - javascript

I have a header and I need a small menu box below it, I'm trying to make sure I won't need to use top in css, and I can just add a line break in HTML. I have the following code for the header, the global_tools_menu is the menu I'm trying to add. For some reason, it starts from the top of the page? How would I make it start from just below the header? Here's the codeHTML:
<div class="global_header">
<b><p>ex</p></b>
<header>
<ul class="nav-bar">
<li class="nav-item global_tools" onclick="tools()"><a><img src="/ex/assets/tools.png" width="20px"/></a></li>
<?php
if(isset($_SESSION['id'])) {
echo '<li class="nav-item right-3826" onclick="redirect(`myaccount`);"><a>My Account</a></li>';
echo '<li class="nav-item right-3826" onclick="redirect(`scripts/logout.php`);"><a>Logout</a></li>';
}
if(!isset($_SESSION['id'])) {
echo '<li class="nav-item right-3826" onclick="redirect(`login`);"><a>Log in</a></li>';
echo '<li class="nav-item right-3826" onclick="redirect(`signup`)";><a>Sign Up</a></li>';
}
?>
<li class="nav-item" onclick="redirect('');"><a>Home</a></li>
<li class="nav-item" onclick="redirect('all');"><a>All</a></li>
<li class="nav-item" onclick="redirect('search');"><a>Search</a></li>
</ul>
</header>
</div><br>
<div id="global_tools_menu">
<div id="global_tools_true">
</div>
<div id="global_tools_false">
</div>
</div>
CSS:
.tools {
background-image: url('assets/tools.png');
}
a {
color: #009AFF;
text-decoration: none;
}
body {
font-family: 'PT-Sans', sans-serif;
}
.nav-bar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #009AFF;
height: 30px;
border: 1px solid;
}
.nav-item {
display: block;
color: #fff;
text-align: center;
padding: 6px 8px;
width: calc(2px + 13%);
text-decoration: none;
float: left;
border-right: 1px solid #000;
cursor: pointer;
background-color: #0050FF;
}
.nav-item a {
color: white;
}
.nav-item:hover {
background-color: #0039B5;
}
.right-3826 {
float: right;
border-right: 0px solid;
border-left: 1px solid #000;
}
input:focus {
outline: none;
}
.global_header p {
position: relative;
font-size: 70px;
cursor: pointer;
text-align: center;
margin-bottom: 20px;
vertical-align: middle;
top: -20px;
color: white;
}
.global_header {
background-color: #009AFF;
word-wrap: break-word;
position: absolute;
top: 0px;
width: 100%;
left: 0;
}
.global_tools {
background-color: white;
}
.global_tools:hover {
background-color: #EAEAEA;
}
#global_tools_menu {
position: relative;
width: 400px;
height: 700px;
background-color: #080808;
Here is a JSFiddle for that. I need to make that black box start from below the header?
https://jsfiddle.net/qypm88dm/

I don't know if this is the answer you were looking for but I would do this,
add
<div class="blank"></div>
just below
<div class="global_header">
...
</div>
so it would be
<div class="global_header">
...
</div>
<div class="blank"></div>
and css would be
.blank {
height: 190px;
width: 100%;
}
https://jsfiddle.net/qypm88dm/2/

Set the position of global_tools_menu to inline instead of absolute or relative because those are in reference to the top left of the page, which is why it is up at the top. If you set it to inline it will pop down right below your header.
Edit: My mistake, that will set it behind it, but if you do that and then give it margin-top: 200px that will get it below it. But that may not be the exact fix you want.

Related

Javascript menu on click

I have a div with an image and a hidden navbar inside it. When i click on the div i want it to show the hidden menu but for some reason it doesnt work. Ideally, i would like the navbar to slide out from the right but at the moment just want it to appear wehn I click the button.
The menu is hidden using display: none; and i tried to get it to reapper using the javascript .style but for some reason it will not work.
My Code
var menu = document.querySelectorAll(".navigation-mobile");
function onMenuClick() {
menu.style.display = "inline";
}
.navigation-mobile {
display: none;
list-style-type: none;
width: 300px;
overflow: hidden;
float: right;
position: relative;
z-index: 1;
background-color: #2a3b4d;
height: 100%;
top: -20px;
padding-left: 0;
}
.navigation-mobile a:hover {
text-decoration: none;
}
.nav-elements-mobile {
font-family: 'Lato', sans-serif;
font-size: 16px;
padding: 10px;
padding-left: 0;
padding-bottom: 20px;
padding-top: 20px;
border-bottom: 1px solid white;
padding-left: 10px;
}
a .nav-elements-mobile {
display: block;
color: #ffffff;
width: 300px;
}
a .nav-elements-mobile:hover {
background-color: #243342;
}
.mobile-nav-button {
display: none;
position: relative;
top: 15px;
right: 25px;
width: 35px;
height: 35px;
float: right;
}
#menu-icon {
width: 30px;
height: 30px;
}
.mobile-nav-button:hover {
cursor: pointer;
}
#media screen and (max-width: 1040px) {
.navigation {
display: none;
}
.mobile-nav-button {
display: inline;
}
}
<div class="mobile-nav-button" onclick="onMenuClick();">
<img id="menu-icon" src="Images/Home Page/MenuButton.png" />
<ul class="navigation-mobile">
<a href="">
<li class="nav-elements-mobile">Home</li>
</a>
<a href="">
<li class="nav-elements-mobile">Find a Team</li>
</a>
<a href="">
<li class="nav-elements-mobile">Contact Us</li>
</a>
<a href="">
<li class="nav-elements-mobile">Gallery</li>
</a>
<a href="">
<li class="nav-elements-mobile">Forms</li>
</a>
</ul>
</div>
document.querySelectorAll returns you node list of all the matching elements. And there is no any property of style on the node list. What you need is document.querySelector which will return you just the first matching node and you can apply style properties to hide, show or whatever.
Or you can use document.querySelectorAll(selector)[0] to get the first selector if you want
ps. If you want to add the sliding effect. It would be easy with jquery. Just replace the menue.style.display=block with $(".navigation-mobile").slideDown() and that should give you sliding affect
var menu = document.querySelector(".navigation-mobile");
function onMenuClick() {
menu.style.display = "block";
}
.navigation-mobile {
display: none;
list-style-type: none;
width: 300px;
overflow: hidden;
float: right;
position: relative;
z-index: 1;
background-color: #2a3b4d;
height: 300px;
top: -20px;
padding-left: 0;
}
.navigation-mobile a:hover {
text-decoration: none;
}
.nav-elements-mobile {
font-family: 'Lato', sans-serif;
font-size: 16px;
padding: 10px;
padding-left: 0;
padding-bottom: 20px;
padding-top: 20px;
border-bottom: 1px solid white;
padding-left: 10px;
}
a .nav-elements-mobile {
display: block;
color: #ffffff;
width: 300px;
}
a .nav-elements-mobile:hover {
background-color: #243342;
}
.mobile-nav-button {
display: none;
position: relative;
top: 15px;
right: 25px;
width: 35px;
height: 35px;
float: right;
}
#menu-icon {
width: 30px;
height: 30px;
}
.mobile-nav-button:hover {
cursor: pointer;
}
#media screen and (max-width: 1040px) {
.navigation {
display: none;
}
.mobile-nav-button {
display: inline;
}
}
<div class="mobile-nav-button" onclick="onMenuClick();">
<img id="menu-icon" src="Images/Home Page/MenuButton.png" />
<ul class="navigation-mobile">
<a href="">
<li class="nav-elements-mobile">Home</li>
</a>
<a href="">
<li class="nav-elements-mobile">Find a Team</li>
</a>
<a href="">
<li class="nav-elements-mobile">Contact Us</li>
</a>
<a href="">
<li class="nav-elements-mobile">Gallery</li>
</a>
<a href="">
<li class="nav-elements-mobile">Forms</li>
</a>
</ul>
</div>

Collapse only on Mobile View Bootstrap 3

On the desktop view the "ul .item-description" should be visible, but on the mobile view it should be collapsed. I did it but it seems to me that this is a terrible decision. How can I improve this? Also, the arrow does not work the first time. How to fix it? I tried to fix this with js, but when I refresh the page I see how the arrow is twitching.
Sorry, my english is very bad.
jsfiddle - http://jsfiddle.net/p6t3brob/13/
html
<div class="collapsed-item">
<div class="collapse-element-title visible-xs" data-toggle="collapse" data-target="#items">collapse-title
</div>
<ul class="item-description hidden-xs" id="items">
<li class="title">title-text</li>
<li>item-item-item......</li>
<li>item-item-item......</li>
<li>item-item-item......</li>
<li>item-item-item......</li>
</ul>
</div>
css
.collapsed-item {
display: block;
outline: 1px solid red;
margin-top: 20px;
padding: 10px;
}
.collapse-element-title {
display: block;
outline: 1px solid orange;
position: relative;
padding-top: 10px;
padding-bottom: 10px;
}
.collapse-element-title:after {
display: block;
position: absolute;
top: 15px;
right: 10px;
width: 10px;
height: 10px;
border: 2px solid red;
border-top: none;
border-left: none;
transform: rotate(225deg);
content: "";
}
.collapse-element-title.collapsed:after {
top: 10px;
transform: rotate(45deg);
}
ul li {
margin-bottom: 10px;
}
.collapse-element-title {
cursor: pointer;
}
.collapse-element-title {
margin-bottom: 20px;
}
#media(max-width: 767px) {
#items.in,
#items.collapsing {
display: block!important;
}
}
#media(min-width: 768px) {
#crownDesc.collapse {
display: block !important;
height: auto !important;
}
}
Try to do like this http://jsfiddle.net/p6t3brob/15/
<div class="collapsed-item">
<div class="collapse-element-title visible-xs collapsed" data-toggle="collapse" data-target="#items">collapse-title
</div>
<ul class="item-description hidden-xs collapse" id="items">
<li class="title">title-text</li>
<li>item-item-item......</li>
<li>item-item-item......</li>
<li>item-item-item......</li>
<li>item-item-item......</li>
</ul>
</div>

why cannot read property 'top' of undefined?

I have a web page with sticky navbar fixed top and structure of sticky navbar and my sticky navbar structure is
$(function() {
$(window).scroll(function() {
if ($(window).scrollTop() > $(".b").offset().top + $(".b").height() && $("input").val() == "") {
$(".sticky").show();
} else {
$(".sticky").hide();
}
});
});
.container {
width: 1020px;
margin: 0 auto;
}
.container>div {
width: 100%;
height: 300px;
background: #f0f0f0;
border: 1px solid #ccc;
margin: 100px 0;
}
.a:after {
content: "A";
font-size: 250px;
text-align: center;
line-height: 300px;
display: block;
color: #999;
}
.b:after {
content: "B";
font-size: 250px;
text-align: center;
line-height: 300px;
display: block;
color: #999;
}
.c:after {
content: "C";
font-size: 250px;
text-align: center;
line-height: 300px;
display: block;
color: #999;
}
ul.sticky {
list-style-type: none;
padding: 0;
margin: 0;
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #f0f0f0;
height: 50px;
border-bottom: 5px solid #ccc;
display: none;
}
ul.sticky:after,
ul.sticky:before {
content: "";
display: table;
clear: both;
}
ul.sticky li a {
display: block;
float: left;
line-height: 50px;
padding: 0 30px;
text-decoration: none;
color: #999;
}
ul.sticky li a:hover {
background: #999;
color: #f0f0f0;
}
<ul class="sticky">
<li>Home
</li>
<li>About Us
</li>
<li>Download
</li>
<li>Forums
</li>
<li>Contact
</li>
</ul>
<div class="container">
<input type="text" class="input">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
click to see on codepen
and my question is if I'm not putting my .sticky element another pages javascript notifier give me this error and I am not gonna put my .sticky element every page what do I have to do ?
click to see real demo
click to see getting error
You get this error beacause jQuery did not find the element .hotel-search-box in your website.
Javascript
$(function() {
$(window).scroll(function() {
if (!$(".hotel-search-box").length) {
return false; //Check if the element exist
}
if($(window).scrollTop() > $(".hotel-search-box").offset().top+$(".hotel-search-box").height() && $(".oda-giris-cikis").val() == ""){
$(".sticky-checkin").show();
}else{
$(".sticky-checkin").hide();
}
});
});
To fix your probleme add a .hotel-search-box element in your page where you want to show your sticky menu.

Toggling an element with JQuery makes part of the parent element dissapear

I'm trying to make a nav bar with jquery, fairly simple, clicking the nav icon brings up a menu on the side, however I need a sub-menu to appear after clicking one of the options, in this case the "equipment we sell" tab. I have no problem with that as I click the tab and it toggles the menu to being visible however, all of the tabs below it become invisible (I'm assuming they don't relocate to below the now visible element). Can someone explain to me why the tabs do not make room for the new list elements. Code below.
jscript
$('.icon-menu').click(function() {
$('.menu').animate({
right: '0px'
}, 200);
$('.equipsell').hide();
});
$('.menu-exit').click(function() {
$('.menu').animate({
right: '-285px'
}, 200);
$('.equipsell').hide();
});
$('.equipment').click(function() {
$('.equipsell').toggle();
});
HTML
<header>
<div class="menu">
<img src="img/menu-exit.png" class="menu-exit" alt="Exit Button">
<ul>
<li>Home</li>
<li>About</li>
<li class="equipment">Equipment We Sell</li>
<div class="equipsell">
<li>Audiometers by Inventis</li>
<li>Middle Ear Analyzers by Inventis</li>
<li>Delfino Video Otoscopes by Inventis</li>
<li>Daisy by Inventis</li>
<li>Trumpet REM by Inventis</li>
</div>
<li>Contact Us</li>
</ul>
</div>
<div class="main-menu">
<p>Test<br>Website</p>
<img src="img/bars.jpg" class="icon-menu" alt="Menu">
</div>
</header>
So when you click the equipment class/list item from above it lowers down the "menu" class but covers up the contact us list item.
EDIT
Forgot to include css.
CSS
/***** NAV *****/
header {
background-color: #093;
padding-bottom: 5px;
}
header p {
display: inline-block;
font-size: 1.35em;
margin: 10px 0 5px 15px;
font-weight: bold;
padding: 2px;
border: 3px solid black;
}
header a {
color: black;
}
.icon-menu {
width: 35px;
height: 35px;
float: right;
margin: 20px 15px 0 0;
display: inline-block;
}
.menu {
background: #00882B;
right: -285px;
height: 100%;
position: fixed;
width: 285px;
}
.menu-exit {
width: 35px;
height: 35px;
margin-left: 48%;
}
.menu ul {
border-top: 1px solid #636363;
list-style: none;
text-align: center;
margin: 0;
padding: 0;
}
.menu li {
border-bottom: 1px solid #636363;
font-family: 'Open Sans', sans-serif;
line-height: 45px;
padding-bottom: 3px;
padding-left: 20px;
padding-top: 3px;
color: #000000;
font-size: 15px;
font-weight: 800;
text-transform: uppercase;
}
.menu a {
color: #000000;
font-size: 15px;
font-weight: 800;
text-decoration: none;
text-transform: uppercase;
}
.active-menu{
position: absolute;
}
.equipsell{
width: 285px;
position: fixed;
}
.equipsell li {
margin: 0;
padding: 0;
line-height: 2.5;
background-color: #c90;
}
.equipsell a{
color: white;
padding: 0;
margin: 0;
}
.bottom-half li {
background-color: #00882B;
}
/***************/
Your class .equipsell is defining the position to be fixed, which causes is to be placed a layer above the other elements.
I guess the code to create the expected result would be:
.equipsell{
width: 285px;
}
JSFiddle updated: https://jsfiddle.net/rc8br5oe/
More about the CSS positions: http://www.w3schools.com/cssref/pr_class_position.asp

Header Button's text/font-weight changing unintentionally

I am making a header for a page, but from some point I noticed that the text-family is being changed when the dropdown menu was being launched(Safari 8). Then I tried to open it in Chrome, where it didn't changed when launching jQuery function. But when I tried to change the font, but it didn't make any difference. It did't changed the font at all. So even though I don't have specified the font for the header tabs, it's still formatted. Thanks in advance for help. I am sorry if it's just some manor mistake, I am quite new to this.
$(document).ready(function() {
$('.hdr-drpdwn-menu').hide();
$('.hdr-list-more').hover(
function() {
$(this).find('.hdr-drpdwn-menu').stop(true, true).slideDown('fast');
},
function() {
$(this).find('.hdr-drpdwn-menu').stop(true, true).slideUp('fast');
}
);
});
/* RESETTING ALL MARINGS, PADDING AND TEXT-DECORATIONS */
body {
margin: 0;
padding: 0;
}
ul, li, p, h1, h2, h3, h4, h5, button {
margin: 0;
padding: 0;
border: none;
background-color: transparent;
}
ul, li {
list-style: none;
}
a, a:active, a:visited {
text-decoration: none;
}
#header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 40px;
background-color: #5a5a5a;
font-style: normal;
}
#header .hdr-nav-opt {
float: left;
margin-left: 10px;
background-color: transparent;
}
#header .hdr-nav-soc {
float: right;
margin-right: 10px;
background-color: transparent;
}
.hdr-nav-list .hdr-list-tab{
display: inline;
background-color: transparent;
}
.hdr-nav-list .hdr-list-tab .hdr-button {
height: 40px;
color: #fff;
font-size: 20px;
text-align: center;
padding-left: 5px;
padding-right: 5px;
background-color: transparent;
}
.hdr-nav-list .hdr-list-tab .hdr-button:hover {
background-color: #7D7D7D;
}
.hdr-drpdwn-menu {
position: relative;
width: 120px;
margin-left: 40px;
background-color: #5a5a5a;
box-shadow: 2px 2px 10px #888888;
border: 1px solid #888888;
}
.hdr-drpdwn-menu .hdr-button {
width: 100%;
height: 40px;
color: #fff;
font-size: 20px;
text-align: center;
padding-left: 5px;
padding-right: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<!-- The Global Header of the website-->
<div id="header">
<!-- The Left part of the header-->
<div class="hdr-nav-opt">
<ul class="hdr-nav-list">
<li class="hdr-list-tab"><a class="hdr-list-link" href="?page=home"><button class="hdr-button">Home</button></a></li>|
<li class="hdr-list-tab hdr-list-more"><button class="hdr-button">More</button>
<!-- The Dropdown Menu-->
<div class="hdr-drpdwn-menu">
<ul class="hdr-drpdwn-list">
<li class="hdr-menu-tab"><a class="hdr-list-link" href="?page=about"><button class="hdr-button">About</button></a></li>
<li class="hdr-menu-tab"><a class="hdr-list-link" href="?page=help"><button class="hdr-button">Help</button></a></li>
<li class="hdr-menu-tab"><a class="hdr-list-link" href="?page=credits"><button class="hdr-button">Credits</button></a></li>
</ul>
</div>
</li>
</ul>
</div>
<!-- The Right part of the header-->
<div class="hdr-nav-soc">
<ul class="hdr-nav-list">
<li class="hdr-list-tab"><a class="hdr-list-link" href="#"><button class="hdr-button">Facebook</button></a></li>|
<li class="hdr-list-tab"><a class="hdr-list-link" href="#"><button class="hdr-button">Twitter</button></a></li>|
<li class="hdr-list-tab"><a class="hdr-list-link" href="#"><button class="hdr-button">Instagram</button></a></li>|
<li class="hdr-list-tab"><a class="hdr-list-link" href="#"><button class="hdr-button">Tumblr</button></a></li>
</ul>
</div>
</div>
I don't know which font you are using now, but maybe you need a callback in your styles
.hdr-drpdwn-menu .hdr-button {
width: 100%;
height: 40px;
color: #fff;
font-size: 20px;
font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;/*like this*/
text-align: center;
padding-left: 5px;
padding-right: 5px;
}
and it will works all the browsers.

Categories