Referring to a specific place on page - javascript

I know that in Javascript document.location.href = "#my_id" tells the browser to display the same page starting from element with id="my_id".
In this case, the address that appears in the address bar is in the following format: my_page_address#my_id
Is this the only method to refer to a specific place on a page ?
I'm looking for a method that will not show my_id in the address bar.

Most browsers implement the scrollIntoView method (MDC, MSDN) on elements. That works on IE6 and up (at least), Firefox and other Gecko-based browsers, Chrome and other WebKit-based browsers, Opera, etc.
scrollIntoView example using an element retrieved by ID:
document.getElementById("my_id").scrollIntoView();
Of course, this requires that Javascript be enabled (I'm assuming this is okay because of the Javascript tag on the question :-) ).
You can also scroll to specific coordinates on the page using window.scrollTo.

Have you tried document.getElementbyId("my_id").scrollIntoView()?

Related

specify SFSafariViewController user agent

I have an issue specifying access from SFSafariViewController since it has the exact same user agent as Safari browser.
What i'm trying to do is display a picture only inside the webview and remove it if its viewed on normal browser.
Tried to see if document.refferer can be used and I tried it on twitter since the latest update has its webview changed to SFSafariViewController. Almost worked but the referrer info is also being passed to safari if its opened directly from SFSafariViewController.
Would really appreciate any ideas... thanks!!
I did a bit of quick research on this, and it appears that this is not possible, hence the word Safari in SFSafariViewController.
However you can do this using the WebKit WKWebView: https://developer.apple.com/documentation/webkit/wkwebview/1414950-customuseragent
You can't check the user agent, but there are other detection mechanisms to differentiate sfsafariviewcontroller from safari.
For example, you can check for the existence of an obscure webfont: .Helvetica LT MM.
Here's some example code: https://gist.github.com/aeharding/08eaafbb7742f78ede9b8d2f5d096354

JavaScript detect iOS Firefox

This is a follow up from Append within Append, Iframe within Append in Jquery
I realize the code works against most browsers but doesn't work in Firefox mobile iOS. Can anyone enlighten me how I can detect iOS Firefox so that I can display a error to user?
I read about modernizr about feature detect but it doesn't seems to detect about Firefox not writing to iframe if refreshed. So I wish to just display an error for now.
To detect Firefox in iOS, i only complished that after seeing user agent of Chrome, Safari and Firefox. We can see 'FxiOS' is the only difference between them, Firefox user agent string reference
. All CSS hacks dont't for iOS.
My solution:
function isFirefox() {
return navigator.userAgent.match("FxiOS");
}
You can read the user-agent with JS by using the window.navigator.userAgent property.
See: https://developer.mozilla.org/nl/docs/Web/API/NavigatorID.userAgent
For the Firefox specific values see: https://developer.mozilla.org/en-US/docs/Web/HTTP/Gecko_user_agent_string_reference)
It would still be recommended to do feature-checking instead of checking the user-agent string, since there might be another browser out there in which it doesn't work.
If you cannot figure out which specific feature to check for to distinguish your case, you could always check for success after trying to write to the iFrame. So simple write some random data to the iFrame, try to read it back, and if you cannot read it back you display your error message. This should work for browsers you might have never even heard of.

Remove Address bar from popup window using Javascript

Is it applicable to remove the address bar from a popup window using javascript
ex:
window.open(url, 'liveMatches', 'width=720,height=800,toolbar=0,location=0, directories=0, status=0, menubar=0');
please advice,
use jquery ui (http://jqueryui.com/demos/dialog/)
or perhaps
window.open(url,'liveMatches','directories=no,titlebar=no,toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=no,width=720,height=800');
actually
You cannot remove the address bar in modern browsers. That is a security measure. The user must always know what page they are on. Address bar also let user know, what type of security is on that page (HTTP or HTTPS).
Theoretically, yes. However, as with everything in Javascript, there's no guarantee that any given browser will support it or that the implementation will be consistent across browsers.
This link as well as this link indicate that the location option should control whether or not the Location/Address bar is shown. It should also have relatively good cross-browser support.

Change IE title from bookmarklet

I am creating a JavaScript bookmarklet that dynamically updates the title bar, but it doesn't display the changes in IE (I've tried IE7 and IE8). Here's a simplified example that demonstrates my issue:
javascript:document.title='new title';alert(document.title);
Notice that the the value is updated in the alert, but not on the title bar or tab. It is working fine for me in Chrome.
It's a bug in IE. It's possible to work around it by changing the URL's fragment identifier ("hash"), which may or may not be feasible for your purpose:
javascript:document.title='foobar';location.replace('#'+new Date().getTime())
new Date().getTime() is used to get a unique number that is unlikely to be used as a name or ID anywhere in the page (so that the page does not actually scroll).
From my experience most browsers will update the new TITLE in the browser window or tab.
However it seems with IE browsers they only set it one time and then that's it - no further updates. If thats true (would love to see a solution as well) then there is no way around it.

iFrame Navigation controlled by JS

I'm using javascript to control the href= field of the iframe located within the page. I am currently using
function DoIFrameNav(object_URL)
{
document.all.additionalText.src="iframeContents.php?id="+object_URL;
selectedEvent = object_URL;
}//end DoIFrameNav
to perform this action. And
onclick=\"DoIFrameNav(".$iCounter.");
to call the action when the user clicks on the table row.
It works perfectly in Firefox and IE6, but nothing else...
Chrome just ignores it...
What would be the universally browser compatible way of doing this?
You should not use document.all in a script that is intended to be cross-browser. Removing that should be your first step. Use document.getElementById() instead. At that point, the code you posted should be acceptable to all major browsers (hopefully).

Categories