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>
Related
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);
}
});
});
So i am having this strange issue. I am trying to have a loding spinner icon whilst the ajax request is made. However, the spinner is not showing for the first request (since page manual refresh) however it shows for all requests made after that. This is for when i load the spinner GIF from a local folder.
Strangely, when I provide this URL (https://i.stack.imgur.com/FhHRx.gif) which I found on another SO post, it works every time, but for other URLs from the web or for local files it doesnt show the image on the first request. The ajax is getting executed as I can see the screen colour change through the style, but just the spinner doesnt show.Anyone have any ideas why? Below is the relevant code.
body
<body>
...
<div class="modal" name="modal" id="modal"></div>
</body>
script
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(document)
.ajaxStart(function () {
$("#modal").show();
})
.ajaxStop(function () {
$("#modal").hide();
});
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
//Submit Data
$(".submit").click(function (e) {
e.preventDefault();
// get data ...
$.ajax({
url:url,
method:'POST',
data:{
// data values
},
success:function(response){
// update cart and some other stuff
},
});
});
});
</script>
CSS
.modal {
display: none;
position: fixed;
z-index: 1000;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba( 255, 255, 255, .8 )
url('../images/ajax-loader.gif')
50% 50%
no-repeat;
}
body.loading .modal {
overflow: hidden;
}
body.loading .modal {
display: block;
}
Fixed by addin the image as an hidden image to the html. I assume the image was not loaded at the time of making the request through the css.
I'm using ng-view with ng-animate like so:
HTML
<body>
<div ng-view></div>
</body>
CSS
.view.ng-enter,
.view.ng-leave { transition: all 600ms ease-out; }
.view.ng-enter {
position: absolute;
top:0; left:240px;
width: 100%;
opacity: 0; }
.view.ng-enter.ng-enter-active {
opacity: 1;
left: 0; }
.view.ng-leave {
position: relative;
left: 0;
opacity: 1; }
.view.ng-leave.ng-leave-active {
opacity: 0;
left: -240px; }
Now throughout my app there are links that will change the view. The animation of the view changing works perfectly.
I now want to add animation to the body whenever the view changes. So basically, whenever .view.ng-view is active, a style needs to be applied to the body, which should be removed when the view animation is no longer active. How on earth do I do that?
I have trying to find this for a while myself, it works fine if you are adding and removing classes, but with ng-view its unique in that it's transition of 2 routes, and I haven't seen anything related to an emitter or anything. You have a few options though.
Here's a plunker;
1) The easy answer would be to add and remove an animation with a $timeout, with the same duration as the css for .view.
$rootScope.$on('$routeChangeSuccess', function(e, curr, prev) {
var body = $document.find('body');
$animate.addClass(body, 'overlay');
$timeout(function() {
$animate.removeClass(body, 'overlay');
}, 1000);
2) Another way is inside of the enter function you can put something in front of the done callback like, jQuery or TweenMax in this case.
app.animation('.view', function() {
return {
enter: function(element, done) {
TweenMax.from(element, 1, {
color: 'red',
onComplete: function() {
$log.debug('done');
done();
}
});
},
...
I would proberly look into something like jQuery to add a class to the body when the ng-view is active.
You could also have look into the ngAnimate which is explaining to perfection:
link to a very precise description of ngAnimate
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