Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
To start off, here's a picture of the website project:
http://i.imgur.com/FbdUmpp.png
The top image is one of the cycling images in the website banner. I'd like to make my website a bit more polished. When the user navigates to a new webpage, the banner animation will restart. I was wondering how I could stop this from happening.
How can I keep the banner from restarting when a user switches a
webpage?
What's the exact name of what I'm trying to accomplish? (I can't seem to find any information about this subject.)
My knowledge is limited to HTML, CSS, a little bit of PHP and JavaScript. I don't mind learning a new language in order to achieve this.
Thanks in advance!
Well the animation restart is due to the content being reloaded when you land on the new page. There is no way around that specifically. However you can change the content on the screen without actually navigating away. Look into AJAX to accomplish this. Have an AJAX call get the new data that you want to view and place it on the current screen in place of the old data. This way you will still get the new information and the animation of the banner will continue without stops or restarting.
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 months ago.
Improve this question
My current site has horrible optimization. A mobile score of 10 and a desktop score of 60 does anyone have any information on what I can do to make these scores better? Would love some suggestions on what to do. Here is a link to google insights. Thank you to who can help.
https://pagespeed.web.dev/report?url=https%3A%2F%2Ftouchupdirect.com%2F&form_factor=desktop
https://pagespeed.web.dev/report?url=https%3A%2F%2Ftouchupdirect.com%2F&form_factor=mobile
Mobile Score
Desktop Score
I personally focus on the Core Web Vitals, which come from real user experiences, and not the PSI scores, which are based on a single simulated test.
I'll audit your home page:
LCP
This is the time it takes to show your carousel image. A first improvement would be to do a preload on that image so that it starts loading earlier. And then remove the lazy load from its img tag.
Important images that are above the fold should not be lazy-loaded but eagerly loaded.
Some of your lower-down images are lazy-loaded, which is good. But some are not. In particular, I saw the image in the expandable sections are not lazy-loaded. If you make them lazy-load, they will not get in the way of loading more important resources, like your LCP image.
Your JavaScript bundle is running a few long tasks. This can get in the way of rendering and therefore LCP. Consider looking into reducing or delaying what it is doing. In particular, delay the starting of animations.
CLS
Your green selector at the top of the page is added late and pushes down the whole page. This layout shift alone means you fail CLS. Try and pre-allocate the space for it, so nothing shifts.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
So, as I was making my website, I started to have many pages. So, I wanna ask today, if ya'll know anyway way how I can make a change to a page of my website, and those changes be apply to my other pages automatically. For example, if I make a change to my nav bar of my website, I don't wanna have to go to every single page and and do it manually, I wanna know if there is a way how I can make a change to the nav bar in one of the web page, and get the other pages get the updates automatically. I would very much appreciates any advice, thank you.
You can just write your navbar code into a separate file and include it wherever you need navbar. This way if you change the main navbar.php file it will reflect in every other page that includes navbar.php
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
So I've seen a mouse-hover effect on 2 websites so far and I really like it.
This is the effect I'm talking about.
I'd be grateful if somebody can tell me how to get that effect on my webpage.
It only appears under your cursor when you hover over the page.
The site you have linked in the comments uses the HTML canvas element. But You can simply use already existing libraries for that effect.
Examples mentioned in the comments:
http://jnicol.github.io/particleground/
http://github.com/VincentGarreau/particles.js
Simply, Go to the webpage you wanted to Copy it's effects or anything from it
Right click, View page source
If the effect is made by Css, you will find it in stylesheets tab
If it's using jQuery/Js, Search the head for <script> , Read them and copy the effect (assuming that you understand js/jquery
For more simplicity, use Firebug, open it and just point the cursor at the item you want to see it's source.
But, actually
You can find it at github Here
Change what you want.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I have a webpage with 8 thumbnail images on it:
Each thumbnail as shown is a different kitchen. I want to be able to click on each thumbnail and enter a gallery of 4 closeups of that kitchen. I could obviously create 8 different web pages with their individual galleries on it, but in this modern era of web programming im sure there is a more efficient way of just creating one page whos content is dependent on which thumbnail was clicked?
My issue is im new to JavaScript and so cant think of how to implement this, and I know that variables cant be passed from one html page to another as its just a markup language! Maybe the whole thing could be programmed in this one webpage with a 'pop-up' window (not one of those annoying pop up windows but more one of those cool looking transparent 'overlay' pop-ups!) as this would easily be able to know which image was clicked. Any ideas out there??
There are a number of "Lightbox" type javascript/jquery applications you can try or any number of photo galleries.
Here are a few that I've used in the past:
http://lokeshdhakar.com/projects/lightbox2/
http://fancybox.net/
http://leandrovieira.com/projects/jquery/lightbox/
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 9 years ago.
Improve this question
I know the Title is a little obscure, but I will try to explain my best. Since OS X Lion the login screen of the Macs presents a row of images of the available users. Once you click one of those images, the rest disappear, centering the clicked one and revealing a password field.
I want to do a similar thing in a web-app. I have a few users, and I want them to click on their image to reveal the password field.
I searched for similar options, but can't find anything, and I don't even know how to proceed. I guess JQuery or Javascript would be necessary, but those I know little to nothing (HTML & CSS shouldn't be a problem, but well, I don't even know how to start this simple thing... )
Thanks!
Google is your friend... no matter how much the NSA are watching. Use it to search for tutorials, these are the best way to learn. Mostly CSS will be needed to make it look like the OSX login screen... maybe a bit of jQuery.
Within in seconds I found this page of many examples of login forms. And then I found this one that looks very similar to an OSX login page.