I have a floating sidebar which is located on the right of the page which I want to be able to resize using a handle on the left of the container.
At the moment, when I drag the sidebar using the handle, it makes the sidebar wider when dragging right, and smaller when dragging left - I wan't it to do the inverse of this. i.e., dragging to the left increases the size of the sidebar etc..
I would prefer to not change the html structure and hopefully have a simple line of javascript to fix the problem - please help!
Here is a fiddle: https://jsfiddle.net/c01gat3/us8vktjq/
html
<div id="sidebar">
<div id="drag">
</div>
</div>
css
#sidebar{
position: absolute;
top: 0;
right: 0;
width: 200px;
height: 100% !important;
background-color: blue;
}
#drag{
position: absolute;
left: -10px;
width: 10px;
height: 100%;
background-color:black;
cursor:ew-resize;
}
Javascript
$('#sidebar').resizable({
minWidth: 100,
handles: { "w" : $("#drag") }
});
You're missing the associated CSS file.
Add the following reference to your HTML page:
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
Adjust your HTML code to include the needed classes:
<div id="sidebar">
<div id="drag" class="ui-resizable-handle ui-resizable-w">
</div>
</div>
Working fiddle here: https://jsfiddle.net/us8vktjq/2/
Read more here: http://api.jqueryui.com/resizable/#option-handles
Related
Exploring web, I found this amazing effect on this site http://www.guglieri.com/
(the scrolling effect)
I want to build a script that recreates the same effect but I don't understand the logical behavior.
Basically, I started to calculate the body height setting the position property of each section to "absolute" and summing the height of the body to the height of each section.
Now, the idea is to save into an array the offset of each one and, when scrolltop is major or equals to this offset... I start to move section to top through the translateY property and I stop moving when it is equals to the height of the viewport. But now I'm stuck!!
I googled for an already existing plugin but I didn't found anything. So please help me to found a solution ;)
Concept here:
var
body = $('body')
section = $('section');
section.each(function(i,el){
$(el).css({
'z-index' : section.length - i
})
body.height(body.height()+$(el).height());
});
body {
margin: 0;
}
section {
width: 100vw;
height: 100vh;
position: absolute;
top: 0;
left: 0;
font-family: sans-serif;
}
section.a {
background-color:indianred
}
section.b {
background-color:royalblue
}
section.c {
background-color:deepskyblue
}
section.d {
background-color:tomato;
}
section div {
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);
font-size: 6em;
color: #FFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<section class="a">
<div>a</div>
</section>
<section class="b">
<div>b</div>
</section>
<section class="c">
<div>c</div>
</section>
<section class="d">
<div>d</div>
</section>
It's parallax effect.
Here's a simple parallax script: http://pixelcog.github.io/parallax.js/
There are other more scripts on the web also tutorials on how to make your own parallax effect depending on your needs.
You can try pagePiling.js, but the difference is this one uses auto scrolling.
A similar effect can be achieved by using the fullPage.js parallax extension with the options offset:100 autoScrolling:false.
My code is:
HTML:
<section>
<div id="banner">
<div class="container">
<p class="para">hello world</p>
</div>
<div class="container banner-bottom">
<div class="card card-primary text-center z-depth-2 contact-main-text">
<div class="card-block">
<p class="white-text">Please fill out the form below and ESC
staff will be in contact with you shortly.</p>
</div>
</div>
</div>
</div>
</section>
CSS:
.para{
color:white;
background: red;
padding:70px;
text-align:center;}
.white-text{
background:green;
padding:20px;}
Output is: Bootply
And i want:
Could anyone help me with that?
You can set negative top margin to overlay the second div, see the live example:
<div class="container banner-bottom" style="margin-top:-5%;padding:2%">
http://www.bootply.com/MorC45NB4V
PS: I have used inline css just to show, avoid inline css.
My solution uses jQuery and some calculations. My calculation works even if you move the elements around the document. I also used CSS for the margins you wanted.
jQuery
//location of bottom of the red container
var bottomOfContainer = $('#onTopOfMe').offset().top + $('#onTopOfMe').height();
//gets the bottom 4th of the red container
var placement = bottomOfContainer - ($('#onTopOfMe').height() / 4);
//setter of top for green container
$('#placeMe').offset({"top": placement});
CSS
p.white-text{
margin-left:5%;
margin-right:5%;
}
Output
bootply
1) In case you want your lower banner to have a full width:
You could add position: relative; to the lower banner and position it adding a bottom value and use margin to create the same visual effect asked in the question.
.banner-bottom {
position: relative;
bottom: 45px;
margin: 0 40px;
}
2) In case you don't need to have a banner with full width and just center it, then no need to use margins. Remember to set one parent as position: relative;:
#banner { position:relative;}
.banner-bottom {
position: absolute;
top:75%;
right:0;
bottom:auto;
left:0;
}
CODEPEN
http://codepen.io/alexincarnati/pen/PWOPjY
Here's my solution for this.
Basically just make the position of the card block "relative", position the "top" position accordingly, then set the margin to "auto" to center it.
.card-block {
position: relative;
top: -50px;
margin: auto;
width: 80%;
}
A bit of position could help you, here's a rough version that will hopefully get you thinking what you need to do:
#banner { position:relative;}
.banner-bottom { position: absolute; top:75%;right:0;bottom:auto;left:0; }
Heres a forked bootply: http://www.bootply.com/Imuh4wUj50
For a website I'm designing directly with CSS and Foundation 5, I am centering all content vertically in the middle of the viewport when the content area is taller than the browser window.
I found an excellent pure CSS solution that works perfectly. I'm very happy with the current behavior when the content area is small enough to fit entirely within the viewport without a scroll fold. I fairly sure that I don't need or want any kind of vertical centering when the content is long enough for scrolling.
The problem is that when there is too much content to fit on the screen, the CSS crops off the header and makes it impossible to scroll up to see the top of the content.
The CSS I adapted from davidwalsh.name uses a transformation to raise the container by half its height after its top was placed 50% down from the top.
#non-framework-container {
height: 100%;
width: 100%;
}
#non-framework-wrapper {
height: auto;
width: auto;
position: relative;
top: 50%;
transform: translateY(-50%);
}
This is applied to these two nested containers around the Foundation classes.
<div id="non-framework-container">
<div id="non-framework-wrapper">
<header class="row">
[...]
</header>
[...]
</div>
</div>
I want to disable the CSS when the content (specifically #non-framework-container) is taller than the viewport. I was hoping it would be as simple as this bit of JQuery:
$(document).ready(function) {
if ( $("#non-framework-container").height() > $(window).height() ) {
$("#non-framework-wrapper").css("position":"static", "top":"0", "transform":"none");
}
});
Unfortunately, my script doesn't do anything, no matter the amount of content or the browser size (and regardless of whether I load it in the head tag or at the bottom of the body tag).
I love how the CSS transformation method works, so I'm reluctant to try a pure JavaScript solution.
Try this (not tested, cannot currently test where I am):
HTML:
<div id="non-framework-container">
<div id="non-framework-wrapper">
<header class="row">
<h1>Your mom makes the best pizza</h1>
</header>
</div>
</div>
CSS:
#non-framework-container {
height: 100%;
width: 100%;
}
.transform {
height: auto;
width: auto;
position: relative;
top: 50%;
transform: translateY(-50%);
}
JAVASCRIPT:
var div = $("#non-framework-wrapper").height();
var winSize = $(window).height();
$(document).ready(function() {
if (div < winSize) {
$("#non-framework-wrapper").addClass('transform');
} else {
$("#non-framework-wrapper").removeClass('transform');
}
});
I want to have a long page, with a fixed top 100px div, and a fixed 50px bottom div. However, I want the bottom div to scroll as you scroll down the page.
Its hard to explain, but the best example of this is on the front page of PayPal.com
On the first page load, the bottom div looks like it is fixed, and as you adjust the height of the browser window, that div stays at the bottom. Yet as you scroll down the page it is not fixed.
Can anyone explain how they have done this? I am trying to re-create something similar, but cant see how they have managed it.
As far as I can see they have this html...
<div id="fixed-top">
<header class="table-row">
// header content
</header>
<div class="table-row table-row-two">
// Video content
</div>
<div class="table-row">
//bottom content
</div>
</div>
And this CSS...
#fixed-top {
height: 100%;
width: 100%;
display: table;
position: relative;
top: 0;
left: 0;
z-index: 1;
}
.table-row {
display: table-row;
}
But that alone doesn't do it. I also can't see any js thats getting window height and applying it to the main fixed div.
Help! :)
EDIT:
Have just found a way to do it with javascript, controlling the height of the middle row using the window height, minus the 150px for the header and third row.
jQuery(document).ready(function(){
$('div.table-row-two').css({'height':(($(window).height())-150)+'px'});
$(window).resize(function(){
$('div.table-row-two').css({'height':(($(window).height())-150)+'px'});
});
});
But saying that, Zwords CSS only method seems like a winner.
From what I understand, you are looking for something like a sticky footer. So basically if the content is not enough, the footer should go sit at the bottom like its fixed, but if content comes in, it should scroll down like other content.
Try this - http://css-tricks.com/snippets/css/sticky-footer/
First off, you'll need to set the height of the body and html tag, otherwise the table won't take the full screen. Then I altered your code, made it a bit easier.
HTML:
<div id="fixed-top">
<header>
// header content
</header>
<div>
// Video content
</div>
<div>
//bottom content
</div>
</div>
CSS:
html, body {
margin: 0;
padding: 0;
height: 100%;
min-height: 100%;
}
#fixed-top {
display: table;
width: 100%;
height: 100%;
}
#fixed-top > * { /* makes all the direct children of #fixed-top a table row*/
display: table-row;
background: lightblue;
}
#fixed-top > *:nth-child(1) {
background: lightgreen;
height: 40px;
}
#fixed-top > *:nth-child(3) {
background: lightgreen;
height: 25%;
}
You can either set the height to a fix height (in px) or percentages. If you only give two of the three rows a height, the third one will automaticly fill up the rest space.
Also, check this demo.
Check this fiddle / Fullscreen
Using display:table;,display:table-row;,min-height to adjust to screen
HTML
<div class="wrapper">
<div class="row">menu</div>
<div class="row">content</div>
<div class="row">footer</div>
</div>
<div class="wrapper">
<div class="row">content1</div>
<div class="row">content2</div>
<div class="row">content3</div>
</div>
CSS
html,body,.wrapper{
width:100%;
height:100%;
margin:0px auto;
padding:0px;
}
.wrapper{
display:table;
border:1px solid black;
}
.wrapper .row{
display:table-row;
background-color:rgb(220,220,220);
}
.wrapper .row:nth-of-type(1){
min-height:15px;
}
.wrapper .row:nth-of-type(2){
height:100%;
background-color:white;
}
.wrapper .row:nth-of-type(3){
min-height:15px
}
You can do this easily with jQuery using $(window).height() and subtracting your footer/header's heights. See Fiddle for an example.
I am trying to get the div with id="markdown-editor" to slide over when a button is clicked using JQuery's Animate function. markdown-editor contains two divs that have position: fixed. The div with id=header doesn't have any other positioning css (top, bottom, left, etc.), but the other div, where id=footer, has bottom: 0px. When I animate the #markdown-editor div, everything inside #markdown-editor animates correctly except #footer. I know it has something to do with using positioning css, but I'm not sure what to do about it. Below is the pertinent code:
HTML:
<div id="markdown-editor" class="col-xs-12">
<div id="header" class="row">
...
</div>
<div class="row">
...
</div>
<div id="footer" class="row">
...
</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
CSS:
#header {
position: fixed;
padding-top: 15px;
z-index: 9001;
}
#footer {
position: fixed;
bottom: 0px;
width: 100%;
margin: auto;
z-index: 9001;
padding: 10px;
}
Javascript:
$("#menu-button").on("click", function(e) {
$("#markdown-editor").animate({left: "20%"}, 500, "swing");
});
You need quotes around the first #menu-button in the Javascript portion.
You forgot quotes around #menu-button
$("#menu-button").on("click", function(e) {
$("#markdown-editor").animate({left: "20%"}, 500, "swing");
});
EDIT
Make sure you're linking to the jQuery library in your head.
Also, try giving #markdown-editor a left value in your css. Also, you need to give it a position. It doesn't matter if the elements inside it have position, the actual element needs a position in order to animate. Has to be fixed, relative, or absolute.
#markdown-editor {
position: relative; // or fixed or absolute
left: 2px;
}