I'm trying to make it when the users mouse enters the .container the #facial will slide to the left, pause for a second, and then increase it's width to fill the width of it's container.
Right now the #facial slides properly, but when i try to have #facial fill the entire width it pops out of it's container. Also i'd like it to pause for a moment to show the transition slower from when it enters the middle to when it increases it's width.
Here is my code.
$( document ).ready(function() {
$('.container').mouseenter(function(){
// When mouse enters the .container, #facial slides to center of .container.
$('#facial').animate({right: '122px'});
// #facial expands it's width to fit .container.
$('#facial').width(400);
});
});
Here is my Demo
$(document).ready(function() {
$('.container').mouseenter(function() {
// When mouse enters the .container, #facial slides to center of .container.
$('#facial').animate({
right: '122px',
position: 'absolute'
}).delay(500).animate({
right: '0px',
width: '478px'
});
// #facial expands it's width to fit .container.
$('#facial').width(250); // .width(400) causes it to pop-out
});
});
body {
background-color: #d6d6d6;
}
.container {
margin: 200px auto;
background-color: red;
width: 478px;
height: 200px;
}
img {
float: left;
width: 239px;
height: 200px;
}
.image {
position: absolute;
}
#facial {
position: relative;
float: right;
width: 239px;
height: 200px;
background-color: #008aaf;
}
#facial h1,
#facial h2 {
text-align: center;
margin-top: 30px;
color: #FFFFFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="image">
<img src="http://s23.postimg.org/enn2yyh7v/Facial.jpg" alt="Facial - Marketing Material" />
</div>
<div id="facial">
<h1>Facial</h1>
<h2>Marketing Material</h2>
</div>
</div>
Changed to use percentages and to use absolute positioning.
https://jsfiddle.net/sy4pv8z3/
Javascript:
$( document ).ready(function() {
$('.container').mouseenter(function(){
// When mouse enters the .container, #facial slides to center of .container.
$('#facial').animate({right: '25%'})
.delay(500)
.animate({right: 0, width: '100%'});
});
});
CSS:
body {
background-color:#d6d6d6;
}
.container {
position: relative;
margin: 200px auto;
background-color:red;
width:478px;
height:200px;
}
img {
float:left;
width:239px;
height:200px;
}
#facial {
position:absolute;
right: 0;
width:239px;
height:200px;
background-color:#008aaf;
}
#facial h1, #facial h2 {
text-align:center;
margin-top:30px;
color:#FFFFFF;
}
$('#facial').animate({right: '122px'}).delay(1000).animate({width: '400px'});
Related
I have a function that when clicked takes the div container and centers it on screen, enlarged with fixed position and z-index of 2. I would like to dynamically create an element to sit z-index of 1 underneath the div with a black background, partially transparent, that hides the main content. How do I create and place this element into the page and delete it afterwards?
This demo has on overlay that's loaded on window onload event (#overlay).
There's a password input in #overlay (#pass is "off")
#overlay will use classList to change it's class to.off once the password is entered, thereby rendering #overlay non-existent (display: none).
var ov = document.getElementById('overlay');
var ps = document.getElementById('pass');
ps.addEventListener('change', function(e) {
if (pass.value === "off" && ov.classList.contains('on')) {
ov.classList.add('off');
ov.classList.remove('on');
} else {
alert('password is incorrect');
}
}, false);
function init() {
ov.classList.add('on');
}
window.onload = init;
#overlay {
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.6);
z-index: 1;
width: 100%;
height: 100%;
pointer-events: none;
}
.content {
border: 3px solid red;
width: 400px;
height: 200px;
margin: 50px auto;
padding: 10px;
}
p {
font: 600 16px/1.428'Arial' margin: 0 0 15px 10px;
}
#pass {
pointer-events: auto;
width: 100px;
line-height: 20px;
text-align: center;
margin: 25% auto 0;
display: block;
}
.off {
display: none;
}
.on {
display: block;
}
<div id="overlay" class="off">
<input id="pass" name="pass" type="password" placeholder="Enter Password">
</div>
<div class="content">
<p>xxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</div>
I have a function that when clicked takes the div container and centers it on screen
Since you are doing this you have more control over it, All you have to so it is add this part of html along with this div of yours. (your div and this new div must be wrapped inside a parent div)
HTML
<div class="overlay-parent">
<div class="overlay"></div>
/* your div */
</div>
CSS
.overlay-parent{
width:100%;
height:100%;
overflow:hidden;
}
.overlay{
position:absolute;
top:0;
bottom:0;
width:100%;
background-color: black;
opacity:0.3;
}
This should be the structure when you are centering the div to center of the screen. And appending this structure to the body tag will get you the desired result
I want to make navbar with fixed position. At the top of the page the navbar should be under the header and after scrolling down when header is no longer visible the navbar should be at the top of the page. How can I do that? When I try to do it after scrolling down between the navbar and top of the page is still the height of the header(even though it is no longer visible).
Here is my css:
header{
background-color: red;
width: 100%;
height: 100px;
}
nav{
position: fixed;
float:left;
height: 100px;
width: 100px;
margin-left: 10px;
margin-right: 50px;
margin-top:50px;
background-color: green;
}
main{
background-color: blue;
height: 1500px;
margin-left:15%;
margin-right:5%;
margin-top:50px;
}
and jfiddle: https://jsfiddle.net/pg2kwk5e/
You can add a class to the nav element with javascript after scrolling a certain amount.
I've used Jquery as it's faster and easier to show this in action.
Example
I'm just adding a class .fixedTop to the nav after the window scrolls more than 150 pixels, the class itself just has top:0;margin0; to move the absolute positioned element to the top and remove the margin which was set before.
Code:
var $nav = $("nav"),
$(window).scroll(function() {
if($(this).scrollTop() > 150) {
$nav.addClass('fixedTop');
} else {
$nav.removeClass('fixedTop');
}
})
CSS:
.fixedTop {
top: 0;
margin: 0 !important;
}
I want to open a modal layer which overtakes the body scroll. To accomplish that, when the layer is shown I'm setting the body overflow to hidden and the overflow to scroll on the modal layer. Visually, one scrollbar replaces the other.
In the background I have a top bar with fixed position and 100% wide. What happens is when the body overflow is set to hidden, the 100% width div (top bar) takes the scrollbar space and its elements move to the right.
How can I prevent those elements from moving?
I tried to calculate (javascript) the width of the scrollbar and when setting the body overflow: hidden, give a margin-right: "scrollbar width" to the top bar. That didn't work.
Also tried a dummy div at the right end of the top bar with overflow set to scroll and force it to display a scroll bar when the layer is opened. The idea was to take the space of the missing scrollbar with another scrollbar, only on the top container. That almost worked but created a 1 or 2px flickering. Not good enough.
jsFiddle here with the basic problem
var body = $('body'),
main = $('.main'),
open_modal = $('.open-modal'),
close_modal = $('.close-modal'),
modal_container = $('.modal-container'),
toggleModal = function() {
body.toggleClass('body-locked');
modal_container.toggleClass('dp-block');
};
open_modal.on('click', toggleModal);
close_modal.on('click', toggleModal);
Basically...
When the modal is opened, set the menu width to it's current width and set a window.onresize event handler which will resize the menu to the body's width.
When the modal is closed, remove the fixed width and the window.onresize handler and return the menu to it's initial state.
In the spirit of less === more I've taken the liberty of simplifying your code as much as I can.
var body = $('body');
var menu = $('#topBarFixed');
function toggleModal() {
menu.css('width', body.hasClass('locked') ? '' : menu.width());
window.onresize = body.hasClass('locked') ? '' : function () {
menu.css('width', body.width());
}
body.toggleClass('locked');
}
body.on('click', '.open-modal, .close-modal', toggleModal);
body {
padding-top: 40px;
height: 1000px;
background: lightblue;
}
body.locked {
height: 100%;
overflow: hidden;
}
.modal-container {
display: none;
overflow-y: scroll;
position: fixed;
top: 0; right: 0;
height: 100%; width: 100%;
background-color: rgba(255, 255, 255, 0.3);
z-index: 400;
}
body.locked .modal-container {
display: block !important;
}
.modal {
height: 600px;
width: 200px;
margin: 50px auto;
background: indianred;
}
#topBarFixed {
width: 100%;
background-color: lightgray;
position: fixed;
top: 0;
left: 0;
text-align:center;
display: inline-block;
z-index: 200;
}
.topBarContent {
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
}
.inner1 {
width:30px;
line-height: 40px;
}
.open-modal {
position: relative;
top: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="topBarFixed">
<div class="topBarContent">
<div id="inner" class="inner1">div</div>
<div id="inner" class="inner1">div</div>
<div id="inner" class="inner1">div</div>
<div id="inner" class="inner1">div</div>
<div id="inner" class="inner1">div</div>
</div>
</div>
<p>Scroll down to open layer</p>
<button class="open-modal">Open layer</button>
<div class="modal-container">
<div class="modal">
<button class="close-modal">Close layer</button>
</div>
</div>
Your problem here is that topBarFixed has a 100% width. If this width was fixed you would not have this problem. The following has been tested on Chrome and Firefox:
Add this line to your toggleModal function's first line:
$(".topBarFixed").width($(".topBarFixed").width());
That will set the width to the actual width (in pixels) of the bar at that point. Then when you close the layer, set it back to 100%.
close_modal.on('click', function() { toggleModal(); $(".topBarFixed").width("100%"); });
The entire code looks like:
var body = $('body'),
main = $('.main'),
open_modal = $('.open-modal'),
close_modal = $('.close-modal'),
modal_container = $('.modal-container'),
toggleModal = function() {
$(".topBarFixed").width($(".topBarFixed").width());
body.toggleClass('body-locked');
modal_container.toggleClass('dp-block');
};
open_modal.on('click', toggleModal);
close_modal.on('click', function() { toggleModal(); $(".topBarFixed").width("100%"); });
And here is the jsFiddle: http://jsfiddle.net/wmk05t0b/5/
Edit
Optionally, you could just come up with a fixed width, and that will do the trick:
.topBarFixed
{
width:715px; /*changed from 100%*/
height: 40px;
background-color: lightgray;
position: fixed;
top: 0;
left: 0;
text-align:center;
display: inline-block;
z-index: 200;
}
Some errors in your code: id is only one. Use classes if you want to apply the same style to more elements.
<div class="topBarContent">
<div class="inner1">div</div>
<div class="inner1">div</div>
<div class="inner1">div</div>
<div class="inner1">div</div>
<div class="inner1">div</div>
</div>
Anyways, that's not what caused your problem. First of all, your body's overflow should be enough: don't add an overflowY to your .modal-container unless you want to prevent the background page from scrolling while modal is open. Second, fix the modal itself, and center it using the centered CSS trick (left:50%, margin-left:-half-of-your-width).
CSS:
.body-locked {
overflow:scroll;
}
.modal-container {
overflow:hidden;
position:fixed;
display: none;
top: 0; right: 0;
height: 100%; width: 100%;
background-color: rgba(255, 255, 255, 0.3);
z-index: 400;
}
.modal {
position: fixed;
height: 600px;
width: 200px;
margin: 50px auto 50px -100px;
background: indianred;
left:50%;
}
/*Reset your body, you never know*/
body {
margin:0;
padding:0
}
Hope it helps.
<div id="first">Something</div>
<div id="last">something too</div>
<style>
#last {
position: absolute;
margin:0;
padding:0;
bottom:0; /*yes this div is at the bottom*/
}
#first {
}
</style>
My problem is that I can't reach last div with the border of the first div. I want last div to be at bottom and first div to have overflow:auto;? But it doesn't work. When I fill my div some text nothing is showing no scrollbar or anything like that and the first div kind of goes behind the last div even though I haven't assigned them any z-index values.
How Can I solve this? I want my first div to grow until it reaches last div and fill it with text maybe with scrolling appearing when it is only needed. I mean when two divs touch each other kind of.
This will give you a fixed size footer (#last) but the content (#first) expands as needed:
body {
margin: 0px;
padding: 0px;
}
#wrapper {
position: absolute;
top: 0;
bottom: 200px;
left: 0;
right: 0;
}
#first {
background-color: #5588FF;
width: 100%;
max-height: 100%;
overflow-y: auto;
}
#last {
background-color: #FF8855;
position: fixed;
bottom: 0px;
height: 200px;
width: 100%;
}
See this fiddle for the full solution: http://jsfiddle.net/xWa9f/4/
Is this what you want? Fiddle link: http://jsfiddle.net/emw2x/2/
body, html{
height: 100%;
}
#last {
margin:0;
padding:0;
bottom:0; /*yes this div is at the bottom*/
border: 1px solid black;
width: 100%;
height: 10%;
}
#first {
border: 1px solid red;
height: 90%;
width: 100%;
padding: 0;
margin: 0;
overflow: auto;
}
Give that a try to see if that's what you want.
if you accept some javascript in the mix, i have this solution for you.
first, change the absolute positioning to fixed positioning of the #last div.
set overflow:auto to the #first div and the javascript does the rest (you need jQuery):
(function () {
var heights = window.innerHeight;
var outerHeights = $("#last").outerHeight(true);
jQuery('#first').css('height', (heights - outerHeights) + "px");
})();
basically it calculates the window height of your monitor, it subtracts the height of the #last div and gives what's left to the #first div. when the content exceeds the available pixel height, a scroll bar will appear.
check it here: http://jsfiddle.net/vlrprbttst/rR7Uu/2/
the plus here is this works at any window resolution, so you don't have to worry about screen resolutions and you don't have to worry about the height of your #last div (margins, paddings, borders, whatever included)
I am trying to change the size of the image for the ui slider handler to increase as you move the scroller to the right and to decrease in size as you scroll it to the left. I will be using a SVG of course so the scale remains accurate! any ideas? :(
Ye can check out the code here:
http://jsfiddle.net/userdude/3teR3/
or here:
#slider {
width: 200px;
margin: 50px auto;
}
.ui-slider .ui-slider-handle {
width:28px;
height:28px;
background:url(http://hitskin.com/themes/13/67/44/i_right_arrow.png) no-repeat 0 0;
overflow: hidden;
position:absolute;
margin-left:0px;
top: -7px;
border-style:none;
cursor:help;
}
<div id="slider"></div>
$(function() {
$("#slider").slider();
});
You can make the size of the .png dependent from width and height and change these with the slider-value:
HTML:
<div id="slider"></div>
CSS:
html,
body {
width: 100%;
}
#slider {
width: 200px;
margin: 50px auto;
}
.ui-slider .ui-slider-handle {
width:28px;
height:28px;
background:url(http://hitskin.com/themes/13/67/44/i_right_arrow.png) no-repeat 0 0;
background-size:100%; /*this is the importent thing!*/
overflow: hidden;
position:absolute;
margin-left:0px;
top: -7px;
border-style:none;
cursor:help;
}
Javascript:
$(function() {
$("#slider").slider({
min:0, max: 10,
slide: function(event,ui){
$(".ui-slider-handle").css('width',28*(1+(ui.value)));
$(".ui-slider-handle").css('height',28*(1+(ui.value)));
},
});
});
And here as jsFiddle: http://jsfiddle.net/1Blerk/3teR3/20/
Maybe it is still usefull for you.