Remove slider: fullfulling function

[Vinvar]

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
	});
});
}

[efficacious]

why can't you just set the containing div to overflow:auto; and set the width/height and allow the browser to handle the scrolling?

[Vinvar]

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.

[efficacious]

i gotcha, IE i believe allows styling of scrollbars... but i don't think some of the others do.

 

what if you did a check on the "main div" to see if the overflow property has already been changed to hidden

 

if it has then a scroll bar has already been created and thus you don't need to call the newscrollbar() function again.

[efficacious]

something like this perhaps?

 

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.				

			//Verify that a scrollbar has not already been created.
			var MainDiv = document.getElementById('scroll-pane');
			if(MainDiv.style.overflow != 'hidden')
			{
				// add scrollbar				
				newScrollbar();
			}
		}		
	}		
	remote.send(null);	
}
}

 

untested /\

[Vinvar]

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.

[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?