Election Widget Combo

Developer
Tom Markart
Size
10,053 Kb
Views
10,120
  1. Election Widget Combo Previews
  2. Election Widget Combo HTML Codes
  3. Election Widget Combo CSS Codes
  4. Election Widget Combo JS Codes

How do I make an election widget combo?

What is a election widget combo? How do you make a election widget combo? This script and codes were developed by Tom Markart on 06 November 2022, Sunday.

Election Widget Combo Previews
IQ Test

Election Widget Combo - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Election Widget Combo</title> <link rel='stylesheet prefetch' href='http://www.mcclatchydc.com/static/theme/mcclatchydc-2020/base/css/main-1.0.90-05f5567.css?sVer=1.0.90-05f5567'>
<link rel='stylesheet prefetch' href='http://media.mcclatchydc.com/static/graphics/20160220-ElexMap/css/ResultsTable.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="content-body"> <div class="heading"> Election Results </div> <div id="election-embeds-full"> <div class="col-sm-4 col-xs-12 border-right border-xs-remove-right"> <div class="resultsTable"> <h4> County Commissioner District 1 </h4> <div class="updated"> Last Updated: 11/07/16 8:00 PM ET </div> <table> <tr> <td class="winner"> <span aria-hidden="Winner" class="glyphicon glyphicon-check"></span> </td> <td> Mike McAllister<span class="affiliation">(D)</span> </td> <td class="tot"> 13,200 </td> <td class="pct"> 66% </td> </tr> <tr> <td> &nbsp; </td> <td> Michelle Longlast-Name<span class="affiliation">(R)</span> </td> <td class="tot"> 6,800 </td> <td class="pct"> 44% </td> </tr> </table> <div class="reporting"> 78% of Precincts Reporting </div> </div> </div> <div class="col-sm-4 col-xs-12 border-right border-xs-remove-right"> <div class="resultsTable"> <h4> County Commissioner District 2 </h4> <div class="updated"> Last Updated: 11/07/16 8:00 PM ET </div> <table> <tr> <td class="winner"> <span aria-hidden="Winner" class="glyphicon glyphicon-check"></span> </td> <td> Ken Griffen<span class="affiliation">(D)</span> </td> <td class="tot"> 10,600 </td> <td class="pct"> 53% </td> </tr> <tr> <td> &nbsp; </td> <td> Christopher Davidson<span class="affiliation">(R)</span> </td> <td class="tot"> 9,400 </td> <td class="pct"> 47% </td> </tr> </table> <div class="reporting"> 45% of Precincts Reporting </div> </div> </div> <div class="col-sm-4 col-xs-12"> <div class="resultsTable"> <h4> County Commissioner District 3 </h4> <div class="updated"> Last Updated: 11/07/16 8:00 PM ET </div> <table> <tr> <td class="winner"> <span aria-hidden="Winner" class="glyphicon glyphicon-check"></span> </td> <td> Ray Mathews<span class="affiliation">(R)</span> </td> <td class="tot"> 13,400 </td> <td class="pct"> 67% </td> </tr> <tr> <td class="winner"> <span>&nbsp;</span> </td> <td> Jeff Ventimiglia<span class="affiliation">(D)</span> </td> <td class="tot"> 6,600 </td> <td class="pct"> 33% </td> </tr> </table> <div class="reporting"> 62% of Precincts Reporting </div> </div> </div> <div class="clearfix"></div> <div class="view-more-latest readmore"> <a href="javascript:void(0);">View more results</a> </div> </div> <div id="election-embeds-full"> <div class="col-sm-6 border-right border-xs-remove-right"> <div class="resultsTable"> <h4> County Commissioner District 4 </h4> <div class="updated"> Last Updated: 11/07/16 8:00 PM ET </div> <table> <tr> <td class="winner"> <span aria-hidden="Winner" class="glyphicon glyphicon-check"></span> </td> <td> Ray Mathews<span class="affiliation">(R)</span> </td> <td class="tot"> 14,000 </td> <td class="pct"> 70% </td> </tr> <tr> <td> &nbsp; </td> <td> Mike Schwab<span class="affiliation">(R)</span> </td> <td class="tot"> 4,200 </td> <td class="pct"> 21% </td> </tr> <tr> <td> &nbsp; </td> <td> Jeff Ventimiglia<span class="affiliation">(D)</span> </td> <td class="tot"> 1,400 </td> <td class="pct"> 7% </td> </tr> <tr> <td> &nbsp; </td> <td> C.J. Webster<span class="affiliation">(D)</span> </td> <td class="tot"> 400 </td> <td class="pct"> 2% </td> </tr> </table> <div class="reporting"> 78% of Precincts Reporting </div> </div> </div> <div class="col-sm-6"> <div class="resultsTable"> <h4> County Commissioner District 5 </h4> <div class="updated"> Last Updated: 11/07/16 8:00 PM ET </div> <table> <tr> <td class="winner"> <span aria-hidden="Winner" class="glyphicon glyphicon-check"></span> </td> <td> Mike McAllister<span class="affiliation">(D)</span> </td> <td class="tot"> 13,200 </td> <td class="pct"> 66% </td> </tr> <tr> <td> &nbsp; </td> <td> Michelle Longlast-Name<span class="affiliation">(R)</span> </td> <td class="tot"> 6,800 </td> <td class="pct"> 44% </td> </tr> </table> <div class="reporting"> 78% of Precincts Reporting </div> </div> </div> <div class="clearfix"></div> <div class="view-more-latest readmore"> <a href="javascript:void(0);">View more results</a> </div> </div> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel nisl in nibh lobortis imperdiet nec at lectus. Suspendisse mollis aliquet diam. Suspendisse commodo posuere lacus at bibendum. Donec cursus, neque non semper finibus, turpis justo pellentesque ligula, tincidunt porta urna turpis eu eros. Vestibulum id nulla id sem venenatis ultrices. Nullam malesuada dictum varius. Donec ante justo, aliquam ut dolor et, faucibus rhoncus diam. Integer dictum, justo a tincidunt suscipit, ipsum neque tincidunt ante, quis posuere est augue at nisl. Curabitur dictum consequat molestie. </p> <p> Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed vel lorem sed odio egestas vestibulum a ut tellus. Donec lobortis orci vitae augue blandit mattis. Duis ac aliquam tellus. Donec facilisis tortor dui. Integer in eleifend tellus. Nullam sit amet eros a quam feugiat faucibus. Mauris et tortor in risus fermentum dignissim eget sed ex. Vestibulum tincidunt quis urna non tempus. Sed sit amet est dapibus, vestibulum urna vel, egestas diam. In sed varius nisi, et auctor nisl. </p> <div id="election-embeds-inline"> <div class="resultsTable" data-electiondate="2016-03-01" data-officename="County Commissioner" data-racetype="Special General" data-seatname="District 2" data-statepostal="GA"> <h4> County Commissioner District 1 </h4> <div class="updated"> Last Updated: 11/07/16 8:00 PM ET </div> <table> <tr> <td class="winner"> <span aria-hidden="Winner" class="glyphicon glyphicon-check"></span> </td> <td> Mike McAllister<span class="affiliation">(D)</span> </td> <td class="tot"> 13,200 </td> <td class="pct"> 66% </td> </tr> <tr> <td> &nbsp; </td> <td> Michelle Longlast-Name<span class="affiliation">(R)</span> </td> <td class="tot"> 6,800 </td> <td class="pct"> 44% </td> </tr> </table> <div class="reporting"> 78% of Precincts Reporting </div> </div> <div class="resultsTable" data-electiondate="2016-03-01" data-officename="County Commissioner" data-racetype="Special General" data-seatname="District 2" data-statepostal="GA"> <h4> County Commissioner District 2 </h4> <div class="updated"> Last Updated: 11/07/16 8:00 PM ET </div> <table> <tr> <td class="winner"> <span aria-hidden="Winner" class="glyphicon glyphicon-check"></span> </td> <td> Ken Griffen<span class="affiliation">(D)</span> </td> <td class="tot"> 10,600 </td> <td class="pct"> 53% </td> </tr> <tr> <td> &nbsp; </td> <td> Christopher Davidson<span class="affiliation">(R)</span> </td> <td class="tot"> 9,400 </td> <td class="pct"> 47% </td> </tr> </table> <div class="reporting"> 45% of Precincts Reporting </div> </div> <div class="resultsTable" data-electiondate="2016-03-01" data-officename="County Commissioner" data-racetype="Special General" data-seatname="District 2" data-statepostal="GA"> <h4> County Commissioner District 3 </h4> <div class="updated"> Last Updated: 11/07/16 8:00 PM ET </div> <table> <tr> <td class="winner"> &nbsp; </td> <td> Jeff Ventimiglia<span class="affiliation">(D)</span> </td> <td class="tot"> 6,600 </td> <td class="pct"> 33% </td> </tr> <tr> <td> <span aria-hidden="Winner" class="glyphicon glyphicon-check"></span> </td> <td> Ray Mathews<span class="affiliation">(R)</span> </td> <td class="tot"> 13,400 </td> <td class="pct"> 67% </td> </tr> </table> <div class="reporting"> 62% of Precincts Reporting </div> </div> <div class="resultsTable" data-electiondate="2016-03-01" data-officename="County Commissioner" data-racetype="Special General" data-seatname="District 2" data-statepostal="GA"> <h4> County Commissioner District 4 </h4> <div class="updated"> Last Updated: 11/07/16 8:00 PM ET </div> <table> <tr> <td class="winner"> &nbsp; </td> <td> C.J. Webster<span class="affiliation">(D)</span> </td> <td class="tot"> 400 </td> <td class="pct"> 2% </td> </tr> <tr> <td class="winner"> &nbsp; </td> <td> Jeff Ventimiglia<span class="affiliation">(D)</span> </td> <td class="tot"> 1,400 </td> <td class="pct"> 7% </td> </tr> <tr> <td> <span aria-hidden="Winner" class="glyphicon glyphicon-check"></span> </td> <td> Ray Mathews<span class="affiliation">(R)</span> </td> <td class="tot"> 14,000 </td> <td class="pct"> 70% </td> </tr> <tr> <td> &nbsp; </td> <td> Mike Schwab<span class="affiliation">(R)</span> </td> <td class="tot"> 3,600 </td> <td class="pct"> 18% </td> </tr> <tr> <td> &nbsp; </td> <td> Chad Wrightson<span class="affiliation">(I)</span> </td> <td class="tot"> 600 </td> <td class="pct"> 3% </td> </tr> </table> <div class="reporting"> 89% of Precincts Reporting </div> </div> <div class="clearfix"></div> <div class="view-more-latest readmore"> <a href="javascript:void(0);">View more results</a> </div> </div> <p> Integer ipsum nisi, commodo et porttitor et, vulputate sed est. Proin in pharetra odio. Etiam sit amet blandit nulla. Quisque fermentum ante quis massa aliquam iaculis. Quisque erat felis, rutrum nec diam a, placerat ornare magna. Aliquam rutrum libero sed velit auctor sagittis. Donec rhoncus, libero eget feugiat imperdiet, metus ante porta ipsum, in vulputate ipsum neque sit amet dui. Etiam lobortis nulla eget libero luctus, sed consectetur justo dapibus. Suspendisse hendrerit congue turpis, eget volutpat tellus convallis at. Nulla lorem nulla, luctus eget fermentum ullamcorper, ullamcorper eget nunc. Praesent sagittis enim sapien, in condimentum leo porta eu. In ac dignissim felis. Donec nec nibh vel risus tincidunt tristique. Duis molestie metus efficitur eros maximus, sit amet maximus eros commodo. Duis bibendum sit amet lacus et tincidunt. Vivamus ultrices tincidunt enim et posuere. </p> <p> Nullam molestie finibus nisl in pretium. In at lorem id augue iaculis dignissim at interdum velit. Nulla pellentesque turpis lacus, sit amet dignissim arcu bibendum ac. Donec sit amet ligula et purus suscipit lacinia eu at velit. Fusce ullamcorper at elit in scelerisque. Suspendisse pharetra varius eros quis vestibulum. Nam a bibendum tortor. </p> <p> Nullam magna augue, mattis id gravida faucibus, tincidunt eget purus. Pellentesque mollis ligula non lacus ornare dictum. Phasellus eget ante massa. Vestibulum id porttitor magna. Morbi dapibus malesuada nulla. Nullam sapien tortor, dapibus pharetra nulla et, dictum maximus ipsum. Ut id quam maximus mauris sagittis blandit in a ante. Praesent porta a metus in mattis. Proin eu gravida nisl. Curabitur aliquam sed massa eu sagittis. Sed mollis arcu nisl, et sollicitudin dui pharetra id. Nunc ut ultricies lorem. Pellentesque vehicula at mi at lacinia. Nulla gravida faucibus euismod. Pellentesque consectetur maximus interdum. </p> <p> Nunc posuere lacinia nunc, at vestibulum ex condimentum ac. Nullam efficitur ultricies hendrerit. Duis vulputate nec sapien eu lobortis. Aliquam et gravida augue. Morbi ut lectus non risus volutpat eleifend a at tellus. Morbi ut risus sagittis, sagittis odio eu, sodales sapien. Proin placerat condimentum suscipit. </p> <p> Donec risus arcu, tristique luctus condimentum vitae, vehicula nec quam. Donec porttitor, lacus nec sollicitudin efficitur, ligula odio porttitor orci, sit amet luctus lacus justo nec ante. Sed id sem ut quam malesuada ultricies. Mauris consequat felis nec sagittis mattis. In efficitur magna ac sapien aliquet ullamcorper. Fusce sem mauris, elementum sed semper ut, volutpat vel turpis. Vivamus aliquam suscipit iaculis. </p> <p> Pellentesque ac egestas dui, quis faucibus lacus. Morbi consectetur enim vitae nulla laoreet lobortis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam laoreet eleifend fringilla. Vivamus ac mi maximus, condimentum enim non, eleifend quam. Phasellus dignissim tincidunt lectus, a blandit dolor lacinia ut. Proin nec mauris metus. Nulla scelerisque libero id tellus congue dignissim sed et quam. Praesent eu congue est. Etiam id sapien elementum, consequat ipsum sit amet, consectetur purus. Etiam finibus purus vel elementum porttitor. Curabitur aliquet odio non erat mollis sodales. </p> <p> Ut nec felis dui. Aenean et odio sit amet nisi vulputate volutpat vel vitae elit. Mauris vulputate nisi ex, ac egestas tortor tempus ut. Phasellus quis neque id arcu condimentum cursus. Mauris molestie augue nec aliquam tincidunt. Maecenas fringilla interdum vulputate. Nulla eu euismod quam, vel lacinia mauris. In tincidunt quam vitae accumsan malesuada. </p> <p> Maecenas at dui dapibus, euismod lorem nec, auctor orci. Sed accumsan volutpat elit, quis aliquet ligula lacinia ac. Mauris nisi risus, condimentum vel volutpat quis, consequat sed sem. Suspendisse potenti. Phasellus orci turpis, vehicula gravida justo sed, interdum suscipit enim. Vestibulum a tristique sapien. Etiam orci libero, dapibus eget laoreet quis, feugiat id sapien. Mauris vel turpis sagittis metus accumsan elementum in at dui. Praesent nec finibus arcu, ut fermentum ligula. Nulla at convallis metus. Ut pretium vehicula auctor. Sed ut dictum eros, nec rhoncus nunc. Donec bibendum nec arcu at hendrerit. Nunc vel blandit magna. Nam interdum cursus turpis, non ultricies diam sollicitudin vestibulum. Donec aliquam augue quis odio varius vestibulum. </p> <p> Suspendisse tristique odio sed magna aliquam, et consectetur velit rutrum. Etiam nibh metus, molestie ac lacinia sit amet, lacinia at lorem. Morbi molestie augue metus, pellentesque consectetur ex maximus in. Quisque ac tortor at mauris sagittis iaculis in at lorem. Sed eu molestie lorem, sit amet ultrices nisi. Mauris sollicitudin vestibulum tristique. Aenean aliquam dignissim fringilla. Suspendisse potenti. Donec quam eros, fringilla quis felis sed, fermentum dictum arcu. Donec vestibulum, metus id varius congue, orci eros consectetur augue, et varius ligula dolor ut dui. Vivamus viverra aliquam nulla, eu placerat est egestas vel. </p>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Election Widget Combo - Script Codes CSS Codes

/* ---------- MOCK LAYOUT ONLY ---------- */
#content-body { margin: 20px auto; width: 90%;
}
/* ---------- CSS OVERWRITES ---------- */
#election-embeds-full { margin: 0 0 20px 0; padding: 0 0 20px 0;
}
#election-embeds-full .resultsTable { border: none; border-bottom: 3px solid #888; text-align: left; margin: 0 auto; padding: 20px 0; width: 100%;
}
#election-embeds-inline { border-top: 2px dotted #ccc; border-bottom: 3px solid #888; margin: 2em 0; padding: 20px 0; width: 100%;
}
#election-embeds-inline .resultsTable { border: none; border-bottom: 2px solid #ccc; padding: 20px 0; float: none; text-align: left; margin: 0 auto;
}
#election-embeds-inline .resultsTable:first-of-type { padding-top: 0;
}
.resultsTable,
.resultsTable table { width: 100%;
}
.resultsTable > table { font-size: 14px;
}
.resultsTable { border: none; border-bottom: 3px solid #888; text-align: left; margin: 0 auto 30px auto; padding: 0 0 20px 0; width: 100%;
}
.resultsTable h4 { font-family: 'McClatchy Sans Cond', 'Roboto Condensed Medium', 'HelveticaNeue-CondensedBold', sans-serif; font-weight: 600; padding-bottom: 5px; text-align: left;
}
.resultsTable .updated { color: #aaa; font-size: 10px; font-weight: 400;
}
.resultsTable table tr td { padding: 10px 0;
}
.resultsTable .glyphicon-check { color: #21A52D; margin-right: 5px;
}
.resultsTable .affiliation { padding-left: 5px;
}
.resultsTable .tot { font-family: "McClatchy Sans", Helvetica, Arial, sans-serif; font-size: .8em; font-weight: 300; padding-left: 10px; text-align: right;
}
.resultsTable .pct { font-family: "McClatchy Sans", Helvetica, Arial, sans-serif; font-weight: bold; padding-left: 10px;
}
.resultsTable .reporting { text-transform: uppercase; color: #aaa; text-align: center; font-size: 10px; font-weight: 400; margin: 10px 0;
}
.view-more-latest { margin: 20px 0 0 0;
}
/* ----- SM Breakpoint ----- */
@media screen and (min-width: 768px) { #election-embeds-full { border-bottom: 3px solid #888; margin: 0 0 40px 0; padding: 0 0 20px 0; width: auto; } #election-embeds-full .resultsTable { border-bottom: none; margin-bottom: none; padding: 0; } #election-embeds-inline { float: left; margin: 2em 30px 2em 0; padding: 20px 0; width: auto; }
}

Election Widget Combo - Script Codes JS Codes

$( "#election-embeds-full .resultsTable:last" ).css({margin: "0 auto" });
$( "#election-embeds-inline .resultsTable:last" ).css({ border: "none", padding: "20px 0 0 0" });
Election Widget Combo - Script Codes
Election Widget Combo - Script Codes
Home Page Home
Developer Tom Markart
Username tmarkart
Uploaded November 06, 2022
Rating 3
Size 10,053 Kb
Views 10,120
Do you need developer help for Election Widget Combo?

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
CSS truncation with ellipsis
Select2
CSS Animation Playground
Story Card Expand Details
Vertical Image Filler
McClatchy Newsrooms
Navigation Hover
Story Detail - expand secondary asset inline
McClatchy svg logos
Skewed Header - svg
Create amazing SEO content 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!