What this code fraction does is, move a div when the scroll reaches the footer, it works fine on desktop but it doesn't work on mobile.
Any ideas?
$(document).ready(function(){
$(window).on('scroll', function () {
if (($(window).scrollTop() + $(window).height()) == $(document).height()) { $('.publicar-btn').stop(true).animate({ // Escondemos el div
bottom: 150
}, 250);
} else {
$('.publicar-btn').stop(true).animate({
bottom: 30
}, 200);
}
});
});
Related
I need jQuery code for the sticky right sidebar in blogger. This sidebar should stop at the footer, but it's not. It should stick at a specific scroll, so the user can see the content on the sidebar.
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
<script type="text/javascript">
$(function() {
var offset = $(".column-right-inner").offset();
var topPadding = 15;
$(window).scroll(function() {
if ($(window).scrollTop() > offset.top) {
$(".column-right-inner").stop().animate({
marginTop: $(window).scrollTop() - offset.top + topPadding
});
} else {
$(".column-right-inner").stop().animate({
marginTop: 0
});
};
});
});
</script>
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 am using the following Java to stick my menu to the top of my page:
jQuery("document").ready(function($){
var nav = $('.nav-container');
$(window).scroll(function () {
if ($(this).scrollTop() > 205) {
nav.css({
position: 'fixed',
top: 0,
margin: '0px',
left: nav.offset().left,
width: nav.width()
});
} else {
nav.css({
position: 'static',
margin: '115px 0 0 0'
});
}
});
});
The functionality of the Java works perfectly in every browser except Chrome. In Chrome when you scroll down and back up it creates a 'ghost' menu. You can see it here: . You can see the site live here:The Bespoke Florist. I have replicated this issue on three separate machines but it only seems to be with Chrome. Any help greatly appreciated.
Sorry to answer my own question. The issue with Chrome was in hard coding the pixels on the screen. Move to dynamic Div testing and it works without failure. Here is my updated code!
<script>
jQuery("document").ready(function($){
var nav = $('.nav-container'),
navOff = nav.offset();
$(window).scroll(function () {
if ($(this).scrollTop() > navOff.top) {
nav.css({
position: 'fixed',
top: 0,
margin: '0px',
left: nav.offset().left,
width: nav.width()
});
} else {
nav.css({
position: 'static',
margin: '115px 0 0 0'
});
}
});
});
</script>
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;
});
});
});
Please have a look at this fiddle: http://fiddle.jshell.net/ikmac/q7gkx
Use this link to test in the browser: http://fiddle.jshell.net/ikmac/q7gkx/show/
HTML:
<div class="nav">
test1
test2
test3
</div>
<div id="test1" class="test">test1</div>
<div id="test2" class="test">test2</div>
<div id="test3" class="test">test3</div>
CSS:
.nav {
position: fixed;
top: 20px;
left: 0;
width: 100%;
height: 20px;
background: #000;
}
.nav a {
float: left;
font-size: 20px;
color: #fff;
}
#test1 {
margin-top: 1000px;
height: 1000px;
background: red;
}
#test2 {
height: 1000px;
background: blue;
}
#test3 {
height: 1000px;
background: green;
}
This is what happens in Safari on iOS 5.0 (4.3 doesn't support position fixed):
The first time I click on one of the anchors the page jumps to the correct anchor. After that I cannot click one of the other links anymore. When I scroll up or down a bit the links become clickable again.
All other desktop browsers behave fine.
Does anyone ever had this issue before or knows how to fix it?
I have that problem aswell. And I kind of half solved it by letting javascript do the scrolling of the nav when a nav anchor is clicked. And because normal touch-scrolling does not give an event until the finger lets go of the screen, I use position:fixed which makes the touch-scrolling nicer than javascript can, see apples dev-site.
It is not the ultimate solution, but in my opinion it is better than not working at all. This script also checks the width of the window to make sure that it only applies this to smaller screens, well, devices.
Here is my code, and if you find it useful, make it better or find a better solution, please share :)
/* NAV POSITION */
var specScroll = false; // If special scrolling is needed
/* Check what kind of position to use.*/
(function navPos() {
var width = checkWidth();
if (width <= 480 || navigator.userAgent.match(/iPad/i) != null) {
specScroll = true;
}else{
specScroll = false;
window.onscroll = NaN;
}
})();
$(window).resize( function(){ navPos(); } ); // After resizing, check what to use again.
/* When clicking one of the nav anchors */
$(function() {
$('a').bind('click',function(e){
var $anchor = $(this);
if(specScroll){
$('#nav').css('position', "absolute");
window.onscroll = anchorScroll;
}
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 700,'easeOutExpo', function(){
if(specScroll){setTimeout("window.onscroll = touchScroll;", 100);}
// the set timeout is needed for not overriding the clickability of the anchors after anchor-scrolling.
});
e.preventDefault();
});
});
/* While the user clicks and anchors in nav */
function anchorScroll() { $('#nav').css('top', window.pageYOffset); }
/* the first time the user scrolls by touch and lift the finger from screen */
function touchScroll() {
$('#nav').css('position', 'fixed');
$('#nav').css('top', 0);
window.onscroll = NaN;
}
/* CHECK WIDTH OF WINDOW */
function checkWidth() {
myWidth = 0;
if( typeof( window.innerWidth ) == 'number' ) {
myWidth = window.innerWidth; //Non-IE
} else if( document.documentElement && ( document.documentElement.clientWidth ) ) {
myWidth = document.documentElement.clientWidth; //IE 6+ in 'standards compliant mode'
} else if( document.body && ( document.body.clientWidth ) ) {
myWidth = document.body.clientWidth; //IE 4 compatible
}
return myWidth;
}
I use this solution on a project page, try it out: dare.niklasek.se
I ran into the same issue using a fixed position navigation that scrolls the user around the page using jQuery animation. What I found is that even though the fixed position element is visible at the new position, inspecting it with js reports that it is still back in the original position until the user moves the screen manually. Until then, even though the nav is there visually, it can't be touched in order to interact with it. More information and demo here: http://bit.ly/ios5fixedBug