I'm working on a HTML framework that most of it's pages constructed from two section. first section (TopPanel) is a sliding panel that could slide down or up (with jQuery as well). second section is the Main part of page that could contain any sort of HTML document.
<!doctype html>
<html>
<head>
<!--Meta scripts & more-->
</head>
<body>
<div class="TopPanel">
<!--Panel's Contents-->
</div>
<div class="Main">
<!--Some standard HTML docs here-->
</div>
</body>
</html>
When the TopPanel is sliding down, all elements of the Main section must move down. But it's possible to exist some position:fixed element in the Main section. so it's clear that they won't move unless we gave them some margin-top: [$('.TopPanel').height()] px;. But it's not what I'm looking after!
I'm looking for a way to shift down and shift up all content of the Main section with a smooth effect and without changing of all elements attributes.
Have you thought about using a CSS transform:translateY(20px) on the body tag? If you are using fixed position on the other element, it shouldn't actually affect it although I haven't tested that.
You can then use transitions to get the smooth movement you are after.
body{
padding:10px;
overflow:hidden;
background:#fff;
height:100%;
transition:all .2s;
}
body.active{
transform: translateY(60px);
}
Example:
http://codepen.io/EightArmsHQ/pen/gpwPPo
Lookout for this kind of stuff though : Positions fixed doesn't work when using -webkit-transform
JSFIDDEL version
(UPDATED) Try this:
$('.main').click(function(){
$('.main').toggleClass('toggle');
})
.main{
width:20%;
height: 10%;
background-color: rgba(100,100,100,0.7);
text-align: center;
position: fixed;
top: 12%;
transition:all 1.0s
}
.top{
width: 20%;
height: 10%;
text-align: center;
background-color: rgba(300,50,50,0.7);
position: absolute;
}
.toggle{
transform: translateY(100px);
transition:all 1.0s
}
<div class="content">
<div class="top">
Top
</div>
<div class="main">
Main
</div>
</div>
It would need some tweaking but it still does what you are looking for.
I think you are looking for is maybe this:
I have used JQuery UI 1.9.2 for making the toggle ease effect. For more i have created the Fiddle
JQuery
$("button").click(function(){
$(".topPanel").toggleClass("height", 300);
$(".main").toggleClass("top", 300);
});
CSS
body { margin:0; }
.topPanel
{
width:100%;
height:50px;
background:#333;
}
.main
{
top:50px;
bottom:0px;
width:100%;
position:absolute;
background:#ddd;
}
.height { height:100px; }
.top { top:100px; }
p { font-weight:bold; }
HTML
<div class="topPanel">
</div>
<div class="main">
<center><button>Click Me!</button></center>
<p>Hey look at me, i am moving along when you click button!</p>
</div>
Related
I am using twitter bootstrap and I want to create an overlay to show loading overlay. For example a panel body or a well body will fill and center a text "loading" or image.
I created a jsfiddle application here.
<div class="col-md-5">
<div class="panel panel-info">
<div class="panel-heading">
Header
</div>
<div class="panel-body">
Body
<div class="loading-overlay">Loading</div>
</div>
</div>
</div>
<div class="well">
Well Body
<div class="loading-overlay">Loading</div>
</div>
.loading-overlay{
top:0;
left:0;
right:0;
bottom:0;
position:absolute;
background-color:rgba(0, 0, 0, 0.65);
color: white;
}
Bu overlay is filling all page. But I want it will fill only well element or panel body. or if I put it any other element.
sample code is here.
What you want to do here is set the container element to a relative position.
In this case, since both .panel-body and the .well are supposed to contain the overlay all you have to do is add the following rules:
.panel-body {
position: relative;
}
.well {
position: relative;
}
Here's the fiddle: http://jsfiddle.net/3er5qjgt/
That's because :
top:0;
left:0;
right:0;
bottom:0;
position:absolute;
Is transformed into : Take all the place possible on the page.
You could change the position to relative, or change the way you handle this.
Make your parents relative:
.well, .panel-body {
position: relative;
}
JSFiddle Demo.
Add class relative to parent container , to show loading overlay separate for each section.
.panel-body, .well{
position:relative;
}
Here is the fiddle : http://jsfiddle.net/0r7ytrk1/5/
I'm trying to do an animation using css3/JQuery while clicking the side bar, the current div slides to the left and disappears, while another div which was hidden slides in sort of like a page transition.
this is what i've ATM : fiddle
HTML:
<div id='wrap'>
<header></header>
<div id='content'>
<div id='contentMenu'></div>
<div id='page1'>
<div id='left'></div>
<div id='right'></div>
</div>
<div id='page2'></div>
</div>
<footer></footer>
</div>
CSS:
* {
margin:0;
padding:0;
}
html, body, #wrap {
height:100%;
}
header {
height:15%;
background: #0080FF;
}
#content {
width:100%;
height:75%;
min-height:75%;
}
#contentMenu {
width:2%;
height:100%;
background:black;
display:inline-block;
}
#page1 {
width:97%;
height:100%;
display:inline-block;
-webkit-transition:height 5s;
}
#page1 div {
display:inline-block;
}
#left {
width:50%;
height:100%;
background:#FF8000;
}
#right {
width:40%;
height:100%;
background:grey;
display:none;
}
#page2 {
width:49%;
height:100%;
background:purple;
display:none ;
}
footer {
background: #58D3F7;
height:10%;
z-index:99;
}
.dis{
display:inline-block !important;
}
Script:
$('#contentMenu').click(function () {
$('#page1').toggle('fast', 'swing', function () {
$('#page2').toggleClass('dis');
});
});
but when the hidden div is given visibility, you can see a flicker in the footer.
is there anyway to eliminate this?
if i remove -webkit-transition:height 5s;, the div is animated from top right to bottom left ( toggle() animates height , width and opacity at same time) is it possible to disable the change in height and animate simply from right to left?
is there anyway to avoid the jQuery and achieve this using pure css3?
Any other ways to achieve the same using css animations also would be greatly appreciated :)
Adding overflow: hidden on #content should fix your problem :
#content {
overflow: hidden;
width:100%;
height:75%;
min-height:75%;
}
( updated JSFiddle here )
I like the overflow hidden idea as well. Also, you could get rid of most of the jquery by using css for the animation. Using transition position the div absolutely outside of the div with overflow:hidden. Then set .active to the position where you want it.
I have the following code
<div id="wrapper">
<div id="article">
Here is a text containg something
</div>
</div>
<style>
#wrapper {
height:200px;
width:500px;
background:url(http://3.bp.blogspot.com/-06iGd_Ue9dk/UqPzuA1Kw7I/AAAAAAAACPc/hBtKtRBSDGE/s1600/Pattern-call.png);
-moz-transition: background-color 2s linear;
transition: background-color 2s linear;
}
#article {
background: url("http://4.bp.blogspot.com/-5BAxq07aDQA/UgdY3Mk8spI/AAAAAAAAB84/ElxocGOzgYA/s1600/Opacity.png") repeat scroll 0 0 rgba(0, 0, 0, 0.4);
margin-top:50px;
margin: 0 auto;
width: 100px;
padding:10px;
position: relative;
top:60px;
}
#article a {color:#fff;
text-decoration:none;
}
.hover {
background:rgba(0, 0, 0, 0.4) !important;
}
</style>
<script>
$('#wrapper > div').hover(function(){
$(this).parent().toggleClass('hover');
})
</script>
I am facing 2 problems now -
1. I do no want the fade effect on hover but a transition in which the background-color would change starting from the left and end at right. (As we see in loading effect)
2. Secondly, as the background change is complete I want the browser to redirect the user to the anchor link (the cursor is stil in hover state)
I am facing problem in setting up the two. Your help would be appreciated.
Here is a jsfiddle I have made http://jsfiddle.net/MjkC5/1/ for your reference.
Finally got a link of what sort of thing I want in transition see this page http://bloggingstory-shameer.rhcloud.com/sample-post-for-ghost/ See how the background changes with the loading of page I want same sort of effect. CSS is preferable but I dont mind Jquery too.
The following code does exactly what you want. See if it helps.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(window).load(function(){
$('.animated_div').animate({ 'width':'300px' }, 2000);
})
</script>
<style type="text/css">
.wrapper {width:300px; height:100px; background:#000; position:relative;}
.animated_div {position:absolute; top:0px; left:0px; width:0px; height:100px; background:#BABABA;}
</style>
</head>
<body>
<div class="wrapper">
<!--you can put anything inside here-->
<div class="animated_div">
</div>
</div>
</body>
</html>
Thanks
My question is how to make dynamic content to be shown horizontally. It means no vertical scrolling, only horizontal. I have tried -webkit-column-count but it only creates X columns, but not horizontal scrolling. Any suggestions?
You can use the CSS
white-space: nowrap;
But then you'll have to be careful about putting line breaks in where you want them otherwise you'll end up with one really long line of text. http://jsfiddle.net/Nbkj2/1/
This is a pretty open-ended question, as I'm sure there's a lot of ways to answer this, but maybe this will point you in a useful direction: http://www.sitepoint.com/side-scrolling-site-layout-with-css-and-jquery/
To summarize the article, you break your content into a series of full-screen pages. Each page is a div with CSS to take up the whole screen, with height/width properties and float:left; to make them all stack up sideways. To prevent the pages from wrapping you make the body of the document as wide as all the pages you've made: body { width:10000px; }
Then the author puts some javascript handlers on links to scroll the page sideways to each panel of content.
Depends what element and what you mean by horizontal. Here's two examples of what I think you mean.
div {
Width:20%;
Display:inline-block; //won't work for ie 8 and below
}
body {
width: 150%;
}
Something like this demo (HTML add CSS only)
DEMO: http://jsfiddle.net/enve/ea88y/
FROM: http://www.visibilityinherit.com/code/horizontal-website.php
HTML
<ul>
<li>ONE</li>
<li>TWO</li>
<li>THREE</li>
<li>FOUR</li>
<li>FIVE</li>
</ul>
<div id="wrap">
<div id="one"><p>ONE</p></div>
<div id="two"><p>TWO</p></div>
<div id="three"><p>THREE</p></div>
<div id="four"><p>FOUR</p></div>
<div id="five"><p>FIVE</p></div>
</div>
</body>
</html>
CSS
* {
margin:0;
padding:0;
}
html {
height:100%;
overflow-x:scroll;
}
body {
height:100%;
}
#wrap {
min-height:100%;
width:500%;
overflow:hidden;
}
#one, #two, #three, #four, #five {
width:20%;
float:left;
}
ul {
position:fixed;
width:100%;
height:40px;
line-height:40px;
text-align:center;
background:#ccc;
}
li {
display:inline;
margin:0 50px;
}
p {
margin:50px;
text-align:center;
}
* html ul {position:absolute;left:expression(0+((e=document.documentElement.scrollLeft)?e:document.body.scrollLeft)+'px');}
* html {background:url(fake.jpg)}
* html #full {height:100%;}
Hopefully not too vague. All I want to do is make the entire page go dim after clicking a link. I would imagine having div style="height:100%; width=100%;" with a high z-index. to cover the webpage. My question is toggling this div. I'm not sure what I should even use to accomplish this.
Demos using jQuery or using bog-standard Javascript, both showing how you can toggle the element.
HTML You didn't say how you want to toggle this. Using a button?
<button onclick="dim();">Dim</button>
<div id="dimmer"></div>
but bear in mind the dimmer will go over the button
CSS
#dimmer
{
background:#000;
opacity:0.5;
position:fixed; /* important to use fixed, not absolute */
top:0;
left:0;
width:100%;
height:100%;
display:none;
z-index:9999; /* may not be necessary */
}
N.B. Use position: fixed as 100% height is only the window height and if your document is larger, using position: absolute doesn't dim the whole document - you can scroll to see there are contents visible.
Javascript
function dim(bool)
{
if (typeof bool=='undefined') bool=true; // so you can shorten dim(true) to dim()
document.getElementById('dimmer').style.display=(bool?'block':'none');
}
dim(true); // on
dim(false); // off
You can do it with a simple JavaScript
Demo
HTML
Click me
<div id="toggle_div"></div>
Hello World
JavaScript
function dim_div() {
document.getElementById("toggle_div").style.display="block";
}
CSS
#toggle_div {
background-color: rgba(255, 255, 255, .6);
display: none;
position: absolute;
width: 100%;
height: 100%;
top: 0;
z-index: 999;
}
HTML
<div id="initial_opacity_zero"></div>
<button id="button_to_adjust_opacity" onclick="func_onclick();"></button>
CSS
div#initial_opacity_zero{
opacity:0;
display:block;
position:fixed;
top:0px; right:0px; bottom:0px; left:0px;
}
JavaScript:
function func_onclick(){
document.getElementById("initial_opacity_zero").style.opacity="0.6";
}