Archivado/IRFineArts_Web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Arreglado problema con el scroll vertical hecho en JS.

Browse Source 
git-svn-id: https://192.168.0.254/svn/Proyectos.IRFineArts_Web/trunk@24 88734cd7-4cec-0b49-a19b-cefba6b9d6f8
This commit is contained in:
David Arranz 2011-05-19 18:10:17 +00:00
parent 43ebd65ed6
commit 637238fd0c
3 changed files with 70 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
estilos.css
View File

@ -340,7 +340,7 @@ ul.miniaturas li span {
#scroll-pane { #scroll-pane {
float:left; float:left;
overflow: auto; overflow: hidden;
width: 50%; width: 50%;
height:450px; height:450px;
position:relative; position:relative;

133
js/vertical.slider.js
View File

@ -1,66 +1,67 @@
$(function() { //$(function() {
//change the main div to overflow-hidden as we can use the slider now function scrollV() {
$('#scroll-pane').css('overflow','hidden'); //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 //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...
{ 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 var proportion = difference / $('#scroll-content').height();//eg 200px/500px
handleHeight -= handleHeight%2; 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 $("#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({ //set up the slider
orientation: 'vertical', $('#slider-vertical').slider({
min: 0, orientation: 'vertical',
max: 100, min: 0,
value: 100, max: 100,
slide: function(event, ui) {//used so the content scrolls when the slider is dragged value: 100,
var topValue = -((100-ui.value)*difference/100); slide: function(event, ui) {//used so the content scrolls when the slider is dragged
$('#scroll-content').css({top:topValue});//move the top up (negative value) by the percentage the slider has been moved times the difference in height 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); change: function(event, ui) {//used so the content scrolls when the slider is changed by a click outside the handle or by the mousewheel
$('#scroll-content').css({top:topValue});//move the top up (negative value) by the percentage the slider has been moved times the difference in height 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}); //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 origSliderHeight = $("#slider-vertical").height();//read the original slider height
var sliderMargin = (origSliderHeight - sliderHeight)*0.5;//so the slider needs to have both top and bottom margins equal to half the difference var sliderHeight = origSliderHeight - handleHeight ;//the height through which the handle can move needs to be the original height minus the handle height
$(".ui-slider").css({height:sliderHeight,'margin-top':sliderMargin});//set the slider height and margins 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
}//end if
$(".ui-slider").click(function(event){//stop any clicks on the slider propagating through to the code below
event.stopPropagation(); $(".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 $("#slider-wrap").click(function(event){//clicks on the wrap outside the slider range
var clickValue = (event.pageY-offsetTop)*100/$(this).height();//find the click point, subtract the offset, and calculate percentage of the slider clicked var offsetTop = $(this).offset().top;//read the offset of the scroll pane
$("#slider-vertical").slider("value", 100-clickValue);//set the new value of the slider 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){ //additional code for mousewheel
var speed = 5; $("#scroll-pane,#slider-wrap").mousewheel(function(event, delta){
var sliderVal = $("#slider-vertical").slider("value");//read current value of the slider var speed = 5;
var sliderVal = $("#slider-vertical").slider("value");//read current value of the slider
sliderVal += (delta*speed);//increment the current value
sliderVal += (delta*speed);//increment the current value
$("#slider-vertical").slider("value", sliderVal);//and set the new value of the slider
$("#slider-vertical").slider("value", sliderVal);//and set the new value of the slider
event.preventDefault();//stop any default behaviour
}); event.preventDefault();//stop any default behaviour
});
});
};

4
prensa.php
View File

@ -8,7 +8,7 @@
<script type="text/javascript" src="/js/jquery.mousewheel.min.js"></script> <script type="text/javascript" src="/js/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="/js/vertical.slider.js"></script> <script type="text/javascript" src="/js/vertical.slider.js"></script>
</head> </head>
<body> <body onload="scrollV()">
<div id="vertical"></div> <div id="vertical"></div>
<div id="container"> <div id="container">
<div id="header"> <div id="header">
@ -32,7 +32,7 @@
<h2>SUBASTAS SIGLO XXI</h2> <h2>SUBASTAS SIGLO XXI</h2>
<p class="fecha">Noviembre de 2009</p> <p class="fecha">Noviembre de 2009</p>
<p><a target="_blank" href="reportajes/subastasXXI-1.jpg"><img src="reportajes/subastasXXI-1_small.jpg" alt="Subastas Siglo XXI Noviembre 2009"/></a>&nbsp;&nbsp;&nbsp;<a target="_blank" href="reportajes/subastasXXI-2.jpg"><img src="reportajes/subastasXXI-2_small.jpg" alt="Subastas Siglo XXI Noviembre 2009"/></a></p> <p><a target="_blank" href="reportajes/subastasXXI-1.jpg"><img src="reportajes/subastasXXI-1_small.jpg" alt="Subastas Siglo XXI Noviembre 2009"/></a>&nbsp;&nbsp;&nbsp;<a target="_blank" href="reportajes/subastasXXI-2.jpg"><img src="reportajes/subastasXXI-2_small.jpg" alt="Subastas Siglo XXI Noviembre 2009"/></a></p>
<h2>Reportaje en revista "Descubrir el arte"</h2> <h2>Reportaje en revista 'Descubrir el arte'</h2>
<p class="fecha">Noviembre de 2009</p> <p class="fecha">Noviembre de 2009</p>
<p><a target="_blank" href="reportajes/reportaje-descubrir-el-arte-1.jpg"><img src="reportajes/reportaje-descubrir-el-arte-1_small.jpg" alt="Reportaje en revista 'Descubrir el arte'"/></a>&nbsp;&nbsp;&nbsp;<a target="_blank" href="reportajes/reportaje-descubrir-el-arte-2.jpg"><img src="reportajes/reportaje-descubrir-el-arte-2_small.jpg" alt="Reportaje en revista 'Descubrir el arte'"/></a></p> <p><a target="_blank" href="reportajes/reportaje-descubrir-el-arte-1.jpg"><img src="reportajes/reportaje-descubrir-el-arte-1_small.jpg" alt="Reportaje en revista 'Descubrir el arte'"/></a>&nbsp;&nbsp;&nbsp;<a target="_blank" href="reportajes/reportaje-descubrir-el-arte-2.jpg"><img src="reportajes/reportaje-descubrir-el-arte-2_small.jpg" alt="Reportaje en revista 'Descubrir el arte'"/></a></p>
<br/> <br/>