JavaScript - Appending To Div +scrollbar Problem
Appending to a div (id=right) over time. There is a scrollbar on the right side. At some point, the scrollbar appears but the user has to manually move the scrollbar to the bottom to see the newest appends.
Googled and found a number of "solutions" that I can't get to work. The ideal would be to always have the scrollbar move to the bottom after each append. Code: #right { background-color: #FF0; width: 150px; height: 300px; float: right; overflow : auto; } $("#right").append("<p>something important here"); Similar TutorialsHi all, I am currently building a PHP based site and need some help with a Javascript problem I have. I am relatively new to PHP and have not started on learning any Javascript yet! I copied some Javascript that I found on 'http://www.javascriptkit.com/script/script2/htmltooltip.shtml' so that I could use tooltips. It works well and I have edited the CSS a bit to suit my needs. However I still have one problem which I can't solve as I believe it is the Javascript that is causing the problem. My page (which has the tooltips and code on) has vertical and horizontal scrollbars that only allow you to move a tiny bit. They are unnecessary and even when I remove almost all the elements of the page, the scrollbars remain. When I remove the line '<script type="text/javascript" src="scripts/jquery-1.2.2.pack.js"></script>' from my code, the scrollbars dissappear, but this line is vital for the tooltips to function. This script is available for download at the given URL above (it is in the center of the page called 'jquery-1.2.2.pack.js'). Please could somebody take a look and see if they can help, any advice appreciated. Thanks Very Much Dan Hey Guys! I'm new to the site but, I am building a site that has a small area of scrollable text on the page. Basically, my scrollbar is created using layers and styles and it runs an external .js file. It has been working great up until about 6 months ago where it was incompatible in all browsers. I have no idea why. I'm literally pulling out my hair thinking about it. Any help would be nice. The external .js file is below <code> // variables var mouseover = false; var scrolldirection; var scrollratio; var theheartbeat, scrolling; var menuOffsetTop = menuOffsetLeft = menuMaxHeight = 0; var currentX = currentY = 0; var whichIt = null; // events document.onmousedown = grabIt; document.onmousemove = moveIt; document.onmouseup = dropIt; // switch direction scroller will move while pressing a button function switchit(obj, cmd) { if (cmd == 'in') { mouseover = true; if (obj.getAttribute('id') == "scrollup") { scrolldirection = -1; } else { scrolldirection = 1; } } else { mouseover = false; } } function scroll() { if (((scrollbox.style.pixelTop + menuOffsetTop + scrolldirection) >= menuOffsetTop) && ((scrollbox.style.pixelTop + menuOffsetTop + scrolldirection) <= (menuOffsetTop + menuMaxHeight - scrollbox.style.pixelHeight))) { scrollbox.style.pixelTop += scrolldirection; } } function heartBeat() { data.style.pixelTop = -1 * scrollratio * (scrollbox.style.pixelTop + menuOffsetTop - menuOffsetTop); } function grabIt(e) { if (event.button == 1) { if (mouseover) scrolling = window.setInterval("scroll();",1); else { whichIt = event.srcElement; while (whichIt.id.indexOf("scrollbox") == -1) { whichIt = whichIt.parentElement; if (whichIt == null) { return true; } } // whichIt.style.pixelLeft = whichIt.offsetLeft; whichIt.style.pixelTop = whichIt.offsetTop; currentX = (event.clientX + document.body.scrollLeft); currentY = (event.clientY + document.body.scrollTop); } theheartbeat = window.setInterval("heartBeat()",1); } } function moveIt(e) { if (whichIt == null) { return false; } newX = (event.clientX + document.body.scrollLeft); newY = (event.clientY + document.body.scrollTop); distanceX = (newX - currentX); distanceY = (newY - currentY); currentX = newX; currentY = newY; if (((scrollbox.style.pixelTop + menuOffsetTop + distanceY) >= menuOffsetTop) && ((scrollbox.style.pixelTop + menuOffsetTop + distanceY) <= (menuOffsetTop + menuMaxHeight - scrollbox.style.pixelHeight))) { scrollbox.style.pixelTop += distanceY; } event.returnValue = false; return false; } function dropIt() { clearInterval(scrolling); clearInterval(theheartbeat); whichIt = null; } function init() { menuOffsetTop = floater.style.pixelTop; menuMaxHeight = floater.style.pixelHeight; getscrollinc(); } function getscrollinc() { var contentinc; var scrollerinc; var contentHeight = data.offsetHeight; var scrollerHeight = content.style.pixelHeight; if (scrollerHeight < contentHeight) { contentinc = content.style.pixelHeight / contentHeight; scrollerinc = floater.style.pixelHeight*contentinc; scrollratio = contentHeight / floater.style.pixelHeight; } else { scrollerinc = floater.style.pixelHeight; contentinc = 1; } scrollbox.style.height = scrollerinc; } </code> An example of a page I was trying to use it on is (http://desifraternity.org/history.html) Thanks you in advance! What am I doing wrong here. I'm trying to generate this code into my listOfSquares UL using javascript: Code: <a href="#" id="square0"><li class="square"></li></a> This is my complete code: Code: <html"> <head> <title>Squares</title> <style> li.square { width: 26px; height: 26px; border: 1px solid black; display: block; float: left; margin: 5px; background-color: #39F; } div#squares { width: 725px; margin: 50px; background-color: #CCC; float: left; } div#form { width: 700px; text-align: center; clear: both; margin: 50px 50px 0 50px; } </style> <script> <!-- function generateSquare() { var number = 0; var squareID = "square" + number; var container = document.getElementById('listOfSquares'); var linked = document.createElement('a'); linked.setAttribute('href', '#'); linked.setAttribute('id', squareID); container.insertBefore(linked, container.firstChild); addToElement(squareID); } function addToElement(elementID){ var new_element = document.createElement('li'); new_element.setAttribute('class', 'square'); document.getElementById(elementID).innerHTML=new_element; } //--> </script> </head> <div id="form"> <form> <input type="button" value="Generate Square" onclick="generateSquare()" /> </form> </div> <body> <div id="squares"> <ul id="listOfSquares"> </ul> </div> </body> </html> On a web form my users choose different variables to "shock" (ie change relative to a starting base) over different periods: eg user "shocks" US interest rates 0.50% points above base during 201202-201304 (ie 2012 Quarter2-2013 Quarter4) User may then add another "shock" to same variable: US interest rates .75 % points above base during 201301-201404 (ie 2013 Quarter1-2014 Quarter4) User may then add "shock" to different variable: JAPAN interest rates (RSH_j) 1.00 % points above base during 201201-201404 (ie 2012 Quarter1-2014 Quarter4) I have generated a Select area (ShockVarPlot) that concatenates the required component data from DD boxes for charting: RSH_u,201202-201304,+0.50 RSH_u,201301-201404,+0.75 RSH_j,201301-201404,+1.00 (NB each line of the above Select box is formed after the "Add Shock" button is clicked, so this is the obvious event to trigger the Chart Plot too) For EACH particular variable being shocked (eg RSH_u, RSH_j) I would like to instantly plot the entire profile of each shock. Subsequent shocks to the SAME variable may simply append to earlier shocks or may (partially) overwrite depending if the time period chosen overlaps. But once a NEW shock variable is chosen (eg RSH_j) , the previous plot (of RSH_u) simple gets overwritten in the common plot area. The x-axis scale width can be hard-coded; say 201004-202104. Charting Requirement (for common plot area) ---- "Add Shock" button=> First Plot - Plot RSH_u +0.50 above base over 201202-201304....... "Add Shock" button=> ....then (partially) overwrite/append with +0.75 over 201301-201404 "Add Shock" button=> Second Plot - Delete above plot & Plot RSH_j +1.00 above base over 201301-201404 Chartplot needs to display the variable being charted eg "RSH_u"or "RSH_j" Logic Requirement ---- If new shock => plot this magnitude over selected period within 201001-202104 If new shock (same variable) => plot this as above but this shock overwrites previous if any time-period overlap If new shock (new variable) => delete first plot & plot this magnitude over selected period within 201001-202104 Question -------------- Is there a simple Javascript method to achieve this real-time plotting/appending on clicking "Add Shock" ? I have seen things like FLOT charting but not sure how to read/chart my Listbox output in ShockVarPlot above Any thoughts ? EDIT: I SOLVED THIS BY USING "#" instead of "?". Thank you. Hello. My goal is to take a user's email from a form, store it in a cookie, and append it to the window location on the following page. I am doing this so that when a user shares the page with "add this widget" the stats will show me who shared the page. The problem I have is that window.location.replace("?"+ user_email); seems to be sending the browser in an infinite loop. Right now it is running as an inline function in the head. I tried calling the function with body onload and had the same problem. Code: <script = "Javascript"> (function readCookie() { var user_email = unescape(document.cookie); if (document.cookie) { window.location.replace("?"+user_email); } })(); </script> Is there another way I could achieve the same result? Thank you, Jack Hey all, I'm in process of writing my own script (I don't want to use any jquery plugins) to render a table and allow for filtering/searching. So when user clicks on link, by default there will be parameters passed in query string as you can see in the setDefaults private method below. However, I'm stuck trying to figure out the best way to append values selected from filter dropdown to the query string. I know it will involve something along the lines of $("select").change(function(){var option = $(this).val()}). But I am having difficulty figuring out how to incorporate it with this. I would like to make use of the below buildFilter function somehow: Code: (function($){ var listview = $('#listview'); var lists = (function(){ var criteria = { drop_filter: { check: function(value){ if(value) return }, msg: "Loading..." }, search_filter: { check: function(value){ if(value) return }, msg: "Loading..." } } var handleFilter = function(){ } return { create: function(component){ var component = component.href.substring(component.href.lastIndexOf('#') + 1); return component; }, setDefaults: function(component){ var parameter = {}; switch(component){ case "sites": parameter = { 'order': 'site_num', 'per_page': '20', 'url': '/sites' } } return parameter; }, buildFilter: function(){ if(event == "change") return criteria.drop_filter(); } } })(); $('#dashboard a').click(function(){ var currentComponent = lists.create(this); var custom = lists.setDefaults(currentComponent); initializeTable(custom); }); var initializeTable = function(custom){ var defaults = {}; var query_string = $.extend(defaults, custom); var params = []; $.each(query_string, function(key,value){ params += key + ': ' + value; }) alert(params); } })(jQuery) Thanks for any response. I want to insert this js snippet Code: function addText(smiley) { document.getElementById('message').value += " " + smiley + " "; document.getElementById('message').focus(); return false; } to a loaded iframe with name&id chtifrm. I can access it & change embed something in its html via using something like: Code: $(parent.chtifrm.document.body).append('<div id=\"smly\" style=\"cursor:pointer;float:left;top:200px;display:none;position:absolute;\"><\/div>'); .... Code: parent.chtifrm.document.getElementById('chatbox_option_disco').style.display == 'none' but how do I insert js in the head of loaded iframe? delete this thread
Hi, I'm currently working on a JavaScript scrollbar on my website: http://allotrope-dome.net. I managed to get most of the code working. The only part that isn't working is that users can't click and drag on the scrollbar (click on the "About" section in the navigation bar to get a better idea of what I'm talking about). If any of you could help me out with that, I'd really appreciate it. Thanks! To see the code, go to http://allotrope-dome.net/about.php and click "View Source." I have a Java script chat, How would I make a scroll bar for it? Does any one have any code for that? or do you know what I have to do? thanks, Yo_papa75 So, here is my question: Is there some possibility to put the horizontal scroll bar of the web browser into the center if the "width" of web page are bigger then the "width" of the web browser screen? So I don't need to scroll to right if I open the page, but the horizontal scroll bar will be positioned in the center. That code should do the same think like I when I take the scroll bar and put it in the center position, but this should be happen when I load the page automatically. Or how can I do that? thanks to all . . . When Scroll Bar is scrolling, at that time how can we find using js what is the element at the topmost position in that window pane only. When the user scrolls down, the value of element at the time of that at topmost position I'm trying to figure out which elements of a document are visible as the user scrolls the Firefox browser. I haven't written the code yet but I think I should be able to do it by keeping track of the current display using the following properties: window.content.scrollX, window.content.scrollY, window.content.innerWidth, window.content.innerHeight. -- with these 4 I can determine which part of the document is visible. Then for each element I can figure out its display position using, offsetWidth, offsetHeight, offsetTop, offsetLeft. This would entail traversing the DOM and perculating the offset values down to all the children. While this would likely work, it seems inefficient. Do you know of any other ways to determine which elements are actually on the screen? So, here is my question: Is there some possibility with php to put the horizontal scroll bar of the web browser into the center if the "width" of web page are bigger then the "width" of the web browser screen? So I don't need to scroll to right if I open the page, but the horizontal scroll bar will be positioned in the center. That code should do the same think like I when I take the scroll bar and put it in the center position, but this should be happen when I load the page automatically. Or how can I do that? thanks to all . . . Hello. Could you guys point me in the right direction. I have a DIV that I woul like to move along with the users vertical scrollbar. So when the user scrolls down on the page the DIV will follow. Where can I find information on how I can do this.
I am using this code to control scrolling of 2 divs at the same time, but i want to be able control 3 (or more) divs at the same time.. what am i missing? JS in head: <script type="text/javascript"> function scrollDiv(controllingElement, controlledElementID) { var controlledElement = document.getElementById(controlledElementID); controlledElement.scrollTop = controllingElement.scrollTop; controlledElement.scrollLeft = controllingElement.scrollLeft; } </script> JS in body applied to parent / controlling div: <div id="master" onscroll="scrollDiv(this,'top');" > ...</div> Names of the 2 divs controlled by "master": <div id="top" >...</div> <div id="bottom" >...</div> Hi, I want to let my scrollbar start at a random point when a page opens. I would like the page to load each visit somewhere else and always random like let's say one time more in the middle of the page and the other time more at the end of the page and an other time somewhere else. Someone in php-forums told me that this can by done by Javascript. How do I do that? Thanx for helping me out. Best regards, Thoaren I am working on a ajax chat system right now and I've ran into a little problem. I have no idea how to go about doing this but I know there has to be a way of doing this because I've seen it done before on other ajax chats I've seen. How do I ago about moving the scrollbar of a div to the bottom so that it shows the last that has been entered into the chat. If you need me to explain more then just let me know. But basically I'm wanting the scrollbar when it overflows in the window of a div to go and to the bottom when someone enters something new to the chat. http://www.hannahdesign.co.nz/client...ing-collateral So here is what I have done so far: - Used FlexCroll (1) to make custom scrollbars on the top image panel - In the scrollbar - I have used a no-repeat background image that is 17px in width Problems: - When loading a vertical scrollbar appears - The horizontal scrollbar does not go all the way to the end Here is what I want to do: - Disable the vertical scrollbar for ONLY this div (this same script is used for another vertical scrollbar - http://www.hannahdesign.co.nz/client/summary) - Make the horizontal scrollbar limited to 17px or another set width. I have included both my CSS and the uncompressed JS. (1) - FlexCroll - http://www.hesido.com/web.php?page=customscrollbar |