HTML - Auto-scrolling With Dynamic Data
I'm using this div container on my web page to display data in:
PHP Code: <div id="id_screen_area" style="border:1px solid black; width:400px; height:100%; overflow:scroll; overflow-y:scroll; overflow-x:hidden;"> I'm bringing the data in via Ajax (through the "ajax data tunnel") and as the data comes into the div container, it scrolls the page up as the data fills the web page. This works very nicely in Firefox and Windows Safari but not in IE8. Here is the Ajax portion that populates the div as the data comes into the browser from the server: PHP Code: function returnAjaxSendTextMessage() { var objDiv = document.getElementById('id_screen_area'); if (http.readyState == 4) //Finished loading the response { var response = http.responseText; document.getElementById("id_screen_area").innerHTML = response; objDiv.scrollTop = objDiv.scrollHeight; } } I was wondering if anyone knows a trick to make it scroll in IE8? Thanks for any tips... Similar TutorialsHi all, I'm trying to find a way to have my webpage scroll to the bottom automatically after the script: document.form1.submit() is called. I need to run the function/refresh in order to reload some different data into part of the page, but after the refresh the position of the page is always at the top... making the user have scroll down again. I could set some anchors or use window.scroll(0.500); on the page load, but i only want it to scroll down if that function of form1.submit() is called - and thats only called once the page has already loaded for the first time. So the first time a user goes to the page, it loads normally at the top of the page. Then they scroll down themselves and select an option. Once the select an option, the form1.submit() is called and the page refreshes with new data in it but is still at the top. Is what I want possible? Thanks, Mike Hello, I am very new to these forums, so I apologize if this question is either in the wrong location, or impossible to accomplish. I am very new to HTML editing. While I have got the basics down, I have been tasked with creating a website for one of my friend's business. I have been "attempting" to finish this task, but I seem to come across a road block. What I would like to do is create a form with several checkboxes. Each checkbox would be assigned a numeric value. Below the form field, data that is displayed would change based on the combined values of the checkboxes. I will try to clarify. For example. Say you have 6 checkboxes. The number in parenthesis is the value. [ ] (1) [ ] (2) [ ] (1) [ ] (4) [ ] (3) [ ] (7) Now say that two of the boxes are checked. [ ] (1) [ ] (2) [x] (1) [ ] (4) [x] (3) [ ] (7) Their total value is four [(1) and (3)]. Now what would be displayed, in either an iFrame, or on the page itself if it is possible, would be dependent on the total value, say 0<=4 would be one set of information; 5<=8 would be another; 9+ a third set. Also, this form would have to update on every click. No submit button. I believe you can understand my dilemma. I have been searching the web for an answer to both of these problems, both together and separate. Please, anything will be helpful and appreciated, even if not an answer, a point in the right direction. Thanks. When I expand menu items IE automatically detects if scrollbars are needed. When I expand them in Firefox and the menus push below the bottom of the page no scrollbars show up. This might be a scripting issue as opposed to HTML - not sure. I have two dynamic, dependant dropdown lists. DropdownList2 is going to be populated based on the dropdownlist1 option selected. I already know how to do it. The second dropdown list is needs to get the data from oracle table connection. And I do not know how to do it this using a java script function. THANKS A LOT! What I have is: <script language="JavaScript"> function PopulateList2() { Help needed here to populate my ListNumber 2 depending of the List Number 1 option selected. Options are in oracle table. } <tr> <td> <select onchange="populatelist2();" class="searchtext" name="list1" > <option selected value="">Select list1 ----Populating list1 here using oracle data connection---- </select> <select class="searchtext" name="List2" > <option value="">Select List2 </select> </td> </tr> So, I would like to make a one-line textfield that will automatically scroll when too much text is added. So, for example, if I have a field that has room for 20 characters, and someone enters 10 characters, it looks as expected. However, if someone enters 30 characters, only characters 10-30 would be visible. Is this possible? Im really not sure if the title of this thread is right. Anyway, i dont know too much about HTML coding, but id like help with something on my .... MySpace haha Alright, so this is my myspace at the moment. www.myspace.com/cj_x3 As you can see, i have links on the sides, done by the following code example; Quote: <div style="width: 78px; height: 22px; position: absolute; bottom:5px;right:15px; background-color: transparent; border-width:0px;border-style:solid;border-color: transparent; font-family: verdana;"> <a href="LINK" style="color: dd4444; font-size: 9px; position: absolute; right: 0px; top: 0px">EXAMPLE LINK TEXT</a> </div> When you scroll down, the links on the sides scroll off the top. I dont like this... What i want to happen, is for them to be fixed, like the background, so when you scroll down, the links around the sides dont move. Thanks for the help in advance Hey all. I have been working on this website that my friend had been designing, and was just wondering if this was possible. The way it is now, the topmost div's are supposed to stay in their position at all times, and the only part that would scroll would be the main body. The two body divs (left and right) have been placed inside the div that should be scrolling. I know there is the css overflow, but the problem is, there is no fixed height on the div, so this method isn't quite right. If anyone knows of a way where we could just start the scrolling at a certain point down the page, that would be great. Here is a link to the page so far - don't worry, it won't look close to that when finished... Image/text placeholders are horrid, I know. http://http://pixelconcepts.zxq.net/ -Thanks in advance. my page (http://www.zerofivezero.net/the_project102.html) is scrolling as if there's content down the page, but there isn't...I can't figure it out. I'm using the code below to hide the content and have it swapped when selecting an item from the nav. Code: .hidden { position:absolute; z-index:2; visibility:hidden; Code: <div id="section3_region" class="hidden"><div class="news"><fieldset> <legend><img src="images/forum_leg.jpg" width="120" height="28" border="0" alt=""/></legend> <br /><br /> <div class="img"><img src="images/news_thumb1.jpg" width="80" height="75" border="1" alt=""/></div> This is the news section<br /> Yep, this is where the news will be. This will be the short blurb about the story. <div class="img"><img src="images/news_thumb2.jpg" width="80" height="75" border="1" alt=""/></div> This is the news section<br /> Yep, this is where the news will be. This will be the short blurb about the story. <div class="img"><img src="images/news_thumb3.jpg" width="80" height="75" border="1" alt=""/></div> This is the news section<br /> Yep, this is where the news will be. This will be the short blurb about the story. </fieldset></div> So I've got a form with some input text. In addition to the data in the input text I want to send some other data that has already been predetermined on initial page load. How would I declare the other data within the form element? Thanks Hi Experts, I am designing a webpage where based on the year selection the associated years webtable needs to be displayed in the webpage. Pls give som suggestions and if possible the code on to how to code this using HTML and Jav Script. I know I have to write afunction and then call the fn based on the input.but need your help on this. Thanks, Bsquare Hello, I have a div tag that is scrolled vertically. I found some java code he https://developer.mozilla.org/en/DOM...scrollIntoView that allows me to use a "Scroll to Top" button at the bottom of the DIV to help navigate it back to the top. Problem is, that I want the page to remain in the same position, whereas this seems to be making my page scroll to the bottom at the same time as scrolling the div to the top. Has anyone got any ideas on howto scroll a div to the top, without the page reloading, or scrolling? Thanks Jay Hi, I'm working on a movie database for a device that supports html. It only supports basic html though. For my index page I the characters A-Z (as well as genres) to select movies starting with that certain letter. The movie covers display in a row underneath. I want to find a way keep the characters A-Z centered in the top of the screen so when I browse further right (or left) of the screen it stays there similar to the way the background stays in place. At the moment when I browse left and right the A-Z moves with it (so it ends up moving off the screen). Does anyone know a way to keep it in place like the background. The files I'm editing are in .xsl format. They are used inconjunction with movie collectorz to make html pages. Anyhelp would be greatly appreciated. Remeber it only supports basic html, no javascript. Thanks. Hi, my problem is that I don't know how to let my background scroll with the page, not having it repeating. however the content has to stay at it's place. Hi, I'm trying to add scrolling affect to my website using marguee tag but nothing work can somebody help me with this? this is the script <VAR_MAIN_TITLE>%%TEXT_LATEST_JOBS%%</VAR_MAIN_TITLE> <VAR_MAIN_HEADER_HEIGHT>0</VAR_MAIN_HEADER_HEIGHT> %%MAIN_HEADER%% <table bgcolor="%%LIST_BORDER_COLOR%%" width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td> <table bgcolor="%%LIST_BORDER_COLOR%%" width="100%" border="0" cellspacing="1" cellpadding="2" class="tablelist"> <tr bgcolor="%%LIST_HEADER_COLOR%%"> <th width="15%"> %%TEXT_POST_DATE%% </th> <th width="28%" align="center"> %%TEXT_TITLE%% </th> <th width="28%" align="center"> %%TEXT_JOBCATEGORY%% </th> <th width="28%" align="center"> %%TEXT_LOCATION%% </th> </tr> <marquee WIDTH=100% BEHAVIOR=scroll SCROLLAMOUNT=3 DIRECTION=up BGColor=""> <BEGIN REPEAT> <tr bgcolor="%%TABLE_LINE_BGCOLOR%%"> <td width="15%"><a href="%%JOB_LINK%%" title="%%JOB_JOBTITLE%%" class="tablelist">%%JOB_JOBDATE%%</a></td> <td width="28%"><a href="%%JOB_LINK%%" title="%%JOB_JOBTITLE%%" class="tablelist">%%JOB_JOBTITLE%%</a></td> <td width="28%"><a href="%%JOB_LINK%%" title="%%JOB_JOBTITLE%%" class="tablelist">%%JOB_CATEGORY%%</a></td> <td width="28%"><a href="%%JOB_LINK%%" title="%%JOB_JOBTITLE%%" class="tablelist">%%JOB_LOCATION%%</a></td> </tr> <END REPEAT> </MARQUEE> <BEGIN NORESULT> <TR> <TD colspan="4" align="center" valign="middle" bgcolor="%%TABLE_LINE_BGCOLOR%%"><font class="default_text"><b>%%TEXT_NO_RESULT%%</b></font></TD> </TR> <END NORESULT> </table> </td></tr> </table> %%MAIN_FOOTER%% Hello everyone! I am currently working on a project that requires the following object to auto-scroll at user defined speeds: <td width='75%' valign='top'><object width='500' height= '1000' type='text/plain' data='bird.txt' border='0'> The embedded object is always a text file but each one will be a different size. I need some kind of auto-scroll mechanism that will allow the user to scroll down the text box at a speed that suits the size of the text file itself. Does anyone have any suggestions about how this could be achieved? Thanks people are telling me that have to horizon scroll (left to right) to see this page: http://www.girlsincsoaz.org I tried it on different machines, including a laptop and I don't have to, what can be the problem? TIA Problem Fixed ima noob. To this forum and html as well so please be gentle. i brought lube...lol I'm trying to change the color of the 'bar' between two frames. The frame on the left I have set to 'no scroll' and i want to change the color of it. I know how to change the color of scroll bars, arrows... but how do i change just the bar? I've been using JS to change the colors of the scroll bar. Is there another way? like css. Hello! New to the HTML forums, nice to meet everybody ^^. I have a problem with my website, http://christopherortiz.webs.com/advertisingproject.htm , for some reason I have horrible scrolling lag on all of the pages, mainly on that one! Check out the source and tell me what I have done wrong o.o Quote: <HTML><HEAD><TITLE>Advertisement Project</TITLE></HEAD> <BODY> <body style="background-attachment: fixed; background-position: center top; background-repeat: repeat;" background="al432s.jpg"> <center><h2><img src="christopher.png"></h2> <p><a href="index.htm"><img src="home.png" style="border-style: none"/></a><a href="advertisingproject.htm"><img src="prjct.png" style="border-style: none"/></a><a href="blog.htm"><img src="blog.png" style="border-style: none"/></a><a href="guest.htm"><img src="cmnt.png" style="border-style: none"></a></p> <img src="projecthead.png"> <br> <div style="width:750px;height:2300px;border:2px inset red; background-image:url(http://flyingredhorses.com/GalleryIm...gGrayBox.jpg); background-attachment: fixed; background-position:left center; background-repeat:yes-repeat; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 1px solid #000; "><center><p style="font-family:verdana;font-size:90%;color:green">ORIGINAL</p></center><center><img src="originalcamel.png"></center> <center><p style="font-family:verdana;font-size:90%;color:green">PARODY VERSION</p></small><center><img src="camel.png"></center><br><center><p style="font-family:verdana;font-size:110%;color:green"><large>Analysis</large></p></center></center><p style="font-family:verdana;font-size:90%;color:green"> Camel Lights: Who on earth would want to buy these? What makes their advertising appealing enough to make you want to shove a cancer stick down your throat? Camel cigarette ads use rhetorical means to fool its demographic, you, into the habit of smoking.</p> <p style="font-family:verdana;font-size:90%;color:green"> The central illusion which the advertisement aims to create is an image of a rugged man, which the customer in turn can become--provided that he buys a pack of Camel Lights. The first words that come to mind are cool, masculine, and rugged. The tattoo makes him appear to be a ruffian, a delinquent, a desperado. These are all rhetorical justifications that make one want to smoke Camel Lights, just once. But what really defines the ad is its sleek image, orange velour and the cancer sticks dancing around like they were in Vegas as if they were going to die tomorrow.</p> <p style="font-family:verdana;font-size:90%;color:green"> Who on earth would want to buy these cunningly disguised serpents. We look at the man smoking cigarettes, his apparent countenance of ruggedness and individualistic style which we long to obtain, when in reality he is masquerading himself in a body of lies and deception. This is a form of ethos, which we, as viewers convinced to be truthful; reliable. But little do we know that its true nature hides behind a face of lies. We put our trust in the supposition that the advertisers are telling the truth; that camel lights will make us a little more like him. A brief glance at this advertisement might not make us question if what we're told is the truth. That's when Logos comes into the play. Looking at the advertisement, its reasoning seems logical: people who smoke, like the man in the advertisement, are cool; those who don't are not. What this carefully woven structure neglects to mention is that those cool kids are far more likely to contract cancer and other dangerous ailments.</p> <p style="font-family:verdana;font-size:90%;color:green"> Our society is built around these stereotypes of the rugged man and the classic Marilyn Monroe pose. The cigarette companies purposefully create these rhetorical devices, which appeal to us, the consumers. This not only makes you want to buy the product, it makes you buy into the delusion which cigarette companies have createdl</p> <p style="font-family:verdana;font-size:90%;color:green"> In conclusion, not only do Camel Light advertisements use certain rhetorical devices, but influence they way society thinks and acts. In short, advertising perpetuates stereotypes. Camel Lights, just chooses to perpetuate the stereotype of the rugged man.</p> </p> <div class="t"><div class="b"><div class="l"><div class="r"><div class="bl"><div class="br"><div class="tl"><div class="tr"> </center> </FONT></Body></HTML> |