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
Related
I am using this setTimeout("document.location.reload();", 10000); to refresh the page every 10 seconds. And after reloading fully, it gets back to the original location. But for like 0.1 second, the top of the page is shown. You can see this in the video:
https://drive.google.com/file/d/1LKDyqhFnKRapUY_fEugIS5Te-2tawlmk/view?usp=sharing
As i see it, your images didn't load yet that is why it looks like it jumps up and than down. That is why your top row is visible at the very beginning. Scroll seems to stay at the bottom. Scroll isn't the problem here (as i see it).
I don't know how images are shown (are you using any data in the background to generate output). But solution to prevent top row to be seen would be in CSS. Presetting width and height of 'img' tag.
If you can see i posted two images of the issue.
There can be few ways to fix it. One way I can think of is using 'window.onload'.
I guess you could show page when HTML is fully loaded with all images to stop 'jumping' after each load. It could help.
Maybe this post will help: window.onload vs document.onload
Let me know if this was helpful for you finding solution for a problem.
Detect event refresh in javascript, save the value of x-scroll in a cookie, if cookie exist when reload, put the value of x-scroll to this value
So, I'm having a problem with MDL's javascript breaking my Twitter widget for showing tweets on the sidebar.
When I remove the javascript, it works perfectly fine. I tried changing the position of the script, but nothing resolves the issue, whenever the MDL's javascript finishes loading, the widget is instantly gone.
If you take a look with "inspect element" you can see the widget's iframe is still there below the facebook widget, but its body is empty.
You can take a look at the issues right here. Please don't mind the messy code, I will still make a lot of changes and optimizations.
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
I don't think this is possible but I thought I'd ask anyway.
I'm building a Wordpress plugin for sharing buttons and Buffer doesn't have a mechanism to return to the site if you locate in the same window, so I built out a nice popup that will fetch the add link. This works great except that the buffer add page creates a modal dialog that is positioned 100px from the top.
This creates a nasty 100px space above the dialog. See here:
I was wondering if it's possible to change the css inside that popup window, or perhaps find a way to have the window directly access just the div with a specific id?
The modal is draggable as well, so maybe create a drag action to drag it up to the top?
Any ideas would be helpful.
--EDIT--
Adding Fiddle as requested.
Not sure what the size of the window will be when you're not logged into Buffer, but you'll get the general idea of how the spacing is messed up at the top ... maybe.
SO won't let me add a fiddle link without code the post is: jsfiddle.net/y6RQ7/6/
I want to have a javascript/jQuery popup window (child page) that is always in front of the parent page, something like facebook's current picture viewing feature.
it would be closed by the user clicking on the close button.
I have tried as below:
mywindow = window.open ("DownloadForm.aspx", "mywindow","location=1,status=1,scrollbars=1, width=350,height=150");
mywindow.moveTo(350, 350);
this code successfully opened a child page in front of the parent page, but there is jQuery code ( $(#test).click() ) on the parent page which causes the parent page to always be in front.
I tried putting the window.open() code after $(#test).click(), but it didn't solve the problem.
The $(#test).click() is necessary, therefore I need to have a workaround.
I appreciate any help, thank you in advance.
myWindow.focus()
Many modern browsers prevent this from working, but it's the only way.
use following javascript code in the page you are opening in popup
<body onblur="self.focus();">
Im sure you cannot control the order of the window. Instead of a popup (which is often and usually blocked by browsers) why not investigate using a lightbox javascript plugin. They are usually free, stylish and work well.
Just set it from the modal css. The z-index is normally set to 1. Just change it to 9999. That is the purpose of the z-index, to set the popup top level.
If not using bootstrap popup, then you need to use css to set it. Browsers are not guaranteed to place nice with .focus() on a window.