I have made this:
https://jsfiddle.net/f69gu8ss/2/
When I do position:fixed the header goes outside the parent. And also when I scroll it goes to the top of the page. I want it to stick below the image. What do I give to top to make it stick below the image.. relative to its sibling?
In your css, add this:
.sticky {
position: fixed;
width: inherit;
}
Also, jQuery is used here:
$(document).ready(function() {
var stickyNavTop = $('.header').offset().top;
var stickyTopNav = function() {
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop) {
$('.header').addClass('sticky');
} else {
$('.header').removeClass('sticky');
}
};
stickyTopNav();
$(window).scroll(function() {
stickyTopNav();
});
});
See this: https://jsfiddle.net/f69gu8ss/5/
Related
I have a top menu using Bootstrap and have made it transparent, but want it to change to opaque once a user scrolls to the next section/div on the page. Anyone know the best/easiest way to accomplish this?
You can add a class on scroll down, or remove your class what is rewriting Bootstrap styles.
$(document).ready(function() {
// Transition effect for navbar
$(window).scroll(function() {
// checks if window is scrolled more than 500px, adds/removes solid class
if($(this).scrollTop() > 500) {
$('.navbar').addClass('solid');
} else {
$('.navbar').removeClass('solid');
}
});
});
This will assign a class to your top menu initially setting it to a transparent version, then once you scroll down past the threshold, it will remove that class which will remove the transparency.
$(window).scroll(function() {
var scrollPercent = ($(window).scrollTop() / $(document).outerHeight()) * 100;
if (scrollPercent > 20)
$('#container').removeClass('transparent')
else
$('#container').addClass('transparent')
});
#container {
height: 1000px;
background-color: orange;
}
.transparent {
opacity: .2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container" class="transparent">
</div>
I have a deck of cards in my Bootstrap 4 page. I want to align these button to have a nicer look. How can we do that?
Here is an image:
And here is the demo : http://7freres.com/new
The table dosen't seem to works, as they are separated.
Thanls
You can make all the card-text elements to have the same height.
One way to do it can be through javascript. Write a function like this:
document.addEventListener("DOMContentLoaded", function(event) {
adjustCardTextHeights();
});
function adjustCardTextHeights() {
var heights = $(".card-text").map(function() {
return $(this).height();
}).get();
maxHeight = Math.max.apply(null, heights);
$(".card-text").height(maxHeight);
}
Or with jQuery:
$( document ).ready(function() {
adjustCardTextHeights();
});
function adjustCardTextHeights() {
var heights = $(".card-text").map(function() {
return $(this).height();
}).get();
maxHeight = Math.max.apply(null, heights);
$(".card-text").height(maxHeight);
}
This gets you:
You could set position: absolute; bottom: 20px; for the buttons and add an extra padding-bottom: 50px; to the card-block
I would like to create a button using that floats until footer and then stops
1) Button should be poisition: fixed; bottom: 0px when footer is not visible
2) When footer becomes visible, button should just sit on top of footer
The button should handle following cases.
when states change in angular, when we get data from server the footer is visible for a moment and then the page expands, what will happen then?
when the page has less content and footer is visible, button should sit on top of footer.
How can i do this?
Here is the plunker i started to play around with
http://plnkr.co/edit/SoCBjkUjFICiuTeTPxDB?p=preview
I came across this post when searching for a similar solution. Without a ready answer, this is what I ended up doing, based on this post https://ngmilk.rocks/2015/04/09/angularjs-sticky-navigation-directive/ .
Basicly you need a $scope.$watch to watch for scope change, and an event handler attached to the onscroll event.
angular.module('myApp')
.directive('stickyBottom', function($window) {
return {
restrict: 'A',
scope: {},
link: function (scope, elem, attrs) {
// the element box saved for later reference
var elemRect;
// element height
var height = elem[0].clientHeight;
// element top, will be changed as scope is updated
var top = 0;
// updates element's original position
scope.$watch(function(){
elemRect = elem[0].getBoundingClientRect();
return elemRect.top + $window.pageYOffset;
}, function(newVal, oldVal){
// this is the original element position, save it
if(!elem.hasClass('fixed-bottom')){
top = newVal;
}
// properly position the element even in `fixed` display
elem.css('width', elemRect.width);
elem.css('left', elemRect.left);
// check position
toggleClass();
});
// toggle `fixed-bottom` class based on element's position
var toggleClass = function() {
// the element is hidden
if (elem[0].getBoundingClientRect().top + height > $window.innerHeight) {
elem.addClass('fixed-bottom');
}
// the element is visible
else {
// the element is visible in its original position
if (top - $window.pageYOffset + height < $window.innerHeight && elem.hasClass('fixed-bottom')) {
elem.removeClass('fixed-bottom');
}
}
}
// bind to `onscroll` event
$window.onscroll = function() {
toggleClass();
};
}
};
})
;
And here's some css:
.fixed-bottom {
position: fixed;
top: auto;
bottom: 0;
}
You can accomplish this affect without using angular at all by modifying your style.css. The simplest solution in this case is just to set the bottom parameter of the #to-top element to be at minimum higher than the footer, for example:
#to-top {
position:fixed;
bottom: 60px;
right: 10px;
width: 100px;
padding: 5px;
border: 1px solid #ccc;
background: red;
color: white;
font-weight: bold;
text-align: center;
cursor: pointer;
}
Tough this issue is similar to many others I found here,I cannot find a proper answer that can work to me.
All of my content is loaded using .ajax() method, and events are handled using .on().
First I've tried to stop the propagation of the function using .stopPropagation(),it works in a way.Its closing the div,but after that any element I press it still using the closing function.I've found out by searching on the web that I need to use .off() method.
Here is the code(made it shorter):
$("#pnNotaCom").on("click",function(){
$(".cautareProdNouNC").css({"display":"block"});
$("html").on("click",function(){
$(".cautareProdNouNC").css("display","none");
});
});
$(".cautareProdNouNC").click(function(e){
e.stopPropagation();
});
$("#pnNotaCom").click(function(e){
e.stopPropagation();
});
The div I am showing/hiding is .cautareProdNouNC
This is how I would do it. When you activate your div, you activate invisible div that fulfills whole body. Clicking on that div hides them both.
HTML
<div class="cautareProdNouNC display_none"></div>
<div class="overlay display_none"></div><!--place it in body-->
CSS
.cautareProdNouNC {
position relative; /*this div needs to be above overlay so needs z-index*/
z-index: 200;
}
.display_none {
display: none;
}
.overlay {
background: transparent;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
}
jquery
$("#pnNotaCom").on("click",function(){
$(".cautareProdNouNC").removeClass('display_none');
$(".overlay").removeClass('display_none');
});
$(".overlay").on("click",function(){
$(this).addClass('display_none');
$(".cautareProdNouNC").addClass('display_none');
}
$(document).delegate('click', function(){
if($('#Div2Hide').get(0) != $(this).get(0)){
$('#Div2Hide').hide();
e.stopPropagation();
}
});
try this
$(document).mouseup(function (e) {
var container = $(your hiding div selector here);
if (!container.is(e.target) // if the target of the click isn't the container...
&&
container.has(e.target).length === 0) // ... nor a descendant of the container
{
container.hide();
}
});
I hope I understand your question right!
What about this DEMO:
$(document).ready(function() {
var div_hide = false;
$("#one").on("click",function(e){
e.stopPropagation();
alert("You click the div");
$(document).on("click",function(){
if (div_hide === false) { // You can click once after that
// we set "div_hide" to "true"
$(".hide_me").hide();
div_hide = true;
}
return false;
});
});
});
I have the following block of code, characterising a div:
#posts{
position:absolute;
left:150px;
top:90px;
width:640px;
}
And my problem is: when i scroll down, it goes beyond "top:90px".
What I'm trying to do is: the part of the div's content which is above top:90px should be invisible.
The thing is... i can't use z-index:(...) because the only thing i have behind this div is the background.
$(function () {
$(window).scroll(function () {
$('#clickme').click(function() {
if ($(this).scroll() > 100) {
$('#myDiv').hide('slow', function() {
alert('Animation complete.');
});
}
} else {
alert('Error');
}
});
/*HTML*/
<div id="clickme">
test.
</div>
This will hide the div.