Election Widget
How do I make an election widget?
What is a election widget? How do you make a election widget? This script and codes were developed by Tom Markart on 06 November 2022, Sunday.
Election Widget - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Election Widget</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"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis facilisis eros. Proin suscipit, nisl in aliquam cursus, ante metus euismod leo, rutrum tincidunt erat neque id velit. Nullam aliquam vitae sem sit amet pulvinar. Integer non mauris a dui pellentesque posuere. Morbi convallis fermentum efficitur. Nam mollis condimentum velit, nec condimentum neque iaculis at. Curabitur scelerisque nisl nibh, vitae euismod ligula eleifend in. Ut in urna feugiat, hendrerit lorem in, porta velit. Aenean sed orci in diam sagittis blandit. Donec finibus, mi in elementum finibus, tortor magna dapibus nunc, maximus commodo arcu neque non leo. Quisque venenatis risus magna, a consectetur elit vestibulum vitae. Vivamus pulvinar lorem vitae quam vestibulum, id tempus tellus tempus. Praesent et aliquet sem. </p> <div class="resultsTable" data-electiondate="2016-06-14" data-officename="U.S. House" data-party="GOP" data-racetype="Primary" data-seatname="District 1" data-statepostal="SC"> <h4> U.S. House District 1 Republican Primary </h4> <table> <tr> <td> Christopher Horne<span> (D)</span> </td> <td> <span class="tot">(54,178)</span> </td> <td> <span class="pct">45%</span> </td> </tr> <tr> <td> <span aria-hidden="Winner" class="glyphicon glyphicon-check"></span>Richard Sanford<span> (R)</span> </td> <td> <span class="tot">(66,217)</span> </td> <td> <span class="pct">55%</span> </td> </tr> </table> <div class="reporting"> 62% Precincts Reporting </div> <div class="updated"> Last Updated: 11/07/16 8:00 PM ET </div> </div> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis facilisis eros. Proin suscipit, nisl in aliquam cursus, ante metus euismod leo, rutrum tincidunt erat neque id velit. Nullam aliquam vitae sem sit amet pulvinar. Integer non mauris a dui pellentesque posuere. Morbi convallis fermentum efficitur. Nam mollis condimentum velit, nec condimentum neque iaculis at. Curabitur scelerisque nisl nibh, vitae euismod ligula eleifend in. Ut in urna feugiat, hendrerit lorem in, porta velit. Aenean sed orci in diam sagittis blandit. Donec finibus, mi in elementum finibus, tortor magna dapibus nunc, maximus commodo arcu neque non leo. Quisque venenatis risus magna, a consectetur elit vestibulum vitae. Vivamus pulvinar lorem vitae quam vestibulum, id tempus tellus tempus. Praesent et aliquet sem. </p> <div class="resultsTable results-inline" 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> <table> <tr> <td> <span aria-hidden="Winner" class="glyphicon glyphicon-check"></span>John Doe<span> (D)</span> </td> <td> <span class="tot">(1,497)</span> </td> <td> <span class="pct">75%</span> </td> </tr> <tr> <td> Michelle Longlastname-Withhyphen<span> (R)</span> </td> <td> <span class="tot">(507)</span> </td> <td> <span class="pct">25%</span> </td> </tr> </table> <div class="reporting"> 100% Precincts Reporting </div> <div class="updated"> Last Updated: 11/07/16 8:00 PM ET </div> </div> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis facilisis eros. Proin suscipit, nisl in aliquam cursus, ante metus euismod leo, rutrum tincidunt erat neque id velit. Nullam aliquam vitae sem sit amet pulvinar. Integer non mauris a dui pellentesque posuere. Morbi convallis fermentum efficitur. Nam mollis condimentum velit, nec condimentum neque iaculis at. Curabitur scelerisque nisl nibh, vitae euismod ligula eleifend in. Ut in urna feugiat, hendrerit lorem in, porta velit. Aenean sed orci in diam sagittis blandit. Donec finibus, mi in elementum finibus, tortor magna dapibus nunc, maximus commodo arcu neque non leo. Quisque venenatis risus magna, a consectetur elit vestibulum vitae. Vivamus pulvinar lorem vitae quam vestibulum, id tempus tellus tempus. Praesent et aliquet sem. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis facilisis eros. Proin suscipit, nisl in aliquam cursus, ante metus euismod leo, rutrum tincidunt erat neque id velit. Nullam aliquam vitae sem sit amet pulvinar. Integer non mauris a dui pellentesque posuere. Morbi convallis fermentum efficitur. Nam mollis condimentum velit, nec condimentum neque iaculis at. Curabitur scelerisque nisl nibh, vitae euismod ligula eleifend in. Ut in urna feugiat, hendrerit lorem in, porta velit. Aenean sed orci in diam sagittis blandit. Donec finibus, mi in elementum finibus, tortor magna dapibus nunc, maximus commodo arcu neque non leo. Quisque venenatis risus magna, a consectetur elit vestibulum vitae. Vivamus pulvinar lorem vitae quam vestibulum, id tempus tellus tempus. Praesent et aliquet sem. </p> <div class="resultsTable results-inline" data-electiondate="2016-03-01" data-officename="County Commissioner" data-racetype="Special General" data-seatname="District 2" data-statepostal="GA" id="election-02"> <h4> County Commissioner District 5 </h4> <table> <tr class="democrat"> <td> <span aria-hidden="Winner" class="glyphicon glyphicon-check"></span>John Shanahan<span class="party"> (D)</span> </td> <td> <span class="tot">(1,497)</span> </td> <td> <span class="pct">75%</span> </td> </tr> <tr class="republican"> <td> Michael Woo<span class="party"> (R)</span> </td> <td> <span class="tot">(507)</span> </td> <td> <span class="pct">25%</span> </td> </tr> </table> <div class="updated"> Last Updated: 11/07/16 8:00 PM ET </div> <div class="reporting"> 81% Precincts Reporting </div> </div> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis facilisis eros. Proin suscipit, nisl in aliquam cursus, ante metus euismod leo, rutrum tincidunt erat neque id velit. Nullam aliquam vitae sem sit amet pulvinar. Integer non mauris a dui pellentesque posuere. Morbi convallis fermentum efficitur. Nam mollis condimentum velit, nec condimentum neque iaculis at. Curabitur scelerisque nisl nibh, vitae euismod ligula eleifend in. Ut in urna feugiat, hendrerit lorem in, porta velit. Aenean sed orci in diam sagittis blandit. Donec finibus, mi in elementum finibus, tortor magna dapibus nunc, maximus commodo arcu neque non leo. Quisque venenatis risus magna, a consectetur elit vestibulum vitae. Vivamus pulvinar lorem vitae quam vestibulum, id tempus tellus tempus. Praesent et aliquet sem. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis facilisis eros. Proin suscipit, nisl in aliquam cursus, ante metus euismod leo, rutrum tincidunt erat neque id velit. Nullam aliquam vitae sem sit amet pulvinar. Integer non mauris a dui pellentesque posuere. Morbi convallis fermentum efficitur. Nam mollis condimentum velit, nec condimentum neque iaculis at. Curabitur scelerisque nisl nibh, vitae euismod ligula eleifend in. Ut in urna feugiat, hendrerit lorem in, porta velit. Aenean sed orci in diam sagittis blandit. Donec finibus, mi in elementum finibus, tortor magna dapibus nunc, maximus commodo arcu neque non leo. Quisque venenatis risus magna, a consectetur elit vestibulum vitae. Vivamus pulvinar lorem vitae quam vestibulum, id tempus tellus tempus. Praesent et aliquet sem. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis facilisis eros. Proin suscipit, nisl in aliquam cursus, ante metus euismod leo, rutrum tincidunt erat neque id velit. Nullam aliquam vitae sem sit amet pulvinar. Integer non mauris a dui pellentesque posuere. Morbi convallis fermentum efficitur. Nam mollis condimentum velit, nec condimentum neque iaculis at. Curabitur scelerisque nisl nibh, vitae euismod ligula eleifend in. Ut in urna feugiat, hendrerit lorem in, porta velit. Aenean sed orci in diam sagittis blandit. Donec finibus, mi in elementum finibus, tortor magna dapibus nunc, maximus commodo arcu neque non leo. Quisque venenatis risus magna, a consectetur elit vestibulum vitae. Vivamus pulvinar lorem vitae quam vestibulum, id tempus tellus tempus. Praesent et aliquet sem. </p> <div class="resultsTable results-inline" data-electiondate="2016-03-01" data-officename="County Commissioner" data-racetype="Special General" data-seatname="District 2" data-statepostal="GA" id="election-03"> <h4> North Carolina Governer </h4> <table> <tr class="democrat"> <td> <img class="candidate-photo" src="http://www.tmarkart.com/codepen/images/nc-gov-cooper-roy.jpg" /> </td> <td> Roy Cooper<span class="party"> (D)</span> </td> <td> <span class="tot">(125,001)</span> </td> <td> <span class="pct">51%</span><span aria-hidden="Winner" class="glyphicon glyphicon-check"></span> </td> </tr> <tr class="republican"> <td> <img class="candidate-photo" src="http://www.tmarkart.com/codepen/images/nc-gov-mccrory-pat.jpg" /> </td> <td> Pat McCrory<span class="party"> (R)</span> </td> <td> <span class="tot">(125,000) </span> </td> <td> <span class="pct">49%</span> </td> </tr> </table> <div class="reporting"> 66% Precincts Reporting </div> <div class="updated"> Last Updated: 11/07/16 8:00 PM ET </div> </div> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis facilisis eros. Proin suscipit, nisl in aliquam cursus, ante metus euismod leo, rutrum tincidunt erat neque id velit. Nullam aliquam vitae sem sit amet pulvinar. Integer non mauris a dui pellentesque posuere. Morbi convallis fermentum efficitur. Nam mollis condimentum velit, nec condimentum neque iaculis at. Curabitur scelerisque nisl nibh, vitae euismod ligula eleifend in. Ut in urna feugiat, hendrerit lorem in, porta velit. Aenean sed orci in diam sagittis blandit. Donec finibus, mi in elementum finibus, tortor magna dapibus nunc, maximus commodo arcu neque non leo. Quisque venenatis risus magna, a consectetur elit vestibulum vitae. Vivamus pulvinar lorem vitae quam vestibulum, id tempus tellus tempus. Praesent et aliquet sem. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis facilisis eros. Proin suscipit, nisl in aliquam cursus, ante metus euismod leo, rutrum tincidunt erat neque id velit. Nullam aliquam vitae sem sit amet pulvinar. Integer non mauris a dui pellentesque posuere. Morbi convallis fermentum efficitur. Nam mollis condimentum velit, nec condimentum neque iaculis at. Curabitur scelerisque nisl nibh, vitae euismod ligula eleifend in. Ut in urna feugiat, hendrerit lorem in, porta velit. Aenean sed orci in diam sagittis blandit. Donec finibus, mi in elementum finibus, tortor magna dapibus nunc, maximus commodo arcu neque non leo. Quisque venenatis risus magna, a consectetur elit vestibulum vitae. Vivamus pulvinar lorem vitae quam vestibulum, id tempus tellus tempus. Praesent et aliquet sem. </p> <div class="resultsTable results-inline" data-electiondate="2016-03-01" data-officename="County Commissioner" data-racetype="Special General" data-seatname="District 2" data-statepostal="GA" id="election-03"> <h4> North Carolina Governer </h4> <table> <tr class="democrat"> <td> Roy Cooper<span class="party"> (D)</span> </td> <td> <span class="tot">(125,001)</span> </td> <td> <span class="pct">51%</span><span aria-hidden="Winner" class="glyphicon glyphicon-check"></span> </td> </tr> <tr class="republican"> <td> Pat McCrory<span class="party"> (R)</span> </td> <td> <span class="tot">(125,000) </span> </td> <td> <span class="pct">49%</span> </td> </tr> </table> <div class="reporting"> 66% Precincts Reporting </div> <div class="updated"> Last Updated: 11/07/16 8:00 PM ET </div> </div> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis facilisis eros. Proin suscipit, nisl in aliquam cursus, ante metus euismod leo, rutrum tincidunt erat neque id velit. Nullam aliquam vitae sem sit amet pulvinar. Integer non mauris a dui pellentesque posuere. Morbi convallis fermentum efficitur. Nam mollis condimentum velit, nec condimentum neque iaculis at. Curabitur scelerisque nisl nibh, vitae euismod ligula eleifend in. Ut in urna feugiat, hendrerit lorem in, porta velit. Aenean sed orci in diam sagittis blandit. Donec finibus, mi in elementum finibus, tortor magna dapibus nunc, maximus commodo arcu neque non leo. Quisque venenatis risus magna, a consectetur elit vestibulum vitae. Vivamus pulvinar lorem vitae quam vestibulum, id tempus tellus tempus. Praesent et aliquet sem. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis facilisis eros. Proin suscipit, nisl in aliquam cursus, ante metus euismod leo, rutrum tincidunt erat neque id velit. Nullam aliquam vitae sem sit amet pulvinar. Integer non mauris a dui pellentesque posuere. Morbi convallis fermentum efficitur. Nam mollis condimentum velit, nec condimentum neque iaculis at. Curabitur scelerisque nisl nibh, vitae euismod ligula eleifend in. Ut in urna feugiat, hendrerit lorem in, porta velit. Aenean sed orci in diam sagittis blandit. Donec finibus, mi in elementum finibus, tortor magna dapibus nunc, maximus commodo arcu neque non leo. Quisque venenatis risus magna, a consectetur elit vestibulum vitae. Vivamus pulvinar lorem vitae quam vestibulum, id tempus tellus tempus. Praesent et aliquet sem. </p>
</div>
</body>
</html>
Election Widget - Script Codes CSS Codes
/* ---------- MOCK LAYOUT ONLY ---------- */
#content-body { margin: 20px auto; /*max-width:580px;*/ width: 90%;
}
/* ---------- CSS OVERWRITES ---------- */
.resultsTable,
.resultsTable table { width: 100%;
}
.resultsTable > table { font-size: 14px;
}
.results-inline { float: none; margin: 25px auto;
}
.resultsTable > .reporting { text-transform: uppercase; color: #999; text-align: center; font-size: 12px; font-weight: 400; margin: 1em 0;
}
.resultsTable > table tbody td .tot { font-family: "McClatchy Sans", Helvetica, Arial, sans-serif;
}
.resultsTable .glyphicon-check { color: #21A52D; margin-right: 5px;
}
.updated { color: #aaa; font-size: 12px; font-weight: 400; margin: .5em 0; text-align: center; text-transform: uppercase;
}
/* ---------- ELECTION VERSION 02 ---------- */
#election-02 { border-bottom: none; margin: 25px auto; width: 100%;
}
#election-02 h4 { padding: 5px 0; font-family: 'McClatchy Sans Cond', 'Roboto Condensed Medium', 'HelveticaNeue-CondensedBold', sans-serif; font-weight: 500;
}
#election-02 table { width: 100%;
}
#election-02 .democrat .party { color: #5186B4;
}
#election-02 .republican .party { color: #C33E4A;
}
#election-02 .tot { color: #666;
}
#election-02 .updated { margin: 10px 0 0 0;
}
#election-02 .reporting { background-color: #888; color: #fff; margin-top: 7px; padding: 2px 0;
}
.resultsTable > table tbody tr.republican:hover > td { background: #f0c5c9 !important;
}
.resultsTable > table tbody tr.democrat:hover > td { background: #bed8ee !important;
}
/* ---------- ELECTION VERSION 03 ---------- */
#election-03 { border-bottom: none; border-top: none; margin: 1em auto; width: 100%;
}
#election-03 h4 { background-color: #ba2814; color: #fff; padding: 4px 0 0 0; font-family: 'McClatchy Sans Cond', 'Roboto Condensed Medium', 'HelveticaNeue-CondensedBold', sans-serif; font-weight: 500; margin-bottom: 7px;
}
#election-03 table { width: 100%;
}
#election-03 td { padding: 7px;
}
#election-03 .tot { color: #666; font-size: .9em;
}
#election-03 .democrat .party { color: #5186B4;
}
#election-03 .republican .party { color: #C33E4A;
}
#election-03 .candidate-photo { border-radius: 50%; height: 50px; width: 50px;
}
#election-03 .reporting { background-color: #ddd; background: linear-gradient(to right, #bbb 0%, #bbb 66%, #ddd 66%, #ddd 100%); color: #666; margin: .5em 0 0 0; padding: 4px 0;
}
#election-03 .updated { margin-top: 1em;
}
#election-03 .glyphicon { font-size: 22px; margin-left: 10px; margin-right: 0;
}
/* ----- SM Breakpoint ----- */
@media screen and (min-width: 768px) { .resultsTable, .resultsTable table { width: auto; } .results-inline { float: left; margin: 20px 40px 20px 0; } #election-02, #election-03 { border-bottom: none; border-top: none; border-right: 1px solid #ccc; margin: 10px 20px 5px 0; padding-right: 20px; width: auto; } #election-03 { border-right: none; margin: .5em .5em .5em 0; }
}
/* ----- MD Breakpoint ----- */
/* ----- LG Breakpoint ----- */
Developer | Tom Markart |
Username | tmarkart |
Uploaded | November 06, 2022 |
Rating | 3 |
Size | 6,152 Kb |
Views | 14,168 |
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!
Name | Size |
MPP Contact Us | 8,887 Kb |
Overlay nav | 2,756 Kb |
CSS Animation Playground | 3,948 Kb |
McClatchy Newsrooms | 3,565 Kb |
Pipleline Opportunities Email | 2,339 Kb |
Template - responsive story detail | 11,766 Kb |
Story Card Expand Details | 4,759 Kb |
Election Widget Vertical | 5,470 Kb |
Story Detail 1.0 | 16,604 Kb |
Skewed Header - svg | 2,562 Kb |
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!
Name | Username | Size |
Formations | Cantelope | 5,731 Kb |
Calculator - codevember 08 - 2016 | Caiocares | 3,260 Kb |
Faces SVG animation | ScavengerFrontend | 2,957 Kb |
Twinner Spinner II | Katydecorah | 2,974 Kb |
AOR site logo | Thatbram | 2,527 Kb |
Web Spiral - p5.js | TWAIN | 2,183 Kb |
Weird glowy CSS3 game | Toneworm | 3,684 Kb |
Dice | Fraina | 5,026 Kb |
Video mute | Leon9208 | 2,131 Kb |
Pomodoro Clock | Yas46 | 3,328 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!