I want to make a reusable function that enable me to easily cover or overlap an element such as select, textfield, input, div, table and etc with a semitransparent div to it's exact height and width.
I am able to get the element position and size:
$(element).height()
$(element).width()
$(element).offset().top
$(element).offset().left
However, how can I bind the element position and size with the div? If the element position or size change, so as the div will change. Any suggestion that how I can do it? Or, is there any existing jquery plugin for this? I believe this will be very useful for temporary disable an element from user interaction for operation such as ajax and etc.
Thanks.
You could create a function/plugin using the jQuery .wrap() function and the appropriate CSS for the overlay..
$.fn.overlay = function() {
return this.each(function(){
var $this = $(this);
var left = $this.offset().left;
var top = $this.offset().top;
var width = $this.outerWidth();
var height = $this.outerHeight();
$this.wrap("<div id='overlay'> </div>")
.css('opacity', '0.2')
.css('z-index', '2')
.css('background','gray');
});
};
Demo on Bootply: http://bootply.com/87132
This should work generically and be reusable.. not just for Bootstrap elements!
Like this
demo
css
div {
position:relative;
z-index:1;
height:200px;
width:400px;
background-color:green;
}
div div {
position:absolute;
z-index:2;
top:0px;
bottom:0px;
left:0px;
right:0px;
background-color:black;
opacity:0.5;
}
div div input {
position:relative;
top:25px;
z-index:1;
}
Related
I'm having an issue resetting a div's left position with jquery after an animation. I'm trying to animate a div from off the screen(left) to on the screen. However, I only want to trigger this animation if the value of scrollTop of the window is greater than a certain value. once the value of scrollTop is less than the value, I want the div's position to change so that it is offscreen again. This is working but only sometimes and I'm not sure why. I am also setting the position of the div to absolute at the same time I am setting it to go off the screen and this change always works!. Below is the code as well as the CSS of the div I'm trying to animate. Thank you!
Function to change position on scroll
$(window).scroll(function() {
if( $(this).scrollTop() > 500 {
$(".animated-logo").css({position:'fixed'});
$(".animated-logo").animate({left: '20px'},500);
}
else{
$('.animated-logo').css({position: 'absolute',left:'-150px'});
}
});
CSS for the animated-logo element
.animated-logo
{
position:absolute;
top:0;
left:-150px;
width:100px;
z-index:2;
}
So first off, you have a syntax error.
I would approach this with using classes instead of doing it like this. At best you're going to have a buggy transition. You can adjust the css transition to make it your desired timing.
JS:
$(window).scroll(function() {
if( $(this).scrollTop() > 500) {
$(".animated-logo").addClass('visible');
}
else{
$(".animated-logo").removeClass('visible');
}
});
CSS:
.animated-logo{
position:absolute;
top:0;
left:-150px;
width:100px;
z-index:2;
transition:0.5s;
}
.animated-logo.visible{
position:fixed;
left:20px;
}
https://jsfiddle.net/783z9rhm/6/
When you say This is working but only sometimes and I'm not sure why, it's not sure what the problem is so I'll assume you are having issues with the animation after the first time it runs. The is maybe because you are firing it ON EVERY USER SCROLL ACTION, which is a lot. Using a flag to fire it only once every time the 500px threshold is crossed will get rid of the glitch
HIH
var visible = false;
$(window).scroll(function() {
if( $(this).scrollTop() > 500) {
if(!visible){
visible = true;
$(".animated-logo").css({position:'fixed'});
$(".animated-logo").animate({left: '20px'},500);
}
}
else{
visible = false;
$('.animated-logo').css({position: 'absolute',left:'-150px'});
}
});
.animated-logo
{
position:absolute;
top:0;
left:-150px;
width:100px;
height:100px;
z-index:2;
background: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="animated-logo"></div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
I'm encountering a weird (maybe not) behaviour that I want to avoid because the end result is a horrible user experience. To help you understand the problem I put together the code snippet below.
var counter;
var counterDisplay;
var intervalRef;
window.onload = function(){
console.log("loading");
counter = 11;
counterDisplay = document.getElementById("spCounter");
intervalRef = setInterval(tickHandler, 1000);
};
function tickHandler(){
counter--;
counterDisplay.innerHTML = counter.toString();
if(counter == 0){
stop();
return;
}
}
function stop(){
clearInterval(intervalRef);
document.getElementById("daddyLongLegs").style.display = "block";
}
html,body{
width:100%;
height:100%;
font-family:Arial;
font-size:16px;
}
.page-wrapper{
height:100%;
background-color:#eee;
}
.growing-element{
height:800px;
display:none;
margin: 100px 100px 0 100px;
background-color:#ddd;
}
<div class="page-wrapper">
<div class="container-element">
<!--This element's height never changes once the page has been rendered-->
<div>
The hidden child element below will magically appear in: <span id="spCounter">10</span> seconds
</div>
<!--This element's height changes anytime after the page has been loaded-->
<div id="daddyLongLegs" class="growing-element">
Now you see me...
</div>
</div>
</div>
The code snippet is pretty simple, all the javascript does is to display a child element (#daddyLongLegs) after ten seconds. Make the "problem" more visual colored the parent element (div.container-element) different to the child element.
Problem
Now, when the child element (#daddyLongLegs) is displayed after 10 seconds, it doesn't seem to "stretch" the parent element (div.container-element). This is not the behaviour I'd like to achieve. I would like the parent element to re-adjust its height when its contents change. However, it is important that the height of the parent element ALWAYS cover the whole document
Question
How can I make the parent readjust its height once the content has changed? Is there a pure css solution to this?
.container-element has a defined height of 100%
If you remove that, or set it to auto, it should calculate the height based on its content.
Or you could change from height to min-height, which would calculate the height based on its content, but no shorter than 100% of its parent's height.
As described on MDN, you can use min-height attribute instead of height so whenever your <div>'s child rises, it will extend parent as well
so from my comment:
use min-height: 100% instead of height: 100% on your
.page-wrapper
Change height to 100% and margin to 0;
var counter;
var counterDisplay;
var intervalRef;
window.onload = function(){
console.log("loading");
counter = 5;
counterDisplay = document.getElementById("spCounter");
intervalRef = setInterval(tickHandler, 1000);
};
function tickHandler(){
counter--;
counterDisplay.innerHTML = counter.toString();
if(counter == 0){
stop();
return;
}
}
function stop(){
clearInterval(intervalRef);
document.getElementById("daddyLongLegs").style.display = "block";
}
html,body{
width:100%;
height:100%;
font-family:Arial;
font-size:16px;
}
.page-wrapper{
height:100%;
background-color:#eee;
}
.growing-element{
height:100%;
display:none;
background-color:#ddd;
}
<div class="page-wrapper">
<div class="container-element">
<!--This element's height never changes once the page has been rendered-->
<div>
The hidden child element below will magically appear in: <span id="spCounter">10</span> seconds
</div>
<!--This element's height changes anytime after the page has been loaded-->
<div id="daddyLongLegs" class="growing-element">
Now you see me...
</div>
</div>
</div>
I am wondering if I can use jquery so that when I click on a fixed div it adds padding to another div. For the example below, I would like to add 40px of padding to the top of div2 once I click div1, and when clicked again I would like to revert to the original amount of padding (20px).
Here's a fiddle: http://jsfiddle.net/pauljackson/p9LfkLsd/1/
html:
<div id="div1">The Pusher</div>
<div id="div2">Push me down!</div>
css:
#div1{
position:fixed;
background-color:red;
color:white;
width:100px;
cursor:pointer;
}
#div2{
padding-top:20px;
background-color:blue;
color:white;
width:100px
}
Thanks for your help!
Add this code in jquery
$('#div1').on('click', function(){
var padding = $('#div2').css('padding-top');
var newPadding = (padding=='20px')?'40px':'20px';
$('#div2').css('padding-top',newPadding);
})
DEMO
try this code
var defaultPadding="20px";
$("#div1").click(function(){
var padding=$("#div2").css("padding-top");
if(padding!="40px"){
$("#div2").css("padding-top","40px");
}else{
$("#div2").css("padding-top",defaultPadding);
}
});
Here is working jsfiddle http://jsfiddle.net/pauljackson/p9LfkLsd/1/
You can use a class to toggle the padding.
Demo
JS
$('#div1').click(function(){
$('#div2').toggleClass('addPadding');
});
CSS
.addPadding {
padding-top:40px !important;
}
$("#div1").click(function(){
var lastpad = $("#div2").css("padding-top").replace(/[^-\d\.]/g, '');
var addpad = 40;
var newpad = parseInt(lastpad) + addpad;
$("#div2").css("padding-top", newpad+"px");
})
If needed for future use. here
I am trying to center this brand logo vertically and horizontally on the whole page with JQuery. It does work on browser resize but not initially. Notice this code resizes the image to fit the page. I tried $(window) and $(document) JS is:
$(function() {
var resizeToFit = function(){
var $this = $(document);
var imgw = $("#overlay-logo img").width();
var pw = $this.width();
var $overlaylogo = $("#overlay-logo img");
$overlaylogo.css("width", pw - 100);
var left = (pw / 2) - (imgw / 2);
$overlaylogo.css('margin-left',left);
}
$(window).resize(function(){
resizeToFit();
});
resizeToFit();
});
CSS:
#overlay-logo{
position:absolute;
top:50%;
z-index: 999999;
}
HTML:
<div id="overlay-logo">
<img src="img/overlay.png" alt="overlay" />
</div>
you should be able to do this with just straight css.
#overlay-logo{
height:99%;
width:99%;
margin:auto;
position:absolute;
top:0;
right:0;
left:0;
bottom:0;
}
here's a fiddle: http://jsfiddle.net/GheZd/
EDIT
Just make your height and width 99% then. You can put apply this style directly to the image...you don't necessarily need the div.
I am having problems with getting the z-index to change using javascript can any one help me on where I am going wrong,
what I am trying to do is have a box appear on top on another box once a button is clicked but it does not seem to work.
function toggleupload(){
var but = document.getElementById('picbutton').innerHTML;
if (but == "Change Picture"){
document.getElementById('picbutton').innerHTML = "Hide upload box";
document.getElementById('uploadbox').style.zIndex = 2;
document.getElementById('profilebasic').style.zIndex = 1;
}
if (but == "Hide upload box"){
document.getElementById('picbutton').innerHTML = "Change Picture";
document.getElementById('uploadbox').style.zIndex = 1;
document.getElementById('profilebasic').style.zIndex = 2;
}
}
#profilebasic{
width:300px;
height:300px;
z-index:2;
background-color:#0F0;
}
#uploadbox {
position:absolute;
top:0px;
left:0px;
width:300px;
height:300px;
z-index:1;
background-color:#F00;
}
#uploadbo{
text-align:center;
width:300px;
height:300px;
z-index:3;
}
<div id="uploadbo">
<div id="profilebasic">
</div>
<div id="uploadbox">
</div>
<button onclick="toggleupload();" id="picbutton">Change Picture</button>
</div>
The z-index property only works on positioned elements, so you need to explicitly set the position on profilebasic like:
#profilebasic {
width:300px;
height:300px;
z-index:2;
background-color:#0F0;
position:absolute;
}
jsFiddle example
(note that I also had to set some CSS on your button otherwise it would have ended up under your positioned divs.)
Since uploadbox already starts out in front I assume you want to swap these.
Based on z-index rules, an absolutely positioned div will still appear in front of a non-absolutely positioned div unless its z-index value is negative.
That is, use a negative z-index for the box you want to be behind.
http://jsfiddle.net/X54gr/