» page 5

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

Javascript enable adaptive height in iframe

Author: bamboo06 on 1-01-2016, 14:37, views: 819

5 Work we encountered iframe embedded in a page highly adaptive problems. Because we do not know iframe content page will be loaded high, I do not want to appear ugly scroll bars on the page, this time we can use javascript to dynamically make iframe highly adaptive.
Javascript enable adaptive height in iframe

We are ready to face a home a.html, and page two for embedded iframe for iframeH.html and iframeH1.html, content can easily add your own, respectively, practical applications may be Background generated content.

Category: Javascript

 

Operate iframe by Javascript

Author: bamboo06 on 1-01-2016, 14:10, views: 656

1 Although we use iframe in web development is relatively small, but still has its worth using iframe scenes, such as embedded external advertising. In the process, we may use iframe will encounter many problems, such as parent-child window by value iframe, iframe highly adaptive, iframe cross-domain communication and so on.
Operate iframe by Javascript

In practical applications, we often direct access to the child window page element in the parent window and manipulate them. Today I'll use examples to introduce how to use javascript to interoperate between father and son window dom iframe object started working.

Category: Javascript

 

Use jQuery to achieve multi-condition filter

Author: bamboo06 on 29-12-2015, 01:24, views: 776

3 When we buy goods business on platform in the Product List, we use filter queries based on brand, style, price range and other conditions, a condition when you click on the page displays user-selected set of conditions, and compliance with the corresponding conditions of commodity information displayed. Well, today we use jQuery to achieve this front-end results.
Use jQuery to achieve multi-condition filter

First, we classify the query conditions arranged conditions container li.select-list on the page and have chosen conditions container div.select-result.

Category: Javascript

 

Use PHP to achieve red envelopes

Author: bamboo06 on 29-12-2015, 00:43, views: 583

10 Use PHP to achieve distributing red envelopes, and when we enter the number and total amount, PHP will be randomly assigned to each of these two values based on the amount, to ensure that everyone can receive a red envelope, it is to ask the various amount of red envelope, all of the total amount should be equal to the total amount of red envelopes.
Use PHP to achieve red envelopes

We first have to analyze the law.

Category: PHP Scripts / Javascript

 

Pure CSS3 to achieve cool mouseover effect

Author: bamboo06 on 25-11-2015, 00:50, views: 762

1 In this paper, without the need to introduce any javascript code that uses only pure CSS3 and HTML to realize cool mouseover effect. When the mouse hovers over the target element, it can achieve a common line change, flip, zoom, slide animation, etc. effect.
Pure CSS3 to achieve cool mouseover effect

We put a picture in .he_border1, and list caption information.

Category: CSS / HTML5

 

Use the mouse wheel or sliding gestures to browse the page node section by scrollify

Author: bamboo06 on 25-11-2015, 00:11, views: 2515

0 Sometimes we need to do a single-page presentation product characteristics, while the single-page and page content is very much very long, in order to quickly locate the product characteristics node, we use user wheel events js listener, wheel slip or slide triggered by the user when using the touch screen gestures, you can navigate to the appropriate node. A jQuery plugin called Scrollify is found.
Use the mouse wheel or sliding gestures to browse the page node section by scrollify

Scrollify need jQuery 1.6+ and animation easing plug with buffer to achieve. HTML basic structure is as follows.

Category: Javascript / Plugins

 

Use fakeLoader.js to create page loading animation

Author: bamboo06 on 24-11-2015, 23:38, views: 1492

4 fakeLoader.js is a lightweight jQuery plugin which can help us to create a full-screen transition animations load, when the page is loaded, display the loading animation, when the content of the page finished loading animation disappears to display the page.
Use fakeLoader.js to create page loading animation

HTML
We only need to add the following code on the first line of the [body].

Category: Javascript / Plugins

 

CacheBrowser: CDN content caching Internet use

Author: bamboo06 on 24-11-2015, 01:04, views: 630

0 As solidot reported in October this year, the University of Massachusetts Amherst researchers have proposed a proxy server does not require access to the Internet system CacheBrowser, get bypassed DNS interference directly from content hosting one CDN provider's server shielding content. The advantage of this approach is that under load delay was much smaller than the Tor of class methods, but the drawback is only applicable to the use of CDN is blocked sites, and fortunately most large websites are blocked in China are using the CDN.
CacheBrowser: CDN content caching Internet use

But the Internet is evolving, more and more sites start using CDN hosted content, improve content access performance, reliability and security. IP masking traditional website content is valid, but for CDN hosted content, reviewers can not simply be masked, because this will bring huge collateral damage.

Category: Internet

 

Achieve responsive data table by CSS3

Author: bamboo06 on 24-11-2015, 00:48, views: 637

2 Designing responsive page, the hardest part is processing table, data table design as an indispensable element, plays an important role in the data application projects, but to get a table really a little trouble to adapt to various screen . This article will use examples to demonstrate how to use CSS3 to achieve responsive data form.
Achieve responsive data table by CSS3

When the screen is small enough (such as mobile phone screen) that is less than the minimum width of the table, if not responsive handling, it will scroll horizontally, you need to manually move the magnified portion of the screen to see beyond such experience is poor. Our solution is to use CSSmedia queries to detect screen size, when the screen size is small enough, re-layout table form.

Category: CSS / HTML5

 

Beautiful and practical tip box plugin - SweetAlert

Author: bamboo06 on 8-11-2015, 22:07, views: 1089

0 SweetAlert can replace the native function alert and confirm showing the pop-up boxes, it will prompt box landscaping, and allows customization, support setting the prompt box title, alert type, content display pictures, confirmation cancel button text, click after the callback function, etc.
Beautiful and practical tip box plugin - SweetAlert

First we have to put SweetAlert widget js files and css files into the page.

Category: Javascript