Story Detail 1.0 - related content - asset types - aspect ratio

Developer
Tom Markart
Size
14,515 Kb
Views
22,264
  1. Story Detail 1.0 - related content - asset types - aspect ratio Previews
  2. Story Detail 1.0 - related content - asset types - aspect ratio HTML Codes
  3. Story Detail 1.0 - related content - asset types - aspect ratio CSS Codes
  4. Story Detail 1.0 - related content - asset types - aspect ratio JS Codes

How do I make an story detail 1.0 - related content - asset types - aspect ratio?

What is a story detail 1.0 - related content - asset types - aspect ratio? How do you make a story detail 1.0 - related content - asset types - aspect ratio? This script and codes were developed by Tom Markart on 06 November 2022, Sunday.

Story Detail 1.0 - related content - asset types - aspect ratio Previews
IQ Test

Story Detail 1.0 - related content - asset types - aspect ratio - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Story Detail 1.0 - related content - asset types - aspect ratio</title> <link rel="stylesheet" type="text/css" href="http://www.tmarkart.com/codepen/fonts/mcclatchy-fonts.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <header class="header-loading"> <div class="masthead-row element-spacing-medium" id="masthead-container"> <div class="container"> <div class="masthead-row"> <div class="branding col-xs-12 col-md-8"> <img class="img-responsive" src="http://www.tmarkart.com/codepen/images/miami-herald-logo.png" /> </div> <div class="col-md-4 visible-lg visible-md"> <img src="http://www.tmarkart.com/codepen/images/234x60.jpg" /> </div> </div> </div> </div>
</header>
<div class="ad element-spacing-large visible-lg visible-md" id="leaderboard"> <img src="http://www.tmarkart.com/codepen/images/728x90.jpg" />
</div>
<div class="ad element-spacing-medium visible-sm visible-xs" id="mobile-leaderboard"> <img src="http://www.tmarkart.com/codepen/images/320x50.jpg" />
</div>
<section class="container"> <div class="row element-spacing-large"> <div class="col-md-8 col-sm-12 story-body"> <div class="primary-asset element-spacing-medium"> <img class="img-responsive" src="http://www.tmarkart.com/codepen/images/story-primary-asset.jpg" /> <div class="current-caption"> <p class="caption-text"> CEOs of major companies are taking stands in regards to the results of the November 2016 U.S. election, a departure from the traditional model of not mixing politics with business that the major brands have long espoused. <strong>Eric Risberg</strong>, File AP Photo </p> </div> <div class="hidden-caption-link visible-xs"> <a class="caption-toggle" href="javascript:void(0);"></a> </div> </div> <div class="col-md-1 visible-lg visible-md" id="social-wrapper"> <div id="social"> <img src="http://www.tmarkart.com/codepen/images/social-icons-vert.png" /> </div> </div> <div class="col-md-11 col-sm-12"> <h1 class="heading kicker link element-spacing-small"> <a href="javascript:void(0);">Business</a> </h1> <div class="story-header"> <h1 class="title"> Facebook's fake news problem: What's its responsibility? </h1> </div> <div class="byline"> <a href="javascript:void(0);"> By Chip Alexander</a> </div> <div class="visible-sm visible-xs element-spacing-small" id="social-horiz"> <img src="http://www.tmarkart.com/codepen/images/social-icons-horiz-02.png" /> </div> <p class="published-date"> November 17, 2016 2:51 AM </p> <div class="content-body"> <p> NEW YORK - Facebook is under fire for failing to rein in fake and biased news stories that some believe may have swayed the presidential election. Its predicament stems from this basic conundrum: It exercises great control over the news its users see, but it declines to assume the editorial responsibility that traditional publishers do. </p> <p> On Monday, Facebook took a minor step to address the issue, clarifying its advertising policy to emphasize that it won't display ads on sites that run information that is "illegal, misleading or deceptive, which includes fake news." The company said it was merely making explicit a policy that was already implied. </p> <div class="headline-list element-spacing-large" id="story-read-more"> <h1 class="heading"> Read More </h1> <ul id="related-links"> <li class="clearfix"> <div class="teaser"> <a href="javascript:void(0);"> <div class="video-asset-wrapper img-responsive"> <img class="picture img-responsive" src="http://www.tmarkart.com/codepen/images/thumbnail-4-3-01.png" /><span class="video-overlay"><img src="http:www.tmarkart.com/codepen/images/video-icon.png" /></span> </div> </a> <h4 class="title"> <a href="javascript:void(0);">Google fooled by fake election news </a> </h4> </div> </li> </ul> </div> <p> Its move followed a similar step by Google earlier on Monday, after the search giant acknowledged that it had let a false article about the election results slip into its list of recommended news stories. </p> <p> In the case of both companies, the aim is to discourage fake-news sites by depriving them of revenue. </p> <div class="headline-list element-spacing-large" id="story-read-more"> <h1 class="heading"> Read More </h1> <ul id="related-links"> <li class="clearfix"> <div class="teaser"> <a href="javascript:void(0);"> <div class="image-placeholder"> <div class="placeholder-content"> <img src="http://www.miamiherald.com/static/images/miamiherald/logo-sm.png" /> </div> </div> </a> <h4 class="title"> <a href="javascript:void(0);"> Zuckerberg: 'Crazy' to say Facebook influenced election</a> </h4> </div> </li> </ul> </div> <p> Facebook is also said to be facing brewing internal turmoil over its influence and what it can and should do about it. </p> <p> Founder and CEO Mark Zuckerberg, however, insists that Facebook remains a neutral technology platform where its users can share anything they want, with only a tiny fraction of it fake or problematic. </p> <div class="headline-list element-spacing-large" id="story-read-more"> <h1 class="heading"> Read More </h1> <ul id="related-links"> <li class="clearfix"> <div class="teaser"> <a href="javascript:void(0);"><img class="picture img-responsive" src="http://www.tmarkart.com/codepen/images/thumbnail-4-3-03.png" /></a> <h4 class="title"> <a href="javascript:void(0);"> Fake news will have real policy consequences </a> </h4> </div> </li> </ul> </div> <p> Last week, Zuckerberg called the idea that voters might have been influenced by what they saw on Facebook — fake, uber-partisan stories, such as a false one about Pope Francis endorsing Donald Trump for president — "pretty crazy." </p> <p> Employees have expressed concern over Facebook's role in spreading misinformation and racist memes largely associated with the alt-right, according to The New York Times and BuzzFeed. Some have reportedly formed an unofficial task force to investigate the role the company played in the election. </p> <h3> Facebook Control </h3> <p> People update to Facebook so frequently that the company has no choice but to filter what everyone sees in their news feeds — the main artery through which users see posts from their friends, family, businesses, news sources and celebrities they follow. </p> <p> The company's secret algorithms are designed to deliver the posts from friends and other sources that will draw people in and lead them to read and click and "like" and share — "maximizing their engagement," in Facebook's jargon. </p> <p> Facebook frequently tweaks its algorithm to improve engagement. Various changes have been aimed at shutting out sites that promote clickbait and other garbage that users say they don't want to see, even as they click on it and share away. When users are surrounded by posts they want to see, they're more likely to stick around. </p> <p> That's key to Facebook's advertising business. But it can be problematic when it comes to false but highly interesting posts. </p> <div class="headline-list element-spacing-large" id="story-related" style="margin-top:40px;"> <h1 class="heading link"> Related content from the Miami Herald </h1> <ul id="related-content"> <li class="clearfix"> <div class="teaser"> <a href="javascript:void(0);"> <div class="video-asset-wrapper img-responsive"> <img class="picture img-responsive" src="http://www.tmarkart.com/codepen/images/thumbnail-4-3-01.png" /><span class="video-overlay"><img src="http:www.tmarkart.com/codepen/images/video-icon.png" /></span> </div> </a> <h4 class="title"> <a href="javascript:void(0);">Google fooled by fake election news</a> </h4> </div> </li> <div class="clearfix"></div> <li class="clearfix"> <div class="teaser"> <a href="javascript:void(0);"> <div class="image-placeholder"> <div class="placeholder-content"> <img src="http://www.miamiherald.com/static/images/miamiherald/logo-sm.png" /> </div> </div> </a> <h4 class="title"> <a href="javascript:void(0);"> Zuckerberg: 'Crazy' to say Facebook influenced election </a> </h4> </div> </li> <div class="clearfix"></div> <li class="clearfix"> <div class="teaser"> <a href="javascript:void(0);"><img class="picture img-responsive" src="http://www.tmarkart.com/codepen/images/thumbnail-4-3-03.png" /></a> <h4 class="title"> <a href="javascript:void(0);"> Fake news will have real policy consequences </a> </h4> </div> </li> </ul> </div> <p> Facebook's news feed "maximizes for engagement. As we've learned in this election, bulls-t is highly engaging," former Facebook product designer Bobby Goodlatte wrote in an Election Day post . "Highly partisan, fact-light outlets" on both the right and the left, he wrote, "have no concern for the truth, and really only care for engagement. ... It's now clear that democracy suffers if our news environment incentivizes bulls-t." </p> <p> Social media companies today have to acknowledge that they are news organizations, said Jeffrey Herbst, president and CEO of the Newseum, a journalism museum in Washington. "Not like news companies of the 20th century," he added. "But not just pipes where people get their news. They determine what is news." </p> <p> In a post Saturday night, Zuckerberg rejected that idea. </p> <p> "News and media are not the primary things people do on Facebook, so I find it odd when people insist we call ourselves a news or media company in order to acknowledge its importance," he wrote. "Facebook is mostly about helping people stay connected with friends and family." </p> <h3> Facebok as Newspaper — No, Scratch That </h3> <p> Back in 2013, Zuckerberg said he wanted Facebook to be people's "own personal newspaper," one that delivers the stories most interesting and important to them. That's still the company's goal — though minus any reference to itself as a media company of any kind. </p> <p> Of course, fake stuff has existed on the internet long before Facebook. And under the law, Facebook is no more responsible for what appears on its site than "the paper mills that print newspapers are responsible for their content," said Steve Jones, a professor at the University of Illinois at Chicago who studies communication technology. </p> <p> At the same time, Jones said he thinks the broader issue of Facebook's responsibility is one that's going to be "debated forever." </p> <p> "Even the notion of truth is something that's highly contested at this point," he said. </p> </div> </div> </div> <div class="col-md-4 col-sm-12 right-rail"> <div class="ad visible-lg visible-md"> <img src="http://www.tmarkart.com/codepen/images/300x600b.jpg" /> </div> </div> </div> <div class="clearfix"></div>
</section> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Story Detail 1.0 - related content - asset types - aspect ratio - Script Codes CSS Codes

.element-spacing-large { margin-bottom: 40px;
}
.element-spacing-medium { margin-bottom: 25px !important;
}
.element-spacing-small { margin-bottom: 15px !important;
}
::selection { background: #b3deff;
}
::-moz-selection { background: #b3deff;
}
header { height: 80px; width: 100%; z-index: 10000;
}
.header-loading { position: relative; transition: top 0.4s ease-in-out;
}
.header-down { position: fixed; top: 0; transition: top 0.4s ease-in-out;
}
.header-up { position: fixed; top: -80px; transition: top 0.4s ease-in-out;
}
#masthead-container { background: #0066b3; margin-bottom: 0; min-height: 65px; padding: 10px 0; position: relative;
}
.branding { float: left; max-width: 75%;
}
.ad { text-align: center; margin-bottom: 40px;
}
#mobile-leaderboard { background-color: #fff; background-color: rgba(255, 255, 255, 0.9); display: block; text-align: center; width: 100%;
}
#mobile-leaderboard.sticky-ad { -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25); -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25); padding: 5px 0;
}
.sticky-ad { padding: 5px 0; position: fixed; top: 0px; transition: top 0.2s ease-in-out; z-index: 101;
}
.sticky-ad-header { top: 65px; transition: top 0.2s ease-in-out; padding: 5px 0;
}
h1.heading { font-family: 'McClatchy Sans Cond', 'Roboto Condensed Medium', 'HelveticaNeue-CondensedBold', sans-serif; font-size: 14px; font-weight: 600; line-height: 1; margin: 0; text-transform: uppercase;
}
h1.heading a { color: #379ad3; text-decoration: none;
}
h1.heading .fa { color: #379ad3;
}
h1.kicker { text-align: center;
}
.published-date { color: #adadad; display: inline-block; font-family: 'McClatchy Sans Cond', 'Roboto Condensed Medium', 'HelveticaNeue-CondensedBold', sans-serif; font-size: 14px; text-transform: uppercase;
}
h1.title { font-family: 'McClatchy Slab', Georgia, Times, 'Times New Roman', serif; font-size: 30px; /* was 36px */ font-weight: 500; line-height: 1.25; margin: 10px 0 15px 0; text-align: center;
}
.byline { color: #000; font-family: 'McClatchy Sans Cond', 'Roboto Condensed Medium', 'HelveticaNeue-CondensedBold', sans-serif; font-size: 14px; margin-bottom: 25px; padding-bottom: 3px; text-align: center; text-transform: uppercase;
}
.byline a { color: #9e9ca1;
}
.byline p { margin: 0;
}
.social-icons-top { position: relative;
}
.social-icons-float { position: fixed; top: 60px;
}
.social-fix { background-color: #ff0; position: fixed; top: 20px;
}
#social-horiz { text-align: center; padding-bottom: 15px;
}
.content-body { margin-bottom: 40px;
}
.content-body p { font-family: 'Lyon', Georgia, serif; font-size: 17px; line-height: 1.5; margin-bottom: 1em;
}
.content-body h3 { font-family: 'McClatchy Slab', Georgia, Times, 'Times New Roman', serif; font-size: 16px; font-weight: 600;
}
.primary-asset { margin-left: -15px; margin-right: -15px; position: relative; z-index: 100;
}
.current-caption { background-color: rgba(0, 0, 0, 0.5); color: #fff; position: absolute; bottom: 0;
}
.current-caption .caption-text { padding: 10px;
}
.hidden-caption { background-color: rgba(0, 0, 0, 0.5); bottom: 0; padding: 10px; position: absolute; right: 0;
}
.hidden-caption a { color: #fff;
}
.hidden-caption a.caption-toggle { text-decoration: none;
}
.hidden-caption-link { height: 100%; position: absolute; top: 0; width: 100%; z-index: 1000;
}
.hidden-caption-link a { height: 100%; position: absolute; width: 100%;
}
.headline-list { border-left: 2px solid #379ad3; padding-left: 15px; margin-top: 40px;
}
.headline-list .heading { color: #379ad3; padding: 0;
}
.headline-list ul { margin-bottom: 0;
}
.headline-list ul li { border-bottom: 1px solid #ddd;
}
.headline-list ul li .picture { float: left; padding: 0 10px 10px 0; width: 33%;
}
.headline-list ul li .video-asset-wrapper { float: left; padding: 0 10px 10px 0; position: relative; text-align: center; width: 33%;
}
.headline-list ul li .video-asset-wrapper .picture { padding: 0; width: 100%;
}
.headline-list ul li .video-asset-wrapper .glyphicon { background-color: #000; border-radius: 4px; box-sizing: content-box; color: #fff; font-size: 24px; left: 50%; margin-left: -20px; margin-top: -0.6em; opacity: .5; padding: 5px; position: absolute; top: 45%;
}
.headline-list ul li .video-asset-wrapper .fa { background-color: #000; border-radius: 50%; box-sizing: content-box; color: #fff; font-size: 30px; left: 50%; margin-left: -15px; opacity: .9; padding: 0px; position: absolute; top: 30%;
}
.headline-list ul li .video-asset-wrapper .video-overlay { position: absolute; left: calc(50% - 17px); top: 30%;
}
.headline-list ul li .video-asset-wrapper .video-overlay img { width: 25px;
}
.headline-list ul li .image-placeholder { position: relative; background-color: #0066b3; background: -webkit-linear-gradient(left top, #379ad3, #0066b3); background: -o-linear-gradient(bottom right, #379ad3, #0066b3); background: -moz-linear-gradient(bottom right, #379ad3, #0066b3); background: linear-gradient(to bottom right, #379ad3, #0066b3); color: #fff; float: left; margin: 0 10px 10px 0; text-align: center; width: calc(33% - 10px);
}
.headline-list ul li .image-placeholder:before { display: block; content: ""; width: 100%; padding-top: 75%;
}
.headline-list ul li .image-placeholder > .placeholder-content { position: absolute; top: 0; left: 0; right: 0; bottom: 0;
}
.headline-list ul li .image-placeholder > .placeholder-content span:before { content: "4";
}
.headline-list ul li .image-placeholder > .placeholder-content span:after { content: "3";
}
.headline-list ul li .image-placeholder:hover { background: #0066b3;
}
.headline-list ul li .image-placeholder img { margin-top: 30%; width: 75%;
}
.headline-list ul li:last-child { border-bottom: none; padding-bottom: 0;
}
.headline-list ul li:last-child .title { margin-bottom: 0;
}
.headline-list ul li:last-child .picture { padding-bottom: 0;
}
.headline-list ul .teaser a { color: #000; font-family: 'McClatchy Slab', Georgia, Times, 'Times New Roman', serif; font-size: 15px; font-weight: 400; line-height: 1.25em; text-decoration: none;
}
.headline-list ul .teaser a:hover { color: #0d76ba;
}
.headline-list ul .sponsored .sponsor-label { color: #d05d11; font-family: 'McClatchy Sans', Arial, 'Helvetica Neue', Helvetica, sans-serif !important; font-size: 12px; margin: 5px 0; text-transform: uppercase;
}
.headline-list ul .sponsored .timestamp { color: #aaa; display: block; font-size: 12px; padding-bottom: 5px;
}
.headline-list #related-links li { border-bottom: none; padding-bottom: 0;
}
.headline-list #related-links li .video-asset-wrapper { padding-bottom: 0;
}
.headline-list ul#related-links li .image-placeholder { margin: 0 10px 0 0;
}
.video-widget article { width: 100%;
}
.video-widget article img.media { float: left; padding-right: 15px; width: 50%;
}
.video-widget article img.embed-play { margin-bottom: 15px; width: 100%;
}
.video-widget article a { color: #000; text-decoration: none;
}
footer { background: #424242; height: 300px;
}
@media screen and (min-width: 768px) { #masthead-container { margin-bottom: 20px; } h1.title { font-size: 34px; line-height: 1.3; text-align: left; } h1.kicker { text-align: left; } .primary-asset { margin-left: 15px; margin-right: 15px; } .current-caption { background-color: rgba(0, 0, 0, 0); color: #000; padding-top: 10px; position: relative; } .current-caption .caption-text { padding: 0; margin-right: 0; } .headline-list ul li .picture { width: 20%; } .headline-list ul li .video-asset-wrapper { width: 20%; } .headline-list ul li .image-placeholder { width: calc(20% - 10px); } .headline-list ul li .video-overlay { top: 25%; }
}
@media screen and (min-width: 992px) { #mobile-leaderboard, .header-loading, .header-up, .header-down { position: relative !important; margin-bottom: 30px; } h1.title { font-size: 45px; line-height: 1.3; text-align: left; } .byline { margin-bottom: 5px; text-align: left; }
}

Story Detail 1.0 - related content - asset types - aspect ratio - Script Codes JS Codes

$(document).ready(function(){ // ----- Primary Caption Toggle ----- $(window).resize(function() { // This will fire each time the window is resized: if($(window).width() >= 740) { $('.current-caption').show(); } else { $('.current-caption').hide(); } }).resize(); // This will simulate a resize to trigger the initial run. $(".caption-toggle").click(function(){ $(".current-caption").slideToggle(250); //$(".hidden-caption").hide(); }); // ----- Social Icons Lock -----	$(window).scroll(function(){ var sPos = $(window).scrollTop(); if( sPos <= 725 ){ $('#social').removeClass(); $('#social').addClass('social-icons-top'); } if( sPos > 725 ){ $('#social').removeClass(); $('#social').addClass('social-icons-float'); }	}); //----- Sticky Leaderboard -----	$(window).scroll(function(){ var sPos = $(window).scrollTop(); if( sPos <= 87 ){ $('#mobile-leaderboard').removeClass('sticky-ad'); } if( sPos > 87 ){ $('#mobile-leaderboard').addClass('sticky-ad'); }	});
});
// ----- Toggle Header on Scoll -----
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var headerHeight = $('header').outerHeight();
$(window).scroll(function(event){ didScroll = true;
});
setInterval(function() { if (didScroll) { hasScrolled(); didScroll = false; }
}, 250);
function hasScrolled() { var st = $(this).scrollTop(); //alert ("has scrolled"); // Make sure they scroll more than delta if(Math.abs(lastScrollTop - st) <= delta) return; // If they scrolled down and are past the navbar, add class .header-up. // This is necessary so you never see what is "behind" the navbar. if (st > lastScrollTop && st > headerHeight){ // Scroll Down $('header').removeClass('header-down').addClass('header-up'); $('#mobile-leaderboard').removeClass('sticky-ad-header'); } else { // Scroll Up if(st + $(window).height() < $(document).height()) { $('header').removeClass('header-up').addClass('header-down'); $('#mobile-leaderboard').addClass('sticky-ad-header'); } } // Scrolling back to top of page - make header display relative if (st < headerHeight){ $('header').removeClass('header-up').removeClass('header-down').addClass('header-loading'); } lastScrollTop = st;
}
Story Detail 1.0 - related content - asset types - aspect ratio - Script Codes
Story Detail 1.0 - related content - asset types - aspect ratio - Script Codes
Home Page Home
Developer Tom Markart
Username tmarkart
Uploaded November 06, 2022
Rating 3
Size 14,515 Kb
Views 22,264
Do you need developer help for Story Detail 1.0 - related content - asset types - aspect ratio?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Tom Markart (tmarkart) Script Codes
Name
Story Detail - expand secondary asset inline
Template - responsive story detail
Pipleline Opportunities Email
McClatchy Newsrooms
Select2
McClatchy svg logos
CSS Animation Playground
Election Widget
Skewed Header - svg
Overlay nav
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!