I ran into a problem. I've been trying to implement this "hamburger" mobile sliding menu into my website. The javascript is working, but the menu is not showing.
Anyone know of this? http://www.ymc.ch/en/how-to-make-a-hamburger-a-menu-for-mobile-websites
I've made my css and HTML code a bit different, but the jQuery is the same.
I've looked through this and I figured it might be a css conflict but I don't know what exactly. I have another stylesheet that uses .container, but I also don't know if that's the reason.
Here's my link: http://thestripedphoenix.com/
I wanted my website to be responsive while having the hamburger menu tool.
Please, help. I've spent days on this, and I don't think I'd be able to do this alone.
Thanks!!!!!
My HTML markup is here (index.html)
<!-- Mobile Page Layout
================================================== -->
<!--This wrapping container is used to get the width of the whole content-->
<div id="container">
<!--The Hamburger Button in the Header-->
<header>
<div id="logo"><img src="images/tsp+design-header-mobile.png" width="271" height="78"/>
</div>
<div id="hamburger">
<div></div>
<div></div>
<div></div>
</div>
</header>
<!--The mobile navigation Markup hidden via css-->
<nav class="mobileNav">
<ul>
<li>home</li>
<li>about</li>
<li>photography</li>
<li>illustration</li>
<li>animation</li>
<li>web design</li>
<li>resume</li>
<li>contact</li>
</ul>
</nav>
<!--The Layer that will be layed over the content
so that the content is unclickable while menu is shown-->
<div id="contentLayer"></div>
<!-- Primary Page Layout
================================================== -->
<div id="content">
<div class="container">
<div class="six columns">
<div id="header"><img src="images/tsp+design-header.png"/></div>
</div>
<div class="two columns" id="navigation">
<nav id="d-nav">
<dl>
<dt id="about">about</dt>
<dt id="portfolio">portfolio</dt>
<dt id="resume">resume</dt>
<dt id="contact">contact</dt>
</dl>
</nav>
</div>
<div id="space">
</div>
<div class="eight columns">
<div class="slider-wrapper">
<div id="slider1" class="nivoSlider theme-default">
<img src="images/gallery/image2-cropped.jpg"/>
<img src="images/gallery/image3-cropped.jpg"/>
<img src="images/gallery/image4-cropped.jpg"/>
<img src="images/gallery/image5-cropped.jpg"/>
<img src="images/gallery/image7-cropped.jpg"/>
</div>
</div>
</div>
<div class="eight columns">
<div class="slider-wrapper theme-default">
<div id="slider2" class="nivoSlider">
<img src="images/gallery/image8-cropped.png"/>
<img src="images/gallery/image10-cropped.png"/>
<img src="images/gallery/image12-cropped.png"/>
<img src="images/gallery/image13-cropped.png"/>
<img src="images/gallery/image15-cropped.png"/>
</div>
</div>
</div>
<div class="eight columns">
<div class="slider-wrapper theme-default">
<div id="slider3" class="nivoSlider">
<img src="images/gallery/image18-cropped.png"/>
<img src="images/gallery/image19-cropped.png"/>
<img src="images/gallery/image20-cropped.png"/>
</div>
</div>
</div>
<div class="eight columns">
<div class="slider-wrapper theme-default">
<div id="slider4" class="nivoSlider">
<img src="images/gallery/image21-cropped.png"/>
<img src="images/gallery/image22-cropped.png"/>
<img src="images/gallery/image24-cropped.png"/>
</div>
</div>
</div>
<div class="slider-wrapper theme-default">
<div id="slider5" class="nivoSlider">
<img src="images/gallery/image2-cropped.jpg"/>
<img src="images/gallery/image3-cropped.jpg"/>
<img src="images/gallery/image4-cropped.jpg"/>
<img src="images/gallery/image5-cropped.jpg"/>
<img src="images/gallery/image7-cropped.jpg"/>
<img src="images/gallery/image8-cropped.png"/>
<img src="images/gallery/image10-cropped.png"/>
<img src="images/gallery/image12-cropped.png"/>
<img src="images/gallery/image13-cropped.png"/>
<img src="images/gallery/image15-cropped.png"/>
<img src="images/gallery/image18-cropped.png"/>
<img src="images/gallery/image19-cropped.png"/>
<img src="images/gallery/image20-cropped.png"/>
<img src="images/gallery/image21-cropped.png"/>
<img src="images/gallery/image22-cropped.png"/>
<img src="images/gallery/image24-cropped.png"/>
</div>
</div>
<div id="space">
</div>
<div id="footer">
<img src="images/footer-line.png" width="960" height="25"></a>
about<span>|</span>portfolio<span>|</span>resume<span>|</span>contact
<p></p>
</div>
<div id="social">
<img src="images/behance-icon.png" width="30" height="30"></a><img src="images/dribbble-icon.png" width="30" height="30"></a><img src="images/linkedin-icon.png" width="30" height="30"></a><img src="images/youtube-icon.png" width="30" height="30"></a><img src="images/zazzle-icon.png" width="30" height="30"></a>
</div>
<div id="copyright">
<p>Copyright Michelle Shean, 2014</p>
</div>
</div><!-- .container-->
</div><!-- content -->
Part of my CSS (for mobile size)
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
#media only screen and (min-width: 480px) and (max-width: 767px) {
/*
Setup a basic body
*/
body {
margin: 0;
padding: 0;
overflow-x: hidden;
font-family: Helvetica; Arial; sans-serif;
font-size: 12px;
}
/*
Header is relative so z-index: 1 guarantees always displayed on top
*/
header {
background-color: #000000;
padding: 10px;
padding-bottom: 0px;
text-decoration: none;
position: fixed;
width: 100%;
z-index: 1;
-webkit-box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.4);
box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.4);
}
#logo {
display: inline;
}
/*
using background color is important to cover the menu
position absolute isset to cover the whole viewport
*/
#content {
background-color: #000000;
font-family: 'league_gothicregular'; Helvetica; Arial; Sans-serif;
padding: 52px 10px 10px 10px;
position: relative;
max-width: 480px;
height: auto;
overflow-x: hidden;
-webkit-box-shadow: -10px 0px 9px 0px rgba(0, 0, 0, 0.4);
box-shadow: -10px 0px 9px 0px rgba(0, 0, 0, 0.4);
}
/*
the hamburger button with a little gradient effekt
*/
#hamburger {
border-radius: 3px 3px 3px 3px;
cursor: pointer;
display: block;
float: right;
margin-right: 50px;
margin-top: 23px;
height: 24px;
padding: 3px 4px 3px;
position: relative;
width: 25px;
background: #4569b2;
background: -moz-linear-gradient(top, #000000 0%, #000000 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000)color- stop(100%,#000000));
background: -webkit-linear-gradient(top, #000000 0%,#000000 100%);
background: -o-linear-gradient(top, #000000 0%,#000000 100%);
background: -ms-linear-gradient(top, #000000 0%,#000000 100%);
background: linear-gradient(to bottom, #000000 0%,#000000 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=0 );
}
/*
The white stripes in the hamburger button
*/
#hamburger div {
background-color: #fff;
border: 1px solid #eee;
border-radius: 2px 2px 2px 2px;
height: 2px;
margin-top: 3px;
width: 90%;
}
/*
The navigation container in the background
*/
nav {
left: 0px;
top: 0px;
position: fixed;
z-index: 0;
width: 70%;
height: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
overflow-x:hidden;
overflow-y:auto ;
background: #3e3c3d;
background: -moz-linear-gradient(top, #3e3c3d 0%, #2d2c2d 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3e3c3d), color-stop(100%,#2d2c2d));
background: -webkit-linear-gradient(top, #3e3c3d 0%,#2d2c2d 100%);
background: -o-linear-gradient(top, #3e3c3d 0%,#2d2c2d 100%);
background: -ms-linear-gradient(top, #3e3c3d 0%,#2d2c2d 100%);
background: linear-gradient(to bottom, #3e3c3d 0%,#2d2c2d 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3e3c3d', endColorstr='#2d2c2d',GradientType=0 );
}
/*
Style the navigation menu
*/
nav ul {
list-style: none;
margin: 0;
width: 100%;
padding: 0;
}
nav li {
position: relative;
font-size: 1em;
font-weight: bold;
border-bottom: 1px solid #222222;
border-top: 1px solid #444444;
padding: 15px;
}
nav li a {
color: #fff;
text-decoration: none;
}
/*
The Layer that will be layed over the content
so that the content is unclickable while menu is shown
*/
#contentLayer {
display: none;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
position: absolute;
right: 0;
top: 0;
width: 30%;
z-index: 5;
min-height: 1062px;
}
#header {
display: none;
}
#logo {
display: inline;
}
#slider1 {
display: none;
position: relative;
width: auto;
float: left;
clear: both;
margin-top: 50px;
margin-bottom: 30px;
}
#slider2 {
display: none;
position: relative;
width: auto;
float: left;
clear: both;
margin-top: 50px;
}
#slider3 {
display: none;
position: relative;
width: auto;
float: left;
clear: both;
}
#slider4 {
display: none;
position: relative;
width: auto;
float: left;
clear: both;
}
#slider5 {
display: inline;
position: relative;
width: auto;
float: left;
clear: both;
}
#about-pic {
position: relative;
margin-left: 10px;
margin-top: 10px;
min-width: 220px;
max-width: 220px;
float: left;
}
#section-title-blue {
position: relative;
clear: both;
margin-left: 10px;
width: 800px;
min-width: 480px;
height: 60px;
float: left;
font-size: 2em;
color: #00CBD4;
}
#section-title-green {
position: relative;
clear: both;
margin-top: 5px;
margin-left: 10px;
width: 800px;
min-width: 480px;
height: 60px;
float: left;
font-size: 2em;
color: #2AFF38;
}
#about-pic img {
width: 100%;
}
#about-text {
position: relative;
margin-top: 30px;
float: right;
width: 100%;
font-size: 1.1em;
font-family: Helvetica, Arial, Sans-serif;
}
#signature {
font-family: Helvetica, Arial, Sans-serif;
float: left;
margin-top: 40px;
max-width: 120px;
max-height: 120px;
}
#portfolio-gallery {
display: none;
}
#portfolio-nav {
display: none;
}
#mobile-gallery {
display: inline-block;
position: relative;
margin-top: 50px;
clear: both;
padding: 20px;
padding-right: 30px;
padding-top: 10px
max-width: 480px;
max-height: 720px;
}
#mobile-gallery img {
width: auto;
}
/* line 180, ../sass/screen.sass */
.image-row {
*zoom: 1;
margin-bottom: 20px;
}
/* line 38, ../../../../.rvm/gems/ruby-1.9.3-p392/gems/compass-0.12.2/frameworks/compass /stylesheets/compass/utilities/general/_clearfix.scss */
.image-row:after {
content: "";
display: table;
clear: both;
}
/* line 184, ../sass/screen.sass */
.example-image-link {
display: inline-block;
margin: 0 10px 20px 10px;
line-height: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
border: 2px solid #5e5e5e;
-webkit-transition: all 0.1s ease-out;
-moz-transition: all 0.1s ease-out;
-o-transition: all 0.1s ease-out;
transition: all 0.1s ease-out;
}
/* line 191, ../sass/screen.sass */
.example-image-link:hover {
border: 2px solid #2AFF38;
}
/* line 194, ../sass/screen.sass */
.example-image {
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-ms-border-radius: 2px;
-o-border-radius: 2px;
border-radius: 2px;
}
#subheading {
position: relative;
clear: both;
max-width: 360px;
min-width: 430px;
height: 40px;
margin-top: 20px;
margin-left: 10px;
float: left;
font-size: 1.5em;
}
#resume-text {
position: relative;
max-width: 360px;
max-height: 130px;
margin-top: 20px;
margin-left: 10px;
float: left;
font-family: Helvetica, Arial, Sans-serif;
}
#resume-note {
position: relative;
clear: both;
float: left;
margin-left: 70px;
margin-top: 30px;
margin-bottom: 30px;
width: 600px;
height: 30px;
font-family: Helvetica, Arial, Sans-serif;
font-size: 1.2em;
}
#resume-note {
position: relative;
clear: both;
float: left;
margin-left: 10px;
margin-top: 30px;
margin-bottom: 30px;
width: 600px;
height: 30px;
font-family: Helvetica, Arial, Sans-serif;
font-size: 1em;
}
#form {
position: relative;
max-width: 450px;
min-width: 460px;
height: 820px;
margin-top: 20px;
margin-left: 10px;
margin-bottom: 40px;
float: left;
clear: both;
font-size: 1.2em;
padding: 20px;
border: none;
}
input, textarea {
padding: 5px;
margin: 10px;
font-family: Helvetica, Arial, Sans-serif;
font-size: medium;
font-weight: bold;
outline: none;
}
input[type=text], textarea {
width: 220px;
background-color: #FFFFFF;
}
input[type=submit] {
width: 100px;
background-color: #2AFF38;
border: 1px solid #000000;
font-size: large;
color: #FFFFFF;
margin-bottom: 30px;
}
input[submit]:active {
background-color: #00CBD4;
}
h1 {
font-family: 'league_gothicregular', Arial, sans-serif;
font-size: 2.1em;
}
#footer {
position: relative;
margin-top: 10px;
max-width: 960px;
max-height: 80px;
float: left;
text-align: center;
font-size: 1.5em;
}
#footer img {
width: 100%;
}
#social {
position: relative;
clear: both;
max-width: 200px;
height: 40px;
margin: auto;
padding-bottom: 10px;
}
#social img {
margin: 5px;
display: inline-block;
}
#copyright {
position: relative;
clear: both;
text-align: center;
margin: auto;
min-width: 30px;
padding-bottom: 15px;
font-size: 1.2em;
}
a:link {
color: #FFFFFF;
}
a:active {
color: #FFFFFF;
}
a:visited {
color: #FFFFFF;
}
span {
margin: 5px;
}
}
Here is the head of my HTML markup:
<head>
<!-- Basic Page Needs
================================================== -->
<meta charset="utf-8">
<title>the striped phoenix | Michelle Shean</title>
<meta name="description" content="portfolio">
<meta name="author" content="portfolio">
<body oncontextmenu="return false;">
<!-- Mobile Specific Metas
================================================== -->
<meta name="viewport" content="width=device-width, initial-scale = 1.0, maximum-scale=1.0, user-scalable=no" />
<!--Using jQuery and jQuery UI for display effects
================================================== -->
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<!--Using the hamburger menu display code
=================================================== -->
<script src="javascripts/hamburger.js"></script>
<!-- CSS
================================================== -->
<link rel="stylesheet" href="stylesheets/base.css">
<link rel="stylesheet" href="stylesheets/skeleton.css">
<link rel="stylesheet" href="stylesheets/layout.css">
<link rel="stylesheet" href="stylesheets/nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="stylesheets/slider-themes/default/default.css" type="text/css" media="screen" />
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Favicons
================================================== -->
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
</head>
The jQuery code is the same as from your demo.
jQuery(document).ready(function() {
//Open the menu
jQuery("#hamburger").click(function() {
//set the width of primary content container -> content should not scale while animating
var contentWidth = jQuery('#content').width();
//set the content with the width that it has originally
jQuery('#content').css('width', contentWidth);
//display a layer to disable clicking and scrolling on the content while menu is shown
jQuery('#contentLayer').css('display', 'block');
//disable all scrolling on mobile devices while menu is shown
jQuery('#container').bind('touchmove', function(e){e.preventDefault()});
//set margin for the whole container with a jquery UI animation
jQuery("#container").animate({"marginLeft": ["70%", 'easeOutExpo']}, {
duration: 700
});
});
//close the menu
jQuery("#contentLayer").click(function() {
//enable all scrolling on mobile devices when menu is closed
jQuery('#container').unbind('touchmove');
//set margin for the whole container back to original state with a jquery UI animation
jQuery("#container").animate({"marginLeft": ["0", 'easeOutExpo']}, {
duration: 700,
complete: function() {
jQuery('#content').css('width', 'auto');
jQuery('#contentLayer').css('display', 'none');
}
});
});
});
did you use the jQuery part for this like the onclick animation to show the menu.
please see here:
demo
fiddle
Related
I currently have a gallery of my portfolio set-up. Once you click on the image, it makes a pop-up. Inside of the pop-up is the image and text describing the design, copywriting ect. Once you hover over the image, it zooms. My problem is that one or two of the images, on css hover transform scale, scales to such a size that it is outside of the viewing port of the browser. It is in rectangular form, where other designs are only square. I would like the user of the website to move their cursor up and have the image move with the cursor, so the user can see the top of the image, and then have the user move their cursor down to the bottom of the image and have the image move with the cursor so that the user can see the bottom of the image. I have no idea how to do this, and I've searched everywhere but I can not find anything useful. I think it might use background-image and java-script but I really need help since I don't have knowledge of this.
html:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="CSS/mainwebsite.css">
<link rel="stylesheet" href="CSS/fonts/futura_bold_stylesheet.css">
<link rel="stylesheet" href="CSS/fonts/futura_book_stylesheet.css">
<link rel="stylesheet" href="CSS/fonts/futura_light_bt-stylesheet.css">
<link rel="stylesheet" href="CSS/fonts/futura_light_italic_stylesheet.css">
<link rel="stylesheet" href="CSS/fonts/futura_medium_stylesheet.css">
<script defer src="javascript/POPUP.js"></script>
<script src="javascript/Filters.js" defer></script>
<script defer src="javascript/tothetop.js"></script>
<script defer src="javascript/moveimage.js"></script>
<meta charset="utf-8">
<title>Ilana's creations</title>
</head>
<body class="helpme">
<div class="container">
<div class="mainnavbar">
<div class="navbar_left">
<p class="nav">
<a class="current" href="index.html">
CREATIONS
</a>
</p>
<p class="nav">
<a href="aboutme.html">
ABOUT ME
</a>
</p>
<p class="nav">
<a href="sayhi.html">
SAY HI!
</a>
</p>
</div>
<div class="navbar_right">
<p class="nav1">
<a href= target="_blank">
<img src="images/LI-In-Bug.png" alt="LinkedIn" class="icon" style="width:20px;height:20px">
</a>
</p>
<p class="nav1">
Ilana van Rooyen
</p>
</div>
</div>
<div class="searchbar" id="filtering">
<button class="searchbarbuttons active" onclick="filterSelection('all')">
ALL
</button>
<p class="search">
|
</p>
<button class="searchbarbuttons" onclick="filterSelection('design')">
DESIGN
</button>
<p class="search">
|
</p>
<button class="searchbarbuttons" onclick="filterSelection('copy')">
COPYWRITING
</button>
<p class="search">
|
</p>
<button class="searchbarbuttons" onclick="filterSelection('creativewriting')">
CREATIVE WRITING
</button>
<p class="search">
|
</p>
<button class="searchbarbuttons" onclick="filterSelection('videos')">
VIDEOS
</button>
<p class="search">
|
</p>
<button class="searchbarbuttons" onclick="filterSelection('socialmedia')">
SOCIAL MEDIA MANAGEMENT
</button>
</div>
<div class="case">
<!-- MODAL 22 BIGGER IMAGES -->
<div class="nobutton design" data-modal-target="#modal22">
<img src="Images/ZoetisMap_Pres.png" alt="ZoetisMap" width="250px" height="250px" class="gallerypics">
</div>
<div class="modal2" id="modal22" style="width: 50%; height: auto">
<div id="scroll">
<img src="Images/ZoetisMap_Design.png" alt="ZoetisMap" class="IMG3" style="width: 40%; height: 40%">
</div>
<div class="containerDB">
<div class="DESC">
<p class="DESC_text">
<strong class="title">
Layout design:
</strong>
Ilana van Rooyen
</p>
<p class="DESC_text">
<strong class="title">
Company:
</strong>
Agribonus
</p>
<p class="DESC_text">
<strong class="title">
Brief:
</strong>
Design a layout for an article provided by Zoetis for the Bonus magazine.
</p>
</div>
<div class="buttonclose">
<button data-close-button class="closebutton">
CLOSE
</button>
</div>
</div>
</div>
<!-- OVERLAY JAVA -->
<div id="overlay">
</div>
<!-- CLOSE DIV CASE -->
</div>
<div onclick="topFunction()" id="myBtn"><img src="images/outline_expand_circle_down_black_24dp.png" alt="tothetop" height="80%" width="80%"></div>
<div class="madewithlove" id="footer">
<p class="love"><i> This website was made by me, with a lot of <b>love</b>, a lot of <b>googling</b>, and a lot of <b>banging my head on the table</b> (I'm fine, thanks).</i></p>
</div>
<!-- CLOSE DIV CONTAINER -->
</div>
</body>
</html>
css:
#charset "utf-8";
/* CSS Document */
a {
color: inherit;
text-decoration: none;
position: inherit;
}
strong {
color: inherit;
text-decoration: none;
position: inherit;
}
p {
color: inherit;
text-decoration: none;
position: inherit;
margin: inherit;
line-spacing: inherit;
}
.helpme {
margin: 0;
}
.container {
Display: flex;
flex-direction: column;
min-height: 100vh;
}
.mainnavbar {
color: white;
background-color: white;
box-shadow: 0px 0px 5px 0.1px #707070;
border-bottom: 1px solid #D9D9D9;
overflow: hidden;
margin: 0px 0px 40px 0px;
padding: 10px;
position: sticky;
z-index: 100;
top: 0;
bottom: 0;
height: 50px;
}
.navbar_left {
margin-left: 20%;
float: left;
display: inline-flex;
font-family: 'futuralight';
color: #707070;
background-color: white;
}
.navbar_right {
margin-right: 20%;
float: right;
display: inline-flex;
font-family: 'futuralight';
font-weight: normal;
color: #707070;
background-color: white;
}
.nav {
margin: 20px 20px 20px 20px;
background-color: white;
transition-property: transform;
transition: 0.25s ease;
}
.nav .current {
font-family: 'futuramedium';
letter-spacing: 1px;
}
.nav1 {
margin: 20px 0px 20px 0px;
padding: 0px 20px 0px 20px;
background-color: white;
}
.nav::after {
content: '';
border-top: 1px solid #707070;
width: 100%;
position: absolute;
display: block;
transform: rotateY(90deg);
transition:transform 0.25s linear;
}
.nav:hover {
transform: scale(1.05);
font-family: 'futuramedium';
letter-spacing: 1px;
}
.nav:hover::after {
transform: rotate(0deg);
}
.icon:hover {
transform: scale(1.1)
}
.searchbar {
display: block;
color: #707070;
text-align: center;
margin: 0px 20%;
}
.search {
font-family: 'futuralight';
display: inline-block;
font-size: 12px;
color: #707070;
margin: 0% 0% 8% 0%;
}
.searchbarbuttons {
background: none;
border: none;
font-family: 'futuralight';
display: inline-block;
font-size: 12px;
color: #707070;
padding: 5px;
cursor: pointer;
}
.searchbarbuttons:hover {
font-family: 'futuramedium';
letter-spacing: 1px;
}
.searchbarbuttons.active {
font-family: 'futuramedium';
letter-spacing: 1px;
}
.case {
margin: 0px 20% 70px 20%;
text-align: center;
position: relative;
}
.gallerypics {
padding: 5px 5px 5px 5px;
cursor: pointer;
transition: 0.3s;
border-radius: 15px;
}
.gallerypics:hover {
transform: scale(1.5)
}
.nobutton {
display: none;
}
.show {
display: inline-block;
transition: 0.3s;
border-radius: 15px;
}
/* MODAL BIG IMAGES */
.modal2 {
background-color: #CBCBCB;
position: fixed;
display: block;
padding: 20px;
border-radius: 10px;
top: 10%;
left: 23.9%;
tranform: translate(-10%, -23.9%);
transform: scale(0);
transition: 200ms ease-in-out;
z-index: 10;
width: 50%;
height: 50%;
}
.modal2.active {
background-color: #CBCBCB;
position: fixed;
display: block;
padding: 20px;
border-radius: 10px;
top: 10%;
left: 23.9%;
tranform: translate(-10%, -23.9%);
transform: scale(1);
transition: 200ms ease-in-out;
z-index: 10;
width: 50%;
height: 50%;
vertical-align: middle;
}
.modal2 .IMG3 {
object-fit: contain;
height: auto;
width: auto;
max-height: 100%;
max-width: 100%;
border-radius: 15px;
display: inline-block;
float: left;
}
.modal2 .IMG3:hover {
cursor: zoom-in;
transform: scale(170%);
transition: 200ms ease-in;
transition-delay: 0.5s;
border-radius: 0px;
}
.modal2 .containerDB {
object-fit: contain;
height: auto;
width: auto;
max-height: 100%;
max-width: 100%;
float: right;
}
.modal2 .DESC {
border-radius: 15px;
background-color: white;
padding: 20px;
overflow: scroll;
overflow-x: hidden;
}
.modal2 .DESC_text {
font-family: 'futuralight';
font-size: 15px;
color: #707070;
line-height: 17pt;
text-align: left;
font-weight: normal;
}
.modal2 .DESC_text a:hover {
font-family: 'futuramedium';
font-size: 15px;
color: #707070;
line-height: 17pt;
text-align: left;
font-weight: normal;
}
.modal2 .title {
font-family: 'futuramedium';
font-weight: normal;
font-size: 15px;
color: #707070;
line-spacing: 20pt;
}
.modal2 .buttonclose {
margin: 20px 0px;
}
.modal2 .closebutton {
position: fixed;
bottom: 20px;
right: 20px;
border: #707070;
border-width: 1px;
cursor: pointer;
outline: solid 1px #707070;
background: white;
font-family: 'futurabold';
letter-spacing: 0.5px;
padding: 5px 10px;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
font-size: 1.5vh;
color: #707070;
font-weight: normal;
float: right;
}
.modal2 .closebutton:hover {
transition:transform 0.25s linear;
box-shadow: 1px 1px 1px 1px #707070;
}
/* MODAL BIG IMAGES END */
#overlay {
position: fixed;
opacity: 0;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: #707070;
pointer-events: none;
transition: 200ms ease-in-out;
}
#overlay.active {
opacity:70%;
pointer-events: all;
}
#myBtn {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
border: none;
outline: none;
cursor: pointer;
}
#myBtn:hover {
transform: scale(1.1);
}
.madewithlove {
background-color: white;
padding: 10px 10px;
box-shadow: -2px -2px 5px 0.1px #707070;
height: 60px;
left: 0;
bottom: 0;
right: 0;
margin-top: auto;
}
.love {
font-family: 'futuralight';
color: #707070;
padding: 20px;
text-align: center;
font-size: 13px;
}
javascript on pop-up only:
/* eslint-env es6 */
/* eslint-disable */
/* popup javascript */
const openModalButtons = document.querySelectorAll('[data-modal-target]')
const closeModalButtons = document.querySelectorAll('[data-close-button]')
const overlay = document.getElementById('overlay')
/* modal */
openModalButtons.forEach(button => {
button.addEventListener('click', () => {
const modal = document.querySelector(button.dataset.modalTarget)
openModal(modal)
})
})
/* close button modal */
closeModalButtons.forEach(button => {
button.addEventListener('click', () => {
const modal = button.closest('.modal2')
closeModal(modal)
})
})
function closeModal(modal) {
if (modal == null) return
modal.classList.remove('active')
overlay.classList.remove('active')
}
function openModal(modal) {
if (modal == null) return
modal.classList.add('active')
overlay.classList.add('active')
}
/* overlay open all */
overlay.addEventListener('click', () => {
const modals = document.querySelectorAll('.modal2.active')
modals.forEach(modal => {
closeModal(modal)
})
})
Images for download: https://drive.google.com/drive/folders/1OGD5iuyxcVekdr-pTjfkDi5o6uF4LVH5
I have an html page which is using center aligned text. For some reason, the top title (#pageTitle id) is off by a bit, and looks like it has some added whitespace to the left of it. I tried to reproduce the problem here, but in the stack overflow editor, the formatting was completely wonky. Hopefully the scripts will be able to run on your machines. If anyone has any insight as to why this is happening I'd appreciate it. Thanks!
body {
padding: 0;
margin: 0;
}
/* center aligned vertically and horizontally*/
.totalCenter {
position: relative !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
}
/* centered horizontally */
.center {
display: block;
margin-left: auto;
margin-right: auto;
}
/* div for main page content */
#mainDiv {
width: 500px;
max-width: 500px;
}
.title {
padding: 0px;
margin: 0px;
margin-bottom: 15px;
}
/* login title */
#pageTitle {
font-size: 65px;
color: black;
margin-left: 0px;
padding-left: 0px;
}
#tagline {
font-size: 30px;
color: rgb(79, 79, 79);
margin-bottom: 22px;
}
/* input for email/password */
.infoInput {
text-align: center;
background-color: white;
border-radius: 8px;
margin-bottom: 10px;
outline-width: 0;
padding: 5px;
width: 100%;
height: 50px;
font-size: 22px;
}
/* login/register button */
.submitButton {
color: black;
background-color: rgb(255, 223, 0);
border: none;
border-radius: 4px;
border-bottom: 4px solid rgb(218, 189, 0);
cursor: pointer;
outline: none;
width: 100%;
height: 55px;
left: 10%;
font-size: 25px;
margin-top: 25px;
}
.submitButton:hover {
background: rgb(235, 204, 0);
transition: all 0.2s ease;
cursor: pointer;
}
.submitButton:active {
border: 0;
transition: all 0.2s ease;
}
.topBarButton {
border: none;
outline: none;
border-radius: 5px;
cursor: pointer;
width: 90px;
height: 40px;
margin: 10px;
font-size: 20px;
float: right;
}
#login {
color: black;
background-color: gold;
}
#register {
background-color: black;
color: gold;
}
#logo {
margin: 10px;
width: 40px;
height: 40px;
float: left;
}
<head>
<link href="/home/style/style.css" rel="stylesheet" />
</head>
<body>
<div id="topbar">
<img id="logo" src="/images/logo.png">
<button class="topBarButton" id="register">
Register
</button>
<button class="topBarButton" id="login">
Login
</button>
</div>
<div id="mainDiv" class="totalCenter">
<h1 id="pageTitle" class="title">title</h1>
<h2 id="tagline" class="title">page tagline</h2>
<input class="infoInput center" placeholder="Your Email..." id="email" name="email" type="email" required />
<button class="submitButton center">Next</button>
</div>
</body>
The title got padding because before you move it using left top and transform the logo image (which have float attribute) take a place at the left.
If you remove the top left and transform from the mainDiv you will see following:
This is where this whitespace come from.
You should add an element to clear:both under the toolbar (see snipped below)
body {
padding: 0;
margin: 0;
}
/* ADDED THIS*/
.clear{clear:both}
/* center aligned vertically and horizontally*/
.totalCenter {
position: relative !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, 50%) !important;
}
/* centered horizontally */
.center {
display: block;
margin-left: auto;
margin-right: auto;
}
/* div for main page content */
#mainDiv {
width: 500px;
max-width: 500px;
}
.title {
padding: 0px;
margin: 0px;
margin-bottom: 15px;
}
/* login title */
#pageTitle {
font-size: 65px;
color: black;
margin-left: 0px;
padding-left: 0px;
}
#tagline {
font-size: 30px;
color: rgb(79, 79, 79);
margin-bottom: 22px;
}
/* input for email/password */
.infoInput {
text-align: center;
background-color: white;
border-radius: 8px;
margin-bottom: 10px;
outline-width: 0;
padding: 5px;
width: 100%;
height: 50px;
font-size: 22px;
box-sizing:border-box;
}
/* login/register button */
.submitButton {
color: black;
background-color: rgb(255, 223, 0);
border: none;
border-radius: 4px;
border-bottom: 4px solid rgb(218, 189, 0);
cursor: pointer;
outline: none;
width: 100%;
height: 55px;
left: 10%;
font-size: 25px;
margin-top: 25px;
}
.submitButton:hover {
background: rgb(235, 204, 0);
transition: all 0.2s ease;
cursor: pointer;
}
.submitButton:active {
border: 0;
transition: all 0.2s ease;
}
.topBarButton {
border: none;
outline: none;
border-radius: 5px;
cursor: pointer;
width: 90px;
height: 40px;
margin: 10px;
font-size: 20px;
float: right;
}
#login {
color: black;
background-color: gold;
}
#register {
background-color: black;
color: gold;
}
#logo {
margin: 10px;
width: 40px;
height: 40px;
float: left;
}
<head>
<link href="/home/style/style.css" rel="stylesheet" />
</head>
<body>
<div id="topbar">
<img id="logo" src="/images/logo.png">
<button class="topBarButton" id="register">
Register
</button>
<button class="topBarButton" id="login">
Login
</button>
<div class="clear"></div><!-- ADDED THIS -->
</div>
<div id="mainDiv" class="totalCenter">
<h1 id="pageTitle" class="title">title</h1>
<h2 id="tagline" class="title">page tagline</h2>
<input class="infoInput center" placeholder="Your Email..." id="email" name="email" type="email" required />
<button class="submitButton center">Next</button>
</div>
</body>
You can use flex to align items which makes it easier:
body {
padding: 0;
margin: 0;
display: flex;
align-items: 'center';
justify-content: 'center';
}
.totalCenter {
display: flex;
justify-content: 'center';
}
When you set the display property to flex of a class you can use these properties:
align-items : aligns items vertically.
justify-content : alings items horizontally.
Flex is really cool if you cant to know more you can check out these two articles:
Aligning Items in a Flex Container
A Complete Guide to Flexbox
I have a fancyBox which works well besides the fact, that on certain images it slides the same image for few times. Here is the web page.
I do not use any other jQuery or my own scripts, only fancyBox scripts.
Here is the code I am using:
/*! fancyBox v2.1.5 fancyapps.com | fancyapps.com/fancybox/#license */
.fancybox-wrap,
.fancybox-skin,
.fancybox-outer,
.fancybox-inner,
.fancybox-image,
.fancybox-wrap iframe,
.fancybox-wrap object,
.fancybox-nav,
.fancybox-nav span,
.fancybox-tmp
{
padding: 0;
margin: 0;
border: 0;
outline: none;
vertical-align: top;
}
.fancybox-wrap {
position: absolute;
top: 0;
left: 0;
z-index: 8020;
}
.fancybox-skin {
position: relative;
background: #f9f9f9;
color: #444;
text-shadow: none;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.fancybox-opened {
z-index: 8030;
}
.fancybox-opened .fancybox-skin {
-webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}
.fancybox-outer, .fancybox-inner {
position: relative;
}
.fancybox-inner {
overflow: hidden;
}
.fancybox-type-iframe .fancybox-inner {
-webkit-overflow-scrolling: touch;
}
.fancybox-error {
color: #444;
font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
margin: 0;
padding: 15px;
white-space: nowrap;
}
.fancybox-image, .fancybox-iframe {
display: block;
width: 100%;
height: 100%;
}
.fancybox-image {
max-width: 100%;
max-height: 100%;
}
#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
background-image: url('fancybox_sprite.png');
}
#fancybox-loading {
position: fixed;
top: 50%;
left: 50%;
margin-top: -22px;
margin-left: -22px;
background-position: 0 -108px;
opacity: 0.8;
cursor: pointer;
z-index: 8060;
}
#fancybox-loading div {
width: 44px;
height: 44px;
background: url('fancybox_loading.gif') center center no-repeat;
}
.fancybox-close {
position: absolute;
top: -18px;
right: -18px;
width: 36px;
height: 36px;
cursor: pointer;
z-index: 8040;
}
.fancybox-nav {
position: absolute;
top: 0;
width: 40%;
height: 100%;
cursor: pointer;
text-decoration: none;
background: transparent url('blank.gif'); /* helps IE */
-webkit-tap-highlight-color: rgba(0,0,0,0);
z-index: 8040;
}
.fancybox-prev {
left: 0;
}
.fancybox-next {
right: 0;
}
.fancybox-nav span {
position: absolute;
top: 50%;
width: 36px;
height: 34px;
margin-top: -18px;
cursor: pointer;
z-index: 8040;
visibility: hidden;
}
.fancybox-prev span {
left: 10px;
background-position: 0 -36px;
}
.fancybox-next span {
right: 10px;
background-position: 0 -72px;
}
.fancybox-nav:hover span {
visibility: visible;
}
.fancybox-tmp {
position: absolute;
top: -99999px;
left: -99999px;
visibility: hidden;
max-width: 99999px;
max-height: 99999px;
overflow: visible !important;
}
/* Overlay helper */
.fancybox-lock {
overflow: hidden !important;
width: auto;
}
.fancybox-lock body {
overflow: hidden !important;
}
.fancybox-lock-test {
overflow-y: hidden !important;
}
.fancybox-overlay {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
display: none;
z-index: 8010;
background: url('fancybox_overlay.png');
}
.fancybox-overlay-fixed {
position: fixed;
bottom: 0;
right: 0;
}
.fancybox-lock .fancybox-overlay {
overflow: auto;
overflow-y: scroll;
}
/* Title helper */
.fancybox-title {
visibility: hidden;
font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
position: relative;
text-shadow: none;
z-index: 8050;
}
.fancybox-opened .fancybox-title {
visibility: visible;
}
.fancybox-title-float-wrap {
position: absolute;
bottom: 0;
right: 50%;
margin-bottom: -35px;
z-index: 8050;
text-align: center;
}
.fancybox-title-float-wrap .child {
display: inline-block;
margin-right: -100%;
padding: 2px 20px;
background: transparent; /* Fallback for web browsers that doesn't support RGBa */
background: rgba(0, 0, 0, 0.8);
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
text-shadow: 0 1px 2px #222;
color: #FFF;
font-weight: bold;
line-height: 24px;
white-space: nowrap;
}
.fancybox-title-outside-wrap {
position: relative;
margin-top: 10px;
color: #fff;
}
.fancybox-title-inside-wrap {
padding-top: 10px;
}
.fancybox-title-over-wrap {
position: absolute;
bottom: 0;
left: 0;
color: #fff;
padding: 10px;
background: #000;
background: rgba(0, 0, 0, .8);
}
/*Retina graphics!*/
#media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5){
#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
background-image: url('fancybox_sprite#2x.png');
background-size: 44px 152px; /*The size of the normal image, half the size of the hi-res image*/
}
#fancybox-loading div {
background-image: url('fancybox_loading#2x.gif');
background-size: 24px 24px; /*The size of the normal image, half the size of the hi-res image*/
}
}
#albums-bar-shape {
width: 1141px;
height: 25px;
margin: 0 auto 0px auto;
position: relative;
/*background-color: #e7e7e7;*/
}
#album {
width: 1150px;
height: 850px;
margin: 0 auto 30px auto;
position: relative;
/*background-color: #afd9ee;*/
top: 20px;
}
.albums-bar {
position: relative;
float: right;
left: -50%;
}
.albums-bar ul {
list-style: none;
position: relative;
left: 50%;
}
.albums-bar li {
float: left;
margin-right: 50px;
list-style-type: none;
}
.albums-bar a {
color: #8c8c8c;
font-size: 13pt;
font-family: "Segoe UI", "Arial", "Courier New";
text-decoration: none;
}
.albums-bar a:hover {
color: #222222;
padding-bottom: 1px;
border-bottom: 2px solid #222222;
text-decoration: none;
}
#selected-album {
color: #222222;
padding-bottom: 1px;
border-bottom: 2px solid #222222;
}
/*Vertical photos formatting*/
div.img {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 275px;
}
div.img:hover {
border: 1px solid #777;
}
div.img img {
width: 100%;
height: auto;
}
/*Horizontal photos formatting*/
div.img-wide {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 370px;
}
div.img-wide:hover {
border: 1px solid #777;
}
div.img-wide img {
width: 100%;
height: auto;
}
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
body {
margin: 0px;
padding: 0px;
background-image: url(images/img-noise-361x370.png (1));
background-repeat: repeat;
}
#top {
width: 650px;
height: 120px;
margin: 0 auto 30px auto;
/*background-color: #e7e7e7;*/
}
#menu-bar {
position: relative;
float: right;
left: -50%;
}
#menu-bar ul {
list-style: none;
position: relative;
left: 50%;
margin-top: 10px;
}
#menu-bar li {
float: left;
position: relative;
margin-right: 55px;
}
#menu-bar a {
color: #8c8c8c;
font-size: 12pt;
font-family: "Segoe UI", "Arial", "Courier New";
text-decoration: none;
}
#selected {
color: #000000;
}
#selected > a {
color: #000000;
}
#menu-bar a:hover {
color: #222222;
text-decoration: none;
}
#images {
width: 533px;
height: 800px;
margin: 0 auto 30px auto;
position: relative;
/*background-color: #afd9ee;*/
}
#logo {
width: 650px;
height: auto;
margin: 30px auto 30px auto;
display: block;
}
/* Dropdown Button */
.dropbtn {
cursor: pointer;
color: #8c8c8c;
font-size: 12pt;
font-family: "Segoe UI", "Arial", "Courier New";
text-decoration: none;
margin-bottom: 5px;
/*background: #dddddd;*/
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
}
/* Links inside the dropdown */
.dropdown-content a {
color: 8c8c8c;
text-decoration: none;
display: block;
font-size: 10pt !important;
margin-bottom: 2px;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
color: #000000;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
color: #565656;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="../../css/custom.css">
<link rel="stylesheet" type="text/css" href="../../css/dropdown.css">
<link rel="stylesheet" type="text/css" href="../../css/crossfade.css">
<link rel="stylesheet" type="text/css" href="../../css/portfolio.css">
<link rel="stylesheet" href="../../src/css/bootstrap.min.css"/>
<title>Car Photos</title>
<!--[if IE]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- Add fancyBox -->
<link rel="stylesheet" href="../../source/jquery.fancybox.css" type="text/css" media="screen" />
<script type="text/javascript" src="../../source/jquery.fancybox.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
</head>
<body>
<img id="logo" src="http://feanor.cz/images/logo_studio.gif">
<div id="top">
<div id="menu-bar">
<ul>
<li>Home</li>
<li class="dropdown">
Photo
<div class="dropdown-content">
Fashion portraits
Art portraits
Product photography
Interior photography
</div>
</li>
<li>Paintings</li>
<li>Contact</li>
<li>About Us</li>
</ul>
</div>
</div>
<div id="albums-bar-shape">
<div class="albums-bar">
<ul>
<li>Fashion portraits</li>
<li>Art portraits</li>
<li><a id="selected-album" href="#">Car photography</a></li>
<li>Product photography</li>
<li>Interior photography</li>
</ul>
</div>
</div>
<div id="album">
<div class="img-wide">
<a class="fancybox" rel="group" href="1.jpg">
<img src="1.jpg" alt="image 1" width="300" height="200">
</a>
</div>
<div class="img-wide">
<a class="fancybox" rel="group" href="2.jpg">
<img src="2.jpg" alt="image 2" width="300" height="200">
</a>
</div>
<div class="img-wide">
<a class="fancybox" rel="group" href="6.jpg">
<img src="6.jpg" alt="image 3" width="300" height="200">
</div>
<div class="img-wide">
<a class="fancybox" rel="group" href="4.jpg">
<img src="4.jpg" alt="image 4" width="300" height="200">
</a>
</div>
<div class="img-wide">
<a class="fancybox" rel="group" href="5.jpg">
<img src="5.jpg" alt="image 5" width="300" height="200">
</a>
</div>
<div class="img-wide">
<a class="fancybox" rel="group" href="3.jpg">
<img src="3.jpg" alt="image 6" width="300" height="200">
</div>
<div class="img-wide">
<a class="fancybox" rel="group" href="7.jpg">
<img src="7.jpg" alt="image 7" width="300" height="200">
</a>
</div>
<div class="img-wide">
<a class="fancybox" rel="group" href="8.jpg">
<img src="8.jpg" alt="image 8" width="300" height="200">
</a>
</div>
</div>
</body>
</html>
You forgot to close a few of the anchor tags. #6 and #3.
As a result, the browser adds another link which makes fancyBox think there are duplicate images. Here's how Chrome is compiling the code:
I want to go to a specific section of my website when I click on the link in the menu bar for that section of the website, so you do not have to scroll through all the content, but to have links to the different sections. I've read that you can do this with jQuery and make an animation for it so that the page can smoothly go to that section of the website.
Here's the HTML code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript" src="java.js"></script>
<head>
<link rel="stylesheet" href="css/style.css" type="text/css"/>
<title>Test Website</title>
<meta name="" content="">
<script type="text/javascript">
</script>
</head>
<body>
<header>
<div id="title">
<h1 class="headertext">My Test Website</h1>
</div>
<div id="menubar">
<ul>
<li>Homepage</li>
<li>Homepage</li>
<li>Homepage</li>
<li>Homepage</li>
<li>Homepage</li>
</ul>
</div>
</header>
<div class="hide">
</div>
<div id="container">
<div id="leftmenu">
<ul>
<li>Homepage</li>
<li>Homepage</li>
<li>Homepage</li>
<li>Homepage</li>
<li>Homepage</li>
</ul>
<div id="triangle"></div>
</div>
<div id="content">
<h1>Contentpage</h1></br>
Picture slideshow
</br>
</br>
<div class="slider">
<img id="1" src="images/car1.jpg" border="0" alt="car1"/>
<img id="2" src="images/car2.jpg" border="0" alt="car2"/>
<img id="3" src="images/car3.jpg" border="0" alt="car3"/>
<img id="4" src="images/car4.jpg" border="0" alt="car4"/>
<img id="5" src="images/car5.jpg" border="0" alt="car5"/>
</div><!--slider end-->
<div class="shadow"></div>
<div class="borderbottom"></div>
</div><!--content div-->
</div>
</body>
</html>
And here is the CSS code:
*{
margin: 0 auto 0 auto;
text-align: left;
color: #ffffff;
}
body{
margin: 0;
text-align: left;
font-size: 13px;
font-family: arial, helvetica, sens-serif;
color: #ffffff;
width: 1200px;
height: auto;
background: #f4f4f4;
}
header {
position: fixed;
width: 100%;
top: 0;
background: rgba(0,0,0,.8);
z-index: 10;
}
h1{
color: black;
text-align: center;
}
.hide
{
position: fixed;
width: 100%;
top: 0;
background: rgba(255,255,255,1);
z-index:5;
height: 123px;
}
.headertext{
margin-top: 15px;
text-align: center;
color: white;
}
#title{
font-size: 20px;
margin: -10px 0 30px 0;
width: 100%;
height: 70px;
border-top: 2px solid #000000;
border-bottom: 2px solid #000000;
}
#menubar{
margin-top: 10px;
float: left;
clear: both;
width: 100%;
height: 20px;
list-style: none;
border-bottom: 2px solid #010000;
}
#menubar ul{
list-style: none;
margin-top: -15px;
text-align: center;
}
#menubar ul li{
list-style: none;
display: inline;
padding-right: 80px;
}
#menubar ul li a{
color: #ffffff;
text-decoration: none;
font-size: 15px;
font-weight: bold;
}
#menubar ul li a:hover{
border-bottom: 2px solid #ffffff;
}
#container{
width: 1200px;
height: 1400px;
}
#leftmenu{
position: fixed;
margin-top: 123px;
margin-left: 50px;
padding-top: 20px;
float: left;
width: 160px;
height: 350px;
list-style: none;
background: rgba(0,0,0,0.8);
color: #ffffff;
border-left: 2px solid #010000;
border-right: 2px solid #010000;
}
#leftmenu ul li{
display: block;
padding-bottom: 50px;
}
#leftmenu ul li a{
font-weight: bold;
text-decoration: none;
color: #ffffff;
font-size: 15px;
text-align: center;
}
#leftmenu ul li a:hover{
border-bottom: 2px solid #ffffff;
transition: opacity .5s ease-in;
opacity: 1;
}
#triangle{
margin-top: 12px;
margin-left: -1px;
width: 0px;
height: 0;
border-top: 80px solid rgba(0,0,0,0.8);
border-left: 82px solid transparent;
border-right: 82px solid transparent;
}
#content{
text-align: left;
margin-left: 100px;
width: 1000px;
padding-top: 150px;
padding-left: 160px;
color: #000000;
font-weight: bold;
text-align: center;
font-size: 15px;
}
.slider{
margin-top: 20px;
width: 600px;
height: 400px;
overflow: hidden;
margin: auto;
border-radius: 10px;
vertical-align: middle;
}
.shadow{
background-image:url(../images/shadow.png);
background-repeat: no-repeat;
background-position: top;
width: 850px;
height: 144px;
vertical-align: middle;
margin-top: -50px;
}
.slider img{
width: 600px;
height: 400px;
display: none;
}
.borderbottom{
border: 6px solid rgba(0,0,0,0.8);
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
width: 1000px;
position: fixed;
margin-top: 20px;
}
If you have jQuery loaded you could try like this, no plugin required just jquery will do...
HTML:
<div id="menubar">
<ul>
<li>Homepage</li>
<li>Homepage</li>
<li>Homepage</li>
........all the menu items-------
</ul>
JS:
$('#menubar ul li a').on('click',function(event){
var $anchor = $(this);
$('html, body').animate({
scrollTop: $($anchor.attr('href')).offset().top + "px"
}, 1500);
event.preventDefault();
});
This is the working fiddle
The standard way is to use named anchors:
section
This link will navigate to index.html and the browser will scroll to the element with ID or NAME section if it exists, f.ex:
<section id="section"></section>
It also works for the name attribute, but it’s rarely used these days:
<section name="section"></section>
If you want jQuery to animate this behaviour, it’s a good idea to start with the standard implementation above, then add some enhanced functionality, f.ex:
$('#menubar').on('click', 'a', function(e) {
e.preventDefault(); // prevents default scrolling
var y = $(this.hash).offset().top; // grabs the #id element offset location
$('html,body').animate({scrollTop: y}); // animate the scroll
});
To scroll to a particular element on the page, the element must have an ID :
<a class="scroll" href="#myElement">Link</a>
<div id="myElement"></div>
This anchor will make the document scroll to the top of the element #myElement.
Then animate it with JS :
$('a.scroll').click(function(){
var href = $(this).attr('href');
var dest = $(href).offset().top;
$('html, body').animate({
scrollTop: dest;
}, 1000);
return false;
});
check out the scrolTo in jquery
take a look at this : http://demos.flesler.com/jquery/scrollTo/
Ok, so I know that this seems like I am just being lazy but I am so close to ripping out all of my hair! I have trawled through so many websites and after 24 hours need help from the Stack!
I am trying to make a dropdown menu that when a level 1 parent is CLICKED all of its children appear below pushing the page content down and when the next level 1 parent is clicked the previous children disappear and the new ones come in.
From my research I know that I need to utilize toggle but I have confused the hell out of myself and I am not much of a JS guy. I am also aware that I will need to use overflow hidden in my css for the midnav. I would also like to use some of the jQuery effects to slide the children ul up and down, would this mean I would have to write the whole thing using jQuery?
Any help would be greatly appreciated. an example of what I want to do is here at
http://www.andersenwindows.com/
and here is what I have so far:
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">
<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"/>
</head>
<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="#" >About</a></li>
<li><a href="#" >Home</a>
<ul>
<li>test2</li>
<li>test3</li>
<li>test1</li>
</ul>
</li>
<li>Work</li>
<li>Clients</li>
<li>Contact</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: 970px;
height:40px;
background: #f1f2f3;
color: #fff;
}
/* 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 *?
Thanks,
C
I got lost with all the left/right nav stuff so I just did one with the middle nav. You can think of it as a jumping off point. http://jsfiddle.net/MatthewDavis/4syjv/
Here's the JS... it's pretty generic but you should be able to edit to suit.
$(document).ready(function () {
$('a').on('click', function(event){
event.preventDefault();
$('#mid-nav > ul').find('ul').slideUp(
function(){
$(this).closest('li').find('ul').slideToggle();
});
});
});
Are you looking for something like:
$('#div1').click(function() {
if( /* check if already visible */)
$('div1').toggle(); //also do-able with $('div1').slideToggle();
$('div2').hide();
}
but first you would hide all your divs first and check the current div