supreme0r
Threadersteller
Dabei seit: 19.01.2009
Ort: wien
Alter: -
Geschlecht: -
|
Verfasst Fr 20.03.2009 11:28
Titel kleines java - tiny - scroll problem |
  |
|
liebe gemeinde 
hätte ein kleines problem bzw. bräuchte ich als printler, und absoluter coding anfänger einen kleinen ratschlag!
ich bin gerade dabei eine kleine portfolioseite zu basteln, für die ich mir im internet ein vertikal-scrolling script gezogen habe und das gerade [versuche] in meine site einzubauen 
aufgebaut is das ganze so, das man im fenster eine ganz normale text navigation hat, mit der man direkt zu den textbereichen springen kann, sowie zwei pfeilen mit denen man 'flüssig' durch die seite scrollen kann.
grundsätzlich funktioniert das flüssige scrollen ohne probleme, nur bei der textnavigation tritt ein interessantes phänomen auf:
dadurch, dass das skript so programmiert war, das der content bereich relativ weit oben auf der seite war (ca. 50px vom oberen rand) hab ich mir diesen bereich per css nach unten geschoben (per margin)!
die grundsätzliche positionierung passt jetzt, nur wenn ich einen link der textnav klicke, der mich direkt zB zu bereich 5 bringen soll, "fährt" er dorthin und verschiebt dann anschließend die gesamte seite wieder nach oben.
beim 'normalen' scrollen per mouse und den nav-pfeilen tritt dieses phänomen allerdings nicht auf.
genau das selbe problem tritt auch auf, wenn ich in den textbereichen einen anker zurück zur navigation einfüge, und den betätige, scrollt er wunderschön zurück zum anfang und verschienbt anschließend ruckartig die seite nach oben!
ich nehme an das irgendwo im skript noch der befehl steckt, das die grundsätzliche positionierung eben oben am rand steckt!
ich würde mich wirklich freuen wenn ihr mir helfen könntet!
anbei natürlich noch der css- und js-code!
vielen dank im voraus!
java:
| Code: | window.onload = function() {
HtinyScrolling.init(); scrollTips.init();
}
var HtinyScrolling = {
speed : 50, //set here the scroll speed: when this value increase, the speed decrease.
maxStep: 150, //set here the "uniform motion" step for long distances
brakeK: 3, //set here the coefficient of slowing down
hash:null,
currentBlock:null,
requestedX:0,
init: function() {
var lnks = document.getElementsByTagName('a');
for(var i = 0, lnk; lnk = lnks[i]; i++) {
if ((lnk.href && lnk.href.indexOf('#') != -1) && ( (lnk.pathname == location.pathname) ||
('/'+lnk.pathname == location.pathname) ) && (lnk.search == location.search)) {
addEvent(lnk,'click',HtinyScrolling.initScroll,false);
lnk.onclick=function(){return false;} // Safari
}
}
},
getTarget: function(target) {
while(target.tagName.toLowerCase() != 'a')
target = target.parentNode;
return target;
},
getElementXpos: function(el){
var x = 0;
while(el.offsetParent){
x += el.offsetLeft;
el = el.offsetParent;
} return x;
},
getScrollLeft: function(){
if(document.all) return (document.documentElement.scrollLeft) ? document.documentElement.scrollLeft : document.body.scrollLeft;
else return window.pageXOffset;
},
getWindowWidth: function(){
if (window.innerWidth) return window.innerWidth;
if(document.documentElement && document.documentElement.clientWidth) return document.documentElement.clientWidth;
},
getDocumentWidth: function(){
if (document.width) return document.width;
if(document.body.offsetWidth) return document.body.offsetWidth;
},
initScroll: function(e){
var targ;
if (!e) var e = window.event;
if (e.target) targ = e.target;
else if (e.srcElement) targ = e.srcElement;
targ = HtinyScrolling.getTarget(targ); //a fix by Skid X
HtinyScrolling.hash = targ.href.substr(targ.href.indexOf('#')+1,targ.href.length);
HtinyScrolling.currentBlock = document.getElementById(HtinyScrolling.hash);
if(!HtinyScrolling.currentBlock) return;
HtinyScrolling.requestedX = HtinyScrolling.getElementXpos(HtinyScrolling.currentBlock);
HtinyScrolling.scroll(targ);
return false;
},
scroll: function(targ){
var left = HtinyScrolling.getScrollLeft();
if(HtinyScrolling.requestedX > left) {
var endDistance = Math.round((HtinyScrolling.getDocumentWidth() - (left + HtinyScrolling.getWindowWidth())) / HtinyScrolling.brakeK);
endDistance = Math.min(Math.round((HtinyScrolling.requestedX-left)/ HtinyScrolling.brakeK), endDistance);
var offset = Math.max(2, Math.min(endDistance, HtinyScrolling.maxStep));
} else { var offset = - Math.min(Math.abs(Math.round((HtinyScrolling.requestedX-left)/ HtinyScrolling.brakeK)), HtinyScrolling.maxStep);
} window.scrollTo(left + offset, 0);
if(Math.abs(left-HtinyScrolling.requestedX) <= 1 || HtinyScrolling.getScrollLeft() == left) {
window.scrollTo(HtinyScrolling.requestedX, 0);
if(typeof XULDocument != 'undefined') {
location.hash = HtinyScrolling.hash;
}
//optional instructions: you can add an effect to enlight after the scroll the selected section.
//uncomment this line below if you want to change the opacity:
mark.change_opacity(HtinyScrolling.hash);
//you can also call the function "mark.change_colors(HtinyScrolling.hash, fps, (duration in sec), #(color in hex), #(color in hex))" to change background color of selected section
HtinyScrolling.hash = null;
} else setTimeout(HtinyScrolling.scroll,HtinyScrolling.speed);
}
}
/* the mouse scrolling doesn't work with Opera, that hasn't a event associated to the mouse wheel */
var scrollTips = {
dx : null,
init : function() {
if (window.addEventListener) {
window.addEventListener("DOMMouseScroll", this.mouseScroll, false);
} else document.attachEvent("onmousewheel", this.mouseScroll);
var left = document.getElementById('left');
addEvent(left,'mouseover', function() {this.dx=setInterval('scrollTips.arrowScroll(0)',100);return false;});
addEvent(left,'mouseout', function() { clearInterval(this.dx); return false;});
var right = document.getElementById('right');
addEvent(right,'mouseover', function() {this.dx=setInterval('scrollTips.arrowScroll(1)',100);return false;});
addEvent(right,'mouseout', function() { clearInterval(this.dx); return false;});
},
mouseScroll : function(e) {
if (!e) var e = window.event;
if (e.wheelDelta <= 0 || e.detail>=0){
window.scrollBy(80,0);
} else window.scrollBy(-80,0) ;
},
arrowScroll: function(val) {
if(val==1) {
window.scrollBy(70,0);
} else {
window.scrollBy(-70,0)
}
}
}
var mark = { //first four functions are based on The Fade Anything Technique by Adam Michela
valop : 100,
req : 0,
make_hex: function(r,g,b) {
r = r.toString(16); if (r.length == 1) r = '0' + r;
g = g.toString(16); if (g.length == 1) g = '0' + g;
b = b.toString(16); if (b.length == 1) b = '0' + b;
return "#" + r + g + b;
},
change_colors: function(id, fps, duration, from, to) {
var frames = Math.round(fps * (duration / 1000));
var interval = duration / frames;
var delay = interval;
var frame = 0;
if (from.length < 7) from += from.substr(1,3);
if (to.length < 7) to += to.substr(1,3);
var rf = parseInt(from.substr(1,2),16);
var gf = parseInt(from.substr(3,2),16);
var bf = parseInt(from.substr(5,2),16);
var rt = parseInt(to.substr(1,2),16);
var gt = parseInt(to.substr(3,2),16);
var bt = parseInt(to.substr(5,2),16);
var r,g,b,h;
while (frame < frames) {
r = Math.floor(rf * ((frames-frame)/frames) + rt * (frame/frames));
g = Math.floor(gf * ((frames-frame)/frames) + gt * (frame/frames));
b = Math.floor(bf * ((frames-frame)/frames) + bt * (frame/frames));
h = this.make_hex(r,g,b);
setTimeout("mark.set_img_bgcolor('"+id+"','"+h+"')", delay);
frame++;
delay = interval * frame;
}
setTimeout("mark.set_img_bgcolor('"+id+"','"+to+"')", delay);
},
set_img_bgcolor: function(id, c) {
if(document.getElementById(id).getElementsByTagName('img')[0]) {
var o = document.getElementById(id).getElementsByTagName('img')[0];
o.style.backgroundColor = c;} else return;
},
get_img_bgcolor: function(id) {
var o = document.getElementById(id).getElementsByTagName('img')[0];
while(o) {
var c;
if (window.getComputedStyle) c = window.getComputedStyle(o,null).getPropertyValue("background-color");
if (o.currentStyle) c = o.currentStyle.backgroundColor;
if ((c != "" && c != "transparent") || o.tagName == "BODY") { break; }
o = o.parentNode;
}
if (c == undefined || c == "" || c == "transparent") c = "#FFFFFF";
var rgb = c.match(/rgb\s*\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)/);
if (rgb) c = this.make_hex(parseInt(rgb[1]),parseInt(rgb[2]),parseInt(rgb[3]));
return c;
},
change_opacity: function(el) {
if(!(/^menu/.test(el))) {
var post = document.getElementById(el);
if (mark.valop > 10 && mark.req == 0) {
mark.valop -= 10;
mark.set_opacity(post,mark.valop);
if(mark.valop == 10) {mark.req = 1};
} else
if (mark.valop < 100 && mark.req == 1) {
mark.valop += 10;
mark.set_opacity(post,mark.valop);
if(mark.valop == 100) {mark.req = 2};
}
if (mark.req != 2){
setTimeout("mark.change_opacity('"+el+"')", 50);
}
else { mark.set_opacity(post,9999); mark.req = 0; return;}
}
},
set_opacity: function(post,val){
post.style.opacity='0.' + val ;
post.style.filter="alpha(opacity=" + val + ")";
}
}
function addEvent( obj, type, fn ) {
if (obj.addEventListener)
obj.addEventListener( type, fn, false );
else if (obj.attachEvent) {
obj["e"+type+fn] = fn;
obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
obj.attachEvent( "on"+type, obj[type+fn] );
}
}
function removeEvent( obj, type, fn ) {
if (obj.removeEventListener)
obj.removeEventListener( type, fn, false );
else if (obj.detachEvent) {
obj.detachEvent( "on"+type, obj[type+fn] );
obj[type+fn] = null;
obj["e"+type+fn] = null;
}
} |
css:
| Code: | body {
margin:0;
padding:0;
width: 5000px;
height: 509px;
color:#ffffff;
font: 62.5%/150% Verdana;
background: url(../img/bg.gif) repeat-x left top;
}
h2 {font-size: 1.1em}
h3 {font-size: 1.4em}
hr, .hide {
position:absolute;
top:0;
left:-9000px;
}
#page {
height: 750px;
margin: 300px 0 0 0;
}
#leftsider {
padding: 80px 0 0 50px;
float: left;
width:300px;
}
#leftsider h1 {font-size: 2.0em;}
#menu {
margin-top: 60px;
padding-left: 6px;
}
#menu ul {
list-style: url(../img/rightsmall.png);
}
#menu a{
text-decoration: none;
color: #22b1e1;
}
#menu a:hover{
border-bottom: 1px solid #22b1e1;
}
#content {
margin: 100px 0 0 10px;
float: left;
font-size: 1.1em;
}
#content h4 {font-size: 1.2em;}
.par {
margin: 0px 50px 0 0px;
padding-left: 50px;
float: left;
width: 315px;
height: 300px;
}
.alt {/* modify this to add style to alternate sections*/}
#note {
margin-top:10px;
}
p.secbot a{
margin-top: -5px;
padding-left: 15px;
border-bottom:none;
color: #22b1e1;
background: url(../img/leftsmall.png) no-repeat scroll left center;
text-decoration:none;
font-size:0.9em;
}
p.secbot a:hover {
border-bottom:1px solid #22b1e1;
}
#arrows {
position: fixed;
top: 700px;
left: 700px;
width: 90px;
height: 30px;
cursor: pointer;
}
#arrows ul {
margin: 0;
padding: 0;
list-style:none;
}
#arrows ul li {
margin: 0;
padding: 0;
display:inline;
width: 40px;
height: 30px;
}
#arrows ul li a{
margin-right: 5px;
float: left;
display: block;
width: 40px;
height: 30px;
overflow: hidden;
cursor: pointer;
font-size: 50em;
text-indent: -9000px;
}
#arrows ul #left a {background: transparent url(../img/leftbig.png) no-repeat;}
#arrows ul #right a{background: transparent url(../img/rightbig.png) no-repeat;}
#rightsider {
padding: 0 10px 0px 0;
}
#rightsider a{
color: #ffffff;
text-decoration: none;
} |
lg,
michl
Zuletzt bearbeitet von supreme0r am Fr 20.03.2009 14:55, insgesamt 1-mal bearbeitet
|
|
Willkommen auf dem Portal für Mediengestalter
