Frontend

This thread is designed to talk about random JS topics, post relevant articles, and share ideas. Not every topic warrants its own thread, sometimes you just want to post a quick snippet or something you have seen. I'll go first. Today I noticed you can label functions, loops and possibly other things in JS. Typically though you just use this in loops, I haven't come across a function example, but it doesn't error. outer: for (i = 0; i < 10; i++) { console.log('donkey'); } calculate_tips: function tips(x,y) { return x + y; } console.log(tips(1,5)); Has anyone seen this before? Or know what it is? I'm not sure what the repercussions of doing this would b…

Hi guys, I thought it would be cool to start a topic for people to share sites they find useful for their design/development processes. Here is a list of sites I find useful and/or use regularly: General Stuff: http://jsfiddle.net/ - Useful for JavaScript troubleshooting. Test your code and just play around with HTML/CSS and JavaScript. If you're looking for help with a piece of code, save your Fiddle and send it to someone else who can take a look at it You can also save revisions of your Fiddle to track your progress. http://pastebin.com/ - Useful for sharing code online. Useful for when you run in to a bit of trouble with some serv…

Following the General JS thread, why not start a general CSS topic, where we can cover everything recent and possibly answer questions? I will start with a question about the use of id selectors in CSS. I was just looking at Harry Robert's Nudge https://github.com/csswizardry/nudge and noticed the following: No IDs We shouldn’t use IDs in CSS, so display a warning any time we find one. Is that becoming a standard now (no id selectors at all) and in which cases do you think we should use ids in CSS? Or does that relate to large scale UIs and not smaller projects?

We don't have a git-specific topic on the forum, so I thought I'd start one and pin it. Just discovered git can actually be slow-ish on Windows (grrr) and found these helpful commands. git config --global core.preloadindex true git config --global core.fscache true git config --global gc.auto 256 I also had to do a (rather) large commit and git hanged unexpectedly. After a research, what helped was increasing the http postBuffer size value: git config --global http.postBuffer value-in-bytes Hope that will help windows users

It's called 'Block-slider' not very original I know, I've never been very good at naming things, anyway there's thousands of very capable sliders out in the wild, and in many cases sliders are not great in terms of UX and conversion yada yada.. On a project I was working on however I had a very specific use case, but one that I've come across numerous times.. We had a list of company logos, companies our client has worked with - there's 9 of them in total, that number could increase or decrease via the CMS and rather than put them tiled layout, I wanted them to all remain on a single row and not to tile at smaller screens. This has a few issues At very small…

W3C Web Standards Validation Tools These tools will help you validate a wide range of website related items such as HTML and CSS markup, checking for dead links, checking the validation of RSS feeds and XML files (such as sitemaps) and more. Markup Validator Also known as the HTML validator, it helps check Web documents in formats like HTML and XHTML, SVG or MathML. CSS Validator Validates CSS stylesheets or documents using CSS stylesheets. Link Checker Checks anchors (hyperlinks) in a HTML/XHTML document. Useful to find broken links, etc. Feed Validator Checks newsfeeds in formats like ATOM and RSS. XML Schema Validator Valid…

Can anybody tell me why the animation will not reverse if the two time parameters are identical for both clockwise and counter-clockwise please ? specifically: animation: rotate 1.5s infinite linear; <div class="outer"> <div class="inner"> </div> </div> .outer { width: 200px; height: 200px; display: inline-flex; justify-content: center; align-items: center; border-radius: 700px; border: 30px solid white; border-bottom: 30px solid transparent; border-right: 30px solid transparent; animation: rotate 1.5s infinite linear; } .inner { width: 100px; height: 100px; display: block; border-rad…

Hello having problems getting the menu working on www.eugenemdonaghy.co.uk code pen is https://codepen.io/eugenemdonaghy/pen/JoRaYYO

Hi all, I tried google stitch, using same prompt used in this article nocode result is crazy. searching other tools like google stitch using prompt to have first version of mobile app design ? the goal is just to have the template as html/css to start thanks

Hello converted a bootstrap site to flex box having a problem with relative links not jumping to section headers how can i force relative links to jump to section headers code pen https://codepen.io/eugenemdonaghy/pen/JoRaYYO link https://www.eugenemdonaghy.co.uk/flex/links.html to see what I mean and what I want

Hello working on my website www.eugenemdonaghy.co.uk trying to get my social media in the footer but unable to get all in the footer social media icons appear outside the footer on a mobile site have a codepen at Untitled

Morning all, I'm creating a construction query website. And on the home page I want a drop down menu that contains all the trade category's but while it's inactive ( not clicked) I want it to constantly vertical carousel through all the different trades as a previous for what you can pick. Does anybody have any idea where to start. Doing a Google search I didn't really find any examples of one. I'm assuming this could be done with JavaScript and CSS. A plugin would be fine though. If I could create a tombola effect it would be awesome. Kind regards Tom

Hi all, I'm a beginner - I adapted a portfolio website for my film-making stuff, so I only half know what I'm doing. I have a datafilter so you can sort my projects by various titles, like 'corporate' or 'music video' for example and see only those projects. Is there a way to send someone a link so that when the page loads it has a certain filter applied? Like if I'm going for a corporate job, can I send them a link that will open to the page with the filter set to showcase my corporate work? Currently it defaults to 'all'. I've tried anchor links, obviously that doesn't work. It's complicated by the fact that I simply added to existing code and…

I have never seen anything like this before. Every item is position on the page with top, bottom, left and or right. No floats, no flex... I had googled and it seems to be rare. Is this something that was done many years ago, does anyone have experience / opinions on this?

the title says it all, thanls.

Hey everyone, I’ve recently started diving into both web development and mobile app development, and I’m curious about what others think is the smarter focus in today’s digital world. While web development offers a solid foundation for building websites and web applications, I’ve noticed mobile app development is becoming more essential as businesses shift toward mobile-first strategies. Whether it’s Android or iOS, almost every business today wants a dedicated app to boost engagement and provide better user experience. That said, I’d love to hear from experienced developers—Which one has better scope, growth, and freelance opportunities right now? Are ther…

I obviously spent too much time using Mattermost. To my shock the HTML inside <code> tags is rendered. Is there any nice script that get rids of rendering and adds proper indentation, or do all instructor websites really make their code blocks manually? Thanks for your help!

Hello again everyone, I wanted to ask you your experiences with and opinions of SVG. Many say it is dead and W3C did not put as much work in as expected. I would be interested in your opinions. And if there are are links that you can share about the history of SVG / learning resources, I would be so grateful.

Hello everyone. I am using an image as a link and I want to make sure it is accessible. So I found this but in their example they have an onClick() event. My question is. Do I need role="link" if I have this as my code? <a href="#startseite"> <img src="img/startseite.svg" alt="Startseite" title="Startseite" /> </a> Many thanks for your help!

Hi everyone, As a developer at Gramosoft, I've seen many websites struggle with performance issues. Here are a few tips that can help enhance loading speeds: Optimize Images: Use formats like JPEG for photos and compress them to reduce load times. Minimize HTTP Requests: Combine CSS and JavaScript files to decrease the number of requests. Enable Browser Caching: This stores resources for faster loading on return visits. Implementing these practices can lead to a noticeable improvement in user experience. What other strategies do you find effective?

Hello, I would like to create the below using a div container and then have the image coming out of it. I use bootstrap, so any assistance and help is appreciated. Thanks

Hello everyone. I hope you are well. I am looking for particular words in CSS, here is the sentence I am writing. So if for a CSS animation, for the animation-timing-function property, one can use a ________ cubic Bézier easing function or a ________ such as ease-in. (I would have saud CUSTOM and KEYWORD but I am really interesting in knowing what you all think.) What are the missing words, or if you rephrase the sentence entirely it is also OK. English is not my first language and I am a self-learner and these terms are difficult for me. Thanks in advance for your help.

Hello, Using CSS and radio buttons is it possible to highlight multiple td's / column when one of the radio's is selected? Thanks, Wayne

Hello fellow designers! I wanted to take a moment to introduce you all to a project that’s been a true labor of love for me—Gradienty. As a designer myself, I’ve always been looking for ways to speed up my workflow, particularly when it comes to adding those little touches that really make a design pop, like gradients and frosted glass effects. I got tired of tweaking CSS endlessly just to get things looking the way I wanted, so I decided to build something that solves that for us. That’s where Gradienty comes in. What is Gradienty? It’s a free web tool I created specifically for designers who use Tailwind CSS (but honestly, it works well for any CSS-base…

Hello everyone. I hope you are all great. It has been a minute since I posted. I need to do it more. I hope this topic is in the right place. I am doing a website for a restaurant and it has been many years since they had an upgrade. I found the attached as a background to their buttons. I think I remember doing this 'back in the day'. But can someone remind me why we did this? Was it because gradients had not been 'invented' yet, or was it to do with cross-border support? Thanks so much for your help.

Hello I am redesigning my web site to include a style switcher plug in but when testing the import I cannot get the layout sorted @import url ("assets/bootstrap/css/bootstrap.min.css"); @import url ("../assets/fonts/ionicons.min.css"); @import url ("Footer-Basic.css"); @import url ("Navigation-Clean.css"); @import url ("links.css"); the css is stored in assets > css directory any idea on how to resolve?

Hi, I have been working on a learning project to create a form that is similar to the Plate Builder form of https://www.nationwidenumberplates.com/shop/builder. I have been going around in circles and at my wits end. I did find some help here from a post in 2020 but the preview of the plate is somehow misplaced and not in position. This is the thread link of the topic way back in 2020 https://www.webdesignerforum.co.uk/topic/85497-number-plate-designer/ Can someone please help me out. Much appreciated!!

Hello everyone , i have a problem with my contact Form .... Ι fill in the fields of the contact form and click send. The mail goes normally but blank. Without any of the data I put in the fields. Look my Code. sendemail.php File <?php $name = $_POST['name']; $from = $_POST['email']; $subject = $_POST['subject']; $message = $_POST['message']; $to = 'info@geapellas.gr';//replace with your email $headers = array(); $headers[] = "MIME-Version: 1.0"; $headers[] = "Content-type: text/plain; charset=iso-8859-1"; $headers[] = "From: {$name} <{$from}>"; mail($to, $subject, $message,…

Hello All, I have a problem with a hamburger menu displaying on a mobile device, everything is fine with the layout on a PC but on a mobile device, the whole menu displays & not the small hamburger type, do I need to post the code or the website name please? Best wishes, Graeme

Having an issue with headroom.js and shadcn ui drawer on IOS. Scroll down the page and then open the mobile menu, Click anywhere on the drawer/menu, the headroom header is moving/starting to unpin and I you can't click on a menu item I have tried to call freeze() on the headroom js library when mobile menu open but no luck.. (header stays open, but touch event bs still happens!) Tried setting pointer events to none on the body no luck.. (touch event bs still happens!) Only thing I can think of doing it setting the scroll to 0 so the user is at the top of the page as it works then, but rather not! Any ideas guys? ❤️ Will you buy a coffee or two!!! …

https://stackoverflow.com/questions/78523813/blured-placeholder-images-ruining-my-performance-in-next-js-14 I am building my first next js 14 website, its going well. However I am having trouble with slow speeds generating blur URLs for my images. Initial page load is like 4 seconds if there's a large gallery. This part of the code is taking quite a few seconds to process, so the page hangs for a while before loading in. if (data?.gallerySingle) { const gallerySingleUrl = urlFor(data.gallerySingle).url(); data.gallerySingle.blurDataURL = await getBase64Blur(gallerySingleUrl); } What would be a better way to generate the blur URLs? Should I do it o…

Hello All, Would you be able to tell me the name of the attached please? Thank you

HiWe sell furniture online. We want the ability to allows customers to specify their floor dimensions and then drag/drop our sofas onto their floorplan to see how much space our sofas/tables take up.I dont want anything complicated, just a rectangle that the user specifies the dimensions of, and can then drag up to 10 shapes (our range of sofas/tables) into the rectangle.How can this be done? Has someone done similar before?Thanks

Hello, I have just begun learning JS at W3 Schools. At the Introduction(https://www.w3schools.com/js/js_intro.asp), it is stated that JS is insensitive to the use of either single- or double quotes. The Introduction states these two lines are the same: document.getElementById("demo").innerHTML = "Hello JavaScript"; And: document.getElementById('demo').innerHTML = 'Hello JavaScript'; The first uses double quotes and the second singe quotes. However, the exercise for changing the src of an image reveals a quote-sensitivity: <button onclick="document.getElementById('myImage').src='https://www.w3schools.com/js/pic_bulbon.gif' ">On</button&gt…

I am 17 years old and I am currently working on redesigning the website of my employer. The olde website was made probably close to 10 years ago, so I completely starting from scratch and giving it a modern look. I have been programming for 5 years, and have done a little work with web design. So far I have created the home page, which my boss has said looks amazing and he wants me to continue. The company is a cell home repair company, meaning there will be multiple pages with pricing of repairs. I may be incorporating web scraping of our part supplier’s website in order to have the prices automatically update as the price of parts changes. My boss has said we will have …

Hello everyone, At 2:44:10 of Dave Gray's excellent CSS tutorial for beginners, the intention is to make a hover effect have the same rounded corners as its container, so that they visually match. My code seems identical to his, but I cannot attain the same effect. Here is my page (JSFiddle). The li:last-child a{border-radius: 0 0 2rem 2rem;} doesn't work yet does not seem erroneous. It is intended to make the last li a:hover assume the same shape as the rounded bottom corners of the nav element, in which the list anchors are nested. Can anyone point out to me where my code is not identical to his? I apologize; I really cannot see it. Kindly, Architec…

Hey, I have a specific width set to a div I have (200px) and I'm using the standard wordpress tag cloud code (small to big font size tags) inside of it. Problem is the tags exceed with width of the div. Is there something you are supposed to do beyond standard practice? Perhaps a way to control the tag? This is the code <div id="#footer-cloud"> <h2>Popular tags</h2> <?php wp_tag_cloud('smallest=8&largest=24&'); ?> </div> #footer-cloud { width: 200px; float: left; } and it probably extends out an additional 200px in width. Any thoughts as to what I'm doing wrong here?

I would like that when a user hovers different words, that a random arrangement of thumbnails fades-in. Some caveats: thumbs should stay fairly close to the corresponding text. thumbs can overlap, but not fully. both the text and the thumb positions should be random on every page refresh text and thumbs shouldn't fall outside the screen. should be scalable (i.e.. I will have max. 10 texts and max. 10 thumbs for every text. the thumbs could spread concentrically if need be) And here's a fiddle of what I have so far: https://jsfiddle.net/2jddfsjad/ewk4dzLp/9/ See the image for an example of what I mean:

Hi all, I'm new here, so please let me know if I have posted this in the wrong section. My query is as follows: I would like to embed / reformat an AI image generator onto a website for a new business I am launching. I haven't created my own AI image generator, but I am wondering whether it would be possible (and feasible for under $2500) to create a page on a website where an image generator is hosted / embedded and then the generated image is displayed on a different section of the page and emailed to me. The end goal would be similar to this: a user logs onto my website, can generate an image and we'll then sell them a photo print of said image. …

A website like http://wttr.in/ is optimised for low end GUI output like a curl request on the command line. However, is there a GitHub project anybody can recommend that will automatically mirror normal site content onto e.g. a sub-domain (to avoid maintaining two sites) in ASCII like format for curl access ?

Im trying to get the menu open and close but it doesnt work. I did follow a tutorial on youtube.. Im a beginner and not good at javascript.. Here is the code for the whole site: <!DOCTYPE html> <html> <head> <title>My site</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * { box-sizing: border-box; } .row::after { content: ""; clear: both; display: table; } body { margin: 0px; padding: 0px; color: black; text-align: center; background-color: white; background-image: url(…

Hi everyone, I am creating a portfolio section on my website and want to make a showcase with my website projects displayed on different screens. I have tried to download a transparent png of monitor and phone and then pasted in my screenshots of the site but it doesn't look as good as examples I find online. Is there a tool/website that lets me put in an adress to my website and then it will show how it looks on different screens, which I can then download as an image? I have searched but not found anything. If not, how are you creating these nice showcases? Ps. It doesn't really have to be different devices, just a monitor could be enough in this …

I have coded a small image gallery with a popup [of an image], but now I have to save the user choice of image(s) and email address and store both on screen. Moreover, I have been told to store the popup image(s) and the email in an array; I don't know how to add the popup image to an array. My codepen of the project. https://codepen.io/aaron_1986/pen/VwdvqWB

Hi 😊Is this a good place to start with asking for help with regards a responsive website template that I bought that isn’t really doing what I want with a gallery page specifically. I have a basic understanding of web design and have tweaked stuff within it to get what I want but I’ve been advised that there is a lot of unnecessary JS involved which isn’t helping especially if JS is disabled in a browser and that the general rule of building a site is to start with basic no JS and once it’s works as should, then JS is added as an enhancement to keep it SEO friendly.I really like the layout and look of my site but I want it much less complicated and it’s so important to ge…

Hi there, I am trying to remove controls from vimeo videos. Adding &controls=0 no longer seems to work. It seems this is achieved now by accessing the videos via api. I have no experiene with api's. I understand how to create an app in vimeo and generate the token, and add the following code to display the video's, but there's a chunk in the middle - I assume where the site retrieves the data from the api - that I am missing. <div id="made-in-ny"></div> <script src="https://player.vimeo.com/api/player.js"></script> <script> const options = { id: 59777392, width: 640, loop: true }; con…

Hi There, I have a php script (website), which is mobile ready and gives me this problem: When I upload my logo to the script, everything works correct on desktop resolution. But visiting the website on mobile (or zooming in 170%+), results in the bug that the site content is being moved aside by the logo. Please have a look at my uploaded image. Do you have any idea how to resolve this?! Thanks a lot, Andy

Hi! I've recently changed my website but I'm having a slight issue with the way video is displayed. I've knocked this up myself, so please excuse my confident-idiot mistakes... I use looping videos on the site, and usually they work fine - except when I resize the browser window in Chrome I get a 1-pixel outline around the videos. At full size it's fine, at minimum size it's fine, but inbetween these sizes the videos develop this 1-pixel outline in yellow (the background colour). There's no such issue with images and I can't replicate the problem in Firefox. https://frankmansfield.co.uk/projects/ywt.php I've tried searching everywhere, but either …

The Missing manual says how much richer and better is Jquery than just js. Maybe, so I am trying it. Specifically I want to have a dialog box that displays on opening the page (achieved) and accepts and passes the single input string back to the calling line (failing). The js function "prompt" does exactly what I want except it is not pretty - but it is only one line. So my question is how to customize the dialog box, including changing the background, etc of the OK button and changing the text of the dialog box message depending on a condition? Thanks for any pointers you can give.

Hi everyone im trying to show and hide(toggle) a div containing text when 2 buttons are pressed.. e.g. if your going on the london underground and you select a route going from victoria to bond street .. you click the button called victoria and then click the button called bond street, it needs to display a div which contains the full route on the webpage.. im asking if anyone knows how to do this as im really struggling with this soo much regards zed

I would like to create a full width header image that changes in size by percentage according to device. It is an incremental zooming-in-like effect upon one image instead of having to use separate ones of different pixel sizes. What is the best way to code this effect in CSS and HTML? Working in Dreamweaver, I have tried a number of approaches with no success. With the code below, a narrow strip (only) of the bottom of the image shows in DW the design view div. So the image path is correct. However, no image at all appears in the browser preview. Any help would be greatly appreciated. <div class="header-image"> </div> .head…