I have a problem. I have the following code in jsFiddle: https://jsfiddle.net/o7x14gzd/1/ for a creation of a button to read more with jquery.
var $el, $ps, $up, totalHeight;
It should slide down the text til the end and fade out. More information on this site: https://css-tricks.com/text-fade-read-more/
I do not know where it is wrong but when the text is too big it does not show anything when you click "Read More".
Some of you already faced something like this or can tell me where is the error?
1- You have to use outerHeight(true) instead of outerHeight() to calculate the real size of Paragraphs containing Margins.
2- instead of calculating all heights specially if you have list or images , I suggest this method:
put the current height of parent element is a class say startheight and assign it to your view:
.srartheight{height:150px;}
to calculate the final height , use this method:
finalheight=$("#view").removeClass("startheight").height();
$("#view").addClass("startheight");
Related
I have 2 different divs to create my home slideshow banner. The one containing the banner content is called #flex-viewport. Behind that I have a wave video in a div #video-container.
The #flex-viewport div is inside the page container to make it centered, but the #video-container is in a different container div to make it fill the entire width of the screen.
I'm not quite sure how to make these both the same height. If you visit my URL, you will see the problem. glymed-plus.mybigcommerce.com
I'm not sure if I need a javascript solution or how to fix this problem. The divs aren't floating, and they don't need to look like columns. Those are the only solutions I could find, and I couldn't get it to work. This does need to be responsive.
Thanks in advance for any help.
Based on my understanding of what you want (which is my best understanding after reading all the comments plus your post), I would use javascript:
function sameHeight() {
document.getElementById("flex-viewport").style.height = document.getElementById("video-container").style.height = '500px'; //pick a number, I picked 500 here
}
jQuery can also be used:
function sameHeight() {
$("#flex-viewport, #video-container").height(num); //pick a number
}
You would trigger this with an onload or other event, for example, onload of <body>
<body onload="sameHeight()">
I am building a site with a right aligned nav.
The last menu item drop down runs off the page as it is positioned absolute to the left of its parent.
I am trying to create a solution for my menu below.
jsfiddle -http://jsfiddle.net/ashconnolly/6gjVr/
I cannot hardcode the pos left -xx style, because the width of the last menu item will vary (due to the text inside it), hence my use of js.
I've nearly cracked it, but i just need to apply a variable as a position absolute left style only on hover.
There maybe a better css only solution, but i couldn't find one.
Any help is appreciated! :D
Edit: updated explanation.
You have already calculated the left of your last menu, why didn't you use?
$(document).ready(function () {
var menuitemwidth = document.getElementById("last-menu-item").offsetWidth;
var menuitemdropdownwidth = document.getElementById("last-menu-item-drop-down").offsetWidth;
//alert(menuitemwidth);
var leftval = menuitemdropdownwidth - menuitemwidth;
//alert(leftval);
$("#last-menu-item").mouseenter(function(){
$("#last-menu-item-drop-down").css({'position':'absolute','left':'-'+leftval+'px','display':'block'});
});
$("#last-menu-item").mouseleave(function(){
$("#last-menu-item-drop-down").css({'display':'none'});
});
});
Check Here
As you probably already know, it is bad practice to "print" javascript values using a framework. It will pretty soon become unmaintainable.
But you can separate (element) logic from (element) presentation, i.e. print/format html elements in your templates by setting a data-attribute like this in your html:
<ul id="last-menu-item-drop-down" data-pos="left" data-val="-133px">
Then change your javascript to:
// cache last element, no need to jquery search on every hover
var last_elem = $("#last-menu-item-drop-down");
// set position and alignment
last_elem.css('position','absolute').css(last_elem.data("pos"), last_elem.data("val"));
// set dropdown meny visibility to hidden (do it by css)
last_elem.hide()
// show/hide
// ...
You can also do the offset calculations in javascript and only specify position in your templates
Fiddle at: http://jsfiddle.net/cYsp6/7/
I cant Make with css
$("#last-menu-item").mouseenter(function(){
var a=-(parseInt($("#last-menu-item-drop-down").css('width'))-parseInt($("#last-menu-item").css('width')));
$("#last-menu-item-drop-down").css('position','absolute').css('left',a);
$("#last-menu-item-drop-down").show();
});
$("#last-menu-item").mouseleave(function(){
$("#last-menu-item-drop-down").hide();
});
Updated Fiddle:
Fiddle
Hello im trying to get a box from the right to get a width of 100px
But i have the problem when im showing and hiding the box the height changes.
I have a picture to show:
Like you see the height is getting smaller when it shouldn't anyone know how to stop this?
We don't have your code, but it can be solved by adding yourElement.style.height = normalHeightSize;
In JQuery,
$('#yourElement').css('height: normalHeight');
when the user shows the box, in their click event or whatever happens in the code. In your case, after toggle().
How can I get the height at which an element was rendered, after I have changed it's height?
E.g. the text make a very long (high) div, then I shorten it to make it look neat and I use overflow:hidden to temporarily cut off excess text. Now, dynamically, I want to resize the div to be as high as it would have been if I never touched it.
How is this possible to do?
CSS & JQuery is welcome.
Thanks
Grab that value prior to the re-size.
You can then save it, and use it, in two different ways:
// grab it as a JS value and keep it stored somewhere
var originalHeight = element.height();
// grab and store the original value in the rel HTML attribute
el.attr("rel", el.height()
Morning all,
I'm trying to create a Mootools effect to show and hide replies to a comment on a discussion board. When the user clicks the "replies" link in the comment I want to increase the height of the comment container and then fade in the replies content. If the replies content is already visible, clicking on the link would reverse the effect.
I've got it sort of working, but I'm having trouble getting the correct height of my hidden elements (repliesH in my JS). I've tried getDimensions(), measure() and getComputedSize(), but they all give the same result: when elements are set to display:none I get a height that is too small; when I set them to display:block the height is correct. Can any kind person spot where I'm going wrong?
http://jsfiddle.net/andfinally/tVBCa/
Cheers
Fred
=======================
A BIT LATER
Just noticed - the width of the .comments-list container seems to have something to do with this problem. When I remove that width the effect works OK. This probably means that getDimensions gets the height of an element when it's not nested in anything. Can anyone suggest how I can work out what the height'll be when it is nested?
Cheers
Fred
you could use Fx.Reveal, it's very useful when u encounter these kind of problems, and it simplifies A LOT your code, i.e. (I've forked your example) => http://jsfiddle.net/steweb/DH27F/
A simple way to workaround it:
replies.show();
var repliesH = replies.getDimensions().y;
replies.hide();
Just show it, get dimensions and hides it again. This runs so fast that neither is visible to the user.
Your updated Fiddle here.