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);
});
});
Related
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;
}
I have been created time-line for my web page, by using html,css3 and js.
html:
<div class="cntl-state">
<div class="cntl-content">
<h4>Title 4</h4>
<p>India’s Saina Nehwal won the Australian Badminton Open Super Series title at the State Sports Centre in Sydney on 29 June, 2014. Saina began the match in aggressive fashion as she raced into a 12-8 lead in the first game against Spain’s Carolina Marin in the final.</p>
</div>
<div class="cntl-image"><img src="img/timelinesn-12.jpg" alt="tm12"></div>
<div class="cntl-icon cntl-center">2014</div>
</div>
</div>
css:
.cntl-center {
left:0;
right:0;
margin-left:auto;
margin-right:auto;
}
.cntl-bar {
position: absolute;
width: 10px;
top: 0;
bottom: 0;
background-color: #ccc;
box-shadow: inset 0px 0px 7px -2px #000;
}
.cntl-bar-fill {
background-color: #66cc00;
position: absolute;
left:0;
right:0;
top:0;
height:0;
}
.cntl-state {
position: relative;
width:100%;
min-height: 200px;
margin-bottom: 50px;
}
.cntl-state::after {
display:block;
content: ' ';
clear:both;
}
.cntl-icon {
border-radius: 50%;
width: 100px;
height: 100px;
background-color: #003300;
border: solid 3px #009900;
box-shadow: 0px 0px 19px -9px #000;
position: absolute;
top: 0;
text-align: center;
line-height: 100px;
font-size: 40px;
color: #fff;
}
.cntl-content {
width: 30%;
padding: 2%;
background-color: rgba(238, 238, 238, 0.25);
border-radius: 8px;
border-bottom: solid 3px #009900;
float:left;
opacity:0;
position:relative;
margin-left:-40%;
}
.cntl-state:nth-child(2n+2) .cntl-content {
float:right;
margin-right:-40%;
}
.cntl-image {
opacity:0;
width: 40%;
padding: 2%;
}
.cntl-state:nth-child(2n+1) .cntl-image {
float:right;
}
.cntl-content h4 {
font-size:20px;
font-weight: normal;
margin-bottom: 10px;
}
/*
animations
*/
.cntl-bar-fill,.cntl-content,.cntl-image {
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-o-transition: all 500ms ease;
-ms-transition: all 500ms ease;
transition: all 500ms ease;
}
.cntl-state:nth-child(2n+2).cntl-animate .cntl-content {
margin-right:6%;
}
.cntl-animate .cntl-content {
opacity:1;
margin-left:6%;
}
.cntl-animate .cntl-image {
opacity:1;
}
And i have used js files also, i m trying to create jsfiddle, but can't able to get.
Now my page shows like this http://s30.postimg.org/54dkm4qoh/Untitled_2.png
I need like this dotted line, for joint the image and description.
http://s30.postimg.org/k522y658x/Untitled_1.png
Can anyone help me to give idea for creating dotted line that is join the both image and description?.
Thanks in advance.
If you want to know how to draw dotted line here is the code for it.
<head>
<title></title>
<style id="TempStyle"></style>
</head>
<body>
<hr style="height: 0;margin:50px;width: 200px;border-width: 5px;border-color: black;border-style: dotted;"><!-- horizontal line -->
<hr style="height: 200px;margin:50px;width: 0px;border-width: 5px;border-color: black;border-style: dotted;"><!-- vertical line -->
</body>
<script src="script.js"></script>
</html>
Actually its little messy when we try using CSS to do these sort of things. Still i think this is what you might be looking for Demo. I have just showed you the quick demo, but you will have to add cross browser support.
CSS & HTML
html, body {
height: 100%;
position:relative;
}
body{
color:#fff;
overflow:hidden;
}
.leftcont
{
position:absolute;
margin-left:0%;
display:block;
width:47%;
height:100%;
background:#333;
}
.timeline
{
position:absolute;
margin-left:47%;
display:block;
width:6%;
height:100%;
background:#ddd;
}
.rightcont
{
position:absolute;
margin-left:53%;
display:block;
width:48%;
height:100%;
background:#333;
}
.content1
{
padding:20px;
display:block;
height:150px;
width:200px;
float:right;
margin-right:10%;
margin-top:10%;
background:#ddd;
color:black;
}
.content2
{
padding:20px;
display:block;
height:150px;
width:200px;
float:left;
margin-left:10%;
margin-top:10%;
background:#ddd;
color:black;
}
.circle
{
display:block;
height:60px;
width:60px;
margin-top:100%;
border-radius:50%;
background:#000;
padding:15px 15px;
text-align:center;
font-size:22px;
}
#linel
{
position:relative;
float:right;
right:-44%;
top:17%;
display:block;
width:70px;
height:0.1px;
border:2px dashed green;
}
#liner
{
position:relative;
float:left;
left:-43%;
top:17%;
display:block;
width:65px;
height:0.1px;
border:2px dashed green;
}
<div class="leftcont">
<div class="content1">India's Saina Nehwal won the Australian Badminton Open Super Series title at the State Sports Centre in Sydney on 29 June, 2014.</div>
<span id="linel"></span>
</div>
<div class="timeline">
<div class="circle">2006</div>
</div/>
<div class="rightcont">
<div class="content2">India's Saina Nehwal won the Australian Badminton Open Super Series title at the State Sports Centre in Sydney on 29 June, 2014.</div>
<span id="liner"></span>
</div/>
I have two divs for which I have two buttons. Clicking on the buttons, I want to alert the "top" style property of the divs, in the codes as below:
However, when I click on the buttons, what they return is "undefined". I'd be grateful if you kindy let me know where I am going wrong.
HTML:
<div id="container">
<div id="section_1"></div>
<div id="section_2"></div>
<button id="edit_1" onClick="edit(1);"></button>
<button id="edit_2" onClick="edit(2);"></button>
</div>
javascript:
function edit(clicked_edit) {
var tp=document.getElementById('section_'+clicked_edit).top;
alert(tp);
}
CSS:
*{
margin:0px;
padding:0px;
}
body{
width:100%;
background-color:#F4F4F2;
margin-top:15px;
font-family:verdana;
}
#container{
width:820px;
height:400px;
margin-left:auto;
margin-right:auto;
margin-top:0px;
border: dashed 2px blue;
position:relative;
z-index:1;
}
#section_1{
width:800px;
height:198px;
border-top: solid 2px #D24726;
background-color:#ffcccc;
top:0px;
position: absolute;
z-index:2;
}
#section_2{
width:800px;
height:198px;
border-top: solid 2px #14826D;
background-color:#C1FBDE;
top:200px;
position: absolute;
z-index:2;
}
#edit_1{
width:50px;
height:15px;
position:absolute;
margin-left:740px;
margin-top:15px;
border:none;
cursor:pointer;
z-index:4;
background-color:red;
}
#edit_2{
width:50px;
height:15px;
position:absolute;
margin-left:740px;
margin-top:215px;
border:none;
cursor:pointer;
z-index:4;
background-color:green;
}
Js Fiddle
change .top to .offsetTop you will get the position
function edit(clicked_edit) {
var tp = document.getElementById('section_' + clicked_edit).offsetTop;
alert(tp);
}
Edit
made changes to set the div to same position as the offset value
function edit(clicked_edit) {
var tp = document.getElementById('section_' + clicked_edit).offsetTop;
document.getElementById('expansion').style.top = tp + 'px'; // need to add this
document.getElementById('expansion').style.display = 'block';
}
For that you would use getComputedStyle method of the window object in this way:
function edit(clicked_edit) {
var el = document.getElementById('section_'+clicked_edit);
top = window.getComputedStyle(el, null).getPropertyValue('top')
alert(top);
}
function edit(clicked_edit) {
var el = document.getElementById('section_' + clicked_edit),
top = window.getComputedStyle(el, null).getPropertyValue('top')
alert(top);
}
* {
margin:0px;
padding:0px;
}
body {
width:100%;
background-color:#F4F4F2;
margin-top:15px;
font-family:verdana;
}
#container {
width:820px;
height:400px;
margin-left:auto;
margin-right:auto;
margin-top:0px;
border: dashed 2px blue;
position:relative;
z-index:1;
}
#section_1 {
width:800px;
height:198px;
border-top: solid 2px #D24726;
background-color:#ffcccc;
top:0px;
position: absolute;
z-index:2;
}
#section_2 {
width:800px;
height:198px;
border-top: solid 2px #14826D;
background-color:#C1FBDE;
top:200px;
position: absolute;
z-index:2;
}
#edit_1 {
width:50px;
height:15px;
position:absolute;
margin-left:740px;
margin-top:15px;
border:none;
cursor:pointer;
z-index:4;
background-color:red;
}
#edit_2 {
width:50px;
height:15px;
position:absolute;
margin-left:740px;
margin-top:215px;
border:none;
cursor:pointer;
z-index:4;
background-color:green;
}
<div id="container">
<div id="section_1"></div>
<div id="section_2"></div>
<button id="edit_1" onClick="edit(1);"></button>
<button id="edit_2" onClick="edit(2);"></button>
</div>
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');
})
});
I've used this Sticky Footer solution to get my footer to stick to the bottom of my page even when the browser is resized.
Here is my html and internal css.
<html>
<!DOCTYPE html>
<head>
<style>
/*
Sticky Footer Solution
by Steve Hatcher
http://stever.ca
http://www.cssstickyfooter.com
*/
* {margin:0;padding:0;}
html, body {height: 100%;}
#wrap {min-height: 100%;}
#header {
top:-14px;
left:-20px;
background-image:url('header.jpg');
background-repeat: no-repeat;
background-size: 140%;
background-position:-344px;
height:333px !important;
width:1349px;
}
#main {overflow:auto;
padding-bottom: 180px;} /* must be same height as the footer */
#footer {
position:relative;
background-image: url('footerbg.jpg');
margin-top: -180px; /* negative value of footer height */
height: 180px;
width:1349px;
clear:both;}
/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}
ul
{
list-style-type: none;
}
a:link{text-decoration:none;
color:white;
}
a:link {color:white !important;
-webkit-transition:color 0.3s ease-in;
-moz-transition:color 0.3s ease-in;
-o-transition:color 0.3s ease-in;
transition:color 0.3s ease-in;
}
a:visited {color:white !important;}
a:hover {color:red !important;}
a:active {color:white !important;}
#news{
position:relative;
top:300px;
left:195px;
height: 20px;
width: 30px;
}
#shop{
position:relative;
top:280px;
left:665px;
height: 20px;
width: 30px;
}
#coming{
position:relative;
top:390px;
left:15px;
color: #000000 !important;
}
a.maillink {color:blue !important;}
a.maillink:hover {color:pink;text-decoration:none !important;}
nav {
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style-type: none !important; }
nav li {
float: left; }
#nav1 {
position:relative;
top:11px;
left:34.5%;
font-family: insolentitalic, insolentregular;
color:white;
font-size:.9em;
z-index:1;
}
#nav2 {
position:relative;
top:11px;
left:36.3%;
font-family: insolentitalic, insolentregular;
color:white;
font-size:.9em;
z-index:1;
}
#nav3 {
position:relative;
top:11px;
left:38%;
font-family: insolentitalic, insolentregular;
color:white;
font-size:.9em;
z-index:1;
}
#nav4 {
position:relative;
top:11px;
left:39.8%;
font-family: insolentitalic, insolentregular;
color:white;
font-size:.9em;
z-index:1;
}
#nav5 {
position:relative;
top:11px;
left:41.6%;
font-family: insolentitalic, insolentregular;
color:white;
font-size:.9em;
z-index:1;
}
#nav1:hover {
position:relative;
top:11px;
left:34.5%;
font-family: insolentitalic, insolentregular;
color:red;
font-size:.9em;
z-index:1;
}
#nav2:hover {
position:relative;
top:11px;
left:36.3%;
font-family: insolentitalic, insolentregular;
color:red;
font-size:.9em;
z-index:1;
}
#nav3:hover {
position:relative;
top:11px;
left:38%;
font-family: insolentitalic, insolentregular;
color:red;
font-size:.9em;
z-index:1;
}
#nav4:hover {
position:relative;
top:11px;
left:39.8%;
font-family: insolentitalic, insolentregular;
color:red;
font-size:.9em;
z-index:1;
}
#nav5:hover {
position:relative;
top:11px;
left:41.6%;
font-family: insolentitalic, insolentregular;
color:red;
font-size:.9em;
z-index:1;
}
</style>
</head>
<body>
<div id="header">
<nav>
<ul>
<li id="nav1">HOME</li>
<li id="nav2">ETC</li>
<li id="nav3">ETC</li>
<li id="nav4">ETC</li>
<li id="nav5">CONTACT</li>
</ul>
</nav>
</div>
<div id="wrap">
<div id="main">
<p>My main content here</p>
</div>
</div>
<div id="footer">
</div>
</body>
</html>
So this is what I have now:
My header, main content, and the footer.
It's good. Now, as seen here:
when the browser window is resized, the footer does not cover the content, which is great. So far, so good. Now I scroll down to find my footer, and it's fine; as seen here:
So now let me just resize my browser and uh oh, why is this happening now?
The footer is moving with the browser as it's being resized and covering my main content. I want to keep it below. Can anyone provide a solution for this?
It looks to me like it's doing basically the right thing. It's covering the content area because your content has no minimum size so it'll be sized by the contents;
#main {overflow:auto;
padding-bottom: 180px;} /* must be same height as the footer */
However, if you do fill it with content, it's doing the right thing as far as I understand what you're trying to do;
Fiddle
...in that it does not cover your content, when you actually have some content