Vinvar

Oke, I found out that with $('#slider-vertical').slider("destroy"); I could destroy the slider. With $("#scroll-pane").after(''); I could 'delete' my (temporary) div tags. All I need to do now is delete the shell of the slider. That is $("#slider-wrap"). But the following are not working: $("#slider-wrap").empty() // then the slider will not be created (again). $("#slider-wrap").height(0); // the shell is compressed to 0px (you see a small line, only), but present still. Anybody a suggestion how to delete the $("#slider-wrap"), please?

Let me first say, thanks for the suggestion and support! :D But... It does not work and I doubt whether this is the solution, also. Because in your solution the slider is only added if there is not any. But some pages contains content which need the slider and some pages does not. As you do not remove the slider for pages that does not need it, the slider is still working. Problem: you can scroll the content whereas that is not necessary. See http://www.starlitsea.com/test/index.php -> and click on 'press'. There is only one line here saying 'Presskit'. No need for the slider to be there.

That is because I do not want the 'normal' scrollbar. I do want the black scrolbar as it is now. As you cannot reshape the scrollbar, I have to use this script.

I have a page in which the content is dynamically loaded. ==> function getDATA(source, divID) Some of my content covers more than my div height. If so, a slider is added. ==> function newScrollbar() This works perfectly! As I am not a great javascript programmer, I leant this function newScrollbar(). The script did not contain a function removeScrollbar(). I have to call this function when new content is loaded (and there was a slider active in the content that is replaced). Otherwise a (second) scrollbar is added... Could I make someone happy when I ask if you would write the function removeScrolbar(), please? Certainly I would be happy. An example of how the script is functioning at http://www.starlitsea.com/test/index.php (click multiple times on 'home' and you see the problem). remote = false; if (window.XMLHttpRequest) { remote = new XMLHttpRequest(); } else if (window.ActiveXObject) { //Thanks, Microsoft. try { remote = new ActiveXObject("MSXML2.XMLHTTP"); } catch(exception2) { try { remote = new ActiveXObject("Microsoft.XMLHTTP"); } catch (error) { alert("Your browser is most likely out of date. Why not try updating?"); } } } function getData(source, divId) { if (remote) { var div = document.getElementById(divId); remote.open("GET", source); remote.onreadystatechange = function() { if (remote.readyState === 4 && remote.status == 200) { div.innerHTML = remote.responseText; // tot hier is het script om <div> te laden // nu dynamisch de 'scollbar'-slider toevoegen. // remove old scollbar (if any) removeScrollbar(); // add scrollbar newScrollbar(); } } remote.send(null); } } function removeScrollbar() { } function newScrollbar() { $(function() { //change the main div to overflow-hidden as we can use the slider now $('#scroll-pane').css('overflow','hidden'); //compare the height of the scroll content to the scroll pane to see if we need a scrollbar var difference = $('#scroll-content').height()-$('#scroll-pane').height();//eg it's 200px longer if(difference > 0) { //if the scrollbar is needed, set it up... var proportion = difference / $('#scroll-content').height();//eg 200px/500px var handleHeight = Math.round((1-proportion)*$('#scroll-pane').height());//set the proportional height - round it to make sure everything adds up correctly later on handleHeight -= handleHeight%2; $("#scroll-pane").after('<\div id="slider-wrap"><\div id="slider-vertical"><\/div><\/div>');//append the necessary divs so they're only there if needed $("#slider-wrap").height($("#scroll-pane").height());//set the height of the slider bar to that of the scroll pane //set up the slider $('#slider-vertical').slider( { orientation: 'vertical', min: 0, max: 100, value: 100, slide: function(event, ui) {//used so the content scrolls when the slider is dragged var topValue = -((100-ui.value)*difference/100); $('#scroll-content').css({top:topValue});//move the top up (negative value) by the percentage the slider has been moved times the difference in height }, change: function(event, ui) {//used so the content scrolls when the slider is changed by a click outside the handle or by the mousewheel var topValue = -((100-ui.value)*difference/100); $('#scroll-content').css({top:topValue});//move the top up (negative value) by the percentage the slider has been moved times the difference in height } }); //set the handle height and bottom margin so the middle of the handle is in line with the slider $(".ui-slider-handle").css({height:handleHeight,'margin-bottom':-0.5*handleHeight}); var origSliderHeight = $("#slider-vertical").height();//read the original slider height var sliderHeight = origSliderHeight - handleHeight ;//the height through which the handle can move needs to be the original height minus the handle height var sliderMargin = (origSliderHeight - sliderHeight)*0.5;//so the slider needs to have both top and bottom margins equal to half the difference $(".ui-slider").css({height:sliderHeight,'margin-top':sliderMargin});//set the slider height and margins } //end if //code to handle clicks outside the slider handle $(".ui-slider").click(function(event){//stop any clicks on the slider propagating through to the code below event.stopPropagation(); }); $("#slider-wrap").click(function(event){//clicks on the wrap outside the slider range var offsetTop = $(this).offset().top;//read the offset of the scroll pane var clickValue = (event.pageY-offsetTop)*100/$(this).height();//find the click point, subtract the offset, and calculate percentage of the slider clicked $("#slider-vertical").slider("value", 100-clickValue);//set the new value of the slider }); //additional code for mousewheel $("#scroll-pane,#slider-wrap").mousewheel(function(event, delta){ var speed = 5; var sliderVal = $("#slider-vertical").slider("value");//read current value of the slider sliderVal += (delta*speed);//increment the current value $("#slider-vertical").slider("value", sliderVal);//and set the new value of the slider event.preventDefault();//stop any default behaviour }); }); }

Thx, pornophobic! I have it working now. As I use a modifed js slider as scrollbar, the only problem is the removal / add new of the slider in 'starlitsea.com/test/js/load-div.js'. (See http://www.starlitsea.com/test/index(php).php and click multiple times on 'home') But this problem is for an other forum if I do not find the solution . @xyph: thx for the suggestion. As pornophobic says, my page has five links only. Still a good suggestion. First I want to fix the slider problem and maybe then I shall pay attention to your suggestion.

Hello, I once (anno 2002) build a site using php. I used php in combination with a <iframe>. If a user clicked on a link, the content of the link was loaded in the iframe. As for my new site I want to use the same trick but the <iframe> tag is being replaced. Therefore I tried to build it within a <div> tag. Hereby my code. (This is a reduced version of my code on http://starlitsea.com/test/index(php).php?page=link1. Normally I have five links but to save lines I reduced the total to 2 in this example.) <?php header("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1 header("Expires: Sat, 26 Jul 1997 05:00:00 GMT"); // Date in the past //Better use $_GET instead of http_get_vars, is deprecated if(isset($_GET['page'])) { $page = $_GET['page']; } else { $page = 'default'; } switch ($page) { case 'link1': $content = file_get_contents('./content/lorem_ipsum.html'); //Use @ to supress warnings when the file is not found $pageTitle = 'Pagina 1'; break; case 'link2': $content = @file_get_contents("./content/presskit.html"); $pageTitle = 'Pagina 2'; break; default: //If an invalid page is requested: show page 1 (link1) $content = include("/content/lorem_ipsum.html"); $pageTitle = 'Pagina 1'; } ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title><?php echo $pageTitle; ?></title> <!-- Javascript to center main item on page --> <script type="text/javascript" src="./js/screensize.js"></script> <!-- Javascripts for slider/scrollbar in main item --> <script type="text/javascript" src="./js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="./js/jquery-ui-1.8.2.custom.min.js"></script> <script type="text/javascript" src="./js/jquery.mousewheel.min.js"></script> <script type="text/javascript" src="./js/tabcontent.js"> </script> <!-- If linking to an external css stylesheet, use link rel --> <link rel="stylesheet" type="text/css" href="css/ie7.css" media="screen"></link> </head> <body> <!-- Apparentely this has to be in the <body> tag --> <!-- Otherwise it does not work in firefox and chrome --> <script type="text/javascript" src="./js/vertical_slider.js"></script> <!-- Main item --> <div id="content"> <!-- Prikbord: main --> <div id="scroll-pane"> <div id="scroll-content"> <?php echo $content; ?> </div> </div> <!-- Main item: menu --> <div class="prikbord_main_menu"> <div class="prikbord_main_menu_home" style="background-color: red;"> <p><a href="?page=link1">Home</a></p> </div> <div class="prikbord_main_menu_menu2" style="background-color: yellow;"> <p><a href="?page=link2">Link 2</a></p> </div> </div> </div> </body> </html> It works, that is not the problem. It is working by refreshes the total page and that is the problem. (In IE and chrome) the refresh makes the site 'flicker' as all images are reloaded. I was wondering if there is a way to reload the <div id="scroll-pane"> without the phased <iframe> tag, only?