jQuery dotdotdot plugin with vertical resize - javascript

I am trying to get a text block to resize vertically and use the dotdotdot jQuery ellipsis-support plugin. The dotdotdot plugin features a set height parameter, and I wonder if there's a method to dynamically update that set height. I want to take into account the total height of an adjacent div and resize the text block to fit the whole height of the particular div.
I made this jsFiddle as a loose mock-up of what I'd like to accomplish: http://jsfiddle.net/smittles/8psvZ/
Ideally, the synopsis text would expand to drop down to the red line as the red line moves down.
Because I'm using a set height this model doesn't work right now. I don't know what adjustments to make in order to get it working.
I do want to maintain the use of dotdotdot.js if possible.

Use the toggle function's callback to re-call the dotdotdot code.
See this updated fiddle or the code snippet below:
$('.share').click(function(){
$('.social_options').toggle('fast', function(){
// height will be height of image frame + share button
var new_height = $('.image_frame').height() + $('.share').height();
// if the social options are visible, add that to height as well
if ($('.social_options').is(':visible'))
new_height += $('.social_options').height();
$('.synopsis').dotdotdot({
ellipsis : '... ',
wrap : 'word',
after : null,
watch : true,
height : new_height
});
});
});
You could prevent the redundant code too by creating a function that does the dotdotdot-ing. Call that on the page load, then call it on every subsequent toggle call as well.

Related

Set min-height of div to the height of another div

My question is along the lines of this question: jQuery - Set min-height of div but with a slight alternation.
I'm using a dropdown menu in Wordpress, along with RoyalSlider. The slider div has a changing height value, depending on the browser size.
I think I'm having a bit of strange outcome though. I'm using the code that was given as the most popular answer in the linked question, and changed the elements to match with my code:
$("#menu-main-menu > li.menu-parent-item > ul.sub-menu").css("min-height", function(){
return $("#new-royalslider-1").height();
});
From how I read this, this will set the min-height of the ul.sub-menu to whatever the height value of the RoyalSlider div is.
Although, it's always returned as 400px, no matter what size the browser window is.
Am I doing this right?
Try jQuery's outerHeight() function to get the "current computed height" of your slider, and execute it on load and on resize events:
function resizeMenu(){
$("#menu-main-menu > li.menu-parent-item > ul.sub-menu").css("min-height",
$("#new-royalslider-1").outerHeight()
);
}
// Do this on load and on resize
$(window).load(resizeMenu).resize(resizeMenu);
JS Fiddle Demo
Edit: If you want to substract 40px to the height, you can just do ....outerHeight()-40. Js Fiddle Demo

outerHight doesn't take table hight

I use var targetHeight = jQuery('.acc-content-inner').eq(currIndex).outerHeight(); to take hight of an element. But if the div.acc-content-inner has a table in it, it doesn't add the height from the tabele to the targetHeight
The height may not be calculated right not because of the table, but because of the images. If you run your code on document.ready. My guess is that jQuery calculates it before the images get downloaded. A similar effect can be seen here: http://jsfiddle.net/z2eounmt/1/ (notice it disappears on page refreshing if cache is not cleared). The first time the output is 40, so the height of the image is not included.
To solve this issue, either use imagesLoaded, or change your function to be run on window.load. or change the way your accordion works.

get the height of a another web page

I'm using the following code:
$("#galleries").load("letters/index.php");
$(function(){
$('#galleries').hide().fadeIn(1500);
});
everything works fine. My problem is, I got about 8 scripts like that, and whenever I switch the content of the div, it doesn't do that smoothly, first of all, it clears the DIV and let me see that for about 0.7 seconds, after that, it loads ALL of the content within a second, and it's really disturbing my eye.
I thought about a solution, that I will get the height of the page I wanna load, and then set the DIV height to that height, and then load the info. Will it work? because, the LOAD function removes everything from the div, will it remove the height property as well?
generally, this is what im trying to achieve:
//GET TARGET'S HEIGHT
//SET #galleries TO THAT HEIGHT
$("#galleries").load("letters/index.php");
$(function(){
$('#galleries').hide().fadeIn(1500);
});
I don't know how to get the target's height and set it. But anyways, will it work? or maybe someone has another solution for me?
Thanks in advance!
You aren't using the complete callback of load() which allows you to run code after content is loaded.
Try something like this:
$(function(){
/* hide first, then load*/
$('#galleries').hide().load("letters/index.php", function(){
/* new content now exists*/
$(this).slideDown()/* or fadeIn() or any other effect*/
});
});
SlideDown is not dependent on overall height so will smoothly move content below it down

setting a div to have the same height as another div with jQuery CSS

I am having an issue attempting to set the height of a div with jQuery based on the height of the div sitting next to it. Basically, I have two divs and I want them both to be the same height. The left div will change in height and has no height element set in the CSS/HTML. The right div can also change height, but the left one will always be bigger.
This is my attempt below at setting the right one (#p_window) to the same as .c_content_right. (Ignore the strange naming conventions)
if ($('.c_content_right').length) {
if ($('.c_content_right').height() > $('#p_window').height()) {
$('#p_window').css('height', $('.c_content_right').height() + 'px');
}
}
Here is a
jsFiddle Demo
jsFiddle demo
If you have paddings, to calculate the total height use: outerHeight():
var catH = $('.category_content_right').outerHeight();
if ( catH > $('#product_window').height() ){
$('#product_window').height( catH );
}
Here's a working fiddle based on yours.
http://jsfiddle.net/MfrqA/10/
Your fiddle wasn't set to jQuery.
I get confused in jQuery while adding CSS, if I don't just set the variables outside it, because there are several syntaxes you can use, and I always get caught up.
If your edits don't work, then add an alert inside the 'if' loop, to see if you got that far.

Get height of div dependent on text inside

I have a DIV with some text inside. But the height of the DIV starts at 0px, it also has an 'overflow:hidden'. After that i'm using an animation system to increase the height of the DIV. But i can't give the DIV a fixed height because the length of the text inside the DIV varies.
Is there a way to tell what the height of the DIV will be when its big enough to fit all content inside it?
I have done a horrible hack but see if this is good enough.
Basically you get the content height by setting the height to auto, then resetting it to zero and finally using your animation function, like this :
var tempHeight = $(".sample").css({"height" : "auto"}).height();
$(".sample").css({"height" : "0px"}).animate({
height : tempHeight
},1000);
Where .sample is the reference to the div with the variable text content. Check out the demo for a better understanding.
Pure Javascript Version :
document.getElementById("sample").style.height = "auto"; //The id of this div is 'sample'
var tempheight = document.getElementById("sample").offsetHeight;
document.getElementById("sample").style.height = "0px";
/*
Custom Animation function, Use tempheight to get the full content
*/
DEMO For The Jquery Version
Maybe you can try this:
Put the text inside another DIV like...
<div>
<div>some text</div>
</div>
Then animate the outer div (which as an hidden overflow) according to the height of the inner div (which has not an hidden overflow).
Hope this helps
Depending on what you're doing/using you don't need to know the height because setting it to "auto" will ensure it expands to fill the content.
However, you could also not set the heights to 0 until you know the height by using javascript to get it. For example in jQuery:
$("div").each(function()
{
$(this).attr("data-height", $(this).height()).css({"height": "0", "overflow": "hidden");
});
Now each div has an attribute called "data-height" that has the value of it's original height. You can then use this to expand the div when you need to.
Just before animating the showing of the div, clone the div and get rid of the height:0px constraint (change the height to auto, for example). Then grab the height of that cloned div for use in your animation.
In jQuery, this would look something like:
var myDiv = $('div');
var myDivClone = div.clone().insertAfter(myDiv).css('height','auto');
var myDivHeight = myDivClone.outerHeight();
myDivClone.remove();
myDiv.animate({height: myDivHeight}, 250);
Note the importance of actually cloning the element in question as opposed to just creating a new one and filling it with the same contents. You need to recreate the element exactly (other than the height modification you do afterwards), including classes, etc.
ALSO note the importance of injecting it into the DOM immediately after myDiv. This is so that the same CSS will affect it as affects myDiv at time of height calculation. The only potential exception to this is if you're using a :last-child selector in your CSS, and the clone ends up becoming the last child of the parent element. But that kind of issue should be easy enough to get around.
how about dropping the text in a off screen div first and getting the dimensions from that?
if(el.scrollHeight > el.offsetHeight || el.scrollWidth > el.offsetWidth)
{
//keep making element bigger
el.style.height = parseInt(el.style.height) + 2 + "px"
}
You could stick this snippet inside some sort of recursive function or while loop. Essentially you are checking to see if there is more content outside of the viewable area that a scroll-bar would show.

Categories