Solved

Designate size of homepage to show via CSS

Posted on 2014-02-18
13
188 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
 
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
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 
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

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

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.
SSL stands for “Secure Sockets Layer” and an SSL certificate is a critical component to keeping your website safe, secured, and compliant. Any ecommerce website must have an SSL certificate to ensure the safe handling of sensitive information like…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

757 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

16 Experts available now in Live!

Get 1:1 Help Now