I'm having issues with my CarouFredSel carousel.
I have a (tall) one pager with a carousel inside. If I scroll below it, any browser resize will make the page scroll back up about one page (I'm estimating the height of the carousel). I understand a few pixels of twerking, but now that's about 1000...
The problem is, I'd be 'fine' with it if it was only on resize, but this problem reproduces on reaching the bottom of the page on mobile, without any kind of resizing, no screen rotation (on Android, at least, cannot test iOS right now..). And like I explained, I reproduced the problem with slightly resizing a desktop browser on reaching the bottom of the page.
On disabling CarouFredSel, the problem goes away. It also goes away on disabling the responsive option on it.
carouFredSel is initiated like so :
$("#modeles").carouFredSel({
responsive: true,
scroll: {
fx: "crossfade",
duration: 500
},
direction: "left",
items: {
visible: 1,
width: 868
},
auto: false
}, {
transition: true
});
I have created a JS fiddle reproducing the issue here.
Okay so I get alot of these few 'tricky' stuff and what I oftenly do, I back it up with javascript.
In your case, what causes all the problem is Google Maps and the content of the iframe to be more specific.
What I would do in your case - of which does works perfectly - I would set an attribute of the scroll position on scroll, and on resize get me to that scroll position.
That said, we have this:
$(window).scroll(function () {
$("body").attr("xheight",$(document).scrollTop());
});
$(window).on("resize", function(e){
e.preventDefault();
$(document).scrollTop($("body").attr("xheight"))
});
And that's all you need.
Given example:
jsFiddle
Related
I'm using a tiny library called '$.scrollTo' to animate a scroll to a div element in my html. at the top of my page I have a fixed navgation bar.
at the end of the animation, I would like to have that div focused (for accessibility). if my div is to large, at the end of the animation, the fact that it gets focus - simply sends it a bit off the screen.
This does not happen with small divs.
here is my code (check jsfiddle below):
$('#buttonid').on("click", function() {
//fixed nav bar height (to compensate when scrolling)
var fixed_navbar_height = $("#navbar-id").height();
//the element to scroll to
var $go_to_selector = $("#topic2");
$.scrollTo($go_to_selector, {
duration: 1000,
offset: -fixed_navbar_height,
onAfter: function() {
//if you comment out this .focus it works as intended.
$go_to_selector.focus();
}
});
});
here is a JSFIDDLE example:
https://jsfiddle.net/dy35obpq/3/
obviously the onAfter messes it up, but i would like both the animation and the focus. Any ideas on how to implement a focus on a large div without letting it change the scroll bar ? suggestions are more than welcome.
Try this.
onAfter: function() {
$go_to_selector.focus();
$(window).scrollTop($($go_to_selector).offset().top - fixed_navbar_height);
}
I have simply added this line in your onAfter callback.
$(window).scrollTop($($go_to_selector).offset().top - fixed_navbar_height);
and it seems to have fixed the problem while still retaining focus. You might want to use css to disable the focus blue highlight.
The problem
I noticed that angular-gridster stops working if the browser window is minimized to the point there's not much space around the gridster tiles (see image 2). However, gridster works alright when maximizing the window, and the elements are draggable and resizable again.
Progress
I modified the $scope.gridsterOpts object in the relevant controller and ensured that pushing, floating, swapping are all set to true, but that didn't solve the problem.
fiddle
In addition, I noticed that the same behavior could be found in
this fiddle - the "result" window has to be pretty big in height/width so the demo would work.
I do not include my project code as I think it's useless since I see this behavior in every demo of angular-gridster.
Did anyone experienced the same problem?
Thanks.
screenshot: working
screenshot: not working
This seems to be by design. As you can see here, angular-gridster has a so-called "mobile mode", meaning the plugin will stop working below a certain (configurable) screen width:
$scope.gridsterOpts = {
/// (...)
isMobile: false, // stacks the grid items if true
mobileBreakPoint: 600, // if the screen is not wider that this, remove the grid layout and stack the items
mobileModeEnabled: true, // whether or not to toggle mobile mode when screen width is less than mobileBreakPoint
/// (...)
};
The mobileBreakPoint is one more important think. The value of mobileBreakPoint 600 it means it will take half of the width in the screen if we set div width more then 600px it will work.If we need for minimum div width we need to change mobileBreakPoint value based on div width
$scope.gridsterOpts = {
mobileBreakPoint: 100, // if the screen is not wider that this,remove the grid layout and stack the items
};
First, how to make this function run ONLY on scroll? Second, how to loop/repeat this function ONLY on window scroll infinitely?
$(function(){
$(".media-nav2").transition(
{ y: -600 }, 1500,
'cubic-bezier(.69,.19,.35,.83)');
});
I'm using the above function with this plugin https://github.com/rstacruz/jquery.transit.
Here is my webiste http://dev1.envisionwebdesign.co/johnreid/campaign.html. It's a one page parallax with no scroll bars. You navigate using the top menu and mouse/touch scroll. If you check this link http://dev1.envisionwebdesign.co/johnreid/campaign.html, you can see that the div .media-nav2 immediately transitions when the page loads.
Basically I'm trying to create a parallax effect where when you scroll down to the next page/section, the div .media-nav2 scrolls up. Here's a link to the fiddle http://jsfiddle.net/newmedia85/92YgR/. I have included a link to the onepage parallax jquery for the entire site. The way the one page parallax works is making it really hard for me to solve this. Any help appreciated!
use jquery scroll function
$(window).scroll(function () {
$(".media-nav2").transition({
y: -600
}, 1500, 'cubic-bezier(.69,.19,.35,.83)');
});
I'm using jcarousel lite to display an auto-scrolling carousel of brand logos on one of my sites. I tried to make it responsive (max 6 images on largest display) using the following javascript. The carousel works fine using the original code without me trying to modify how many images are visible.
<script>
function carouselLogic(){
if ($(window).width() > 959 ){
visible = 6;
changeCarousel(visible);
}
else if($(window).width() > 767){
visible = 4;
changeCarousel(visible);
}
else if($(window).width() > 599){
visible = 2;
changeCarousel(visible);
}
}
carouselLogic();
$(window).resize(function(){
carouselLogic();
});
/* original function for first page load
$(function() {
$(".logoCarousel").jCarouselLite({
auto: 2500,
speed: 1000,
visible: 6
});
});
*/
function changeCarousel(visible){
$(".logoCarousel").jCarouselLite({
auto: 2500,
speed: 1000,
visible: visible
});
}
</script>
Images appear inline with a 20px margin left/right.
This code is supposed to change the visible number of logos to ensure they still fit on the page with each responsive change.
The result is the carousels auto scroll goes all crazy. It bounces back and forth all over the place, and much quicker than the default.
Any suggestions on how to improve this code?
The original jCarouselLite has been forked here;
https://github.com/kswedberg/jquery-carousel-lite#responsive-carousels
It's not quite as Lite as it originally was but it has many more methods, and is touch screen scrollable and responsive. You can add the following options which are working for me;
function changeCarousel(visible){
$(".logoCarousel").jCarouselLite({
auto: true,
speed: 1000,
visible: visible,
autoWidth: true,
responsive: true
});
}
As pointed out here,
Run jCarouselLite again, after an AJAX request
You might want to end the original carousel as well in your carouselLogic() function
$(".logoCarousel").trigger("endCarousel");
This is old but in case it helps, i'm pretty sure you need to "reset" jcarousellite. Otherwise you are instantiating it again and again after each window resize.
To initialize it properly after it has already been initialized, you need to call a reset method. I don't remember the syntax off the top of my head, but if you search the jcarousellite.js source for "reset" you should find the correct syntax
I have a responsive site using jQuery mobile.
At a certain size, I swap out the header and footer (moving from a mobile like look and feel to a more traditional design) by showing the high res header and hiding the low res one.
The problem that I'm faced with is that JQM's styles don't seem to apply to the elements that are hidden, so when I adjust the screen size then the styles are all messed up.
I tried this...
$(window).on('resize', function() {
$.mobile.activePage.trigger('create');
});
Which doesn't seem to do anything at all. From hunting around all the examples I've seen mention refreshing or triggering on specific elements, but I'm looking for something more page wide to allow me to use my media queries properly.
It doesn't do anything at all because you are calling trigger with incorrect parameter.
It should be:
$(window).on('resize', function() {
$.mobile.activePage.trigger('pagecreate');
});
Create will only enhance page content, pagecreate will enhance page header, content and footer.
Working example: http://jsfiddle.net/Gajotres/PMrDn/52/
Try something like:
$(window).on('resize', function()
{
jQuery.mobile.changePage(window.location.href,
{
allowSamePageTransition: true,
transition: 'none',
reloadPage: true
});
});