hi i have the following
$(window).scroll(function() {
if($(window).scrollTop() > 200){
$('.ccbrtlogo').css({'height': '25'});
$('.ccbrtlogo').css({'margin-top': '0'});
}else{
$('.ccbrtlogo').css({'height': '50'});
$('.ccbrtlogo').css({'margin-top': '16'});
}
});
it does work when i scoll down it sets the logo to a small 25px height and changes the margin-top to 0 but when i scoll back up it only changes the logo back to 50 but does not apply the 16px margin-top
What am i missing here?
You need to add also the measurement unit. In case of 0, you can put nothing after it because everything: 0px, 0in are 0. But with another number you need to use 16px instead of 16
$('.ccbrtlogo').css({'margin-top': '16px'});
Example
$('#first').css({'margin-top': '100'});
$('#second').css({'margin-top': '100px'});
div{
float: left;
margin-left: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="first">
First
</div>
<div id="second">
Second
</div>
Related
I have this example
$(document).ready(function() {
$("#btn").click(function() {
removeSecondContainer();
});
});
function removeSecondContainer() {
var container = $("#c2");
container.slideToggle(500, function() {
container.remove();
});
}
.container {
margin: 20px auto;
height: 20px;
width: 100px;
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">Remove the second container</button>
<div class="container" id="c1">
</div>
<div class="container" id="c2">
</div>
<div class="container" id="c3">
</div>
As you can see, the process is not smooth at all. When the second container gets removed, the margin of the second container gets removed too. This causes a pull from the top.
How can I get this smoothly? I thought about lowering the margin by time to 0 when removing the container.
You are facing a margin collapsing issue. As you may notice you don't have 40px between each container like expected but only 20px.
As you can read here:
In CSS, the adjoining margins of two or more boxes (which might or
might not be siblings) can combine to form a single margin. Margins
that combine this way are said to collapse, and the resulting combined
margin is called a collapsed margin.
So when removing the element you decrease both margin at the top and bottom to leave the maring of the first and last element. And when the height of the element reaches 0 and get removed, you create another margin collapsing between the remaining block and thus the jump from 40px to 20px of margin.
And idea to avoid this is to increase height and use linear-gradient to color only the part you want (and leave transparent the part previously used for the margin). Like that the transition will go smoothly as there is no more margin issue.
$(document).ready(function() {
$("#btn").click(function() {
removeSecondContainer();
});
});
function removeSecondContainer() {
var container = $("#c2");
container.slideToggle(500, function() {
container.remove();
});
}
.container {
margin: auto;
height: 60px;
width: 100px;
background: linear-gradient(to bottom, transparent 33.33%, red 33.33%, red 66.67%, transparent 66.67%);/
box-sizing: border-box;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">Remove the second container</button>
<div class="container" id="c1">
</div>
<div class="container" id="c2">
</div>
<div class="container" id="c3">
</div>
Or use flex by adding another container as there is no margin collpasing with flexbox (Margin collapsing in flexbox):
$(document).ready(function() {
$("#btn").click(function() {
removeSecondContainer();
});
});
function removeSecondContainer() {
var container = $("#c2");
container.slideToggle(500, function() {
container.remove();
});
}
.box {
display: flex;
flex-direction: column;
}
.container {
margin: 20px auto;
height: 20px;
width: 100px;
background: red;
box-sizing: border-box;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">Remove the second container</button>
<div class="box">
<div class="container" id="c1">
</div>
<div class="container" id="c2">
</div>
<div class="container" id="c3">
</div>
</div>
Its due to clearing. The bottom margin is not working well with them. Either use float or remove margin-bottom or margin-top to 0
here is Example
edit: update with remove div
https://jsfiddle.net/f5zw18er/3/
You could potentially use jQuery animate with a callback function. It's slightly different because it doesn't include the slide toggle, but in your example it's only being removed, so this could work.
Here we're removing the margin and also hiding the element with the animation, and then finally removing the element in the callback.
$(document).ready(function() {
$("#btn").click(function() {
removeSecondContainer();
});
});
function removeSecondContainer() {
var container = $("#c2");
container.animate({ 'margin' : '-20px auto', 'opacity': 0 }, 500, function(){
container.remove();
});
}
.container {
margin: 20px auto;
height: 20px;
width: 100px;
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn">Remove the second container</button>
<div class="container" id="c1">
</div>
<div class="container" id="c2">
</div>
<div class="container" id="c3">
</div>
I use this nice little JavaScript to make my navigation bar (which is normally sitting 230px down from the top) stick to the top of the page once the page is scrolled down that 230 px. It then gives the "nav" element a "fixed" position.
$(document).ready(function() {
$(window).bind('scroll', function() {
if ($(window).scrollTop() > 230) {
$('nav').addClass('fixed');
} else {
$('nav').removeClass('fixed');
}
});
});
nav {
width: 90%;
display: flex;
justify-content: center;
max-width: 1400px;
height: 85px;
background-color: rgba(249, 241, 228, 1);
margin: auto;
border-top-left-radius: 0em;
border-top-right-radius: 0em;
border-bottom-left-radius: 2em;
border-bottom-right-radius: 2em;
}
.fixed {
position: fixed;
border-top: 0;
top: 0;
margin: auto;
left: 0;
right: 0;
z-index: 4;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</nav>
Now, the problem: i have positioned the corresponding anchor targets
within the page and have given them some "padding-top" to account for the fixed navbar (about 90px), so that they don't disappear behind the bar when the page jumps to them after clicking.
.anchor {
padding-top: 90px;
}
<a class="anchor" id="three">
This works fine AS LONG AS the navbar is already fixed to the top.
But if you click on a link while the navbar is still in its original mid-page position (e.g. the first click the user will do), it just disregards the offset i gave the anchor target and jumps to a weird position where the anchor target is hidden behind the navbar (and not even aligned with the top of the page)!
If i THEN click on the link again (now in the fixed bar on top of the page), it corrects itself and displays the page as i want to. But that first click always misses - i can't figure out why! Please help
EDIT: WORKING DEMO here: http://www.myway.de/husow/problem/problem.html
1st Add a new class name spacebody to your first div with class="space"
<nav>
...
</nav>
<div class="space spacebody">
</div>
2nd JS use the following should fix your problem:
$(document).ready(function() {
$(window).bind('scroll', function() {
if ($(window).scrollTop() > 230) {
$('nav').addClass('fixed');
$('.spacebody').css('margin-top', '85px');
} else {
$('nav').removeClass('fixed');
$('.spacebody').css('margin-top', '0px');
}
});
});
Reason Why?
because when your nav is not fixed, it has a height of 85px, when you scroll down it has no height which is 0 height. Then everything below move up by 85px causing your to go below the target of ONE or TWO etc. It is not you are missing the first click, it is when the nav are not fixed and the click you will be scroll more down by 85px. If you scroll to top and click you will miss again.
You can easily see this if you change your CSS for nav with background-color: transparent;
With the code above should fix it when you nav become fixed to add a margin-top as 85px to the div below so they keep the same height as you clicked.
I have the code of a scroll to top button as you can see at Jsfiddle The problem with the code is that at the time the page is loaded the button is displayed (which it should not, it should be displayed when the person scrolls below). Once scrolled down, on scrolling up the issue no longer prevails, the button vanishes at the top as it should. Refreshing the page again would let us see the button again without any scrolling down.
Since I am a javascript noob, I don't know what I am doing wrong.
<div class="scroll-top" style="display: block;">
<img src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4IiB2aWV3Qm94PSIwIDAgMzEuMDc2IDMxLjA3NiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMzEuMDc2IDMxLjA3NjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxnPgoJCTxwYXRoIGQ9Ik0yMS41NDksMjAuMjI3di0zLjk0N2MwLTguODA2LTMuNzI1LTE0LjEyNS01LjI4My0xNS45NjRDMTYuMDk4LDAuMTE2LDE1Ljg1MSwwLjAwMiwxNS41OTEsMCAgICBjLTAuMjYxLTAuMDAxLTAuNTA4LDAuMTEyLTAuNjc5LDAuMzFjLTEuNTg0LDEuODM1LTUuMzg0LDcuMTU2LTUuMzg0LDE1Ljk3djMuOTQ4bC0wLjcyOSwwLjQ5MSAgICBjLTEuNDA1LDAuOTQ4LTIuMjQ4LDIuNTMzLTIuMjQ4LDQuMjI5djQuNzExYzAsMC4yNzksMC4xNTQsMC41MzcsMC40LDAuNjdjMC4yNDcsMC4xMzIsMC41NDYsMC4xMTcsMC43NzgtMC4wMzlsMi4zNjgtMS41NzcgICAgYzAuNjY1LTAuNDQyLDEuNDQ1LTAuNjc5LDIuMjQ0LTAuNjc5aDEuNzQxdjIuMjgzYzAsMC40MiwwLjM0LDAuNzYsMC43NTksMC43NmgxLjM5NGMwLjQxOSwwLDAuNzU5LTAuMzQsMC43NTktMC43NnYtMi4yODNoMS43NCAgICBjMC43OTksMCwxLjU4LDAuMjM1LDIuMjQ2LDAuNjhsMi4zNjYsMS41NzZjMC4yMzIsMC4xNTYsMC41MzEsMC4xNzEsMC43NzgsMC4wMzljMC4yNDYtMC4xMzMsMC40LTAuMzkxLDAuNC0wLjY3di00LjcxMSAgICBjMC0xLjY5NC0wLjg0NC0zLjI3OS0yLjI0OC00LjIyOUwyMS41NDksMjAuMjI3eiBNMTUuNTM5LDE0LjA0M2MtMS40NDYsMC0yLjYyLTEuMTczLTIuNjItMi42MTljMC0xLjQ0NywxLjE3NC0yLjYxOSwyLjYyLTIuNjE5ICAgIGMxLjQ0NSwwLDIuNjE5LDEuMTcyLDIuNjE5LDIuNjE5QzE4LjE1OCwxMi44NywxNi45ODQsMTQuMDQzLDE1LjUzOSwxNC4wNDN6IiBmaWxsPSIjMzMzMzMzIi8+Cgk8L2c+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==" />
<span class="flame"></span>
<span class="flame"></span>
<span class="flame"></span>
</div>
<style>
.scroll-top img{
height:45px;
margin: -12px 0 0 5px;
border:0;
}
.scroll-top {height: 60px; width: 60px; position: fixed; bottom: 100px; right: 30px; display: none; z-index: 9999;}.scroll-top:hover{animation-delay:0s;animation-duration:.1s;animation-iteration-count:infinite;animation-name:shake-little;animation-play-state:running;animation-timing-function:ease-in-out}.scroll-top .flame{-moz-border-bottom-colors:none;-moz-border-left-colors:none;-moz-border-right-colors:none;-moz-border-top-colors:none;border-color:#ffda44 transparent transparent;border-style:solid;border-width:25px 3px 3px;display:none;height:0;left:-4px;margin:-5px auto 0;position:absolute;right:0;top:66%;width:0}.scroll-top .flame+.flame{border-width:10px 2px 2px;left:20px;margin:0}.scroll-top .flame+.flame+.flame{border-width:10px 2px 2px;left:auto;margin:0;right:24px}.scrolling .flame{display:block}.nav-toggle,.owl-item .quote-icon,.price-box .price-box-head-shadow,.scroll-top .flame{transition:all .5s cubic-bezier(.25,.1,.25,1) 0s}#keyframes shake-little{0%{transform:translate(0,0) rotate(0)}14%,16%,2%,20%,24%,30%,48%,52%,54%,76%,8%,84%,86%,88%,92%,96%,98%{transform:translate(0,0) rotate(-.5deg)}10%,12%,22%,32%,4%,42%,44%,64%,72%,80%,90%{transform:translate(-1px,0) rotate(-.5deg)}18%,34%,36%,46%,6%,66%,68%,70%,74%,82%,94%{transform:translate(0,-1px) rotate(-.5deg)}26%,28%,38%,40%,50%,56%,58%,60%,62%,78%{transform:translate(-1px,-1px) rotate(-.5deg)}}
</style>
<script type="text/javascript">
// Scroll to top button
wnHeight = jQuery(window).height();
//Check to see if the window is top if not then display button
jQuery(window).scroll(function(){
if (jQuery(this).scrollTop() > wnHeight/2) {
jQuery('.scroll-top').fadeIn();
} else {
jQuery('.scroll-top').fadeOut().removeClass('scrolling');
}
});
//Click event to scroll to top
jQuery('.scroll-top').click(function(){
jQuery('html, body').animate({scrollTop : 0},800);
jQuery(this).addClass('scrolling');
});
</script>
Thanks.
Initialize the button with display: none (in CSS) and it doesn't how at the start of the script
.scroll-top { display: none; }
Then it works with your javascript code.
See it working: https://jsfiddle.net/0d5188ry/2/
hello all i am having a page where there are two divs floating left one is of about 360 px and the other is auto width when the page scrolls the left div is added a class which makes it fixed to the screen and allows the oyher div to scroll. it is working in chrome but not in mozilla actually the div gets fixed but the other div gets behind the fixed div.
here is the code
<div id="leftfixop909">
<div id="MKAEitFIXED0">
</div></div>
<div id="otherdiv">
</div>
#leftfixop909{max-width:365px;
min-height:103%;margin- left:-8px;
float:left;width:35%;min-width:360px;
overflow:auto;overflow-x:hidden;
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75);}
#MKAEitFIXED0{width:365px;min-height:101%;
background:url(webimg/mainbg.png);
padding-bottom:20px;z-index:99;overflow:auto;
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75);}
.RighTFIXIEDbot{position:fixed;bottom:0px;}
#otherdiv{width:auto;
overflow:hidden;min-height:150%;margin-top:46px;padding-left:20px;}
$(window).scroll(function () {
var height=window.innerHeight;
var DIVHEIG=$("#MKAEitFIXED0").height();
var NOWstoPS=(DIVHEIG-height);
if ($(this).scrollTop() > NOWstoPS) {
$('#MKAEitFIXED0').addClass('RighTFIXIEDbot');
} else if ($(this).scrollTop() < NOWstoPS) {
$('#MKAEitFIXED0').removeClass('RighTFIXIEDbot');
} });
is there anything you can suggest me i think the min-height property is not accepted by mozilla but if a fix the height i get a scroller or may get some matter trimmed .
Here's the code that works for you. Add css for your div's as:
#leftfixop909{
position: absolute;
}
#otherdiv{
position: relative;
}
That's it.
I am looking at this example on this website. I wanted to create an effect similar like that where you have a <div> that has some <p> in it and there's a button to show the full expanded description. I've analyzed the html and it looks like this:
<div class="product-description">
<div class="desc-wrap" itemprop="description">
<p>Material: wool
<br>6 Colors: Black, Yellow, Gray, Wine Red, Green, Navy Blue
<br>Size: One size only
<br>Recommended for size SMALL
<br>It has been noted by customers that these skirts are short.
<br>*Please check the measurement picture for sizing information. There are no refunds on orders that were messed up on your behalf.
</p>
<p>Note: Due to the difference between different monitors, the color may be off a tiny bit.</p>
<p>WORLDWIDE SHIPPING!
</p>
</div>
<div class="desc-fade"></div>
<div class="open-link" style="display: block;">Expand Full Description</div>
</div>
I assume that there's a javascript function that expands the box on click. But what is that? How do I reproduce this same effect?
Here's an example for exectly what you wanted: http://jsfiddle.net/kedem/D9NCP/
css:
.product-description {
height:150px;
overflow: hidden;
position:relative;
}
.product-description.open {
height:auto;
overflow: hidden;
position:relative;
}
.desc-fade {
width: 200%;
margin-left: -50%;
height: 30px;
background: #fff;
z-index: 1;
position: absolute;
-webkit-box-shadow: 0 0 20px 30px #fff;
-moz-box-shadow: 0 0 20px 30px #fff;
box-shadow: 0 0 20px 30px #fff;
bottom: 0;
left: 0;
opacity: 1;
-webkit-transition: opacity 250ms, 1s;
-moz-transition: opacity 250ms, 1s;
-o-transition: opacity 250ms, 1s;
transition: opacity 250ms, 1s;
}
.open-link {
position:absolute;
bottom: 15px;
z-index:2;
}
jquery:
$(function () {
var wrapHeight = $(".product-description .desc-wrap").height();
var descHeight = $(".product-description").height();
if (wrapHeight <= descHeight) {
$(".product-description .desc-fade").hide();
$(".product-description .open-link").hide();
}
$(".product-description .open-link").click(function () {
$(this).hide();
$(".product-description .desc-fade").hide();
$(".product-description").animate({
height: wrapHeight
}, 1000);
});
});
Does this works for you?
JSFIDDLE Demo
HTML
<div class="div-wrapper">
<div class="hider">
<p>Here goes your text that is partially shown Here goes your text that is partially shown Here goes your text that is partially shown Here goes your text that is partially shown Here goes your text that is partially shown Here goes your text that is partially shown Here goes your text that is partially shown Here goes your text that is partially shown Here goes your text that is partially shown Here goes your text that is partially shown Here goes your text that is partially shown Here goes your text that is partially shown </p>
</div>
Show all
</div>
CSS
/* this first one is not necesary */
.div-wrapper {
width:300px;
border:solid 1px #000;
}
.div-wrapper>.hider {
height: 100px;
transition: ease-in-out all 0.2s;
overflow:hidden;
}
JQUERY
$(document).ready(function(e) {
$('.open-link').click(function(e) {
var $wrapper = $(this).parent().find('.hider');
$wrapper.css('height',$wrapper.find('p').height());
$(this).remove();
})
});
let me know if it's useful.
Using DOM inspector, it will help you understanding the trick. First they use a constant height for the container. Onclick remove the text and expand the div by setting a bigger height.
However, we have to determine the total height of the div so we shouldn't hide the expanded part from the start
http://jsfiddle.net/2SMF2/2/
$('.expand').click(function () {
$('#test').removeClass('collapsed', 'fast')
$(this).remove();
});
How about this:
http://jsfiddle.net/VvBRh/
What I have done:
$('.open-link a').click(function(){
if($(".desc-wrap").css("height") == "60px") {
//Find auto height of div and save it
$('.desc-wrap').css('height', 'auto');
var autoHeight = $('.desc-wrap').height();
//Revert back to 2 lines
$('.desc-wrap').css('height', '60px');
//Animate to the saved autoHeight
$(".desc-wrap").animate({height: autoHeight}, 1000);
} else {
//Shrink back to 2 lines (you can remove this if you want)
$(".desc-wrap").animate({height: "60px"}, 1000);
}
return false;
});
You will also need to add a little css to get inital settings:
.desc-wrap { height: 60px; overflow: hidden }
I'm sure this could be more elegant, and you could derive the height of 2 lines instead of fixed px, but I'll leave that up to you to decide ;)
Here is the complete code
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
var $divView = $('div.view');
var innerHeight = $divView.removeClass('view').height();
$divView.addClass('view');
$('div.slide').click(function() {
$('div.view').animate({
height: (($divView.height() == 110)? innerHeight : "110px")
}, 500);
return false;
});
});
</script>
<style>
.view{
overflow:hidden;
height: 110px;
}
.total{
border:1px solid;
/*height:130px;
overflow-y:auto;*/
}
</style>
</head>
<body>
<div class="total">
<div class="view">
<p>shown/hidden depending on the toggle above. </p>
<p>shown/hidden depending on the toggle above. </p>
<p>shown/hidden depending on the toggle above. </p>
<p>shown/hidden depending on the toggle above. </p>
<p>shown/hidden depending on the toggle above. </p>
<p>shown/hidden depending on the toggle above. </p>
<p>shown/hidden depending on the toggle above. </p>
<p>shown/hidden depending on the toggle above. </p>
<p>shown/hidden depending on the toggle above. </p>
</div>
<div class="slide" style="cursor: pointer;">Show/Hide</div>
</div>
</body>
</html>