JSFiddle - React, Tailwind, and code Playground

HTML

<!-- 
Stackoverflow Answer (Revised!!!) by arttronics for SO Question: http://stackoverflow.com/q/14048943/1195891

View my other related jsFiddle for this Answer: http://jsfiddle.net/sHgVZ/

12-31-2012 Revised to not use <br clear="both" /> and use <div class="clear"></div> instead.

-->

<div id="results"></div>


<!-- View the following comments with maximum width in this panel. The following mock-up was created 1st, then converted to string format in jQuery below. The lables shown below with semicolons will remain.

To learn how to convert the HTML below into a usable jQuery Object so that it becomes a "template", see this detailed jsFiddle tutorial: http://jsfiddle.net/C5xWL/1/

<div class="dynamicResults">
    
    <div class="dynamicThumb">
        <a href="#"><img src="#" alt=""></a>
    </div>
    
    <div class="dynamicInfo">
        <div class="dynamicText"><a href="#" class="dynamicName">Name</a></div>
        <div class="dynamicText">Position</div>
        <div class="dynamicText">Phone: </div>
        <div class="dynamicText">Location: <span>Room</span></div>
        <div class="dynamicText"><a href="#" class="dynamicEmail">Email</a><span class="dynamicEmailpic"></span></div>
    </div>

</div>

<div class="clear"></div>


*** When looking at the above with variables added for reference only, it looks like this:


<div class="dynamicResults">
    
    <div class="dynamicThumb">
        <a href="facultyMemberUrl"><img src="facultyMemberImage" alt=""></a>
    </div>
    
    <div class="dynamicInfo">
        <div class="dynamicText"><a href="facultyMemberUrl" class="dynamicName">facultyMemberTitle</a></div>
        <div class="dynamicText">facultyMemberPosition</div>
        <div class="dynamicText">facultyMemberPhone</div>
        <div class="dynamicText">facultyMemberBuilding<span>facultyMemberRoom</span></div>
        <div class="dynamicText"><a href="mailto:facultyMemberEmailUrl" class="dynamicEmail">facultyMemberEmail</a><span...

CSS

/* This body is just for jsFiddle Demo use */
body {
  margin: 20px;
  background:url("http://directory.vancouver.wsu.edu/sites/all/themes/departments/bkg_main.jpg") repeat-x;
}

/* The CSS shown below produces the same look  from a particular website. It's used when jQuery creates new dynamic  Objects that are added to the webpage. */

/* Original Webpage: http://directory.vancouver.wsu.edu/anthropology */

.dynamicResults {
  float: left;
  width: 475px; /* The online webpage shows this width is used */
  border: 0px dashed red; /* Dev Use: To simulate Inspect Element for #views-row of original webpage  */
  /* Reminder: Since border is used, that effects the whole element by adding 2px of height. */ 
  /* To be sure, border must be removed so all px values calibrate correctly, or tweak CSS to include border. */
  margin-bottom: 24px; /* This is to allow next .dynamicResults object under current one have proper gap. */
}

.dynamicThumb { 
 /* background-color: blue; /* Dev Use: Active this style to view area of element */
  float: left;
  height: 105px; /* Use value in selector below: This value is the sum of thumb height and margin top/bottom */
  width: 130px;  /* Use value in selector below: This value is the sum of thumb width and margin left/right */
}

.dynamicThumb a img {
  /* CSS "margin right" is used so text on right side of thumbnail doesn't touch that side of thumbnail. */
  margin: 5px 25px 0px 5px;  /* top right bottom left */
  width: 100px;  /* Width of thumbnail is specified. Also, 100px is native width. */
  height: 100px; /* Height of thumbnail is specified. Also, 100px is native height. */
}

.dynamicInfo {
  float: left;
  width: 345px; /* See below */
  /*  If each text line, like Name (original website name Title) and  Position, used only 1 single line, this width property  would not be  required. When Name, Position, or any lines overflows unto the next  line, elements are correctly pushed down. However, once it's below the  thumbnail...

JavaScript

// Reference YQL Statement URL:   http://y.ahoo.it/YlwNH

// select * from html where url="http://directory.vancouver.wsu.edu/anthropology" and xpath="//div[@id='content-inner']/div/div/div/div/div[2]"

// The additional DIVS in the YQL Statement above are more of a refined target.
// To find best target, use Firefox Inspect Element (right mouseclick) and view the HTML panel layout (2nd button from left).
//
// Activate browser console to view messages


// Note the .ajax() statement is using  xml  as dataType NOT html.
// Below are sample directories
//
// child-development-program
// english
// history
// anthropology
// foreign-languages-and-cultures

var directoryName = 'child-development-program';

$.ajax({
    type: 'GET',
    url: "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20url%3D%22http%3A%2F%2Fdirectory.vancouver.wsu.edu%2F" + directoryName + "%22%20and%20xpath%3D%22%2F%2Fdiv%5B%40id%3D'content-inner'%5D%2Fdiv%2Fdiv%2Fdiv%2Fdiv%2Fdiv%5B2%5D%22",
    dataType: 'xml',
    success: function(data) {
        
        if (data) {

            // Show in console the jQuery Object.
            console.info('Here is the returned query'); 
            console.log( $(data).find('query') );
            
            // Show in console the results in inner-html text.
            var textResults = $(data).find('results').text();
            console.log( textResults );

            // Parse the list of faculty members. Variable indexFM is not used for indexed faculty member.
            $(data).find('results').find('.views-row').each(function(indexFM){
            
                // This variable will store the current faculty member.
                var facultyMember = this;
                console.info('Faculty jQuery DIV Object shown on next lines.');
                console.log( facultyMember );
                
                // Parse the contents of each faculty member. Variable indexFC is not used for indexed faculty content.
...