I am designing a web page. When we click the content of div named mail, how can I show a popup window containing a label email and text box?
First the CSS - tweak this however you like:
a.selected {
background-color:#1F75CC;
color:white;
z-index:100;
}
.messagepop {
background-color:#FFFFFF;
border:1px solid #999999;
cursor:default;
display:none;
margin-top: 15px;
position:absolute;
text-align:left;
width:394px;
z-index:50;
padding: 25px 25px 20px;
}
label {
display: block;
margin-bottom: 3px;
padding-left: 15px;
text-indent: -15px;
}
.messagepop p, .messagepop.div {
border-bottom: 1px solid #EFEFEF;
margin: 8px 0;
padding-bottom: 8px;
}
And the JavaScript:
function deselect(e) {
$('.pop').slideFadeToggle(function() {
e.removeClass('selected');
});
}
$(function() {
$('#contact').on('click', function() {
if($(this).hasClass('selected')) {
deselect($(this));
} else {
$(this).addClass('selected');
$('.pop').slideFadeToggle();
}
return false;
});
$('.close').on('click', function() {
deselect($('#contact'));
return false;
});
});
$.fn.slideFadeToggle = function(easing, callback) {
return this.animate({ opacity: 'toggle', height: 'toggle' }, 'fast', easing, callback);
};
And finally the html:
<div class="messagepop pop">
<form method="post" id="new_message" action="/messages">
<p><label for="email">Your email or name</label><input type="text" size="30" name="email" id="email" /></p>
<p><label for="body">Message</label><textarea rows="6" name="body" id="body" cols="35"></textarea></p>
<p><input type="submit" value="Send Message" name="commit" id="message_submit"/> or <a class="close" href="/">Cancel</a></p>
</form>
</div>
Contact Us
Here is a jsfiddle demo and implementation.
Depending on the situation you may want to load the popup content via an ajax call. It's best to avoid this if possible as it may give the user a more significant delay before seeing the content. Here couple changes that you'll want to make if you take this approach.
HTML becomes:
<div>
<div class="messagepop pop"></div>
Contact Us
</div>
And the general idea of the JavaScript becomes:
$("#contact").on('click', function() {
if($(this).hasClass("selected")) {
deselect();
} else {
$(this).addClass("selected");
$.get(this.href, function(data) {
$(".pop").html(data).slideFadeToggle(function() {
$("input[type=text]:first").focus();
});
}
}
return false;
});
Check out jQuery UI Dialog. You would use it like this:
The jQuery:
$(document).ready(function() {
$("#dialog").dialog();
});
The markup:
<div id="dialog" title="Dialog Title">I'm in a dialog</div>
Done!
Bear in mind that's about the simplest use-case there is, I would suggest reading the documentation to get a better idea of just what can be done with it.
I use a jQuery plugin called ColorBox, it is
Very easy to use
lightweight
customizable
the nicest popup dialog I have seen for jQuery yet
Visit this url
Jquery UI Dialog Demos
Try the Magnific Popup, it's responsive and weights just around 3KB.
I think this is a great tutorial on writing a simple jquery popup. Plus it looks very beautiful
There is a good, simple example of exactly this, here: http://www.queness.com/post/77/simple-jquery-modal-window-tutorial
Extremely Lightweight Modal popup plugin.
POPELT - http://welbour.com/labs/popelt/
It is lightweight, supports nested popups, object oriented, supports dynamic buttons, responsive, and lot more.
Next update will include Popup Ajax form submissions etc.
Feel free to use and tweet feedback.
Let's try .... How to create a simple popup by using HTML, CSS, and jquery ...
$(function() {
// Open Popup
$('[popup-open]').on('click', function() {
var popup_name = $(this).attr('popup-open');
$('[popup-name="' + popup_name + '"]').fadeIn(300);
});
// Close Popup
$('[popup-close]').on('click', function() {
var popup_name = $(this).attr('popup-close');
$('[popup-name="' + popup_name + '"]').fadeOut(300);
});
// Close Popup When Click Outside
$('.popup').on('click', function() {
var popup_name = $(this).find('[popup-close]').attr('popup-close');
$('[popup-name="' + popup_name + '"]').fadeOut(300);
}).children().click(function() {
return false;
});
});
body {
font-family:Arial, Helvetica, sans-serif;
}
p {
font-size: 16px;
line-height: 26px;
letter-spacing: 0.5px;
color: #484848;
}
/* Popup Open button */
.open-button{
color:#FFF;
background:#0066CC;
padding:10px;
text-decoration:none;
border:1px solid #0157ad;
border-radius:3px;
}
.open-button:hover{
background:#01478e;
}
.popup {
position:fixed;
top:0px;
left:0px;
background:rgba(0,0,0,0.75);
width:100%;
height:100%;
display:none;
}
/* Popup inner div */
.popup-content {
width: 700px;
margin: 0 auto;
box-sizing: border-box;
padding: 40px;
margin-top: 100px;
box-shadow: 0px 2px 6px rgba(0,0,0,1);
border-radius: 3px;
background: #fff;
position: relative;
}
/* Popup close button */
.close-button {
width: 25px;
height: 25px;
position: absolute;
top: -10px;
right: -10px;
border-radius: 20px;
background: rgba(0,0,0,0.8);
font-size: 20px;
text-align: center;
color: #fff;
text-decoration:none;
}
.close-button:hover {
background: rgba(0,0,0,1);
}
#media screen and (max-width: 720px) {
.popup-content {
width:90%;
}
}
<!DOCTYPE html>
<html>
<head>
<title> Popup </title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<a class="open-button" popup-open="popup-1" href="javascript:void(0)"> Popup
Preview</a>
<div class="popup" popup-name="popup-1">
<div class="popup-content">
<h2>Title of Popup </h2>
<p>Popup 1 content will be here. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Aliquam consequat diam ut tortor
dignissim, vel accumsan libero venenatis. Nunc pretium volutpat
convallis. Integer at metus eget neque hendrerit vestibulum.
Aenean vel mattis purus. Fusce condimentum auctor tellus eget
ullamcorper. Vestibulum sagittis pharetra tellus mollis vestibulum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<a class="close-button" popup-close="popup-1" href="javascript:void(0)">x</a>
</div>
</div>
</body>
</html>
Simple popup window by using html5 and javascript.
html:-
<dialog id="window">
<h3>Sample Dialog!</h3>
<p>Lorem ipsum dolor sit amet</p>
<button id="exit">Close Dialog</button>
</dialog>
<button id="show">Show Dialog</button>
JavaScript:-
(function() {
var dialog = document.getElementById('window');
document.getElementById('show').onclick = function() {
dialog.show();
};
document.getElementById('exit').onclick = function() {
dialog.close();
};
})();
Here is a very simple popup:
<!DOCTYPE html>
<html>
<head>
<style>
#modal {
position:absolute;
background:gray;
padding:8px;
}
#content {
background:white;
padding:20px;
}
#close {
position:absolute;
background:url(close.png);
width:24px;
height:27px;
top:-7px;
right:-7px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
var modal = (function(){
// Generate the HTML and add it to the document
$modal = $('<div id="modal"></div>');
$content = $('<div id="content"></div>');
$close = $('<a id="close" href="#"></a>');
$modal.hide();
$modal.append($content, $close);
$(document).ready(function(){
$('body').append($modal);
});
$close.click(function(e){
e.preventDefault();
$modal.hide();
$content.empty();
});
// Open the modal
return function (content) {
$content.html(content);
// Center the modal in the viewport
$modal.css({
top: ($(window).height() - $modal.outerHeight()) / 2,
left: ($(window).width() - $modal.outerWidth()) / 2
});
$modal.show();
};
}());
// Wait until the DOM has loaded before querying the document
$(document).ready(function(){
$('a#popup').click(function(e){
modal("<p>This is popup's content.</p>");
e.preventDefault();
});
});
</script>
</head>
<body>
<a id='popup' href='#'>Simple popup</a>
</body>
</html>
More flexible solution can be found in this tutorial: http://www.jacklmoore.com/notes/jquery-modal-tutorial/
Here's close.png for the sample.
ONLY CSS POPUP LOGIC! TRY DO IT . EASY! I think this mybe be hack popular in future
OPEN
<div id="openModal" class="modalDialog">
<div>
X
<h2>MODAL</h2>
</div>
</div>
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
display: none;
pointer-events: none;
}
.modalDialog:target {
display: block;
pointer-events: auto;
}
.modalDialog > div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
Related
I integrated this slider into my website after I find that it is not working on IE11 and safari :
Here is a link to the slider's code :
https://codepen.io/gvrban/pen/qjbpaa
IT works fine in Chrome and in IE11 I have tried changing the style but the problem persist. I think it is related to the flexbox.
HTML part (only one slide ):
<div class="slider">
<div class="slider-wrapper flex">
<div class="slide flex">
<div class="slide-image slider-link next"><img src="https://goranvrban.com/codepen/img6.jpg"><div class="overlay"></div></div>
<div class="slide-content">
<div class="slide-date">30.10.2017.</div>
<div class="slide-title">LOREM IPSUM DOLOR SITE MATE, AD EST ABHORREANT</div>
<div class="slide-text">Lorem ipsum dolor sit amet, ad est abhorreant efficiantur, vero oporteat apeirian in vel. Et appareat electram appellantur est. Ei nec duis invenire. Cu mel ipsum laoreet, per rebum omittam ex. </div>
<div class="slide-more">READ MORE</div>
</div>
</div>
</div>
<div class="arrows">
</div>
</div>
CSS part:
#import url('https://fonts.googleapis.com/css?family=Roboto');
body {background-color: #0D1B2B; overflow-x: hidden; font-family: roboto; -webkit-font-smoothing: antialiased; margin: 0;}
.flex { display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-justify-content: flex-start; justify-content: flex-start;}
.slider-wrapper div {position: relative;}
.slider-wrapper {margin-top: 5vw; margin-left: 11vw;}
.slide-image {height: 24vw;}
.slide-image img {width: 24vw; cursor: pointer;}
.slide-content {width: 25vw; color: #fff; padding:3vw 18vw 3vw 9vw;}
.slide-date {color: #0a8acb; font-size: 1.1vw; font-weight: 400; letter-spacing: 0.1vw; padding-bottom: 1.4vw;}
.slide-title {font-size: 1.2vw; font-weight: 400; letter-spacing: 0.1vw; line-height: 1.55vw; padding-bottom: 1.8vw;}
.slide-text {font-size: 0.80vw; line-height: 1.2vw; opacity: 0.8; padding-bottom: 4vw;}
.slide-more {font-weight: 400; letter-spacing: 0.1vw; float: left; font-size: 0.9vw;}
.slide-bullet {width: 0.5vw; height: 0.5vw; background-color: #0b8bcc; border-radius: 200%; position: relative; margin-left: 1.2vw;}
.slide-nav {margin-left: 64vw; margin-top: -5.5vw;}
div.overlay-blue {width: 100%; height: 100%; position: absolute; top: 0; transition: 0.5s ease all;}
div.overlay-blue:hover {background-color: rgba(13, 27, 43, 0.5);}
.arrows{width: 3.5vw; margin-top: -5.8vw; margin-left: 72vw; position: relative;}
.arrow {display: inline-block; position: absolute; width: 1.2vw; height: 1.2vw; background: transparent; text-indent: -9999px; border-top: 0.15vw solid #fff; border-left: 0.15vw solid #fff; transition: all .1s ease-in-out; text-decoration: none; color: transparent;
}
.arrow:hover {border-color: #0A8ACB; border-width: 0.25vw;
}
.arrow:before {display: block; height: 200%; width: 200%; margin-left: -50%; margin-top: -50%; content: ""; transform: rotate(45deg);}
.arrow.prev {transform: rotate(-45deg); left: 0;}
.arrow.next {transform: rotate(135deg); right: 0;}
JS part:
( function($) {
$(document).ready(function() {
var s = $('.slider'),
sWrapper = s.find('.slider-wrapper'),
sItem = s.find('.slide'),
btn = s.find('.slider-link'),
sWidth = sItem.width(),
sCount = sItem.length,
slide_date = s.find('.slide-date'),
slide_title = s.find('.slide-title'),
slide_text = s.find('.slide-text'),
slide_more = s.find('.slide-more'),
slide_image = s.find('.slide-image img'),
sTotalWidth = sCount * sWidth;
sWrapper.css('width', sTotalWidth);
sWrapper.css('width', sTotalWidth);
var clickCount = 0;
btn.on('click', function(e) {
e.preventDefault();
if( $(this).hasClass('next') ) {
( clickCount < ( sCount - 1 ) ) ? clickCount++ : clickCount = 0;
} else if ( $(this).hasClass('prev') ) {
( clickCount > 0 ) ? clickCount-- : ( clickCount = sCount - 1 );
}
TweenMax.to(sWrapper, 0.4, {x: '-' + ( sWidth * clickCount ) })
//CONTENT ANIMATIONS
var fromProperties = {autoAlpha:0, x:'-50', y:'-10'};
var toProperties = {autoAlpha:0.8, x:'0', y:'0'};
TweenLite.fromTo(slide_image, 1, {autoAlpha:0, y:'40'}, {autoAlpha:1, y:'0'});
TweenLite.fromTo(slide_date, 0.4, fromProperties, toProperties);
TweenLite.fromTo(slide_title, 0.6, fromProperties, toProperties);
TweenLite.fromTo(slide_text, 0.8, fromProperties, toProperties);
TweenLite.fromTo(slide_more, 1, fromProperties, toProperties);
});
});
})(jQuery);
$('.overlay').addClass('overlay-blue');
Many thanks.
Good morning,
you can console.log(sWidth, 'sWidth') under your variables declaration and see that your variable don't return the same value in different browsers.
The solution :
remove flex class from your slide html code and change the display to block to get the same calculation cross browsers and you should add another div inside it to keep your flex style.
change your HTML slide code to :
<div class="slide">
<div class="slide-container">
<div class="slide-image slider-link prev"><img src="https://goranvrban.com/codepen/img2.jpg">
<div class="overlay"></div>
</div>
<div class="slide-content">
<div class="slide-content-inner">
<div class="slide-date">30.07.2017.</div>
<div class="slide-title">LOREM IPSUM DOLOR SITE MATE, AD EST ABHORREANT</div>
<div class="slide-text">Lorem ipsum dolor sit amet, ad est abhorreant efficiantur, vero oporteat apeirian in
vel. Et appareat electram appellantur est. Ei nec duis invenire. Cu mel ipsum laoreet, per rebum omittam ex.
</div>
<div class="slide-more">READ MORE</div>
</div>
</div>
</div>
</div>
and add these css styles :
.slide {
display:block;
}
.slide-container{
display: flex;
}
.slide-content-inner{
width:35vw;
padding: 5%;
}
And change these (remove the padding and change width) :
.slide-content {
width: 50vw; //changed to 50vw
color: #fff;
/*padding:3vw 18vw 3vw 9vw;*/ //removed
}
You get the solution with extra styling :)
I would like content not in view (viewport?) to be hidden, except the first <article>, until the user scrolls down the page enough (maybe until the top of the next <article> container reaches about 200px from the bottom of the viewport).
Each <article> get's the hidden class using the javascript, and when the user has scrolled down enough the hidden class is removed using the javascript.
On "My Site" (link below), it's showing the top 2 <article>'s, when it should only show the first one. I think it's the image at the top of the page that is causing the problem, but I don't know why.
My Site
HTML (only showing 1 <article> block since they are all the same)
<div class="main-2">
<!-- There are multiple <article> blocks similar to this -->
<article class="post">
<a href="image.png" rel="fwpopup" title="Image Name" class="image-link" target="_blank">
<img src="image.png" class="image" alt="Site Name">
</a>
<h1 class="h-1">Site Name</h1>
<div class="entry">
<ul class="work-features">
<li>Work 1</li>
<li>Work 2</li>
<li>Work 3</li>
<li>Work 4</li>
<li>Work 5</li>
<li>Work 6</li>
</ul>
<div class="work-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis condimentum, neque sed lobortis blandit, tellus magna efficitur velit, sit amet faucibus mi urna et nulla. Fusce varius orci tortor, vitae.
</div>
</div>
View Website
</article>
</div>
CSS
* {
margin:0;
padding:0;
}
*,
*:before,
*:after {
box-sizing:border-box;
}
html {
font-size: 100%;
overflow-y: scroll
}
html,
body {
height:100%;
}
body {
font:normal 12px/1 Optima, Candara, Calibri, Arial, sans-serif;
text-align:center;
color:#fff;
}
body:after {
position: fixed;
top:0;
left:0;
height:100%;
width:100%;
background:url(../images/main_background.png) 50% 180px no-repeat;
opacity:0.20;
content:'';
z-index:-1;
}
.hidden{
visibility: hidden;
}
.main-2 .image-link {
display:inline-block;
width:75%;
}
.main-2 .image-link .image {
width:100%;
}
[class|=h] {
margin-bottom:42px;
font-size:30px;
font-weight:normal;
line-height:1;
}
.portfoliopage .main-2 {
text-align: center;
}
.portfoliopage .image-link {
max-width: 1267px;
}
.portfoliopage .post:not(:last-child) {
padding-bottom:60px;
}
.portfoliopage .post:not(:first-child) {
border-top:1px dotted #d0d0d0;
padding-top:60px;
}
.portfoliopage .entry {
display:inline-block;
width:60%;
text-align: left;
}
.portfoliopage .entry .work-features {
display:inline-block;
width: 26%;
padding-top:5px;
vertical-align: middle;
}
.portfoliopage .entry .work-features li {
font-size: 15px;
padding-bottom: 5px;
}
.portfoliopage .entry .work-description {
display:inline-block;
width: 70%;
font-size: 18px;
line-height:1.5;
vertical-align: middle;
}
.portfoliopage .entry .work-description ul {
list-style: inside disc;
}
.portfoliopage .post .button-more {
display: inline-block;
padding: 14px 20px;
}
JS
function isScrolledIntoView(elem) {
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}
$(document).ready(function() {
$('.post').each(function() {
if (!isScrolledIntoView($(this))) {
$(this).addClass('hidden');
}
});
$(document).on('scroll', function() {
$('.post.hidden').each(function() {
if (isScrolledIntoView($(this))) {
$(this).removeClass('hidden').css({
'display': 'none'
}).fadeIn();
}
});
});
})
Give your first article tag a height as high as the image.
Images lag in loading from the rest of the DOM. document.ready starts working before your image fully loads and stretches the article and pushes other articles beyond viewport.
At the time of document.ready firing, the second and third articles are technically in the viewport.
Giving the article fixed initial height should solve your problem.
Alternatively, instead of $(document).ready use $(window).load. window.load fires after everything is fully loaded (DOM and images). But this might slow down page's overall response speed.
I'm trying to have a menu slide in whenever the 'menu' icon is clicked. Now I can't see where I went wrong. I'm getting the 'menu is not defined' error in the console.
<!DOCTYPE html>
<html>
<head>
<title>Menu rechts</title>
<link href="style.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
</head>
<body>
<section class="web_wrapper">
<header>
<main style="width: 100%;">
<button class="material-icons" id="menu_toggle" onclick="menu()">menu</button>
</main>
</header>
</section>
<section class="menu_show">
<nav style="right: -20%;">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<nav>
</section>
<script src"toggle.js" type="text/javascript"></script>
</body>
</html>
The used javascript
function menu()
{
var menu = document.querySelector("nav");
var main = document.querySelector("main");
if(menu.style.right != '-20%')
{
menu.style.right='-20%';
main.style.width='100%';
}
else
{
menu.style.right='0%';
main.style.width='80%';
}
}
The css
After getting comments it seems it might be a css issue. Because of this reason i'm also posting the css.
* {
font-size: 12pt;
padding: 0px;
margin: 0px;
outline: 0;
border: 0; }
body {
width: 100%;
color: #212121; }
a {
text-decoration: none; }
li {
list-style-type: none; }
.web_wrapper {
float: left;
width: 100%;
height: auto; }
header {
width: 100%;
height: 100%; }
header main {
height: 75px; }
header main button#menu_toggle.material-icons {
position: relative;
top: 50px;
left: 1000px;
background: transparent;
transition: transform 0.3s, color 0.3s;
font-size: 24pt !important; }
header main button.active {
transform: rotate(90deg);
color: #536DFE; }
.menu_show {
height: 100vh;
float: right;
background: #607D8B; }
.menu_show nav {
width: 20%; }
.menu_show nav ul {
width: 100%; }
.menu_show nav ul li {
width: 100%;
text-align: center; }
Try the below,
You can simply archive this with jQuery animate function
Read This animate
var click = 0; //keep this flag to identify the click
function menu() {
var menu = $("nav");
$(menu).animate({
width: 'toggle'
},"slow","easeOutElastic");
if (click == 0) {
$(".web_wrapper").animate({"width": "100%"},"slow","easeOutElastic");
click = 1;
} else {
$(".web_wrapper").animate({"width": "80%"},"slow","easeOutElastic");
click = 0;
}
console.log(click);
}
nav {
color: 'black';
background-color: #ddd;
text-align: justify;
width: 20%;
float: right;
margin-top: -20px;
}
.web_wrapper {
width: 80%;
background-color: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<section class="web_wrapper">
<header>
<div style="width: 100%;" id="main">
<button class="material-icons" id="menu_toggle" onclick="menu();">menu</button>
</div>
</header>
</section>
<section class="menu_show">
<nav style="right:-20%;" id="nav">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</nav>
</section>
use
<script src"toggle.js" type="text/javascript"></script>
in top of your codes and check again.
ideally you need to use jQuery but i am also a JS fan.Here you just have to define menu function anywhere but before its called ,ideally in head section,check this fiddle
http://jsfiddle.net/r0d09wcr/1/
<head>
<script>
function menu()
{
alert('dsff');
var menu = document.querySelector("nav");
var main = document.querySelector("main");
if(menu.style.right != '-20%')
{
menu.style.right='-20%';
main.style.width='100%';
}
else
{
menu.style.right='0%';
main.style.width='80%';
}
}
</script>
</head>
First, next time please fiddle your code.
Second, I think this fiddle does what you want:
JSFIDDLE:http://jsfiddle.net/657oudrv/1/
$('#menu_toggle').click(function()
{
var menu = $("nav")
var main = $("main")
if(menu.css('right') !== '-20%')
{
menu.css('right','-20%')
main.css('width','100%')
//Just for test without your css:
menu.css('margin-left','20%')
}
else
{
menu.css('right','0%')
main.css('width','80%')
//This is also the part of the test
menu.css('margin-left','0%')
}
});
You should use CSS selector with .querySelector()
Try to add id="nav" to your nav HTML element and edit you selector in js accordingly.
in HTML file:
<nav id="nav" style="right: -20%;">
in toogle.js:
var menu = document.querySelector("#nav");
see: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector for reference
Big wall of code coming up, prepare yourselves. Note that I move the Menu button into the menu section. I also changed the css a lot. Not sure if the text changes color when it's supposed to. The javascript now simply toggles a menu_show class on the body and css handles the rest... I ♥ html5
The fiddle
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<style type='text/css'>
* {
font-size: 12pt;
padding: 0px;
margin: 0px;
outline: 0;
border: 0;
}
body {
width: 100%;
color: #212121;
}
a {
text-decoration: none;
}
li {
list-style-type: none;
}
section {
display: inline-block;
}
.web_wrapper {
transition: .3s;
float: left;
width: 95%;
height: auto;
}
.menu_show .web_wrapper {
width:80%;
}
.menu {
position: absolute;
right: 0px;
width: 5%;
overflow: hidden;
height: 100%;
transition: width .3s;
background: #607D8B;
}
.menu_show .menu {
overflow: show;
width: 20%;
}
.menu nav {
position: relative;
top: 30px;
white-space: nowrap;
}
.menu_show .menu nav {
white-space: normal;
top: 10px;
}
.menu_show .menu nav ul {
width: 100%;
}
.menu_show .menu nav ul li {
width: 100%;
text-align: center;
}
#menu_toggle {
text-align: left;
overflow: hidden;
position: relative;
background: transparent;
transition: 0.3s;
font-size: 12pt !important;
transform: rotate(90deg);
top: 20px;
right: 10px;
}
.menu_show .menu #menu_toggle {
color: #536DFE;
top: 0px;
right: 0px;
transform: rotate(0deg);
}
</style>
<script type='text/javascript'>
// console logs left in for science
function ready(fn) {
console.log('readying');
if (document.readyState != 'loading'){
console.log('loading...');
fn();
} else {
console.log('content not loaded');
document.addEventListener('DOMContentLoaded', fn);
}
}
ready(function() {
var body = document.querySelector("body");
var button = document.getElementById('menu_toggle');
var menuShowing = false;
button.addEventListener('click',toggleMenu);
function toggleMenu()
{
if(menuShowing === true)
{
body.classList.remove('menu_show');
}
else
{
body.classList.add('menu_show');
}
menuShowing = !menuShowing;
}
});
</script>
</head>
<body>
<section class="web_wrapper">
<main>
Some content
<p>more in this paragraph!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</main>
</section>
<section class="menu">
<button class="material-icons" id="menu_toggle">menu</button>
<nav>
<ul>
<li>1. This is some long stinking text</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</nav>
</section>
</body>
</html>
I'll fix any mistakes and try to address any comments. Best way to figure out what something does is to remove the class, rule, w/e from the dev console and see what happens.
The fiddle
Credit where it's due:
position: absolute; right: 0px; for animation to work right (also height looks good with this set)
the ready function was off StackO... can't find the answer i pulled it from now :(
wikipedia for the lorem ipsum on the fiddle
I am new to web development and currently building a site for a friend that is being modeled after this one: http://fulton-demo.squarespace.com/
While I have most of the elements into code and styled, I cannot figure out how to get the images and content to fill 100% of the width AND resize when the browser window is resized. Like, take the first image on the link I provided for example...I would like it to look like this, meaning to not have any margins on either side and fill the browser window....and I can get it to do that, but it never shows 100% of the image and when I resize the window, nothing moves. Does that make sense?
I know this is probably a very elementary question, but I would love some insight on this. I can post any and all code if necessary. Thanks in advance guys!
EDIT: Here is my code:
HTML:
<!doctype html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="style.css"/>
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<meta charset="utf-8">
</head>
<body>
<main id="mainContent" role="main">
<article role="article">
<section>
<header>
<div class="container">
<div class="single-item-rtl" dir="rtl">
<div><img src="img/6.jpg" height="600px" width="1400px" align= center/></div>
<div><img src="img/6.jpg"height="600px" width="1400px" align= center/></div>
<div><img src="img/6.JPG" height="600px" width="1400px" align= center/></div>
<div><img src="img/6.jpg" height="600px" width="1400px" align= center/></div>
</div>
<div id=logo><img src="img/SJ_WHT.png" height="170px" width="220x" align=center</div>
<div id=text-top-carousel>
<h1>a better way to book creative spaces</h1>
</div>
</div>
</header>
</section>
<section id="info">
<div class="info">
<div class="icon"></div>
<h2>unique spaces <br> that inspire</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod temor incididunt ut labore et dolore magna aliqua</p>
</div>
<div class="info">
<div class="icon"></div>
<h2>hassle free <br> booking</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod temor incididunt ut labore et dolore magna aliqua</p>
</div>
<div class="info">
<div class="icon"></div>
<h2>share your <br>creative space</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod temor incididunt ut labore et dolore magna aliqua</p>
</div>
<div class="motto">
<h1>unleash your creativity</h1>
<p>We focus on your artistic expression at Studio Junkey. We believe that your creative process is limited when the necessary resources are not available to execute your vision. <br></nr> We want to ensure that you find the studio space that has the tools you need to express yourself and your vision</p>
</div>
</section>
<section id="contactForm">
<div class="form">
<h3>Want to list a studio space?</h3>
<p>We are looking for more studios.
Send us your information so we can connect.</p>
</div>
</section>
<footer role="footer">
</footer>
</article>
</main>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"> </script>
<script type="text/javascript" src="slick/slick.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.single-item-rtl').slick({
rtl: true,
autoplay: true,
autoplaySpeed: 3000,
});
});
</script>
</body>
</html>
CSS:
#font-face {
font-family: "Brandon Grotesque";
src: url("fonts/Brandon_Grotesque/Brandon_reg.otf") format("opentype");
}
html, body {
height: 100%;
width: 100%;;
padding:0;
margin: 0;
}
body {
font-family:"Brandon Grotesque";
}
#mainContent {
background: white;
width:1500px;
}
.container {
width: 100%;
max-width: 1400px;
height:600px;
text-align:center;
margin: 0 auto;
}
#logo {
position:relative;
top:-595px;
left:0em;
}
#text-top-carousel h1 {
position:relative;
top:-15px;
left:0em;
color:white;
font-size:55px;
padding: 10px;
}
#info {
margin: 0px;
clear:both;
}
.info {
width:466px;
height:400;
padding:10px;
background:white;
text-align: center;
color:#333333;
margin: 0px;
float:left;
clear: none;
}
.info.icon {
background:black;
border:1px solid white;
width:100px;
height:100px;
padding:10px;
margin-bottom: 25px;
}
.info h2 {
padding:300px 48px 10px 48px;
font-size: 45px;
margin-bottom: 0px;
margin-top: 0px;
line-height: 1em;
}
.info p {
padding:15px 50px 45px 50px;
margin: 0px;
font-size: 20px;
}
.motto {
background-image:url("img/6.jpg");
text-align: center;
color: white;
clear: both;
width:1400px;
margin:0 auto;
margin-bottom:0px;
height: 600px;
}
.motto h1 {
font-size: 60px;
padding-top: 90px;
margin-bottom: 20px;
}
.motto p {
font-size: 30px;
padding: 15px 100px 90px 100px;
}
#contactForm {
background: #EDEFED;
margin-top:0px;
width: 1400px;
height: 600px;
margin: 0 auto;
clear: both;
}
.form {
text-align: center;
margin: 0;
width:50%;
height:500px;
color:#333333;
clear:both;
}
.form h3 {
margin: 0;
font-size: 40px;
padding: 115px 185px 50px 185px;
}
EDIT 2: THANK YOU for all the help thus far everyone!....For those following along in the comments, the issue that I'm having now can be shown by this screenshot. The image carousel seems to be filling the left side completely fine, but the right side still isn't being filled at all, there's still some space between the right edge of the img carousel and the browser window when I scroll to the right.
Try adding this to your CSS..
.single-item-rtl img {
width: 100%;
height: auto;
max-height: 600px;
margin: auto;
}
Also remove the height width and align from the image tag or they'll override the CSS.
Slick tries to add arrows to the left and right side of the slider which is what is causing the issue. Since we're taking up 100% of the screen they have no place to go.
$('.single-item-rtl').slick({
rtl: true,
arrows: false
});
Edit:
Remove the width from #mainContent to make .container's with take up 100% of the screen.
Enclosing your content inside another element is helpful.
Note that you have to separate between enclosing elements required for your script to work, and those used to enchance your layout.
Also my solution implies you will ever be able to specify your image width in percent only. You can also add maximum and minimum properties.
.outer {
width: 5cm; // arbitrary
}
.full-width {
width: 100%;
}
.full-width img {
width: 15%;
max-width: 2cm;
min-width: 5mm;
}
<div class="outer">
<div class="full-width">
<img src="http://cdn.sstatic.net/stackoverflow/img/favicon.ico"/>
</div>
</div>
Use Percentage widths!!!!
Something simple like this would do:
.myImageClass{
width: 50%;
/*by not setting height, it will auto scale*/
}
DEMO:
html,body{
margin:0;
padding:0;
}
.myFullImg{
width:100%;
}
.myHalfImage{
width:50%;
}
<img class="myFullImg" src="http://placekitten.com/g/200/200" alt=""/>
<img class="myHalfImage" src="http://placekitten.com/g/200/400" alt=""/>
So, first #metext_hiddentext is hidden until you press #btn_more_metext and then height: 50% will be overwritten by height: auto.
jquery:
<script type="text/javascript">
$( document ).ready(function() {
$('#metext_hiddentext').hide();
$('#btn_more_metext').click(function(){
$('#me').css( "height", "auto" );
$('#metext_hiddentext').slideToggle('slow');
});
});
</script>
html:
<div id="me">
<div id="me_content">
<div id="meimg"></div>
<div class="metext">
<h1>I'm Lazor Zombie</h1>
<h2>Lorem ipsum dolor sit amet.</h2>
<div id="metext_hiddentext">
<h2>Lorem ipsum dolor sit amet.</h2>
</div>
<div id="btn_more_metext">...</div>
</div>
</div>
css:
#me {
background: #ff8400;
height: 50%;
}
#btn_more_metext {
font: 20px/10px "Rosario", 'Ubuntu', sans-serif;
cursor: pointer;
width: 80px;
height: 35px;
line-height: 22px;
}
Give padding:0 and margin:0 or Add custom margin and padding to <h2> because they have default margins and that is causing jump behavior in your slideToggle().
h2{
margin:0;
padding:0;
}
Here is the demo having <h2> tag with custom margin and padding
I think the problem here is, that when div is animated, it has overflow:hidden;
And the h2 has some margin on it...
so try to remove margin form h2 and add it on the div that is toggeld:
here the fiddle: http://jsfiddle.net/qk8nq/
#me {
background: #ff8400;
height: 50%;
}
#metext_hiddentext {
margin:1em 0;
}
#btn_more_metext {
font: 20px/10px "Rosario", 'Ubuntu', sans-serif;
cursor: pointer;
width: 80px;
height: 35px;
line-height: 22px;
}
h2 {
padding:0;
margin:0;
}
Sometimes this can be fixed by adding position: relative to the container (in this case the one with the class of "metext"). But I have no idea why.