0

I have a strange problem, my data gets hidden when I change the height of my browser. It also disappears in mobile browsers sizes... here is a screenshot:

enter image description here

I am following this tutorial

Here is the page with the issue.

Jeff Noel
  • 7,500
  • 4
  • 40
  • 66
userdead
  • 78
  • 9

2 Answers2

1

From what I can tell your slide DIVs have height: 100%; as well as your html and body tags. html will inherit it's height from the view-port size. Your content is larger than the view-port as you change the vertical height. Content gets hidden under the elements that come after it. If you remove the background color from all your slides you will begin to see your content overlapping.

What you need to do is remove height: 100%; from your slides. This will cause your slider DIVs to contain/show your content as they will expand to fit the height they actually take up and will prevent element stacking.

What you need is to either have the slide be the view-port size or the content size, which ever is larger. Since you are using jQuery already you could try something like this:

http://jsfiddle.net/z6xrf/

function slideHeights() {

     var viewportHeight = $(window).height();

     $('.slide').each(function(){

          var elem = $(this);

          // reset so we can get the correct height of element each time
          elem.css('height','auto');

          var slideHeight = elem.height();  // height of content in slide

          if ( viewportHeight > slideHeight ) {
               height = viewportHeight;
          } else {
               height = slideHeight;
          }

          elem.css('height', height);

     });

}
$(document).ready(function(){
     slideHeights();  // for page load
     $(window).resize(slideHeights);  // for window resize
});

What we did above is create a function that monitors the current size of the view-port and compares it to the height of the slide (total height of slide's content). If the view-port height is larger than content height we use that, otherwise we use the content height for the slide. In the process we reset the min-height value so it is not reading a value we previously set.

We initially fire the function on page load simply by calling it. Then we pass it to the resize function so it gets called when appropriate. See http://api.jquery.com/resize/ for how browser apply the resize event.

hungerstar
  • 21,206
  • 6
  • 50
  • 59
  • If i remove the height then it will not look good in desktop mode, i need only the one slide to be per screen, after removing the height all data get stacked up. – userdead Jul 10 '13 at 08:59
  • Let me check this method. Currently i added min-height and it works. – userdead Jul 11 '13 at 09:17
  • but there is just one problem, when i change the resolution in desktop browser it did work well till i decrease it, and when i increase the browser width then it did not adjust well in browser.. the code breaks..pls check if you can help me to fix it? coding333.hol.es – userdead Jul 27 '13 at 12:38
  • Try using `height` instead of `min-height`. – hungerstar Jul 27 '13 at 15:35
  • no, it did not work..and you are asking me to change ".slide" min-height right? – userdead Jul 28 '13 at 14:04
  • 1
    I updated my answer. There were two lines that used `min-height`, `elem.css('min-height', 'auto');` and `elem.css('min-height', height);`. Make them `elem.css('height', 'auto');` and `elem.css('height', height);`. It wasn't working before because `min-height` doesn't use `auto` and therefore the height wasn't getting reset and the logic would only allow the slides to have their heights get larger and not smaller. Check out this jsFiddle: http://jsfiddle.net/z6xrf/. – hungerstar Jul 28 '13 at 14:24
  • and also do you know one thing, when it loads or when i load the website in fresh mode, it take time to fix the height. Might be just because of loading the js file? Can we fix that? – userdead Jul 30 '13 at 17:54
  • Not 100% sure what you're getting at but I did notice that you're loading your JS files in the `` instead of right before the closing `` tag. Try that. – hungerstar Jul 30 '13 at 18:14
  • you mean.. MY JS

    ?

     – userdead Jul 31 '13 at 22:13
  • Your HTML document is setup like this ``..your JS is here..``. Most of your JS can be placed at the bottom like this `...your content, blah blah blah...`your JS here, immediately before closing body tag (->)``. Check these links out: http://developer.yahoo.com/performance/rules.html#js_bottom, http://stackoverflow.com/questions/196702/where-to-place-javascript-in-a-html-file#196708. Though I don't really know what is causing your problem, I'm just suggesting solutions. Look into `gzipping` your files too. – hungerstar Jul 31 '13 at 22:23
  • i think the head js files load first, and then the footer? – userdead Aug 03 '13 at 11:38
1

It is a problem of height of-course. Do one thing, set a minimum height of each slide, approx 800 or 900 px. And then test, it will surely work.

.slide {
background-attachment: fixed;
height: 100%;
min-height: 800px;  /*set any height here*/
position: relative;
width: 100%;

}

user2485649
  • 235
  • 1
  • 3
  • 13