Calculate height according to div's inner text - javascript

I've got a PHP loop to create multiple divs which display data from a database.
<?php
foreach($result as $row) {
?>
<div class="container-fluid" id="content-fluid">
<div class="container-update">
<div class="update-group">
<div class="update-header">
<?php echo $row['update_title'] ?>
<div class="update-author">
by <?php echo $row['update_creator'] ?>
</div>
</div>
<div class="update-body">
<?php echo $row['update_text']; ?>
</div>
</div>
</div>
</div>
<?php
}
?>
I made them clickable through jQuery and they do increase in height:
$(document).ready(function() {
$('.update-group').click(function() {
var clicks = $(this).data('clicks');
if(clicks) {
$(this).removeAttr('style');
}
else {
$(this).animate({height: '200px'}, 300);
}
$(this).data("clicks", !clicks);
});
});
Default height is set to a specific value to ensure that all divs are of the same height and overflow is set to hidden. Clicking on them should expand them downwards according to the text inside of it.
Divs of which the text fits just fine, shouldn't be able to expand at all. And divs with an excessive amount of text should expand to a calculated height.
I've set up a jsfiddle program to demonstrate what I mean: https://jsfiddle.net/vz6s9brd/

Right now it just animates to 200px and back. I think you're looking for something like this:
$('.update-group').click(function() {
var clicks = $(this).data('clicks');
if(clicks) {
$(this).removeAttr('style');
}
else {
var bod = $(this).find('.update-body');
var head = $(this).find('.update-header');
var neededHeight = bod.height() + head.height();
if ($(this).height() < neededHeight) {
$(this).animate({height: neededHeight + 'px'}, 300);
}
}
$(this).data("clicks", !clicks);
});

Rather than calculating the height, you can instead change your overflow settings. You're wanting to toggle between two modes - one with limited height and no overflow, and the other with height determined by the content.
if(clicks) {
$(this).css({overflow: 'hidden', height: '6em'});
}
else {
$(this).css({overflow: 'inherit', height: '100%'});
}
Unfortunately, doing it this way doesn't animate very well. Even if you replace the css() calls above with calls to animate(), the result is unsatisfying. How important the animation is to you is up to you.

Related

how to make class disappear when scrolling up in jquery

I am trying to find out how to make a class disappear when scrolling up in a browser. I had been able to make a class to appear when a certain height in a browser is met by using this code.
jQuery(".tetapElement").css("opacity", 1);
jQuery(window).scroll(function() {
var windowHeight = jQuery(window).height();
if (windowHeight < 470) {
jQuery(".tetapElement").css("opacity",1);
} else if (windowHeight > 1820) {
jQuery(".tetapElement").css("opacity",1);
}
else {
jQuery(".tetapElement").css("opacity",0);
}
});
.tetapElement {
position:fixed;
top: -30%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--make another checkout button -->
<div class="tetapElement">
<div class="order_title">Order details:</div>
<div class="order_bar_details">
<div class="pack_name"><?php echo $post->post_title ;?></div>
<div class="pack_name_value">Package name:</div>
<div class="pack_details"></div>
<div class="addon_title">Add-On Menu</div>
<div class="addon_details"></div>
</div>
<div class="order_price">Total price (<?php echo $currency; ?>): <span class="total_price">0</span></div>
<div class="chekout_link">
<textarea id="order_details" style="display:none;" name="order_details" ></textarea>
<?php wp_nonce_field('process_checkout_action','process_checkout_field'); ?>
<input type="submit" class="btn btn-success checkout_btn mk-flat-button shop-black-btn" value="Checkout">
</div>
</div>
you can see it in action in here. so that when you click on that link and reduce your browser height then another class would pop up. But I need to finds way how to make that class to disappear again when a user scroll up so as not to disturb another class that were put there.
so in essence, I put 2 class. one class will disappear when scrolling down and then replace by another class and I want this another class to disappear also when a user scroll up and replace by original class. any idea how to that in jquery?
A very similar question is asked here.
var lastScrollTop = 0;
$(window).scroll(function(event){
var st = $(this).scrollTop();
if (st < lastScrollTop){
// upscroll code
$(".tetapElement").removeClass("classToRemove");
}
lastScrollTop = st;
});
media query max-height seems to be a better solution if you want to alter css properties in my opinion

Giving a DIV a maximize button

I currently have a div on my page that I would like a user to be able to click and maximize the div so it appears over the whole screen. I would like it to be similar to how Gmail has a button that allows you to maximize what the user is looking at, and then return to the original size with another click of a button.
The problem I ran into is that my div contains 3 divs inside of it.
Here is my HTML
<div id="pre">
<div id="pre-title">Pre Reading</div>
<div id="pre-text">blahhh.</p></div>
</div>
<div id="passage">
<div id="passage-title">2.2.3</div>
<div id="passage-text">blahlkdsfjahlskdjfh</div>
</div>
<div id="media">
<div id="media-title">Media Videos</div>
<div id="media-text">even more garbage</div>
</div>
These div's are placed directly next to each other on the page and I would like it if I could include a button next to the title that would allow the user to make the section larger, like they were maximizing the readings.
Just giving you the glimpse, change styling as per your requirement.
WORKING:DEMO
JS
$(document).ready(function () {
$(".readmore").click(function () {
var readMore = $(this).parent().attr("id");
var mainDiv = $("#" + readMore).parent().attr("id");
var textDiv = mainDiv +"-text";
$("."+ textDiv).toggleClass("maximize");
});
$(".close").click(function () {
$(".pre-text, .passage-text, .media-text").removeClass("maximize");
});
});
<script>
$(document).ready(function() {
$('#pre').click(function(e) {
$('#pre').toggleClass('maximized', 500); // 500 ms to animate
} );
} );
</script>
<style>
#pre {
width: 50px;
}
#pre.maximized {
width: 500px;
}
</style>

looking to set equal heights to columns in Bootstrap - no Table

I want to set equal heights to my columns in Bootstrap 3. I CAN'T set the rows to 'display: table;' or anything like that cause it screws up the layout of everything.
<article>
<div id="post-<?php the_ID(); ?>"> <!-- just gets the post's id -->
<div class="row">
<div class="col-md-8 indx-img" style="background-image:url('...');">
</div>
<div class="col-md-4 text-cell">
<h1>title</h1>
<h3>category</h3>
</div>
</div><!-- /#row -->
</div><!-- /#post -->
</article>
The content is on the right, a column with a background image is on the left. That column needs a height so that the background image is shown, I want that height applied to the column with the text.
I want it to be responsive height, what I used so far for that is
CSS
indx-img {
padding: 16% 0;
}
problem is that height doesn't apply the the column with the text. The ultimate goal is to have the two columns the same height, with the text vertically centred in the 'text-cell' column
If you can't use any css solutions because they will break your layout, you can use javascript.
Here we define a function named resize which will loop through the posts.
If the page is larger than the break point, set the height of the post container to the height of the image.
Then set the height of the text container to 100% once.
If the page is smaller than the break point, check to see if the height is set.
If it is we remove the height setting to allow natural expansion and contraction.
We call the resize function once on page load, then assign it to the window resize handler
(Demo)
<script type="text/javascript">
window.onload = function() {
(function () {
"use strict";
var resize = function () {
var posts = document.querySelectorAll('[id^="post"] .row'), post;
for (var i = 0; post = posts[i]; i++) {
if (window.innerWidth > 768) {
post.style.height = post.firstElementChild.offsetHeight + 'px';
if(post.lastElementChild.style.height !== '100%') {
post.lastElementChild.style.height = '100%';
}
} else {
if(post.style.height !== '')
post.style.height = '';
}
}
};
window.onresize = resize;
resize();
})();
}
</script>
I use the matchHeight plugin for this kind of issue all the time and it works perfectly with Bootstrap.
Just install the plugin, add a class of matchHeight to your col-md-8 and col-md-4 columns:
<div class="matchHeight col-md-8 indx-img" style="background-image:url('...');">
</div>
<div class="matchHeight col-md-4 text-cell">
<h1>title</h1>
<h3>category</h3>
</div>
And add the following to your javascript:
$('.matchHeight').matchHeight();
You can then use this fix throughout your site by simply repeating the above steps, even several times on the same page (it automatically scopes to within the current "row" element so if you have 3 rows with 6 elements then only those elements in any given row are matched in size).

Hide div on page but div shows before being hidden

How do I get the <div> not to show at all when the page loads? The div is set to hidden in JS and the <div> hides but its after the <div> has already shown on the page for a brief second.
I am using this popup in my website.
http://mootools.net/forge/p/popupwindow
Here is my code :-
<script type="text/javascript">
App = {};
window.addEvent('domready', function() {
App.popUp1 = new PopUpWindow('', { contentDiv: 'trailerquestion', width: 559 });
App.popUp2 = new PopUpWindow('', { contentDiv: 'popup-redflag', width: 559 });
});
</script>
<?php
function JSLink($text, $onclick) {
return "$text";
}
$asklink=JSLink('<div class="buttonNew greenB bigrounded trailer-button-question"><span>Ask me a question</span></div>', 'App.popUp1.open(); App.popUp1.positionTo(this, 1180, 100);');
?>
<?php
echo $asklink;
?>
<div id="trailerquestion">
<?php
$this->load->view('popup/popupaskmequestion',$results);
?>
</div>
Set the div's display to none with CSS, not Javascript. Then change the display property with Javascript when you want it to be shown.
If you want the div to just be hidden but take up the space it requires, use -
<div id="trailerquestion" style="visibility:hidden">
If you want the div to not take up any space at all and be hidden, use -
<div id="trailerquestion" style="display:none">
Set the element to be hidden with css e.g <div id="trailerquestion" style="display:none">
You might need to set it to display again when you show the dialog if your dialog library doesn't do that for you.

scroll to the sibling element on click

Please take a look at this FIDDLE that shows and hides the text in a container on click . What I'm trying to do is that when I click open the first hidden text and then scroll down to click open another one, I want it to scroll back to the sibling image of that opened text to keep it in view. How can I find the sibling element and scroll to it on click?
This one is not valid.
$('.slider2').click(function(e) {
var imageposition = $(this).closest('.imageclass');
$(document.body).animate({scrollTop: imageposition.offset().top}, 'fast');
});
HTML:
<div class="container" style="border:2px solid #222;">
<img class="imageclass" style="width:100px;height:100px" src ="image.jpg">
<div class="slider2">Hi</div>
<div class="internal" style="display: block;">Text<p></p></div>
</div>
<div class="container" style="border:2px solid #222;">
<img class="imageclass" style="width:100px;height:100px" src ="image.jpg">
<div class="slider2">Hi</div>
<div class="internal" style="display: block;">Text<p></p></div>
</div>
..............
JS:
$('.slider2').click(function(e) {
e.preventDefault();
$(this).next(".internal").load($(this).data("ship"));
$('.internal').slideUp('normal');
if ($(this).next().is(':hidden') === true) {
$(this).addClass('on');
$(this).next().slideDown('normal');
}
var imageposition = $(this).closest('.imageclass');
$(document.body).animate({scrollTop: imageposition.offset().top}, 'fast');
});
$('.internal').hide();
You've at least a couple of problems here
$(this).closest('.imageclass') doesn't select the image that is previous sibling of <a>
even if you get your desired image, the moment your scrolling code runs, the image has not placed itself to its final position.
using $(document.body) to scroll the window (I'm doubtful about it myself)
Below code selects the right image element, gets the scrolltop at right moment, and scrolls the html, body using working syntax.
$(function () {
$('.slider2').click(function (e) {
e.preventDefault();
$(this).next(".internal").load($(this).data("ship"));
$('.internal').slideUp('normal');
var imageposition = $('.imageclass', $(this).closest('.container'));
if ($(this).next().is(':hidden') === true) {
$(this).addClass('on');
$(this).next().slideDown('normal', function () {
$('html, body').animate({scrollTop: $(imageposition).offset().top})
});
}
});
$('.internal').hide();
});
There's a bit of a problem with how your scrolling function works because the position of the active .container alters in relation to other containers(when active and inactive state).
Also, you should not be looking for the closest position but for its parent element.
Please take a look at my code: CSS
.slider2 {
margin:40px;
}
.internal p {
padding:5px;
}
.internal h3 {
text-align:center;
}
.container {
position: relative;
}
You might need to look for a way, to detect the height of an inactive container since I made mine as a static value.
JS:
$('.slider2').click(function (e) {
e.preventDefault();
$(this).next(".internal").load($(this).data("ship"));
var containerHeight = 205;
var containerIndex = $(this).offsetParent().index();
$('.internal').slideUp('normal');
if ($(this).next().is(':hidden') === true) {
$(this).addClass('on');
$(this).next().slideDown('normal');
}
var scrollPosition = containerHeight * containerIndex;
$('body').animate({
scrollTop: scrollPosition
}, 'fast');
});
$('.internal').hide();

Categories

Resources