I am currently using Max Vergelli's scroller plugin (http://www.maxvergelli.com/jquery-scroller/) and it is fantastic apart from the fact I need a slight amendment to it. However, I can't see a way to do it with the variables given.
Here is a jsFiddle of what I have so far: http://jsfiddle.net/X6DwY/6/
I am looking to set the text to be at the top of the #.vertical_scroller Div (so some of the text is already visible) not pre-hidden underneath it, then begins to scroll on-hover.
I think the plugin needs to be slightly altered for this to be achieved but can't get hold of the creator to ask, so I have come to S.O.
Anyone have any ideas on this? This is a bit beyond me :(
change this line:
var sh = parseInt(ob.parent().height());
to
var sh = 0;
sh = starting height, I assume. And it was set to the parent's height aka the bottom. 0 starts at the top then.
see this fiddle
Related
Trying to solve one really tricky problem here. Hope you guys can help.
The situation is as follows: we have a floated picture, and an adjacent P element, that obviously aligns itself to the left. The problem is, that from a position point of view, the element still takes the full width. Which makes sense for the part that comes after the image, but not so much for the text "But I must explain..." which is on top.
Here is an image that illustrates the problem:
http://postimg.org/image/65r9v8qyz/
Now trick question: is there any way to get the innerWidth of the beginning of the element? boundingClientRect and getComputedStyle didn't work for me.
Any suggestions?
If the element is being floated, it's going to display over or under another element. You're not going to be able to get the innerWidth directly.
What you can do is take the innerWidth of the P(paragraph), then minus the innerWidth of the image from that(as well as any padding/margins/borders/other that might add to the image element's width). This should give you something reasonably accurate though tricky to manage and deal with.
Code example:
window.addEventListener('load', function() {
var imageElement = document.getElementById('IMAGE_ID_HERE');
var paragraphElement = document.getElementById('P_ID_HERE');
var topWidth = paragraphElement.innerWidth - (imageElement.innerWidth /* Add any padding, etc. to this */);
});
I have N rows of content that user should match using drag and drop (user moves items on the right to the corresponding item on the left). Here is an example:
All blocks should have the same height - the height of the largest item. (In this example the larges item is on the left, #2). Is it possible to do using pure CSS? I can't use flexbox due to browser support. I have managed to implement this using JS, but I don't like that solution :)
Maybe someone could point me to the technique or a similar example?
Thanks in advance.
Try this jquery code it detects the biggest element and sets all of them to that height.
var height = 0;
$(".table").find(".table-cell").each(function() {
height = Math.max(height, $(this).height());
});
$(".table").find(".table-cell").css("height", height);
Here is a JSfiddle example.
You need jquery for this so make sure adding the jquery library to your code.
I'm wondering if this is possible with jQuery or JS.
I have a margin set on a div that is set by getting the height of a container that contains images.
var articleImageHeight = $('.slides_control').height();
$('.individual-article-contents').css('margin-top', articleImageHeight);
However, the container's images are essentially a slider, so the height of this container can change.
I'm wondering if it's possible to update the articleImageHeight variable live as the height of the container changes?
I am using slidesJS for the slider in the container.
Here's an example of what I'm working on: http://goo.gl/FdftC
Many thanks,
R
What I would probably do for this is to add your snippet of script as a function and then to call that function every time the slide changes. This will mean you need to make a slight modification to the plugin. Having a look at the plug the main animate function is simply called animate().
So as a quick example
updateHeight = function(){
articleImageHeight = $('.slides_control').height();
$('.individual-article-contents').css('margin-top', articleImageHeight);
}
The above adds your bit to a function and then add updateHeight(); to line 236... if you're using the un-minified version of the plugin.
Just above the line that says } // end animate function
.. just a thought a what might look a bit nicer is to use .animate rather than .css for updating the top margin... but hey I don't know what you're working on so is entirely up to you.
----EDIT----
Just an update... we found an animateComplete() callback on the plugin which worked a charm.
I am making a little messaging / chat system that is working nice and fine. The problem is, the <div> which the messages are outputted to does not scroll the way I need it to.
All the new messages are added to the bottom of the div and when more are added and the scrollbar shows up, the scrolling stays at the top of the <div>. I need this to be reversed, so that the scrolling always sticks to the bottom of the <div>.
A good example of what I want would be Steam's chat windows, or even this text input which I am using to fill out the question.
As I would like to avoid jQuery, this has me completely stuck. If you could point me in the correct direction that would be great! I am not sure if HTML and CSS can handle this, or if JavaScript is necessary at all.
The Javascript code below should keep your div's scrollbar positioned at the bottom like you described:
var objDiv = document.getElementById("divExample");
objDiv.scrollTop = objDiv.scrollHeight;
This solution and more information can be found on the link below:
http://web.archive.org/web/20080821211053/http://radio.javaranch.com/pascarello/2005/12/14/1134573598403.html
I think this is a better solution:
element.scrollTop = element.scrollHeight - element.clientHeight;
For Kotlin I have used the following:
val element = view?.findViewById<ScrollView>(R.id.uidScrollElement)
element?.smoothScrollTo(0,element.measuredHeight)
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.