Well, apparently there is no answer yet to the problem I have.
I made a website with an iframe.
In this iframe I display the pages activaded by the menu buttons.
Those pages are found by searchengines too.
But without the website these pages are "naked".
I want the following.
If the "naked" page has been found, automatically a call has been made to the parent page to dress the "naked" page. So the whole website will be visible and not the "naked" page.
Thanks4thinking with me.
You need to detect whether "iframed" child page is called directly, and if that's the case - redirect to the parent page. Below is a basic example how to do it in such child page:
<html>
<head>
<title></title>
<script type="text/javascript">
function checkIfInIframe() {
if (window == window.parent) location.href = 'Parent.html';
}
</script>
</head>
<body onload="checkIfInIframe();">
<!--Child Content-->
</body>
</html>
Here we call JavaScript function "checkIfInIframe" in page's body "onload" event. The code checks whether page is at top level (where it shouldn't be) or not. It does that by comparing "window" object to it's parent' If it's the same object - page redirects to it's parent. You can even pass parameters in a Query string in that redirect so parent would automatically know which page to open in the Iframe
Related
I have a page with a few anchors. When a user clicks an anchor, the anchors work, and user is taken to the correct location.
If a user tries to refresh the page, it retains the anchor ID in the URL window and so naturally, when refreshing, it does not go back to the top of the page.
I think it would be more user friendly to go back to the top of the page on a refresh.
How would I achieve this?
My page currently is primarily using bootstrap, css, jquery, javascript, and php.
I think I need to set up some code so that after clicking the anchor, it removes the anchor from the url window, so that if someone refreshes, they'd be refreshing just the initial page state without an anchor, but I don't know how to begin. Or maybe I'm over thinking this and there's some way to always go to top of page on a refresh regardless of anchors or not. I'm not too code savvy.
Right now my code is like this...
An example of one of my anchors:
<a class="hoverlink" href="#firefighter"><li style="float:left; margin-right:1em; color:white; background-color:red" class="appao-btn nav-btn">Fire Fighter</li></a>
One of the elements for example that the anchor will jump to:
<div style="min-height:10px;" name="firefighter" id="firefighter" class="anchor"><p style="min-height: 10px;"> </p></div>
CSS style on my anchors:
.anchor:target { height:200px; display: block; margin-top:-2em; visibility: hidden;}
Actual Results With My Code: Page Refresh Stays At Anchor Location
Desired Results: Page Refresh Goes To Top Of Page
After some searching, I found a solution that almost works for me:
<script>
window.onbeforeunload = function () {
window.scrollTo(0, 0);
}
</script>
But it creates a flickering effect that doesn't look the best such as my example site at
https://graceindustries.com/gracetest/Grace%20Industries%20Website%20Design%202019%20Alternate%20Version/documentation.html
Anyone know how to remove the "flicker"?
You can try this (with the .some-anchor is the class for all a tag that points to some destinations within the page).
$('.some-anchor').click(function() {
var target = $(this).attr("href");
$('html, body').animate({
scrollTop: $("" + target).offset().top
}, 1000);
return false;
});
The "return false;" or preventDefault() event method will prevent the page from flickering. As I observed this does not make the # to the URL so refreshing is not a problem.
Other helpful answer: jQuery flicker when using animate-scrollTo
Navigating to page content using URL Fragments (#someLink) in anchor tags is a core part of the HTML specification. The standard implementation in most (if not all) web browsers is to add the fragment to the address bar. The fragment is part of the URL and therefore, when the page is refreshed the browser scrolls to the element with that ID. Most users will be familiar with this behaviour, even if they don't understand how or why it works like that. For this reason, I'd recommend not working around this behaviour.
However, if it is absolutely necessary, the only way to achieve the result you're looking for is to not use URL fragments for navigation and use JavaScript instead, therefore not putting the fragment in the URL in the first place. It looks like the Element.scrollIntoView() method might do what you're looking for. Rather than having
Click me
you'd use
<a onclick="document.getElementById('element1').scrollIntoView();">Click me</a>
or even better, implement this in an external JS file. If you experience issues due to the element not having the href attribute, you could always add an empty fragment href="#".
You can remove the id from the url right after the user click on the anchor tag
history.scrollRestoration = "manual" will set the scroll to the top of the page on refresh
<a onclick="removeAnchorFormURL()" href="#sec-2">here</a>
<script>
history.scrollRestoration = "manual";
const removeAnchorFormURL = () => {
setTimeout(() => {
window.history.replaceState({}, "", window.location.href.split("#")[0]);
}, 100);
};
</script>
window.location docs
location.href docs
location.replace docs
scrollRestoration docs (check it for info on scrollRestoration compatibility)
<html>
<script type="text/javascript">
function openWin(url) {
window.open(url, "_blank", "toolbar=no, scrollbars=no, resizable=no, top=200, left=300, width=870, height=650");
}
</script>
Content 2
Content 3
</html>`
this is my code to open to javascript popup. but when i click content 2 only one popup should open ` but here instead multiple popups are opening. and also parallely content 3 window should open in a diff window.
You don't want to supply javascript on the href attribute, instead use onclick.
Content 2.
Also, you are missing some necessary tags in your HTML document. You are missing the required body tag for example. You can check your document for syntax and to some extend semantic errors by using the W3C HTML validator.
Is is possible to both define an anchor to scroll to a URL and set a variable in the frament? I tried with code the below, but this does not work in Chrome. Can I make it work using another delimiter than the ampersand?
<!doctype html>
<html>
<head>
<title>Scroll to anchor test</title>
</head>
<body>
<p>Scroll to bottom (works)</p>
<p><a href="#bottom&test=testing">Scroll to bottom and include
variable in the frament</a> (doesn't work)</p>
<p style="margin-top: 2000px">Bottom of page</p>
<p><a name="bottom">#bottom</a></p>
</body>
</html>
JSFiddle with the code above: http://jsfiddle.net/janaagaard/FHdQr/
As pointed out before #bottom&var=value will not work. The page will scroll to the element with id="bottom&var=value". The page scrolls down without reloading.
?var=value#bottom would reload the page with that variable and scroll to the element with id="bottom" on that new page. This is useful if you need to know the value of the 'var' variable on the server to perform some server-side action. E.g. In PHP you would see the value value in $_GET['var'].
If you need to change something with javascript and want to alter a variable because of that reason, you should use the onclick event (either by using it in-line or binding it to the element in an other way). Usually you wouldn't want to change a variable, but do whatever you need to do in a (nameless) function instead. This is useful if you want to do a client-side action.
Edit: I quickly want to add. To do a server-sided action, you don't necessarely need to reload the page. Lookup ajax-requests if you need to do that. This is done with javascript.
No, it's not possible to both link to an anchor and use the fragment for storing variables.
I ended up scrolling the page using JavaScript, using this answer as a template: https://stackoverflow.com/a/4801719/37147.
I would preffer this if I were you:
javascript
function GetTop(ele){
if (ele.offsetParent)
return (ele.offsetTop + GetTop(ele.offsetParent));
else
return (ele.offsetTop);
}
function scrollToAnchor(id,offset){
var aTop;
if(id=='0')
aTop=0;
else
aTop = GetTop(document.getElementById(id));
//40px to leave room for #title
$('body, html').animate({scrollTop:aTop+offset},900);
//body for chrome/safari and html for ie/firefox/opera
}
Put this in your HTML next to an ID orso:
onclick="scrollToAnchor('div name to scroll to', -10)"
the -10 stands for the pixels he will be above or beneath the place you want to scroll to.
I will be using shopify's system so i am restricted to how and which pages i can edit.
I have one page that is an app but i want that page, on loading, to show a popup disclaimer before they can see the page.
I am told that i can't edit the app page itself but i can add javascript code in the common site footer to check current url and if it equals this certain page, then create a popup.
I have created a page that holds the disclaimer information so i would like the popup window to load this pages' content.
I believe i can load the content using this div tag
div id="popupinfo" pages.disclaimer.content div
I do not know how to add the if statement to check if current url = site.com app.html then div id="popupinfo" pages.disclamier.content div
This site uses their own language called Liquid, hence the double brackets..but any code to pull the content of an html page would work i am sure.
Can i please have some assistance in how i am to
check current page
if page = xxx
best way to create a popup window where the user has to click as yes or ok button
then display the regular page
Thanks in advance!
Brocour
It's only possible to open a pop-up window upon a user-action, for example a 'click' action.
if( document.URL === "myPage.html" ){
// Disclaimer alert
if (confirm('Do you agree to this Disclaimer?')){
// Redirect
window.location = "myNewPage.html";
} else {
// Do nothing
}
}
Try something like this:
<html>
<head>
</head>
<script type="text/javascript">
function poponload()
{
popupwindow=window.open("","mywindow","location=1,status=1,scrollbars=1,width=100,height=100");
popupwindow.moveTo(0, 0);
}
</script>
<body onload="javascript: poponload()">
This is the page
</body>
</html>
You could use the code in this example i made.
$(document).ready(function(){
$('#open_popup').click(function(){
popupwindow=window.open("http://google.com","mywindow","location=1,status=1,scrollbars=1,width=600,height=500");
})
})
I am creating new Page with two divs.This Page Loading within Iframe.
First Div get contents from Database then load.Second Div contains Save and Cancel Button Only.
At the Time of loading Save and Cancel Button (Second Div) comes first.How to avoid this??
Hide the second div via CSS.
Then add some javascript which unhiddes the div when the loading from the DB is finished
Have the first document load the second document when it's ready. With a onload handler on the first document that sets the location of the second iframe.
Let's say your iframes have 2 ids: "iframe1" and "iframe2". You load the database content in iframe1, and an empty page in iframe2.
Here is a sample code for the document loaded in iframe1 :
<html>
<head>
<script>
function init () {
frameElement.ownerDocument.getElementById("iframe2").contentWindow.location = "/someurl/document2.html";
}
</script>
</head>
<body onload="init()">
<!-- iframe1 content -->
</body>
</html>
Dynamically load the content using something like JQuery or Prototype to control when and how divs load.