I have a Problem concerning scrolling in jQuery mobile.
I am trying to get a vertical navigation bar on the left side which can be expanded or collapsed via a button in the header of my Page. So I have tho containers named like the following:
#navbar | #header (with Button #showNavBar)
| #content
|
| #footer
At first the #navbar is behind behind my content area (with header and footer).
By clicking the Button #showNavBar I am doing the following:
header.animate({
left: "200px"
}, { duration: 300, queue: false });
content.animate({
left: "200px"
}, { duration: 300, queue: false });
So the users can see the navbar on the left side. To this point everything works well.
But trouble starts. Now it is possible to scroll to the right side to see the full content area.
But it isn't possible to scroll the header...
Does anybody have a hint for me how to avoid the x-scrolling after the animation? I already tried "overflow-x: hidden !important;" to the content container and the body but that doesn't work.
try
$(document).delegate('.ui-content', 'touchmove', false);
Ok, after rethinking the whole problem I just shrinked the width of my body, so it is not necessary to scroll the content area.
Here is how I do it right now. The body gets a new width in the animation.
var viewport = {
width : $(window).width(),
height : $(window).height()
};
function openme() {
$(function () {
topbar.animate({
left: "200px"
}, { duration: 300, queue: false });
pagebody.animate({
left: "200px", width: (parseInt(viewport['width']) - 200) + "px",
}, { duration: 300, queue: false });
console.log("open me" + (parseInt(viewport['width']) - 200) + "px");
});
}
function closeme() {
var closeme = $(function() {
topbar.animate({
left: "0px"
}, { duration: 180, queue: false });
pagebody.animate({
left: "0px", width: "100%",
}, { duration: 180, queue: false });
console.log("close me");
});
}
Hope this helps anybody.
Thanks to Rachel for beeing so patient and giving me a help!
Related
Good day,
I'm building a website where I would like to have a div moving down and back up on a click(clicking on another div area).
It regards the header of a page with an account image inside (the header contains from left to right: logo, horizontal menu, shopping cart and account symbol)
when I click the account symbol I want the header to slide down (60 pixels) and I want another div (with account related links in it) to show up above the header that just slid down.
I've achieved something but I'm really not happy with it:
<script>
jQuery(document).ready(function($){
$(".account").click(function);
$("#accountbar").slideToggle( "slow");
$("#topheader").toggleClass("topheader topheaderdown");
$("#contentarea").toggleClass("content contentdown");
});
});
</script>
1) So what this does it loads the new account bar (height 60px) and slides this one down.
2) It displays the topheader down another 60px (css style rule top: 60px)
3) It also displays the rest of the content (the main content) down 120 pixels lower than normal when both the account bar and topheader are being displayed (by default this value is 60px, so only for the topheader)
I want things to "smoothly" slide down and back up when clicking on the account image. I got this far (for the smoothly moving down the topheader part):
<script>
jQuery(document).ready(function($){
$("#account").on('click',function(){
$("#accountinner").toggle(function() {
$("#topheaderid").animate({ top: '-=60px' }, 500);
},function() {
$("#topheaderid").animate({ top: '+=60px' }, 500);
})
});
});
</script>
PROBLEM 1: the above is only moving the topheader down further and further every time I click on it (not going back up 60px again as specified)...
PROBLEM 2: The above is also somehow sliding my account image to the right (out of screen)
And I would like to implement the other rules in this too, so that on a click the topheader just moves down smoothly with 60px, up the top appears the account navigation in a new div (accountbar) AND the content (class content) moves down another 60px. As said before using "slidetoggle" and "toggleclass" works but I much rather have the "animate" function do the job as this looks awesome.
I have implemented these rules from the first script but it does not happen "smoothly" obviously and the topheader just keeps on going down...
I hope this is enough info and someone can help :)
When this works I want to extend this with a search button as well that appears below the topheader on click.
https://jsfiddle.net/d14tcb9n
Thanks.
You can trigger the animations like:
jQuery(document).ready(function($){
$("#account").on('click',function(){
if($(this).hasClass('open')) {
$("#topheaderid").animate({ top: '0' }, { duration: 500, queue: false });
$("#accountbar").animate({ height: '0' }, { duration: 500, queue: false });
$('#contentid').animate({ marginTop: '60px' }, { duration: 500, queue: false });
$(this).removeClass('open');
} else {
$("#topheaderid").animate({ top: '60px' }, { duration: 500, queue: false });
$("#accountbar").animate({ height: '60px' }, { duration: 500, queue: false });
$('#contentid').animate({ marginTop: '120px' }, { duration: 500, queue: false });
$(this).addClass('open');
}
});
});
remove the display none from the hidden div and change the height to 0
demo:https://jsfiddle.net/o1cvho6m/
Im trying to increase an elements height when hovering over it but at the moment when you move the mouse away from the element it reverts the height, is there a way to keep the element at the height I animate to? Here's my code so far:
var width = $(window).width();
$("#projects .project:first").addClass("active");
$("#projects .project:first").height(100);
if (width > 800) {
$('#projects .project').hover(function (e) {
e.preventDefault();
var prev = $("#projects .project.active");
$('#projects .project').removeClass('active');
$(this).addClass('active');
if ($(this).find("p").text().trim().length) {
$(this).animate({
height: '100px'
}, { duration: 1000, queue: false });
$(prev).animate({
height: '30px'
}, { duration: 1000, queue: false });
}
});
}
I found in the end the best solution to achieve the functionality I wanted was using accordion: http://jqueryui.com/accordion/
I'm making a web based presentation using the full width and height carousel of bootstrap for a client. It is a simple tutorial of how to create an account in the client's website and it consist on images only. However, I managed to put an image of a pointer that animates with jQuery and highlight the place where the user has to click. So far the animation works perfect but I need it to start when the user gets to see that slide, so I was wondering if it's possible to start the animation when you see that pointer then it starts moving.
This is my script:
$('.carousel').carousel({
pause: true,
interval: false
})
</script>
<script>
(function animation() {
var options = {
duration: 800,
easing: 'linear'
};
$('.fill')
.find('.pointer_fing')
.animate({
left: 36,
top: 880
},
options
)
.animate({
left: 866,
top:694
},
options
)
.animate({
left: 936,
top: 350,
},
options
)
.animate({
left: 936,
top: 280,
},
$.extend(true, {}, options, {
complete: function() {
animation();
}
})
);
})();
I put together a jQuery animation for a menu background. The menu has a dropdown and when you hover over the menu the animation kicks in, but the dropdown starts to act all wonky. Pretty new to jquery so not sure why this is doing that.
I added a div (menu-bg) with absolute position to change height on hover inside the menu.
Here is my javascript controlling the animation:
$('.navbar-nav >li > a').hover(
function() {
$(this).stop().next().animate({
height: "60px"
}, {
easing: "swing",
queue: true,
duration: 400
});
},
function() {
$(this).stop().next().animate({
height: "0px"
}, {
easing: "swing",
queue: true,
duration: 200
});
});
Here is a link to the site to view the actual issue, you will notice it when you hover over home.
http://bratworks.com/static
I found the following changes in your code got the job done:
Inside of init.js around line 15 remove the 200 millisecond delay from the dropdown menu fadeOut().
$(this).find('.dropdown-menu').stop(true, true).delay(0).fadeOut();
I re-wrote your hover function to target the li's instead of the a, it looked like there was some kind of conflict there:
$('.navbar-nav > li').on({
mouseenter: function() {;
$(this).find('.menu-bg').animate({ height: "60px" });
},
mouseleave: function() {
$(this).find('.menu-bg').animate({ height: "0px" });
}
});
And finally, I overwrote the CSS that was creating that 5px margin gap on the .dropdown-menu:
.dropdown-menu {
margin-top:0px!important;
}
There you go! Please let me know if you'd like me to expand on anything?
I have a navigation bar that sticks out a little bit from the right edge of the screen. I want it so when you hover on the div, it slides left 550px out of the right side of the browser. I'm using jquery's animate function and I got it to animate properly when hovered, but I can't get it to slide back to the right when you stop hovering on it.
I'm very new to javascript/jquery and I feel like I'm missing something simple...
$(document).ready(function(){
$("#nav").hover(function() {
$(this).animate({
right: "0px",
}, 800 );
(function() {
$(this).animate({
right: "-550px",
}, 800 );
});
});
});
And here's #nav's css:
#nav {
position: absolute;
right: -550px;
min-width: 300px;
top: 10px;
height: 50px;
background-color: #B30431;
}
The code has some syntax errors. The code should be :
$(document).ready(function(){
$("#nav").hover(
function() {
$(this).animate({ right: "0px" }, 800 );
},
function() {
$(this).animate({ right: "-550px" }, 800);
}
});
});
Good Luck !!
You have made your hover function complicated, you have wrapped the function with () and your function is not executed.
$(document).ready(function() {
$("#nav").hover(function() {
$(this).animate({ right: "0px" }, 800);
}, function() {
$(this).animate({ right: "-550px" }, 800);
});
});
One option, which we use a lot for our animation, is to make a css class that contains that animation, and then ise the .addClass() method to trigger the animation. Its fast, and its browser compatible. You could also use pure css for this.
You could try this...Demo
$(document).ready(function(){
$("#nav").mouseover(function(){
$(this).delay(200).animate({right: "0px"}, 800 );
// Added a 200ms delay to prevent quick accidental mouse overs triggering animation.
});
$("#nav").mouseout(function(){
$(this).clearQueue();
// Gives the user the ability to cancel the animation by moving the mouse away
$(this).animate({right: "-550px"}, 800 );
});
});