Creating a fullscreen "Hero" DIV for your site header

Hi,

I’m trying to make a header where the height adjusts based on browser height, so it fills the screen no matter what (example: http://ironsummitmedia.github.io/startbootstrap-stylish-portfolio/). I read that you could use the following JS code to achieve this, but it doesn’t quite do the trick. I grouped the header and entered “hero” for the unique element ID… Then I ran the JS function below on page load… What am I doing wrong?

jQuery(document).ready(function($){
// Defining a function to set size for #hero
function fullscreen(){
jQuery(’#hero’).css({
width: jQuery(window).width(),
height: jQuery(window).height()
});
}

fullscreen();

// Run the function in case of window resize
jQuery(window).resize(function() {
fullscreen();
});

});

1 Like

This depends on what platforms you’re planning on supporting, but easiest way is to use Viewport units.

<div id="hero">...</div>

#hero {
    height: 100vh;
}

feature is built-in :slight_smile: check out the documentation for responsive layout …

h_classen, I understand how to make a responsive website in Hype. I’ve achieved the header concept already by checking off 100% for both the page height an width (see one of my test websites: 2.ideahubdesign.com). The problem I’m having is when you check off height + width at 100%, you cannot put anything below it without it squishing all content to the browser height and width.

Michael, where do I place the code? I would prefer to do it within Hype so that I don’t have to paste the code within the in the HTML text document every time I export the file. Any ideas? I can create the DIV ID within Hype already because you can assign “unique element IDs” in the “Identity” tab.

Michael, where do I place the code? I would prefer to do it within Hype so that I don’t have to paste the code within the in the HTML text document every time I export the file. Any ideas?

I can create the DIV ID within Hype already because you can assign “unique element IDs” in the “Identity” tab.

if you are trying to write code highlight what you have and click above.

You can place any CSS code in your Head HTML. (Document Inspector->Edit Head HTML)

D

I'm assuming that you wouldn't put it as a DIV in the Head HTML, so what exactly would I put? Below is what Michael suggested as a div if you were to put it in the body.

<div id="hero">...</div>

#hero {
    height: 100vh;
}

Just this part in a <style> tag:

<style>

#hero {
    height: 100vh !important;
}
</style>

!important in there to override any other declarations. To be safe!

Edit* The ID (#hero) corresponds to an element in your project with the same ID in the inspector.

D

DBear,

You're a life-saver! It worked! The only problem is, the content below does not push to stay at the very bottom border of the Hero element, check the URL again: 2.ideahubdesign.com

Any ideas on how I can fix this?

-Jon

Since this element is above others in the layer order, other content will naturally flow under it. It doesn't seem to obscure content for me -- it just requires additional scrolling to see the page content.

Or maybe I'm not understanding the issue -- can you send a screenshot of the problem?

@jonlangberg4896 did you have a look at my previous post¿

Yes I did see your reply, see my response that I left right after that and the rest of the thread. New issue now.

To anyone who has not read the entire thread, a fix for the original problem was provided by Dbear, but now the content below the header does not push below the header, it stays where it is so that the bottom content overlaps with the header if you stretch the browser to a certain size.

Click on the screenshot below and be sure to read the blue text within that screenshot to understand the new problem I am facing.

Hi Daniel,

A simple fix for the original thread was provided: Assigning a Div so its Position is Relative to a Different Div (static footer) http://forums.tumult.com/t/assigning-a-div-so-its-position-is-relative-to-a-different-div/4452

I created another new one because I felt the problem was different, but now there are two other threads that are similar. Do you mind keeping the one above visible but taking down the other two? Here are links to the other ones:

  1. Creating a fullscreen "Hero" DIV for your site header http://forums.tumult.com/t/creating-a-fullscreen-hero-div-for-your-site-header/4406/10

  2. Stretching Header to fit Browser Height http://forums.tumult.com/t/stretching-header-to-fit-browser-height/4388

Thank you!

Thanks for letting me know. I like the solution here so I’m going to keep it around :slight_smile:

Me too! It works like a charm: http://2.ideahubdesign.com/ http://2.ideahubdesign.com/

since it’s a overflowing div have look for overflow-touch css property and assign it -> for mobile devices

I can’t get overflow-touch working…
tried to put somthing like this in the head:

<style>
$('.HYPE_scene').not(".HYPE_element").css{
  		overflow-y: scroll;
  		-webkit-overflow-scrolling: touch;
	}
</style>{

does not work. Can someone help me?

call it on sceneload, include jquery