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.
Related
After some searching I've come across code similar to the demo below that uses js to calculate the height of a div and then sets that number as a margin top to the div below.
This works fine however I need it to calculate as a percentage rather than a 'px' as when I scale down and the responsive image gets smaller the margin-top obviously doesn't scale with it. I'm not sure if this is possible or how I would achieve it?
jsFiddle
JS:
$(document).ready( function(){
var fixedHeight = $(".fixed-container").outerHeight(true);
$(".scrolling-container").css({"float":"left", "margin-top":
fixedHeight + "px"});
});
Any suggestions or solutions would be most appreciated.
You don't need a percentage if you're using jQuery. Use $(window).resize() to update it any time the window updates.
The other reason you can't use a percentage on the height is that you have no container that has a set height. This means it's going to be a percentage of the entire page. The more content you add, the bigger the margin will be. Use this code to achieve what you're doing:
function extraMargin() {
var xMar = $('.fixed-container').outerHeight();
$('.scrolling-container').css({"margin-top":xMar+"px"});
}
$(document).ready(function(){
extraMargin();
});
$(window).resize(function(){
extraMargin();
});
This will run extraMargin() function when the page loads and when the page is resized.
Here's a fiddle
I hope the following steps work if i understand your problem in right way .
$(document).ready( function(){
var fixedHeight = $(".fixed-container").outerHeight(true);
fixedHeight = (fixedHeight/screen.height)*100
$(".scrolling-container").css("margin-top", fixedHeight + "%");
});
Actually repeat the complete code on resize window function too:
$( window ).resize(function() {
var fixedHeight = $(".fixed-container").outerHeight(true);
$(".scrolling-container").css({"float":"left", "margin-top":fixedHeight + px"});
});
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`m trying build function who on document width changes get current webpage windows size and save last of past width with function, so i need past value.
So in pseido code it will be:
on resize(function){
var CURENT_W = 100
**var PAST_W = 90**
var MODIFIER = CURENT_W - PAST_W
jQuert('#element').css('atribute': MODIFIER)
});
So i need function who tell me how much window is resized.
How to get old document width? It`s possile?
Maybe there is some better method?
I've made a little snippet for you, you can use it as you want, just try to understand the script.
I'm 100% it can be done in some easier way, but this is the first that came to my mind
$(document).ready(function() {
// store a variable with body's width
var initial = $("body").width();
// render the body's width value on the selector
$("#initialwidth, #actualwidth").text(initial);
//now let's resize
$(window).resize(function() {
// Before doing some maths, let's get the width from #actualwidth span instead of directly from the variable
// the span has the value "static" because it was defined outside the ".resize()" event
var staticWidth = $("#initialwidth").text();
var newWidth = $("body").width();
//new width - initial width = difference
var finalWidth = newWidth - staticWidth + "px";
$("#actualwidth").text(newWidth);
$("#diff").text(finalWidth);
});
});
Here's a jsfiddle:
http://jsfiddle.net/2dcsonjg/
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)
});
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.