HTML - Scrollbar Moving Page Contents.
I have several pages in a site I am designing, some short and some long
On short pages the browser automatically hides the scroll bar and on long pages, displays it. This shifts the contents of the page left and right by the width of the scroll bar and completely distracts from the experience and use of the site. I've found a work around; adding breaks so all pages are long enough to have a scroll bar; but that's not the solution, there are plenty of sites out there that don't have this problem and I'd like to know what the fix is. Any ideas gratefully received. Ta, Rizole. Similar TutorialsHow would i go about making the onchange property of a <select> drop down menu change the position of a scroll bar of a <div> below it? I got a report that on this website http://www.livingwordchurch.org.uk/home.php on certain pages, the entire content shifts to the right. My friend uses FireFox 3 when it does it, although I do too and I don't see anything happening. Do any of you see it moving too? And if so, any ideas why? I have a table on my website that doesn't quite fit horizontally, so I want a scrollbar for the user to scroll across. Is this an i-frame? thanks I have been puzzled by the fact that the scroll bar is missing on my site at http://larkspree.com/index.php. It wasn't an issue until I added content 'below the fold'. When viewed in Firefox 3.5.5 and Opera 9.6.4, I CAN scroll down with the down arrow or page down keys. When viewed in Windows Explorer 8, the below the fold content is on top of the main above-the-fold content. The screen won't scroll with the keys, and there is no scroll bar. In Chrome 3.0 and Safari 4.0.4, I can't scroll with with the keys and there is no scroll bar. My page got very complicated with the javascript and jQuery and hidden divs. But the content is organized with nested divs, which can be easily seen using a debugger like Firefly. The main structure is like this: Code: <div id='all'> <div id='fblogin'></div> <div id='content'></div> <div class='featuredEventList'></div> </div> I hope I don't have to tear it down to debug this problem. Can someone offer an explanation or suggest something I could try to get the scroll bar to appear? Thanks, Jim Hello friend, If I post article more then some words , it takes two pages to display the content. Please help me to display the whole article in one page. See this: http://www.solvedhow.com/How+to+Lose+Weight-5.html This is the coding in paging.html. Please help me PHP Code: <?php class Lib_Paging { var $output=array(); var $prev; var $next; function Lib_Paging($model,$par,$cssstyle) { if($model='classic') $this->doClassicPaging($par,$cssstyle); if($model='default') $this->doDefaultPaging($par,$cssstyle); } function doClassicPaging($par = array(),$cssstyle) { // print_r($par);exit; // echo $cssstyle;exit; if(count($par)>0) { if(!isset($_GET['page'])) { $start = 1; $end = ($par['length']>$par['totalpages'] ? $par['totalpages'] : $par['length']); $s = 0; for($i=$start;$i<=$end;$i++) { $tmp = $_SERVER['QUERY_STRING']."&page=".$i; if($_GET['page'] == "" && $i==1) $this->output[++$s]= '<span class="current">'.$i.'</span>'; else $this->output[++$s]= '<a href="?'.$tmp.'" class=\''.$cssstyle.'\'>'.$i.'</a>'; } if($par['totalpages']>$par['length']) { $tmp = $_SERVER['QUERY_STRING']."&page=".($start+1); $this->next = '<a href="?'.($tmp).'" class=\''.$cssstyle.'\'>Next </a>'; } return true; } else if (isset($_GET['page'])) { $cpage = $_GET['page']; $mid = (int) ($par['length']/2); if($cpage > ($mid+1)) { $start = ($cpage - $mid); $end = $start + $par['length']-1; } else { $start = 1; $end = ($par['length']>$par['totalpages'] ? $par['totalpages'] : $par['length']); } $s=0; for($i=$start;$i<=$end;$i++) { $tmp = split('page',$_SERVER['QUERY_STRING']); $q = $tmp[0]."page=".$i; $tmp = split('&',$tmp[1]); $q .= (strlen(trim($tmp[1]) > 0) ? '&'.$tmp[1] : ''); if($_GET['page']==$i) $this->output[++$s] = '<span class="current">'.$i.'</span>'; else { if($i<=$par['totalpages']) $this->output[++$s] = '<a href="?'.$q.' " class=\''.$cssstyle.'\'>'.$i.'</a>'; } } if ($_GET['page']<$par['totalpages']) { $tmp = split('page',$_SERVER['QUERY_STRING']); $q = $tmp[0]."page=".($_GET['page']+1); $tmp = split('&',$tmp[1]); $q .= (strlen(trim($tmp[1]) > 0) ? '&'.$tmp[1] : ''); $this->next = '<a href="?'.($q).' " class=\''.$cssstyle.'\'>Next </a>'; } if($_GET['page']>1) { $tmp = split('page',$_SERVER['QUERY_STRING']); $q = $tmp[0]."page=".($_GET['page']-1); $tmp = split('&',$tmp[1]); $q .= (strlen(trim($tmp[1]) > 0) ? '&'.$tmp[1] : ''); $this->prev .= ' <a href="?'.($q).'" class=\''.$cssstyle.'\'>Prev</a>'; } } } } function doDefaultPaging($par = array(),$cssstyle) { // print_r($par);exit; // echo $cssstyle;exit; if(count($par)>0) { if(!isset($_GET['page'])) { $start = 1; $end = ($par['length']>$par['totalpages'] ? $par['totalpages'] : $par['length']); $s = 0; for($i=$start;$i<=$end;$i++) { $tmp = $_SERVER['QUERY_STRING']."&page=".$i; if ($end==1) // For A Single Display Page { $this->output[++$s]= ''; } else { if($_GET['page'] == "" && $i==1) $this->output[++$s]= '<li class=\''.$cssstyle.' selected\'>'.$i.'</li>'; else $this->output[++$s]= '<li class=\''.$cssstyle.'\'><a href="'.$_SESSION['ajasiteset']['sitefullpath'].'?'.$tmp.'" >'.$i.'</a></li>'; } } if($par['totalpages']>$par['length']) { $tmp = $_SERVER['QUERY_STRING']."&page=".($start+1); $this->next = '<li><a href="'.$_SESSION['ajasiteset']['sitefullpath'].'?'.($tmp).'"><span class="view_edit_next"></span> </a></li>'; } return true; } else if (isset($_GET['page'])) { $cpage = $_GET['page']; $mid = (int) ($par['length']/2); if($cpage > ($mid+1)) { $start = ($cpage - $mid); $end = $start + $par['length']-1; } else { $start = 1; $end = ($par['length']>$par['totalpages'] ? $par['totalpages'] : $par['length']); } $s=0; for($i=$start;$i<=$end;$i++) { $tmp = split('page',$_SERVER['QUERY_STRING']); $q = $tmp[0]."page=".$i; $tmp = split('&',$tmp[1]); $q .= (strlen(trim($tmp[1]) > 0) ? '&'.$tmp[1] : ''); if($_GET['page']==$i) $this->output[++$s] = '<li class=\''.$cssstyle.' selected\'>'.$i.'</li>'; else { if($i<=$par['totalpages']) $this->output[++$s] = '<li class=\''.$cssstyle.'\'><a href="'.$_SESSION['ajasiteset']['sitefullpath'].'?'.$q.' " >'.$i.'</a></li>'; } } if ($_GET['page']<$par['totalpages']) { $tmp = split('page',$_SERVER['QUERY_STRING']); $q = $tmp[0]."page=".($_GET['page']+1); $tmp = split('&',$tmp[1]); $q .= (strlen(trim($tmp[1]) > 0) ? '&'.$tmp[1] : ''); $this->next = '<li><a href="'.$_SESSION['ajasiteset']['sitefullpath'].'?'.($q).'" ><span class="view_edit_next"></span> </a></li>'; } if($_GET['page']>1) { $tmp = split('page',$_SERVER['QUERY_STRING']); $q = $tmp[0]."page=".($_GET['page']-1); $tmp = split('&',$tmp[1]); $q .= (strlen(trim($tmp[1]) > 0) ? '&'.$tmp[1] : ''); $this->prev = '<li><a href="'.$_SESSION['ajasiteset']['sitefullpath'].'?'.($q).'" ><span class="view_edit_pre"></span></a></li>'; } } } } } ?> Hi, I'm new to this forum and could use some help. I created a website in iweb and I'm having an issue with items moving on the page. The website is VoiceFromHevin.com, not necessarily the welcome page, but the pages after that. So here is the backstory: When I first published my site I had problems with items moving around on the page when you shrank your browser window. The background would stay center while other images and text would move left. So, to combat that problem I changed two lines of code. <body style="background: rgb(255, 255, 255) url(About_files/background%20Test%202%20cropped%20longer.jpg) no-repeat scroll center top; margin: 0pt; " onload="onPageLoad();"> I changed part of the line of code from "no-repeat scoll center center;" to "no-repeat scroll center top;" I then change one more line of code which was: <div style="margin-bottom: 0px; margin-left: auto; margin-right: auto; margin-top: 0px; overflow: hidden; position: relative; word-wrap: break-word; background: transparent; text-align: left; width: 980px; " id="body_content"> and made these changes to it: <div style="margin-bottom: 0px; margin-left: -512px; margin-top: 0px; overflow: hidden; position: absolute; left: 50%; word-wrap: break-word; background: transparent; text-align: left; width: 1024px; " id="body_content"> However, if you notice the pages, the three blue logos have moved off of the cloud image (they should be resting on the cloud). And also the footer links at the bottom have moved. Is there a way to move those items back to where they should be? Any help would be much appreciated! Thanks! Never mind. I figured it out myself. It's little odd looking but it works and it validates. Hello all, I am searching for the html code that will allow me to including a moving script at the bottom of my page. appreciate any help, JJ Hi all, I'd really appreciate some help on this one. I have a program which outputs very long strings of text to a HTML page. At the moment the text stays on one line resulting in an annoying horizontal scrollbar. How do I get the page to automatically format the text so that it all fits within a standard width, and so there's no horizontal scrollbar? Regards, Ruth Greetings, Thanks in advance for any help. Basically, I'm new to HTML, I've made a site with an external CSS file, its all good, except that all the elements stay to the left. The browser background is grey, the actual page background is white (its an image, however, not just the colour). The page adjusts when I resize the IE window, but nothing else does, they just stay there. I've tried absolute positioning, relative, and so on, but nothing seems to fix it. How do I get the elements to move? I've attached the CSS and index file (named portfolio) for reference. I apologise in advance for my general noobiness. I hope the poorly written attachments don't hinder the helping process. Thank you, Panda. In mininova.org, when we scroll down the page, ad on the right side is automatically adjusted. How to do achieve this using html? I want to implement the same in my site? the title makes it sounds really confusing. Ok im making my first website, and i need help with a code, (as you can see on www.dalekblaster.co.uk) i have got a section at the top where the images change from one to another. The code is - HTML Code: // Set slideShowSpeed (milliseconds) var slideShowSpeed = 5000; // Duration of crossfade (seconds) var crossFadeDuration = 5; // Specify the image files var Pic = new Array(); // to add more images, just continue // the pattern, adding to the array below Pic[0] = 'http://www.dalekblaster.co.uk/images/banner/dalekblasternexttime.jpg' Pic[1] = 'http://www.dalekblaster.co.uk/images/banner/dalekblaster2.jpg' Pic[2] = 'http://www.dalekblaster.co.uk/images/banner/dalekblastersjanexttime.jpg' Pic[3] = 'http://www.dalekblaster.co.uk/images/banner/dalekblaster.jpg' // do not edit anything below this line var t; var j = 0; var p = Pic.length; var preLoad = new Array(); for (i = 0; i < p; i++) { preLoad[i] = new Image(); preLoad[i].src = Pic[i]; } function runSlideShow() { if (document.all) { document.images.SlideShow.style.filter="blendTrans(duration=2)"; document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)"; document.images.SlideShow.filters.blendTrans.Apply(); } document.images.SlideShow.src = preLoad[j].src; if (document.all) { document.images.SlideShow.filters.blendTrans.Play(); } j = j + 1; if (j > (p - 1)) j = 0; t = setTimeout('runSlideShow()', slideShowSpeed); Now i need help because, i want to link each picture on the slideshow to a differnet page or external site, but im not sure how. (but so they can go to different pages not the same one) can anyone help me? I need an HTML scrollbar that can display HTML of a picture without showing the picture. Any help would be appreciated. I searched all over the internet and I can't come up with anything. The problem I have is in my form I have: HTML Code: <table> <tr> <td> <div style="position: relative; border-width: 1px; border-style: solid; border-color: #000000; overflow: auto; overflow-x:hidden; scrollbar-base-color: #98B0C7; scrollbar-arrow-color: #FFFFFF; width: 100%; height: 300px;">data</div> </td> </tr> </table> With this, I use the div to be at 300px height so the overflow creates a scrollbar within the form to allow a user to scroll the data without scrolling the entire page.. hence no scrollbar on the browser right side.. Well, in some cases I still do have the right side browser scrollbar because the entire form will sometimes be large. (not the div data) This is ok and what's normally suppose to happen. In those scenarios, the scrollbar is there on the right side of the browser for ie7 but in ie6, it's not there. Again, not talking about my div data content scrollbar within the form, but the right hand side of the browser scrollbar. If someone could enlighten me about exactly what is going on here I would greatly appreciate it. s-one check this page out..the vertical scrollbar http://www.progressoft.com/?option=c...&iscon&dir=ASC EDIT: i mean the vertical scrollbar of the clients area in the middle..& to see it check it in IE Im not sure if this is in the right area of this forum but heres the question I have a div scrollbar exampe: <DIV style='position: absolute; left: 30; top: 10; color: #000000; background-color: #FFFFFF; border: solid 10px; border-color: #FFFFFF; width: 690px; height: 1300px; overflow: auto; '> I have a picture blog. I keep adding pictures to it, and when i get too many , it just creates a scroll. I dont want a scroll, but I dont wanna have to keep changing the "height" everytime i put more pictures in. I am kinda lost in how to word this question... maybe somebody can help me. thank you if you do. Hi all, I need help with scrollbars: Is it possible to use an image instead of the standard scrollbar (see http://www.esaurome.com/bikini%20IT.html, the 2 fishes and the wave). Please HELP ME!!! Hi, i was made web, but have a problem. I attach foto and you can see problem. How insert a scrollbar? sorry for my english language Ok i want just a plain html not php or css code but an html code for a scrollbar. I cant find one that works. Please and thank you Hello all! I am messing around with some website ideas in my head, trying to work out what is possible and what is not, and I was wondering if it is possible to create interactions between html and the website's vertical scrollbar. For example to make an image appear when the up or down scroll button is pressed...etc. Or to make a flash animation play when the scrollbar buttons are pressed. I am not too sure what I am going to use this for yet, but I have looked around online and have yet to find anything about scrollbar interaction... Any information or further reading would be helpful and very much appreciated!! Thank you!! |