Media query does not work on mobile devices - javascript

I am using Chrome and Window Resizer by ionut botizan v 1.9.1.2
I am using atom open source editor, although I initially created the page in phpstorm
My problem
I am able to click the window resize button and the page will resize upto ipad, when I try to resize mobile versions,
high end windows phone, iphone and low end windows phone
the browser window remains the size of the ipad coefficents 1024 x 768 and only some page elements will allow me to adjust its width, I can change other properties, i.e color,background etc. however the
width of header, banner and left_right_content,wont budge, adjust in size
this also cause the effect of being able to scroll to the right
I have tried other sites i have made and the plugin works fine, and I have also tested a live website, and that seems to work, theres is something in this code stopping resizing, maybe some one will notice where something I missed, any help welcome
<head>
<meta charset= "utf-8">
<meta name="descripton" content="kids at play"/>
<meta name= "keywords" content="kids, club, play, learn"/>
<meta name="robots" content=index,follow/>
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="initial-scale=1.0">
<base href="http://localhost/Kids Club/Kids_Club.html"/>
<link rel="stylesheet" href="Kids_Club.css" type="text/css"/>
<title>html_5</title>
</head>
<body>
<div id="wrapper">
<div id="header"><img id ="img_header" src="jpg/kids_club_header.jpg" alt="kids club"/>
</div>
<nav>
<ul>
<li>Home</li>
<li>Playgroups
<ul>
<li>Under Fives</li>
<li>Under Tens</li>
<li>The Teens
</ul>
</li>
<li>Play & Learn
<ul>
<li>Field Trips</li>
<li>Tutor Groups</li>
</ul>
</li>
<li>Contact Us</li>
</ul>
</nav>
<div id="banner"><img id ="img_banner" src="jpg/kids.jpg" alt="kids"/>
</div>
<div id="left_col_content">
<h2 class="top_title">Bring out the tiger in you</h2>
<h3 class="top_title">Activities for the Under Fives and Tens</h3>
<p>Is your little one sporty, and loves the challenge, then why not sign, him or her up for an afternoon of pure fun,
laughter and leisure at Bernie's tiger bar, where we work, rest and play all through out the day</p>
<img id ="left_column_img" src="jpg/tieger.jpg" alt="kids club"/>
more info
</div>
<div id="right_col_content">
<h2 class="top_title">Play and Learn</h2>
<h3 class="top_title" >Activities for all</h3>
<p>Life is all about balance, and as we spend time feeding our minds, it is also important that we make
time for play.Our aim is to make learning not only fun, but a foundation were we can build and grow.
</p>
<img id ="right_column_img" src="jpg/Where-Children-Learn-Play-and-Grow.jpg" alt="play and learn"/>
more info
</div>
<div id="newsflash">
<h2>Latest news</h2>
<p>Summer camp 2016 - The amazon, with a touch of carribean, Parents and siblings welcome, more info to come</p>
</div>
<div id="left_right_content"><h2 id="activity">What's On Today</h2>
<img id="jumeirah" src="jpg/jumeirah-beach.jpg" alt="jumeirah"/>
<img id="artandcraft" src="jpg/artandcraft.jpg" alt="artandcraft"/>
</div>
<div id="footer"></div>
</div>
</body>
</html>
body{
background-color: #024378;
}
#wrapper{
min-width:960px;
width: 75%;
margin-left: auto;
margin-right: auto;
background-color: #e3f1f2;
}
#header,#img_header{
min-width: 960px;
width:100%;
min-height:100px;
height:12.5%;
}
.top_title{
color: #009fc0;
}
nav{
min-width:640px;
width: 70%;
margin-left:auto;
margin-right:auto;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
background: #009fc0;
padding: 0 20px;
border-radius: 10px;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: #ffffff;
}
nav ul li:hover a {
color: #96a4a5;
}
nav ul li a {
display: block;
padding: 25px 40px;
color: #ffffff;
text-decoration: none;
font-weight: bold;
}
nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
nav ul ul li a {
padding: 15px 40px;
}
nav ul ul li a:hover {
background: #ffffff;
}
nav ul ul ul {
position: absolute; left: 100%; top:0;
}
nav ul ul {
background: #ffffff; border-radius: 0; padding: 0;
position: absolute; top: 100%;display:none;
}
/*images or divs that span across the page use margin left and right 'auto', divs that are smaller in size and form
columns within the page use set margins, i.e10px*/
#img_banner {
min-width:940px;
width: 100%;
height: 240px;
margin-left: auto;
margin-right: auto;
}
#banner{
min-width: 940px;
width: 73.4375%;
height: 240px;
margin-left: auto;
margin-right: auto;
}
#left_col_content{
float:left;
min-width: 420px;
width:32.8125%;
margin: 1%;
background-color: #ffffff;
color: #06acef;
text-indent:10px;
padding: 2%;
}
#right_col_content{
float:left;
min-width: 420px;
width:32.8125%;
margin: 1%;
background-color: #ffffff;
color: #06acef;
text-indent:10px;
padding: 2%;
}
#left_column_img, #right_column_img{
min-width: 200px;
width:15.625%;
min-height: 100px;
height:12.5%;
margin-left: auto;
margin-right: auto;
}
#newsflash{
clear:both;
min-width: 920px;
width:71.875%;
min-height:50px;
height:6.25%;
background-color: #009fc0;
margin-left: auto;
margin-right: auto;
color:#fff;
text-indent:10px;
padding: 1%;
}
#left_right_content{
min-width: 890px;
width: 69.53%;
margin: 10px auto;
height:300px;
background-color: #ffffff;
color: #06acef;
border: dashed #009fc0;
padding: 2%;
}
#activity {
border-bottom: dotted 3px #06acef;
}
#jumeirah{
clear: both;
float: left;
min-width:80px;
width: 47%;
padding: 10px;
}
#artandcraft{
clear: none;
float: right;
min-width:80px;
width: 47%;
padding: 10px;
}
#footer{
clear:both;
min-width: 940px;
width:73.4375%;
min-height:50px;
height:6.25%;
background-color: #009fc0;
margin:auto;
color:#fff;
text-indent:10px;
}
#media only screen and (min-width:0px) and (max-width:480px) {
/*low end windows phone*/
}
#media only screen and (min-width:481px) and (max-width:640px){
/*iphone*/
#header,#img_header{
width: 50%;
}
#left_col_content {
width: 58%;
}
#right_col_content{
clear: both;
width: 58%;
}
#newsflash{
width: 56%;
}
#left_right_content{
width: 58%;
}
}
#media only screen and (min-width:641px) and (max-width:768px) {
/*high windows phone*/
}
#media only screen and (min-width:769px) and (max-width:1024px) {
/*ipad*/
#left_col_content {
width: 94%;
}
#right_col_content{
width: 94%;
}
}


It's always helpful to place your code on http://jsfiddle.net to help us visualise.
I've copied your code to https://jsfiddle.net/uhds3eac/
The many min-widthproperties you're using should be wrapped in a media-query for only larger screen sizes :
#media screen and (min-width:920px){
#newsflash {
min-width: 920px;
}
}
It's often a good idea to start with mobile, then accomodate for larger screens with #media rules.
Note: This isn't the issue but you're missing a starting <html> tag


Your min-width statements look like the culprits, try removing them.
You'll still need to tinker with the width of some parts to make it look good, but as a rule try to only use percentage values, not px.
body {
background-color: #024378;
}
#wrapper {
width: 75%;
margin-left: auto;
margin-right: auto;
background-color: #e3f1f2;
}
#header,
#img_header {
width: 100%;
min-height: 100px;
height: 12.5%;
}
.top_title {
color: #009fc0;
}
nav {
width: 70%;
margin-left: auto;
margin-right: auto;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
background: #009fc0;
padding: 0 20px;
border-radius: 10px;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: "";
clear: both;
display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: #ffffff;
}
nav ul li:hover a {
color: #96a4a5;
}
nav ul li a {
display: block;
padding: 25px 40px;
color: #ffffff;
text-decoration: none;
font-weight: bold;
}
nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
nav ul ul li a {
padding: 15px 40px;
}
nav ul ul li a:hover {
background: #ffffff;
}
nav ul ul ul {
position: absolute;
left: 100%;
top: 0;
}
nav ul ul {
background: #ffffff;
border-radius: 0;
padding: 0;
position: absolute;
top: 100%;
display: none;
}
/*images or divs that span across the page use margin left and right 'auto', divs that are smaller in size and form
columns within the page use set margins, i.e10px*/
#img_banner {
width: 100%;
height: 240px;
margin-left: auto;
margin-right: auto;
}
#banner {
width: 73.4375%;
height: 240px;
margin-left: auto;
margin-right: auto;
}
#left_col_content {
float: left;
width: 32.8125%;
margin: 1%;
background-color: #ffffff;
color: #06acef;
text-indent: 10px;
padding: 2%;
}
#right_col_content {
float: left;
width: 32.8125%;
margin: 1%;
background-color: #ffffff;
color: #06acef;
text-indent: 10px;
padding: 2%;
}
#left_column_img,
#right_column_img {
width: 15.625%;
min-height: 100px;
height: 12.5%;
margin-left: auto;
margin-right: auto;
}
#newsflash {
clear: both;
width: 71.875%;
min-height: 50px;
height: 6.25%;
background-color: #009fc0;
margin-left: auto;
margin-right: auto;
color: #fff;
text-indent: 10px;
padding: 1%;
}
#left_right_content {
width: 69.53%;
margin: 10px auto;
height: 300px;
background-color: #ffffff;
color: #06acef;
border: dashed #009fc0;
padding: 2%;
}
#activity {
border-bottom: dotted 3px #06acef;
}
#jumeirah {
clear: both;
float: left;
width: 47%;
padding: 10px;
}
#artandcraft {
clear: none;
float: right;
width: 47%;
padding: 10px;
}
#footer {
clear: both;
width: 73.4375%;
min-height: 50px;
height: 6.25%;
background-color: #009fc0;
margin: auto;
color: #fff;
text-indent: 10px;
}
#media only screen and (min-width: 0px) and (max-width: 480px) {
/*low end windows phone*/
}
#media only screen and (min-width: 481px) and (max-width: 640px) {
/*iphone*/
#header,
#img_header {
width: 50%;
}
#left_col_content {
width: 58%;
}
#right_col_content {
clear: both;
width: 58%;
}
#newsflash {
width: 56%;
}
#left_right_content {
width: 58%;
}
}
#media only screen and (min-width: 641px) and (max-width: 768px) {
/*high windows phone*/
}
#media only screen and (min-width: 769px) and (max-width: 1024px) {
/*ipad*/
#left_col_content {
width: 94%;
}
#right_col_content {
width: 94%;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="descripton" content="kids at play" />
<meta name="keywords" content="kids, club, play, learn" />
<meta name="robots" content=index,follow/>
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="initial-scale=1.0">
<base href="http://localhost/Kids Club/Kids_Club.html" />
<link rel="stylesheet" href="Kids_Club.css" type="text/css" />
<title>html_5</title>
</head>
<body>
<div id="wrapper">
<div id="header">
<img id="img_header" src="jpg/kids_club_header.jpg" alt="kids club" />
</div>
<nav>
<ul>
<li>Home
</li>
<li>
Playgroups
<ul>
<li>Under Fives
</li>
<li>Under Tens
</li>
<li>The Teens
</ul>
</li>
<li>
Play & Learn
<ul>
<li>Field Trips
</li>
<li>Tutor Groups
</li>
</ul>
</li>
<li>Contact Us
</li>
</ul>
</nav>
<div id="banner">
<img id="img_banner" src="jpg/kids.jpg" alt="kids" />
</div>
<div id="left_col_content">
<h2 class="top_title">Bring out the tiger in you</h2>
<h3 class="top_title">Activities for the Under Fives and Tens</h3>
<p>Is your little one sporty, and loves the challenge, then why not sign, him or her up for an afternoon of pure fun, laughter and leisure at Bernie's tiger bar, where we work, rest and play all through out the day
</p>
<img id="left_column_img" src="jpg/tieger.jpg" alt="kids club" />
more info
</div>
<div id="right_col_content">
<h2 class="top_title">Play and Learn</h2>
<h3 class="top_title">Activities for all</h3>
<p>Life is all about balance, and as we spend time feeding our minds, it is also important that we make time for play.Our aim is to make learning not only fun, but a foundation were we can build and grow.
</p>
<img id="right_column_img" src="jpg/Where-Children-Learn-Play-and-Grow.jpg" alt="play and learn" />
more info
</div>
<div id="newsflash">
<h2>Latest news</h2>
<p>Summer camp 2016 - The amazon, with a touch of carribean, Parents and siblings welcome, more info to come</p>
</div>
<div id="left_right_content">
<h2 id="activity">What's On Today</h2>
<img id="jumeirah" src="jpg/jumeirah-beach.jpg" alt="jumeirah" />
<img id="artandcraft" src="jpg/artandcraft.jpg" alt="artandcraft" />
</div>
<div id="footer"></div>
</div>
</body>
</html>
Try researching Mobile First Design to learn more.

Related

Positioning A Header Below A Linear Gradient

Okay so I am learning HTML and CSS and I came across a little problem this afternoon.
I have tried so hard to fix this code for over 3 hours and it is still giving me the same output. So after the last div closing tag in the HTML document, I tried to make a header and a new h1 element but the problem is that, it appears in the purple like background in the gradient background which I don't want. I have tried several ways and means to fix the issue but I still end up with the same result.
`<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" >
<title>HomePage</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1">
<link rel="stylesheet" href="style.css" >
</head>
<body>
<div>
<nav>
<ul class="up-nav" id="dropdownClick">
<li>Home</li>
<li>Join Us</li>
<li>Sign In</li>
<li class="up-nav-right">Contact Us</li>
<li class="dropdownIcon">☰</li>
</ul>
</nav>
</div>
<div class="container" id="section-gradient">
<div class="row">
<div class="col-6">
<div>
<h1 class="big">Hi Sofie</h1>
<h1 class="big">Join Our Newsletter</h1>
</div>
<form>
<div>
<h2>First Name</h2>
<input class="inputfield" type="text" placeholder="First Name" name="First Name Here">
<h2>Email Address</h2>
<input class="inputfield" type="email" placeholder="Email Address" name="Email Address Here">
</div>
</form>
</div>
<div class="col-6">
<div class="rightSideCol">
<div class="videoEmbed">
<iframe width="560" height="315" src="https://www.youtube.com/embed/E6PTwrT5gFM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in- picture; web-share" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
<header>
<h1>Lorem Ipsum</h1>
</header>
<script>
function dropdownMenu() {
var x = document.getElementById("dropdownClick");
/*#####Change up-nav to up.nav.respond#####*/
if (x.className === "up-nav") {
x.className += " respond";
}
else {
x.className = "up-nav"
}
}
</script>
</body>
</html>
`
And this is the CSS for it
`/*############ Defaults ##############*/
nav, header, footer {
display: block;
}
body {
margin: 0;
line-height: 1;
}
.container {
width: 100%;
margin:auto;
padding-top: 5%;
padding-bottom: 5%;
}
#section-gradient {
background: linear-gradient(180deg,#7C4CCF 0%, #3F2B96 100%);
}
h1.big {
color: #fff;
font-size: 56px;
margin:0;
margin-left: 20px;
line-height: 75px;
}
input[type="text"] {
width: 200px;
min-width: 100px;
font-size: 25px;
padding: 5px;
margin-left: 20px;
border-radius: 7px;
}
input[type="email"] {
width: 400px;
font-size: 25px;
min-width: 200px;
padding: 5px;
margin-left: 20px;
border-radius: 7px;
}
form h2 {
color: #fff;
margin-left: 20px;
}
.row {
width: 100%;
display: flex;
flex-wrap: wrap;
align-items: center;
}
.row::after {
display: table;
clear: both;
content: "";
}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
/*############# Nav Bar Default ###############*/
nav {
width: 100%;
margin: 0;
}
/*############# Nav Bar Links Arrangement ##############*/
nav ul {
background-color: #eee;
overflow: hidden;
margin: 0;
padding: 0;
list-style: none;
}
/* Float this to the left*/
ul.up-nav li {
float: left;
}
/* Float this to the right*/
ul.up-nav li.up-nav-right {
float: right;
}
ul.up-nav li a {
display: block;
text-decoration: none;
min-height: 16px;
padding: 14px;
text-transform: uppercase;
text-align: center;
color: #666;
}
/*############## Hover Effect On Links In Top Nav#################*/
ul.up-nav li a:hover {
background-color: #7C4CCF;
color: #fff;
}
/*############ Making The Trigram Dissapear In Desktop Mode ###############*/
ul.up-nav li.dropdownIcon {
display: none;
}
/*########Making The Trigram Appear In Mobile Mode Using A Media Query#########*/
#media screen and (max-width:680px) {
ul.up-nav li:not(:nth-child(1)) {
display: none;
}
ul.up-nav li.dropdownIcon {
display: block;
float: right;
}
ul.up-nav.respond li.dropdownIcon {
position: absolute;
top: 0;
right: 0;
}
ul.up-nav.respond {
position: relative;
}
ul.up-nav.respond li {
display: inline;
float: none;
}
ul.up-nav.respond li a {
display: block;
text-align: left;
}
.col-6 {
margin: 30px;
}
input[type="text"] {
width: 350px;
}
input[type="text"] {
width: 400px;
}
.videoEmbed iframe {
position: relative;
width: 100%;
margin: 0;
overflow: hidden;
}
}`

You're missing a closing </div> tag before the opening <header> tag.
As a side note, you should only ever have one <h1> tag per page. It is your most important heading. Read up more on heading tags here.
<h1 class="big">Hi Sofie</h1>
<h1 class="big">Join Our Newsletter</h1>
Should become
<h1 class="big">Hi Sofie<br> Join Our Newsletter</h1>

Incorrect work of the desktop and adaptive menu when hovering and clicking

I want to make an adaptive menu. The problem now is that in the desktop version, when you click on a menu item and its sub-items, it closes, and should only work while I am hovering over it. And in the mobile version with an adaptive less than 520px, it also closes when you click on a sub-menu item, and this is bad.
I need hover to work only in desktop version. Also I need a menu to not get closed after the click on the sub-items.
That also goes for mobile version.
$('.drop__down-menu').on('click', function(){
$(this).children('.drop__down-list').slideToggle();
});
.header__menu-inner {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
min-height: 80px;
}
.menu__header {
max-width: 750px;
}
.menu__header li {
display: inline-block;
}
.menu__header li + li {
margin-left: 30px;
}
.menu__header a {
font-size: 15px;
line-height: 42px;
text-transform: uppercase;
font-weight: 500;
color: #333;
}
.menu__header a:hover {
color: blue;
}
.drop__down-menu {
position: relative;
padding-bottom: 20px;
margin-top: 20px;
}
.drop__down-list {
display: none;
position: absolute;
top: 61px;
left: 0;
width: 270px;
background-color: #fff;
padding: 20px;
border-top: 1px solid blue;
color: #fff;
font-size: 15px;
box-shadow: 0px 5px 40px 0px rgba(82, 85, 90, 0.2);
border-top: 1px solid blue;
z-index: 2;
}
.drop__down-list li {
width: 100%;
}
.drop__down-list li + li {
margin-left: 0;
}
.drop__down-list li a {
display: block;
line-height: 44px;
padding: 0 10px;
text-transform: capitalize;
}
.drop__down-list li a:hover {
color: #fff;
background-color: blue;
}
.drop__down-menu:hover .drop__down-list {
display: block;
}
#media (max-width: 520px) {
.header__user-nav + .header__user-nav {
margin-left: 5px;
}
.menu__header {
margin-left: auto;
}
.menu__header a {
line-height: 30px;
}
.menu__header-btn {
width: 30px;
}
.menu__header-btn span {
height: 4px;
}
.menu__header-btn span + span {
margin-top: 3px;
}
.menu__header-list {
left: 0;
top: 56px;
}
.menu__header-list li {
display: block;
border-bottom: 1px solid #0c0c0c;
}
.menu__header-list li a {
display: block;
}
.menu__header li + li {
margin-left: 0;
}
.drop__down-list {
width: 100%;
}
.header__menu-inner {
min-height: 55px;
}
.drop__down-list {
padding: 0 12px;
top: 40px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="wrap">
<div class="content">
<header class="header">
<div class="header__menu-inner">
<nav class="menu__header">
<div class="menu__header-btn">
<span></span>
<span></span>
<span></span>
</div>
<ul class="menu__header-list">
<li class="drop__down-menu">
Home
<ul class="drop__down-list">
<li>Home One Multi User</li>
<li>Home Two Single User</li>
<li>Home Three Product</li>
</ul>
</li>
<li class="drop__down-menu">
All products
<ul class="drop__down-list">
<li>Recent Items</li>
<li>Popular Items</li>
<li>Featured Items</li>
</ul>
</li>
<li class="drop__down-menu">
Wordpress
<ul class="drop__down-list">
<li>Popular Items</li>
<li>Admin Templates</li>
<li>Blog / Magazine / News</li>
</ul>
</li>
<li>Festures</li>
<li class="drop__down-menu link__mega-menu">
<a class="drop__down-link" href="#">Pages</a>
</li>
</ul>
</nav>
</div>
</header>
</div>
</div>
<!--Plugin JavaScript file-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="main.js"></script>
</body>
</html>

I hope this answer helps you!
#media (min-width: 520px){
.drop__down-menu:hover .drop__down-list {
display: block;
}
I think you should adapt CSS style for mobile first.
then add #media (min-width: x) for large devices not inversely

JavaScript addEventListener

He Stackoverflow,
Question is simple,
If the window size is smaller than width 960px i can click a menu button.
When i click it the nav height will be 325px instead of 60px and thats what i wanted to happen. It works but, you only can see the result if you click the button for the second time. Can someone explain why this happens?
// GET DOM
var getdom = (function(){
var DOMstrings = {
menuBtn: '#menu',
navToggle: 'nav',
}
return {
getDOMstrings: function(){
return {
menu: document.querySelector(DOMstrings.menuBtn),
nav: document.querySelector(DOMstrings.navToggle),
}
}
}
})();
// Global Controllor
var global = (function(dom){
var get = dom.getDOMstrings();
function start(){
// MENU NAV HEIGHT
get.menu.addEventListener('click', function(){
console.log('click!');
if(get.nav.style.height === '60px'){
get.nav.style.height = '325px';
}else {
get.nav.style.height = '60px';
}
});
}
return {
init: function(){
start();
}
}
})(getdom);
global.init();
html, body {
margin: 0;
padding: 0;
}
#header {
width: 100%;
height: 150px;
background-color: gray;
}
nav {
width: 100%;
height: 60px;
text-align: center;
font-family: 'Open Sans', sans-serif;
overflow: hidden;
transition: all 1s;
}
#brand {
position: absolute;
font-size: 32px;
left: 10px;
top: 8px;
}
#menu {
position: absolute;
left: 140px;
top: 20px;
display: none;
cursor: pointer;
}
nav ul {
list-style-type: none;
padding-top: 15px;
}
nav ul li {
display: inline;
font-size: 22px;
}
nav ul li a {
text-decoration: none;
color: darkslategray;
border-right: 1px solid black;
padding: 10px 11px;
transition: all 0.5s;
}
.nav-link:hover {
font-size: 24px;
}
#dropdown {
padding-left: 10px;
cursor: pointer;
transition: all 0.5s;
}
#media screen and (max-width: 965px) {
nav {
height: 325px;
}
}
#media screen and (max-width: 960px) {
nav ul li {
display: block;
border-bottom: 1px solid black;
padding-bottom: 10px;
padding-top: 10px;
margin-left: -10%;
}
.margintop {
margin-top: 50px;
}
nav ul li a {
border-right: 0px;
padding: 0px;
}
#dropdown {
padding-left: 0px;
}
}
#media screen and (max-width: 959px){
nav {
height: 60px;
}
#menu {
display: block;
}
}
<html>
<head>
<link rel="stylesheet" href="style.css">
<title>Website</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="stylesheet" href="bootstrap.min.css">
</head>
<nav>
<div id="brand">BRAND</div>
<div id="menu">MENU</div>
<ul>
<li class="margintop">Home</li>
<li><a href="#" class='nav-link'>About us</a></li>
<li><a href="#" class='nav-link'>Services</a></li>
<li><a href="#" class='nav-link'>Contact</a></li>
<li id="dropdown" class='nav-link'>More</li>
</ul>
</nav>
<header id="header">
</header>
<script src="app.js"></script>
</html>

You need to use get.nav.getBoundingClientRect().height to get the initial height value.
So in this case you can compare "real" value with your points (325 or 60).
As #squint mentioned in comments, you can't rely on style's height property. Try to go with getBoundingClientRect (MDN) instead.

I can't get my content to overlay background image

Here's my html and css code. My strategy seemed to work well with the 1st background image, but when I got to the 2nd background image, it no longer worked. I created a stage outside the main content area set the position to relative then a wrapper to include my 2 backgrounds with their position to absolute so I can manually position it. However, once I get to the benefits-section div, it acts like this part is no longer contained in the content-wrapper div. Can anyone spot my problem? I also included an image of what the the website actually looks like completed.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Garcinia Cambogia</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<div class="stage">
<div class="bg-wrapper">
<img src='img/flower-background.jpg' id="bg" atl="flower background">
<img src="img/middle-background.jpg" id="bg2" alt="benefits-section background">
</div>
<div class="content-wrapper">
<nav>
<h1>Produce</h1>
<ul>
<li>Home</li>
<li>About the Product</li>
<li>Benefits</li>
<li>Testimonals</li>
<li>Buy</li>
<li>Contact</li>
<li>Blog</li>
</ul>
</nav>
<div class="copy">
<h2>Increase your <br> energy level with <br> <span>Garcinia Cambogia</span></h2>
<img src="img/product.png" alt="Main Product">
<div class="opt-in">
<h2>Try it Out</h2>
<form>
<input type="text" value="Your Name*">
<input type="text" value="Your Email*">
</form>
<div class="order-btn">
<h2>Order Now</h2>
</div>
</div><!-- end of opt-in -->
</div><!-- end of copy -->
<div class="promo-section">
<h1> About Garcinia Cambogia </h1>
<h2> Reduce food intake and promote <span>weight loss fast</span>!</h2>
<p>Effective thermogenic supplements are those that contain key ingredients that create a fat burning 'thermogenic'
environment by working together and in synergy. Some of these ingredients also aid
in reducing appetite and spiking an increase in short-term energy. Dosage of Garcinia cambogia, beginning
from 750 mg to 1,500 mg, takes 2-3 times in individual dose before meals.
</p>
<h2> Other <span>Related</span> Products</h2>
<ul>
<div class="hover08">
<div class="img-wrapper">
<li><img src="img/Rasberry-product.png" alt="Rasberry Product"><a class="search" id="search1" href="#"><img src="img/search-icon.png" alt="search"></a></li>
</div>
<div class="img-wrapper">
<li><img src="img/Garcinia-Cambogia.png" alt="Garcinia"><a class="search" id="search2" href="#"><img src="img/search-icon.png" alt="search"></a></li>
</div>
<div class="img-wrapper">
<li id="mango-ketone"><img src="img/Mango-Ketone.png" alt="Mango Product"><a class="search" id="search3" href="#"><img src="img/search-icon.png" alt="search"></a></li>
</div>
</ul>
</div><!-- end of hover08 -->
</div><!-- end of promo-section -->
<div class="benefits-section clear">
<h1> What are the benefits </h1>
<h2> Obesity is an imbalance between fat intake and energy expenditure.
Now day obesity is a problem of health and mind in many people.</h2>
<p>The rush hours working lifestyle make many people take junk food and fast food more than nutritionists.
The important factor is Generic, it is found that one obese patient has a 40% chance of obesity and both
obese patients have 80% chance of obesity. The chronic diseases that are developed from obesity are
diabetes, high blood pressure, stroke, heart attack, cancer, gout and sleep apnea. So control the weight
is the best way to void health problem.
Control the body weight helps you against the chronic diseases and make good looking. There are many
ways to reduce and control the weight. Using weight control products is not the best way, especially use
potential dangerous diet products without consult from the doctors or the pharmacists. Balance the energy
expenditure and fat intake is an important point. If you eat more you have to exercise more. Other ways
are break bad habits such as alcohol intake, watching T.V. during eating, or ignore vegetables. You have
to realize how much the fat in each menu and should the low cholesterol with high nutrition.</p>
</div>
</div><!-- end of content-wrapper -->
</div><!-- end of stage -->
<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
</body>
</html>
#font-face { font-family: 'Lucida Sans Demibold Roman'; src: url('../fonts/Lucida Sans Demibold Roman.ttf'); }
#font-face { font-family: 'Arizonia-Regular'; src: url('../fonts/Arizonia-Regular.ttf'); }.stage { position: relative; max-height: 100%; max-width: 100%; }
.content-wrapper { width: 960px; margin: 0 auto; position: relative; z-index: 2; }
.bg-wrapper { position: absolute; z-index: 1; left: 0; top: 0; min-width: 100% }
#bg { position: relative; top: 0; left:0; min-width: 100%; max-height: 760px; }
#bg2 { position: relative; top: 500px; left: 0; min-width: 100%; max-height: 702px; }
nav h1 { font-size: 69px; font-family: 'Arizonia-Regular'; letter-spacing: 0; text-align: center; color: #e0bd67; margin-bottom: 15px; margin-top: 15px; }
nav ul { list-style-type: none; padding: 0; margin: 0; background-color: #c29f4d; box-shadow: 5px 5px 1px #808279; height: 50px; width: 100%; float: left; margin-bottom: 95px; }
nav ul li { display: inline; padding-right: 40px; padding: 16px 40px 16px 0; margin-top: 0; float: left;}
nav li:first-child { padding-left: 113.04px; }
nav li:last-child { padding-right: 113.04px; }
nav a { text-decoration: none; color: #fff; font-family: 'Lucida Sans Demibold Roman'; font-size: 16px; }
.copy { float: left; }
.copy h2 { font-family: 'Open Sans'; font-size: 34px; color: #fff; font-weight: bold; float: right; text-transform: uppercase; line-height: 34px; margin-bottom: 35px; margin-top: 0;}
.copy img { float: left; margin-top: 55px; }
.copy span { color: #ffd062; }
.opt-in { background-color: #d1aa50; width: 378px; height: 299px; float: right; margin-bottom: 78px; }
.opt-in h2 {float: left; width: 301px; text-align: center; margin: 15px 38.5px; padding-bottom: 20px; border-bottom: 2px solid #fff; }
.opt-in input { width: 296px; height: 40px; background-color: #ecdcb7; margin: 7px 38.5px; padding-left: 5px; }
.order-btn h2 { border-bottom: none; }
.promo-section { float: left; }
.promo-section h1 { font-family: 'Open Sans'; font-size: 36px; text-transform: uppercase; color: #c29f4d; text-align: center; border-bottom: 2px solid #c29f4d; width: 795px; margin: 90px 82.5px 30px 82.5px; padding-bottom: 5px; }
.promo-section h2 { text-align: center; font-size: 26px; color: #8e8e8e; }
.promo-section h2 span { color: #c29f4d; }
.promo-section p { text-align: center; color: #8e8e8e; font-family: 'Open Sans'; font-size: 16px; }
.promo-section ul { list-style-type: none; margin-top: 30px; padding: 0; }
.promo-section ul div li { display: inline; float: left; margin-right: 109.5px }
#mango-ketone { margin-right: 0;}
.img-wrapper { position: relative; float: left; }
.hover08 li img { -webkit-filter: grayscale(100%); filter: grayscale(100%); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; }
.hover08 li:hover img { -webkit-filter: grayscale(0); filter: grayscale(0); }
.hover08 a.search { position: absolute; top: 0px; right: 0px; opacity: 0; background-color: transparent; filter: alpha(opacity=0); -webkit-transition: .3s ease-in-out; transition: .3s ease-in-out; }
#search1 { top:71px; right: 200px;}
#search2 { top: 92px; right: 190px; }
#search3 { top: 67px; right: 100px; }
.hover08 li:hover a.search { opacity: 1; -webkit-transition-delay: .2s; transition-delay: .2s;}
.benefits-section { margin-top: 30px; float: left; }
.benefits-section h1 { color: #fff;}
.clear { clear: both; }

jQuery UI Dialog Scroll Bar + Overlay Settings Won't Unload

Recently, my friend helped me fix a background overlay problem. I had an issue where if the dialog height extended beyond the original website background, it would cut off the overlay right in the middle. His fix solved it.
But now I have a minor but annoying problem. Every time I open a very long dialog, then a short one, the stretched scroll bars from the longer remains. Like when I open the short afterwards, I can scroll down way beyond the background like with the longer, but I can only see the overlay. I don’t think the settings are unloading properly once the dialog is closed.
Is there a way around this? Thank you.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/global.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="Meta" -->
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="doctitle" -->
<title>Ricky Tsang | Book | Bonus Features</title>
<!-- InstanceEndEditable -->
<link href="../../css/default.css" type="text/css" rel="stylesheet" />
<link href="../../css/plugins/jquery.jscrollpane.css" type="text/css" rel="stylesheet" />
<link href="../../css/plugins/custom-theme/jquery-ui-1.8.12.custom.css" type="text/css" rel="stylesheet" />
<link rel="shortcut icon" type="image/x-icon" href="http://www.dearricky.com/_rickytsang-ca/favicon.ico">
<!--[if IE 7]>
<link href="../css/ie7.css" type="text/css" rel="stylesheet" />
<![endif]-->
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
<style>
a img {
border:0
}
</style>
<noscript>
<style>
#header #inner { width: 820px; }
#mainmenu { visibility: visible; }
</style>
</noscript>
</head>
<body class="oneColElsCtrHdr">
<div id="header">
<div id="top">
<img src="../../images/logo.png" border="0" usemap="#Map" class="Logo" />
<map name="Map" id="Map">
<area shape="circle" coords="85,11,3" href="../../bird/" />
</map>
</div>
<div id="inner">
<div id="mainmenu">
<ul>
<li>
HOME
</li>
<li>
RICKY
<div class="sub">
<ul>
<li>About Ricky</li>
<li>Disability</li>
<li>Writing</li>
<li>Questions & Answers</li>
</ul>
<div class="clear"></div>
</div>
</li>
<li>
JOURNAL
</li>
<li>
ADVICE
<div class="sub">
<ul>
<li>4 Steps To Mending A Broken Heart</li>
</ul>
<div class="clear"></div>
</div>
</li>
<li>
BOOK
<div class="sub">
<ul>
<li>Ridiculous</li>
<li>Excerpts</li>
<li>Bonus Features</li>
<li>Where To Buy</li>
</ul>
<div class="clear"></div>
</div>
</li>
<li>
MUSIC
</li>
<li>
FORUM
</li>
<li>
INFORMATION
<div class="sub">
<ul>
<li>News</li>
<li>Contact</li>
<li>Links</li>
<li>Website</li>
</ul>
<div class="clear"></div>
</div>
</li>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
<div id="container">
<!-- InstanceBeginEditable name="AboveContainer" -->
<!-- InstanceEndEditable -->
<div id="topContent"></div>
<div id="mainContent">
<!-- InstanceBeginEditable name="MainContent" -->
<div id="fixedHeightContent">
<h1 align="justify">Bonus Features</h1>
<p><strong><em>Ridiculous: The Mindful Nonsense of Ricky’s Brain</em> is jam-packed with hundreds of pages of writing, but there are always limitations when it comes to books.  Below are some extras that readers may find entertaining, kind of like a DVD!</strong></p>
<h2><strong><u>From The Book (with excerpts)</u></strong></h2>
<p><strong>The Girl Who Saved My Life</strong><br />
A true story about an amazing girl who stole my heart.  Includes a photo and video of interesting items.</p>
<p><strong>Ricky’s Adventures In Bikini Land</strong><br />
A satirical recount of my “adventures” in Niagara Falls.  Includes a window scene photo from the room where my family and I stayed.</p>
<p><strong>The Brain Behind His Words</strong><br />
A brutally honest narrative of the things that go on inside my head.  Includes a full-size photo of myself that was an inspiration for the piece.</p>
<p><strong>Ricky’s Moments Of WTF?!</strong><br />
About the stranger happenings in the life of yours truly.  Includes a few photos of… embarrassing things.</p>
<p><strong>Appreciating Mothers: The How-To Guide</strong><br />
A comical yet hopefully endearing guide on how to appreciate mothers.  Includes a poem I wrote about the uterus.</p>
<h2><strong><u>Pages That Didn’t Make It</u></strong>
</h2>
<p><strong>Ricky’s Romantic Analogies</strong><br />
No matter how much I edited this entry, it continued to remain… corny.  Though, it did become a pivotal part of the romantic ideas for my following writings.</p>
<p><strong>Monkey See, Monkey Do</strong><br />
This one seemed a little out of place for the book, despite the title.  It also had too many photos that only look good in colour.</p>
</div>
<!-- InstanceEndEditable -->
</div>
<div id="bottomContent"></div>
</div>
<div id="footer">
<div class="social">
<ul>
<li><img src="../../images/icons/facebook.png" /></li>
<li><img src="../../images/icons/twitter.png" /></li>
</ul>
</div>
<div class="copyright">
Copyright © 2011 Ricky Wai Kit Tsang. All rights reserved.
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="../../scripts/global.js"></script>
<script type="text/javascript" src="../../scripts/plugins/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="../../scripts/plugins/jquery-ui-1.8.12.custom.min.js"></script>
<script type="text/javascript" src="../../scripts/plugins/jquery.hoverIntent.js"></script>
<script type="text/javascript" src="../../scripts/plugins/jquery.mousewheel.js"></script>
<script type="text/javascript" src="../../scripts/plugins/jquery.jscrollpane.js"></script>
<script type="text/javascript">
$(function() {
$("#fixedHeightContent").jScrollPane({
showArrows: true
});
});
</script>
<!-- InstanceBeginEditable name="Scripts" -->
<!-- InstanceEndEditable -->
</body>
<!-- InstanceEnd --></html>
CSS:
body {
background: url("../images/backgrounds/glowing-clouds.jpg") no-repeat scroll center 130px #000;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 12px;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
h1 {
color: #000;
margin-bottom: 20px;
margin-top: 0px;
}
h2 {
color: #000;
font-size: 16px;
}
p {
font-size: 14px;
line-height: 18px;
margin-bottom: 10px;
margin-top: 0px;
}
.clear {
clear: both;
}
#container {
width: 880px;
margin: 20px auto 0px auto;
text-align: left;
}
#topContent {
background-image: url("../images/backgrounds/slider-top.png");
background-repeat: no-repeat;
height: 15px;
margin-top: 40px;
width: 880px;
}
#mainContent {
background: transparent url("../images/backgrounds/slider-body.png") repeat-y scroll 0 0;
hasLayout: false;
padding: 1px 15px;
width: 850px;
}
#fixedHeightContent {
height: 440px;
outline: none;
overflow: auto;
padding: 20px;
width: 810px;
}
#bottomContent {
background-image: url("../images/backgrounds/slider-bottom.png");
background-repeat: no-repeat;
height: 15px;
width: 880px;
}
#floatContent {
overflow: hidden} /**clears floats**/
.RightCaptions {/** container **/
float: right;
width: auto;
height:auto;
border: thin silver solid;
margin: 0.5em;
padding: 0.5em;
}
.LeftCaptions {/** container **/
float: left;
width: auto;
height:auto;
border: thin silver solid;
margin: 0.5em;
padding: 0.5em;
}
.RightCaptions p, .LeftCaptions p {/** text captions **/
text-align: center;
font-style: italic;
font-size: small;
text-indent: 0;
}
#header {
margin: 0px 0px 10px;
position: relative;
}
#header #top {
background-color: #000;
margin: 0px auto;
}
#header #inner {
margin: 0px auto;
width: 820px;
}
#header img.Logo {
padding: 25px 0px 20px 0px;
position: relative;
}
#mainmenu {
float: right;
}
#mainmenu ul {
list-style: none;
margin: 0px;
padding: 0px;
}
#mainmenu ul li {
display: block;
float: left;
}
#mainmenu ul li a {
color: #fff;
display: block;
font-size: 14px;
font-weight: bold;
height: 35px;
line-height: 35px;
padding: 0px 15px;
}
#mainmenu ul li a:hover {
color: #999;
text-decoration: none;
}
#mainmenu ul li a.parent {
background: transparent url("../images/menu/menu-down.png") no-repeat center right;
margin-right: 15px;
}
#mainmenu .sub {
border: solid 1px #fff;
display: none;
position: absolute;
z-index: 1000;
}
#mainmenu .sub ul {
margin: 0px;
}
#mainmenu .sub li {
border: none;
display: block;
float: left;
height: auto;
padding: 0px;
width: auto;
}
#mainmenu .sub a {
color: #fff;
display: block;
font-size: 12px;
height: auto;
line-height: 16px;
padding: 5px 8px 7px;
text-align: left;
}
#mainmenu .sub a:hover {
background-image: none;
}
#footer {
margin: 0px auto;
padding-bottom: 60px;
width: 850px;
position: relative;
text-align: center;
}
#footer .social {
position: absolute;
top: 0;
left: 10px;
}
#footer .social ul {
list-style: none;
margin: 10px 0px 0px;
padding: 0px;
}
#footer .social li {
float: left;
margin-right: 5px;
}
#footer .social img {
border: 0px;
}
#footer .copyright {
color: #fff;
line-height: 32px;
margin-top: 10px;
}
/*******************************
* Controls
******************************/
.ImageRotator {
overflow: hidden;
position: relative;
width: 850px;
}
.ImageRotator ul {
list-style-type: none;
margin: 0px;
padding: 0px;
width: 9999px;
}
.ImageRotator ul li {
display: block;
float: left;
height: 440px;
width: 850px;
overflow: hidden;
}
.ImageRotator ul li img.gallery {
border: 0px;
height: 630px;
width: 850px;
}
.ImageRotator .toolbar {
background: url("../images/backgrounds/slider-toolbar.png") repeat scroll 0 0 transparent;
bottom: 0px;
color: #fff;
height: 36px;
left: 0px;
position: absolute;
width: 850px;
z-index: 100;
}
.ImageRotator .toolbar .desc {
font-weight: bold;
margin: 10px;
text-align: center;
}
.ImageRotator .toolbar .pages {
margin: 5px;
position: absolute;
right: 0px;
}
.ImageRotator .toolbar .pages div {
background: url("../images/backgrounds/page.png") repeat scroll 0 0 transparent;
color: #999;
cursor: pointer;
float: left;
font-weight: bold;
height: 22px;
padding-top: 6px;
text-align: center;
width: 28px;
}
.ImageRotator .toolbar .pages div.Active {
color: #0f75a7;
}
/*******************************
* Pages
******************************/
.popupDialog {
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 12px;
}
Script:
<script type="text/javascript">
function openDialog(url) {
$("<div class='popupDialog'>Loading...</div>")
.dialog({
autoOpen: false,
closeOnEscape: true,
width: '900',
height: 'auto',
modal: true,
title: 'Bonus Features',
autoResize: true,
beforeClose: function(){ $(this).remove(); }
}).bind('dialogclose', function() {
jdialog.dialog('destroy');
}).load(url, function() {
$(this).dialog("option", "position", ['center', 'center'] ).bind('dialogopen', function() {
adjustJQueryDialogOverlay();
});
$(this).dialog("open");
});
}
$(window).resize(function() {
$(".ui-dialog-content").dialog("option", "position", ['center', 'center']);
});
</script>

Well, you're not supposed to be required to do this, but when I ran into this same sort of problem, the easiest/quickest fix I found was to call the dialog's destroy method before I create a new one. So you'd try something like this:
$(".ui-dialog-content").dialog("destroy");
This goes immediately before the area in your script in which you set up the new dialog.
HTH.
Edit: As requested:
<script>
function openDialog(url) {
$("<div class='popupDialog'>Loading...</div>").dialog("destroy");
$("<div class='popupDialog'>Loading...</div>")
.dialog({
autoOpen: false,
closeOnEscape: true,
width: '900',
height: 'auto',
modal: true,
title: 'Bonus Features',
autoResize: true,
beforeClose: function(){ $(this).remove(); }
}).bind('dialogclose', function() {
jdialog.dialog('destroy');
}).load(url, function() {
$(this).dialog("option", "position", ['center', 'center'] ).bind('dialogopen', function() {
adjustJQueryDialogOverlay();
});
$(this).dialog("open");
});
}
$(window).resize(function() {
$(".ui-dialog-content").dialog("destroy");
$(".ui-dialog-content").dialog("option", "position", ['center', 'center']);
});
</script>
Should only need to update the script part.

So here is the answer from my friend.
Basically, the overlay is a jQuery bug and I had to search around for a workaround as my resize method which you discovered had a little flaw :P So what you can do is change the openDialog method line to (we won't call adjustJQueryDialogOverlay method):
$(this).dialog("option", "position", ['center', 'center'] );
$(this).dialog("open");
And you also need to update the jquery-ui-1.8.11.custom.css line 41. Change the position from absolute to fixed and hopefully this will solve the background issue!
function openDialog(url) {
$("<div class='popupDialog'>Loading...</div>")
.dialog({
autoOpen: false,
closeOnEscape: true,
width: '900',
height: 'auto',
modal: true,
title: 'Bonus Features',
beforeClose: function(){ $(this).remove(); }
}).bind('dialogclose', function() {
jdialog.dialog('destroy');
}).load(url, function() {
$(this).dialog("option", "position", ['center', 'center'] );
$(this).dialog("open");
});
}
$(window).resize(function() {
$(".ui-dialog-content").dialog("option", "position", ['center', 'center']);
});

Categories

Resources