xpath contains() mutliple line text

I used to face this html and I try to get the element  by its text.

The xpath below does not work.

It has to be changed to this

Xpath find element by its text

exact match

contains

regular expression

How to verify xpath in chrome

Sometimes, I need to verify the xpath does be able to find the element I want.
Chrome
    F12 -> development mode
    Ctrl + f
    type in the xpath in the search text box
if anything is matched, it will be highlighted.

Or on the console, type
$x("your_xpath")

CSS margin vs padding

Margin is outside of the block, e.g. div
padding is inside of the block>

Margin is that margins auto-collapse, and padding doesn't.
The right margin of the left element is 10px, the left margin of the right element is 10px, the space between left and right is 10px.
The right padding of the left element is 10px, the left padding of the right element is 10px, the space between left and right is 20px.

For JQuery,
$("Content Selector").height() only returns the height of the content, does not include padding, border and margin.
$("Content Selector").outerHeight() returns the height including content, padding and border, but not margine.
$("Content Selector").outerHeight(true) returns the height including content, padding, border and margine.

http://api.jquery.com/outerheight/

bootstrap modal

The bootstrap modal is one alternate of JQuery dialog.

http://getbootstrap.com/javascript/#modals

http://jsfiddle.net/jschr/3kgbG/

Why people like React?

I recently used React in my recent project. I am definitely a newbie. I read articles from internet. A lot of people seems excited about React. I just don't know why...

Here are some things I don't like React.

• It needs compile the jsx to js. The code you wrote is not the code running in browser.
• The code is not neat. If you compare the compiled js with the jsx. They are similar but the compiled js is more verbose. So I guess using jsx is to make code short and easy to read. But is the jsx really neat? To create a simple div, I need write
• The code generated by runtime compiler does not equal to the compiled js. One example is that when using runitme compiler, in an external js file, I cannot get the reference of any React component. And the React components created in one jsx cannot refer to another React component created in another jsx.
  var ComponentA = React.createClass({render: function(){     return <div>abcdefg...</div>;}});

Another question mark is that the html is mixed in javascript method. Good? Bad? At least it is not my favorite.

React brings in new concept to learn. like state and property, like the lifecycle, componentDidMount, componentWillMount, componentWillReceiveProps... Learning curve is not that short. Here is one article talking about state and property: http://github.com/uberVU/react-guide/blob/master/props-vs-state.md

Dom cannot be changed. I tried to use JQuery Dialog, but I always got error. The reason is that JQuery change the DOM but React does not allow that. There are solutions online, but React makes the work complicated. 
http://sterling.ghost.io/working-with-jqueryui-and-reactjs-components/
http://blog.arkency.com/2014/10/you-can-move-react-root-component-around/
https://groups.google.com/forum/#!msg/reactjs/mHfBGI3Qwz4/6s-eHGEpccwJ

Initial State does not support complicated object.
https://jsfiddle.net/hairinwind/6t7Lcz8s/1/
If you comment js line 5 and uncomment line 4, you will see the error."Cannot read property 'name' of undefined"

More...


As I said, I was a newbie. For some problems listed above, like #2, there might be a way to solve it. I did google it on internet but I did not find an easy way. 

Here is the cheatsheet for react.js http://ricostacruz.com/cheatsheets/react.html

css !important

p {
    color: red !important;
}
The !important rule overrides other css settings.

This should only be used as a workaround to override some css settings. For example, you are using some third lib like map or charts, and it does not provide css options for a specific item. You may use !important to override the css setting from the third party lib.

Here is another scenario to use !important rule.

 https://css-tricks.com/when-using-important-is-the-right-choice/

Css, LESS and Sass

Here is the source article.

LESS and Sass share a lot of similarities in syntax, including the following:

• Mixins – Classes for classes.
• Parametric mixins – Classes to which you can pass parameters, like functions.
• Nested Rules – Classes within classes, which cut down on repetitive code.
• Operations – Math within CSS.
• Color functions – Edit your colors.
• Namespaces – Groups of styles that can be called by references.
• Scope – Make local changes to styles.
• JavaScript evaluation – JavaScript expressions evaluated in CSS.

 

LESS website: http://lesscss.org/

Sass website: http://sass-lang.com/

What’s new in HTML5

• <!doctype html>
• <meta charset=utf-8>,  you should specify your character set in the <head> of your HTML. If you don’t your site could be vulnerable to cross-site scripting attacks.
• Simplify <script> and <style> tags. You no longer need to use the type attribute
• input type=email and input type=tel
• href=tel:, the phone will dial that number if user clicks it
• video
• audio
• svg
• drag and drop
• datasets
• canvas
• history api
• no need to quote attributes, if there is no space in the attribute value
• placeholder attribute http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_placeholder
• define required fields http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_required, make sure verify it on server side too, in case the browser does not support this attribute.
• input pattern, using regular expression, http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_pattern
• section elements
  • <article>
  • <aside>
  • <nav>
  • <section>
  • <details>
  • <figure>
  • <header>
  • <footer>
  • <hgroup>
  • to test your page in the HTML5 Outliner http://gsnedders.html5.org/outliner/

 

There is a full list from W3CSchool

http://www.w3schools.com/html/html5_new_elements.asp

css !important

A rule that has the !important property will always be applied no matter where that rule appears in the CSS document. So if you wanted to make sure that a property always applied, you would add the !important property to the tag.

IE8: Background image does not show on multiple lines text

I only saw this issue in IE. Firefox was fine.

A multiple line text, which css has a background image, the image does not show in IE8.

css is like this

.successArea { 
    font-size:14px; 
    font-weight:bold; 
    padding-left:35px; 
    padding-top:20px; 
    color:#66CC00; 
    background-image:url(../images/icon_success.gif); 
    background-position: 15px 20px; 
    background-repeat:no-repeat;    
    position : relative; 
}

To fix it, add this in css

zoom : 1;

CSS order

You can apply multiple css to one html element.

<p class=”class1 class2”>abc</p>

Both “class1” and class2 will be applied to the paragraph. if class1 and class 2 has the definition for the same thing, e.g. backgroud, the one declared later wins out.

It does not matter class=”class1 class2” or class=”class2 class1”. But the declaration order of class 1 and class2 does matter.

About css order, reference is here

Css display portion of image

There is one article about it on W3C

CSS Grouping and Nesting Selector

Grouping selectors
In style sheets there are often elements with the same style. To minimize the code, you can group selectors. Separate each selector with a comma.

h1,h2,p
{
color:green;
}

Nesting Selectors

It is possible to apply a style for a selector within a selector.


In the example below, one style is specified for all p elements, one style is specified for all elements with class="marked", and a third style is specified only for p elements within elements with class="marked":

p
{
color:blue;
text-align:center;
}
.marked
{
background-color:red;
}
.marked p
{
color:white;
}

See the original article from here

Let IE7 support div max-height and overflow:auto

To make IE 7 support div max-height and overflow:auto, we need set IE7 in Standards (AKA Strict) mode.

To do that, add this on the top of the html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

MIME types: Application/xml vs text/xml

XML has two MIME types, application/xml and text/xml. These are often used interchangeably, but there is a subtle difference which is why application/xml is generally recommended over the latter.

Let me explain why: according to the standard, text/*-MIME types have a us-ascii character set unless otherwise specified in the HTTP headers. This effectively means that any encoding defined in the XML prolog (e.g. <?xml version=”1.0” encoding=”UTF-8”?>) is ignored. This is of course not the expected and desired behaviour.

To further complicate matters, most/all browser implementations actually implement nonstandard behaviour for text/xml because they process the encoding as if it were application/xml.

So, text/* has encoding issues, and is not implemented by browsers in a standards-compliant manner, which is why using application/* is recommended.

 

Exempted from http://www.grauw.nl/blog/entry/489

css # vs .

#的用法     <div   id=XXX                       id是唯一的
.的用法     <div   class=XXX               可以重复调用!

css hover menu

here is the code

<style type="text/css">

        .trigger ul {
             display: none;         
         }          .trigger:hover ul {
             display: block;         
         }     
</style> 
<h1>Coffees</h1>
<ul> 
  <li class="trigger"><span>Flat White</span>
  <ul> 
      <li><a href="javascript:;">1</a> </li>
      <li><a href="javascript:;">2</a> </li>
      <li><a href="javascript:;">3</a> </li> 
    </ul> 
  </li>
  <li class="trigger"><span>Cappuccino</span>
    <ul class="menu"> 
      <li><a href="javascript:;">View</a> </li>
      <li><a href="javascript:;">Edit</a> </li>
       <li><a href="javascript:;">Delete</a> </li> 
    </ul> 
  </li> 
</ul>

div with lable on its border

Label Here

E-mail

Here is the source code

<fieldset>
<legend>Label Here</legend>
<p>E-mail</p>
<input type="text" id="e-mail" />
</fieldset>