Created
October 23, 2012 11:02
-
-
Save icodesido/3938178 to your computer and use it in GitHub Desktop.
Most popular in Technology with the styles for the whole promo col
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8" /> | |
| </head> | |
| <body> | |
| <style> | |
| body.article #content .related-content p, | |
| #content .related-content ul li { | |
| margin-bottom: 0 !important; | |
| } | |
| .list-of-trails .inline-pic { | |
| float: left; | |
| width: 100%; | |
| } | |
| .list-of-trails div.rating-container { | |
| padding-top: 3px !important; | |
| margin-top: 3px !important; | |
| height: 10px !important; | |
| } | |
| .list-of-trails h4 { | |
| font-family: georgia, serif !important; | |
| font-size: 15px !important; | |
| font-weight: normal !important; | |
| line-height: 18px !important; | |
| } | |
| .list-of-trails .trail-text { | |
| display: none !important; | |
| } | |
| .list-of-trails img[width='280'] { | |
| width: 300px; | |
| height: 180px; | |
| margin-top: -7px; | |
| } | |
| .list-of-trails .inline-pic, | |
| .most-pop .thumb { | |
| border-top-color: #bebebe !important; | |
| border-top-style: solid !important; | |
| } | |
| .most-pop, | |
| .promo-component.list-of-trails { | |
| border-top-color: #d61d00 !important; | |
| } | |
| .most-pop { | |
| min-height: 380px; | |
| font-family: georgia, serif; | |
| font-size: 15px; | |
| line-height: 18px; | |
| } | |
| .most-view-text { | |
| float: left; | |
| width: 200px; | |
| } | |
| .most-pop .thumb { | |
| border-top-style: solid !important; | |
| float: left; | |
| padding-top: 4px; | |
| } | |
| .most-pop a { | |
| float: right; | |
| width: 290px; | |
| } | |
| .most-pop img { | |
| float: left; | |
| margin: 0 10px; | |
| } | |
| </style> | |
| <script> | |
| jQuery(function() { | |
| initMostInSection(); | |
| }); | |
| var initMostInSection = function() { | |
| function loadJson(data) { | |
| var jsonPrefix = data.response.mostViewed.slice(0,5); | |
| var mostViewed = []; | |
| jQuery.each(jsonPrefix, function(key, val) { | |
| var headline = val.webTitle; | |
| var link = val.webUrl; | |
| var thumbnail = val.fields.thumbnail; | |
| mostViewed.push('<li class="l1 thumb">'+(mostViewed.length+1)+'<a href='+link+'><img src="' + thumbnail + '" width="70" height="42"><span class="most-view-text">'+headline+'</span></a></li>'); | |
| }); | |
| jQuery('<ol/>', { | |
| html: mostViewed.join('') | |
| }).appendTo('.most-pop-section .bd'); | |
| } | |
| var urlQueried = 'http://content.guardianapis.com//technology?format=json&show-fields=thumbnail&order-by=newest&show-most-viewed=true'; | |
| jQuery.ajax({ | |
| url: urlQueried, | |
| cache: true, | |
| success: loadJson, | |
| dataType: 'jsonp', | |
| jsonpCallback: 'ic' | |
| }); | |
| } | |
| </script> | |
| <div class="promo-component most-pop most-pop-section"> | |
| <div class="hd"> | |
| <h3>Most popular in Technology</h3> | |
| </div> | |
| <div class="bd"> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment