?
Solved

Designate size of homepage to show via CSS

Posted on 2014-02-18
13
Medium Priority
?
196 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
[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
  • 5
  • 5
13 Comments
 
LVL 53

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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Citrix XenApp, Internet Explorer 11 set to Enterprise Mode and using central hosted sites.xml file.
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Suggested Courses
Course of the Month9 days, 20 hours left to enroll

762 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