CSS, short for Cascading Style Sheets, is a language used to control the presentation of HTML and XML documents including colors, layout, and fonts.
8
votes
2answers
2k views
Is my use of CSS inheritance clean enough for these sprites?
I have a set of links with background images on this CodePen.
I am seeking feedback to see if I did this the most optimal way. For example, I made a sprite so that I can just load one image. And I ...
0
votes
1answer
17 views
Keep main content scrollable but not the body
For a template such as:
I'm using the following approach
Get the height of the viewport via javascript (Let's say 500px)
Deduct the header and footer height from it (Let's say header and footer are ...
1
vote
2answers
37 views
Composing a CSS transformation
I have a function that creates a css transform property string
based on some global variables. This string can be copied later by a user, so I would prefer to keep the output short.
This is my code:
...
1
vote
1answer
25 views
Display related images based on text name
Instead of "Black and Green" text, We are displaying "Black & Green" images with help of below code.
What we want is this concept should work for all colors, for that one solution is i need to ...
2
votes
1answer
63 views
My grade calculator with special weighting
My school has a special 65% formal 35% informal weighting, so I made something to find what your grade would be if you added or ...
3
votes
0answers
32 views
Inline Purchase Details
I'm not good at all with CSS, but I try! The following code works (demo here), but I'm sure that can be improved.
HTML:
...
4
votes
1answer
105 views
Raw filter with ternary operator for html class attribute
I've been trying to figure out how to stop Twig escape using the following code, which I feel is a little nicer with the succinct ternary operator.
I hope someone can confirm I'm using the correct ...
0
votes
1answer
24 views
Changing placeholder text with CSS only
I am building one of those contact forms that are conversational. I have code that works but I don't think it is optimal (at the bottom). The form looks like:
The code is live on this codepen
The ...
7
votes
2answers
926 views
Front page for an e-commerce website, with a simple animation for the search field
I've been using CSS and HTML for a while and I'm trying to start to use better methods of coding. I've tried my best not to hack anything. Could anyone let me know how I'm doing at the moment in terms ...
3
votes
1answer
3k views
Custom dropdown menu using jQuery
I have written a custom drop down menu handler using jQuery because I felt that the native drop down didn't fit my UI. I have taking into consideration the native way of going through a drop down box ...
3
votes
2answers
382 views
3
votes
0answers
2k views
File input control with rounded buttons and styled textbox
We have orange rounded buttons as a standard on our site. For our purposes, we switched everything over to use an anchor tag, instead of input type=button. The exception to this was the File Upload ...
7
votes
1answer
78k views
CSS and HTML5 for this fixed header on scroll
When I had to create a fixed header on scroll, I found a few examples on Stack Overflow but they were terrible in the sense that they relied on a fixed page height. Have a look at what I created which ...
5
votes
2answers
245 views
jQuery toggle script
I have been working on a toggle script, but I find myself repeating my code. Is there a way of combining it all?
...
6
votes
2answers
5k views
Injection with Chrome extension
I am building a Chrome extension that injects a small overlay in to all websites using a content script. At this point all the injected elements do is sit in the bottom left corner. It has two buttons ...
2
votes
1answer
568 views
Resizeable HTML
I am generating a content bar with jQuery, that can be inserted into any webpage. It is a <ul> with two smaller lists within it. Those two minor lists have a ...
4
votes
1answer
257 views
Converting <li> tags to horizontal responsive barcharts
I am writing my first jQuery plugin that converts li tags to horizontal responsive barcharts. I am looking for some feedback and suggestions regarding the ...
6
votes
2answers
82 views
Nav slider needs to be smoothed out
I created this responsive jQuery navigation which will re-size when the pixels get < 500 px and display the mobile navigation, although when the browser resizes > 500px it runs the ...
4
votes
1answer
110 views
CSS3 Dropdown Menu (touch device or mouse compatible)
This may be rather basic, but I wanted to experiment and learn with some of the upcoming CSS3 techniques. I wasn't able to come up with an HTML/CSS only solution, and I had to work longer than I'd ...
1
vote
1answer
54 views
Social sites slider
I tried to make a social media slider with jQuery, HTML and CSS. This is available as a Fiddle.
Can I improve or debug any elements of it?
...
4
votes
1answer
59 views
Toggle menu under specified screen width
I've done simple toggle menu in jQuery which is capable of specifying a breakpoint, but I'm afraid my code is too complicated. How can I make it simpler?
I also have a question about performance of ...
2
votes
1answer
33 views
Extract rotation values from css string Javascript
I have the following function that takes out the rotation values from a css string and returns them as an array.
...
7
votes
0answers
67 views
A vanilla JavaScript library for typesetting pseudocode in HTML documents
I have this plain JavaScript library for typesetting pseudocode in HTML documents. (See the documentation for details.) (See the GitHub repository - broken as of now.)
Source code
algotype.js
<...
3
votes
1answer
350 views
JavaScript implementation of a TODO manager
I was asked to create a TODO manager using JavaScript and CSS. I did not get a good review on the code nor specific comments on how to improve it.
Can someone here help by give me tips on what is bad ...
3
votes
0answers
223 views
HTML5/CSS live Validation w/jQuery
I've been working on a live form validation project, initially I intended on finding a way to solely use CSS for said validation but it quickly became apparent I would require some jQuery to get it to ...
0
votes
3answers
41 views
Vanilla JS mouse events on dynamically created elements
In terms of performance, what is the best way to bind mouseover/mouseout event on dynamically created elements?
This is what I have but I'm not sure it is ok for performance:
...
3
votes
1answer
42 views
Sometimes-sticky HTML element
I am working on a sticky element that on certain point when the user scrolls down it turns into a relative element so it's not a sticky element anymore, only when the user scrolls to the top and ...
1
vote
1answer
56 views
Create bootstrap toolbar
I have created a bootstrap toolbar(navbar) which is working.
my question is, since this is my first time on this topic if there is a place for improvement ?
we are using some mock to enter some dummy ...
3
votes
1answer
38 views
Place div's of different heights in a responsive parent div
Can somebody help me with optimizing this code? I'd like to have some control about placement. Masonry doesn't do the job in that way.
What I have done now is to create some sets of columns. For ...
2
votes
1answer
30 views
Responsive video embedding
I figured out a alternative way to make embedded videos responsive and I like to have some feedback on it.
Would this be considered a hack or just bad coding to add a extra piece of html to make this ...
4
votes
1answer
52 views
George Washington Carver tribute page
Yeah, it's another person wandering through from freeCodeCamp. Sorry.
That aside, I've got a tribute page to George Washington Carver, developed as a project for the above. I'm generally happy with ...
1
vote
1answer
790 views
Close modal and open new modal
I am trying to create a script that shows my login modal on page load. I have a button that opens the register modal and closes the login modal if clicked.
Here is the script I am using:
...
4
votes
1answer
1k views
jQuery File Tree Toggle
I am making a web app that will have a "my files" area and to do so I am writing my own html and jQuery to control the opening and closing of each folder (or ul li)....
1
vote
3answers
7k views
Adding fade to jquery background position animate
I've just implemented a background animate on some social media icons where the image goes from grey to color on :hover.
I wanted to know if there's a better way ...
3
votes
2answers
92 views
.hover() for fading effect
Is there a better way to write the JS for this? I'm asking because I read from somewhere that using .hover isn't recommended. Also, if I move the mouse in and out ...
3
votes
1answer
300 views
CSS Animation Card Flip
I've made a card flip with CSS keyframes but instead of flipping clockwise and then flip counterclockwise to it's original position, I've two separate keyframes that will cause it to rotate in the ...
2
votes
1answer
612 views
Convert JavaScript to CSS media query
I'm running into page performace issues and I believe this block is causing the biggest slowdown:
...
2
votes
2answers
8k views
Toggleclass for mimicking certain Twitter tweet behavior
I've created this fiddle to demonstrate something I've been working on. I've been trying to mimic the behaviour of Twitter where if a tweet is expanded, the border-radius and margins of the previous ...
5
votes
1answer
54 views
Change the background color of each section of the page when the user scrolls
I want to change the background color of each section of the page when the user scrolls. The code works but I feel like it's too inefficient
...
-3
votes
0answers
12 views
Can I ask to check my code here? Or did I get this wrong? [migrated]
If so, i will post some of my website mr2ndopinion.com. I'm looking for peer help to improve the experience of the site, i want it to be professional. Unlike my video's which are mostly made for ...
2
votes
1answer
96 views
jQuery Modal Plugin
This is my first attempt at a jQuery plugin, which is a simple modal window. I'm keen for feedback of whether I've got the principle correct, the usability of the plugin and any improvements that ...
2
votes
2answers
334 views
Animation that cycles through background colors
I am doing a background image animation using the function. It works, but I think I am doing more coding than what it requires. Can anyone please help me to minimize it?
Don't recommend the CSS ...
12
votes
3answers
19k views
Calendar in HTML + CSS + JS
As I'm new to HTML + CSS + JS I've been building a calendar (which I think anyone can use as a basis) but would like to get your suggestions on how I could improve my code specifically from the ...
1
vote
0answers
56 views
jQuery plugin for dropdown with multiple select
This is my first time creating a jQuery plugin. As there are many tutorials for jQuery plugins, I'm not sure if my code correct.
This is my first draft for my plugin, it is working but I haven't ...
3
votes
1answer
91 views
JavaScript to play and replay CSS animations on load and scroll
The following plays and replays CSS animations on load and scroll.
It works but I'm wondering if there is a better way to write this, so it's cleaner and performs better.
...
2
votes
1answer
43 views
Fitting multiple images in a given width
I was looking for a function which would take the overall width, max height, min height parameters as the input and fit multiple images in the given overall width adjusting their width.
For an ...
2
votes
1answer
108 views
React beginner exercise: Build a base arithmetic calculator
Exercise assignment:
Build a calculator with React which can Add, Subtract, Multiply and Divide.
See image below for reference
Give it whatever design and colors you want
Each text field should have ...
4
votes
1answer
23 views
Positioning a container next to its menu
I'm a beginner in CSS and need help with a suggestion.
I'm working on a project, in which I managed to position container_main right next to ...
1
vote
4answers
164 views
Positioning a tooltip relative to various kinds of elements
I am trying to simplify the following massive conditional statement but have no idea how to. Does anyone have suggestions for it?
...
13
votes
3answers
979 views
Using a navigation menu to help keep material organized
I'm working on a personal project to keep different snippets/examples/small projects of mine organized. I want to make the most of my page width, so I decided to write a navigation menu that slides ...
