Prevent scrolling to input box when Javascript Focus is used - javascript

I would like the cursor to be automatically placed in a textbox when my page loads. However, I do not want the page to scroll down to this textbox (I would prefer that it remains out of view at the bottom of the page). This probably sounds odd, but I do have a need for it!
I make the cursor appear using this code:
<script>document.getElementById('textbox1').focus()</script>
Is anyone able to modify this code such that scrolling will not occur?

The window object supports a scrollTo() method try adding it after focus()
document.getElementById('textbox1').focus(); window.scrollTo(0,0);

Related

How to prevent hashchange scroll in JavaScript?

I am trying to create an effect in an HTML page whereby a link with href='#section1' when clicked, changes the URL in the address bar of the browser AND scrolls to the element #section1 smoothly.
The problem is that, as far as I have been able to test, I could accomplish only one thing. Either I could scroll to #section1 smoothly using the scrollIntoView() method or I could change the address bar of the browser (which happens automatically when a link with href='#section1' is clicked.
Is there any way to accomplish both of these things?
Another thing I have tested is explained as follows:
I prevented the default action of clicking the anchor having href='#section1' using e.preventDefault() method of the click event and then called scrollIntoView() on the element. Then I manually changed the URL on the address bar using location.hash, but doing this last thing nonetheless caused the snappy scroll jump (before the browser could smoothly scroll the element into view) which I don't want.
Is there any solution to this? Or that I have to go with only one thing out of the two?

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

Flip direction of popup when page end reaches

I have a bubble which comes up when I click on an icon just below it. But if the icon appears at the end of the page, then when I click it, the popup goes below the page. I want to avoid this by detecting the end of the page and this case making the popup come on top.
I tried using $(window).height() to detect the height and then check the current position of the popup and change it accordingly if its at window end. But is there a better approach to it?
I remember having this problem and solved it with scrollIntoView function https://developer.mozilla.org/en-US/docs/Web/API/Element.scrollIntoView
Try the following:
document.getElementById('pop-up').scrollHeight

how to make popup windows always on top?

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.

Categories

Resources