Change position of content on mobile devices

Question

I run a site at http://chasemccoy.net/, and on the desktop I serve an advertisement in the sidebar. This comes from some given JS code from the ad network.

The site loads a custom layout when viewed on an iPhone. I need to place that ad into the footer of the site when it's displayed on a mobile device. I am using media queries to change the mobile layout.

My initial solution was to add the JS to the footer, and just use display: none; on the desktop version. However, the JS will not load into the site twice. I basically news a way to prevent the JS from loading at all on the mobile version until it hits the footer code.

Any easy fix for this? I am not a JS wiz by any means. Thanks for your help.

Edit: Here is the JS for the ad:

<script async type="text/javascript" src="//cdn.yoggrt.com/yoggrt.js?zoneid=1353&serve=C6SD52Y&placement=chasemccoynet" id="_yoggrt_js"></script>

That is simply pasted into the place in the HTML where I would like it to appear. The only problem is that the browser will not load more than one instance of the code.

Edit: Here is an outline for the sidebar.

div id="sidebar">

  <div class="gravatar">
        <a href="http://chasemccoy.net/"><img alt src="avatar.png" class="avatar avatar-100 photo" height="100" width="100"></a>
      </div>

  <ul>
    <li><a href="http://chasemccoy.net/start-here">Start Here</a></li>
    <li><a href="http://chasemccoy.net/colophon">Colophon</a></li>
    <li><a href="http://chasemccoy.net/archive">Archive</a></li>
    <li><a href="http://chasemccoy.net/rss">RSS</a></li>
  </ul>

  <!-- Yoggrt.com Zone Code -->

  <script async type="text/javascript" src="//cdn.yoggrt.com/yoggrt.js?zoneid=1353&serve=C6SD52Y&placement=chasemccoynet" id="_yoggrt_js"></script>

  <!-- End Yoggrt.com Zone Code -->

</div> <!-- Sidebar -->

In order to answer this question, please both add an outline of the HTML structure of your site - header, body, sidebar, footer - and the JavaScript or other code used to load the advert. Additional any HTML that acts as a container for the advert(s). This code **must** exist in the question and not just in your site, as otherwise the question will useless as a reference to others once your problem has been fixed. — pwdst, Aug 29 '14 at 21:45
There is a possibility that you will be able to use media queries along with flexbox to move the sidebar to the footer and style it as required. Please provide the outline page structure as requested. — pwdst, Aug 29 '14 at 22:02

score 0 · Answer 1 · answered Aug 29 '14 at 21:45

0

Just copy the HTML codes. Not JS codes. And use your same display: none; method.

I mean use the HTML codes twice. But don't use the JS codes twice.

answered Aug 29 '14 at 21:45

Mr. Zoidberg

514
4
13

I can't do this because the ad rotates dynamically each time the page loads. It cannot be static. – Chase McCoy Aug 29 '14 at 21:52

score 0 · Answer 2 · edited May 23 '17 at 12:21

0

You have a few choices. One would be to create the script nodes dynamically. In your sidebar you need a script node with something like this (not tested):

if( ! navigator.userAgent.match(/iPhone/i)) {
     var aScripts = document.getElementsByTagName('script'),
         elContainer = aScripts[aScripts.length - 1].parentNode,
         elScript = document.createElement("script");

     elScript.type = "text/javascript";
     elScript.src = "http://chasemccoy.net/wp-content/themes/lessismoresidebar/js/retina-1.1.0.js"

     elContainer.appendChild(js);
}

More here.

edited May 23 '17 at 12:21

Community

1
1

answered Aug 29 '14 at 21:58

cage rattler

1,587
10
16

Thanks. I was really hoping for a non-JS solution. Any way to prevent the browser from loading the sidebar on mobile completely? I'm using display:none to keep it hidden, but the script still loads. – Chase McCoy Aug 29 '14 at 22:01
I'd strongly suggest using the future proof and cross platform viewport width instead of user agent string to detect where to add the script if you were to use a JavaScript based solution. Mobile phone !== iPhone. – pwdst Aug 29 '14 at 22:04
1

I completely agree with Peter's comment above. A responsive approach to the problem is much better on many, many levels. I was trying to respond directly to Chase's question. To use the viewport width the conditional would be `if(window.innerWidth <= 480){` using the width of the iPhone in landscape orientation as a typical break-point. – cage rattler Aug 29 '14 at 22:31

Change position of content on mobile devices

2 Answers2