PHP

How to Treat Long Non-space Strings by Regular Expression in PHP

Posted on
Here was my case, I saw some text shown in web pages were wider than defined width because some non-space strings were extremely longer than expected, which caused the text exceeded the width of containers (e.g. <div>), for example:… You should set -attribute=com.sun.java.swing.plaf.nimbus.InternalFrameInternalFrameTitlePaneInternalFrameTitlePaneMaximizeButton: for further …As you can see, that is a long non-space string […]
AMP

Some HTML Elements are Not Rendered in AMP Pages

Posted on
Accelerated Mobile Pages (AMP) is kind of a light-weighted html standard for smartphone users to load pages more quickly by optimizing HTML codes. Therefore, AMP must lose weight to be accelerated. Parts of, and limited functions and elements can be utilized in AMP pages.Therefore, there’re some fatty prone elements (tags) that are not supported by […]
CSS

How to Remove Border of Focused Input Box by CSS

Posted on
You might already notice that every time you focus on the input box, there’s a incompatible border which wrap the input box. Actually, it’s not a border, it’s an outline. Its color is chosen by browser by default. You can remove it by modifying the CSS file in this way.[developer@test css]# vi web.css#name-input-box:focus {    outline: […]
Blogger

How to Make Background Image Scrollable for Bloggers

Posted on
In Blogger, the background image does not scroll along with the content by default, but this can be changed in this way:Edit the blog templateEdit template in bloggerFind the keyword fixed in tag <Variable name=”body.background” … > in the template.Find fixed in <Variable name=’”body.background variable”…> tagReplace fixed with scroll, and then Save template.Replace fixed with […]
CSS

How to Make Separate Lines Vertical and Horizontal

Posted on
Old-fashioned web designers might have known how to use the plain-old <hr /> to make separate lines horizontal to divide the page content like this:<div>Paragraph 1</div><hr /><div>Paragraph 2</div>The output will be:Paragraph 1Paragraph 2Or, you can style <hr /> as you want by CSS like this:<div>Paragraph 1</div><hr style=”border: 2px dashed blue; height: 10px; background-color: red; width: […]
CSS

How to Crop Images by CSS

Posted on
Web designers usually remove the unwanted edge of images to make central objects look bigger and more focused by image processing softwares or au, it’s called cropping. But sometimes, the images are intended to be kept intact as originals. Under such requirements, you can play the trick by CSS.First of all, let’s see an example […]
CSS

Why “text-decoration: none;” Does Not Work

Posted on
Assuming that you have a hyperlink wrapped by a <div> like the following, and you want to remove the underline of the hyperlink.<div class=’google_link_div’> <a href=’//www.google.com/’>Go to Google</a></div>A common mistake you might make is to add “text-decoration: none;” directly under the outside <div> like this:.google_link_div { … text-decoration: none;}This does not work. To remove the […]
jQuery

How to Change CSS Style of Elements Dynamically Triggered by Events

Posted on
You might want to change the style of elements after some events, you could leverage jQuery to fulfill. For example, if you have an element like this:<button style=’color: white; background-color: blue;’>Post it</button>We’d like to change the background color of the button once been clicked, we can do it like this:<script src=”http://code.jquery.com/jquery-1.10.2.js”></script><script>$(function() { $(“#btn1”).click(function() { $(“#btn1”).attr(“style”, […]