Javascript slider and Responsive Design - javascript

I have a media query that works well, except, when user resize window, the images on the jQuery slider dont resize, until the user manually refreshes the page. I am getting that the slider(http://bxslider.com/) gets the window size when page is rendered and not on the fly. Anyone experienced same thing before?
All help will be appreciated.

Well since you're using jQuery you can check for the window being resized and then reload the slider.
The event hook is:
window.onresize = function(event) {
//Now reload your slider from the link in your post it seems like it's:
$('.bxslider').bxSlider();
}

Related

The DOM is loading but is not displayed without clicking on screen mobile Vue.js

I have a very strange problem that I really don't know how to solve.
When I'm on my mobile, my page loads as follows homepage
But when you click on the screen all the components appear.
Can I generate a fake click on my mobile or something?
I really have no idea what's going on
I would also check how the scripts load, I have nothing to do with async defer
Do you think that a fake click would solve me?
For example, when it loads its page to click / touch on the mobile?
You have to selected an element and then you can call click()
document.getElementById('yourelement').click()
This should go on your mounted() default layout.

LazyLoad without scrolling

I'm using lazyload (JS library) and it works great! I have a long page with images where I use lazyload and, if I scroll down, it works perfectly.
The problem comes when I press a button that hide some divs on the top and the page goes up, with all the images. Lazyload doesn't load the images that rise the user view.
How could I solve this? I would need something to notify lazyload "please, load the images that are now in the user area view".
Thanks!
If you're using verlok's lazyload library, it is really simple: all you need is to inform the plugin that the layout of the page has changed (or the page content has been reflowed). This can be done by calling:
var myLazyLoad = new LazyLoad();
// After your content has changed...
myLazyLoad.update();
...which will manually update the instance. In your case, you will need to invoke myLazyLoad.update() when the button is pressed: how that is implemented is really up to you.
See the API documentation here: https://github.com/verlok/lazyload#dynamic-content

One-page scroll plugin: don't want content to slide

I want to change my website to one-page scrollable. I'm trying to achieve something like this. When a user "scrolls" the content changes. I thought I could do that with the one-page scroll plugin, but wasn't successful.
Further explanation:
I want menu and few other elements to be "fixed" (visual explanation).
I want to just change the content, not slide it up or down as the plugin does.
To sum up, I want to trigger animations (block revealing effect etc.) when a user scrolls. I was thinking about making a website one-page scrollable and when a user scrolls, just redirect it to a new folder with HTML/CSS/JS files (menu stays the same, content changes). Maybe that would be one possible solution to my problem?
Anyone willing to share the solution with me?
First things first. The site you're referencing isn't using any scroll events. Open the site in Chrome and open developer tools. Then set the view to mobile (or tablet, same thing). If you're in mobile mode in Chrome, your mouse acts like a finger would on a real Smartphone. By that logic your 'swiping' over the screen with your mouse should trigger the scroll event, but it doesn't. Therefor, it isn't actual scrolling that is triggering the fancy animations.
I believe Fleur Moreau used an 'mousewheel' event listener to trigger the animations.
var link = document.querySelector('body');
link.addEventListener('mousewheel', function (event) {
// Prevent the link from updating the URL
event.preventDefault();
// Do something...
console.log('Triggering fancy animations!')
}, false);
or if you're using jquery
$('body').on('mousewheel',function(event){
// Prevent the link from updating the URL
event.preventDefault();
// Do something...
console.log('Triggering fancy animations!')
});
Good luck with your project

Javascript - changes are made after resizing window browser

I have got infinity scroll plugin on my website. After reaching the bottom I get new products which are as intended. The issue is that some content like "add-to-cart" or "product-price" are not displaying as it should be. For example, there is margins and padding set via js.
I thought that maybe if I bind this js with body element this may work, but I cannot find js that make those changes.(its Magento website)
This is only happening in products that were loaded through infinity plugin. After resizing window everything gets fine.
Why is this happening? Any help is appreciated
search for something like
".addEventListener('resize'"
".resize("
".on( "resize"
in firebug's script tab, you may find the eventlistener method and see what happens when it gets fixed when you resize the page.
generally you will have to provide some more information.anything else is guessing

how to disable auto scroll

I have embedded a ecwid store in my webage via iframe.
Whenever I load the page, ecwid automatically scrolls to the iframe, instead of the top of the page.
As seen here (ecwid: how to force the scroll position), ecwid's solution for this is to add the following DIV inside the {body} tag:
<div id="ecwid_product_browser_scroller"></div>
I've made a fiddle to try to make it work, but it won't happen. I do know that people have used the same code to force the bar not to scroll down, so I must be doing something wrong.
Here's the fiddle: fiddle
Notice that the store is forcing the bar to scroll down. I would like it to stay at the top so customers actually see the banner.
UPDATE:
Still don't know why the DIV does not work here fiddle. What am I missing?
We did manage to make it work inside the new fiddle but it does not work in my website
I think u want to do this
add jquery as i have done
http://jsfiddle.net/v3g20qxd/7/
I have added the pageYOffset and scrollBy in this

Categories

Resources