Antworten auf deine Fragen:
Neues Thema erstellen

tiny scrollbar zerschießt website

susiH

Aktives Mitglied

hallo,

ich möchte auf meiner webseite den content mit einer anderen scrollbar scrollen, als mit der üblichen. dazu wollte ich die tiny scrollbar benutzen (http://baijs.nl/tinyscrollbar/)

der content wird auch gescrollt. aber die positionen sind falsch und es werden nur 4 reihen beim scrollen des rasters angezeigt, obwohl es 7 sind.

so soll es aussehen... außer dass neben dem raster dieser scrollbalken ist




und so siehts wirklich aus




quellcode, css und js kann man sich alles angucken, dann wirds hier nicht so unübersichtlich.

danke euch schonmal für eure mühe
 
Zuletzt bearbeitet:

susiH

Aktives Mitglied

AW: tiny scrollbar zerschießt website

ok, das layout habe ich wieder herstellen können, aber nun wird die lightbox nicht mehr angezeigt.
weiß einer woran sowas liegen kann?


hier mal der code aus der index.html
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>

<link rel="stylesheet" href="style.css" type="text/css" />

    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="js/jquery.tinyscrollbar.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function(){
            $('#scrollbar1').tinyscrollbar();    
        });
    </script>    

</head>
<body>

<div id="hintergrund">
<img src="images/footer.png" width="100%" alt="" />
</div>

<div id="content">  <!-- ANFANG CONTENT -->

<!-- navigation -->
<div id="navigation">
<img src="images/home.png" alt=""/>
<img src="images/logodesign.png" alt=""/>
<img src="images/illustrationen.png" alt=""/>
<img src="images/webdesign.png" alt=""/>
<img src="images/printdesign.png" alt=""/>
<img src="images/3d.png" alt=""/>
<img src="images/bildbearbeitung.png" alt=""/>
</div>


<div id="raster">
    <div id="scrollbar1">
        <div class="scrollbar">
            <div class="track">
                    <div class="thumb">
                    <div class="end">
      </div></div></div></div>
        <div class="viewport">
            <div class="overview">
<img src="images/bildchen.png" alt=""/>
<img src="images/bildchen.png" alt=""/>
<img src="images/bildchen.png" alt=""/>
<img src="images/bildchen.png" alt=""/>

<img src="images/bildchen.png" alt=""/>
<img src="images/bildchen.png" alt=""/>
<img src="images/bildchen.png" alt=""/>
<img src="images/bildchen.png" alt=""/>

<img src="images/bildchen.png" alt=""/>
<img src="images/bildchen.png" alt=""/>
<img src="images/bildchen.png" alt=""/>
<img src="images/bildchen.png" alt=""/>

<img src="images/bildchen.png" alt=""/>
<img src="images/bildchen.png" alt=""/>
<img src="images/bildchen.png" alt=""/>
<img src="images/bildchen.png" alt=""/>

<img src="images/bildchen.png" alt=""/>
<img src="images/bildchen.png" alt=""/>
<img src="images/bildchen.png" alt=""/>
<img src="images/bildchen.png" alt=""/>

<img src="images/bildchen.png" alt=""/>
<img src="images/bildchen.png" alt=""/>
<img src="images/bildchen.png" alt=""/>
<img src="images/bildchen.png" alt=""/>

<img src="images/bildchen.png" alt=""/>
<img src="images/bildchen.png" alt=""/>
<img src="images/bildchen.png" alt=""/>
<img src="images/bildchen.png" alt=""/>

            </div><!-- ENDE overview -->
        </div><!-- ENDE viewport -->
    </div>
</div><!-- ENDE raster -->
</div> <!-- ENDE CONTENT -->
</body>
</html>



und der code aus der css
HTML:
body, html
    {
    background-image:url(images/bg_site.jpg);
    background-repeat:repeat;
    overflow:hidden;
    }
    
#hintergrund
    {
    z-index:2;
    position:absolute;
    bottom:0px;
      left:0;
    width:100%;
    }
    
#content
    {
    position: absolute;
    top: 4px;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    overflow: auto;
    }
    
#navigation    
    {
    width:928px;
    size:50%;
    margin-top:40px;
    margin-left:auto;
    margin-right:auto;
    }
    
#raster
    {
    width:1000px;
    height:600px;
    margin-top:80px;
    margin-left:auto;
    margin-right:auto;
    }

#scrollbar1 
    { 
    width: 928px; 
    height:300px; 
    margin-left: 50px
    }
    
#scrollbar1 .viewport 
    { 
    width: 1000px; 
    height: 300px; 
    overflow:hidden;
    position: relative; 
    }

#scrollbar1 .overview 
    { 
    width:1000px;
    height:300px;
    background-repeat:repeat-y;
    list-style: none; 
    position: absolute; 
    left: 0; 
    top: 0; 
    padding: 0; 
    margin: 0; 
    }
    
#scrollbar1 .scrollbar{ background: transparent url(images/bg-scrollbar-track-y.png) no-repeat 0 0; position: relative; background-position: 0 0; float: right; width: 15px; }
#scrollbar1 .track { background: transparent url(images/bg-scrollbar-trackend-y.png) no-repeat 0 100%; height: 100%; width:13px; position: relative; padding: 0 1px; }
#scrollbar1 .thumb {
    background: transparent url(images/bg-scrollbar-thumb-y.png) no-repeat 50% 100%;
    height: 20px;
    width: 25px;
    cursor: pointer;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 5px;
}
#scrollbar1 .thumb .end { background: transparent url(images/bg-scrollbar-thumb-y.png) no-repeat 50% 0; overflow: hidden; height: 5px; width: 25px; }
#scrollbar1 .disable { display: none; }
 
Zuletzt bearbeitet:

CayZ

Pixel Slider

AW: tiny scrollbar zerschießt website

Ich sehe gar nichts, wenn ich auf der Seite bin...die ist komplett leer.
versuch doch mal ein anderes Galeriescript. z.B.: die von Highslide...vllt geht es ja dann.
Die highslide Galerie ist ähnlich der von Lightbox. Aber du hast glaube mehr möglichkeiten sie deinem Layout anzupassen. Schau einfach mal unter:

http://highslide.com

ich habe die Galerie auch auf der abercrombie HP benutzt....und noch mit dem imageflow kombiniert.
 

susiH

Aktives Mitglied

AW: tiny scrollbar zerschießt website

also wenn ich drauf gehe, seh ich alles nur halt die scrollbar nicht. hast du ne ahnung, warum sowas passiert?
 

CayZ

Pixel Slider

AW: tiny scrollbar zerschießt website

Also ich sehe nur ein weissen Bildschirm bei dem Link. =)
Egal...hast du auch die ganzen Bilder die für die scrollbar benötigt werden im richtigen ordner? Evtl. in den Ordner verschieben wohin sie laut deinem Script gehören oder du änderst den Pfad im script.
Manchmal sind es echt kleine Dinge nur. ein falscher Buchstabe oder so. Am besten du schaust nochmal im code von dem script nach ob auch alle Bilder vorhanden sind.
Dadurch das ich die Seite nicht angezeigt bekomme, kann ich dir leider nicht sagen ob alle Bilder auch auf dem Webspace am richtigen Ort sind.

manchmal liegt es auch an der schreibweise. vermeide umlaute...bindestriche leerzeichen und so (in dateinamen). am besten mit solchen "unterstrichen" und halt "ae = ä" usw. arbeiten...
 
Zuletzt bearbeitet:

susiH

Aktives Mitglied

AW: tiny scrollbar zerschießt website

ok ich habs hingekriegt...

hier mal der code für alle, die dasselbe problem haben

die index.html
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>

<link rel="stylesheet" href="style.css" type="text/css" />

    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="js/jquery.tinyscrollbar.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('#scrollbar1').tinyscrollbar();    
        });
    </script>    
</head>
<body>

<div id="hintergrund">
<img src="images/footer.png" width="100%" alt="" />
</div>

<div id="content">  <!-- ANFANG CONTENT -->

<!-- navigation -->
<div id="navigation">
<img src="images/home.png" alt=""/>
<img src="images/logodesign.png" alt=""/>
<img src="images/illustrationen.png" alt=""/>
<img src="images/webdesign.png" alt=""/>
<img src="images/printdesign.png" alt=""/>
<img src="images/3d.png" alt=""/>
<img src="images/bildbearbeitung.png" alt=""/>
</div>


<div id="raster">
    <div id="scrollbar1">
        <div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div>
        <div class="viewport">
             <div class="overview">
<img src="images/bildchen.png" alt=""/>
<img src="images/bildchen.png" alt=""/>
<img src="images/bildchen.png" alt=""/>
<img src="images/bildchen.png" alt=""/>

<img src="images/bildchen.png" alt=""/>
<img src="images/bildchen.png" alt=""/>
<img src="images/bildchen.png" alt=""/>
<img src="images/bildchen.png" alt=""/>

<img src="images/bildchen.png" alt=""/>
<img src="images/bildchen.png" alt=""/>
<img src="images/bildchen.png" alt=""/>
<img src="images/bildchen.png" alt=""/>

<img src="images/bildchen.png" alt=""/>
<img src="images/bildchen.png" alt=""/>
<img src="images/bildchen.png" alt=""/>
<img src="images/bildchen.png" alt=""/>

<img src="images/bildchen.png" alt=""/>
<img src="images/bildchen.png" alt=""/>
<img src="images/bildchen.png" alt=""/>
<img src="images/bildchen.png" alt=""/>

<img src="images/bildchen.png" alt=""/>
<img src="images/bildchen.png" alt=""/>
<img src="images/bildchen.png" alt=""/>
<img src="images/bildchen.png" alt=""/>

<img src="images/bildchen.png" alt=""/>
<img src="images/bildchen.png" alt=""/>
<img src="images/bildchen.png" alt=""/>
<img src="images/bildchen.png" alt=""/>

            </div>
        </div>

    </div>    
    </div><!-- ENDE raster -->
</div> <!-- ENDE CONTENT -->
</body>
</html>

die css
HTML:
body, html
    {
    background-image:url(images/bg_site.jpg);
    background-repeat:repeat;
    overflow:hidden;
    }
    
#hintergrund
    {
    z-index:2;
    position:absolute;
    bottom:0px;
      left:0;
    width:100%;
    }
    
#content
    {
    position: absolute;
    top: 4px;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    overflow: auto;
    }
    
#navigation    
    {
    width:928px;
    size:50%;
    margin-top:40px;
    margin-left:auto;
    margin-right:auto;
    }
    
#raster
    {
    width:1000px;
    height:600px;
    margin-top:80px;
    margin-left:auto;
    margin-right:auto;
    }

#scrollbar1 { width: 950px; margin: 20px 0 10px; }
#scrollbar1 .viewport { width: 928px; height: 550px; overflow: hidden; position: relative; }
#scrollbar1 .overview { list-style: none; position: absolute; left: 0; top: 0; padding: 0; margin: 0; }
#scrollbar1 .scrollbar{ background: transparent url(images/bg-scrollbar-track-y.png) no-repeat 0 0; position: relative; background-position: 0 0; float: right; width: 15px; }
#scrollbar1 .track { background: transparent url(images/bg-scrollbar-trackend-y.png) no-repeat 0 100%; height: 100%; width:13px; position: relative; padding: 0 1px; }
#scrollbar1 .thumb { background: transparent url(images/bg-scrollbar-thumb-y.png) no-repeat 50% 100%; height: 20px; width: 25px; cursor: pointer; overflow: hidden; position: absolute; top: 0; left: -5px; }
#scrollbar1 .thumb .end { background: transparent url(images/bg-scrollbar-thumb-y.png) no-repeat 50% 0; overflow: hidden; height: 5px; width: 25px; }
#scrollbar1 .disable { display: none; }

und die js
HTML:
/*!
 * Tiny Scrollbar 1.65
 * http://www.baijs.nl/tinyscrollbar/
 *
 * Copyright 2010, Maarten Baijs
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://www.opensource.org/licenses/mit-license.php
 * http://www.opensource.org/licenses/gpl-2.0.php
 *
 * Date: 10 / 05 / 2011
 * Depends on library: jQuery
 * 
 */

(function($){
    $.tiny = $.tiny || { };
    
    $.tiny.scrollbar = {
        options: {    
            axis: 'y', // vertical or horizontal scrollbar? ( x || y ).
            wheel: 40,  //how many pixels must the mouswheel scroll at a time.
            scroll: true, //enable or disable the mousewheel;
            size: 'auto', //set the size of the scrollbar to auto or a fixed number.
            sizethumb: 'auto' //set the size of the thumb to auto or a fixed number.
        }
    };    
    
    $.fn.tinyscrollbar = function(options) { 
        var options = $.extend({}, $.tiny.scrollbar.options, options);         
        this.each(function(){ $(this).data('tsb', new Scrollbar($(this), options)); });
        return this;
    };
    $.fn.tinyscrollbar_update = function(sScroll) { return $(this).data('tsb').update(sScroll); };
    
    function Scrollbar(root, options){
        var oSelf = this;
        var oWrapper = root;
        var oViewport = { obj: $('.viewport', root) };
        var oContent = { obj: $('.overview', root) };
        var oScrollbar = { obj: $('.scrollbar', root) };
        var oTrack = { obj: $('.track', oScrollbar.obj) };
        var oThumb = { obj: $('.thumb', oScrollbar.obj) };
        var sAxis = options.axis == 'x', sDirection = sAxis ? 'left' : 'top', sSize = sAxis ? 'Width' : 'Height';
        var iScroll, iPosition = { start: 0, now: 0 }, iMouse = {};

        function initialize() {    
            oSelf.update();
            setEvents();
            return oSelf;
        }
        this.update = function(sScroll){
            oViewport[options.axis] = oViewport.obj[0]['offset'+ sSize];
            oContent[options.axis] = oContent.obj[0]['scroll'+ sSize];
            oContent.ratio = oViewport[options.axis] / oContent[options.axis];
            oScrollbar.obj.toggleClass('disable', oContent.ratio >= 1);
            oTrack[options.axis] = options.size == 'auto' ? oViewport[options.axis] : options.size;
            oThumb[options.axis] = Math.min(oTrack[options.axis], Math.max(0, ( options.sizethumb == 'auto' ? (oTrack[options.axis] * oContent.ratio) : options.sizethumb )));
            oScrollbar.ratio = options.sizethumb == 'auto' ? (oContent[options.axis] / oTrack[options.axis]) : (oContent[options.axis] - oViewport[options.axis]) / (oTrack[options.axis] - oThumb[options.axis]);
            iScroll = (sScroll == 'relative' && oContent.ratio <= 1) ? Math.min((oContent[options.axis] - oViewport[options.axis]), Math.max(0, iScroll)) : 0;
            iScroll = (sScroll == 'bottom' && oContent.ratio <= 1) ? (oContent[options.axis] - oViewport[options.axis]) : isNaN(parseInt(sScroll)) ? iScroll : parseInt(sScroll);
            setSize();
        };
        function setSize(){
            oThumb.obj.css(sDirection, iScroll / oScrollbar.ratio);
            oContent.obj.css(sDirection, -iScroll);
            iMouse['start'] = oThumb.obj.offset()[sDirection];
            var sCssSize = sSize.toLowerCase(); 
            oScrollbar.obj.css(sCssSize, oTrack[options.axis]);
            oTrack.obj.css(sCssSize, oTrack[options.axis]);
            oThumb.obj.css(sCssSize, oThumb[options.axis]);        
        };        
        function setEvents(){
            oThumb.obj.bind('mousedown', start);
            oThumb.obj[0].ontouchstart = function(oEvent){
                oEvent.preventDefault();
                oThumb.obj.unbind('mousedown');
                start(oEvent.touches[0]);
                return false;
            };    
            oTrack.obj.bind('mouseup', drag);
            if(options.scroll && this.addEventListener){
                oWrapper[0].addEventListener('DOMMouseScroll', wheel, false);
                oWrapper[0].addEventListener('mousewheel', wheel, false );
            }
            else if(options.scroll){oWrapper[0].onmousewheel = wheel;}
        };
        function start(oEvent){
            iMouse.start = sAxis ? oEvent.pageX : oEvent.pageY;
            var oThumbDir = parseInt(oThumb.obj.css(sDirection));
            iPosition.start = oThumbDir == 'auto' ? 0 : oThumbDir;
            $(document).bind('mousemove', drag);
            document.ontouchmove = function(oEvent){
                $(document).unbind('mousemove');
                drag(oEvent.touches[0]);
            };
            $(document).bind('mouseup', end);
            oThumb.obj.bind('mouseup', end);
            oThumb.obj[0].ontouchend = document.ontouchend = function(oEvent){
                $(document).unbind('mouseup');
                oThumb.obj.unbind('mouseup');
                end(oEvent.touches[0]);
            };
            return false;
        };        
        function wheel(oEvent){
            if(!(oContent.ratio >= 1)){
                oEvent = $.event.fix(oEvent || window.event);
                var iDelta = oEvent.wheelDelta ? oEvent.wheelDelta/120 : -oEvent.detail/3;
                iScroll -= iDelta * options.wheel;
                iScroll = Math.min((oContent[options.axis] - oViewport[options.axis]), Math.max(0, iScroll));
                oThumb.obj.css(sDirection, iScroll / oScrollbar.ratio);
                oContent.obj.css(sDirection, -iScroll);
                oEvent.preventDefault();
            };
        };
        function end(oEvent){
            $(document).unbind('mousemove', drag);
            $(document).unbind('mouseup', end);
            oThumb.obj.unbind('mouseup', end);
            document.ontouchmove = oThumb.obj[0].ontouchend = document.ontouchend = null;
            return false;
        };
        function drag(oEvent){
            if(!(oContent.ratio >= 1)){
                iPosition.now = Math.min((oTrack[options.axis] - oThumb[options.axis]), Math.max(0, (iPosition.start + ((sAxis ? oEvent.pageX : oEvent.pageY) - iMouse.start))));
                iScroll = iPosition.now * oScrollbar.ratio;
                oContent.obj.css(sDirection, -iScroll);
                oThumb.obj.css(sDirection, iPosition.now);
            }
            return false;
        };
        
        return initialize();
    };
})(jQuery);
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.614
Beiträge
1.538.351
Mitglieder
67.525
Neuestes Mitglied
mgtaucher
Oben