GOOCODE - Find your code/scripts

0 A pager is one of the front-end components commonly used in web development. It can display data to users in batches. We know that frameworks such as Bootstrap provide very nice tabbed components, but your project may not need Bootstrap, you want to customize a beautiful tab for your own project, so please read this article.

This article introduces you to make a beautiful page bar with pure CSS, which can adapt to various mobile screens such as PC and mobile phone. Developers can download the source code and change the css code to customize the style of your own project.

1 On a page with video playback, sometimes we need to scroll the page to view video-related content information, such as profiles, related comments, etc., then when scrolling the page, the video player will leave the window area, this time we can use JS and CSS technology will The player toggle is fixed to the bottom right corner of the page.

Use jquery to detect the scrolling event of the window and switch the videoBox's class class to the appropriate position to hide and appear in the lower right corner.

0 We continue to provide the latest front-end javascript and CSS library resources for web enthusiasts. We will share some good front-end resources carefully collected this month, thank you for your continued attention to goocode.

Core UI is a Bootstrap4-based UI library for background management templates. It provides a highly customizable solution and control panel, and is very easy to integrate with the current popular front-end frames, such as: AngularJS, Angular 2, React.js , and Vue.js.

0 Here I have compiled a few fresh and better javascript and CSS libraries to learn about the latest and coolest front-end technology, and I hope to help us.

Whitestorm is a framework for developing 3D webapps and games based on the Three.js engine. It contains many common Three.js tasks, so it's very easy to set up the environment, create objects, add objects, and the official provides a very good one. The tutorial is as good as the react.

0 In the future, goocode will release some well-collected good front-end and back-end resources at the appropriate time every month. Keep an eye on the latest trends in web development. We will share the best resources that are most helpful to everyone. Please keep an eye on goocode.

Flexdatalist is a jQuery plugin for entering autocomplete hints. This library leverages HTML5's /datalist /, allowing developers to easily organize the values and properties of all possible select options. It can run multiple sections, refreshing UI, and is easy to use.

0 Core.css is a very small CSS reset and grid system. If your project is very small, you don't need to use a large css framework such as Bootstrap. You only need less than 4kb core.css, you can have css reset. And grid systems and responsive layouts.

Core.css uses a .row to represent the rows in the container. If you append a class with the largest width to it, it represents a fixed-width row, otherwise it is a full-screen row. .col represents the column in the container, which divides the width of the container into 12 columns, which is what we often call a 12-grid system. .xs-12 represents a column width of 100%. Similarly, .xs-3 represents a column width of 25% because it requires 4 .xs-3 to reach 100% of the 12 grid. Others are analogously from .xs-1 to xs-12.

0 The Meta tag is an auxiliary tag for the HTML language head area, which is located between the head tag and the title tag in the head of the HTML document, which provides information that is not visible to the user. It can be used for browsers (how to display content or reload pages), search engines (keywords), or other web services.
I am now front-end page development often used meta tag content compiled into the mobile side of the web development meta information for the needs of access.

6 Radio box and checkbox need to beautify it? Of course, the original style of the same century has been unable to meet the needs of our customers. Form a lot of controls need to beautify, we have to do with javascript landscaping, but also directly to the use of CSS to beautify, and today I introduce you to use pure CSS to achieve radio and checkbox landscaping.

We know that many of the ways to use JS to beautify the form controls are not very satisfactory, with the introduction of js and css, and some even use pictures and font icons, but also rely on jQuery, and complex, poor maintainability.

7 We know that loading small icons on the page there are many ways, such as we use more is css sprite background image positioning, is to integrate a lot of small icons to a large map, and then use CSS to locate the background. There is also a more modern way is to use font font icon, which uses the @ font-face principle to load the icon font library, and then call the icon.

Use css sprite is very convenient way, you can have a lot of colorful icons, and compatibility is good, but the drawback is that the icon can not be scaled, or the zoom will be distorted, another maintenance is not convenient, modify an icon on the whole picture to modify , And the positioning of pixels need to use tools such as PS to determine the location.

11 We browse the page to load a large size picture, the picture size is relatively large, we will see the browser to load the picture from top to bottom when the picture will be displayed until the picture is complete on the page, so that the image from the blank area To fully loaded process is more unexpected, the user experience is relatively poor.

We use the solution is to first load a small thumbnail, it may only 1K or so, and according to the required size of fuzzy display, wait until the large size of the picture to download a good and then complete the show large picture. This gives the user the feeling is to load the fuzzy picture, and then become clear picture, picture loading process fluently, greatly improve the user experience.