Frontend
HTML, CSS and JavaScript - Having trouble with CSS? Post your question here. Find solutions & discuss stylesheets, hacks and techniques.
13,911 topics in this forum
-
I am learning about floats at the moment, and how you can float an element either left or right. But what if I want to set 3 or 4 columns side by side? Should I use tables in such a case or is this bad practice?
- 6 replies
- 1.5k views
-
Dear Gurus, I'm working on a website but am learning as I go. I'm not looking for the code but just some pointers and I'll work out the details as I go along. I just wanted to make sure I was going in the right direction before I get stuck. In essence I'm creating a gallery to load a number of images. I have a 2 dimensional JS array that contains and image and some data relevant to it eg: Pic1.jpg, url, caption, alpha Pic2.jpg, url, caption, alpha There'll possibly be 100 + images. I was intending to use JS to have a loop to change the html of a containing div to loop through each image and dynamically create a new div for each displayed imag…
-
- 11 replies
- 1.5k views
- 1 follower
-
-
I am just curious and want to know for myself what to use as font-size units.
- 8 replies
- 1.8k views
-
Hi I'm trying to get an automatic year to display on the footer of my bootstrap website, so it always shows the current year. I've seen quite a few examples on the web and they seem really simple, but clearly I'm an idiot, because I can't get any of them to work. I'm probably doing it wrong. Can anyone explain how to get the year to display automatically on my html-built website? Keep it simple, please 😀 Mark
- 2 replies
- 1.1k views
-
Are -moz and -webkit still used? What is -webkit for?
- 2 replies
- 1.7k views
-
Hello friends, I was .. following a simple font size changing tutorial but everytime i click the bigger or smaller link the paragraphp fonts ... of increase or decrease for an instant and againt returns back to original size here is the code index.php <!DOCTYPE html> <html lang="en-Us"> <head> <meta charset="UTF-8"> <title>Jquery id selector</title> <style> </style> </head> <body> Font size:<br> <a href="" id="smaller">Smaller<a/> <br> <a href="" id="bigger">Bigger<a/> <p>This is some text</p> <p>This is…
- 2 replies
- 1.4k views
-
Hi, I'm trying to build a layout which consists of one parent row with 3 child divs within it. The 3 child divs have a different image which I need to fit as a background image and they need to be responsive also. So on the child divs I set the over flow to Visible. And the same Visible overflow on the parent div. As you will see, the background images don't scale responsive as you reduce the size of the browser window - until they hit the media query. And the overflow for the parent div (with the yellow border) doesn't seem to be scaling in height to hold the child divs. Here's the code I'm using: <!DOCTYPE html> <html lang=e…
- 4 replies
- 2.5k views
- 1 follower
-
... apart from two completely different sites linking to each other. HTML / CSS / Vanilla JavaScript where possible. Or if you even tell me a better search term for finding tutorials on this. Thank you in advance!
- 8 replies
- 1.4k views
- 1 follower
-
Say for example I go to pexels.com and get a photo, it could be MASSIVE and take forever to load on my site - is there an online tool to optimise it for web that anyone can recommend or what do you usually do? Thank you in advance for your help and a nice weekend.
- 2 replies
- 1.1k views
-
Hello everyone and happy new year. I have a one page website, top right is the menu HOME, ABOUT, PORTFOLIO, CONTACT ME. The site is in black and white. When the page is loaded, Home is in a white text, black box background, and all other menu items are black text white background. I would like that when a visitor clicks on any of the other menu items OR scrolls to them, that the 'active page' turns to white text on a black box background, and the other 'unselected' menu points are black text on white background. What is the best way to do this? Just HTML and CSS would be great but I am not sure if it is possible - I am reading about HTML5’s classL…
-
- 1 reply
- 1k views
- 1 follower
-
-
Hey peoples, I've encountered a problem with a site i'm building that i'd highly appreciate some help on! I recently added a new Carousel section which had white spacing above & below, I removed the space below using: .carousel-heading {display:none!important;} But have struggled finding a class for the white gap at the bottom. Can anyone advise? Many thanks!
- 5 replies
- 1k views
-
Having a few issues with a CSS Button effects not working across browsers. It displays as I would like it in Chrome, but not Firefox. Can't seem to find the root of the problem. Here is what I have. Fiddle <a class="soft">Button</a> a.soft { display: inline-block; font-family: 'Varela Round', sans-serif; padding: 2rem 3rem; font-size: 1.25vw; box-shadow: -10px -10px 20px 0 #E6E6E6, 10px 10px 20px 0 #ABABAB, inset 10px 10px 20px 0 #E6E6E6, inset -10px -10px 20px 0 #ABABAB; border-radius: 50px; transform: box-shadow 1s ease-in-out; background-color: #666666; -webkit-background-clip: text; color: transparent; text-shadow…
-
- 0 replies
- 1.4k views
- 1 follower
-
-
on this page - https://pskiinteisto.fi-s.seravo.com/ - I have an svg added as a pseudo after element but at certain screen widths (most noticeable on desktop) a line appears at the bottom. colouring the hero background red temporarily in inspector producs a red line so i think it could be a rounding up and down of the svg to either cover or reveal a sliver of background. has any one had this before and what can i try and do to fix it? position the element a pixel or so down? use clip path instead?
-
- 0 replies
- 1.1k views
-
-
I have several span tags inside a div. The spans contain anywhere from 1 to 3 words. How do I keep all of the words in a single span on one line? If it is too long to fit, I need it to all be on the next line.
-
- 0 replies
- 963 views
-
-
https://www.youtube.com/watch?v=sZS-7RX_c7g I just saw the above video with some interesting new CSS properties for styling underlines, but 2 of them don't work in Chrome (text-decoration-thickness and text-underline-offset) while 3 of them don't work in Firefox (the above two plus text-decoration-skip-ink). Also, my VS Code editor doesn't recognize the properties that Chrome doesn't recognize, either. Yet, in that video, these properties worked!
- 4 replies
- 1k views
-
Greetings and salutations. I need a bit of help with a menu on a website. I have added a new section to the website menu and it has dropped down below the level I want it to appear on. How do I get it all on one line?. Many thanks in advance.
-
- 9 replies
- 1.8k views
- 1 follower
-
-
I am developing a website at http://choir-stmaryssaffronwalden.org. Every request to this URL is forwarded by framed forwarding to my web server at sylvesterbradley.org. Links on my web pages don't work. For example, if you go to http://choir-stmaryssaffronwalden.org and then click the Help on this Page button, it correctly goes to the Help page. If you then click on the Login link in the breadcrumb trail, which is a link <a href="http://choir-stmaryssaffronwalden.org/index.php">Login</a>, it just sits there and doesn't do anything. If I enter the linked URL http://choir-stmaryssaffronwalden.org/index.php into a new browser tab, then it works fine. Can y…
- 12 replies
- 1.8k views
- 1 follower
-
hi all, I have a bit of css code and each div child needs to have a property. Hence it looks like this. It goes from 0 all the way to 19. div:nth-child(0) { transform: translate3D(0%, 0%, calc(var(--itemZ) * var(--cameraSpeed) * 0 * -1px)); } div:nth-child(1) { transform: translate3D(0%, 0%, calc(var(--itemZ) * var(--cameraSpeed) * 1 * -1px)); } div:nth-child(2) { transform: translate3D(0%, 0%, calc(var(--itemZ) * var(--cameraSpeed) * 2 * -1px)); } [...] div:nth-child(17) { transform: translate3D(0%, 0%, calc(var(--itemZ) * var(--cameraSpeed) * 17 * -1px)); } div:nth-child(18) { transform: translate3D(0%, 0%, calc(var(--itemZ) * var(--cameraSpeed) * 18 * -1p…
-
- 1 reply
- 964 views
-
-
Hello i am junior web designer. Ui graphs is confusing me like they look insane in design apps such as adobe xd/ps but is is possible to turn the Graph into code? Literally the same! Can i turn the graph in the pocture below into code? And make it the same?
-
- 2 replies
- 1.4k views
-
-
Hi all, I am having a bit of a problem. I have a script that is for nested modals, that when a link is clicked it jumps straight to an anchor. It works fine. However when styling, I would like to have a fixed header as the ".content" div scrolls to the anchor. When ".content" has a height of 80vh it looks fine, but the script doesn't scroll to the anchor. When ".content" has a height of 80% the script works, but the fixed header doesn't stay fixed and scrolls with the ".content". How can I have the script work, but keep a fixed header. Thanks HERE IS A FIDDLE <a href="#contributors" class="element-item bailey">Bailey</a&g…
-
- 0 replies
- 1.1k views
-
-
Hi all, I am trying to create a link that when clicked, a modal pops up, and also jumps to an anchor in it. At the moment you will see i have some code for the pop up (which is configured for a set of nested modals) hence it is not your standard setup. When you click on the links twice, they work. How can I get it to work as is, with one click only. Thanks HTML <a href="#contributors" class="element-item item1">item1</a> <a href="#contributors" class="element-item item2">item2</a> <!-- The Modal --> <div id="contributors" class="modal"> <header><span class="close">×</span><…
-
- 1 reply
- 980 views
-
-
I am having an issue where a modal isn't triggering if it is wrapped in an <em> tag. In my example, if you click in the "normal" font-style part of the link, it fires properly, if you click where the italics are, it won't. Any ideas? JS $(function () { const openModals = []; $('.modal-button').click(e => { e.preventDefault(); $(e.target).closest('.modal').add('body').addClass('open'); openModals.push($($(e.target).attr('href')).show()); }); $(window).add('.close').click(e => { e.stopPropagation(); if ($(e.target).is('.modal, .close')) { const closing = openModals.pop().addClass('modal-content-active'); se…
-
- 1 reply
- 1.4k views
-
-
Hi all, I've adapted some code from Desandro's "hideReveal" plugin for Isotope: https://codepen.io/desandro/pen/drpJK/ But I am trying to add a search functionality to it, and I am having some trouble. Could someone help me out? Here's what I have! Thanks HTML: <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.6/isotope.pkgd.min.js"></script> <div id="filters" class="button-group"> <button class="button is-checked" data-filter="*">show all</button> <button class="button" data-filter=".metal">metal</button> <button class="button" data-filter=".transition">transition<…
- 12 replies
- 1.7k views
- 1 follower
-
Hi all, I am trying to add some functionality to this setup. As you will see, it is an attempt to make a nested modal setup, that on every click on a modal link, it recedes and blurs everything behind the modal. I have managed to make it work, but I am trying to do two things: 1. make everything fade in and fade out. As of now, the background blurs and recedes slowly, but I would like to control the speed of the modal opening/closing. 2. make the ESC key close the modals. This is proven difficult, as they are nested.... Thanks all HTML <div id="content"> <div class="container"> <a href="#myModal1" class="modal-…
-
- 2 replies
- 907 views
-
-
Hi, I want to remove the footer of the wordpress theme blossom pin this (child theme of blossom pin) via the footer.php file. However, when I delete the content in the footer the website is not displayed correctly anymore (for example font changed). Removing the footer with CSS by using the 'display none' function is no option for me since I am worried that this has a negative effect on SEO. This is the code of the footer.php file: <?php /** * The template for displaying the footer * * Contains the closing of the #content div and all content after. * * @link https://developer.wordpress.org/themes/basics/template-files/#templ…
-
- 4 replies
- 1.4k views
-
-
Good day Frontend friends! Can you please help me about setting up gulp 4.0 and react 16.9. I have an existing reactjs project and I am trying to implement gulp 4. I am experiencing this error. AssertionError [ERR_ASSERTION]: Task function must be specified This is my gulpfile.js
- 3 replies
- 1.2k views
- 1 follower
-
Is jQuery dying? Or is there still great future ahead for it?
- 3 replies
- 1k views
-
Hello! I get “HTML1521 unexpected /body or end of file” warning in Edge browser. Is it something to worry about or just disregard as non-issue? Here: https://apostasia.ru/ru/
-
- 1 reply
- 1.3k views
-
-
Hello, I've been learning Javascript and as a bit of practice, thought i'd create myself a dropdown navigation menu, that works on a 'click' rather than hover. I've created the code below (which doesn't work) and i was wondering if someone could explain why so i can see where i've gone wrong. I can get the dropdown to open, but when i added the code to close the dropdown, the dropdown menu doesn't even open. I'm hoping someonce can point me in the right direction so i can see where i'm going wrong Here's the HTML... <nav class="main-nav"> <ul> <li><a href="" title="Home">Home</a></li> <li class="menu-item…
-
- 0 replies
- 1.1k views
-
-
document.getElementById ("readM").addEventListener ("click", function (){ $.ajax({ url: "ajax/updateReadMessage.php", type: "post", dataType: "json", data: { msgID: $('#readM').val() }, success:function(result){ console.log(result.abc); } }); }, false); Hi there. So I havn't used Javascript or really much programming at all in the past 2-3 years. I am trying to build myself a Messages system though for an idea I'm working on! My problem is however, that I can't access the correct data from this code above... The main parts are: 1) I have the ID "ReadM" which i access at the beginning. Now I have to say, i have multiple of these "Read…
- 4 replies
- 1.4k views
-
Good morning. I have a trouble with a website created by me. There are two containers with different widths (expressed as %) with different numbers of vertically positioned pictures. The first and the last images in columns should be on the same height. I want to express height of space between pictures as a percentage too. How to do it?
- 4 replies
- 1.3k views
-
I see some references made about HTML6 and CSS4 on the web, but I can't make out whether these versions are already here. Are they?
- 5 replies
- 1.4k views
-
I can't really confirm because there appear to be no developer tools for Firefox/Chrome mobile, but it seems that a function I have tied to the hashchange event keeps firing when the user scrolls after the initial time. Does anyone have any experience with this? My current solution is to use a counter so the function only runs the first time, but this is a problem if the user wants to move to that position in the page again, since it won't fire then.
-
- 0 replies
- 1.2k views
- 1 follower
-
-
Hello! I have a WARP6 Joomlaplates' JP-X2 template and I'm on a latest version of Joomla. I used to have a big bg image of a lady on every site page. So one has to scroll down to see the actual pages' content. So I decided to leave the lady bg image just on a main page and to remove it from the other pages. In backend of Joomla in Template Manager in current template's settings I have a way of assigning a bg image just for a main page. So now it's there (and it's fine!), BUT... on the rest of the pages I see a huge and ugly white space where the lady's image used to be. And I don't know why white space is there and how to get rid of it. Here's the link to the site: …
- 1 reply
- 988 views
-
Hello! In some browsers I get a Mixed Content error because there’s a call for style.css file and that file will be supposedly loading via HTTP protocol and that’s what some browsers try to prevent. It’s this line that triggers the error. And on line 46 in a source code of main page you see this: <link rel="stylesheet" href="css:style.css" /> I assume that something within a template attempts to load that insecure CSS file (which I’m not even sure that exists in my Joomla tree). I don’t know where to find the source of this call and how to stop it. POSSIBLY it’s in templates/jp-x2/layouts/template.config.php file on line 103 there’s this: $this['asset']…
- 2 replies
- 1.2k views
-
Hello! I’ve got a small JS-based music player on my homepage in its upper-left corner (just above the logo). And it works fine in all browsers, except IE and Edge. In those it shows NaN where the song’s total time is supposed to be after the page loads. But if you try to load my site in FF or Chrome, then it’s fine! The URL as you can see is https://apostasia.ru
-
- 6 replies
- 1.1k views
- 1 follower
-
-
https://lioriclionheart.blogspot.com/p/independence-day-2019-photogallery.html this is a photo gallery that i made in blogger with a simple table i used this <table style="width:100%"> <tr> <td> </td> <td> </td> <td> </td> </tr> </table> as a table code nothing more. but when i watch from mobile devices or when the browser changes size the pictures sort of overlap each other as shown in the picture. could you help me please
-
- 0 replies
- 942 views
-
-
Hello! Is there a way to use JS to bypass a recent limitation in modern browsers to autoplay music? I activated an autoplay in a Joomla music player plugin and I also used JS code via Custom HTML module And I get those errors in browser's console (see attached print-screen!) <script type="text/javascript"> var source = 'https://apostasia.ru/1.mp3'; var audio = new Audio(); audio.addEventListener('load', function() { audio.play(); }, true); audio.src = source; audio.autoplay = true; </script>
- 1 reply
- 972 views
-
Hey guys I am having real trouble finding a solution to my problem. Basically I want to create this nav bar https://www.w3schools.com/howto/howto_js_responsive_navbar_dropdown.asp but I want to be able to close the menu by pressing the same title that opens the menu. I dont want to use jquery just vanilla is. Any ideas ?
-
- 1 reply
- 1.6k views
- 1 follower
-
-
Hello. I'm new to the forum and to web development. I'm working on my first Wordpress website and I've come up against an issue that I'm finding difficult to resolve. I'm adding a newsletter subscription form on one of the website pages which links to the website called Revue, but the form doesn't work. I pasted the shortcode on the page and tried to fill up the form and subscribe. The "subscribe" button clicks but nothing happens. I don't understand why this is so. Is this fixable? Or is there an alternative I could work with? Any help will be much appreciated.
- 9 replies
- 1.8k views
- 1 follower
-
A site I am developing requires categories, topics and statements; a category can have many topics and one topic can have lots of statements. Users are limited to the statements they can see; but any interrogation of the system will require knowing the topics and categories for each statement. They want a menu system similar to the expandable side menu used by Windows Explorer. Do I interrogate the database and pull all the data, so the JS menu can simply reveal using the collected data (time consuming if lots of topics) or is there a better way? I can see that I cannot get JS to interrogate the database directly; that method would be a serious risk to…
-
- 0 replies
- 1.1k views
- 1 follower
-
-
Hi all, Just trying to create a modal that zooms and blurs the background back. Based on avgrund by hakim https://lab.hakim.se/avgrund/ Now it has nesting modals also with the help of @deathshadow over at codingforums. Here is the current state: https://jsfiddle.net/postcolonialboy/1jz0q3xk/19/ Now, what I am trying to do is: by clicking the nested modal link, everything should be pushed back again and blurred - like simulating receding layers/depth of field. I've attached an image to explain this: https://ibb.co/LNB83jm Thanks
-
- 0 replies
- 989 views
-
-
Hi all, Just trying to create a modal that zooms and blurs the background back. Based on avgrund by hakim https://lab.hakim.se/avgrund/ I extended it to get several modals to work. See fiddle: https://jsfiddle.net/postcolonialboy/9jq84p1h/144/ Could anyone please help to get nested multiple modals to again zoom and blur everything further again on popup? Thx
-
- 0 replies
- 1.2k views
-
-
I want to inquire about this website https://bluebrand.net/ is on the WordPress platform and we use a paid template, but the images on the main page are very large and thus cause many problems with the speed of the page and the time of uploading So what is the solution to reduce the size of these images without minimizing their quality because cutting them through CSS causes the lack of image quality significantly
-
- 3 replies
- 1.1k views
- 1 follower
-
-
footer text in this site https://www.putkitutka.fi splits really funny with the telephone numbers but only in safari- bit harder to figure out because i only have occasional access to safari on my wife's ipad at home any safari users any idea why this is happening?
-
- 3 replies
- 1k views
- 1 follower
-
-
- shopify
- ecomerce
- developers
- backend
-
Tagged with:
Hi!!! I work for a leading national and global shopify development business in the heart of Birmingham. Currently I have roles open for Full stack developers willing to work as front/back end devs for a fantastic company. You can get in touch with me directly at- joe-hemming@eastsideco.com
-
- 0 replies
- 1.1k views
-
I have tried everything I can think of to use to get array names in a form name. Either I am using the php code wrong to execute them or how I'm putting them in just isn't right. I'll give an example. I pick out the songs each week at church for service. I keep all of the songs we sing in a database and I change the date we sing them. If I pick out 6 songs and change the date, I have to do it one at a time with over 100 forms and submit buttons. I'd like each song to have its own if where I have something like $date[1], $date[2] etc. Then when I submit it, it will change all with one submit. I have a different page that has many more pieces of data that I have s…
-
- 6 replies
- 1.9k views
- 1 follower
-
-
I've created this to get the size of several images I have in a directory.... $image = file_get_contents("$fileLocation"); $source = imagecreatefromstring($image); $width = imagesx($source); $height = imagesy($source); echo " width : ", $width, " $nbsp; height : ", $height, "<br><br>"; When it gets to an image with a name that has a space in the name, it gives me an error.... Warning: imagecreatefromstring(): Data is not in a recognized format in /setupdb.php on line 23 Warning: imagesx() expects parameter 1 to be resource, boolean given in /setupdb.php on line 25 Warning: imagesy() expects para…
- 2 replies
- 1.3k views
-
In need of a little help. I've worked out how to get my website added to peoples browsers as a "Top Site" but i'm failing to work out how to get my website added as a highlight. I've googled this several times and i've looked at the code for websites that automatically get added in the highlights and i cannot find code that gets a website added as a highlight. I can visit a website time and time over and it never gets added as a highlight, i can visit another just once and there it is straight away. Are these highlights added by firefox as "Pay Per Click" links????? Click on a highlighted website and Mozilla gets paid?? Or am i missing something?
- 3 replies
- 1.3k views
- 1 follower
-
Hello all! Okay so I've been tasked with finding an example of where various quotes from someone appear on screen, one after the other, from a batch of such quotes that are selected randomly. The twist in this tale is that I have NO KNOWLEDGE of designing for the web but I've been asked to find an example so that the actual designer has something to work from... Is anyone able to help? Thank yoooooooooo! Liam
-
- 2 replies
- 1.1k views
-
