Angular 4 - Scroll Animation

I'm creating a webpage having full page width/height div's. While scrolling down I've two types of methods. Scroll on Click //HTML <a (click)="goToDiv('about')"></a> //JS goToDiv(id) { let element = document.querySelector("...
more »

2017-07-19 21:07 (0) Answers

Css scroll-snap bug iOS 10

I noticed a strange bug in iOS 10.3.2 with the css scroll-snap properties. Here's my css: #springBoard{ height: 100%; width: 100%; font-size: 0px; white-space: nowrap; overflow: scroll; -webkit-overflow-scrolling: touch; ...
more »

2017-07-19 20:07 (0) Answers

CSS animate border in and out

I'm using the following css to animate a border on hover: .item { height: 250px; width: 250px; display: block; background: orange; -webkit-transition: all .5s ease-in-out; transition: all .5s ease-in-out; } .item:hover { border: 8px ...
more »

2017-07-18 15:07 (6) Answers

Randomly add class to two divs

I have a two column red/black grid 50/50% and height 100% and had a script to randomize the appearance of both when loading the page, so left or right. I changed the code behind the two column grid a bit going from relative position and float left of...
more »

2017-07-18 13:07 (3) Answers

Execute the break; in SCSS

I have some code. Pug: div(data-counter="100") SCSS: $start: 100; $end: 20; div:before { content: attr(data-counter); animation: countdown 10s steps(1, start) forwards; } @keyframes countdown { @for $i from 1 through $start { @if $i...
more »

2017-07-18 08:07 (1) Answers

Outline not working properly on Firefox

I am trying to put some custom outline in order to reach some web accessibility suggestions. But I can't make with Firefox. This is how it looks on Chrome: And that icon is actually an anchor. On Firefox, it is only outlining the whole document,...
more »

2017-07-18 06:07 (0) Answers

How to count visible 'li' on a search list

The code below is for a simple search. Im trying to count the visible 'li' on the list and display the total in a div "totalClasses". and then when the user search for a class update the total with only the visible classes(li). I have tried doing th...
more »

2017-07-17 21:07 (8) Answers

Dim entire screen except a fixed area?

I want to create a tutorial which will lead the user exactly where to click. I'm trying to cover the entire screen with a <div> which will dim all elements except a specific region which is in a fixed width, height, top and left. The problem i...
more »

2017-07-17 14:07 (6) Answers

Leave dot onclick on image

I would like to leave a dot on my grid image based on wherever I click. I've got the general concept down but unfortunately my dot keeps appearing slightly higher than where I click. How would I go about adjusting this? https://jsfiddle.net/dr0emvkr...
more »

2017-07-16 23:07 (2) Answers

iOS Safari Scrolling issue with CSS

I'm currently working on a Web-App. In one case a user can pick some content and put it into a overview. Once this content is there he should be able to scroll through it. This div has the correct parameters for all browsers except for the iOS Safar...
more »

2017-07-15 22:07 (0) Answers

Generate Random QR Code OnClick Using qrcode.js

I am using qrcode.js for generating qrcode. I want to generate random QR code every time I click into add new tab instead of add new qr code. I created a code for a random number but when I try to add onclick function it add new not to random it. JS...
more »

2017-07-15 07:07 (4) Answers

Google's Open Sans font weight

I am using Google Open Sans fonts in an html page via: <link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css"> Only the font-weight: 600; makes the font bold. Other values don't seem to make a differen...
more »

2017-07-15 05:07 (1) Answers

Partial Password Masking on Input Field

So I need to mask a SSN# input field, lets say the ssn is 123-45-6789, I need to display ***-**-6789 (real time as they enter each digit) but I still need to retain the original value to submit. I got to the point where I can do that if the user st...
more »

2017-07-15 02:07 (2) Answers