Content expanding beyond div but no scroll bar

Content expanding beyond div but no scroll bar - javascript

I'm using JQuery to load the contents of a text file into a div however when the content goes beyond the div no scroll bar appears.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<title></title>
<link rel="stylesheet" type="text/css" href="CSS/common.css">
<script src="JS/common.js"></script>
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
</head>
<body>
<nav>
<ul id="tabs">
<li>Home</li>
<li>History</li>
<li>The Circuit</li>
<li>Gallery</li>
<li>Further Reading</li>
</ul>
</nav>
<div id="content">
<div id="tabContent1"></div>
<div id="tabContent2"></div>
<div id="tabContent3"></div>
<div id="tabContent4"></div>
<div id="tabContent5"></div>
</div>
</body>
</html>
CSS:
body {
background-color: #EEEEEE;
font-family: Arial,Helvetica;
font-size: small;
height: 100%;
margin: 100px auto 0;
width: 100%;
}
#tabs {
list-style: none outside none;
margin: 0;
overflow: hidden;
padding: 0;
position: relative;
top: -98px;
width: 100%;
}
#tabs li {
float: left;
margin: 0 -15px 0 0;
}
#tabs a {
border-bottom: 30px solid #3D3D3D;
border-right: 30px solid transparent;
color: #FFFFFF;
float: left;
height: 0;
line-height: 30px;
opacity: 0.3;
padding: 0 40px;
position: relative;
text-decoration: none;
text-transform: uppercase;
}
#tabs a:hover {
border-bottom-color: #2AC7E1;
opacity: 1;
}
#content {
background: none repeat scroll 0 0 #FFFFFF;
border-top: 2px solid #3D3D3D;
height: 100%;
padding: 2em;
position: fixed;
top: 30px;
width: 98%;
overflow: auto;
}
.activeTab {
border-bottom-color: #3D3D3D !important;
opacity: 1 !important;
}
.img {
}
JQuery:
$('a[name="#tabContent2"]').click(function () {
$("#tab1").removeClass('activeTab');
$("#tab3").removeClass('activeTab');
$("#tab4").removeClass('activeTab');
$("#tab5").removeClass('activeTab');
$(this).addClass('activeTab');
$("#tabContent2").load("external/test2.txt");
$("#tabContent2").show();
$("#tabContent1").hide();
$("#tabContent3").hide();
$("#tabContent4").hide();
$("#tabContent5").hide();
});
How can I get the scroll bar to appear?

#tabs {
overflow: scroll;
}
overflow controls how content is hidden. If set to hidden it will be hidden with no scroll bars. You want scroll to add the appropriate scroll bar.

Overflow is visible but just it overflowed by padding:
#content {
background: none repeat scroll 0 0 #FFFFFF;
border-top: 2px solid #3D3D3D;
height: 100%;
padding: 2em 0 0 2em; /*<--change to this*/
position: fixed;
top: 30px;
width: 98%;
overflow: auto;
}

Try to use the famous micro clearfix instead of overflow: auto;
/*The famous micro clearfix*/
.group:before,
.group:after,
.group:before,
.group:after {
content: " ";
display: table;
}
.group:after,
.group:after {
clear: both;
}
.group,
.group {
*zoom: 1;
}
And for your jQuery, that can be a lot shorter and, arguable, more readable like this:
$('a[name="#tabContent2"]').click(function () {
$(this).parent().parent().find("a").removeClass("activeTab");
$(this).addClass('activeTab');
$("#content > div").hide();
$("#tabContent2").load("external/test2.txt");
$("#tabContent2").show();
});

Related

My slideshows are not working with node in localhost

As you can see I have positioned my divs properly position: relative; for slideshow and position: absolute; for containers
I have looked at similar questions that others posted and tried to fix the issue. It is still not working. Everything else works except slideshows. Slideshow shows only the last image. Does not change. My side panels work perfectly.
previously I had not added $(document).ready(function ()... In hopes of fixing issue I tried it but something else seems to be the problem. Any help would be appreciated, Thank you!
here are my files
//jshint esversion:6
$(document).ready(function (){
$("#slideshow > div:gt(0)").hide();
setInterval(function(){
$('#slideshow > div:first').fadeOut(1000).next().fadeIn(1000).end().appendTo('#slideshow');
}, 3000);
});
/* Set the width of the sidebar to 250px (show it) */
function openNav() {
document.getElementById("mySidepanel").style.width = "250px";
}
/* Set the width of the sidebar to 0 (hide it) */
function closeNav() {
document.getElementById("mySidepanel").style.width = "0";
}
img{
background-size: cover;
position: absolute;
background: rgba(0, 0, 0, 0.5);
}
.container {
width: 100%;
}
.container img {
height: 100%;
width: 100%;
border-radius: 20px 20px;
}
.QuoteBox{
bottom: 0;
left: 50px;
position: absolute;
height: auto;
width: auto;
text-align:center;
}
.authorName{
color: #e79cc2;
font-family:'Cinzel', serif;
}
p{
color: #a6dcef;
font-family: "Courier New", Courier, monospace;
font-size: 15px;
align-items: center;
}
.slide{
background-image: url('https://paintingvalley.com/images/dark-abstract-painting-11.jpg');
background-size: cover;
background-position: right;
background-repeat: no-repeat;
background-color: #ff4301;
background-blend-mode: multiply;
}
.backmost{
/* background-color: #1f4068; */
height: 100vh;
width: 100vw;
position: absolute;
top: 0;
left: 0;
}
.slide{
/* background-color: #e1ffc2; */
top: 0;
left: 0;
height: 100vh;
width: 100vw;
position: relative;
box-shadow: 25px 25px 50px 0 #111d5e inset, -25px -25px 50px 0 #111d5e inset;
}
#slideshow{
/* background-color: #ffa931; */
top: 0;
left: 37px;
height: 91.75%;
width: 94.75%;
position: relative;
}
#slideshow > div > img{
position: absolute;
}
/* The sidepanel menu */
.sidepanel {
height: 250px; /* Specify a height */
width: 0; /* 0 width - change this with JavaScript */
position: fixed; /* Stay in place */
z-index: 1; /* Stay on top */
top: 0;
left: 0;
background-color: #192965; /* Black*/
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 60px; /* Place content 60px from the top */
transition: 0.5s; /* 0.5 second transition effect to slide in the sidepanel */
}
/* The sidepanel links */
.sidepanel a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
/* When you mouse over the navigation links, change their color */
.sidepanel a:hover {
color: #f1f1f1;
}
/* Position and style the close button (top right corner) */
.sidepanel .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
/* Style the button that is used to open the sidepanel */
.openbtn {
font-size: 15px;
cursor: pointer;
background-color: #192965;
color: white;
padding: 5px 10px;
border: none;
}
.openbtn:hover {
background-color: #192965;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Name</title>
<link href="/css/homestyles.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cinzel&family=El+Messiri&display=swap" rel="stylesheet">
</head>
<body>
<div class="backmost">
<div class="slide">
<div class="QuoteBox">
<p>“Vision is the art of seeing things invisible.” <span class="authorName"> ― Jonathan Swift</span></p>
</div>
<div id="mySidepanel" class="sidepanel">
×
About
Work Experience
Art
Football
</div>
<button class="openbtn" onclick="openNav()">☰ Pawan Panta</button>
<div id="slideshow">
<div class="container">
<img src="/images/IMG_E2670.JPG">
</div>
<div class ="container">
<img src="/images/IMG_E2668.JPG">
</div>
<div class="container">
<img src="/images/IMG_E2665.JPG">
</div>
</div>
</div>
</div>
<script src="myWebJs.js" charset="utf-8"></script>
<script src="JsFiles/homepageJS.js" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</body>
</html>

I made some modifications in $(document).ready() and replaced the images with inline data to visualize the fade in / fade out and the images get replaced now.
Looks like the fadeOut function returns immediately and not after the fading is finished. I created a callback function which gets called once fadeOut, see https://api.jquery.com/fadeOut/ which seems to do the trick.
//jshint esversion:6
$(document).ready(function (){
//$("#slideshow > div:gt(0)").hide();
setInterval(function(){
$('#slideshow > div:first').fadeOut(1000, "linear", function() { $('#slideshow > div:first').appendTo('#slideshow'); });
$('#slideshow > div:first').next().fadeIn(1000);
}, 3000);
});
/* Set the width of the sidebar to 250px (show it) */
function openNav() {
document.getElementById("mySidepanel").style.width = "250px";
}
/* Set the width of the sidebar to 0 (hide it) */
function closeNav() {
document.getElementById("mySidepanel").style.width = "0";
}
img{
background-size: cover;
position: absolute;
background: rgba(0, 0, 0, 0.5);
}
.container {
width: 100%;
}
.container img {
height: 100%;
width: 100%;
border-radius: 20px 20px;
}
.QuoteBox{
bottom: 0;
left: 50px;
position: absolute;
height: auto;
width: auto;
text-align:center;
}
.authorName{
color: #e79cc2;
font-family:'Cinzel', serif;
}
p{
color: #a6dcef;
font-family: "Courier New", Courier, monospace;
font-size: 15px;
align-items: center;
}
.slide{
background-image: url('https://paintingvalley.com/images/dark-abstract-painting-11.jpg');
background-size: cover;
background-position: right;
background-repeat: no-repeat;
background-color: #ff4301;
background-blend-mode: multiply;
}
.backmost{
/* background-color: #1f4068; */
height: 100vh;
width: 100vw;
position: absolute;
top: 0;
left: 0;
}
.slide{
/* background-color: #e1ffc2; */
top: 0;
left: 0;
height: 100vh;
width: 100vw;
position: relative;
box-shadow: 25px 25px 50px 0 #111d5e inset, -25px -25px 50px 0 #111d5e inset;
}
#slideshow{
/* background-color: #ffa931; */
top: 0;
left: 37px;
height: 91.75%;
width: 94.75%;
position: relative;
}
#slideshow > div > img{
position: absolute;
}
/* The sidepanel menu */
.sidepanel {
height: 250px; /* Specify a height */
width: 0; /* 0 width - change this with JavaScript */
position: fixed; /* Stay in place */
z-index: 1; /* Stay on top */
top: 0;
left: 0;
background-color: #192965; /* Black*/
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 60px; /* Place content 60px from the top */
transition: 0.5s; /* 0.5 second transition effect to slide in the sidepanel */
}
/* The sidepanel links */
.sidepanel a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
/* When you mouse over the navigation links, change their color */
.sidepanel a:hover {
color: #f1f1f1;
}
/* Position and style the close button (top right corner) */
.sidepanel .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
/* Style the button that is used to open the sidepanel */
.openbtn {
font-size: 15px;
cursor: pointer;
background-color: #192965;
color: white;
padding: 5px 10px;
border: none;
}
.openbtn:hover {
background-color: #192965;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Name</title>
<link href="/css/homestyles.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cinzel&family=El+Messiri&display=swap" rel="stylesheet">
</head>
<body>
<div class="backmost">
<div class="slide">
<div class="QuoteBox">
<p>“Vision is the art of seeing things invisible.” <span class="authorName"> ― Jonathan Swift</span></p>
</div>
<div id="mySidepanel" class="sidepanel">
×
About
Work Experience
Art
Football
</div>
<button class="openbtn" onclick="openNav()">☰ Pawan Panta</button>
<div id="slideshow">
<div class="container">
<img src="data:image/png;base64,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">
</div>
<div class ="container">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACkAAAAzCAYAAAAKLSELAAABQmlDQ1BJQ0MgUHJvZmlsZQAAKJFjYGASSCwoyGFhYGDIzSspCnJ3UoiIjFJgf8LAwcDKIM5gzKCTmFxc4BgQ4ANUwgCjUcG3awyMIPqyLsgs5ePLNiyYJnbX/yGf7M4vyS8w1aMArpTU4mQg/QeIk5ILikoYGBgTgGzl8pICELsFyBYpAjoKyJ4BYqdD2GtA7CQI+wBYTUiQM5B9BcgWSM5ITAGynwDZOklI4ulIbKi9IMDh7W5kbqgQQMCppIOS1IoSEO2cX1BZlJmeUaLgCAyhVAXPvGQ9HQUjAyMDBgZQeENUf74BDkdGMQ6EWCIwXAyB/mM8hBDLjmBg2OfLwMDHhxDTbGJg4P/MwHA4tiCxKBHuAMZvLMVpxkYQNvd2BgbWaf//fw5nYGDXZGD4e/3//9/b////u4yBgfkWA8OBbwD1NV/22PjJgQAAAFZlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA5KGAAcAAAASAAAARKACAAQAAAABAAAAKaADAAQAAAABAAAAMwAAAABBU0NJSQAAAFNjcmVlbnNob3SW3B9UAAAB1GlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS40LjAiPgogICA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczpleGlmPSJodHRwOi8vbnMuYWRvYmUuY29tL2V4aWYvMS4wLyI+CiAgICAgICAgIDxleGlmOlBpeGVsWERpbWVuc2lvbj40MTwvZXhpZjpQaXhlbFhEaW1lbnNpb24+CiAgICAgICAgIDxleGlmOlVzZXJDb21tZW50PlNjcmVlbnNob3Q8L2V4aWY6VXNlckNvbW1lbnQ+CiAgICAgICAgIDxleGlmOlBpeGVsWURpbWVuc2lvbj41MTwvZXhpZjpQaXhlbFlEaW1lbnNpb24+CiAgICAgIDwvcmRmOkRlc2NyaXB0aW9uPgogICA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgqG8ogmAAAD8UlEQVRoBe1YSyhtURj+DjfPPAuRIuRVBgYiJiQTEYWBkVJMZIASErcYMPEqUgZIyYCJoiRGkglJ8sgjiVImHnnlde+/i85eax1rLc651+2eVbLX97++/a/9r/WvYwkPD3/FNx8u35yfQc9J0l6r5Mzkf5XJH/Z424SEBOTm5iI6OhrBwcEICgrC6+srDg8Psb+/j4ODA+P/5uYmHh4etENavrJPZmZmorW1FTExMUqBiXBNTQ3W19eV9N+UPkXSxcXFIFdeXv7mR/n/8/Mz+vv70dPTg8fHRyU7V19f359KmlZKDQ0NqKystELUH+kFU1NTERkZidnZWSVD7UxmZ2djeHgYFouFC0DfIS3p2toabm5uEBUVheTkZPj5+XG6BJSWlmJpaUkoswa1SU5PTxuBrZ3Q89DQEHp7e3F5eWkS+fv7o6WlBSUlJSacJlRQOTk50mXXWm4qEFpqdoyNjRlERJV7f3+Pubk50DKnpaWZTAMDA40dYHt724SzE60Tp7i4mLXH/Pw8mpqaOJwF+vr6sLu7y8JISkriMBbQIilySN+nyqBKHh8f51QTExM5jAW0SIaGhprsr6+vsby8bMI+muzt7XHi+Ph4DmMBLZJhYWEm+5OTE9C+pzro+2SHq6srC3FzZZLu7u7w9PQ0OTg7OzPNZRNR1mRFQz6Vz26q3Pz8fHh5eb1zOT8/f3+WPdC+WlBQwKltbW1xGAsokyTDjY0N1l55XlFRYZw0rAE1HbKhvNwyRx/J8/LyUF9fz6kcHx9jZmaGw1lAK5OssWzu5uaG2tpaVFVVcap0hNbV1eH29paTsYDDSFIT0dHRYbONo/11ZWWF5SOc251kSEiIcXQWFRUJmxBiQZt6W1ubkJAItBtJWloqjurqanh7e4ti4e7uDo2NjZiamhLKbYF2IZmVlWVkJiIiwlYco8mgLv709NSmji3Bl0h6eHigubkZZWVltvzj6OjI6OIXFxdt6sgEnyZJpwddA2JjY4UxLi4uQJ3PyMiItF8UOrACP0WSboWTk5PCjvvp6Qmjo6Po7u7mGmCruFqP2iQDAgIMEqIrwerqqlHZOzs7WiRkytokBwcHISqQgYEBdHZ24uXlRRZTW65FMj09HfTHjq6uLmN5Wdxec62zu7CwkIs7MTHhUIIUUPm2SJs1XVWtv8WrqyukpKQonb/c22kAysudkZFhImi84e8eUXRV1YgP6u4XFhY+NFEmGRcXxzny8fFBe3s7h+sA1JnLSCp/k/SzyN8ayiRF286fIq1MkgrHEYN+M5IN5eqWOXKkXDmTjiQh8+0kKcuQqtyZSdVMyfScmZRlSFXuzKRqpmR6/0QmfwHA4zESzpQpugAAAABJRU5ErkJggg==">
</div>
<div class="container">
<img src="data:image/png;base64,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">
</div>
</div>
</div>
</div>
<script src="myWebJs.js" charset="utf-8"></script>
<script src="JsFiles/homepageJS.js" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</body>
</html>

How to allow only 1 scroll to work with Javascript?

I have a html page with a filter_options and content. Inside the filter_options there are some options listed. I have given scroll access and on scroll-Y it would change the scroll-X of those options. But with that the content scroll is also working. How can I allow the filter_options scroll to only work when it is being scrolled?
index.html
document.getElementById("options").addEventListener('mousewheel', function(e) {
if (e.wheelDelta > 0) {
this.scrollLeft -= 100;
} else {
this.scrollLeft += 100;
}
});
body {
margin: 0;
}
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: white;
}
::-webkit-scrollbar-thumb {
background: orange;
border-radius: 30px;
}
#filter_options {
width: 80%;
height: 100%;
position: fixed;
top: 0;
z-index: 2;
background-color: rgba(66, 60, 60, 0.13);
float: left;
overflow: scroll;
}
#filter_options div {
background-color: rgb(51, 51, 51);
text-align: center;
overflow: auto;
white-space: nowrap;
margin-top: 5%;
}
#filter_options div div {
color: white;
background-color: orange;
padding: 12px;
font-size: 20px;
font-family: "Comic Sans MS", cursive, sans-serif;
display: inline-block;
user-select: none;
}
#content {
height: 5000px;
width: 90%;
margin-left: 5%;
z-index: -1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="filter_options">
<div id="options">
<div>Option 1</div><div>Option 2</div><div>Option 3</div><div>Option 4</div><div>Option 5</div><div>Option 6</div><div>Option 7</div><div>Option 8</div><div>Option 9</div><div>Option 10</div>
</div>
</div>
<div id="content"></div>
</body>
</html>

Try to use
#content {overflow: hidden}

I just thought of a solution. By using e.preventDefault() before the if statement.

create hamburger menu in javascript

I need help creating a hamburger menu in javascript. What's the most efficient way to create this without using jquery? The javascript code that I have at the bottom should work but I'm missing something else.
<html>
<head>
<style>
.hamburger {
position: relative;
display: inline-block;
width: 1.25em;
height: 0.75em;
border-top: 0.18em solid #000;
border-bottom: 0.18em solid #000;
}
.hamburger:before {
content: "";
position: absolute;
top: 0.3em;
left: 0px;
width: 100%;
border-top: 0.18em solid #000;
}
</style>
</head>
<body>
<span class="hamburger"></span>
<li>Development</li>
<li>Illustrations</li>
<script type="text/javascript">
var myEl = document.getElementById('hamburger');
myEl.addEventListener('click', function() {
this.classList.toggle('activated');
}, false);
</script>
</body>
</html>

The question was
What's the most efficient way to create this without using jquery?
So pure CSS would be OK, I presume?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Hamburger Menu</title>
<style>
ul {
list-style-type: none;
position: relative;
top: -200px;
transition: all .5s ease;
margin-right: 10px;
}
.nav {
display: none;
}
#nav:checked ~ ul {
top: 0;
}
#nav {
display: none;
}
.navmenu {
position: relative;
display: block;
margin: -1ex 10px -2ex 10px;
padding: 5px 20px;
background: linear-gradient(to right, #445566, #888);
color: #fff;
z-index: 999;
/* The UX expert said so */
cursor: pointer;
}
li {
background: linear-gradient(to right, #445566, #888);
color: white;
padding-left: 5em;
padding-top: 1ex;
margin-left: -30px;
}
</style>
</head>
<body>
<div class="navigation">
<input type="checkbox" id="nav">
<label for="nav" class="navmenu">☰</label>
<ul>
<li>First entry</li>
<li>Second entry</li>
<li>Third entry</li>
<li>Fourth of July entry</li>
</ul>
</div>
</body>
</html>
The positioning is a bit ugly, admitted, but you can finetune yourself.
The navigation-list is over the top first and rolls down when you check the checkbox. The "burger" is in the label element for the checkbox and checking/unchecking the checkbox changes the value of the attribute top of the ul element.

You are right. It should be getElementsByClassName:
var myEl = document.getElementsByClassName('hamburger')[0];

Media query does not work on mobile devices

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.

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']);
});

Develop Reference

JavaScript is the programming language of the Web.

Content expanding beyond div but no scroll bar - javascript

#tabs { overflow: scroll; } overflow controls how content is hidden. If set to hidden it will be hidden with no scroll bars. You want scroll to add the appropriate scroll bar.

Overflow is visible but just it overflowed by padding: #content { background: none repeat scroll 0 0 #FFFFFF; border-top: 2px solid #3D3D3D; height: 100%; padding: 2em 0 0 2em; /<--change to this/ position: fixed; top: 30px; width: 98%; overflow: auto; }

Related

My slideshows are not working with node in localhost

How to allow only 1 scroll to work with Javascript?

create hamburger menu in javascript

Media query does not work on mobile devices

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

Categories

Resources

Develop Reference

JavaScript is the programming language of the Web.

Content expanding beyond div but no scroll bar - javascript

#tabs { overflow: scroll; } overflow controls how content is hidden. If set to hidden it will be hidden with no scroll bars. You want scroll to add the appropriate scroll bar.

Overflow is visible but just it overflowed by padding: #content { background: none repeat scroll 0 0 #FFFFFF; border-top: 2px solid #3D3D3D; height: 100%; padding: 2em 0 0 2em; /*<--change to this*/ position: fixed; top: 30px; width: 98%; overflow: auto; }

Related

My slideshows are not working with node in localhost

How to allow only 1 scroll to work with Javascript?

create hamburger menu in javascript

Media query does not work on mobile devices

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

Categories

Resources

Overflow is visible but just it overflowed by padding: #content { background: none repeat scroll 0 0 #FFFFFF; border-top: 2px solid #3D3D3D; height: 100%; padding: 2em 0 0 2em; /<--change to this/ position: fixed; top: 30px; width: 98%; overflow: auto; }