» page 4

 
Sort articles by: Date | Most Rates | Most Views | Comments | Alphabet

Fixed background and scrolling page effect with CSS

Author: bamboo06 on 13-08-2016, 01:54, views: 691

2 How to create a just simply and none requiring javascript and CSS property of background-attachment can be realized fixed page backgrounds and scrolling effect. We see that there are many project sites use parallax effect, parallax is generated by the dynamic changes and the background image and js script, but today we only need CSS.
Fixed background and scrolling page effect with CSS

HTML structure is very simple, a background image is fixed placement class .cd-fixed-bg div element for a class of .cd-scrolling-bg div element portion for scrolling. We can place multiple .cd-fixed-bg and .cd-scrolling-bg group.

Category: CSS

 

Image upload and clipping applications: Croppie

Author: bamboo06 on 1-08-2016, 01:40, views: 2144

15 In a lot of applications need to upload the local images and then by size appropriate tailoring to meet the requirements of the website for the size of the picture. The most common is the user system requires users to upload and cut the picture of the application. Today I introduced to you is based on HTML5 and jQuery of the picture upload and clipping plug-in, it is called Croppie.
Image upload and clipping applications: Croppie

First, we will load the relevant JS and CSS files in head.

Category: Javascript / HTML5 / Plugins

 

Making use of Animate.css for stunning CSS3 animation

Author: bamboo06 on 1-08-2016, 01:03, views: 664

5 Animate.css is a super CSS3 animation library, it is simple to use, only needing to join class effect is related to the corresponding page elements, you can achieve the flip, slide, rotation and so on complex stunning cross browser animation effects, which makes development and creating the page animation become very simple.
Making use of Animate.css for stunning CSS3 animation

Category: Javascript / CSS

 

Use PHP to prevent duplicate submiting form

Author: bamboo06 on 23-06-2016, 00:26, views: 1087

1 We submit the form, a limit can not be ignored is to prevent users who repeatedly submit the form, because there may be a user continuously hits the submit button or a malicious attacker to submit the data, then we submit the data after processing, such as modifying or adding data to the database when they will get into trouble.
Use PHP to prevent duplicate submiting form

So how do you avoid duplicate submission form this phenomenon happen? We can see from many aspects, first from the front end to make restrictions. In the front-end javascript is disabled after a button is clicked, the disabled, this simple method of preventing multiple clicks the submit button, but the disadvantage is that if the user has disabled javascript script is invalid. Second, we can do after submitting the redirect page redirection, that is submitted after the jump to a new page, the main F5 avoid duplicate submissions, but there are drawbacks. Thirdly, it is made unique database index constraint. Fourth, it is to do the session token authentication.

Category: PHP Scripts

 

Beautiful page transition animation

Author: bamboo06 on 23-06-2016, 00:03, views: 726

8 By clicking the menu on side of the page it is loaded along with the corresponding slide transition animations, but also with the progress bar effect. Of course, the page loaded is driven by Ajax, the entire loading process of transition is very smooth, with very good user experience.
Beautiful page transition animation

HTML structure, .cd-main body of the page contains content, .cd-side-navigation contains the side navigation bar, # cd-loading-bar is used to make a progress bar with animation.

Category: Javascript / CSS

 

Use Jquery to copy form element

Author: bamboo06 on 2-04-2016, 16:19, views: 875

18 When we submit the form, sometimes you encounter the need to repeat the same form to add multiple elements, such as order information you need to add a number of different types of products, form data in the new field information. This time we can put a "new one" or "Copy" button directly on the form, you can achieve copy form elements by clicking on the button.
Use Jquery to copy form element

Category: Javascript

 

Without Flash and relying on any JS library to copy and cut text to clipboard

Author: bamboo06 on 2-04-2016, 15:50, views: 1258

1 We place a copy button on the page, it is mainly used to facilitate the user to copy a complex text links and the like, the conventional approach is to rely on Flash through JS, even by means of a huge jQuery js library to implement text copied to the clipboard. Today, I give you about is a very modern, no flash, does not rely on any other js very small plug-in libraries, it is called clipboard.js.
Without Flash and relying on any JS library to copy and cut text to clipboard

Category: HTML5 / Plugins

 

Cool photo wall display effect by easing plugin

Author: bamboo06 on 2-04-2016, 14:42, views: 730

3 This is a cool photo wall display of results, combined with a lot of photos fade, rotate, zoom, tilt and 3D effects, quick photo from the left to cut, do rotate the 3D effect, and finally lined up in the photo on the wall, in order to show users cool photo wall display effect.
Cool photo wall display effect by easing plugin

In this paper we use examples to share cool photo wall effect that depend on jQuery and the easing plug-in, first loading the two files.

Category: Javascript / Plugins

 

Pure CSS3 to realize rotation effect of icon

Author: bamboo06 on 17-02-2016, 00:44, views: 1789

61 CSS3 has a transform, which can make the target object deformation, transformation, change. Applied to the need to convert the angle, changing the size and other scenes, such as icons rotate, zoom in and out the background, etc., in short, transform is deformed, change the meaning, it belongs to the advanced technology of CSS3.
Pure CSS3 to realize rotation effect of icon

Category: CSS

 

Use javascript to achieve automatic countdown 30 seconds after the button is available

Author: bamboo06 on 17-02-2016, 00:07, views: 1276

1 WEB development are often used to restrict user operations on the countdown form, such as within a certain period of time you want the user to read the relevant protocol information before allowing the user to continue to the next step, another example in the collection of phone verification code allows the user after a certain time (not received the case under the code) to get a verification code again. Well, today I come to tell you how to use javascript to achieve under this simple application.
Use javascript to achieve automatic countdown 30 seconds after the button is available

Category: Javascript