Solved

Javascript Conditional Logic

Posted on 2015-01-02
2
162 Views
Last Modified: 2015-02-10
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_video} has two values(image,video)

<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&amp;autohide=1&amp;showinfo=0&amp;wmode=transparent&amp;version=3&amp;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&amp;u={tag_itemurl_withhost}&amp;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&amp;u={tag_itemurl_withhost}&amp;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 --->

Open in new window

0
Comment
Question by:swaggrK
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 38

Accepted Solution

by:
Tom Beck earned 500 total points
ID: 40529050
Could it be that this script has no closing curly brace and parenthesis?

<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>

It should be:
<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>
0
 
LVL 18

Expert Comment

by:nap0leon
ID: 40532211
"What Tom said"
0

Featured Post

PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…

734 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question