I have an iframe that has a source of /website-policy#privacy but when this loads the iframe stays at the top instead of jumping to the id. Is there anyway without the use of js to make this go to the correct section?
At the moment I have had to use the following jQuery:
iframe.contents().find('html,body').animate({ scrollTop: iframe.contents().find('#privacy').position().top - 10 }, 1);
but this seems rather untidy and I don't want to have to do this each time I have an iframe with a hash-tag in the url
Here is a fiddle of what is happening, as you can see the fancybox is opening up but not jumping to the heading "Jump here"
This is my workaround You may have to click the link twice for the fancybox to appear
The problem seems to be the iframe preload setting in fancybox. If you set this option to false, it will work as expected:
$('a.fancy').fancybox({
type: "iframe",
iframe: {
preload: false
}
});
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)
I have a page with Superslides. It's a jQuery slider that fills the entire background of the page.
I have a problem. Every time the image updates, the URL in the address bar changes. (When the first image shows, the URL changes to http://…/index.html#1 ... the URL then changes for the next image: http://…/index.html#2 )
How can I stop the URL in the address bar from changing?
I'm completely stumped on this one. Any ideas?
Assuming you are talking about this plugin.
You must use the option hashchange: false, which is its default value.
If you are initializing it like this:
$('#slides').superslides({
slide_easing: 'easeInOutCubic',
slide_speed: 800,
pagination: true,
hashchange: true, // <-- Remove this line
scrollable: true
});
you must remove hashchange: true.
You can see the full list of options and what they do in plugin's github page.
I have two classic HTML pages (just HTML and CSS) and links between them.
When I click on these links, the screen flickers (it quickly goes white between transitions).
I tried to place this in the head - without result:
<meta http-equiv="Page-Enter" content="blendTrans(Duration=0.0)" />
<meta http-equiv="Page-Exit" content="blendTrans(Duration=0.0)" />
I can usually open other sites without the flickering.
Browser is Firefox 16.0.1.
Just change your body background to:
body {
background: url("Images/sky01.jpg") repeat scroll 0 0 #121210;
font-family: Verdana,Geneva,sans-serif;
font-size: 12px;
margin: 0;
padding: 0;
}
background color will prevent white flickering while loading the background image.
That meta are for IE only, they don't work in FF.
You can't rely prevent flickering in plain HTML. The best solution I found is to replace every link with a JavaScript call where you download the page with AJAX and then you replace the document itself with the new content. Page refresh will be really fast and you won't see any blank screen while downloading.
Basic function may be something like this:
function followLink(pageUrl)
{
jQuery.ajax({
url: pageUrl,
type: "GET",
dataType: 'html',
success: function(response){
document.getElementsByTagName('html')[0].innerHTML = response
}
});
}
Then you have to replace you links from:
Link
With:
Link
More details about this: replace entire HTML document]1: how to replace the content of an HTML document using jQuery and its implications (not always so obvious).
Improvements
With this solution you force your users to use JavaScript, in case it's not enable they won't be able to click links. For this reason I would provide a fallback. First do not change <a> but decorate them with (for example) a CSS class like async-load. Now on the onload of the page replace all hrefs with their javascript: counterpart, something like this:
jQuery().ready(function() {
jQuery("a.asynch-load").each(function() {
this.href = "javascript:followLink(\"" + this.href + "\")";
});
});
With this you can handle a loading animation too (how it's implemented depends on what yuo're using and your layout). Moreover in the same place you can provide fade in/out animations.
Finally do not forget that this technique can be used for fragments too (for example if you provide a shared navigation bar and a content sections replaced when user click on a link the the navigation bar (so you won't need to load everything again).
Try to embed pictures as it delays final page loading and therefore white transition time
echo '<img src="data:image/png;base64,';
echo base64_encode(file_get_contents($file));
echo '"/>';
Chrome fails to follow a link and then scroll.
For example if I am on the home page of my website (nanite.com.au) and the user clicks a link that contains products.html#build or http://nanite.com.au/products.html#build it fails to redirect to the new page. However the address bar does change to http://nanite.com.au/index.html#products.html#build
Is this Chrome or have I coded something incorrectly?
Just to clarify, if I am on the products.html page the scrolling works perfectly.
If you look in the javascript that you're using for the scrolling effect we find this:
$(document).ready(function()
{
$('a[href*=#]').bind("click", jump);
return false;
});
Basically any link that has a # in it will be made to scroll instead of actually changing page.
You need to change this so it looks for where href begins with #. So you would change it to:
$(document).ready(function()
{
$('a[href^=#]').bind("click", jump);
return false;
});
Notice that $('a[href*=#]') has become $('a[href^=#]').
Hi I use iframefor my facebook apps. The iframe gets a scrollbar around itself. Can you tell me how to avoid getting the scrollbar around the iframe? I currently have 2 facebook apps as iframes and one of them gets scrollbars that it shouldn't have:
http://apps.facebook.com/cyberfaze/ (has scrollbars or scroll areas around iframe that I don't want)
http://apps.facebook.com/koolbusiness/ (same CSS and has no scrollbars)
Could you help me?
Thanks
Go to your application settings on Facebook
you will find canvas settings
In the canvas settings you will find IFrame Size:
You will find two options
Show scrollbars
Auto-resize
select Auto-resize to get rid of from the scroll bars.
You will need to go to your app settings -> canvas settings -> iFrame size (as mentioned by Micheal) and set it to auto-resize.
You will also need to make sure you have body, html { overflow: hidden; } for you iframe content
Then the below will help, chuck that in and change your app id -
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({
appId: 'xxxxxxx',
status: true,
cookie: true,
xfbml: true
});
//this resizes the the i-frame
//on an interval of 100ms
FB.Canvas.setAutoResize(100);
};
(function() {
var e = document.createElement('script');
e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
There is a setting in the Facebook Developers App Setup section to set scrolling to Auto-resize. and you can add to your CSS file : html { overflow:hidden; }
Could it be that you have forgot to set the iframe scrolling attribute to "no"?
Try to change the iframe tag to this:
<iframe class="smart_sizing_iframe noresize" frameborder="0" scrolling="no" id="iframe_canvas" name="iframe_canvas" src='javascript:""' height="600px" style="height: 719px; overflow-y: hidden; ">
Hope this was what you where looking for!
Usually with iframes you can either use the CSS method setting overflow: hidden or you can use the scrolling attribute of the iframe and set it to scrolling="no".
Having looked at your examples though, I am not sure that is what is causing your issue. Facebook iframes have their own set of issues.
First go to the devloper app and edit your app settings. In the Facebook Integration area set iframe size to auto-resize. Then in your app, after FB.init, call FB.Canvas.setAutoResize. Here is a link about FB.Canvas.setAutoResize.