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();
});
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.
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.
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
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?
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.
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: