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']);
});
Related
My first dropdown button "Content" works correctly but when I click on the second dropdown button "Dropdown", the contents from the first dropdown button show up instead???
I have no idea why it is doing this??? Maybe I am overlooking a small detail, but I can't seem to find where I am going wrong with this.
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
if (!e.target.matches('.dropbtn')) {
var myDropdown = document.getElementById("myDropdown");
if (myDropdown.classList.contains('show')) {
myDropdown.classList.remove('show');
}
}
}
body {
font-family: Raleway;
font-size: 13px;
margin: 0;
padding: 0;
height: 100%;
}
a {
text-decoration: none;
color: rosybrown
}
#titleNav {
z-index: 2;
/* added for fixed layout: keeps titleNav on top of other elemements */
position: fixed;
/* added for fixed layout */
top: 0px;
/* added for fixed layout */
left: 0px;
/* added for fixed layout */
width: 100%;
/* added for fixed layout */
background-color: white;
height: 60px;
min-width: 600px;
/* prevents nav links from wrapping when browser window is too narrow */
}
#title {
float: left;
padding-left: 2%;
padding-top: 1.5%;
}
.navbar {
overflow: hidden;
float: right;
}
.navbar a {
float: left;
font-size: 16px;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
cursor: pointer;
font-size: 16px;
border: none;
outline: none;
color: black;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.show {
display: block;
}
.container {
width: 100%;
}
#content {
padding-top: 22%;
padding-left: 15%;
padding-right: 15%;
text-align: justify;
letter-spacing: 1px;
line-height: 150%;
padding-bottom: 60px;
}
.image {
width: 100%;
max-height: 500px;
object-fit: fill;
}
.image:hover {
opacity: 0.8;
filter: alpha(opacity=50);
/* For IE8 and earlier */
}
#footer {
background-color: rgba(33, 33, 33, 0.89);
position: fixed;
bottom: 0px;
left: 0xp;
width: 100%;
color: white;
clear: both;
text-align: center;
padding: 5px;
}
.stopFloat {
clear: both;
left: 0px;
right: 0px;
bottom: 0px;
}
<html>
<head>
<title>JS Framework</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div id="titleNav">
<div id="title">
<img src="pics/logo.png" width="160" height="39" alt="">
</div>
<div class="navbar">
Home
<div class="dropdown">
<button class="dropbtn" onclick="myFunction()">Content
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content" id="myDropdown">
<a onclick="makeFramework('contentId', 'aboutUs.html');">About Us</a>
<a onclick="makeFramework('contentId', 'aboutCoffee.html');">Coffee</a>
</div>
</div>
News
<div class="dropdown">
<button class="dropbtn" onclick="myFunction()">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content" id="myDropdown">
Link 1
Link 2
Link 3
</div>
</div>
Labs
</div>
</div>
<div id="contentId">
Content Area
</div>
<div id="footer">
Web footer
</div>
<script src="framework.js"></script>
<script src="dropDownMenu.js"></script>
<script>
"use strict";
makeFramework('contentId', 'aboutUs.html');
</script>
</body>
</html>
Ummm.... because you call the same function from both buttons.
Essentially, you run the same piece of code, myFunction, despite which navigation item is clicked. Therefore, of course both items will always do the same thing.
Give each menu a different ID (remember that IDs need to be unique - i.e. you can't have two items with the same ID), and make myFunction take the ID of the element to show / hide, as shown below.
This means that there is a way for the function to determine which menu open, and thus it will open the correct one.
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction(id) {
document.getElementById(id).classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onmouseup = function(e) {
var dropdown = document.querySelector(".dropdown-content.show"); //Get any shown dropdown element (i.e. any element on the page with both the dropdown-content class and the show class
if (dropdown) { //If such an element exists, a dropdown needs to be closed
dropdown.classList.remove("show"); //So remove the show class
}
}
body {
font-family: Raleway;
font-size: 13px;
margin: 0;
padding: 0;
height: 100%;
}
a {
text-decoration: none;
color: rosybrown
}
#titleNav {
z-index: 2;
/* added for fixed layout: keeps titleNav on top of other elemements */
position: fixed;
/* added for fixed layout */
top: 0px;
/* added for fixed layout */
left: 0px;
/* added for fixed layout */
width: 100%;
/* added for fixed layout */
background-color: white;
height: 60px;
min-width: 600px;
/* prevents nav links from wrapping when browser window is too narrow */
}
#title {
float: left;
padding-left: 2%;
padding-top: 1.5%;
}
.navbar {
overflow: hidden;
float: right;
}
.navbar a {
float: left;
font-size: 16px;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
cursor: pointer;
font-size: 16px;
border: none;
outline: none;
color: black;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.show {
display: block;
}
.container {
width: 100%;
}
#content {
padding-top: 22%;
padding-left: 15%;
padding-right: 15%;
text-align: justify;
letter-spacing: 1px;
line-height: 150%;
padding-bottom: 60px;
}
.image {
width: 100%;
max-height: 500px;
object-fit: fill;
}
.image:hover {
opacity: 0.8;
filter: alpha(opacity=50);
/* For IE8 and earlier */
}
#footer {
background-color: rgba(33, 33, 33, 0.89);
position: fixed;
bottom: 0px;
left: 0xp;
width: 100%;
color: white;
clear: both;
text-align: center;
padding: 5px;
}
.stopFloat {
clear: both;
left: 0px;
right: 0px;
bottom: 0px;
}
<html>
<head>
<title>JS Framework</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div id="titleNav">
<div id="title">
<img src="pics/logo.png" width="160" height="39" alt="">
</div>
<div class="navbar">
Home
<div class="dropdown">
<button class="dropbtn" onclick="myFunction('dropdownOne')">Content
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content" id="dropdownOne">
<a onclick="makeFramework('contentId', 'aboutUs.html');">About Us</a>
<a onclick="makeFramework('contentId', 'aboutCoffee.html');">Coffee</a>
</div>
</div>
News
<div class="dropdown">
<button class="dropbtn" onclick="myFunction('dropdownTwo')">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content" id="dropdownTwo">
Link 1
Link 2
Link 3
</div>
</div>
Labs
</div>
</div>
<div id="contentId">
Content Area
</div>
<div id="footer">
Web footer
</div>
<script src="framework.js"></script>
<script src="dropDownMenu.js"></script>
<script>
"use strict";
makeFramework('contentId', 'aboutUs.html');
</script>
</body>
</html>
How does this work?
myFunction('dropdownOne') means that the id variable in myFunction is given the value dropdownOne - therefore when we call document.getElementById(id) it will interpret as document.getElementById('dropdownOne') instead, and hence the first dropdown is targeted.
Likewise, if we call myFunction('dropdownTwo'), then it will interpret as document.getElementById('dropdownTwo'), and thus target the second dropdown.
Therefore, you can add as many menu items like this as you want, assuming each has a unique identifier, and myFunction is given the unique ID each time.
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.
Sorry for asking a pretty common question however I couldn't find how to fix that problem anywhere, and I have no idea how this slideshow works.
I want that slideshow to pause on mouseover and continue on mouseleave.
Here is the code below:
$(function() {
$('#carousel').carouFredSel({
width: 800,
items: 4,
scroll: 1,
auto: {
duration: 1250,
timeoutDuration: 2500
},
prev: '#prev',
next: '#next',
pagination: '#pager',
});
});`
And the html code for the block:
<!DOCTYPE html>
<html>
<head>
<!--
This carousel example is created with jQuery and the carouFredSel-plugin.
http://jquery.com
http://caroufredsel.dev7studios.com
-->
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<meta name="description" value="This beautifull carousel centeres 3 images inside a wrapper with rounded corners. Note that this will not work in Chrome, due to it not being able to overflow content wrapped in rounded corners." />
<meta name="keywords" value="carousel, rounded, corners, jquery, example, pagination" />
<title>Carousel with 3 images centered in rounded corners</title>
<script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="jquery.carouFredSel-6.1.0-packed.js" type="text/javascript"></script>
<script type="text/javascript" src="try.js"></script>
<style type="text/css">
html, body {
height: 100%;
padding: 0;
margin: 0;
}
body {
background-color: #f0f0f0;
min-height: 700px;
}
body * {
font-family: Arial, Geneva, SunSans-Regular, sans-serif;
font-size: 14px;
color: #333;
line-height: 22px;
}
#wrapper {
background-color: #fff;
border: 1px solid #ccc;
border-radius: 100px;
width: 800px;
height: 127px;
padding: 10px;
margin: -75px 0 0 -410px;
position: absolute;
left: 50%;
top: 50%;
}
.caroufredsel_wrapper {
border-radius: 90px;
}
#carousel img {
width: 201px;
height: 127px;
margin: 0 5px;
float: left;
}
#prev, #next {
background: transparent url( img/carousel_control.png ) no-repeat 0 0;
text-indent: -999px;
display: block;
overflow: hidden;
width: 15px;
height: 21px;
position: absolute;
top: 65px;
}
#prev {
background-position: 0 0;
left: 30px;
}
#prev:hover {
left: 29px;
}
#next {
background-position: -18px 0;
right: 30px;
}
#next:hover {
right: 29px;
}
#pager {
text-align: center;
margin: 0 auto;
padding-top: 20px;
}
#pager a {
background: transparent url(img/carousel_control.png) no-repeat -2px -32px;
text-decoration: none;
text-indent: -999px;
display: inline-block;
overflow: hidden;
width: 8px;
height: 8px;
margin: 0 5px 0 0;
}
#pager a.selected {
background: transparent url(img/carousel_control.png) no-repeat -12px -32px;
text-decoration: underline;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="carousel">
<img src="img/up1.jpg" />
<img src="img/up2.jpg" />
<img src="img/up3.jpg" />
<img src="img/up1.jpg" />
<img src="img/up4.jpg" />
<img src="img/up5.jpg" />
<img src="img/up6.jpg" />
</div>
<a id="prev" href="#"></a>
<a id="next" href="#"></a>
<div id="pager"></div>
</div>
</body>
</html>
And the other two js file are in those link you can have a look.
jquery file second jquery file
You can see the current version at webmasteroutlet.com in the footer section. It doesn't pause on mouseover.
here is what i did if anyone wnats to use it i changed the scroll element and it works just fine
scroll: {
items: 1,
duration: 1250,
timeoutDuration: 2500,
easing: 'swing',
pauseOnHover: 'immediate'
},
Have you tried this on mouseover ??
$("#carousel").mouseover(function() {
$("#carousel").trigger('pause' ,true);
});
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();
});
Ok so thanks to people here I have nearly completed my dropdown to the standard of a 3 year old. I know that there is probably a way to shorten and streamline my code so any pointers would be great. Here is all my code and a jsfiddle will be at the bottom:
oh and before I forget is there a way that I can smooth out the animations? like a wait() kind of deal that will make the slide down wait until the slide up is complete?
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js/calendar.js"></script>
<script type="text/javascript" src="js/formhandler.js"></script>
<script type="text/javascript" src="js/popup.js"></script>
<link href="CSS/style.css" rel="stylesheet" type="text/css" media="screen"/>
<link href="CSS/fonts.css" rel="stylesheet" type="text/css" media="screen"/>
<script type="text/javascript">
$(document).ready(function () {
$('a#1').on('click', function (event) {
event.preventDefault();
if ($('#mid-nav > ul').find('ul').is(":visible")) {
$('#mid-nav > ul').find('ul').slideUp(300);
}
if ($('#mid-nav > ul').find('ul#1').is(":visible")) {
$('#mid-nav > ul').find('ul').slideUp(300);
} else {
$('#mid-nav > ul').find('ul#1').slideToggle(300);
}
});
$('a#2').on('click', function (event) {
event.preventDefault();
if ($('#mid-nav > ul').find('ul').is(":visible")) {
$('#mid-nav > ul').find('ul').slideUp(300);
}
if ($('#mid-nav > ul').find('ul#2').is(":visible")) {
$('#mid-nav > ul').find('ul').slideUp(300);
} else {
$('#mid-nav > ul').find('ul#2').slideToggle(300);
}
});
$('a#3').on('click', function (event) {
event.preventDefault();
if ($('#mid-nav > ul').find('ul').is(":visible")) {
$('#mid-nav > ul').find('ul').slideUp(300);
}
if ($('#mid-nav > ul').find('ul#3').is(":visible")) {
$('#mid-nav > ul').find('ul').slideUp(300);
} else {
$('#mid-nav > ul').find('ul#3').slideToggle(300);
}
});
$('a#4').on('click', function (event) {
event.preventDefault();
if ($('#mid-nav > ul').find('ul').is(":visible")) {
$('#mid-nav > ul').find('ul').slideUp(300);
}
if ($('#mid-nav > ul').find('ul#4').is(":visible")) {
$('#mid-nav > ul').find('ul').slideUp(300);
} else {
$('#mid-nav > ul').find('ul#4').slideToggle(300);
}
});
});
<body>
<div id="wrapper">
<div id="topbanner"></div>
<div id="header">
<div id="navigation">
<div id="topnav">
<div id="left-side">
<div id="left-menu">
<ul>
<li>Link l1</li>
<li>Link l2</li>
</ul>
</div>
</div>
<div id="logo"><img src="images/general/nav_logo.png" /> </div>
<div id="right-side">
<div id="right-menu">
<ul>
<li>Link r1</li>
<li>Link r2</li>
</ul>
</div>
</div>
</div>
<div id="mid-nav">
<ul id="midnav">
<li><a href="#" >HOME</a></li>
<li><a id="1" href="#" >ABOUT</a>
<ul id="1">
<li>test1.2</li>
<li>test1.3</li>
<li>test1.1</li>
</ul>
</li>
<li><a id="2"href="#">Work</a>
<ul id="2">
<li>test1x.2</li>
<li>test1x.3</li>
<li>test1x.1</li>
</ul>
</li>
<li><a id ="3" href="#">Clients</a>
<ul id="3">
<li>test2.2</li>
<li>test2.3</li>
<li>test1.2</li>
</ul>
</li>
<li><a id="4"href="#">Contact</a>
<ul id="4">
<li>test3.2</li>
<li>test3.3</li>
<li>test3.1</li>
</ul>
</li>
</ul>
</div>
</div>
<!--START 100% HERE!-->
</div>
</div>
<div id="footer">
<div class="social-images"><img src="images/socialmedia/facebook.gif" height="40" width="40"/></div>
<div class="social-images"><img src="images/socialmedia/google.gif" height="40" width="40"/></div>
<div class="social-images"><img src="images/socialmedia/twitter.gif" height="40" width="40"/></div>
</div>
</body>
</html>
CSS:
html, body {
height: 100%;
margin: 0 auto;
}
/* NAVIGATION */
#wrapper {
text-align: left;
margin: 0px auto;
padding: 0px;
width: 100%;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -100px; /* the bottom margin is the negative value of the footer's height */
}
#topbanner{
width:100%;
height:54px;
background-color:#f1f2f2;
position:absolute;
z-index:-1000;
}
#topnav {
margin: 0px auto;
width: 1050px;
height: 50px;
padding-top: 4px;
background-color: #f1f2f2;
}
#left-side {
float: left;
width: 439px;
}
#right-side {
float: right;
width: 439px;
}
#logo {
padding-top: 7px;
float: left;
width: 15%;
}
#left-menu {
}
#left-menu ul {
float: right;
margin: 0px 0px 0px 0px;
padding: 0px 10px 0px 0px;
}
#left-menu li {
display: inline;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
#left-menu a {
display: inline-block;
padding: 10px;
line-height: 30px;
letter-spacing: 1px;
text-decoration: none;
text-transform: uppercase;
font-family: 'AftasansRegular';
font-size: 22px;
font-weight: normal;
color: #000;
border: none;
}
#right-menu {
}
#right-menu ul {
float: left;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 10px;
}
#right-menu li {
display: inline;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
#right-menu a {
display: inline-block;
padding: 10px;
line-height: 30px;
letter-spacing: 1px;
text-decoration: none;
text-transform: uppercase;
font-family: 'AftasansRegular';
font-size: 22px;
font-weight: normal;
color: #000;
border: none;
}
ul#midnav {
border-width: 1px 0;
list-style: none;
margin: 0;
padding: 0;
text-align: center;
border-bottom: solid thin #c8c8c8;
}
ul#midnav li {
display: inline;
}
ul#midnav li a {
display: inline-block;
padding: 10px;
line-height: 30px;
letter-spacing: 1px;
text-decoration: none;
text-transform: uppercase;
font-family: 'AftasansRegular';
font-size: 18px;
font-weight: normal;
color: #000;
border: none;
}
ul#midnav li ul{
line-height: 30px;
padding: 0;
position: absolute;
left: 0; top:100px;
display: none;/* --Hide by default--*/
width:100%;
height:40px;
background: #fff;
border-bottom: solid thin #c8c8c8;
}
/* NAVIGATION END */
/* FOOTER BEGIN */
#footerwrapper, #push {
height: 100px; /* .push must be the same height as .footer */
background-color: #f1f2f2;
}
#footer {
border-top: solid thin #c8c8c8;
width: 100%;
height: 100px;
margin: 0 auto;
background-color: #f1f2f2;
}
#social-wrapper {
width: 130px;
height: 100px;
float: right;
position: relative;
top: 40px;
}
.social-images {
border-style: solid;
border-width: 1px;
border-color: #f1f2f2;
width: 40px;
height: 40px;
float: left;
}
/*FOOTER END *?
http://jsfiddle.net/XN4vf/
Sorry if this is coded like a moron (I'm still using my training wheels).
Thanks
C
For one, you should use CSS classes instead of ids for the a tags that trigger the slideToggle on their respective submenus. Also, ids in a valid HTML page are expected to be unique and you use the same id "1", "2", etc. for different elements. More importantly, though, by using classes you don't need to bind the onclick event for all the anchor tags separately, which saves a lot of code ;-)
Here is the updated Fiddle: http://jsfiddle.net/XN4vf/3/
The relevant code is this:
$("a.slide").on('click', function(e){
e.preventDefault();
$(this).parent().siblings().find("ul:visible").slideUp();
$(this).next("ul").slideToggle(300);
});
Once you give the a tags a class called "slide" or similar, you can rewrite your event callback to first hide / slideUp all the submenus belonging to the siblings of the currently clicked a tag. After that, you trigger the slideToggle() to show or hide the current submenu. That way, if you first click on ABOUT and then without clicking on ABOUT again (and triggering the toggle) you click on WORK for instance, then the submenu changes correctly.
You can try this:
$(document).ready(function () {
$('#midnav li a').on('click', function(event){
event.preventDefault();
$('#midnav li ul').slideUp(300);
var ul = $(this).parent().find('ul');
if(ul.is(':visible')){
ul.slideUp(300);
}else{
ul.slideDown(300);
}
});
});