I used zurb's foundation for a website which had lots of images distributed over some tabs.
It was very heavy to load so I used jQuery Lazyload to solve the problem. It worked beautifully except for the fact that it only loads the images on the 1st tab, which is the one active by default. The images in other tabs only loaded upon scrolling. Even if you do it by just a tiny bit.
So how do I re-activate Lazyload when navigating between tabs?
I've tried many fixes, including the ones in Lazyload's on website. None of them worked when the content is inside tabs.
But as Lazyload is triggered by scrolling I've managed to activate it by moving the page only 1px. Which is practically unnoticeable.
Here's how to do it in two simple steps...
add this javascript to the bottom of the body tag inside your html file
<script type="text/javascript">
// FUNCTION TO SCROLL 1PX AND TRIGGER THE LAZY LOAD
function tinyScroll() {
window.scrollBy(0, 1);
}
</script>
and add onclick="tinyscroll()" to your tabs. Like this example
<ul>
<li onclick="tinyScroll()" class="tab"></li>
<li onclick="tinyScroll()" class="tab"></li>
<li onclick="tinyScroll()" class="tab"></li>
</ul>
Your own answer is clearly a bad hack. In general I would recommend to use lazySizes. Among other improvements, it detects any image visibility changes automatically. So you don't have to bother to trigger anything.
Related
I am using next.js and tailwind Css building my portfolio.
I already add scroll-behavior : smooth in globals.css file. And in Navbar, I used to navigate to home page, and the rest of them I used id to navigate. However, I can only see the smooth effect when navigating to Home page, others not working. Could you please help me ? Thanks
I want to use scroll smooth effect in my page when navigating.
Your problem comes from what does <Link>in Next.js.
By default, <Link> will go to the top, and then scroll back. You can read that from the Link Documentation, and that is totally expected: when you make the user go to another page, you don't want him to be at a random scroll position, but at the top of that new page. But here, we are staying on the same page, so we need to tell NextJS about that.
There is a way to prevent that behavior, by adding scroll={false} to it, which corrects your problem. But there are others issues as to how NextJS works and how you implemented that smooth behavior too. (From there, your initial problem is fixed tho)
So it'll looks like:
<Link href="#link" scroll={false}>
I'd suggest you to take usage of the _document.js file included in NextJS to manipulate body & html properties.
Here's my take on it according to your example:
import { Html, Head, Main, NextScript } from 'next/document'
export default function Document() {
return (
<Html className="scroll-smooth">
<Head />
<body className="bg-[#ecf0f3] text-[#1f2937] tracking-wide ">
<Main />
<NextScript />
</body>
</Html>
)
}
That way, you can clean down your CSS and have a native solution applied, you can be sure of that, to every page (as _document.js is the "template" of each page rendered in next)
You also should remove the "/" before your #id in the href as it deserves no purpose.
Links that you can read from
_document.js documentation
Tailwind Smooth Scroll
I'm inserting a jsp page on an existing jsp page (left menu) to simplify my deployment and mutualize my menu in any page of my site.
Here is the insertion I'm performing:
<body>
....
<div style="overflow-y:scroll;" id="leftMenu"></div>
....
<script>
$(document).ready(function() {
$("#leftMenu").load("leftMenu.jsp");
.....
</script>
insertion is working well but I would need to get the y scroll available systematically but it is not working properly (on Chrome and Firefox and IE). Sometimes when I refresh the page I can see the vertical scrolling but this is not systematic.
I also tried to insert as well tag
height: 100%
but same result, how can I get the vertical scrolling on this jsp page I'm inserting ?
If I am right then:
If you always want a scrollbar whether it’s needed or not,
use overflow:scroll.
Change the styles overflow style when you loading new JSP page
Keep the style "overflow: hidden". If you don't want to scrollbar initially
eg. when loading the new jsp
$(document).ready(function() {
$("#leftMenu").load("leftMenu.jsp");
$("#leftMenu").css("overflow-y", "scroll");
Currently, I'm working on the single webpage and got some issue with the final output which is when clicking the link menu, it does not go to the targeted div position(correct me if I'm wrong). And when clicking again the link, it will go to the other position.
I follow this tutorial, callmenick
Here is the reproduction of it, jsfiddle
<nav>
<ul>
<li>Overview</li> <- when any click link, and then click again, there's some action happen. *bugs?*
<li>Tech Spec</li>
<li>Support</li>
</ul>
</nav>
Now I get it,
the Problem is that the fixed nav is not part of the document flow anymore.
Therefore it won't reserve height. Or in other words the rest of the elements don't know its there anymore. Just like display: none;
You need to find a way to push the elements down by the height of the fixed nav but only if the nav is fixed.
There are a couple ways to to that, but it depends on the layout.
First way that comes to mind is applying padding-top: ?px; to the #product-nav, via JS as soon as fixed is applied to the nav.
edit:
https://jsfiddle.net/ju648br4/4/
I see no issue on my machine, but this feature can be approached in a different way. See my example below, this might solve the issue
Add anchor class
Add data attribute
Make global function that scrolls to certain point
So for instance
<div id="button-name"></div>
becomes
<div id="button-name" class="scrollAnchor" data-anchor-dest="#section-more-info"></div>
Now there is a JavaScript action required, this one reads the data-anchor-dest attribute and scrolls to it.
$(".scrollAnchor").click(function(e){
e.preventDefault();
anchorDestination = $(this).data("anchor-dest");
smoothScrollTo(anchorDestination);
});
function smoothScrollTo(element)
{
$("html, body").stop().animate({
scrollTop: $(element).offset().top
}, 1000);
}
Now the usual question, how compatible is it? This compatible, I have tested this myself in IE9 and it works.
This answer may be more of a teardown than a fix, but I hope this helps
What you need to do is to add your missing Buy section and in your navigation add href to the link, like:
<nav>
<ul>
<li>Overview</li>
<li>Tech Spec</li>
<li>Support</li>
<li>Buy</li> <!-- You are missing your href attribute here -->
</ul>
</nav>
All the rest seems to work fine.
I have this accordion built using only HTML and CSS but whenever one of the tabs on the accordion is clicked the page will jump so that the tab is at the top of the page.
Example:
<div id="tab-1">502-831
I'e looked around online and have tried a few solution such as JavaScript and onlick solutions but either the solution does nothing or causes the tab to stop functioning. I am using Joomla so there isn't much support for JavaScript. Here is the bare bones code for the accordion on jsfiddle, if you watch the scroll bar on the right when you click the accordion tab you will see it jump.
http://jsfiddle.net/1pjudu4j/4/
I added this line code of CSS to your example and it worked as intended.
.accordion div:blur .content {
display: none;
}
Do play around with your CSS with this in mind.
Please do note, you are not using JavaScript at all for this, therefore this has been posted in the wrong section. Please edit it and remove the "javascript" and "jquery" tags.
Since you are using Joomla, replace:
502-831
with:
502-831
Chrome flickers when reloading content in iframes. Can this be avoided in any way, thinking of:
Wrapping a-links with js that does some magic.
Meta-tags in content-html. (I have source control over the html in the iframes)
Please note that the content-type in the iframe may vary (pdfs, html, images) so if ajax is the only way out here, does it reflect the http-content-type back to the iframe?
Please visit the demo at http://jsfiddle.net/2tEVr/
Excerpt of fiddle:
<iframe name="if" width="800" height="600"></iframe>
UPDATE
The solution that worked best for me was to replace regular href's with ajax-requests, repopulating the body-area, (solution 4 below) Flickering is gone but comes at a price of akward debugging since sync between content and "view-source" is lost on ajax-request.
Also, since the content-type in my case may change, the method for performing the ajax-request had to have some brains and possibly fall back to regular location request.
regards,
#user247245: From your question, its not entirely clear how you (want to) use the iframe. Does it reload periodically, or once when the whole webpage loads?
Solution 1: Different background color
In case you just want to avoid the ugly white, and avoid over-complication. Set a different background color in your HTML header of the framecontents.html file, like so:
<!DOCTYPE html>
<html style="background-color: #F48;">
This way, while the CSS file loads,parses, and gets applied, the background is not #fff.
Solution 2: Transparent iframe
While there is no content, the iframe should simply not be visible. Solution:
<iframe src="/framecontents.html" allowTransparency="true" background="transparent"></iframe>
Ofcourse dont use this in combination with solution 1, you'll shoot yourself in the foot.
Solution 3: Preload iframe page
In case you are loading the iframe later (such as user clicking a link), consider preloading its contents. Hide this in near the top of your (parent) page:
<iframe src="/framecontents.html" style="position: absolute; width: 0px; height: 0px"></iframe>
But i'd advise using solution 2 instead.
Solution 4: If doing a mobile web interface:
See how jQuery Mobile did it. We built a web interface that had to feel like a native app, so without reload flashes. jQM fixed that. Basically does a background ajax call to retrieve the full HTML contents, then extracts the body (the "page" div to be more precise) and then replaces the contents (with a transition if you like). All the while a reload spinner is shown.
All in all this feels like more like a mobile application: no reload flashes. Other solutions would be:
Solution 5: Use JS to inject CSS:
See answer by jmva, or http://css-tricks.com/prevent-white-flash-iframe/ .
Solution 6: use JS to inject CSS (simple version)
<script type="text/javascript">
parent.document.getElementById("theframe").style.visibility = "hidden";
</script>
<iframe id="theframe" src="/framecontents.html" onload="this.style.visibility='visible';"></iframe>
You could ofcourse leave out the <script> part and add style="visibility:hidden;" to the iframe, but the above would make sure that the frame is visible for visitors with JS disabled. Actually, i'd advise to do that because 99% of visitors has it enabled anyway, and its simpler and more effective.
A common trick is to display the iframe just when it's full loaded but it's better to not rely on that.
<iframe src="..." style="visibility:hidden;"
onload="this.style.visibility='visible';"></iframe>
The same trick a bit optimized using JS.
// Prevent variables from being global
(function () {
/*
1. Inject CSS which makes iframe invisible
*/
var div = document.createElement('div'),
ref = document.getElementsByTagName('base')[0] ||
document.getElementsByTagName('script')[0];
div.innerHTML = '<style> iframe { visibility: hidden; } </style>';
ref.parentNode.insertBefore(div, ref);
/*
2. When window loads, remove that CSS,
making iframe visible again
*/
window.onload = function() {
div.parentNode.removeChild(div);
}
})();
Extracted from css-trick
If you have to switch between different sites and that trick of onload isn't working the only viable solution would be destroy and create the iframe programatically.
Try adding transform: translate3d(0, 0, 0); on a parent element.
I had an issue where the iframe was taller than its parent (parent has overflow: hidden). The iframe's overflown portion was flickering on each video loop on Chrome (YouTube iframe API).
Forcing hardware acceleration this way was the only thing that worked for me.
A simpler solution that worked in my case was just adding this CSS to the iframe
will-change: height;
min-height: 400px;