I'm trying to set a height to a div that it's parent have. I've tried and when I use console.log() it's actually working. But the height doesn't set without a refresh.....
This is my function
// Set Hight
function fixingHeight() {
function setHeight() {
var windowWidth = window.innerWidth;
var latestPostsWrapperHeight = $('#latestPosts').height();
var tabPane = $('#latestPosts').find('.tab-pane');
var tabPaneLists = $('#latestPosts').find('.tab-pane').find('li a');
var popularPostsWrapperHeight = $('#popularPosts').height();
var profileWrapper = $('#popularPosts').find('.pofile-wrapper');
if(windowWidth > 767) {
$.each(tabPane, function() {
$(this).height(latestPostsWrapperHeight - 70);
});
$.each(tabPaneLists, function() {
$(this).height((latestPostsWrapperHeight - 70) / 5 - 1);
});
$.each(profileWrapper, function() {
$(this).outerHeight(popularPostsWrapperHeight);
});
}
//console.log(windowWidth);
}setHeight();
$(window).resize(function() {
setHeight();
});
}fixingHeight();
To handle window resize event, call the function $(window).resize outside of the function setHeight()
to call setHeight() on first load, use the jquery handler $(document).ready
This is the final code :
function setHeight() {
var windowWidth = window.innerWidth;
var latestPostsWrapperHeight = $('#latestPosts').height();
var tabPane = $('#latestPosts').find('.tab-pane');
var tabPaneLists = $('#latestPosts').find('.tab-pane').find('li a');
var popularPostsWrapperHeight = $('#popularPosts').height();
var profileWrapper = $('#popularPosts').find('.pofile-wrapper');
if(windowWidth > 767) {
$.each(tabPane, function() {
$(this).height(latestPostsWrapperHeight - 70);
});
$.each(tabPaneLists, function() {
$(this).height((latestPostsWrapperHeight - 70) / 5 - 1);
});
$.each(profileWrapper, function() {
$(this).outerHeight(popularPostsWrapperHeight);
});
}
console.log(windowWidth);
}
$(document).ready(function() {
setHeight();
});
$(window).resize(function() {
setHeight();
});
remove the function wrapper fixingHeight(), 'setHeight()' is enough
$(window).resize dont't run because it is in a function so this is not working without calling the function wrapper, so get it outside of the function.
as # joram say, you can call $(document).ready when your document finish loading, so is ready.
$(document).ready(function() {
setHeight();
});
$(window).resize(function() {
setHeight();
});
function setHeight() {
var windowWidth = window.innerWidth;
console.log(windowWidth);
var latestPostsWrapperHeight = $('#latestPosts').height();
var tabPane = $('#latestPosts').find('.tab-pane');
var tabPaneLists = $('#latestPosts').find('.tab-pane').find('li a');
var popularPostsWrapperHeight = $('#popularPosts').height();
var profileWrapper = $('#popularPosts').find('.pofile-wrapper');
if(windowWidth > 767) {
$.each(tabPane, function() {
$(this).height(latestPostsWrapperHeight - 70);
});
$.each(tabPaneLists, function() {
$(this).height((latestPostsWrapperHeight - 70) / 5 - 1);
});
$.each(profileWrapper, function() {
$(this).outerHeight(popularPostsWrapperHeight);
});
}
}
Related
I have 4 sub-banners with display: block; width: 100%; that each have a div with text inside. These divs hangs down outside the parent element using transform: translateY(238px).
Each div that holds the text is of varying height so I was trying to write a function to check each text div's height and apply the margin to the bottom of that specific parent element accordingly.
What I got so far is this, but I can't figure out how to get the variable respectiveMargin passed into my second each function so that it matches up with the right parent element. Right now it just applies the same margin on all sub-banners. Thanks for any and all help!
const resize = () => {
if ($(window).width() < 768) {
$('.sub-banner-text-wrapper').each(function () {
var textHeight = $(this).height();
var responiveMargin = (textHeight - 62) + 25;
});
$('.sub-banner').each(function () {
$(this).css("margin-bottom", responiveMargin);
});
}
};
$(window).on('resize', resize);
Seems the main problem is that you're trying to use two .eaches when you only need one:
const resize = () => {
if ($(window).width() < 768) {
$('.sub-banner-text-wrapper').each(function () {
var textHeight = $(this).height();
var responiveMargin = (textHeight - 62) + 25;
$(this).closest('.sub-banner').css("margin-bottom", responiveMargin);
});
}
};
$(window).on('resize', resize);
So reference the index when you loop over the one set.
var banners = $('.sub-banner');
$('.sub-banner-text-wrapper').each(function (ind) {
var textHeight = $(this).height();
var responiveMargin = (textHeight - 62) + 25;
banners.eq(ind).css("margin-bottom", responiveMargin);
});
If it happens to be a child/parent element, than you can just select it.
var banners = $('.sub-banner');
$('.sub-banner-text-wrapper').each(function (ind) {
var textHeight = $(this).height();
var responiveMargin = (textHeight - 62) + 25;
//If a child
$(this).find(".sub-banner").css("margin-bottom", responiveMargin);
//or a parent
$(this).parent().css("margin-bottom", responiveMargin);
});
Maybe Something like this?
if ($(window).width() < 768) {
$('.sub-banner-text-wrapper').each(function () {
var subBanner = $(this).closest('.sub-banner').attr('class');
var textHeight = $(this).height();
var responiveMargin = (textHeight - 62) + 25;
$(subBanner).css("margin-bottom", responiveMargin);
});
}
I am having trouble with where to add some js/jquery. code. I have a js file in my wordpress template and want to add a simple piece of code to show/hide a div, although it breaks the exisiting js/jquery. Where do I add it in the file, so it will not break it and/or what is the way to structure this file?
Exisiting Wordpress JS file...
jQuery(document).ready(function( $ ) {
//VIDEO
var iframe = $('.videoPlayer')[0],
player = $f(iframe),
status = $('.status');
// When the player is ready, add listeners for pause, finish, and playProgress
player.addEvent('ready', function() {
status.text('ready');
player.addEvent('pause', onPause);
player.addEvent('finish', onFinish);
player.addEvent('playProgress', onPlayProgress);
});
// Call the API when a button is pressed
$('.playPause').bind('click', function() {
player.api($(this).text().toLowerCase());
console.log('clicked'); // triggers
player.api('paused', function(paused) {
console.log('inside paused'); // doesn't trigger
if (paused) {
player.api('play');
}
else {
player.api('pause');
}
});
});
var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
// IFRAME RESIZE
function videoWrapper() {
var winW = $(window).width();
var winH = $(window).height();
var winR = winH / winW;
var video = $("#videoContainer iframe");
// console.log( winW, winH, winR );
// ratio of original video
var vidR = video.attr("height") / video.attr("width");
// ratio of iframe
var ifrR = video.height() / video.width();
// ifrR nedds to be 0.65
//var diff = winW / (winH / vidR);
if ( winR > vidR ) {
// diff between current video height and winH
var diff = winH / (winW * vidR);
var newW = winW * diff;
var newH = winW * diff * 0.65;
video.css({
"width": newW,
"margin-left": 0 - (newW - winW) / 2,
"margin-top": 0 - (newH - winH) / 2,
"height": newH
});
} else {
video.css({
"width": winW,
"margin-left": "",
"margin-top": 0 - ( (winW * 0.65) - winH ) / 2,
"height": winW * 0.65
});
}
}
// VIDEO SELECT
if ( iOS ) {
$("#kvVideo").remove();
$("#kvVideoMobile").show();
}
// VIDEO MUTE
if ( iOS ) {
var iframe = document.getElementById("kvVideoMobile");
} else {
var iframe = document.getElementById("kvVideo");
}
var player = $f(iframe);
player.addEvent('ready', function() {
// player.api('setVolume', 0);
// $("#videoContainer").on('click', function() {
// // Play the video
// player.api('play');
// alert("play");
// });
});
function muteVideo () {
player.api('setVolume', 0);
mute = true;
$("#mute_button").hide();
$("#volume_button").show();
// console.log("mute");
}
function unmuteVideo () {
player.api('setVolume', 1);
mute = false;
$("#mute_button").show();
$("#volume_button").hide();
// console.log("unmute");
}
var mute = false;
$('#button').on("click", function(){
// console.log("button click");
if ( !mute ) {
muteVideo();
} else {
unmuteVideo();
}
});
// EVENTS
$(window).on("load", function(){
videoWrapper();
}).on("resize", function(){
videoWrapper();
sectionCalc();
});
});
The second part of code I want to add into the js file, so it will work with the code already there...
$(document).ready(function(){
$(".colophon").hide();
$(".newsletter").hide();
$("#colophon").click(function(){
$(".newsletter").hide();
$(".colophon").fadeToggle('slow');
});
$("#newsletter").click(function(){
$(".colophon").hide();
$(".newsletter").fadeToggle('slow');
});
});
Thanks!
I would create you own file and then enqueue it using WordPress's wp_enqueue_script() in your functions.php file
How can i know the height of an element after a resize event? I use the function .height() of jQuery and i have a timer of 500ms before use my resize function but the function .height() still return the height before the resize.
$(window).resize(function() {
window.clearTimeout(timerResize);
timerResize = setTimeout(recalculateAll, 1000);
});
function recalculateAll() {
console.log('resize');
setOpenClose('.auteurs .block');
}
function setOpenClose(target) {
$(target).each(function() {
$(this).data('height', $(this).height());
$(this).height($(this).height() - ($(this).find('p').height() + 45));
});
sameHeights(target);
}
function sameHeights(target, locus) {
if (locus === undefined) {
locus = target;
}
var heightMax = 1;
$(target).each(function() {
if ($(this).height() > heightMax) {
heightMax = $(this).height();
}
});
$(target).each(function() {
$(this).height(heightMax);
});
}
Hoping my question is understandable because of my approximate english, and the fact i'm new in development.
You should be able to call the retrieve the height of the element in the resize callback.
$(window).resize(function(){
var itemHeight = $('.item').height();
});
See https://jsfiddle.net/cvwf0pra/
I'm trying to do like http://css-tricks.com/text-fade-read-more/ -- but how do I get it to contact/expand both when clicking on the More button and on the body text?
Clicking on the body text works fine, but it only works the first time with the More button:
http://jsfiddle.net/frank_o/8ssrmxwp/10/
JS:
$.fn.truncate = function(container, maxHeight) {
var totalHeight = 0,
paragraph = container.find('p');
container.css('max-height', maxHeight);
paragraph.each(function() {
totalHeight += $(this).outerHeight(true);
});
if(totalHeight > maxHeight) {
container.append('<div class="fade_overlay"></div>');
$('More').insertAfter(container);
var fadeOverlay = container.parent().find('.fade_overlay'),
more = container.parent().find('.more'),
duration = 100;
// http://stackoverflow.com/questions/4911577/jquery-click-toggle-between-two-functions
function firstClick() {
container.css('height', container.height())
.css('max-height', 9999);
container.animate({
'height': totalHeight
});
fadeOverlay.fadeOut(duration);
// more.fadeOut(duration);
container.one('click', secondClick);
}
function secondClick() {
container.animate({
'height': maxHeight
});
fadeOverlay.fadeIn(duration);
// more.fadeIn(duration);
container.one('click', firstClick);
}
container.one('click', firstClick);
more.one('click', firstClick);
}
}
$('.article').each(function () {
$.fn.truncate($(this), 220);
});
I've tried to lay out the functions differently but to no avail:
http://jsfiddle.net/frank_o/8ssrmxwp/12/
JS:
var oddClick = function(target) {
target.one('click', function() {
var target = $(this);
target.css('height', container.height())
.css('max-height', 9999);
target.animate({
'height': totalHeight
});
fadeOverlay.fadeOut(duration);
// more.fadeOut(duration);
target.one('click', evenClick);
});
}
var evenClick = function(target) {
target.one('click', function() {
var target = $(this);
target.animate({
'height': maxHeight
});
fadeOverlay.fadeIn(duration);
// more.fadeIn(duration);
target.one('click', oddClick);
});
}
oddClick(container);
oddClick(more);
Through more.one('click', firstClick); the event handler gets removed after the first call. Change it to more.on('click', firstClick); and it works.
So, I've got a function animateSection() that animates two elements, #awards and #twitter.
I want to make it so that if a user resizes the browser
function animateSection() {
var $checker = $(window).width(),
$twitter = $('#jstwitter'),
$awards = $('#awards');
var distance = 20,
duration = 500;
if($checker > 1140) {
$twitter.fadeIn(duration, function() {
$awards.fadeIn(duration);
});
}
else {
$(window).resize(function(){
// here is where I run into trouble...
if($checker > 1140) {
$twitter.animate({left: distance}, duration);
$awards.animate({right: distance}, duration);
}
});
}
}
When you're first run the function you're storing $(window).width() in a local variable, $checker, then on resize you're checking that variable. It's not going to change! Try replacing:
if ($checker > 1140) {
with:
if ($(window).width() > 1140) {