I’M WAITING FOR THE UPDATED PAGE WITH JUST THE HYPE UNRESPONSIVE CODE BUT IN THE MEANTIME YOU CAN HAVE A LOOK AT THE PAGE AS YOU MAY NOT NEED THE UPDATED PAGE
It looks like you’re using a jQuery technique to make your document scale – we recommend using responsive features built into Hype like Responsive Layouts and Flexible Layouts (but we’re biased, of course).
Are you able to share a testing link so I can see how it is appearing on the page?
Dan I hope you see this as I have been dragging this problem along for almost a week and a half. I do see where you replied and it is a link to a post which has an explanation but the problem is different and rather than spending 2 or 3 hours trying to figure this out I had thought this would be a snap for you. I understand and appreciate your help but in this case I need you to PLEASE look at this link
THE TOP HEADER IS A HYOE RESPONSIVE HEADER I NEED THIS TO BEHAVE CORREDTLY AS YOU WILL SEE WHEN IT IS MADE SMALLER IT GENERATES A WHITESPACE UNDERNEATH.
I recommend using the technique I linked to in my last response. This will hide the white space underneath your header. Solving this issue is not a snap for me, so I put effort into coming up with a solution which I hope will help a wide range of people. Since you have your header in an iframe, you’re half way there. Remove your iframeHeight function, give it the ID ‘hypeFrame’ and run this function:
<script type="text/javascript">
var scaler = function () {
// Input the Width and the Height of your original document. Just Numbers!
var ratioScale = 1160 / 230;
// get the width of the enclosing Div for the Hype element
var currentWidth = document.getElementById('s5_logo_banner_row').offsetWidth;
// Use the width of the Div, and divide it by the Ratio of the W/H of the document
// and set this as the variable for the height of the Iframe.
var iFrameNewHeight = currentWidth / ratioScale;
// set the iframe to have the correct height.
document.getElementById('hypeFrame').style.height = iFrameNewHeight + "px";
};
// Run Scaler function on Document load
scaler();
// Run the function again if the window is resized.
window.onresize = scaler;
</script>
Note that I’m using the element s5_logo_banner_row to get the containing element’s width. I also inputted your width / height.
Your header is not technically ‘responsive’. It is not adjusting based on the width of its container. Hype has two methods to make a document responsive: Flexible layouts & responsive layouts and you’re not taking advantage of them.
Daniel I hope you see this, first I want to apologize as the caps were not me yelling but I do understand etiquette . But moving on, this has taken a life of its own as someone added a css page with codes to the header I sent as A link.
So I’m a little unsure where to begin here but lets just do this to make this easier in the attached zip file is the header. Inside hype there is NO SCALE and the header is NOT RESPONSIVE when viewed in HTML.
Now if you can please let me know where to place the code. I would think the javascript would go in the head between the style<>
The container was used by another person so it is stripped out of this header, where do I add the <iframe on load DIV?
I think this should do it for what I need to know as this header is going in a Wordpress site which is way over my head.