html,ruby,web-scraping,nokogiri , Parse an HTML table with Nokogiri in Ruby


Parse an HTML table with Nokogiri in Ruby

Question:

Tag: html,ruby,web-scraping,nokogiri

I have an HTML table that looks like the following:

<table id="TTdata" border="0" cellspacing="0" cellpadding="3" align="center">
   <tbody>
      <tr class="TTdata_ltblue">
         <td class="ctr"><b>#</b></td>
         <td class="ctr"><b><a href="http://www.baseballprospectus.com/sortable/index.php?cid=1819124&amp;newsort1column=YEAR">YEAR</a><img src="/images/up.gif"></b></td>
         <td class="ctr" title="Player's name."><b><a href="http://www.baseballprospectus.com/sortable/index.php?cid=1819124&amp;newsort1column=NAME">NAME</a></b></td>
         <td class="ctr" title="how many pitches a catcher had a chance/need to frame"><b><a href="http://www.baseballprospectus.com/sortable/index.php?cid=1819124&amp;newsort1column=FR_CHANCES">FR_CHANCES</a></b></td>
         <td class="ctr" title="the number of strikes the catcher is expected to have received according to RPM"><b><a href="http://www.baseballprospectus.com/sortable/index.php?cid=1819124&amp;newsort1column=PREDICTED_STRIKES">PREDICTED_STRIKES</a></b></td>
         <td class="ctr" title="the number of strikes the catcher actually received"><b><a href="http://www.baseballprospectus.com/sortable/index.php?cid=1819124&amp;newsort1column=ACTUAL_STRIKES">ACTUAL_STRIKES</a></b></td>
         <td class="ctr" title="the difference between actual and predicted strikes received by the catcher"><b><a href="http://www.baseballprospectus.com/sortable/index.php?cid=1819124&amp;newsort1column=EXTRA_STRIKES">EXTRA_STRIKES</a></b></td>
         <td class="ctr" title="runs RPM credits to the catcher, using the ball-strike context to calculated run value"><b><a href="http://www.baseballprospectus.com/sortable/index.php?cid=1819124&amp;newsort1column=FR_RUNS_ADDED_BY_COUNT">FR_RUNS_ADDED_BY_COUNT</a><img src="/images/down.gif"></b></td>
         <td class="ctr" title="how many runs RPM would assign using a generic .14 runs available per frame"><b><a href="http://www.baseballprospectus.com/sortable/index.php?cid=1819124&amp;newsort1column=FR_RUNS_ADDED_BY_CALL">FR_RUNS_ADDED_BY_CALL</a></b></td>
         <td class="ctr" title="pitches the catcher received that could have resulted in a wild pitch or passed ball; this is when runners are on base or a dropped third strike is possible"><b><a href="http://www.baseballprospectus.com/sortable/index.php?cid=1819124&amp;newsort1column=BL_CHANCES">BL_CHANCES</a></b></td>
         <td class="ctr"><b><a href="http://www.baseballprospectus.com/sortable/index.php?cid=1819124&amp;newsort1column=PREDICTED_PBWP">PREDICTED_PBWP</a></b></td>
         <td class="ctr" title="the run value accumulated from preventing wild pitches and passed balls (.28 per PB/WP saved)"><b><a href="http://www.baseballprospectus.com/sortable/index.php?cid=1819124&amp;newsort1column=BL_RUNS_ADDED">BL_RUNS_ADDED</a></b></td>
         <td class="ctr" title="the number of passed balls and wild pitches allowed by the catcher"><b><a href="http://www.baseballprospectus.com/sortable/index.php?cid=1819124&amp;newsort1column=ACTUAL_PBWP">ACTUAL_PBWP</a></b></td>
         <td class="ctr" title="the difference between actual and predicted passed balls and wild pitches allowed by the catcher
            "><b><a href="http://www.baseballprospectus.com/sortable/index.php?cid=1819124&amp;newsort1column=PBWP_SAVED">PBWP_SAVED</a></b></td>
      </tr>
      <tr class="TTdata">
         <td>1.</td>
         <td class="right">2015</td>
         <td><a href="/player_search.php?search_name=Yasmani+Grandal" target="_blank">Yasmani Grandal</a></td>
         <td class="right">2295</td>
         <td class="right">871.5</td>
         <td class="right">925</td>
         <td class="right">53.5</td>
         <td class="right">8.0</td>
         <td class="right">8.0</td>
         <td class="right">1097</td>
         <td class="right">18.0</td>
         <td class="right">0.0</td>
         <td class="right">18</td>
         <td class="right">0.0</td>
      </tr>
      <tr class="TTdata_ltgrey">
         <td>2.</td>
         <td class="right">2015</td>
         <td><a href="/player_search.php?search_name=Buster+Posey" target="_blank">Buster Posey</a></td>
         <td class="right">2601</td>
         <td class="right">1,011.4</td>
         <td class="right">1,056</td>
         <td class="right">44.6</td>
         <td class="right">6.6</td>
         <td class="right">6.6</td>
         <td class="right">1232</td>
         <td class="right">10.0</td>
         <td class="right">0.0</td>
         <td class="right">10</td>
         <td class="right">0.0</td>
      </tr>
      <tr class="TTdata">
         <td>3.</td>
         <td class="right">2015</td>
         <td><a href="/player_search.php?search_name=Francisco+Cervelli" target="_blank">Francisco Cervelli</a></td>
         <td class="right">2629</td>
         <td class="right">989.0</td>
         <td class="right">1,033</td>
         <td class="right">44.0</td>
         <td class="right">6.5</td>
         <td class="right">6.5</td>
         <td class="right">1357</td>
         <td class="right">14.0</td>
         <td class="right">0.0</td>
         <td class="right">14</td>
         <td class="right">0.0</td>
      </tr>
      <tr class="TTdata_ltgrey">
         <td>4.</td>
         <td class="right">2015</td>
         <td><a href="/player_search.php?search_name=Mike+Zunino" target="_blank">Mike Zunino</a></td>
         <td class="right">2828</td>
         <td class="right">1,128.8</td>
         <td class="right">1,169</td>
         <td class="right">40.2</td>
         <td class="right">6.0</td>
         <td class="right">6.0</td>
         <td class="right">1325</td>
         <td class="right">19.0</td>
         <td class="right">0.0</td>
         <td class="right">19</td>
         <td class="right">0.0</td>
      </tr>
      <tr class="TTdata">
         <td>5.</td>
         <td class="right">2015</td>
         <td><a href="/player_search.php?search_name=Caleb+Joseph" target="_blank">Caleb Joseph</a></td>
         <td class="right">2713</td>
         <td class="right">993.9</td>
         <td class="right">1,031</td>
         <td class="right">37.1</td>
         <td class="right">5.5</td>
         <td class="right">5.5</td>
         <td class="right">1315</td>
         <td class="right">9.0</td>
         <td class="right">0.0</td>
         <td class="right">9</td>
         <td class="right">0.0</td>
      </tr>
      <tr class="TTdata_ltgrey">
         <td>6.</td>
         <td class="right">2015</td>
         <td><a href="/player_search.php?search_name=Chris+Iannetta" target="_blank">Chris Iannetta</a></td>
         <td class="right">2158</td>
         <td class="right">847.5</td>
         <td class="right">884</td>
         <td class="right">36.5</td>
         <td class="right">5.4</td>
         <td class="right">5.4</td>
         <td class="right">1078</td>
         <td class="right">15.0</td>
         <td class="right">0.0</td>
         <td class="right">15</td>
         <td class="right">0.0</td>
      </tr>
      <tr class="TTdata">
         <td>7.</td>
         <td class="right">2015</td>
         <td><a href="/player_search.php?search_name=Jason+Castro" target="_blank">Jason Castro</a></td>
         <td class="right">2679</td>
         <td class="right">1,068.9</td>
         <td class="right">1,105</td>
         <td class="right">36.1</td>
         <td class="right">5.4</td>
         <td class="right">5.4</td>
         <td class="right">1378</td>
         <td class="right">18.0</td>
         <td class="right">0.0</td>
         <td class="right">18</td>
         <td class="right">0.0</td>
      </tr>
      <tr class="TTdata_ltgrey">
         <td>8.</td>
         <td class="right">2015</td>
         <td><a href="/player_search.php?search_name=Miguel+Montero" target="_blank">Miguel Montero</a></td>
         <td class="right">1977</td>
         <td class="right">785.8</td>
         <td class="right">820</td>
         <td class="right">34.2</td>
         <td class="right">5.1</td>
         <td class="right">5.1</td>
         <td class="right">972</td>
         <td class="right">11.0</td>
         <td class="right">0.0</td>
         <td class="right">11</td>
         <td class="right">0.0</td>
      </tr>
      <tr class="TTdata">
         <td>9.</td>
         <td class="right">2015</td>
         <td><a href="/player_search.php?search_name=Martin+Maldonado" target="_blank">Martin Maldonado</a></td>
         <td class="right">2343</td>
         <td class="right">906.0</td>
         <td class="right">940</td>
         <td class="right">34.0</td>
         <td class="right">5.1</td>
         <td class="right">5.1</td>
         <td class="right">1193</td>
         <td class="right">17.0</td>
         <td class="right">0.0</td>
         <td class="right">17</td>
         <td class="right">0.0</td>
      </tr>
      <tr class="TTdata_ltgrey">
         <td>10.</td>
         <td class="right">2015</td>
         <td><a href="/player_search.php?search_name=Tyler+Flowers" target="_blank">Tyler Flowers</a></td>
         <td class="right">2191</td>
         <td class="right">833.4</td>
         <td class="right">865</td>
         <td class="right">31.6</td>
         <td class="right">4.7</td>
         <td class="right">4.7</td>
         <td class="right">1305</td>
         <td class="right">13.0</td>
         <td class="right">0.0</td>
         <td class="right">13</td>
         <td class="right">0.0</td>
      </tr>
      <tr class="TTdata">
         <td>11.</td>
         <td class="right">2015</td>
         <td><a href="/player_search.php?search_name=Rene+Rivera" target="_blank">Rene Rivera</a></td>
         <td class="right">2632</td>
         <td class="right">1,043.1</td>
         <td class="right">1,070</td>
         <td class="right">26.9</td>
         <td class="right">4.0</td>
         <td class="right">4.0</td>
         <td class="right">1331</td>
         <td class="right">18.0</td>
         <td class="right">0.0</td>
         <td class="right">18</td>
         <td class="right">0.0</td>
      </tr>
      <tr class="TTdata_ltgrey">
         <td>12.</td>
         <td class="right">2015</td>
         <td><a href="/player_search.php?search_name=Russell+Martin" target="_blank">Russell Martin</a></td>
         <td class="right">2919</td>
         <td class="right">1,121.3</td>
         <td class="right">1,148</td>
         <td class="right">26.7</td>
         <td class="right">4.0</td>
         <td class="right">4.0</td>
         <td class="right">1470</td>
         <td class="right">27.0</td>
         <td class="right">0.0</td>
         <td class="right">27</td>
         <td class="right">0.0</td>
      </tr>
      <tr class="TTdata">
         <td>13.</td>
         <td class="right">2015</td>
         <td><a href="/player_search.php?search_name=Kevin+Plawecki" target="_blank">Kevin Plawecki</a></td>
         <td class="right">1826</td>
         <td class="right">744.0</td>
         <td class="right">770</td>
         <td class="right">26.0</td>
         <td class="right">3.9</td>
         <td class="right">3.9</td>
         <td class="right">886</td>
         <td class="right">9.0</td>
         <td class="right">0.0</td>
         <td class="right">9</td>
         <td class="right">0.0</td>
      </tr>
      <tr class="TTdata_ltgrey">
         <td>14.</td>
         <td class="right">2015</td>
         <td><a href="/player_search.php?search_name=David+Ross" target="_blank">David Ross</a></td>
         <td class="right">941</td>
         <td class="right">339.6</td>
         <td class="right">361</td>
         <td class="right">21.4</td>
         <td class="right">3.2</td>
         <td class="right">3.2</td>
         <td class="right">519</td>
         <td class="right">5.0</td>
         <td class="right">0.0</td>
         <td class="right">5</td>
         <td class="right">0.0</td>
      </tr>
      <tr class="TTdata">
         <td>15.</td>
         <td class="right">2015</td>
         <td><a href="/player_search.php?search_name=Roberto+Perez" target="_blank">Roberto Perez</a></td>
         <td class="right">1969</td>
         <td class="right">776.5</td>
         <td class="right">789</td>
         <td class="right">12.5</td>
         <td class="right">1.9</td>
         <td class="right">1.9</td>
         <td class="right">1090</td>
         <td class="right">12.0</td>
         <td class="right">0.0</td>
         <td class="right">12</td>
         <td class="right">0.0</td>
      </tr>
      <tr class="TTdata_ltgrey">
         <td>16.</td>
         <td class="right">2015</td>
         <td><a href="/player_search.php?search_name=Welington+Castillo" target="_blank">Welington Castillo</a></td>
         <td class="right">1047</td>
         <td class="right">410.6</td>
         <td class="right">420</td>
         <td class="right">9.4</td>
         <td class="right">1.4</td>
         <td class="right">1.4</td>
         <td class="right">499</td>
         <td class="right">4.0</td>
         <td class="right">0.0</td>
         <td class="right">4</td>
         <td class="right">0.0</td>
      </tr>
      <tr class="TTdata">
         <td>17.</td>
         <td class="right">2015</td>
         <td><a href="/player_search.php?search_name=Hank+Conger" target="_blank">Hank Conger</a></td>
         <td class="right">1000</td>
         <td class="right">405.2</td>
         <td class="right">414</td>
         <td class="right">8.8</td>
         <td class="right">1.3</td>
         <td class="right">1.3</td>
         <td class="right">511</td>
         <td class="right">4.0</td>
         <td class="right">0.0</td>
         <td class="right">4</td>
         <td class="right">0.0</td>
      </tr>
      <tr class="TTdata_ltgrey">
         <td>18.</td>
         <td class="right">2015</td>
         <td><a href="/player_search.php?search_name=Josh+Thole" target="_blank">Josh Thole</a></td>
         <td class="right">476</td>
         <td class="right">168.8</td>
         <td class="right">177</td>
         <td class="right">8.2</td>
         <td class="right">1.2</td>
         <td class="right">1.2</td>
         <td class="right">275</td>
         <td class="right">4.0</td>
         <td class="right">0.0</td>
         <td class="right">4</td>
         <td class="right">0.0</td>
      </tr>
      <tr class="TTdata">
         <td>19.</td>
         <td class="right">2015</td>
         <td><a href="/player_search.php?search_name=Tucker+Barnhart" target="_blank">Tucker Barnhart</a></td>
         <td class="right">934</td>
         <td class="right">351.4</td>
         <td class="right">357</td>
         <td class="right">5.6</td>
         <td class="right">0.8</td>
         <td class="right">0.8</td>
         <td class="right">410</td>
         <td class="right">4.0</td>
         <td class="right">0.0</td>
         <td class="right">4</td>
         <td class="right">0.0</td>
      </tr>
   </tbody>
</table>

In this case, I'm interested in retrieving every "player" that is in a table row with either the class of TTdata or TTdata_ltgrey. This can be achieved using the following:

html = open(url)
doc = Nokogiri::HTML(html)

doc.css('.TTdata, .TTdata_lgrey').each do |catcher|
   # parse here
end

My problem is, none of the td entries have classes associated with them. I just know that TD 1 is a position, TD 2 is a year, TD 3 is a name.

What's the right way to access each td using the iteration above so I can create a model/hash of name/val pairs for each row?


Answer:

Here is one approach I tried. But yes, you can take it further from here to meet the need you have :

require 'nokogiri'
require 'pp'

doc = Nokogiri::HTML.parse(File.read("#{__dir__}/out1.html"))

data = doc.css('.TTdata, .TTdata_lgrey').map do |tr|
  %i(position year name).zip(tr.css("td:nth-child(-n+3)").map(&:text)).to_h
end

pp data

output

[{:position=>"1.", :year=>"2015", :name=>"Yasmani Grandal"},
 {:position=>"3.", :year=>"2015", :name=>"Francisco Cervelli"},
 {:position=>"5.", :year=>"2015", :name=>"Caleb Joseph"},
 {:position=>"7.", :year=>"2015", :name=>"Jason Castro"},
 {:position=>"9.", :year=>"2015", :name=>"Martin Maldonado"},
 {:position=>"11.", :year=>"2015", :name=>"Rene Rivera"},
 {:position=>"13.", :year=>"2015", :name=>"Kevin Plawecki"},
 {:position=>"15.", :year=>"2015", :name=>"Roberto Perez"},
 {:position=>"17.", :year=>"2015", :name=>"Hank Conger"},
 {:position=>"19.", :year=>"2015", :name=>"Tucker Barnhart"}]

Related:


Click on link next link should be display on same page


javascript,php,jquery,html,css3
I have a single page website and need to link the navigation to IDs in the page. I have three links: "About us", "Our Project", "contact". So if user clicks on "About ", the About section will be displayed, same with other links. Inside Our project there is Two buttons...

Centering navbar pills vertically within the navbar using flexbox


html,css,twitter-bootstrap,flexbox
I am terrible at CSS so I am having trouble centering my <li> (navbar pills) vertically for my navbar. This navbar is from twitter bootstrap Here is the HTML for my navbar: <div class="container"> <nav class="navbar navbar-default navbar-fixed-top"> <ul id="nav_pills" class="nav nav-pills" role="tablist"> <li role="presentation"> <a href="/">About</a> </li> <li role="presentation">...

CSS - Linear Gradient Background Color no-repeat is not working for if it has multiple tds


html,css,css3
I want to apply css3 gradient (left and right transparent) background color for a TR element like below. Below code is working fine if it has only one TD element, where as more than one td, background gradient started repeating for each td... Am I missing something? Online Demo CSS...

Ruby: How to copy the multidimensional array in new array?


ruby-on-rails,arrays,ruby,multidimensional-array
seating_arrangement [ [:first, :second, :none], [:first, :none, :second], [:second, :second, :first], ] I need to copy this array into new array. I tried to do it by following code: class Simulator @@current_state def initialize(seating_arrangement) @@current_state = seating_arrangement.dup end But whenever I am making any changes to seating_arrangement current_state changes automatically....

Automatically calling server side class without


javascript,html,ajax
I have an anchor which calls a server side class when clicked, but I want to modify it so that the class is called as soon as the page loads, without having to click an anchor. <a href="#" class="_repLikeMore" data-id="1234" data-type="pid" data-app="forums"> ...

change css dynamically by selecting dropdown list item


jquery,html,css,drop-down-menu
I have the following Dropdownlist with yes or no options-:` <asp:DropDownList ID="ddlchangecss" runat="server"> <asp:ListItem Text="yes">yes</asp:ListItem> <asp:ListItem Text="no"></asp:ListItem> </asp:DropDownList> i want to add a css dynamically like that-: .imgFullWidth { width: 100%; height: auto; float: left; margin: 0px 0px 20px 0px; } when I select yes option in Dropdownlist. How can...

Background-image style with JS not working in ie9


javascript,jquery,html,internet-explorer
I'm working on a site and im having some issues with my slider in IE9. What I've done is that I've made a div that gets the background image changed every few seconds depending on the img tags within. You can see it in function here: http://diakondk.quine.pil.dk/ It works wonders...

why i don't get return value javascript


javascript,jquery,html,json,html5
When i debug my code i can see i have value but i don't get value to createCheckBoxPlatform FN function createCheckBoxPlatform(data) { var platform = ""; $.each(data, function (i, item) { platform += '<label><input type="checkbox" name="' + item.PlatformName + ' value="' + item.PlatformSK + '">' + item.PlatformName + '</label>' +...

How to set DIV's width based on CSS indexes


html,css
I have 6 floated DIVs in two rows. I use PocketGrid as CSS framework (in particular its "automatic rows" feature) and I would like to size each one using CSS indexes and not specific class name. I tried it in this jsFiddle but even if first 3 blocks (first row)...

Dynamically resize side-by-side images with different dimensions to the same height


javascript,html,css,image
I have two images side-by-side within a block-level container with arbitrarily different dimensions (as in, they could be any two images) that I want to dynamically adjust the width of so that the overall height of the two images is the same. I don't think this can be done in...

show div only when printing


javascript,html,css
Let's say that I have <div id="printOnly"> <b>Title</b> <p> Printing content </p> </div> Is it possible to hide this div when page rendering and to show only when printing this div?...

Get info from dynamic/growing form


javascript,jquery,html
Have a form to create a contract, where that contract can have one or more users associated. The area to input the users info, starts with only one field of one user, and one button to add more fields if needed. <div id="utilizadores" class="row"> <div id="utilizador1" class="container-fluid"> <div class="row"> <div...

Dynamically select from a dynamically generated dropdown


php,html,select,drop-down-menu
I have a dynamically generated dropdown list - list of course identifiers and names. On the basis of a variable, “assigned_course_id”, I would like to preselect the appropriate value from the dropdown list. My best attempt is as follows. Thanks in advance for your assistance. <select name="course_id" id="course_id"> <?php $assigned_course_id...

Ruby access words in string


ruby
I don't understand the best method to access a certain word by it's number in a string. I tried using [] to access a word but instead it returns letter. puts s # => I went for a walk puts s[3] # => w ...

Get row index from row id and table id


javascript,html
I am trying to get Index no of a row when hyperlink is clicked i am passing some other data too from this tag <a href="javascript:void(0);" onclick="EditDoctorRow(' + RowCountDoctorVisit + ');"> <i class="fa fa-edit"></i> </a> I tried $('table#DoctorVisit tr#' + RowCount).index() $('table#DoctorVisit tr#' + RowCount).closest.index() But both are not working...

Button not center align in Safari


html,css,safari,center-align
Button not centered align in Safari browser JSFIddle HTML <div class="" style=" width: 100%; "> <input value="Button" class="center-block" type="submit" style=""/> </div> CSS .center-block { display: block; margin-right: auto; margin-left: auto; } Above problem just come in safari, in chrome and firefox it is ...

Text-decoration/CSS causing text to move


html,css,wordpress
I've tried a bunch of techniques to solve this. I've used float (left/right) and played with positioning (absolute & relative). None worked. Basically my navigation keeps moving when the the text decoration (font-weight: bold; in this case) is applied. I'm new to CSS and this is my first header- so...

show/hide an overflow div on anchor


javascript,jquery,html,scroll
I'm trying to make a div appear (if not already visible) and be scrolled to a specific anchor. I found this answer and try to use it but it looks like it doesn't work well... http://stackoverflow.com/a/7513110/3703099 My code : http://jsfiddle.net/0sq2rfcx/9/ As you can see, when you click on button it...

How do I display my mysql table column headers in my php/html output?


php,html,mysql,table,data
2 Questions... Scenario: I would like to query my database table via a form and then display the results that occur(if there are results) and my current situation is that it does work but it clears the form completely and leaves my to an empty page with just the results...

copy last column of one table to another table based on some condition


jquery,html
I have two tables. I want to take last column of table3 and put in to table4 eg:- table3 Names Process_id total construction 1 1111 construction_1 1 0000 engineering 1 2222 permitting 1 3333 eg:- table4 Names Process_id construction 1005 engineering 1005 permitting 1005 final result of table4 output will...

How to make background body overlay when use twitter-bootstrap popover?


html,css,twitter-bootstrap
Currently I used this twitter-bootstrap popover: <button type="button" class="btn btn-default" style="margin-top:11px; padding-bottom:4px; padding-top:4px;" data-container="body" data-toggle="popover" data-trigger="focus" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> Upgrade The output: How I can make the background overlay like bootstrap modal? My expected output I use this jquery to popover $(function(){ $('[data-toggle="popover"]').popover({ placement...

How to remove all the borders of a selectbox?


jquery,html,css,drop-down-menu
How can I remove the all the borders of the selectbox using css or Jquery ? My code, <select id="doctor_ch"> <option value="1" selected>One</option> <option value="2">Two</option> </select> CSS #doctor_ch{ background-color: #88AFF2; color:#fff; margin-top: 15px; } When I use this code it only changes the arrow style. I want to remove the...

How to remove unmatched row in html table using jquery


jquery,html
I have two tables. I want to delete unmatching rows. Compare with first column in Table1 and compare with first column in Table2. Table1 111 aaa 222 bbb 333 ccc Table2 333 xxx 444 zzz 111 vvv result of Table2 333 xxx 111 vvv I tried some thing here Please...

tag in HAML


html,css,haml
How do I create a I-tag in haml? Example: <i class="fa fa-search"></i> ...

Unable to display SQLite data as listview using phonegap


javascript,html,sqlite,cordova
The function get_list() here is able to execute the query but not able to display the rows. function get_list() { db = window.openDatabase("timeDB", "1.0", "time", 200000); db.transaction(populateDB, transaction_error, populateDB_success); function populateDB(tx) { tx.executeSql("SELECT (date) FROM time", [], function (tx, res) { var len = result.rows.length; if (len > 0) {...

Select n elements from hover event


javascript,html,css
I would like to select n elements from the element recieving the hover event. Is this possible in CSS? E.g. In the example below, could I write CSS to select the next 2 items from the item reciving the hover event? <div class="row"> <div class="col-md-1 item"></div> <div class="col-md-1 item"></div> <div...

Website showing differently in windows xp and mobile


html,css
I made a website for one of my clients, and I change the background and font color. Now on windows xp and smartphones the background changed color to the default color and the fonts remained the same. The website is simfest.ro I don't know what to do to make it...

What is Rack::Utils.multipart_part_limit within Rails and what function does it perform?


ruby-on-rails,ruby,rack,multipart
Rack::Utils.multipart_part_limit is set to 128 by default. What purpose does the value have and what effect does it have within the Rails system?...

bootstrap - dynamically changing jumbotron background image


javascript,jquery,html,css,bootstrap
I'm trying to change the background image of the jumbotron div with jQuery when a new tab is clicked, like this: $(".about").click(function(){ $('.active').toggleClass('active'); $('.about').toggleClass('active'); $('.jumbotron').fadeOut(500); //change background image $('.jumbotron').fadeIn(500); }); I tried using $('.jumbotron').css('background-image',url('/path/to/new/image')); but when I include that line, the jumbotron background image doesn't display at all even before...

CSS :hover that shows more than one image


html,css,css3
I have an icon on my website. I want to change the icon to 4 different images when ever I hover over the first one. So I know how to switch between the regilar image to yellow0.png, but how do I continue to the next one (after half a second...

Detect when the jQuery UI slider is being moved?


jquery,html,css,jquery-ui
I have this custom video time UI slider to change the time of the YouTube video when scrubbed. My problem is that when the video is trying to load when the user is moving the slider, it causes the handle to jerk around and flip around. What I'm trying to...

multiple slidershows on one site?


javascript,html
javascript newbee here :| I created a slidershow, but i need to add 4 more slidershows on my website, if i add more slidershows only the first slidershow works, the other stand still :/ can someone explain me, what i need to change, to get multiple slidershows on my website?...

Get elements containing text from array


javascript,jquery,html,arrays,contains
I want to search all the elements containing any string in the array. For example I have following list of items <ul> <li>cricket bat</li> <li>tennis ball</li> <li>golf ball</li> <li>hockey stick</li> </ul> and this array var arr = ['bat', 'ball']; It should select all the elements having text bat and ball....

Keep leading zeroes when converting string to integer


ruby
For no particular reason, I am trying to add a #reverse method to the Integer class: class Integer def reverse self.to_s.reverse.to_i end end puts 1337.reverse # => 7331 puts 1000.reverse # => 1 This works fine except for numbers ending in a 0, as shown when 1000.reverse returns 1 rather...

HTML CSS Two 2-column tables side by side with same height and width


html,css
I'm quering a MySQL database and use a script to put results into an automatically generated HTML-file. I have two tables with 2 columns and 4 rows each that need to be put side-by-side. I have put my html & css in fiddle. http://jsfiddle.net/mika6891/7b0k049r/1/ My HTML code: <!-- gene description...

submitting form then showing loading image by javascript


javascript,html
I am submitting a form and loading loading gif in the same div by replacing html of form by html of loading image. I am first submitting the form then loading gif, because I have to replace the content of div(in which form exist) with loading image. Logs 1,2,3 are...

Div with the form of a pencil [duplicate]


html,css,css-shapes
This question already has an answer here: CSS triangle custom border color 2 answers How can i create a div with the form of a pencil, just like this: It seems a basic thing but im trying to do it since some time ago and still couldnt do it....

Adding horizontal space between 2 buttons using javascript


javascript,jquery,html,css
I am dynamically creating submit buttons using javascript. I wanted to know how to introduce horizontal spacing between every other button in the process. My code is var allFields = commonButtons.concat(extraFields); for (var i = 0; i < allFields.length; i++) { var node = document.createElement("input"); var btName = document.getElementById("submit-buttons"); node.setAttribute('data-value',...

How do I retain search engine accessibility when loading external file into html


javascript,jquery,html,seo,cross-platform
I plan to: $('#main.sidecontent').load('/sidecontent.html'); and insert: <div class="sidecontent" id="main"></div> a div on several html pages since the content of this div is the same and I try to straighten my workflow, basically avoiding editing every single html page when this content div changes. My questions: Is this method recommended for...

Iframe does not show scrollbar


html,css,angularjs,iframe,ionic
Can't seem to make the iframe appear with a scroll-bar. Go to https://billiving-qa.azurewebsites.net/accountant email: [email protected] pass: 111111 Reload the list with F5, then click new invoice on the right side. The content is lengthy but doesn't show the scroll-bar. My css uses the following: .frm { position: fixed; width: 100%;...

Ruby on Rails - Help Adding Badges to Application


ruby-on-rails,ruby,rest,activerecord,one-to-many
I'm creating a rails application that is a backend for a mobile application. The backend is implemented with a RESTful web API. Currently I am trying to add gamification to the platform through the use of badges that can be earned by the user. Right now the badges are tied...

HTML elements in Angular bindings expression


html,angularjs
Is that possible to insert HTML elements in an Angular expression ? Let's take a few example. I would like to do something like this: <table> <tr ng-repeat="employee in employees"> <td>{{employee.firstname ? employee.firstname : '<p style="color:red">No name</p>'}}</td> <td>{{employee.job}}</td> </tr> </table> In our controller, we have: $scope.employees = [{firstname:'Bob', job:'Developer'}, {firstname:'Paul',...

Target next instance of an element/div


javascript,jquery,html
I have the following HTML structure and JavaScript file: .html <li> <button class="show-more"></button> some more elements <div class="hidden"></div> </li> JavaScript $( ".show-more" ).click(function() { event.preventDefault(); $( this ).next().slideToggle( "fast", function() { }); }); I need the click event to toggle the next first instance of .hidden, however the click event...

Make instance variable accessible through hash in Ruby


ruby-on-rails,ruby,ruby-on-rails-4,activerecord
In Rails, ActiveRecord objects, attributes are accessible via method as well as through Hash. Example: user = User.first # Assuming User to be inheriting from ActiveRecord::Base user.name # Accessing attribute 'name' via method user[:name] # Attribute 'name' is accessible via hash as well How to make instance variables accessible through...

How to pivot array into another array in Ruby


arrays,ruby,csv
I have a multidimensional array like this one : myArray = [["Alaska","Rain","3"],["Alaska","Snow","4"],["Alabama","Snow","2"],["Alabama","Hail","1"]] I would like to end up with CSV output like this. State,Snow,Rain,Hail Alaska,4,3,nil Alabama,2,nil,1 I know that to get this outputted to CSV the way I want it I have to have output array like this: outputArray =[["State","Snow","Rain","Hail"],["Alaska",4,3,nil],["Alabama",2,nil,1]]...

Setting radio button checked true on button click


javascript,jquery,html
I have a table cell that lights up when selected. There will be many buttons on the page but only one choice can be made at a time. How can I make them mutually exclusive using hidden input radio tags? (in order to handle the group later) <td class="choice-option"> <input...

jQuery click open one dropdown


javascript,jquery,html
In a site I have several 'dropdown' which become visible when you press a plus sign. I did this with jQuery (see code below), but when pressing the button every dorpdown opens. How can I only open the dropdown where the button is pressed (Without writing this code for every...

On rendering from controller, current_page method does not seem to work


ruby-on-rails,ruby,ruby-on-rails-4,model-view-controller
I have a navigation bar included in application.html.erb. Because for some pages, such as the signup page, I need to place additional code inside the navigation bar, I have excluded those pages for showing the navigation bar through application.html.erb and instead included it in their respective view pages. See code...

Top header 100% of screen, but body only 70%?


html,css
Pretty new to CSS and just having quite a bit of trouble, I've tried everything, searched here, but can't seem to make it work. Right now my header/body are both 70% of the screen. However I want my top header (.mainheader) to be 100% of the screen, but have the...

Ruby boolean logic: some amount of variables are true


ruby
Let say I have 3 variables: a, b, c. How can I check that just zero or one of them is true?...