Solved

Keeping

Posted on 2016-09-02
9
78 Views
Last Modified: 2016-09-13
I have a webpage with a "slide show" of transitioning background images that sort of tell the story of the accompanying song: http://dijitalrealm.com/GrandDesign.html. I like the way it looks but when I'm in landscape view on my mobile phone and I have to scroll down the right hand div to see all the lyrics, the background image gradually gets covered with black from the bottom up as you scroll.

Is it possible to keep the background images showing full screen when I scroll? For comparison look at the same page with one stationary image: http://dijitalrealm.com/JCMusic/GrandDesignStill.html

I'm guessing that my code is pretty unprofessional but hopefully there's a solution that wouldn't require too much modification.

Thanks!
John
0
Comment
Question by:gabrielPennyback
  • 4
  • 4
9 Comments
 
LVL 42

Expert Comment

by:David S.
ID: 41782448
John, before fixing CSS issues, it's important to correct serious HTML issues, like the missing doctype.

https://validator.w3.org/
0
 
LVL 51

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 41782590
Untidy layout is always going to trip you up when it comes to debugging a page. Make sure your page validates and take some time to line up your tags - it can save you hours of time.

I have reworked your page borrowing from Bootstrap's column styles for the positioning of the columns. I suspect in your design you were not clearing a float which was causing the problem. However, take a look at the reworked code and see if it works for you.

You can see it in action here
<!doctype html
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="http://dijitalrealm.com/JCMusic/css/navbar.css" >
<script type="text/javascript" src="http://dijitalrealm.com/JCMusic/js/navbar.js"></script>
<style type="text/css">
body,html {
  height: 100%;
}
.background-image {
  position: fixed;
    background-attachment:fixed; 
    background-position: left center;
    z-index: -2;
    opacity: 0;
  width: 100%;
  top: 0;
  left: 0;
  height: 100%;
}
.background-image.show {
  opacity: 1!important;
  transition: opacity 2s ease-in-out;
}
.wrapper {
  background: transparent;
}
/* Borrowed from BOOTSTRAP */
.row {
  clear: both;
}
.col-sm-3 {
  position: relative;
  min-height: 1px;
}
.col-sm-3 {
  float: left;
  width: 25%;
}
.col-sm-offset-6 {
  margin-left: 50%;
}
/* END Borrowing */
h2 {
  margin-top: 0;
}
</style>
<script src="http://code.jquery.com/jquery.js"></script>
<script>
$(function() {
  // Save some CPU cycles and get the first item ONCE
  var first = $('.background-image:first-child');
  
  // SetInterval to cycle through images
  setInterval(function() {
    // get the currently visible image
    var current = $('.background-image.show');
  
    // Try to get the next image relative to the current
    var next = current.next('.background-image');
    // But if there isn't one go back to the first
    if (next.length == 0) next = first;
  
    // Toggle the show class on the selected and the next
    $([current, next]).toggleClass('show');
  }, 5000)
});
</script>
</head>
<body>
</div>
  <div class="background-image show" style="background: url('http://dijitalrealm.com/JCMusic/images/VanGoghPainting.jpeg')"></div>
  <div class="background-image" style="background: url('http://dijitalrealm.com/JCMusic/images/PoleWalkerKids.jpg')"></div>
  <div class="background-image" style="background: url('http://dijitalrealm.com/JCMusic/images/CoupleWithCar1941.jpg')"></div>
  <div class="background-image" style="background: url('http://dijitalrealm.com/JCMusic/images/tuoi_tho.jpg')"></div>
  <div class="background-image" style="background: url('http://dijitalrealm.com/JCMusic/images/tug-o-war.jpg')"></div>
  <div class="background-image" style="background: url('http://dijitalrealm.com/JCMusic/images/VietWar.jpg')"></div>
  <div class="background-image" style="background: url('http://dijitalrealm.com/JCMusic/images/IndianBeyonce.png')"></div>
  <div class="background-image" style="background: url('http://dijitalrealm.com/JCMusic/images/New-York-City-Times-Square-2010-1.jpg')"></div>
  <div class="background-image" style="background: url('http://dijitalrealm.com/JCMusic/images/StainedGlass.jpg')"></div>
  <div class="background-image" style="background: url('http://dijitalrealm.com/JCMusic/images/crying-girl-cameo.jpg')"></div>
  <div class="background-image" style="background: url('http://dijitalrealm.com/JCMusic/images/VietnamRiceField.jpg')"></div>
  <div class="background-image" style="background: url('http://dijitalrealm.com/JCMusic/images/NapaCouple-01.jpeg')"></div>
  <div class="background-image" style="background: url('http://dijitalrealm.com/JCMusic/images/WideEyedBaby.jpg')"></div> 
</div>
<div class="wrapper">
  <div class="row">
    <div class="col-sm-3">
      <div class="menubar">
        <div>
          <ul params="3,-3,500,slide,150,h,1" class="mlddm" style="width: 210px; height: 308px; visibility: visible; margin-top: 0px;">
            <li><a href="http://dijitalrealm.com/JCMusic/Jukebox2.html">home</a></li>
            <li><a href="http://dijitalrealm.com/JCMusic/ManOfMyWords.html">A Man of My Words</a></li>
            <li><a href="http://dijitalrealm.com/JCMusic/SweetLittleRomanticKisses.html">Sweet Little Romantic Kisses</a></li>
            <li><a href="http://dijitalrealm.com/JCMusic/NoOneButYou.html">No One But You</a></li>
            <li><a href="http://dijitalrealm.com/JCMusic/VisionOfLoveliness.html">Vision of Loveliness</a></li>   
            <li><a href="http://dijitalrealm.com/JCMusic/WhenGodWasYoung.html">When God Was Young</a></li>
            <li><a href="http://dijitalrealm.com/JCMusic/GrandDesign.html">The Grand Design</a></li>
            <!--<li><a href="http://dijitalrealm.com/JCMusic/DistantSeas.html">Distant Sea</a></li> -->
            <!--<li><a href="http://dijitalrealm.com/JCMusic/IDontCryAnymore.html">I Don't Cry Anymore</a></li> -->
          </ul>
        </div>  
      </div>
    </div>
    <div class="col-sm-3 col-sm-offset-6">
      <div class="content">
        <div class="innerContent">
          <h2 id="header">The Grand Design<br/> 
            <span class="copyright">&copy; 1998-2016 by J Carney</span>
          </h2>

          <div class="player"> 
            <audio controls="" autoplay="">
              <source src="http://dijitalrealm.com/JCMusic/Songs/Grand Design_Feb 18 2016.mp3" type="audio/mpeg">
              <p>If you can read this, your browser does not support the audio element.</p>
            </audio>
          </div>
          <p>
            CHORUS: <br>
            We're all part of the grand design <br>
            Some of it yours, some of it mine <br>
            In this world of interlocking hearts <br>
            We're all part of the grand design <br>
            (Repeat)
            </p><p>
            Boy meets girl in the early spring <br>
            By the 4th of July they're talking wedding ring <br>
            A year later the church bells chime <br>
            And the circle of life begins one more time
          </p>
          <p>
            And it's all part of the grand design <br>
            Some of it yours, some of it mine <br>
            In this world of interlocking hearts <br>
            We're all part of the grand design
          </p>
          <p>
            Sometimes the river of sadness flows <br>
            It hurts so bad it just goes and goes <br>
            Why must we walk through the valley of the shadow of death <br>
            No one knows but the One who gave us life and breath
          </p>
          <p>
            And we're here in the universe <br>
            To learn to love and reverse the curse <br>
            We can make it for better or for worse <br>
            Here in the universe <br>
          </p>
          <p>
            Repeat CHORUS
          </p>
          <p>
            Doctors doctor and singers sing <br>
            And single mothers, well they do everything <br>
            The sun comes up and the children play <br>
            On and on it goes every day
          </p>
          <p>
            And it's all part of the grand design <br>
            Some of it yours, some of it mine <br>
            In this world of interlocking hearts <br>
            We're all part of the grand design
          </p>
          <p>
            Repeat CHORUS
          </p>  
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

Open in new window

0
 
LVL 1

Author Comment

by:gabrielPennyback
ID: 41789819
Thanks, Julian! Just got back from a long weekend, I hope to try this out later today sometime.

Thanks, John
0
 
LVL 1

Author Comment

by:gabrielPennyback
ID: 41790557
Hi Julian, thank you so much for going to all this trouble! I checked https://validator.w3.org/ and there were only 2 output errors as opposed to my 25 or 30 :- ) It looks very slick and I kind of like the fact that some of the images repeat, but I can't figure out how to modify the code to have the single image fill the whole screen, so that I can have that as an option if I want. I also can't figure out how to modify the positioning. I'm viewing it on my android in firefox and the tug-of-war image for example is fixed at the top and in the horizontal view I can barely see the tops of the kids' heads.

Also - I hate to sound so picky after what a great job you've done - but on my phone the ease-in works great but there's no ease-out. How do I fix that?
 

Thanks,
John
0
What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

 
LVL 51

Assisted Solution

by:Julian Hansen
Julian Hansen earned 500 total points
ID: 41790745
I think I know what you mean.

I have updated the styles like so
.background-image {
  background-attachment:fixed; 
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  left: 0;
  opacity: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: -2;
}

Open in new window

And the html like so
  <div class="background-image show" style="background-image: url('http://dijitalrealm.com/JCMusic/images/VanGoghPainting.jpeg')"></div>
  <div class="background-image" style="background-image: url('http://dijitalrealm.com/JCMusic/images/PoleWalkerKids.jpg')"></div>
  <div class="background-image" style="background-image: url('http://dijitalrealm.com/JCMusic/images/CoupleWithCar1941.jpg')"></div>
  <div class="background-image" style="background-image: url('http://dijitalrealm.com/JCMusic/images/tuoi_tho.jpg')"></div>
  <div class="background-image" style="background-image: url('http://dijitalrealm.com/JCMusic/images/tug-o-war.jpg')"></div>
  <div class="background-image" style="background-image: url('http://dijitalrealm.com/JCMusic/images/VietWar.jpg')"></div>
  <div class="background-image" style="background-image: url('http://dijitalrealm.com/JCMusic/images/IndianBeyonce.png')"></div>
  <div class="background-image" style="background-image: url('http://dijitalrealm.com/JCMusic/images/New-York-City-Times-Square-2010-1.jpg')"></div>
  <div class="background-image" style="background-image: url('http://dijitalrealm.com/JCMusic/images/StainedGlass.jpg')"></div>
  <div class="background-image" style="background-image: url('http://dijitalrealm.com/JCMusic/images/crying-girl-cameo.jpg')"></div>
  <div class="background-image" style="background-image: url('http://dijitalrealm.com/JCMusic/images/VietnamRiceField.jpg')"></div>
  <div class="background-image" style="background-image: url('http://dijitalrealm.com/JCMusic/images/NapaCouple-01.jpeg')"></div>
  <div class="background-image" style="background-image: url('http://dijitalrealm.com/JCMusic/images/WideEyedBaby.jpg')"></div> 

Open in new window

Updated sample here
0
 
LVL 51

Assisted Solution

by:Julian Hansen
Julian Hansen earned 500 total points
ID: 41790747
Note: do a hard refresh Shift + Refresh to ensure you get the latest styles.

I have changed the styles for he background image to cover (take up the full screen) and to center the image.

Note II: different screen resolutions will mean a different part of the image is cut off due to the cover style. There is no way for the image to fill the screen and for you to see the full image on all resolutions as aspect ratios differ across devices.
0
 
LVL 1

Author Comment

by:gabrielPennyback
ID: 41791853
Fantastic, Julian, thanks! There were only 2 small issues and one of them I was actually able to fix myself. The images were still not easing out so it occurred to me ... (I'm starting to get the logic of your code) ... to add this line to the background-image style: "transition: opacity 2s ease-out." And lo and behold it worked!

The one remaining problem is that when I'm holding my phone horizontally and I scroll the pane on the right to see the lyrics hidden below the screen, the nav buttons move up and out of view. This is not the end of the world, since if somebody wants to hear another song they can scroll back up, but it would be nice if the nav buttons would stay put, locked to the background images so to speak. Is there a way to do that?

Thanks,
John
0
 
LVL 1

Author Comment

by:gabrielPennyback
ID: 41795129
Hi Julian, I thought I awarded the points for this last week, sorry for the delay. I actually even figured out how to fix the menu scrolling problem as well, so I now have something pretty awesome I think, thanks to you.

I'm sure I'll be asking more questions about this page just to learn more ways to tweak it, so please be on the lookout!

Thanks,
John
0
 
LVL 51

Expert Comment

by:Julian Hansen
ID: 41795506
You are most welcome John.
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

747 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now