in my web page there is a chat window. When the chat's log is filled out, the user uses scrollbar in order to navigate between messages. I want my chat frame to present always the last message that is located at the bottom. How can I do this using CSS, JavaScript?
Thanks,
Tomer
Even thou is not a tag on your question here is a jQuery solution i use for my chat web app:
//Where chat_message_tray is the scrollable div in your chat
function chat_scroll(chat_messages_tray){
var scroll_amount = $(chat_messages_tray).attr("scrollHeight") - $(chat_messages_tray).height();
$(chat_messages_tray).animate({ scrollTop: scroll_amount}, 500);
}
DOM elements (the good ones, anyway) support a method called scrollIntoView(). If you have a reference to the DOM element corresponding to the last chat entry (a <div> or whatever) you can use scrollIntoView() to tell the browser that its surrounding content should be scrolled in order to make the <div> visible.
Now, with some complicated (or not-so-complicated, maybe; perhaps just unlucky) page layouts, I've had to contend with Internet Explorer wanting to scroll the wrong thing, or just do something weird to the page. The nature of a thing like scrollIntoView() is such that you're letting the browser decide exactly how it wants to do that scrolling. Generally, with fairly simple content in a simple scrolling container (one with "overflow: auto" and a fixed height, basically), it does work however.
http://radio.javaranch.com/pascarello/2005/12/14/1134573598403.html
3rd result from Google - 'div scrollbar bottom'
Related
I want to be able to click on a link in my HTML website and when I load onto the other website to be in the same position. Say you are in the middle of a website when you click the link I want to be in the middle of the website when I load onto that link. Is there anyway to do this? Sorry if this is confusing.
I'm sorry for the confusion, but I meant if you controlled both web pages. My bad.
There's no way unless you have control over the linked site.
Scrollbar is rendered by the browser based on overflow-x or overflow-y attributes, if you have no control over the linked site's code, you can't force it to present a scrollbar or scroll to a specific position(which requires javascript code to be executed)
If you have access to the linked site's code, you can send the ID of the element you want to scroll to through the url as a parameter like this:
https://example.net#mydiv
and then, at the linked site, just add this javascript code to scroll to the element:
$(window).load(() => {
const divID = window.location.hash;
document.getElementById(divID).scrollIntoView();
});
Im working on a Meteor POS project at the moment. (for people who don't know Meteor is a framework and can use javascript/jquery and all kinds of web app scripting). The application is suppose to be a full screen POS that does not need to scroll at all, but only the area which entered products needs scrollbar (iframe).
I ran into a problem that I don't know how to solve, which is how to disable overflow on the entire page but not the iframe. There are a few things I have tried but failed:
Setting body to overflow: hidden and iframe auto. Which of course it doesn't work because the entire body is not able to show the scroll bar and iframe is embedded within.
using onmouseenter (mouseover) and onmouseleave (mouseout) to listen for changes and using javascript or jquery to toggle between hidden or auto. I tried and even console logged but it doesn't want to work in meteor.js for some reason. Even if it worked I think the main page scroll bar will show too which I don't want.
Here is an image, the top and bottom is part of the body and the middle part filled with items are using iframe.
Thanks for any help!
It has been answered by axel.michel in the comment.
It was a better solution overall than using iframe.
Thanks!
I currently have a page with a few buttons. When I click on the button I want to open a new html page within the parent page. I want to do this in such a way that the parent window becomes transparent and the new page is over it. How can I go about doing this? I have tried to use Iframes but it does not give me the output that I want.
James Kirsch has given you one way to do it. Another is to have a hidden DIV that you show when you need it. In both cases, you may have to place a semi-transparent GIF image behind the DIV (or opened window) so someone can not do anything with the rest of the web page until they have finished interacting with the new window. You can do this by using the z-index CSS command. So the DIV would be:
<DIV style='z-index:100;'>....</DIV>
and the image would be something like
<img src="PUT YOUR PATH HERE" style='position:absolute;top:0%;left:0%;width:100%;height:100%;z-index:50;'>
This would put the GIF image halfway between the web page and the DIV.
The above is what is happening when you go to a website and they grey out everything behind the new window. It also keeps people from pushing on buttons when you don't want them to do so.
IFRAME stands for something like INSERTED_FRAME where the "INSERTED" part means it is inserted into your pre-existing web page. That is why it doesn't work. Neither will the FRAME command work because (again) it is embedded into the pre-existing web page. You are wanting to lay the new window on top of the web page. Thus, Mr. Kirsch' answer and my own. Note that you can also use a TABLE command to do the same thing - even if it is frowned upon to use tables presently. It is the STYLE part of the command that causes the HTML element to appear above the rest of the web page and not any particular HTML command itself. Also, the "position:absolute" part of the STYLE command is what overrides the web page's positioning of the element. Have fun!
In the Javascript have you considered using the following?
window.open();
This call appears to take parameters for Position and Size, you may be able to close the previous window also if you desire, or manipulate it.
Example:
window.open('this.html','','left=15,top=15,width=800,height=600');
Reference: here
I was wondering if is possible to customize the scrollbars for an iframe. Both the iframe and the page are on the same domain so there are no issues there. If so, what route should I take and is this something that I should be doing? (design-wise).
I will be updating this as I get it working. Just thought I'd try to get some insight ahead of time.
Thanks
Okay, I ended up getting it working using jScrollPane. The only hangup I had was that jquery.jscrollpane.css needed to be inside each iframe, not outside, which makes sense.
Afterwards, all it took was
$("iframe").each(function(){
var body = $("body",this.contentWindow.document) ;
body.jScrollPane();
});
where the above javascript is present in the parent of the iframe. The jScrollPane js files are also in the parent, not each individual iframe.
Afterwards, the scrollbars are sticky. I solved this by covering the iframe in an invisible element after the scrollbar is clicked and uncovering when released. This was done by
$(".jspDrag",body).on('mousedown',cover_iframes);
$("body").on('mouseup',uncover_iframes);
where cover_iframes and uncover_iframes call the .show() and .hide() of the covering element, respectively.
Now I noticed that when the scrollbar is moved, it is shifted over by the offset of the iframe. I am working on fixing that now.
I do not know if i asked correctly in Question Title, but here i am going to describe in brief
I have an UIWebView and loading the content based on div and each div has unique id on loadRequest.
As though my content was too large so i break down into pieces and loading the remaining content once you tap on 'Read More'
This 'Read More' event fire on autoscroll which i am handling through javascript. so once that event is fired it just append data (for which i have another method) by using window.location.href = div1+div2(its just an example).
Now the main problem is when i scrollDown and wherver i get the 'Read More' message and it auto fire then it adds the data to the current div and show (User feel its an continue reading) but when
I scroll towards to up
It behaves weired because it just append the data to the div and scroll to setYScroll(updatedlocation);
updatedlocation is used for when we are adding the content to the div and it should scroll to the same position where the user was.
so lets start with an example, assume currently i am reading the div2 and when i scroll up'Read More' events fired and add div1 to div2 and then web view delegate shouldStartLoadWithRequest called.
so every time its update the content to div2 when you are scrolling up but first it takes me the previous s location of div1 and then take me to div2 location where i was currently reading.
so it feel like really weired, suddenly it takes me to somewhere for a while and take me to my current position within friction of second
I tried with this solution,
I thought to take the screen shot and create an imageView with that screenshot image of the current UIWebView and put on webview whenever 'Read More' event is happening. once the web view loading is done remove the imageView and display the webview.
but this is happening in the same way, the problem is every thing is happening under the webview delegate. i still could not figure out whats happening? The solution of this problem am i on right trackj or is there any better solution for that
I have a similar situation. What I do is have two UIWebViews on top of each other. When it is time to update one view, I grab the scroll position, load the new data in the hidden UIWebView, when the other UIWebView is done loading its data it sets its scroll position to the current scroll position of the first webview, then hides the first webview and unhides itself.
Its pretty seamless and works very well.
I suspect that the "jump" you experience depends on the fact that the web view is fully redrawn (and we all know that UIWebView is slow).
So, I see 2 options:
implement the "Read more" mechanics fully in javascript by means of Ajax;
instead of loading data into the view using loadRequest, make a NSConnection to that url and then update the web view by injecting in it the HTML you got from NSConnection through stringByEvaluatingJavaScriptFromString.
The second option is possibly nicer because it is fully SDK based, but you will readily see that it is far more complex than the first one. The two of them will work and I am pretty sure that will give you the kind of smooth behavior you are after.
If I understand your question correctly it sounds like you're trying to implement your own handling of the "infinite scroll" concept.
It might be worth your while to check out one of the many infinite scroll libraries that are already out there. If one doesn't fit your requirements perfectly you might find the inspiration you need to fix the one you have now.