I'm trying to make a "More" functionality for comments.
How I'm trying to make it work:
I split comment in 2 parts - 1st 200 symbols and the rest of the symbols.
The rest of the symbols are placed in a <span class="hidden_comment_container" ></span> which by default gets display:none
Toggle to show the rest is placed if needed (if comment length > 200 symbols).
This is working more or less fine (jsfiddle demo) but there are 2 problems.
Upon slidedown, hidden_comment_container receives display:inline-block and messes up things a bit, since it gets transferred to a new line (check demo to see what I mean)
When sliding down and sliding up, near the end of animation you can notice some twitching.
Can anyone please help me solve these 2 problems?
The first one can be resolved by adding the following to the case when the remaining text is hidden.
$(this).next(".comment_container").children('.hidden_comment_container').slideDown('medium', function() {
$('.hidden_comment_container').css('display', 'inline');
});
Basically you're changing the display attribute of the .hidden_comment_container selector as I believe slideDown is adding a display:inline-block to it which would cause it to jump a line.
Fiddle here
Answer to point 2 can be found in Basic jQuery slideUp and slideDown driving me mad!; basically you need to explicitly add the height of the element before hiding / showing it.
As a side note the css property content can only be used with the pseudo elements :after and :before; I updated my fiddle accordingly.
An alternative solution
Have a look at this script, it does everything you need! I tested it already on another project and it works like a charm: jquery plugin to truncate elements based on height instead of number of characters
Related
so here is the code https://codepen.io/Dobrodeetel/pen/ZEaqVap.
This code partially repeats what I have on the site. therefore questions about why it is so - unnecessary.
It works like this - click on any line - an additional line appears with a table inside (you can remove it if you click again on the same line) in which there is a line when you click on which another internal table will appear (which is also removed when you click again).
Have a few questions:
1 - if you look at the third table, you can see the row overlap (css hover).
the question itself is how to do the same only for the first table (it is possible for the second one as well)?
i.e. write something like
.table_blur tbody:hover tr:hover td {
background: #8981ce85;
text-shadow: none;
}
as commented out in table_blur on line 32, the line with the second table will overlap. I need to make sure that such rows (with tables inside) are NOT repainted.
I was offered an option that is also at the end of table_blur (line 37) but it does not work
2 - there is this code https://codepen.io/Dobrodeetel/pen/ExXEemr.
It's about opening animation. how to apply such animation to my tables?
also found this code http://jsfiddle.net/1rnc9bbm/4/. which works without js at all? Well, of course I need when pressed.
So - how to attach a similar animation to the May version? that is, opening and closing until the disappearance?
I really don't care how it works. just because my table is built right away - the code with the active class does not work.
Also how to make animation relative to width? as you can see, the third table greatly stretches the ENTIRE table (on my site it’s the same and can’t be changed in any way, since the number of columns is different). how to make a stretch animation?
That's all. the answer to any question will greatly reduce my work)
I'm using Isotope (http://isotope.metafizzy.co). Testing the reLayout method by using the example provided here (http://isotope.metafizzy.co/demos/relayout.html), copied the css, js to (http://punkbit.com/webzine/isotope.html) but when I click in the first element all other elements go to the first column. I wonder why this happens ?
If we do the same in the official example, it works properly, apparently!
I'd like to toggle a class in the first element and by doing that, having the other elements take the vertical space and positioned properly. I tried to change the width of the container, etc but no success!
I've also got the same issue happening with Masonry:
http://codepen.io/anon/pen/BKAdH
If clicking in the first element, it won't work. All elements will be placed in the first column.
Also tried different layout modes etc without success
Sorry,
I've found the answer:
http://punkbit.com/webzine/isotope2.html
The property "columnWidth" needs to be set.
For Masonry:
http://codepen.io/helderoliveira/pen/gwvjA
I have modified a code that displays a marquee scrolling a simple HTML list. You can see it here:
I have 3 problems that I can't solve:
JS: I would like the marquee to show the text entering again through the right just after it disappears through the left, something like a continuous marquee, how could I do it ?
CSS: I am noticing (a) some artifacts in the marquee, I think this is due to the marquee text and the margins/paddings of divs not being properly set; and (b) the shadow of the lighter blue div cut over the marquee.. (I think it may be a z-indez problem?). (b) appears with any browser, (a) only with chrome, firefox looks ok. How could I fix it ?
Here's a screenshot:
I can successfully load data from my db and append it to the marquee. Now, I want to "refresh" the contents of the marquee every X seconds, would it be ok to remove the top element of the list when appending one in the bottom, or would it be better to fade-out, update everything, and fade-in again? Any other ways to do it ?
Here is a simple example to deal with scrolling them in from the opposite side. Also, if you adapt this method you can simply add or delete new items in the array as you need too. Watch this and about 2 or 3 times through it will add new items. One important thing to note is make sure the width of the div with id text is wider then the length of all visible items plus the length of the next in line.
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.
On the first click, it works as expected:
the class is changed
and the html content is changed from 'Show...' to 'Close...'
the content area is expanded with the slideDown effect,
Good so far.
On the second click, ...
the class changes
the html content is changed from 'Close...' to 'Show...'
The content area does NOT go away as expected.
On the third click, ...
the class is changed
the html content is changed
the already-shown content is re-shown with the slidedown effect.
So everything is working except for the 2nd click when the content is supposed to be hidden again.
Here's the jQuery:
-
$('.open_user_urls').live('click', function() {
$('#user_urls').slideDown('slow');
$(this).addClass('close_user_urls');
$(this).removeClass('open_user_urls');
$(this).html('Close Search History');
return false;
});
$('.close_user_urls').live('click', function() {
$('#user_urls').slideUp('slow');
$(this).addClass('open_user_urls');
$(this).removeClass('close_user_urls');
$(this).html('Show Search History');
return false;
});
Here's the HTML it's acting on:
<h3 class='open_user_urls'>Show Search History</h3>
<div id='user_urls'>
// an OL tag with content
</div>
And the only applicable CSS:
#user_urls { display: none; }
EDIT - I replaced my jquery code with functionally equivalent code supplied in an answer below, but the problem persists. So the cause must be elsewhere. I do recall this code working originally, but then it stopped. I'm stumped. Time to strip everything else out piece by piece...
EDIT 2 - Since the bug must be elsewhere, I'm accepting a code improvement for my jquery as the answer. Thanks.
Edit 3 - Found the source of the problem.
Inside the #user_urls div I have an series of OLs with the following css:
.url_list {float: left; width: 285px; list-style-position: outside; margin-left: 25px;}
Each OL contains a list of 20 urls and is meant to display in as many multiple columns as required to display all the URLs.
Removing the float: left; on these OL tags causes the problem to go away.
So having a float on the content contained in the DIV thats showing and hiding is causing it not not hide at all. Why would this happen?
EDIT 4: Adding a inside the #user_urls DIV allows the hiding action to work properly.
Perhaps something like this would be simpler?
$(".open_user_urls").toggle(
function () {
$(this).text("Close Search History").siblings(".user_urls").slideDown("slow");
},
function () {
$(this).text("Show Search History").siblings(".user_urls").slideUp("slow");
}
);
The toggle function is designed for precisely the scenario you're encountering.
To reiterate the problem and resolution to this question...
Inside the #user_urls DIV were a series of OL tags, each floated left. It was the float that was causing the problem.
Adding a <br style='clear: left;' /> inside the #user_urls DIV fixed the problem.
From what I've found, jQuery needs to have the height style set in order to slide it correctly. A work around I've used is to set the height before you slide it closed.
$('#user_urls').css('height', $('#user_urls').height() + 'px');
After you set it once, it should work correctly from then on. Check out this tutorial for a more detailed explanation.
Since this question was opened, jQuery have put in a fix for this themselves.
Updating to the latest version of jQuery solved the problem for us with no CSS changes. (jQuery 1.4.4 as of Dec 9th 2010)
Found via discussion on Google Groups in turn found from d12's answer. According to duscussion, in some jQuery 1.3x versions this bug affected several actions, slideUp, fadeOut, and toggle, if the element being hidden/slid up is a a non-floated parent containing floated children.
I think Conor's answer might put you on the right track. I might also suggest slideToggle and toggleClass:
http://docs.jquery.com/Attributes/toggleClass
http://docs.jquery.com/Effects/slideToggle
I could be as easy as:
$("h3.open_user_urls").click(function () {
next("div#user_urls").slideToggle();
});
I can't duplicate your bug. I used your exact code and I cannot replicate your issue.
This must be a script error from a different place in your JS code.
Thanks for this question. It really got me on my way figuring out the problem toggling an element with floated children.
Another resource that really helped and explains the behavior a bit can be found
on this Google group discussion.
Putting a non breaking space in your div is another solution similar to what The Reddest suggested that worked for me on a similar issue.