I'm trying to make a lightweight website using no (or just a little) of JavaScript. So just HTML and CSS.
I'm working on a page where I'm summarizing images and when we click on that image it scrolls to the end of the summary where I display every image on large scale and explain what it's about.
So everything is working with a href to an anchor but the problem is that since I want to make the website as light as possible, I'm using loading=lazy on my images but the href anchor trigger every loading on the way...
Is there a way to use both href anchor and lazy loading without JavaScript (or in a lightweight version)?
I found out that scroll-behavior: smooth; in css trigger the loading of every image on the way
So if I don't that use that transition I don't have to put JS on that page !
But if it's something you really want, you can hide divs with large images and write a simple function to display it when you click on the thumb.
Related
I am working on a website with golang as my back end.
I would like to load webpages with a particular background image inside of a div depending on the full URL. I have gotten HTML templates to work well and I am able to dynamically change text and a few other things based on this.
However in HTML5, as you cannot define the background image of a div in anything but CSS, I would like to know how I might have this image change dynamically as well. I do not know how to dynamically change CSS with go(using net/http and html/template), or even if this is possible. Thank you
So, basically I am trying to make an overlay for a website, like a sidebar, but I don't want the css of a website to interact with my HTML.
Up to now I tried to do that with the help of an iframe (in the foreground), but the user can't click through that.
The next thing I would try is to load the webpage into an iframe and my HTML as the actual website.
But I am certain that there is a more "clean" way to do what I am trying to do.
Well, the best approach to isolate styles, which is also suggested by the comments, is to just make use of the Shadow DOM to isolate styles. But of course, the simplest approach would have been to move the iframe out of the viewport and to just have an event handler on the parent window. If I remember correctly I had the event handler for the animation of the sidebar inside the Iframe itself which is why the event didn't propagate properly, and thinking back it's kinda obvious. But maybe this helps someone... 🙂
Like #Burhan suggested in the comments, here is a link to my repo with an example approach in vanilla Typescript using the Shadow DOM: https://github.com/grievouz/chrome-extension-sidebar-example.
And here is another one in Javascript using React and an Iframe: https://github.com/segmentio/chrome-sidebar.
I'm playing around with Active Desktop on an old WinXP machine.
I have my background set up with an iframe and links pointing it to certain folders to make it easier/faster to navigate. I'd like a link to change the background-image of the iframe without having to resort to make a new page everytime I find a new image I want as a background-image. While I have no clue how, I'm fairly sure it's something CSS ought be able to handle.
The catch is that Active Desktop refuses to run Javascript.
So is it possible to change the background image of a page by clicking a link without using javascript?
via CSS you could use the pseudo :hover
However, that would only last for as long as you hover. If I understand you correct, you want a permanent change of image without scripting, or just without JS? You could try WSH. Perhaps there is some useful function in there, or maybe VB?
Hi im making my website at the moment and i was wondering if there was a way to show loading screen before the whole web page appears using html is it possible?
I don't think there is a way to do it with with HTML only. However, it would be really simple to just use an animated .gif and the onload event in JavaScript.
First time overflowing the stack.
I'm making a website with several html pages that are identical except for the fact that they contain different images that are more or less identical in size - and thats how they are named, by the jpg that they feature.
The pictures look great with the website, but I have a 300 pixel header that pushes them downward > forcing you to scroll down to see the full image. This is built into the shared CSS for all these gallery pages.
I have simple text links below the images that are hard coded to point to the next image in the gallery. (I have a list of the 20 images im displaying). When someone clicks the image, it goes to that page and resets the scroll to the top, which makes the header push the image area down.
Can anyone tell me how to prevent the scroll reset behavior of the new link?
Without using something like jQuery, you could link the pages such that you have an anchor tag like <a name="gallery"></a> above the images on each page and when giving the link to the various pages, append a #gallery to the url such as Next Image. This is duplicated on each page however, and will not produce a robust webpage. You'll want to change things in the future and this will cause problems and further work, so I would consider a dynamic alternative.
Note this won't look as seamless as with jQuery and using AJAX to load in the images when needed. Or better yet, as most JS galleries work, load the images into the page invisible at first and then with JS have them show up on the link click. The benefit of this would be that you could generate the links in JS using the provided images. If the images are large enough that they may cause considerable lag on page load, consider making placeholder images of some sort. In any case, take a look at lightbox 2.
Also, I didn't get the feeling you were using any server side scripting to create this gallery. If the js solution doesn't suit you or you find the added benefit of generating part of the website automatically based on the content need at the time, take a look at using something like PHP, Python, Ruby, etc. If it's just a simple website you're after, a great solution might be Wordpress.
You could have one page and just replace the images?
http://www.quirksmode.org/dom/fir.html
Now of course you change the function to work on a "previous/next" button system, assuming you have a photo gallery of some sort.
Please post more details.
You want your link to look something like this:
<a href="http://www.w3schools.com/html_links.htm#tips">
Visit the Useful Tips Section</a>
and you want to give your image an id="tips" in this case.
Check out this fiddle to see an example. The only difference is that your href will have the rest of the url in there like the code posted above.
http://jsfiddle.net/QgzsL/