Sorry in advance if this is a minor question, but I'm new to javascript. I'm writing code for a webpage with full-width color backgrounds. Essentially, what I'm trying to do is detect the height of the window, and then make sure that the color block is the size of the window. The function works well on page load.
The problem is when I shrink the window, the div height doesn't change with the window size. I get all sorts of errors, like graphics poking out from behind the div.
I think what I'm missing is a way to detect the height of the content within each div and resize the height accordingly.
You can see how it works at http://pressshoppr.com
Here's the code:
$(function(){
var windowH = $(window).height();
if(windowH > wrapperH) {
$('.fullWidthSectionBG').css({'height':($(window).height())+'px'});
$('.fullWidthSectionBGFirst').css({'height':($(window).height())-120+'px'});
}
$(window).resize(function(){
var windowH = $(window).height();
var wrapperH = $('.fullWidthSectionBG').height();
var newH = wrapperH + differenceH;
var truecontentH = $('.fullWidthSection').height();
if(windowH > truecontentH) {
$('.fullWidthSectionBG').css('height', (newH)+'px');
$('.fullWidthSectionBGFirst').css('height', (newH)-120+'px');
}
});
});
I am not sure I totally understand the effect you are going for here, but I would imagine that if your initial bit of code achieves it, all you have to do is reuse exactly that. Treat each resize as if the page had just loaded, and get the results you want, eg:
$(function(){
// encapsulate the code that we know WORKS
function init() {
var windowH = $(window).height();
if(windowH > wrapperH) {
$('.fullWidthSectionBG').css({'height':($(window).height())+'px'});
$('.fullWidthSectionBGFirst').css({'height':($(window).height())-120+'px'});
}
}
// call on page ready
init()
// ...and call again whenever the page is resized
$(window).resize(init)
});
Related
i am in a difficult time for 2 days with a code for collapsing a menu . I'm trying really hard to realize what am i doing Wrong.
The problem with this code is that when you resize the browser it won't work again.
If someone could help me , i would appreciate it very much.
$(document).ready(function(){
function jqUpdateSize(){
// Get the dimensions of the viewport
var width = $(window).width();
if(width<=768){
$('.toggle-nav-this-site').css("display","block");
$('.toggle-nav-this-site .button-this-tg').click( function(){
$('.aside-menu > ul').toggle('showElem');
});
}else{
$('.toggle-nav-this-site').css("display","none");
$('.aside-menu > ul').show();
}
$('#jqWidth').html(width); // Display the width
};
$(document).ready(jqUpdateSize); // When the page first loads
$(window).resize(jqUpdateSize); // When the browser changes size
});
I've never used jQuery, but with plain JS you first have to add an EventListener:
window.addEventListener('resize', functionname);
This called function has to change all variables.
You can get the window-Size by: window.innerHeight, window.innerWidth
I've written a very simple jQuery script for a responsive site that allows the topnav to become "sticky" when scrolling past its location. (You can see it working here.) It also adds/removes the height of the stickynav to/from the top-margin of the body and another element to remove the sudden jump when the menu becomes fixed. This is the code:
$(document).ready(function() {
var theLoc = $('nav#menu').position().top;
var navHeight = $('nav#menu').height();
$(window).scroll(function() {
if(theLoc >= $(window).scrollTop()) {
if($('nav#menu').hasClass('fixed')) {
$('nav#menu').removeClass('fixed');
$('body').css('margin-top', '0');
$('nav#hidden-menu').css('margin-top', '0');
}
} else {
if(!$('nav#menu').hasClass('fixed')) {
$('nav#menu').addClass('fixed');
$('body').css('margin-top', navHeight);
$('nav#hidden-menu').css('margin-top', -navHeight);
}
}
});
});
The problem is that the height of the stickynav changes depending on the size of the window. (It's completely absent at less than 768px wide, small from 768 - 1280, and larger at 1280 and wider.) However, the navHeight variable retains the same value as when the page first loaded—so if you load the page, resize the window so that the nav height changes, and then scroll down past the nav, the script no longer works as intended.
How would I write this in such a way that the navHeight variable updates when the window is resized? I tried putting the var declaration directly before it's called for in the script, hoping that it would update the value whenever it's called, but this didn't work.
Add a window resize handler that updates the value of navHeight.
Example:
$(document).ready(function() {
var theLoc = $('nav#menu').position().top;
var navHeight = $('nav#menu').height();
...
$(window).resize(function() {
navHeight = $('nav#menu').height();
});
});
I am working on making some an 'about us' page on our company's site. I have a pic, and I am putting absolute placed speech or 'thought bubbles' above each person's head, with information. I can't share the page, as we are developing on a secure server, but I am attaching the JQuery that i am using.
<script type="text/javascript">
$(document).ready(function () {
$('.readMore').toggle(function () {
var width = $(this).width();
var height = $(this).height();
var increment = 200;
$(this).parent().css("z-index", "9999").animate({
"width": width + increment,
"height": height + increment,
"margin-left": -(width / 2)
}, 300);
$(this).html("Read less >>");
});
});
</script>
I have the animation set to run pretty much the way I want it to, but the one thing that I keep getting stuck on is this. I want JQuery to capture the width and height of each div when it is clicked on (it does this. I am storing the information in two variables called width and height), and then use as the base for the animate function to set it's width and height to the original+200px (this also works fine). However, once that animation has run, I want the original width and height variables to stay the same as they were before the animation, so that I can revert the div height and width to the original for that particular div.
Any ideas on how to accomplish this?
Simple, define the variables out of the toggle scope like this:
$(document).ready(function () {
var originalWidth = $('.readMore').width(),
originalHeight = $('.readMore').height();
$('.readMore').toggle(function () {
var width = $(this).width();
var height = $(this).height();
if (originalWidth !== width){
//do the magic
}
if (originalHeight !== height){
//do the magic
}
});
});
You can declare variable outside of your ready(), those variable will keep your data even outside the function. You can, for example, keep the original width and height on 2 variable outside of the ready function, and they will stay the same between each call.
I have a div (id="mainDiv") which I need to dynamically resize if the user changes the size of their browser window. I have written the following code to try and get this to work however this doesn't seem to be setting the height of my div:
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
var height = $(window).height();
$("#mainDiv").height(height);
</script>
<body>
<div id="mainDiv"></div>
</body>
I don't know much jQuery, am I making an obvious mistake?
There are a few things going wrong here:
Your code will execute straight away before your document has finished loading.
Your code will execute only on load of the the script, not on resize
You're not setting the height of your mainDiv - you're setting the height of another element with the id: accordianMain (but I'm guessing you know that).
You need to handle the browser resize event to wait for the browser to resize then get the dimensions of the window and apply accordingly. You'd do this by handling the window.resize event liks this:
var $win = $(window);
$win.on('resize',function(){
$("#mainDiv").height($win.height());
});
What you probably want to do is wait for for a resize to finish to by adding a timeout so that it doesn't fire too often as well:
var timer,
$win = $(window);
$win.on('resize',function(){
clearTimeout(timer);
timer = setTimeout(function(){
$("#mainDiv").height($win.height());
}, 500);
});
You need to wrap it in a resize function:
$(window).on('resize',function(){
var height = $(window).height();
$("#mainDiv").height(height);
});
Although I should point out what your doing could easily be attained through CSS:
body,#mainDiv {
height:100%;
}
This is more to point out the "it needs to be in a resize event wrapper" larger point, in case you wanted to do some logic that actually needed the event.
Yes, the mistake is use jquery hehehe
You do this with CSS
<body>
<div id="mainDiv" style="height:100%"></div>
</body>
Use an event listener for the window resize (and you should wait for page load before accessing elements with JQuery):
$(function() {
$(window).on('resize', function() {
var height = $(window).height();
$("#mainDiv").height(height);
});
});
I used div content and div footer in my page, i will set this code in my js to set dynamic height for div content.
footer = $("div[data-role='footer']");
content = $("div[data-role='content']");
viewHeight = $(window).height();
contentHeight = viewHeight - footer.outerHeight();
contentHeight -= (content.outerHeight() - content.height());
content.height(contentHeight);
How do I go about getting what the height of an element on a page would be if it ignored the 'height' css property applied to it?
The site I'm working on is http://www.wncba.co.uk/results and the actual script I've got so far is:
jQuery(document).ready(function($) {
document.origContentHeight = $("#auto-resize").outerHeight(true);
refreshContentSize(); //run initially
$(window).resize(function() { //run whenever window size changes
refreshContentSize();
});
});
function refreshContentSize()
{
var startPos = $("#auto-resize").position();
var topHeight = startPos.top;
var footerHeight = $("#footer").outerHeight(true);
var viewportHeight = $(window).height();
var spaceForContent = viewportHeight - footerHeight - topHeight;
if (spaceForContent <= document.origContentHeight)
{
var newHeight = document.origContentHeight;
}
else
{
var newHeight = spaceForContent;
}
$("#auto-resize").css('height', newHeight);
return;
}
[ http://www.wncba.co.uk/results/javascript/fill-page.js ]
What I'm trying to do is get the main page content to stretch to fill the window so that the green lines always flow all the way down the page and the 'Valid HTML5' and 'Designed By' messages are never above the bottom of the window. I don't want the footer to stick to the bottom. I just want it to stay there instead of moving up the page if there's not enough content to fill above to fill it. It also must adapt itself accordingly if the browser window size changes.
The script I've got so far works but there's a small issue that I want to fix with it. At the moment if the content on the page changes dynamically (resulting in the page becoming longer or shorter) the script won't detect this. The variable document.origContentHeight will remain set as the old height.
Is there a way of detecting the height of an element (e.g. #auto-resize in the example) and whether or not it has changed ignoring the height that has been set for it in css? I would then use this to update the variable document.origContentHeight and re-run the script.
Thanks.
I don't think there is a way to detect when an element size changed except using a plugin,
$(element).resize(function() //only works when element = window
but why don't you call refreshContentSize function on page changes dynamically?
Look at this jsFiddle DEMO, you will understand what I mean.
Or you can use Jquery-resize-plugin.
I've got it working. I had to rethink it a bit. The solution is on the live site.
The one think I'd like to change if possible is the
setInterval('refreshContentSize()', 500); // in case content size changes
Is there a way of detecting that the table row has changed size without chacking every 500ms. I tried (#content).resize(function() but couldn't to get it to work.