Webinar v5 Style

Developer
Gyula Szathmary
Size
9,282 Kb
Views
16,192
  1. Webinar v5 Style Previews
  2. Webinar v5 Style HTML Codes
  3. Webinar v5 Style CSS Codes
  4. Webinar v5 Style JS Codes

How do I make an webinar v5 style?

What is a webinar v5 style? How do you make a webinar v5 style? This script and codes were developed by Gyula Szathmary on 02 November 2022, Wednesday.

Webinar v5 Style Previews
IQ Test

Webinar v5 Style - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Webinar v5 Style</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Local Settings JS file -->
<script src="https://codepen.io/gyusza/pen/regpWZ.js?dscsddddvcbcggggfdscdcvdddvghfdddghfdfvfdcddvscdsdcxcvc" type="text/javascript"></script>
<!-- Dateformat JS -->
<script src="https://codepen.io/gyusza/pen/EKqKWq.js" type="text/javascript"></script>
<header> <div class="header-container"> <a href="http://www.saxobank.com" target="_self"> <img src="https://www.academy.saxo/theme/saxobank/pix/logo.png" alt="Saxo Bank logo" class="logo left-margin"> </a> <span class="btn">	<a class="ligth-blue-btn backBtn" href="http://www.saxobank.com/" target="_blank"></a> </span> </div>
</header>
<div class="webinarhero animateFadeIn"> <div class="webinarheroContent"> </div>
</div>
<div class="webinar-nav"> <div class="dropdown"> <span class="filterName" style="color:white; padding:0px 30px; line-height:40px; font-size:15px;"></span> </div> <img class="navi-devider" src="https://www.tradingfloor.com/images/cms/original/c10ed08e-8f49-4b7e-9985-432ac054d381.png" alt="" /> <div class="dropdown languages"> <button class="dropbtn">English</button> <!--<img class="navi-devider" src="https://www.tradingfloor.com/images/cms/original/c10ed08e-8f49-4b7e-9985-432ac054d381.png" alt="" />--> <div class="dropdown-content"> <a href="/">English</a> <a href="/ru">Russian</a> </div> </div> <img class="navi-devider" src="https://www.tradingfloor.com/images/cms/original/c10ed08e-8f49-4b7e-9985-432ac054d381.png" alt="" /> <div class="dropdown lists"> <button class="dropbtn list-dropdown"></button> <!--<img class="navi-devider" src="https://www.tradingfloor.com/images/cms/original/c10ed08e-8f49-4b7e-9985-432ac054d381.png" alt="" /> --> <div class="dropdown-content"> </div> </div> <img class="navi-devider" src="https://www.tradingfloor.com/images/cms/original/c10ed08e-8f49-4b7e-9985-432ac054d381.png" alt="" /> <div class="dropdown labels"> <button class="dropbtn category-dropdown"></button> <!--<img class="navi-devider" src="https://www.tradingfloor.com/images/cms/original/c10ed08e-8f49-4b7e-9985-432ac054d381.png" alt="" /> --> <div class="dropdown-content"> </div> </div> <img class="navi-devider" src="https://www.tradingfloor.com/images/cms/original/c10ed08e-8f49-4b7e-9985-432ac054d381.png" alt="" />
</div>
<div class="box"> <div id="webinarlist"></div>
</div>
<footer>
<div class="footer-container">
<ul>
<li> <a class="light-blue" href="http://www.saxobank.com" target="_blank">WWW.SAXOBANK.COM</a> </li>
<li> <a href="https://www.saxobank.com/legal/copyright" target="_blank">© 2016 SAXO BANK</a> </li>
<li> <a href="https://www.saxobank.com/legal/disclaimer">DISCLAIMER</a> </li>
<li> <a href="https://www.saxobank.com/legal/pages/risk-warning.aspx">RISK WARNING</a> </li>
<li> <a href="https://www.saxobank.com/legal/privacy-policy">PRIVACY POLICY</a> </li>
<li> <a href="https://www.saxobank.com/legal/cookie-policy">COOKIE POLICY</a> </li>
<li> <a href="https://www.saxobank.com/about/Pages/Contact.aspx">CONTACT US</a> </li>
</ul>
</div>
</footer> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Webinar v5 Style - Script Codes CSS Codes

html, body { margin:0 auto; padding:0px; font-family:arial; background: url(https://www.tradingfloor.com/images/cms/original/b940e214-7d8f-4872-9189-38324d170e1b.jpg) 0 0 no-repeat #08142c; height:100%; color: #333;
}
a {text-decoration:none!important;}
header { height: 100px; background-color: #001225; top: 0px; width: 100%;
}
.header-container { max-width: 1150px; min-height: 200px; margin: 0 auto; text-align: left;
}
header .logo { padding-top: 16px; margin-left: 30px; height: 68px; width: 91px;
}
.btn { float: right; margin-right: 30px; margin-top: 25px;
}
.btn a.ligth-blue-btn { background-color: #50c9f3; display: inline-block; color: #002a55; line-height: 22px; padding: 10px 15px; text-decoration: none;
}
.box {max-width:1150px; margin: 0 auto;}
.webinarvideo { display: block; background-size: cover; background-repeat: no-repeat; position: relative;
}
.webinarvideo .play-video { background-image: url(https://www.tradingfloor.com/images/cms/original/6d18c899-0a83-4135-8d67-24a742fc362c.png); background-position: center center; background-repeat: no-repeat; height: 100%; width: 100%; min-height: 220px; margin-right: 20px; display: block;
}
.webinarvideo iframe { width: 100%; height: 100%; min-height: 170px; position: absolute; top: 0; left: 0;
}
.webinarhero { width: 100%; min-height: 200px; background-position: center top; background-repeat: no-repeat; padding-bottom: 18px; max-width: 1150px; margin: 0 auto;
}
.webinarhero .webinarheroContent { color: white; width: 75%; padding: 40px 0px 0px 30px;
}
.webinarhero .webinarheroContent h2 { font-weight: normal; font-size: 24px; margin-bottom: 0px;
}
.webinarhero .webinarheroContent h1 { font-weight: normal; font-size: 54px; margin-top: 0px; margin-bottom:0px;
}
.webinarhero .webinarheroContent p { line-height:1.5;
}
footer { padding: 10px 30px;
}
.footer-container { width: 100%; max-width: 1150px; margin: 0 auto; text-align: center;
}
.footer-container ul { padding: 0px; line-height: 1.7;
}
.footer-container ul li { display: inline-block; padding: 0 8px;
}
.footer-container ul li a { text-transform: uppercase; color: #fff; text-decoration: none; font-size: .9rem; display:block; text-shadow: 0px 1px 1px rgba(0, 0, 0, 1);
}
.light-blue { color: #43c9f5!important;
}
.animateFadeIn { -webkit-animation: fadein 500ms; /* Safari, Chrome and Opera > 12.1 */ /* Firefox < 16 */ /* Internet Explorer */ /* Opera < 12.1 */ animation: fadein 500ms;
}
@keyframes fadein { from { opacity: 0; } to { opacity: 1; }
}
/* Firefox < 16 */
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein { from { opacity: 0; } to { opacity: 1; }
}
/* Internet Explorer */
/* Opera < 12.1 */
.play-video {cursor: pointer; cursor: hand;}
/* Original CSS file contents */
@charset "utf-8";
/* CSS Document */
#webinarlist {	min-height:150px;
}
.webinarteaser {	padding-bottom:30px;
}
.webinaritem {	background: white;	margin-bottom: 10px; padding: 20px 30px; box-shadow: 0 8px 6px -6px black;
}
.webinarvideo { float: left;	width:35%;	/*min-height: 170px;*/	margin-right: 2%;
}
.webinarvideo iframe, .webinarvideo img{	width:100%;	/*min-height: 170px;*/
}
.webinartext { float: right;	width: 62%;
}
.category { width: 30%; display: inline-block; text-align:right; font-size: 15px; vertical-align: top; padding-top: 10px;
}
.date { width: 60%; display: inline-block; text-align: left; padding-right: 10%; font-weight:bold; padding-top: 10px; font-size: 15px;
}
.date .timezone { color: grey; font-weight: normal;
}
.title h3 { margin-bottom: 5px; margin-top: 30px; font-size: 28px; color: #333; font-weight: normal;
}
.description{ padding-bottom: 12px; font-size: 15px; line-height: 1.5;
}
.author { font-size: 15px; line-height: 20px; padding-top: 10px;
}
.webinarnotes, .signup {text-align:right;padding-top: 20px; font-size: 15px;}
a.linkButtonArrow { background-color: #50c9f3; display: inline-block; color: #002a55; line-height: 22px; padding: 7px 25px; text-decoration: none;
}
.webinar-nav { list-style: none; background-color: #001225; width: 100%; max-width:1150px; margin: 0 auto; margin-bottom:20px; height:40px; padding-left: 0px;
}
.list-banner { background: url(https://s3.amazonaws.com/webinars.saxo/img/banner-bg.png) center right no-repeat #001225; margin-bottom: 10px; padding: 20px 30px; box-shadow: 0 8px 6px -6px black; color:#fff; border: 1px solid #4cc9f3; line-height:1.5; font-weight:bold; text-shadow: 0px 1px 1px rgba(0, 0, 0, 1);
}
/* dropdown */
.dropbtn { color: #4cc9f3!important; padding: 0 50px 0 30px; font-size: 15px; border: none; cursor: pointer; line-height: 40px; height: 40px; width: 100%; text-align: left; background: url(https://www.tradingfloor.com/images/cms/original/591b73fd-67ba-4ab8-8700-f15e5c7719ae.png) right center no-repeat #001225!important; outline: none;
}
.dropdown { position: relative; float: left; min-width: 170px;
}
.dropdown:first-child{ min-width: 120px;
}
.webinar-nav .navi-devider { float:left;
}
.dropdown-content { display: none; position: absolute; background-color:#001225!important; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index:1000; margin-left:-12px; padding-top: 10px; padding-bottom: 10px; width: 100%; padding-right: 12px; opacity: 0.95;
}
.dropdown-content a { color: white; padding: 4px 10px 4px 20px; text-decoration: none; display: block; font-size:14px;
}
.dropdown-content a:hover {color: #50c9f3}
.dropdown:hover .dropdown-content { display: block;
}
@media (max-width: 975px) { .webinartext {	width: 54%;
}
}
@media (max-width: 805px) { body {-webkit-text-size-adjust:100%; -moz-text-size-adjust:100%; -ms-text-size-adjust:100%;} .webinartext { width: 100%; float: left; } .webinarvideo { width: 100%; } .webinarhero .webinarheroContent { width: 85%; } .webinarhero .webinarheroContent h1 { font-size: 46px; } header { height: 50px; } header .logo { padding-top: 6px; margin-left: 30px; height: auto; width: 50px; } .btn { margin-top: 17px; } .btn a.ligth-blue-btn { background-color: transparent; display: inline-block; color: #fff; line-height: 18px; padding: 0px 0px; text-decoration: none; } .webinarhero { background-position-x: -520px; } .description { /*font-size: 12px;*/ } .webinar-nav .navi-devider { display: none; } .filterName { display:none; } .dropdown { width: 100%; border-bottom: 2px solid #4cc9f3; } .dropdown-content a { padding: 7px 10px 7px 42px; line-height: 1.5; } .dropdown-content { position: initial; padding-top:0px; opacity:1; } .webinar-nav { min-height: 120px; }
}

Webinar v5 Style - Script Codes JS Codes

/* ---------------------------- GETTING PARAMS FROM URL AND MAKING THEM INTO VARS --------------------------------- */
function $_GET(param) { var vars = {}; window.location.href.replace(location.hash, '').replace( /[?&]+([^=&]+)=?([^&]*)?/gi, // regexp function(m, key, value) { // callback vars[key] = value !== undefined ? value : ''; } ); if (param) { return vars[param] ? vars[param] : null; } return vars;
}
var URLList = $_GET('list');
var URLCategory = $_GET('cat');
var decodedURLList = decodeURIComponent(URLList);
var decodedURLCategory = decodeURIComponent(URLCategory);
/*------------------------------ SETTING LIST ID AND CREATING NAVIGATION BASED ON URL PARAMS -----------------------------*/
// Setting which list should be shown based on URL list param
if (URLList == 'Archive') { status = archiveId; //It is the archive list which should be shown
} else { status = upcomingId; //It is the upcoming list which should be shown
}
if (URLList == "Archive") { $('.list-dropdown').html(archive_string);
} else { URLList = 'Upcoming'; $('.list-dropdown').html(upcoming_string);
}
// Set category dropdown to match URL param or fallback if no param in URL
if (URLCategory != null) { if (URLCategory == "all") { $('.category-dropdown').html(category_fallback_string); } else { $('.category-dropdown').html(decodedURLCategory); }
} else { URLCategory = 'all'; // Set URLList to "Upcoming" if nothing else is defined in url params $('.category-dropdown').html(category_fallback_string);
}
// Insert select "All Categories" at the top of the category dropdown
$('.labels .dropdown-content').append('<a href="?list=' + URLList + '&cat=all">' + category_fallback_string + '</a>');
// Load categories and append them to category dropdown including params
function loadFilters() { $('.dropdown .filterName').html(filterby_string); for (var k = 0; k < labelsData.length; k++) { var labelName = labelsData[k].name; $('.labels .dropdown-content').append('<a href="?list=' + URLList + '&cat=' + labelName + '">' + labelName + '</a>'); };
};
// Create the two dropdown items for lists Upcoming/Archive with url params
$('.lists .dropdown-content').append('<a href="?list=Upcoming&cat=' + URLCategory + '">' + upcoming_string + '</a>');
$('.lists .dropdown-content').append('<a href="?list=Archive&cat=' + URLCategory + '">' + archive_string + '</a>');
/*-------------------------------- FUNCTIONS TO CREATE HERO AND TOP BAR ---------------------------------*/
// Localize the top navigation
function loadTopNav() { $('.header-container a .logo').attr('src', logoUrl); $('.header-container .btn .backBtn').html(back_string);
};
// Localize the Hero bar
function loadHero() { if(decodedURLCategory == upcoming_op_category && decodedURLList == upcoming_string){ //OptionsLab Hero banners (Upcoming + Archive) $('.webinarhero').css('background-image', 'url("https://s3.amazonaws.com/webinars.saxo/img/hero-bg-optionslab.png")'); $('.webinarheroContent').append('<h2>' + upcoming_op_h2 + '</h2>', '<h1>' + upcoming_op_h1 + '</h1>', '<p>' + upcoming_op_p + '</p>'); }else if(decodedURLCategory == archive_op_category && decodedURLList == archive_string){ $('.webinarhero').css('background-image', 'url("https://s3.amazonaws.com/webinars.saxo/img/hero-bg-optionslab.png")'); $('.webinarheroContent').append('<h2>' + archive_op_h2 + '</h2>', '<h1>' + archive_op_h1 + '</h1>', '<p>' + archive_op_p + '</p>'); } //SaxoStrats Hero banners (Upcoming + Archive) else if(decodedURLCategory == upcoming_ss_category && decodedURLList == upcoming_string){ $('.webinarhero').css('background-image', 'url("https://s3.amazonaws.com/webinars.saxo/img/hero-bg-saxostrats.png")'); $('.webinarheroContent').append('<h2>' + upcoming_ss_h2 + '</h2>', '<h1>' + upcoming_ss_h1 + '</h1>', '<p>' + upcoming_ss_p + '</p>'); }else if(decodedURLCategory == archive_ss_category && decodedURLList == archive_string){ $('.webinarhero').css('background-image', 'url("https://s3.amazonaws.com/webinars.saxo/img/hero-bg-saxostrats.png")'); $('.webinarheroContent').append('<h2>' + archive_ss_h2 + '</h2>', '<h1>' + archive_ss_h1 + '</h1>', '<p>' + archive_ss_p + '</p>'); } //SaxoWebinars Hero banners (Upcoming + Archive) else if(decodedURLCategory == upcoming_sw_category && decodedURLList == upcoming_string){ $('.webinarhero').css('background-image', 'url("https://s3.amazonaws.com/webinars.saxo/img/hero-bg-saxowebinars.png")'); $('.webinarheroContent').append('<h2>' + upcoming_sw_h2 + '</h2>', '<h1>' + upcoming_sw_h1 + '</h1>', '<p>' + upcoming_sw_p + '</p>'); }else if(decodedURLCategory == archive_sw_category && decodedURLList == archive_string){ $('.webinarhero').css('background-image', 'url("https://s3.amazonaws.com/webinars.saxo/img/hero-bg-saxowebinars.png")'); $('.webinarheroContent').append('<h2>' + archive_sw_h2 + '</h2>', '<h1>' + archive_sw_h1 + '</h1>', '<p>' + archive_sw_p + '</p>'); } //Technical Analysis Hero banners (Upcoming + Archive) else if(decodedURLCategory == upcoming_ta_category && decodedURLList == upcoming_string){ $('.webinarhero').css('background-image', 'url("https://s3.amazonaws.com/webinars.saxo/img/hero-bg-tecnical.png")'); $('.webinarheroContent').append('<h2>' + upcoming_ta_h2 + '</h2>', '<h1>' + upcoming_ta_h1 + '</h1>', '<p>' + upcoming_ta_p + '</p>'); }else if(decodedURLCategory == archive_ta_category && decodedURLList == archive_string){ $('.webinarhero').css('background-image', 'url("https://s3.amazonaws.com/webinars.saxo/img/hero-bg-tecnical.png")'); $('.webinarheroContent').append('<h2>' + archive_ta_h2 + '</h2>', '<h1>' + archive_ta_h1 + '</h1>', '<p>' + archive_ta_p + '</p>'); } //The FX Update Hero banners (Upcoming + Archive) else if(decodedURLCategory == upcoming_fx_category && decodedURLList == upcoming_string){ $('.webinarhero').css('background-image', 'url("https://s3.amazonaws.com/webinars.saxo/img/hero-bg-fxupdate.png")'); $('.webinarheroContent').append('<h2>' + upcoming_fx_h2 + '</h2>', '<h1>' + upcoming_fx_h1 + '</h1>', '<p>' + upcoming_fx_p + '</p>'); }else if(decodedURLCategory == archive_fx_category && decodedURLList == archive_string){ $('.webinarhero').css('background-image', 'url("https://s3.amazonaws.com/webinars.saxo/img/hero-bg-fxupdate.png")'); $('.webinarheroContent').append('<h2>' + archive_fx_h2 + '</h2>', '<h1>' + archive_fx_h1 + '</h1>', '<p>' + archive_fx_p + '</p>'); } //All + Fallback Hero banners (Upcoming + Archive) else if(decodedURLList == archive_string){ $('.webinarhero').css('background-image', 'url("https://s3.amazonaws.com/webinars.saxo/img/hero-bg-all.png")'); $('.webinarheroContent').append('<h2>' + archive_all_h2 + '</h2>', '<h1>' + archive_all_h1 + '</h1>', '<p>' + archive_all_p + '</p>'); }else{ $('.webinarhero').css('background-image', 'url("https://s3.amazonaws.com/webinars.saxo/img/hero-bg-all.png")'); $('.webinarheroContent').append('<h2>' + upcoming_all_h2 + '</h2>', '<h1>' + upcoming_all_h1 + '</h1>', '<p>' + upcoming_all_p + '</p>'); }
};
/*-------------------------------- LOADING THE TRELLO BOARD CARDS/LABELS ---------------------------------*/
// Trello URL for JSON
var cardUrl = 'https://api.trello.com/1/boards/' + boardId + '/cards?fields=name,idList,labels,desc,due&attachments=true&checklists=all&key=f280c6a68974feacfae932441d678518&token=0907913aacd447cc3911317f953c9de41806fba86bbb53f361f174ec91ed711d'
// For listing all the labels
var labelsUrl = 'https://api.trello.com/1/boards/' + boardId + '/labels?key=f280c6a68974feacfae932441d678518&token=0907913aacd447cc3911317f953c9de41806fba86bbb53f361f174ec91ed711d'
// Variable holding all the JSON details declared
var cardData = [];
var labelsData = [];
// Parse Trello JSON file for all the cards
$.ajax({ url: cardUrl, async: false, dataType: 'json', success: function(json) { cardData = json; }
});
// Parse Trello JSON file for all the labels
$.ajax({ url: labelsUrl, async: false, dataType: 'json', success: function(json) { labelsData = json; }
});
// Check which list needs to be shown on page (based on var status on top)
var as = $(cardData).filter(function(i, n) { return n.idList === status
});
/*-------------------------------- LOADING THE TRELLO BOARD CARDS/LABELS ---------------------------------*/
// Load the main function to populate the webinars
function loadDynamicContent() { var hasResult = "false"; //default as false which will be set to "true" in any content is appended to site bannercount = 0; // Assing objects to variables form the json structure for (var i = 0; i < as.length; i++) { //lert(i); var Title = as[i].name; var Category = as[i].labels[0].name; var Description = as[i].desc; // This takes the UTC native date format var utcDate = new Date(as[i].due); // Using Dateformat.js makes it into a nice format var newDate = utcDate.format("dddd dd mmm yyyy HH:MM"); var pastDate = utcDate.format("dddd dd mmm yyyy"); // Separately adds the timezone so it can be formatted differently var timeZone = utcDate.format("(Z)"); var Author = as[i].checklists[0].checkItems[0].name; var Guest = as[i].checklists[0].checkItems[1].name; var VideoParam = as[i].checklists[0].checkItems[2].name; var Signup = as[i].checklists[0].checkItems[3].name; // Picks up Adobe connect sco-ID if (typeof as[i].checklists[0].checkItems[4] != 'undefined') { // Assign value to the property here var scoID = as[i].checklists[0].checkItems[4].name; } else { // If there is no ID, return empty var scoID = 'No sco-ID'; } // Checking for missing attachments if (typeof as[i].attachments[0] != 'undefined') { // Assign value to the property here var Attachment = as[i].attachments[0].url; } else { // If there is no attachment, return empty var Attachment = 'Empty'; } /*-------------------------------- APPENDING CONTENT TO PAGE ---------------------------------*/ if ((decodedURLCategory == Category || URLCategory == Category) || URLCategory == 'all') { // Append only matches or all if URL has no cat param hasResult = "true"; //var set to "true to tell "no content" IF statement that page has content $('#webinarlist').addClass('animateFadeIn').append('<div id="' + 'webinar' + i + '" class="webinaritem">' + '</div>'); // Create the containers for both img/video and text $('#webinar' + i).append('<div class="webinarvideo"></div>').append('<div class="webinartext"></div>'); // Regex to look for 8 digit number video parameter from 23 var videoRegex = new RegExp(/\b\d{8}\b/g); /* Test if the video parameter matches the regex, and if its the Archive list, otherwise dont show the video only the placeholder image. */ if (videoRegex.test(VideoParam) && URLList == 'Archive') { /* New way of showing video First, load the clickable overlay Second, set the background to the video thumbnail*/ $('#webinar' + i + ' .webinarvideo').append('<div onclick="addIframe(' + i + ',' + VideoParam + ')" class="play-video"></div>').css('background-image', 'url(https://saxobank.23video.com/thumbnail/' + VideoParam + ')'); } else { // Otherwise add the general thumbnail var imgUrl = '//s3.amazonaws.com/webteam.saxo/db/' + Category + '.png'; $('#webinar' + i + ' .webinarvideo').append('<img class="video" src="' + imgUrl + '"/>'); }; if (URLList == 'Archive') { $('#webinar' + i + ' .webinartext').append('<div class="date">' + pastDate + '</div>'); // Add date without time and timeZone for Archive } else { $('#webinar' + i + ' .webinartext').append('<div class="date">' + newDate + ' <span class="timezone">' + timeZone + '</span></div>'); // Add date, time and zone } $('#webinar' + i + ' .webinartext').append('<div class="category">' + Category + '</div>'); // Add category from label $('#webinar' + i + ' .webinartext').append('<div class="title"><h3>' + Title + '</h3></div>'); // Add title from card title $('#webinar' + i + ' .webinartext').append('<div class="description">' + Description + '</div>'); // Add description from card // Test if there is a guest set, and dont show the guest field if the guest is set to "No Guest" if (Guest != "Guest") { // Add both Author and Guest $('#webinar' + i + ' .webinartext').append('<div class="author"><b>' + host_string + ' </b>' + Author + '<br /><b>' + guest_string + ' </b>' + Guest + '</div>'); } else { // Add only Author, "No Guest" is specified $('#webinar' + i + ' .webinartext').append('<div class="author"><b>' + host_string + ' </b>' + Author + '</div>'); }; // Add signup link to the page if (URLList == 'Upcoming') { $('#webinar' + i + ' .webinartext').append('<div class="signup"><a href="' + Signup + '" class="linkButtonArrow" target="_blank">' + singup_link_string + '</a></div>'); }; // Add attachment link DOES NOT WORK if (Attachment != 'Empty' && URLList == 'Archive') { $('#webinar' + i + ' .webinartext').append('<div class="webinarnotes"><a href="' + Attachment + '" class="linkButtonArrow" target="_blank">' + download_string + '</a></div>'); }; //Clear the float left within each webinar block $('#webinar' + i).append('<div style="clear:both;"></div>'); // Banner generator (create banner after 2 and 6 card) if(bannercount == 1 || bannercount == 5){ $('#webinarlist').addClass('animateFadeIn').append('<a href="https://www.saxobank.com/campaigns/go?int_cmpid=SaxoWebinars-banner" target="_blank"><div class="list-banner">Why limit yourself? Trade any asset class in any market on any device with SaxoTrader<span style="color: #43c9f5;">GO</span></div></a>'); } bannercount++; }; /*-------------------------------- WHEN NO CONTENT IS AVAILABLE ---------------------------------*/ var loopAmount = i + 1; // loopAmount is numbers of loops in which content has been appended to page //If the amount of loops matches the amount of cards loaded and "hasResult" is still false then insert "no available content" message if (loopAmount == as.length && hasResult == "false") { $('#webinarlist').append('<div class="webinaritem">' + no_content_string + '</div>'); }; };
};
/*-------------------------------- ADDING VIDEO IFRAME WHEN CLICKING ON PLAY BUTTON ---------------------------------*/
// This function is called onClick to switch out the thumbnail to the iframe
function addIframe(i, videoParamPass) { // Destroys all the iframes on the page $('.webinarvideo iframe').remove(); // Add the right iframe to the top of the container, thats why its a prepend, so the thumbnail stays below. $('#webinar' + i + ' .webinarvideo').prepend('<iframe src="https://saxobank.23video.com/3722518.ihtml/player.html?source=embed&amp;photo%5fid=' + videoParamPass + '&amp;autoPlay=1" frameborder="0" border="0" scrolling="no" allowfullscreen="1" mozallowfullscreen="1" webkitallowfullscreen="1" ></iframe>');
};
/*-------------------------------- LOAD FOOTER CONTENT FUNCTION ---------------------------------*/
// Localize footer
function loadFooter() {};
/*-------------------------------- CHECK USER AGENT FOR iOS DEVICE ---------------------------------*/
function iosPlay() { // User agent check for iPhone / iPad / iPod, returns true or false var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent); // if it IS iOS, change the background image if (iOS == true) { $('.webinarvideo .play-video').css('background-image', 'url(https://www.tradingfloor.com//images/cms/original/2eea13eb-bee0-454f-a819-633d966085f4.png)'); }
};
/*-------------------------------- Broken IMG replace ---------------------------------*/
function imgError() { $('img.video').one('error', function() { $(this).attr('src', '/img/brokenImg.png') //$(this).parent().html('<div class="video">Broken img<div>') });
}
/*-------------------------------- Animate the Webinar Items one by one ---------------------------------*/
function webinarAnimate() {
}
/*-------------------------------- ON PAGE READY LOAD ALL CONTENT ---------------------------------*/
// Start the loop function to load details from the JSON file
$(document).ready(function() { // Construct the top with Nav, Hero, Filters loadTopNav(); loadHero(); loadFilters(); // Actually run the main function: I added this so we can do a refresh on the middle part only loadDynamicContent(); // Change play button on iOS iosPlay() imgError() // Construct the Footer loadFooter();
});
Webinar v5 Style - Script Codes
Webinar v5 Style - Script Codes
Home Page Home
Developer Gyula Szathmary
Username gyusza
Uploaded November 02, 2022
Rating 3
Size 9,282 Kb
Views 16,192
Do you need developer help for Webinar v5 Style?

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!

Gyula Szathmary (gyusza) Script Codes
Name
Get 23 thumbnail
Simple Tabs
Comparison table SC
Saxo Tools Collection
A Pen by Gyula Szathmary
Pricing widget generator project
Sitemap generator for Sharepoint
Landing page and HTML snippet translator
Compare resources on mobile sites
Financial Glossary Converter
Create amazing Facebook ads 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!