CSS, short for Cascading Style Sheets, is a language used to control the presentation of HTML and XML documents including colors, layout and fonts.

learn more… | top users | synonyms (1)

4
votes
1answer
30 views

CSS & JS piechart

I made a pieChart function thanks to the main CSS properties rotate:xdeg, border-radius:100% ...
0
votes
0answers
22 views

Image gallery with pagination using CSS, $_GET, and Bootstrap

I am relatively new to web development and I created an image gallery with pagination using the Twitter Bootstrap framework. Basically, I want to know if I approached creating an image gallery ...
-1
votes
0answers
22 views

Pure CSS lightbox effect with blurred background [on hold]

I cannot for the life of me figure out how to blur the darkened background without effecting my lightbox image. Any help would be appreciated HTML ...
-4
votes
0answers
29 views

Modern BIOS and Modern OS, what think about? [on hold]

I'm developing two major open-source projects and looking for opinions. More information in this quick note and in their respective repositories of projects: ...
1
vote
1answer
31 views

Making a conditionally visible page-up button

I wanted to make a button that goes to the top of the page but only appears when you're not at the top. There are probably libraries that already do this, but I wanted to make it myself and after some ...
3
votes
1answer
49 views

JavaScript Script/CSS Loader Plugin

I wrote a basic JavaScript plugin that allows you to specify what specific JavaScript files and CSS files to be loaded in, and in addition specify attributes for each file. To specify where to load ...
0
votes
0answers
16 views

Filtering potentially malicious user-defined CSS property values using ScssPhp

I have a script that allows stylesheet customization on a per-property basis. For example, I expose the "background-image" property for people to enter their own SCSS values to be entered in the ...
1
vote
1answer
68 views

Keep div fixed when it is inside it's container on scroll

The required behaviour is : The yellow span must be positioned relatively to viewport (position:fixed;) when it is inside the pink div. The height of yellow span ...
6
votes
1answer
45 views

JavaScript adaptation of 70s electronic game “Simon Says”

I programmed a web adaption of the game Simon for to improving my JavaScript skills. A live version of the results are here. I got two more ideas which I like to incorporate. Moreover, I'd like to ...
3
votes
0answers
66 views

Todo list with calendar

The app is a todo list with a three-day calendar. Users can add and remove lists and it's all stored in local storage. My aim was to use vanilla JS but I did use jQuery for the date picker. I'm just ...
2
votes
0answers
55 views

Simple minesweeper game in JavaScript

I created a simple minesweeper game as I am trying to get my hands dirty in JavaScript. I have tried to use the oops while doing this. I am posting 3 files: index.html minesweeper.js ...
0
votes
0answers
30 views

Responsive CSS implementation in SASS

I just started looking in to SASS. Mixins looked like a nice feature, so I made some simple ones to handle my responsive CSS: ...
11
votes
1answer
131 views

“Star Catcher” game

For fun, I have been working on this game I called Star Catcher. It's a very basic game where stars are falling and you try to catch as many of them in your bucket before you miss 10. It's a real mess ...
2
votes
4answers
75 views

Recreating Google homepage for learning purposes

Like other posters, I'm currently working on recreating Google's Homepage for The Odin Project. I'm new to HTML and CSS but I'm eager to learn and have been looking around for an answer, testing ...
3
votes
1answer
84 views

Calculator in HTML, CSS, JS

I am new to Javascript and HTML. I have written code for a calculator, so review my code and points out pros and cons in it. ...
5
votes
1answer
63 views

Slider with jQuery using bullets

I have a slider with 3 images and left/right arrows. If you click on them, the image changes. You also have 3 bullets below the images and the image changes depending on what bullet you click. I ...
3
votes
1answer
83 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 ...
0
votes
0answers
18 views

Dynamically change background image in the CSS during WordPress loop (media queries)

I currently have a carousel on my page inside a Wordpress loop. So as it loops through it changes the background image according to which post I am currently on in the loop. However, I want to use ...
1
vote
1answer
34 views

Angular Box Color Exercise

I have completed an exercise where there are 4 different color boxes and 1 main box below them that is blank, when you click on one of the colored boxes, the main box changes to the color of the box ...
2
votes
2answers
104 views

Popup function written in jQuery

I wrote a jQuery function to show a popup that can be draggable have multiple buttons etc. Demo How can I improve this code? I want to try keeping it light and simple but at the same time make it as ...
1
vote
1answer
50 views

Coffee webpage with laggy animation

Currently designing a homepage and from some initial tests users are experiencing lag. I'm using some Javascript to create a parallel effect as well as an animated "click to explore" loop. Not sure ...
3
votes
1answer
50 views

Personal portfolio template design

I recently finished the build a personal portfolio webpage project for a free Code Camp, here, I would be very grateful if anyone would be willing to offer any advice on the design of the website or ...
3
votes
2answers
49 views

“Pill” with thumbnail and link

I'm currently trying to display a list of movies with this pill-like elements. The code below works but I guess there is a better way or a way to use elements from the twitter Bootstrap. It also ...
3
votes
1answer
42 views

Dropdown function

Is there a way to simplify this JavaScript function any further? Having to input 4 variables just for a drop-down menu seems a bit ridiculous, and it is hard to keep track of the variables when I want ...
3
votes
3answers
103 views

Animated SVG pie chart with custom properties

I've made a small js/css/html module which purpose is to fill a pie chart up to a given percentage. Basically it could be used for instance as a filling pie chart that keep tracks of the amount of ...
5
votes
1answer
110 views

Bode plot filters implemented in JavaScript

The following code is my attempt to create an interactive bodeplot. I used JavaScript using d3.js, jQuery Mobile and math.js. The bode plot shows a lead lag filter in continuous time and several ...
1
vote
1answer
55 views

Tic-Tac-Toe game with jQuery

I am a beginner at web development and I write code as a hobby. Would you please critique this code? I created a Tic-Tac-Toe game using HTML/CSS and jQuery. I did it for fun as a personal ...
8
votes
2answers
478 views

A “C” shape of 7 boxes that turn green on click

Company name asks you to build a website with 7 boxes shaped like a c, which should turn green on click, and then when all are clicked, should turn red in reverse clicking order. ...
5
votes
2answers
220 views

HTML 5 form validation and form handling

Problem Statement Create one form having following fields 1) Email ( with html5 email validation). 2) Password (It should take minimum 6 charactors ). 3) Your project URL ( with ...
3
votes
1answer
72 views

Student registration form

Problem statement Create one form having registration and student login fields for course using HTML5 elements and CSS3 styling. Expected Output Solution ...
5
votes
2answers
77 views

HTML and CSS fullscreen landing page

I would like to know if this fullscreen page with image and overlay is written clearly. I'm afraid that those two empty divs (topOverlay, and topImage) are not correct. Someone told me that I ...
1
vote
0answers
47 views

Simple CSS selector parser [closed]

The code works, but I would just like to know if there's a better way of executing it. ...
6
votes
2answers
41 views

Hold a text input for 10s as readonly

Problem Statement Write a HTML page holding a form and a text field. Using JavaScript make the text field to accept numbers only. When a non-number character is entered through the keyboard ...
16
votes
4answers
666 views

Simon Says: is this too complex?

I took a class covering HTML, CSS, Javascript and for a final project, thinking of a previous community challenge, I created Simon Says. Going through my code my professor deemed it overly ...
4
votes
2answers
114 views

Hiding odd rows in a table on click event

Problem Statement Write JavaScript code hideOddRows.js that attaches to the button click event and hides the odd rows of the table when clicked. Expected Output When you click on "Hide ...
4
votes
0answers
58 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. Hoping someone can confirm I'm using the correct ...
6
votes
2answers
59 views

Drag and drop GUI with native JavaScript

Currently I'm engaged with implementing a Drag and Drop GUI. I've discovered that there a not many resources (tutorials, etc.) available. So I wrote this: ...
3
votes
0answers
32 views

Pageee jQuery plugin

I have recently written a jQuery plugin called Pageee. Pageee is a jQuery plugin to scroll through full pages automatically, by arrow buttons, or by dragging the page. I have now come to Code ...
3
votes
1answer
95 views

Social image sharing site with mobile-first, responsive layout

I am rebuilding the front-end for an application that I am building and have the content laid out the way I need. I would appreciate any suggestions on how to improve the structure, specifically the ...
4
votes
1answer
56 views

A closable footer bar with a floating info box

I wrote this page with the goal in mind of having a footer that runs along the bottom of the page that can be closed, and has a floating info box that appears when the footer is hovered over. I'm just ...
3
votes
0answers
45 views

Bundling CSS to speed up page loads

My goal is to make web page loading faster by bundling all the CSS files together. The web browser will then only have to load only CSS files. This will only run when the application is starting. ...
5
votes
3answers
290 views

Unordered list in HTML with animated list points

I had this idea today, but I don't have any practical usage for it right now. Any feedback or improvements welcome. Code is found at CodePen, and also presented here as a snippet: ...
2
votes
3answers
85 views

CSS animation via JavaScript

I call this animateElements function as part of an animation loop (inspired via Dave Gamache). Everything works as expected, but I would love to try and ...
1
vote
1answer
59 views

jQuery Responsive Carousel

I have developed a jQuery Responsive Carousel. When opened, the carousel in the browser and the Chrome task manager, I see that the memory usage of my page is higher than the rest of the opened tabs ...
3
votes
1answer
61 views

Fireworks animation causing high CPU load

This web algorithm is causing even newer computers to freeze with CPU spikes from 20% to 90%! How can I make it more efficient? EDIT: An idea is to somehow get rid of the filter:blur(); property ...
3
votes
2answers
59 views

My first simple formatted webpage

This is the first webpage I've ever made, besides simplified tests. My goal was to have a navigation menu on the left, an image in the top left corner with a header to its right, and a block of text ...
1
vote
1answer
41 views

Managing “active” and “rest” state for class name-based CSS animations

Started working with CSS animations and I'm wondering if there's a more elegant way to manage (with class names) when an animation is on or off. The general pattern I have is like this: ...
7
votes
1answer
57 views

Absolve me of my guilt: Dynamically creating spans that highlight on click

I'm working on a page that shows groups of users. The following JavaScript function is used to show more details about a user (such as email and login) when you click on their name. But there's a ...
2
votes
2answers
74 views

Gaming Website Index Page

I am updating my gaming website's CSS and I was wondering if I am on the right track. HTML: ...
4
votes
2answers
117 views

JavaScript Memory Game with Pictures

So, I have a memory game written, but was wondering how I could turn these letters in the cardSet into images (I have a set of images in an images folder within the folder containing this code, called ...