swaggrK
asked on
Javascript Conditional Logic
I have a detail page on my site that displays articles. The articles can be one of two types(image or video).
If the article is tagged as being a "image" then it will display an image at the top but
if the article is tagged with being a "video" then it will display a video.
Currently, this schema seeming to be working EXCEPT if the page is tagged as being a video and AFTER the video plays, the page then seems to not know if it is tagged as a "video" or "image" because it reloads as neither with NO video or image displayed
{tag_detailpage_image_or_v
If the article is tagged as being a "image" then it will display an image at the top but
if the article is tagged with being a "video" then it will display a video.
Currently, this schema seeming to be working EXCEPT if the page is tagged as being a video and AFTER the video plays, the page then seems to not know if it is tagged as a "video" or "image" because it reloads as neither with NO video or image displayed
{tag_detailpage_image_or_v
<section id="greyCrumb" class="do">
<div class="cw">
<nav class="trail">
<a href="/">SWAGGR</a> <span>|</span> <a href="/ArtCulture">Arts & Culture</a> <span>|</span> Holdiday Sale
</nav>
</div>
</section>
<div>
<section id="marqueeStripe">
<div id="marquee" class="bgArtCulture">
<header>
<section class="byline">
<a href="/categories/arts-and-culture" class="tag tagArtCulture">Arts & Culture</a>
BY Staff Writer
<span class="date-fix_date-time">December 1, 2014</span>
</section>
<h1 class="headerTitle">Holdiday Sale</h1>
</header>
<div id="headerImage">
<span></span><img alt="Holdiday Sale" src="/uploads/post/7488977_4_large_Marquee_HS_TFF15_12182014_1920x1080.jpg" />
</div>
</div>
<section class="stripeBorder bgArtCulture"></section>
</section>
<section id="videoStripe">
<div class="cw">
<div class="cf catArtCulture" id="marquee">
<div id="videoImageContainer">
<header>
<section class="byline">
<a class="tag tagArtCulture" href="/ArtCulture">Arts & Culture</a>
BY {tag_author}
<span class="date-fix_date-time">{tag_post_date}</span>
</section>
<h1 class="headerTitle">Holdiday Sale</h1>
</header>
<div class="bgArtCulture" id="headerImage">
<div class="videoPlay big">
<svg viewbox="0 0 29 33" height="33px" width="29" xmlns="http://www.w3.org/2000/svg">
<path d="M28.709,16.575L0,33.15V0L28.709,16.575z" class="fill play"></path>
</svg>
</div>
<span></span><img src="/uploads/post/7488977_4_large_Marquee_HS_TFF15_12182014_1920x1080.jpg" alt="Holdiday Sale" />
</div>
</div>
<div id="headerVideo">
<div id="ytEmbediFrame"></div>
<div class="mo">
<div data-youtube-embed="true" id="BCLcontainingBlock">
<div class="BCLvideoWrapper">
<iframe width="100%" height="100%" frameborder="0" src="https://www.youtube.com/watch?v=ufMFLNl9HQI?rel=0&autohide=1&showinfo=0&wmode=transparent&version=3&enablejsapi=1"></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--- Script for alternating between video and image: begin --->
<script>
(function($) {
var webAppMediaType = "{tag_detailpage_image_or_video}";
var imageContainer = $("#marqueeStripe");
var videoContainer = $("#videoStripe");
if ( webAppMediaType === "image" ) {
videoContainer.hide(); imageContainer.show(); }
if ( webAppMediaType === "video" ) {
imageContainer.hide(); videoContainer.show(); }
</script>
</div>
<section id="bodyStripe">
<div class="cw">
<div id="articleShow" class="cf catArtsCulture">
<article>
<div id="articleContainer">
<section class="bgArtCulture">
<ul id="socialBarMobile" class="mo cf">
<li>
<a target="_blank" id="socialFB" href="http://www.facebook.com/sharer.php?u={tag_itemurl_withhost}" class="fb"><em class="socialBarIcon fb white"></em>
<div class="nav__item__count">LIKE</div>
</a>
</li>
<li>
<a target="_blank" id="socialTweet" href="http://twitter.com/home?status={tag_itemurl_withhost}" class="twitter"><em class="socialBarIcon twitter white"></em>
<div class="nav__item__count">TWEET</div>
</a>
</li>
<li>
<a target="_blank" href="http://www.stumbleupon.com/badge/?url={tag_itemurl_withhost}" class="su"><em class="socialBarIcon su white"></em>
<div class="nav__item__count">STUMBLE</div>
</a>
</li>
<li>
<a target="_blank" href="http://www.tumblr.com/share?v=3&u={tag_itemurl_withhost}&t=" class="tumblr"><em class="socialBarIcon tumblr white"></em>
<div class="nav__item__count">TUMBLR</div>
</a>
</li>
</ul>
</section>
<!---
swaggr_Rightrail_detailpage: begin
--->
{module_contentholder,3061605}
<!---
swaggr_Rightrail_detailpage: end
--->
<section id="bodyTray">
<div id="socialBarWrapper" class="do ">
<ul id="socialBar">
<li>
<a target="_blank" id="socialFB" href="http://www.facebook.com/sharer.php?u={tag_itemurl_withhost}" class="fb"><em class="socialBarIcon fb white"></em>
<div class="nav__item__count">LIKE</div>
</a>
</li>
<li>
<a target="_blank" id="socialTweet" href="http://twitter.com/home?status={tag_itemurl_withhost}" class="twitter"><em class="socialBarIcon twitter white"></em>
<div class="nav__item__count">TWEET</div>
</a>
</li>
<li>
<a target="_blank" href="http://www.stumbleupon.com/badge/?url={tag_itemurl_withhost}" class="su"><em class="socialBarIcon su white"></em>
<div class="nav__item__count">STUMBLE</div>
</a>
</li>
<li>
<a target="_blank" href="http://www.tumblr.com/share?v=3&u={tag_itemurl_withhost}&t=" class="tumblr"><em class="socialBarIcon tumblr white"></em>
<div class="nav__item__count">TUMBLR</div>
</a>
</li>
</ul>
</div>
<div class="subheader txtArtCulture">
{tag_post_short_text}
</div>
<div class="contentBody">{tag_classifications}
{tag_description}
</div>
<div id="containerTags">
<div class="title">POSTED UNDER</div>
<nav>
<a>{tag_author}</a>
</nav>
</div>
</section>
</div>
</article>
</div>
</div>
</section>
<section class="stripeBorder bgArtCulture"></section>
<hr />
<!--- Scripts: bottom of page: begin --->
<script src="/assets/main.js" type="text/javascript"></script>
<script src="https://www.youtube.com/iframe_api"></script>
<script>
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('ytEmbediFrame', {
height: '560',
width: '980',
videoId: 'ufMFLNl9HQI',
playerVars: {
'autoplay': 0,
'rel': 0,
'wmode' : 'transparent'
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady() {
player.setPlaybackQuality("hd720");
}
function onPlayerStateChange(e) {
if (e.data == 0) {
if (typeof revertVideo == 'function') {
revertVideo();
}
}
}
</script>
<script>
var STICKY_SOCIAL = (function($){
var marge = 20, // Margin for the menu to hang out below the header
$mainHeader = $('#mainHeader'),
$socialBarWrapper = $('#socialBarWrapper'),
$socialBarParent = $socialBarWrapper.offsetParent();
$(function() {
$window.scroll(function() {
if (vsize !== "handheld") {
// calculate these on the fly due to potential post-docready loading elems
var scTop = $window.scrollTop(),
$headerHeight = $mainHeader.height() + $('.secondaryNav').outerHeight(),
topEdge = scTop + $headerHeight - $socialBarParent.offset().top + marge,
bottomEdge = scTop - ($socialBarParent.offset().top + $socialBarParent.height() - $('#socialBar').height()) + $headerHeight + marge;
if (scTop == 0 || topEdge <= 0) {
$socialBarWrapper.removeClass('compressed');
} else {
if ( bottomEdge >= 0 ){
$socialBarWrapper.addClass('bottom').removeClass('compressed');
} else {
$socialBarWrapper.addClass('compressed').removeClass('bottom');
}
}
}
});
});
})(jQuery);
$(function() {
$('#socialFB').on('click', function() {
ga('send', 'social', 'facebook', 'send');
});
$('#socialTweet').on('click', function() {
ga('send', 'social', 'twitter', 'tweet');
});
$('#socialSU').on('click', function() {
ga('send', 'social', 'stumbleupon', 'post');
});
$('#socialTum').on('click', function() {
ga('send', 'social', 'tumblr', 'share');
});
});
</script>
<script>
$(function() {
$('#moduleRelated').carousel();
});
</script>
<script>
function videoLoad() {
$('#videoStripe, #videoStripe #headerImage').height($('#videoImageContainer header').outerHeight(true));
$('#headerImage').imagesLoaded(function(e) {
var originalImage = new Image();
originalImage.src = $('#headerImage img').attr("src");
$('#videoStripe #headerImage img').height(originalImage.height).fadeIn();
$('#videoStripe #headerImage .videoPlay, #headerImage span').fadeIn();
$('#videoStripe, #videoStripe #headerImage').animate({height: originalImage.height});
});
}
function imagesResize() {
$('.contentBody p').not(':has(iframe, img)').addClass("skinny");
$('.YTvideoWrapper, .contentBody img').each(function(i,e){
if($(e).hasClass('keep-size')) {
$(e).wrap('<div class="noBig"></div>');
} else {
if($(e).position().top <= $('#rightBar').height()) {
$(e).wrap('<div class="floatSqueeze"></div>');
} else {
$(e).wrap('<div class="floatMax"></div>');
}
}
});
}
$(function() {
imagesResize();
$window.scroll(function() {
$('#rightBar .module:onScreen').addClass("active");
});
if ($('#rightBar').children().length === 0) {
$.get( "/ajax/sidebar", {
height: $('#bodyTray').outerHeight()
},
function(data) {
$("#rightBar").html(data);
imagesResize();
});
} else {
imagesResize();
}
if (vsize != "handheld") {
videoLoad();
}
$('.mo .BCLvideoWrapper').wrapInner("<div class='mobilePlayer'></div>");
if ($('.mo [data-youtube-embed]').length > 0) {
$('.mobilePlayer').fancybox({type: 'inline', autoSize: false, autoResize: true, fitToView: true, width: '320', height: 'auto', aspectRatio: true});
} else {
$('.mobilePlayer').fancybox({type: 'inline', autoSize: false, autoResize: true, fitToView: true, width: 320, height: 180, aspectRatio: true});
}
$('#videoStripe #headerImage').on('click', function(e) {
e.preventDefault();
if ($('body').hasClass('desktop')) {
$('#videoImageContainer').fadeOut();
$('#videoStripe').stop().animate({height: $('#headerVideo').innerHeight()});
player.playVideo();
} else {
$('.mobilePlayer').click();
}
});
$('#articleContainer iframe[src*=youtube]').wrap('<div class="YTvideoWrapper"></div>');
$('#commentHeader').on('click', function() {
$('#livefyre-comments').slideToggle('fast');
$('#commentHeader .icon.plus').toggleClass('minus');
});
});
function revertVideo() {
$('#videoImageContainer').fadeIn();
$('#videoStripe').animate({height: $('#marquee img').height()});
}
LF.CommentCount({
replacer: function(element, count) {
element.innerHTML = count;
$(element).animate({opacity: 1}, 1000);
}
});
</script>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
<script type='text/javascript'>
var _sf_async_config={};
/** CONFIGURATION START **/
_sf_async_config.uid = 45507;
_sf_async_config.domain = 'swaggr01.businesscatalyst.com';
_sf_async_config.useCanonical = true;
_sf_async_config.sections = 'Arts & Culture';
_sf_async_config.authors = 'The Editors';
/** CONFIGURATION END **/
(function(){
function loadChartbeat() {
window._sf_endpt=(new Date()).getTime();
var e = document.createElement('script');
e.setAttribute('language', 'javascript');
e.setAttribute('type', 'text/javascript');
e.setAttribute('src', '//static.chartbeat.com/js/chartbeat.js');
document.body.appendChild(e);
}
var oldonload = window.onload;
window.onload = (typeof window.onload != 'function') ?
loadChartbeat : function() { oldonload(); loadChartbeat(); };
})();
</script>
<!--- Scripts: bottom of page: end --->ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
"What Tom said"