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
Related
ok,maybe its my noobness,but i cant wrap my head around this particular problem
In this test we have a button with id #add-div which purpose is to append the same div with class .container to body on every click.
We also have another button with id #add-boxes which purpose is to append a red box with class .redbox to every div with the .container class.
the .container div has a button inside which does the same thing as the #add-boxes button.
Lets say we have a scenario where we throw a couple of divs there,and we also fill them with 2 boxes each like this :
and then we add another div which is empty like this :
what is the logic i should follow to make sure the new div will appear with the same amount of red boxes inside it as the previous ones like this : ?
snippet to visualize my concept :
$(document).on('click', '#add-div', function () {
$("body").append("<div class=containers><button>ADD BOXES</button></div>")
});
function redBoxObj(){
var box = document.createElement("div");
box.className = "redbox"
return box
}
$(document).on('click', '.containers button,#add-boxes', function () {
$(".containers").each(function(){
$(this).append(redBoxObj())
});
});
*{
box-sizing: border-box;
margin:2px;
}
button{
position:relative;
float:left;
clear:both;
}
.containers{
position:relative;
float:left;
padding:3px;
border: 1px solid black;
background-color:lightcyan;
clear:both;
}
.redbox{
position:relative;
float:left;
border:none;
width:30px;
height:30px;
background:red;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
<button id="add-boxes">ADD BOXES</button><button id="add-div">ADD DIV</button>
</div>
</body>
</html>
What you need to do is cloning the existing "container div" when there is one, like this:
$(document).on('click', '#add-div', function() {
if ($('.containers').length) {
$("body").append($('.containers').first().clone());
} else {
$("body").append("<div class=containers><button>ADD BOXES</button></div>")
}
});
I created a fiddle for you:
https://jsfiddle.net/adamcai/y3ekjzLs/2/
I'm trying to make two buttons that slide when clicked and push the other button out of the viewport. For example:
Before clicked - [ blue | grey ]
Click blue - [ all blue ]
Get it? I have the html and css set up perfectly (I think), but I just can't get this jQuery code to animate and change the positioning of the element that contains the two buttons. It's driving me nuts. What I have so far is:
<div id='container'>
<div id='wrapper'>
<a id='wrapper_photo' href=""></a>
<a id='wrapper_video' href=""></a>
</div>
</div>
<style>
#container{
width:760px;
height:25px;
background:#000000;
overflow:hidden;
}
#wrapper {
width:1520px;
height:25px;
background-color:#0F0;
position:relative;
left:-380px;
}
#wrapper_photo{
width:760px;
height:25px;
background-color:#666666;
float:left;
}
#wrapper_video {
width:760px;
height:25px;
background-color:#0000CC;
float:left;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('#wrapper_photo').click(function() {
$('#wrapper').animate({
left:"-=380"},
5000);
});
});
</script>
I stopped when I couldn't get the left side to work.
here you go: DEMO
$(function(){
$('#wrapper_photo, #wrapper_video').click(function() {
$(this).animate({
width:"100%"},
5000);
$(this).siblings('a').animate({
width:'0px'
},5000);
});
});
I'm not sure if this new value for left will be set, so you can use position() function to get value of left of #wrapper container and then calculate new value.
$(document).ready(function() {
$('#wrapper_photo').click(function() {
var leftVal = $('#wrapper').position().left - 380;
$('#wrapper').animate({
left:leftVal},
5000);
});
});
I have 2 divs and each div has a span. By default each span class is set to display: none. I am trying to display: inline the span within whichever div is clicked. If the span is already display: inline then I am trying to revert back to display: none. In other words,
click div1 and span1 shows,
then click div2, span1 hides and span2 shows,
then click div2 again and span2 hides, span1 stays hidden.
How can I achieve this? I am currently stuck on selecting the correct div then I will move on to showing and hiding correctly.
Here is what I currently have:
<html>
<div class="button">foo</div>
<span class='inner'>hey</span> <div class="button">bar</div>
<span class='inner'>hey again</span> </html>
<style>
.inner {
display: none;
}
.button{
display: inline-block;
height:20px;
width:70px;
background-color:#000000;
color:#ffffff;
text-align:center;
} </style>
<script>
$(document).ready(function() {
$('.button').click(function() {
//first off, I am not able to find the span class='inner' within my div.button so this is not correct to find my .inner within $(this)
//alert($(this).find('.inner').html());
//alert($('.inner',this).html());
//then should I do something like this(sorry for the bad syntax, I'm not sure exactly how to write it yet):
//if $(this).('.inner').css('display', 'inline'); { //this span is visible
$(this).('.inner').css('display', 'none'); //so hide this span
else { //span is not visible
$('.inner').hide(); //hide other span
$(this).find('.inner').css('display', 'inline'); //show this span
});
}); </script>
Thank you
Use this,
$(document).ready(function() {
$('.button').click(function() {
var next = $(this).next('.inner');
next.toggle();
$('.inner').not(next).hide();
});
});
Demo Fiddle
Or CSS method,
$(document).ready(function() {
$('.button').click(function() {
var next = $(this).next('.inner');
var cssState = (next.css('display') === 'none')?'inline':'none';
next.css('display',cssState);
$('.inner').not(next).css('display','none');
});
});
Demo Fiddle
.next() - next <span> element.
.toggle() - show/hide based on current state.
You can use jQuery accordian to fix this
All you need to do is import below mentioned lib file
http://code.jquery.com/ui/1.10.4/jquery-ui.js
HTML
<div id="accordion">
<div class="button">foo</div> <span>hey</span>
<div class="button">bar</div> <span>hey again</span>
</div>
JavaScript/jQuery
$(document).ready(function () {
$("#accordion").accordion({
collapsible: true,
active: false
});
})
Please check this demo to get a clear idea
Demo Here
Try,
$('.button').click(function() {
var inner = $(this).next('.inner');
var display = inner.css('display');
inner.css('display',(display === 'none')?'inline':'none');
});
DEMO
Try this :
$(document).ready(function() {
$('.button').click(function() {
$('.inner').hide(); // hide all inner span
$(this).next('.inner').show(); // show next inner span
});
});
Here is the JSFiddle Demo
working code below,please check commenting to understand coding
<script>
$(document).ready(function() {
$(".inner").hide(); //hide all spans
$('.button:first').click(function() {//click on first div
var span1 = $('span:first').show(); // first span will show
});
$('.button:last').click(function() {//click on second div
var span1 = $('span:last').toggle();
var span2 = $('span:first').hide();
});
}); </script>
Test you view this code
.button{
display: inline-block;
height:20px;
width:70px;
background-color:#000000;
color:#ffffff;
text-align:center;
padding:20px;
cursor:pointer;
}
http://jsfiddle.net/kisspa/24jTa/
I want my sidebar to have a scrollable div. But it cant have a fixed height. How can I make it scrollable without setting a fixed height?
I tried with this, doesn't work properly.
.sidebar {width:300px; padding:10px; background:#efefef;height:100%; position:fixed}
.scroll-widget {overflow-y: scroll;padding:10px;margin:10px; background:#fffeee; height:inherit}
-
<div class=sidebar>
...
<div class=scroll-widget>
...
</div>
</div>
Demo: http://jsfiddle.net/YK47P
Jquery alternative is also fine with me. But i am a beginner, so please be kind
Somehow I was able to make it work using jQuery and taking help from here.
$(function () { // window load
$(window).resize(function () {
var sidebarH = $('.sidebar').height();
var scrollH = $('.top').height();
$('.scroll-widget').height(sidebarH - scrollH);
}).resize();
});
DEMO : http://jsfiddle.net/YK47P/40/
You just need to add overflow: scroll to your sidebar:
.sidebar {
width:300px;
padding:10px;
background:#efefef;
height:100%;
position:fixed;
overflow: scroll;
}
Updated Fiddle
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;
}