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.
Related
On focus, a small menu opens.
Clicking on a link inside a menu should not close it.
Clicking outside the menu area should close the menu. Just like losing focus.
Is it possible with CSS? Or a little vanilla JS.
[tabindex="1"] {display:inline-block;}
b {cursor:pointer;}
.menu {
position:absolute; visibility:hidden;
display:block; padding:10px; white-space:nowrap;
border:1px solid black; background:pink;
transition:0.35s ease-out;
}
[tabindex="1"]:focus .menu {visibility:visible;}
p:target {background:gold;}
<div tabindex="1"><b>☰</b>
<div class="menu">
link 1 some text<br>
some link 2 text
</div>
</div>
<br><br><br><br><br>
<p id="01">Lorem ipsum dolor sit amet, consectetur ..</p>
<p id="02">In lobortis nisl ac nisi tempor pulvinar..</p>
what about something like this?
document.querySelector('[tabindex="1"]').addEventListener('click', function(){
document.querySelector('.menu').classList.add('active')
})
do the same when clicking out side and just remove the active class, also change your CSS to be something like this
.menu.active {visibility:visible;}
outside click:
document.addEventListener('click', ({ target }) => {
if (!target.closest('.menu')) {
document.querySelector('.menu').classList.remove('active')
}
})
So far I'm using this solution. With javascript. Works in IE 11.0. If anyone finds a solution with initial conditions, without using javascript, please let me know.
var ddc = document.querySelector(".drop");
var lnk = document.querySelectorAll("[href*='#']");
for (var i = 0; i < lnk.length; i++) {
lnk[i].addEventListener("blur", function () {
ddc.focus();
});
}
.drop {display:inline-block; position:relative; outline:none;}
b {cursor:pointer; font-size:18px; display:inline-block; width:20px;}
.menu {
visibility:hidden; opacity:0; position:absolute;
top:120%; padding:10px; white-space:nowrap;
border:1px solid black; background:pink;
transition:0.55s ease-out;
}
.drop:focus .menu {visibility:visible; opacity:1;}
p:target {background:gold;}
b::before, b::after {
position:absolute; top:0; left:0;
line-height:1.0; transition:0.55s ease-out;
}
b::before {content: "\2630";}
b::after {content: "\2715"; visibility:hidden; opacity:0;}
.drop:focus b::before {visibility:hidden; opacity:0; transform:rotateZ(180deg);}
.drop:focus b::after {visibility:visible; opacity:1;}
i {
position:absolute; cursor:pointer;
top:0; right:0; bottom:0; left:0;
z-index:10; opacity:0; display:none;
}
.drop:focus i {display:inline-block;}
.drop i:focus .menu {visibility:hidden; opacity:0;}
<div tabindex="1" class="drop">
<i tabindex="1"></i><b></b>
<div class="menu">
link 1 some text<br>
some link 2 text
</div>
</div>
<br><br><br><br><br>
<p id="01">Lorem ipsum dolor sit amet, consectetur ..</p>
<p id="02">In lobortis nisl ac nisi tempor pulvinar..</p>
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=""/>
I want to achieve something that look simple but I am not able to find a solution.
I have something like this
<main>
<div class="prod_container">
<div class="prod_box box1">
<img alt="product" src="images/prod1.png">
<h3>bibendum nec</h3>
<div class="prod_text hidden">
<p>Der neue bibendum nec nunc eleifend, posuere facilisis mi Jeep</p>
<a class="prod_button" href="#">More</a>
</div>
</div>
<div class="prod_box box2">
<img alt="product" src="images/prod2.png">
<h3>condimentum dapibus</h3>
<div class="prod_text hidden">
<p>Der neue bibendum nec nunc eleifend, posuere facilisis mi Jeep</p>
<a class="prod_button" href="#">More</a>
</div>
</div>
<div class="prod_box box3">
<img alt="product" src="images/prod3.png">
<h3>facilisis purus</h3>
<div class="prod_text hidden">
<p>Der neue bibendum nec nunc eleifend, posuere facilisis mi Jeep</p>
<a class="prod_button" href="#">More</a>
</div>
</div>
</div>
<main>
<footer></footer>
and CSS
.prod_box { float:left; width:300px; border:2px solid #cccccc; margin:0 10px 0; position:relative;}
.prod_box img { float:left; width:100%;}
.prod_text { width:100%; float:left; border-top:none; padding:10px;}
footer { float:left; width:100%; background-color:#fedf46; padding:20px 0; z-index:999; clear:both;}
Here what I want achieve is that, class .prod_text must go beneath footer for all three boxes on load and when hover on class .prod_box .prod_text must slide up to show. But when I did, the border for .prod_box and the .prod_text shows over footer, and the img goes beneath the footer (I applied position:relative; and bottom:-100px;)
I need an effect like we pick a card from its stack.
Please go through this Fiddle
Thanks in advance
Do you want this??
HTML
<ul class="prod_list">
<li><img src="http://www.hdwallpapers.in/walls/yamaha_r6_bike-HD.jpg" alt="Bike 01" /><span>Yamaha Bike 01</span></li>
<li><img src="http://hdnewwallpapers.com/wp-content/uploads/2014/04/bmw-hd-race-bike-wallpapers.jpg" alt="Bike 02" /><span>Yamaha Bike 02</span></li>
<li><img src="http://cdn.wonderfulengineering.com/wp-content/uploads/2013/12/bike-wallpaper-12.jpg" alt="Bike 03" /><span>Yamaha Bike 03</span></li>
</ul>
CSS
*{margin:0; padding:0; font-family:Tahoma; font-size:12px; color:#333;}
ul, li{list-style:none;}
.prod_list{margin:10px;}
.prod_list li a{width:135px; height:135px; margin:0 12px 12px 0; overflow:hidden; display:inline-block; padding:2px; border:2px solid #ddd; position:relative; float:left;}
.prod_list li a img{width:135px; height:135px; overflow:hidden;}
.prod_list li a span{width:125px; position:absolute; margin-bottom:-25px; bottom:0; left:2px; background:url('http://css-tricks.com/wp-content/csstricks-uploads/transpBlack25.png') 0 0 repeat; color:#fff; line-height:18px; padding:5px 5px 0;}
.prod_list li a:hover{border:2px solid #bbb;}
.prod_list li a:hover span{display:block;}
Javascript (Don't forget to mention JQuery 1.6.x or above)
$('.prod_list li a').mouseover(function() {
$(this).find("span").animate({marginBottom:"2px"},"fast");
});
$('.prod_list li a').mouseleave(function() {
$(this).find("span").animate({marginBottom:"-25px"},"fast");
});
Fiddle
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 9 years ago.
The problem
I need to redesign CSS structure of an existing web application. It supports "branding" — it's got 5 different look-and-feels. Each user has one assigned brand, based on the company they work for.
Currently we have a bunch of complicated CSS files that have long since broken out of control. A typical web page includes 4 style sheets, templating system decides which ones. This means a page reload is needed to switch brands.
A new CSS system should:
Be based on CSS scripting, preferably LESS, or SaSS.
Use only one style sheet in the target environment.
Allow brands to be e̲a̲s̲i̲l̲y̲ switched without page reloading.
My idea
With the help of CSS scripting, define general and brand-based rules:
p {
/* general settings */
}
#brand1 p {
/* include/redefine general settings, add some for brand1 */
}
#brand2 p {
/* include/redefine general settings, add some for brand2 */
}
Create an outer <div> for the whole body and switch its id with JavaScript to brand1, brand2, etc. This way I don't need to script CSS in any way, just switch the "context" of all elements with one line of JavaScript.
I'm a CSS beginner, so I'd like to avoid going for something totally wrong. Please comment.
I do this way:
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>Themed Website</title>
</head>
<body>
<div class="wrap">
<div class="side">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
</div>
<div class="main">
<h1>Welcome</h1>
<h2>A Paragraph</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing 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.
</p>
<h2>A List</h2>
<ul>
<li>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</li>
<li>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
</li>
<li>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse.</p>
</li>
</ul>
</div>
</div>
</body>
</html>
CSS
body {font-family: segoe ui; background: #fff;}
body .wrap {width: 90%; margin: auto; overflow: hidden;}
body .wrap .side {width: 25%; float: left;}
body .wrap .side ul {margin: 0; padding: 0; list-style: none;}
body .wrap .side ul li {margin: 0; padding: 0; list-style: none;}
body .wrap .side ul li a {text-decoration: none; padding: 5px; display: block;}
body .wrap .side ul li a:hover {background: #ccc; color: #0ff;}
body .wrap .side ul li a.active {background: #0fc; color: #000;}
body .wrap .main {width: 75%; float: right; background: #0fc;}
body .wrap .main h1 {margin: 0; padding: 0 10px 10px;}
body .wrap .main h2 {margin: 0; padding: 10px;}
body .wrap .main p {margin: 0 10px 5px; text-align: justify;}
body .wrap .main ul {margin: 0 10px 10px;}
Theming
Now our work would be identifying the themable components. Here, with the base layout, we can theme only the colours and list styles of the unordered list. Lets get those styles alone first. Being a beginner's tutorial, lets concentrate only on the foreground and background colours and not layouts.
Lets name the first class as .light and the CSS for the same would be:
.light {color: #333; background: #f5f5f5;}
.light .wrap .side ul li a {color: #666; background: #eee;}
.light .wrap .side ul li a:hover {color: #333; background: #ddd;}
.light .wrap .side ul li a.active {color: #333; background: #0ff;}
.light .wrap .main {background: #0ff;}
.light .wrap .main h1 {color: #333;}
.light .wrap .main h2 {color: #666; background: #0fc;}
.light .wrap .main p {color: #093;}
.light .wrap .main ul li p {color: #09c;}
JavaScript
And now for the code to change, we need to add three links or buttons, which handle the theme change. So, in the HTML, let's add these three links:
HTML
<div class="wrap themelinks">
<h4>Change Themes:</h4>
No Theme
Light
Grayscale
</div>
CSS
.wrap.themelinks {background: #fff; border-radius: 10px; clear: both; overflow: hidden; margin-top: 25px;}
.wrap.themelinks h4 {margin: 0; padding: 10px;}
.wrap.themelinks .theme {margin: 0 10px 10px; padding: 3px 5px; display: inline-block; background: #eee; border-radius: 5px; text-decoration: none; color: #f90}
.wrap.themelinks .theme:hover {background: #f90; color: #fff;}
jQuery
$(document).ready(function(){
$(".theme").click(function(){
var theClass = $(this).attr("href");
$("body").removeAttr("class").addClass(theClass);
return false;
});
});
Demo
You can check out the working demo in jsBin.
Create a single, unbranded stylesheet, that defines the general layout of the page, then define brand-specific rules that vary depending on the class of the <body> element, for example:
/* Layout area */
#header {
height: 50px;
margin: 0.2em; }
etc...
/* Brand A rules */
.brandA #header {
background-image: url("brandALogo.png"); }
.brandA #footer {
background-color: purple; }
/* Brand B rules */
.brandB #header {
background-image: url("brandBLogo.png"); }
.brandB #footer {
background-color: orange; }
...so you don't need to redefine anything.
Then with a simple script client change the class attribute of <body> to "brandA" or "brandB" as appropriate.
I advise against using the id attribute because as the identity attribute it should be static and unchanging in the document.
I would do it this way for one element:
div {
/* general settings */
}
div.band1 {
/* include general settings, add some for brand1 */
/* redefine general settings, add some for brand1 */
font-weight: bold !important;
}
div.band2 {
/* ... */
}
for more elements (demo):
h1{
font-weight: bold;
color:green;
}
.band1 h1{
background-color:red;
color: white;
}
.band2 h1{
background-color:yellow;
}
.band1 .head2{
background-color:red;
}
.band2 .head2{
background-color:yellow;
}
.band1 #text{
background-color:red;
}
.band2 #text{
background-color:yellow;
}
Define layout independently, then define all the stuff that has same, let's say shape and overall UX... and then for the final touch use deeper selectors, like this:
Each brand's page's styling should have one more outer selector, for instance id that is connected to outer wrapper of the page, so for starting thing outer wrapper (or the body, altoho I do not recommend this) should be id="default"... default should have no reference in css whatsoever, then every other brand should be selected in css for body to have id="brand1" or "brand2" etc.
On Interaction whic changes the brand you just do this:
$(wrapper selector).attr('id', 'brandX');
What happends is - css rerenders the page accommodating other selectors that are deeper due added one more outer DOM container and thus more important then default ones.
Changing selectors this way gives you the ability to fine tune your page how ever you like, assuming that css3 and any DOM manipulation js engine is in your full expertise :D
you can also load the css dynamically (if you want to generate it based on some parameters, for example). do it with this line of code:
$('head').append('<link rel="stylesheet" href="style2.css" type="text/css" />');
another advantage is that the user doesn't need to download all the style sheets of all the brands he doesn't want
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);
}