Solved

Designate size of homepage to show via CSS

Posted on 2014-02-18
13
191 Views
Last Modified: 2014-04-12
I'm sure this is a responsive web question but I am not sure what to look for online.

We'd like to build our homepage to show only a certain section of the site regardless of screen size.  Not in width, but height.  

Here is a sample of our current page.
www.faithfamilyshiloh.org

We'd like the scrolling banner and 4 buttons below to be all that shows on the homepage initially, until the user scrolls down.  It's working now for most browsers, but we've found that some large screen sizes are showing more down below.

is there something I can setup to force what gets shown when the user initially visits the page?
0
Comment
Question by:axessJosh
  • 5
  • 5
13 Comments
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39867683
It looks like you just need to make the buttons responsive or the width a %.

Do you want some div's to show up on the first page load, then the viewer goes to another page and comes back and that content is gone?  Or do you just want to give the user an option to show/hide?
0
 
LVL 58

Expert Comment

by:Gary
ID: 39867709
What you need to be looking at is a parallex theme, but for the sake of that homepage it would be kind of a lot of work for little reward.
Either that or hide everything below and track the scrollbar with js and when they scroll down set the content to visible - but seems kinda yuck
0
 
LVL 2

Author Comment

by:axessJosh
ID: 39867714
I really just want the image and bottom buttons to show regardless of browser size... this may not be possible but I'd like all the content to be there, but perhaps an encapsulating homepage <div> that resizes by browser window?
0
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 
LVL 58

Expert Comment

by:Gary
ID: 39867729
Since you are using jquery
Wrap your slide show and boxes in a div and give a class of main and add this code

<script>
$(function() {
$(".main").css("height",$(window).height())
})
</script>

Open in new window

0
 
LVL 58

Accepted Solution

by:
Gary earned 400 total points
ID: 39867747
That's wrong, corrected

<script>
$(function() {
     $(".main").css("height",$(document).height()+"px")
})
</script> 

Open in new window

0
 
LVL 2

Author Comment

by:axessJosh
ID: 39868006
I did this, but now it added a huge margin between the <div> i setup to show and the next content.  Is this a conflict with other CSS i have setup or just what is happening with the jquery code you sent?  If we could have that not so wide, it'd be nice.
0
 
LVL 58

Assisted Solution

by:Gary
Gary earned 400 total points
ID: 39868028
You need to rejig your html so you can separate the slideshow and boxes from the rest of the page.
As you have it now your .home container div is containing the whole page and that is why you get the big gap.

So take the home-lower-images div and place it under your slider div.
Wrap the slider and home-lower-images divs ina container div, give this div a class and change the jquery to use this class name.

Also change the jquery code to this

<script>
jQuery(function() {
     jQuery(".main").css("height",jQuery(document).height()+"px")
})
</script> 

Open in new window

0
 
LVL 2

Author Comment

by:axessJosh
ID: 39868039
I did just set it up in a div to encapsulate the slider and lower images.  To not cause a conflict with another .main i updated the code to use a class of .home

<div id="container">
			<div id="content-home" role="main">
			<div class="home">
            	<div id="slider">
			<?php if (function_exists('easing_slider')){ easing_slider(); }; ?>
            	</div><!-- #slider -->
	<div id="wrapper" class="hfeed">		
<div id="main-home">            
            	<div id="home-lower-images">
                	<div class="lower-image">
                    Current News
                    </div><!-- lower-image 1-->
                    <div class="lower-image">
                    <a href="/about/times-location"><img src="<?php bloginfo('template_directory'); ?>/images/time-location.png" /></a>
                    </div><!-- lower-image 2-->
                    <div class="lower-image">
                    <a href="/something-for-everyone/kidztown/"><img src="<?php bloginfo('template_directory'); ?>/images/ffc-forkids-button.png" /></a>
                    </div><!-- lower-image 4-->
                    <div class="lower-image">
                    <img src="<?php bloginfo('template_directory'); ?>/images/ffc-messages-button.png" />
                    </div><!-- lower-image 5-->
                </div><!-- home-lower-images -->
			</div><!-- .home ---- this should setup to only show the content above on the homepage -->
                <div id="home-welcome">

Open in new window

0
 
LVL 58

Expert Comment

by:Gary
ID: 39868050
That's not how your code is looking.  You need to actually move the home-lower-images div. And close the home div after the home-lower-images div

Also make the jquery changes in the previous comment to eliminate a jquery conflict in WP
0
 
LVL 2

Author Comment

by:axessJosh
ID: 39868061
I guess I'm completely lost then because it looks to me that is exactly what I have setup.

I added:

<div class="home"> directly above the slider <div>

then..

</div> directly below the closing div tag for home-lower-images to close that div class.
0
 
LVL 2

Author Comment

by:axessJosh
ID: 39868079
oops, found a conflict in another div causing the issue.

I'll amend.
0

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

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

Suggested Solutions

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
Several part series to implement Internet Explorer 11 Enterprise Mode
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
This Micro Tutorial will demonstrate how nuggets on the Web are formatted by using Chrome Developer Tools. These tools would not only view the site's CSS but it can also modify it and save the CSS to use on your own site.

770 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