Need to change position of element on slideToggle - javascript

$("button.filters").click(function(){
$("div.second").slideToggle("slow");
});
.main {
position: relative;
display:block;
height: 320px;
color: #fff;
background-color: grey;
}
.first {
position: absolute;
bottom: 15%;
height: 70px;
background-color: white;
}
.second {
position: absolute;
bottom: 0%;
height: 30px;
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<div class="first">
<p>some content</p>
<button class="filters">filters</button>
</div>
<div class="second">
<p>other content</p>
</div>
</div>
Please check this fiddle
https://jsfiddle.net/6d1t5jr8/
I need help to make .second div to .slideToggle from bottom border of .first div.

The problem:
Because of the bottom:0 in that way, the the height of the .second div start from the bottom.
The solution:
Try to wrap the .second with wrapper. So the slide animation will start from the top.
Like this:
jQuery(document).ready(function () {
$("button.filters").click(function(){
$("div.second").slideToggle("slow");
});
});
.main {
position: relative;
display:block;
height: 320px;
color: #fff;
background-color: grey;
}
.first {
position: absolute;
bottom: 15%;
height: 70px;
background-color: white;
}
.second-wrapper {
position: absolute;
bottom: 0%;
height: 30px;
}
.second {
display:none;
background-color: green;
}
.second p {
margin:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<div class="first">
<p>some content</p>
<button class="filters">filters</button>
</div>
<div class="second-wrapper">
<div class="second">
<p>other content</p>
</div>
</div>
</div>

Related

left div width 100% increase when right div don't have content

I have 2 div both are 50% width and float left what I want if the right div doesn't have content then left div width should be 100%.
if ($('.wrap .box2').is(':empty')) {
$('.box2').hide();
$('.wrap .box1').css({
"width": "100%"
});
}
.wrap {
width: 100%;
}
.wrap .box1 {
width: 50%;
float: left;
background: red;
}
.wrap .box2 {
width: 50%;
float: left;
background: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
<div class="box1">
<h1>Hello 1</h1>
</div>
<div class="box2">
<h1>Hello 2</h1>
</div>
</div>
So what I want if .box2 dont have text inside h1 then left div width should be 100%
if ($('.wrap .box2 h1').is(':empty')) {
$('.box2').hide();
$('.wrap .box1').css({
"width": "100%"
});
}
.wrap {
width: 100%;
}
.wrap .box1 {
width: 50%;
float: left;
background: red;
}
.wrap .box2 {
width: 50%;
float: left;
background: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
<div class="box1">
<h1>Hello 1</h1>
</div>
<div class="box2">
<h1></h1>
</div>
</div>
I just ran this code and the left div took the whole space
Try this:
.wrap {
width: 100%;
display: flex;
}
.wrap .box1 {
width: 50%;
background: red;
flex-grow:1;
}
.wrap .box2 {
width: 50%;
background: green;
}
.wrap .box2:empty {
width: 0;
}
it works without using javascript/jquery and uses flex-boxes and the :empty selector.

smoothscroll to target on certain div

I am trying to find element with smoothscroll effect when I click button, How I can scroll into target if target is inside div.
I'm trying this way, but didnt work. Is it possible scroll to target if its inside div
$(document).ready(function(){
$('button').click(function(){
$('.box').animate({
scrollTop: $("#find").offset().top
}, 2000);
});
});
.box{
clear: both;
}
.left{
float: left;
width: 20%;
height: 200px;
overflow-x: hidden;
background-color: red;
}
#find{
margin-top: 400px;
}
#find p{
background-color: green
}
.right{
float: left;
margin-left: 10px;
width: 50%;
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<div class="left">
<div id="find">
<p>find me</p>
</div>
</div>
<div class="right">
<button>jump</button>
</div>
</div>
Your logic is correct, you're just scrolling the wrong element. You need to call animate() on the .left element as that is the one which is overflowed:
$(document).ready(function() {
$('button').click(function() {
$('.left').animate({
scrollTop: $("#find").offset().top
}, 2000);
});
});
.box {
clear: both;
}
.left {
float: left;
width: 20%;
height: 200px;
overflow-x: hidden;
background-color: red;
}
#find {
margin-top: 400px;
}
#find p {
background-color: green
}
.right {
float: left;
margin-left: 10px;
width: 50%;
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<div class="left">
<div id="find">
<p>find me</p>
</div>
</div>
<div class="right">
<button>jump</button>
</div>
</div>
You need to add scrollTop on .left, as scrollbar appears there instead of .box i.e. overflow-y is visible and scroll-able on .left and not on .box.
$(document).ready(function(){
$('button').click(function(){
var bt = $("#find").offset().top;
$('.left').animate({
scrollTop: bt
}, 2000);
});
});
.box{
clear: both;
}
.left{
float: left;
width: 20%;
height: 200px;
overflow-x: hidden;
background-color: red;
}
#find{
margin-top: 400px;
}
#find p{
background-color: green
}
.right{
float: left;
margin-left: 10px;
width: 50%;
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<div class="left">
<div id="find">
<p>find me</p>
</div>
</div>
<div class="right">
<button>jump</button>
</div>
</div>

apply same jquery function to element present inside parent div

code jsFiddle
I applied jquery's click function to 'li#info' element. But when I click, it perform jquery to element of different parent also ('#theme div#info-overlay').
I want, whenever 'li#info' is clicked on the parent element('#theme') then it perform function to its child element only(div#info-overlay).
Like in the code, by clicking on 'Fe' it open overlay on both the block. But i want it to show overlay only to the block for which 'Fe'is clicked.
sorry, I am new in jquery.
I got your point. you just need to change one line of code
because both divs have same ids thats why both are appearing on click
and it's not a good practice to use same id multiple time on a single file.
it will make issue somewhere sometime.
i have change this line
$("div#info-overlay").toggle('100');
into this
$(this).parents('#theme').find("#info-overlay").toggle('100');
check this
JS Fiddle
use this to find div $(this).parents('#theme').find("#info overlay").toggle('100');
$(document).ready(function(){
$("div#theme").hover(function(){
$(".theme .header *").show();
$(".theme .header .overlay").hide();
},function(){
$(".theme .header *").hide();
});
$("li#info").click(function(){
$(".theme .header .overlay").hide();
$(this).parents('#theme').find("#info-overlay").toggle('100');
// $("div#info-overlay").toggle('100');
});
});
/*
theme block
*/
.theme{
width: 100%;
height: 250px;
background-color: #fff;
margin: 20px auto;
}
.theme .header{
width: 100%;
height: 200px;
position: relative;
background-color: #eee;
}
.theme .header *{
display: none;
}
.theme .header .overlay{
position: absolute;
background-color: #fff;
left: 60px;
top: 10px;
width: 83%;
height: 180px;
z-index: 80;
}
.theme .header .about{
position: absolute;
left: 10px;
top: 10px;
}
.theme .header .about li{
display: block;
height: 40px;
width: 40px;
border-radius: 50%;
background-color: #FED200;
opacity: .5;
color: #fff;
padding: 5px 10px;
margin: 5px 0;
}
.theme .footer{
width: 100%;
height: 50px;
padding: 0 20px;
}
.theme .footer .left{
width: 85%;
display: inline-block;
overflow-y:hidden;
height: 50px;
float: left;
padding: 10px 0;
}
#media screen and (min-width:620px) {
.theme{
width: 70%;
}
}
#media screen and (min-width:720px) {
.theme{
width: 49%;
display: inline-block;
}
}
#media screen and (min-width:920px) {
body .container.theme-holder {
width: 70%;
}
}
#media screen and (min-width:1024px) {
body .container.theme-holder {
width: 95%;
}
.theme{
width: 32%;
}
}
#media screen and (min-width:1200px) {
body .container.theme-holder {
width: 85%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="theme" class="theme">
<div class="header">
<div class="about">
<li id="info">Fe</li>
</div>
<div id="info-overlay" class="overlay">
info
</div>
</div>
<div class="footer">
<div class="left">
<div class="name">
<p>Corporate sdfsfdsfdsfsd</p>
</div>
</div>
</div>
</div>
<div id="theme" class="theme">
<div class="header">
<div class="about">
<li id="info">Fe</li>
</div>
<div id="info-overlay" class="overlay">
info
</div>
</div>
<div class="footer">
<div class="left">
<div class="name">
<p>Corporate dfsasdfdsafs</p>
</div>
</div>
</div>
</div>

Jquery Sliding Up issue

Ok, the goal of the code below is to have the top-left side slide down and have the bottom-right side slide up.
$(document).ready(function() {
$("#slider").click(function() {
/*LEFT-SIDE*/
$("#top-left").slideDown(2000);
$("#main-left").slideUp(7000);
/*RIGHT SIDE*/
$("#main-right").slideDown(2000);
$("#bottom-right").slideUp(2000);
});
});
body {
background-color: gray;
margin: 0px;
margin-top: -15px;
/*This can and should be ignored it is only for better viewing in the Stack Overflow code snippet*/
}
#top-left {
display: none;
float: left;
width: 50%;
background-color: green;
padding-bottom: 100%;
z-index: 1000;
}
#bottom-right {
display: none;
background-color: gray;
padding-bottom: 100%;
z-index: 1000;
}
#main-left {
padding-top: 50px;
position: fixed;
width: 50%;
height: 100%;
background-color: blue;
z-index: -10;
}
#main-right {
float: right;
background-color: red;
width: 50%;
padding-bottom: 100%;
z-index: -10;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="complete-left-side">
<section id="top-left">
<p>Hidden Content</p>
</section>
<section id="main-left">
<p>Main Content</p>
<button id="slider">Press Me!</button>
</section>
</section>
<section id="complete-right-side">
<section id="bottom-right">
<p>More hidden Content</p>
</section>
<section id="main-right">
<p>Side Content</p>
</section>
</section>
The problem is that whenever the button is pressed the bottom-right section does not slide up as expected.
Thank you in advance to whoever answers or comments on this question :)
You should make changes in Jquery following way. Because slideUp will hide the div and you trying to show the div.
And apply css to float: right; width: 50%; to #bottom-right
<section id="main-right">
<p>Side Content</p>
</section>
<section id="bottom-right">
<p>More hidden Content</p>
</section>
And also change sequence as above because bottom right div slide from bottom of main div.
$(document).ready(function() {
$("#slider").click(function() {
/*LEFT-SIDE*/
$("#top-left").slideDown(2000);
$("#main-left").slideUp(7000);
/*RIGHT SIDE*/
$("#main-right").slideUp(2500); //Here
$("#bottom-right").slideDown(2500); //Here
});
});
body {
background-color: gray;
margin: 0px;
margin-top: -15px;
/*This can and should be ignored it is only for better viewing in the Stack Overflow code snippet*/
}
#top-left {
display: none;
float: left;
width: 50%;
background-color: green;
padding-bottom: 100%;
z-index: 1000;
}
#bottom-right {
display: none;
background-color: gray;
z-index: 1000;
float: right;
width: 50%;
}
#main-left {
padding-top: 50px;
position: fixed;
width: 50%;
height: 100%;
background-color: blue;
z-index: -10;
}
#main-right {
float: right;
background-color: red;
width: 50%;
padding-bottom: 100%;
z-index: -10;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="complete-left-side">
<section id="top-left">
<p>Hidden Content</p>
</section>
<section id="main-left">
<p>Main Content</p>
<button id="slider">Press Me!</button>
</section>
</section>
<section id="complete-right-side">
<section id="main-right">
<p>Side Content</p>
</section>
<section id="bottom-right">
<p>More hidden Content</p>
</section>
</section>
you need to change the time interval given
like
$(document).ready(function() {
$("#slider").click(function() {
/*LEFT-SIDE*/
$("#top-left").slideDown(2000);
$("#main-left").slideUp(1000);
/*RIGHT SIDE*/
$("#main-right").slideDown(2000);
$("#bottom-right").slideUp(2000);
});
});
checkout this Demo
change your function
$(document).ready(function() {
$("#slider").click(function() {
/*LEFT-SIDE*/
$("#top-left").slideDown(2000);
$("#main-left").slideUp(1000);
/*RIGHT SIDE*/
$("#main-right").slideUp(2000);// Change Here
$("#bottom-right").slideDown(2000);// Change Here
});
});
https://jsfiddle.net/xbr1xcxh/4/
$(document).ready(function() {
$("#slider").click(function() {
/*LEFT-SIDE*/
$("#top-left").slideDown(2000);
$("#main-left").slideUp(7000);
/*RIGHT SIDE*/
$("#bottom-right").slideUp(2000);
$("#main-right").slideUp(2000);
});
});
body {
background-color: gray;
margin: 0px;
margin-top: -15px;
/*This can and should be ignored it is only for better viewing in the Stack Overflow code snippet*/
}
#top-left {
display: none;
float: left;
width: 50%;
background-color: green;
padding-bottom: 100%;
z-index: 1000;
}
#bottom-right {
display: none;
background-color: gray;
padding-bottom: 100%;
z-index: 2000;
}
#main-left {
padding-top: 50px;
position: fixed;
width: 50%;
height: 100%;
background-color: blue;
z-index: -10;
}
#main-right {
float: right;
background-color: red;
width: 50%;
padding-bottom: 100%;
z-index: -10;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="complete-left-side">
<section id="top-left">
<p>Hidden Content</p>
</section>
<section id="main-left">
<p>Main Content</p>
<button id="slider">Press Me!</button>
</section>
</section>
<section id="complete-right-side">
<section id="bottom-right">
<p>More hidden Content</p>
</section>
<section id="main-right">
<p>Side Content</p>
</section>
</section>
Please Check. I think this is what u r looking for.

overlay footer over div

I have tried to create a overlaying footer by adding position:absolute to #container & a Top: XXpx to .panel2 as well as adding a z-index however this does not work any help is greatly appreciated.
https://jsfiddle.net/z3q2wtLf/29/embedded/result/
below is an example of what I'm trying to accomplish
div {
position: absolute;
width: 200px;
height: 200px;
}
#div1 {
background-color: red;
}
#div2 {
background-color: blue;
top: 100px;
}
<div id="div1"></div>
<div id="div2"></div>
<div2> would be the footer? In this case, only <div2> has to get the position: absolute setting. Also, as #Yaakov already wrote, the surrounding container has to have position: relative.
A very basic setup would be:
<div class="wrap_all">
<div class="content">
(content text text text)
</div>
<div class="footer">
(footer text)
</div>
</div>
with the following CSS:
.wrap_all {
position: relative;
}
.content {
background: red;
margin-bottom: 50px;
}
.footer {
position: absolute;
bottom: 0px;
height: 50px;
background: yellow;
}
(The margin-bottom: 50px; on .content is there so that no text or images in .content can be hidden by the footer)
Your #div1 and #div2 should be wrapped within an element with relative position in order to work.
For example:
<div id="container">
<div id="div1"></div>
<div id="div2"></div>
</div>
And the css:
#container {
position:relative;
}
#div1 {
background-color: red;
}
#div2 {
background-color: blue;
top: 100px;
}

Categories