Working with a lightbox effect at the moment. The problem is my lightbox has a lot of text inside it. Problem is, I cant figure out how to make a scroll function inside so the user can scroll down the element.
CSS
/* Lightbox background */
#lightbox {
display:none;
background: rgba(0,0,0,0.8);
position:absolute;
top:0px;
left:0px;
min-width:100%;
min-height:100%;
z-index:1000;
}
/* Lightbox panel with some content */
#lightbox-panel {
display:none;
position:fixed;
top:100px;
left:50%;
margin-left:-200px;
width:400px;
background:#FFFFFF;
padding:10px 15px 10px 15px;
border:2px solid #CCCCCC;
z-index:1001;
}
JS
$(document).ready(function(){
$("a#show-panel").click(function(){
$("#lightbox, #lightbox-panel").fadeIn(300);
});
$("a#close-panel").click(function(){
$("#lightbox, #lightbox-panel").fadeOut(300);
})
});
My example
Thanks for the help!
Worked on this and what you needed for your situation is just have it to position fixed.. Get rid of that and it should work..
CSS code:
body{
margin:150px 0 0 0;
text-align:center;
background: #f1e7b0;
}
h2{
font-size: 32px;
}
a{
text-decoration: none;
color: #222222;
font-size: 18px;
}
/* Lightbox background */
#lightbox {
display:none;
background: rgba(0,0,0,0.8);
position:absolute;
top:0px;
left:0px;
min-width:100%;
min-height:100%;
z-index:1000;
}
/* Lightbox panel with some content */
#lightbox-panel {
display:none;
position:absolute;
top:100px;
left:50%;
margin-left:-200px;
width:400px;
background:#FFFFFF;
padding:10px 15px 10px 15px;
border:2px solid #CCCCCC;
z-index:1001;
}
#lightbox-panel{
overflow: scroll;
}
body{
overflow: scroll;
}
Link : http://jsfiddle.net/9LFKV/158/
Fixing background color
To fix the background color, i just attached a $.css({}) in the JS File and it worked :D. Here is the code:
$(document).ready(function(){
$("a#show-panel").click(function(){
$("#lightbox, #lightbox-panel").fadeIn(300);
$('html').css('background-color', 'rgba(0,0,0,0.8)')
});
$("a#close-panel").click(function(){
$("#lightbox, #lightbox-panel").fadeOut(300);
})
});
JSFiddle
You had the position attribute for the lightbox (background) and the lightbox-panel switched. They should be:
#lightbox-panel {
...
position:absolute;
...
}
and
#lightbox {
...
position:fixed;
...
}
#lightbox-panel {
position:absolute;
}
Related
Sup guys,
for a while now I have been trying to get this to work in jQuery, but I have no idea how to accomplish that.
It's about the mobile navigation of a basic website.
Basically I am trying to achieve that the mobile navigation closes if we click on the 3 dots with the adress data and the other way around. You can see it in this example:
https://www.templatemonster.com/de/demo/62436.html
Choose the mobile version to see what I mean.
Does anyone know how to do this with jQuery or javascript?
Here is what I have currently:
Adress Data
$('.js--adress-icon').click(function() {
var kont = $('.js--adress-nav');
kont.slideToggle(200);
});
Mobile Navigation
var hamburger = $('#hamburger-icon');
hamburger.click(function() {
var nav = $('.js--main-nav');
nav.slideToggle(200);
hamburger.toggleClass('active');
return false;
});
if ($(window).width() < 768){
$('.main-navigation li a').on('click', function(){
$('.js--main-nav').hide();
$('#hamburger-icon').removeClass('active');
});
};
Thx in advance!
I don't know what your html looks like but this is a simple way to achieve this using css and javascript
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<nav class="menu">
<ul class="active">
<li class="current-item">Home</li>
<li>Menu1</li>
<li>Menu2</li>
</ul>
<a class="toggle-nav" href="#">⁝</a>
</nav>
</body>
then your javascript
jQuery(document).ready(function() {
jQuery('.toggle-nav').click(function(e) {
jQuery(this).toggleClass('active');
jQuery('.menu ul').toggleClass('active');
e.preventDefault();
});
});
then your css
/*----- Toggle Button -----*/
/*----- Menu -----*/
#media screen and (min-width: 860px) {
.menu {
width:100%;
padding:10px 18px;
box-shadow:0px 1px 1px rgba(0,0,0,0.15);
border-radius:3px;
background:#303030;
}
}
.menu ul {
display:inline-block;
}
.menu li {
margin:0px 50px 0px 0px;
float:left;
list-style:none;
font-size:17px;
}
.menu li:last-child {
margin-right:0px;
}
.menu a {
text-shadow:0px 1px 0px rgba(0,0,0,0.5);
color:#777;
transition:color linear 0.15s;
}
.menu a:hover, .menu .current-item a {
text-decoration:none;
color:#66a992;
}
/*----- Responsive -----*/
#media screen and (max-width: 1150px) {
.wrap {
width:90%;
}
}
#media screen and (max-width: 970px) {
.search-form input {
width:120px;
}
}
#media screen and (max-width: 860px) {
.menu {
position:relative;
display:inline-block;
}
.menu ul.active {
display:none;
}
.menu ul {
width:100%;
position:absolute;
top:120%;
left:0px;
padding:10px 18px;
box-shadow:0px 1px 1px rgba(0,0,0,0.15);
border-radius:3px;
background:#303030;
}
.menu ul:after {
width:0px;
height:0px;
position:absolute;
top:0%;
left:22px;
content:'';
transform:translate(0%, -100%);
border-left:7px solid transparent;
border-right:7px solid transparent;
border-bottom:7px solid #303030;
}
.menu li {
margin:5px 0px 5px 0px;
float:none;
display:block;
}
.menu a {
display:block;
}
.toggle-nav {
padding:20px;
float:left;
color:#777;
font-size:20px;
}
.toggle-nav:hover, .toggle-nav.active {
text-decoration:none;
color:#66a992;
}
}
check this fiddle : https://jsfiddle.net/wggs8pf8/
I have a slideshow with pager and some buttons next to pager of slideshow (here is html page) which I am trying to make responsive.
The images I am fetching from database. So that are varying in number.
The problem is that pager/navigation of slideshow is fine for less number of images but becomes problematic for more images. Pager is overlapping the buttons which are next to it. as shown below:
For Desktop screen:
For small screen:
Below is the div structure
<div id="controls-wrapper" >
<div id="controls">
<div id="cycle-nav"><ul></ul></div> <!-- pager -->
</div>
<div class="button1" id="button1">
button 1
</div>
<div class="button2" id="button2">button 2</div>
<div class="button3">button 3</div>
</div>
I am finding the solution other than media queries if possible. I tried by giving width in % to all div, by putting container div to above structure and giving it 100% width and height, by $(width).width() function. But not getting the solution.
jsfiddle
Is there any way to dynamically adjust the width of div depending on browser's screen size?
You can use the #media queries. Here's an example:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
#media screen and (max-width: 300px) {
body {
background-color: lightgreen;
}
}
</style>
</head>
<body>
...
</body>
</html>
This will change the background color of the body to lightblue. But when you resize your browser window to less than 300px it will change to lightgreen. I hope this will help you with your problem.
Here is simple solution using CSS and HTML, no #media queries no JavaScript,
I just modified some lines of HTML and CSS to your code those are below.
HTML
<div id="controls-wrapper" >
<div id="controls">
<div id="cycle-nav"><ul></ul></div>
</div>
<div class="buton-controls">
<div class="button1" id="button1">
button 1
</div>
<div class="button2" id="button2">button 2</div>
<div class="button3">button 3</div>
</div>
</div>
css
/* I wanted to center my loader */
#cycle-loader {
height:32px;
left:50%;
margin:-8px 0 0 -8px;
position:absolute;
top:50%;
width:32px;
z-index:999;
}
/*I want to avoid jumpiness as the JS loads, so I initially hide my cycle*/
#maximage {
display:none;/* Only use this if you fade it in again after the images load */
position:fixed !important;
}
#arrow_left, #arrow_right {
bottom:45%;
height:67px;
position:fixed;
right:3%;
width:36px;
z-index:1000;
}
#arrow_left {
left:3%;
}
#arrow_left:hover, #arrow_right:hover {
bottom:45%;
}
#arrow_left:active, #arrow_right:active {
bottom:45%;
}
a {color:#666;text-decoration:none;}
a:hover {text-decoration:underline;}
/*I want to style my pager*/
#cycle-nav {
/* float:left;*/
margin-top: 8px;
margin-left: 0;
text-align: center;
}
#cycle-nav ul {
list-style-type:none;
width: 100%
}
#cycle-nav ul li {
/* border:1px solid #FF8000;*/
display: inline-block;
margin:3px;
}
#cycle-nav ul li a {
/*background: #057c96;*/
background: #49BED8;
float:left;
height:10px;
margin:2px;
width:10px;
}
#cycle-nav ul li a:hover {
background: #000;
opacity:0.6;
}
#cycle-nav ul li.activeSlide {
/* border:1px solid #000;*/
/* background: #075262;*/
}
#cycle-nav ul li.activeSlide > a {
background: #075262;
}
#controls-wrapper { margin:0 auto; height:42px; width:100%; bottom:70px; z-index:4; background:url(../img/nav-bg.png) repeat-x; position:fixed; }
#controls { width: 50%; float: left; }
.buton-controls{
width: 50%;
float: left;
text-align: center;
}
.buton-controls > div{
display: inline-block;
}
.button2{
background-color: red;
font: 14px/23px 'TitilliumText25L400wt',Arial,sans-serif;
height: 20px;
opacity: 0.4;
text-align: center;
width: 70px;
color:#FFFFFF;
}
.button2:hover{
background-color:#000;
cursor:pointer;
opacity:1 !important;
}
.button2hoverBg{
background-color:#137087 !important;
cursor:pointer;
opacity:1;
}
.button3{
background-color: red;
color:#FFFFFF;
font: 14px/23px 'TitilliumText25L400wt',Arial,sans-serif;
height: 20px;
opacity: 0.4;
position: relative;
text-align: center;
z-index: 10;
width: 70px;\
}
.button3:hover, a:hover{
background-color:#000;
cursor:pointer;
opacity:1 !important;
text-decoration:none;
color:#FFFFFF;
}
.button3 a{
color:#FFFFFF;
text-decoration:none;
}
.button1{
background-color: red;
color:#FFFFFF;
font: 14px/23px 'TitilliumText25L600wt',Arial,sans-serif;
height: 20px;
text-align: center;
width: 70px;
z-index: 10;
opacity: 0.4;
}
.button1 a{
color:#FFFFFF;
text-decoration:none;
}
Yes, use the vw and vh CSS properties.
1vw = 1% of window width,
1vh = 1% of window height.
http://demosthenes.info/blog/660/Using-vw-and-vh-Measurements-In-Modern-Site-Design
I have a image, I want to add some effects. Hover overlay div I was able to add it. Now what I want to do is to add onclick event and change to another overlay div.
Here is my code, or see the CodePen Here
<div id="box">
<div id="overlay">
<span id="plus">+</span>
</div>
CSS:
body { background:#e7e7e7;}
#box { width:300px;
height:200px;
float: left;
box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
border-bottom:2px solid #fff;
border-right:2px solid #fff;
margin:5% auto 0 auto;
background:url(http://ianfarb.com/wp-content/uploads/2013/10/nicholas-hodag.jpg);
background-size:cover;
border-radius:5px;
overflow:hidden;}
#overlay { background:rgba(0,0,0,.75);
text-align:center;
padding:45px 0 66px 0;
opacity:0;
-webkit-transition: opacity .25s ease;}
#box:hover #overlay {
opacity:1;}
#plus { font-family:Helvetica;
font-weight:900;
color:rgba(255,255,255,.85);
font-size:96px; }
I have only hover effect, when I click it should change Plus (+) to Minus (-) and at the bottom of the image div to appear a small div where will be placed a small description.
When the second overlay div is triggered, and I press back on Minus (-) it should change back. I will add here a image so that you can see what I'm trying to do.
In the image bellow you can see the blue div that should appear onclick event.
Firstly, the image appears to be content so it should inline HTML and not a background image and I have proceeded on that basis.
Forked Codepen Demo
Revised HTML
<div class="box">
<img src="http://ianfarb.com/wp-content/uploads/2013/10/nicholas-hodag.jpg" alt="" />
<div class="overlay">
<h1 class="plus"></h1>
</div>
<div class="description">
<p>Lorem ipsum dolor.</p>
</div>
</div>
CSS wise, I have taken advantage of absolute positioning, pseudo elements and a little CSS3 transform to get everything in place. The latter allows flexibility in changing some font-sizing choices for the +/- and border sizes of pseudo element (the arrow).
CSS
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.box {
width:300px;
height:200px;
box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
border-bottom:2px solid #fff;
border-right:2px solid #fff;
margin:5% auto 0 auto;
border-radius:5px;
overflow:hidden;
position: relative;
}
.box img {
display: block;
}
.overlay {
position: absolute;
width:100%;
height:100%;
top:0;
left:0;
background:rgba(0,0,0,.75);
text-align:center;
opacity:0;
-webkit-transition: opacity .25s ease;
}
.box:hover .overlay {
opacity:1;
}
.overlay .plus:before {
content:"+";
margin: 0;
padding: 0;
position: absolute;
top:50%;
left:50%;
font-family:Helvetica;
font-weight:900;
color:rgba(255,255,255,.85);
font-size:6rem;
-webkit-transform:translate(-50%, -50%);
transform:translate(-50%, -50%);
}
.overlay.clicked .plus:before {
content:"-";
}
.description {
display: block;
position: absolute;
width:100%;
height:30%;
background-color: lightblue;
bottom:-30%;
text-align: center;
transition: bottom 0.25s ease;
}
.description:after {
content:"";
position: absolute;
width:0;
height:0;
left:50%;
border-style:solid;
border-color: transparent transparent lightblue transparent;
border-width: 16px;
top:0;
-webkit-transform:translate(-50%, 100%);
}
.overlay.clicked + .description {
bottom:0%;
}
.overlay.clicked + .description:after {
-webkit-transform:translate(-50%, -100%);
}
Finally, a little JQuery to add a clicked (or active) interaction by way of .toggleClass.
Jquery
(function($) {
$(".plus").click(function () {
$(this).parent().toggleClass("clicked");
});
})(jQuery);
use jquery
$(document).ready(function(){
var trigger = $(".plus");
var overlay = $(".overlay");
trigger.click(function(){
overlay.toggle('fast');
})
});
Firefox ignores padding-bottom with box-sizing:border box.
I am trying to fit two child divs into container div of 300px.
child1 - height 100%;
child2 - from bottom height 100px;
child1 has border box and padding-bottom:100px which should reduce child1 height to (100% - 100px) giving way to child2.
This implementation works fine in webkit but firefox fails.
Is there work around to fix this? I don't want to use css calc().
here is the example - http://jsfiddle.net/827D6/1/
css used :
.container{
height:300px;
width:300px;
background-color:black;
}
.child1{
height:100%;
background-color:red;
position:relative;
padding: 20px 20px 100px;
box-sizing: border-box;
overflow-y:auto;
word-wrap:break-word;
}
.child2{
height:100px;
position:relative;
background-color:green;
bottom:100px;
}
You can use position absolute for this easily. Just make the container relative and set the height of the second child with position bottom:0. The first child is then set to top:0;bottom:100px;.
.container {
position:relative;
height:300px;
width:300px;
background-color:black;
}
.child1 {
background-color:red;
position:absolute;
top:0;
right:0;
bottom:100px;
left:0;
padding: 20px 20px 0;
overflow-y:auto;
word-wrap:break-word;
}
.child2 {
height:100px;
position:absolute;
right:0;
bottom:0;
left:0;
background-color:green;
}
DEMO
Try this:
.element {
display:block;
padding:10px;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
overflow:auto;
}
.element::before, .element::after {
content:"";
display:table;
width:100%;
height:0;
clear:both;
}
#-moz-document url-prefix() {
.element::after {
height:10px;
}
}
I think css3 alone can make it happen, I'm stuck because I still try to understand things like 'ease' in css3.
my progress so far http://jsfiddle.net/kwgy9/1/
the 'nike' should swipe to left, and 'just do it' appear slowly from right. need help!
$("#box").mouseenter(function(){
}).mouseleave(function(){
});
Try this jsfiddle, I think it's what you want
body {
font-family:'Fenix', serif;
text-decoration:none;
font-size:24px;
font-weight:bold;
}
#box {
width: 160px;
height: 60px;
background: orange;
text-align:center;
border:2px solid orange;
border-radius:5px;
cursor:pointer;
display: inline-block;
overflow:hidden;
position:relative;
transition: all 1s ease;
}
#box:hover {
color:orange;
background:#FFF;
}
#box:hover > p {
left:-160px;
}
#box > p{
color:white;
transition: all 1s ease;
position:absolute;
top:0px;
left:0px;
font-size:24px;
line-height:60px;
display:inline-block;
margin:0px;
padding:0px;
width:160px;
}
#box > span{
white-space:no-wrap;
position:absolute;
top:0px;
left:160px;
display:inline-block;
transition: all 1s ease;
width:160px;
font-size:24px;
line-height:60px;
}
#box:hover>span{
color:orange;
left:0px;
}
Edit: Sirikon's solution seems to be just fine. The way I did it might still be interesting for you, because of the way the floating elements in the .row are "pushed".
I created a working Fiddle for you:
http://jsfiddle.net/UJsR8/
It still needs some polish, yeah, but I think you'll get the idea playing around with it. It is just one possible solution, mind you.
Hope this helps. Cheers!
The code:
HTML
<div class="slide-box">
<div class="row">
<div class="col left">NIKE</div>
<div class="col right">JUST DO IT</div>
</div>
</div>
CSS
body {
font-family:'Fenix', serif;
text-decoration:none;
font-size:24px;
font-weight:bold;
}
.slide-box{
width:300px;
height:100px;
background:orange;
border:2px solid orange;
border-radius:5px;
cursor:pointer;
overflow:hidden; /* comment this for a visualization of how it works */
}
.slide-box:hover {
color:orange;
background:#FFF;
}
.row{
width:600px;
height:100px;
}
.col{
width:200px;
height:50px;
padding:25px 50px;
text-align:center;
float:left;
overflow:hidden;
}
JS
$(document).ready(function() {
var leftWidth,
leftPaddingX;
leftWidth = $('.left').width();
leftWidth = leftWidth + 'px';
leftPaddingX = $('.left').css('padding-left');
$('.slide-box').mouseover(function(){
$('.left').animate({
width: '0px',
paddingLeft: '0px',
paddingRight: '0px'
}, 300);
}).mouseleave(function(){
$('.left').animate({
width: leftWidth,
paddingLeft: leftPaddingX,
paddingRight: leftPaddingX
}, 300);
});
});