Ocena wątku:
  • 0 głosów - średnia: 0
  • 1
  • 2
  • 3
  • 4
  • 5
Dwa skrypty Java "gryzą" się-co robić?
#1
Chciałbym na stronę wrzucić dwa elementy:

-news slide http://legendaprl.prv.pl/slide.php#
-galeria http://legendaprl.prv.pl/gale/index.html


Mam dwa podstawowe problemy:
1-oba umieszczone na stronie nie chcą działać
2-żeby było mało :/ to po umieszczeniu skryptu Galerii nie działa przewijanie strony

Pomożecie ? Rolleyes
Odpowiedz
#2
Po pierwsze to wiesz jaka jest różnicą między Javą a JavaScript? Wątpie. Druga to może pokaż ten kod, bo w źródle nie chce mi się szukać
[Obrazek: 2guxq1i.gif]
Odpowiedz
#3
News Slide
w <head>:
Kod:
<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="js/jquery.scrollTo.js"></script>

<script>

$(document).ready(function() {

    //Speed of the slideshow
    var speed = 5000;
    
    //You have to specify width and height in #slider CSS properties
    //After that, the following script will set the width and height accordingly
    $('#mask-gallery, #gallery li').width($('#slider').width());    
    $('#gallery').width($('#slider').width() * $('#gallery li').length);
    $('#mask-gallery, #gallery li, #mask-excerpt, #excerpt li').height($('#slider').height());
    
    //Assign a timer, so it will run periodically
    var run = setInterval('newsscoller(0)', speed);    
    
    $('#gallery li:first, #excerpt li:first').addClass('selected');

    //Pause the slidershow with clearInterval
    $('#btn-pause').click(function () {
        clearInterval(run);
        return false;
    });

    //Continue the slideshow with setInterval
    $('#btn-play').click(function () {
        run = setInterval('newsscoller(0)', speed);    
        return false;
    });
    
    //Next Slide by calling the function
    $('#btn-next').click(function () {
        newsscoller(0);    
        return false;
    });    

    //Previous slide by passing prev=1
    $('#btn-prev').click(function () {
        newsscoller(1);    
        return false;
    });    
    
    //Mouse over, pause it, on mouse out, resume the slider show
    $('#slider').hover(
    
        function() {
            clearInterval(run);
        },
        function() {
            run = setInterval('newsscoller(0)', speed);    
        }
    );     
    
});


function newsscoller(prev) {

    //Get the current selected item (with selected class), if none was found, get the first item
    var current_image = $('#gallery li.selected').length ? $('#gallery li.selected') : $('#gallery li:first');
    var current_excerpt = $('#excerpt li.selected').length ? $('#excerpt li.selected') : $('#excerpt li:first');

    //if prev is set to 1 (previous item)
    if (prev) {
        
        //Get previous sibling
        var next_image = (current_image.prev().length) ? current_image.prev() : $('#gallery li:last');
        var next_excerpt = (current_excerpt.prev().length) ? current_excerpt.prev() : $('#excerpt li:last');
    
    //if prev is set to 0 (next item)
    } else {
        
        //Get next sibling
        var next_image = (current_image.next().length) ? current_image.next() : $('#gallery li:first');
        var next_excerpt = (current_excerpt.next().length) ? current_excerpt.next() : $('#excerpt li:first');
    }

    //clear the selected class
    $('#excerpt li, #gallery li').removeClass('selected');
    
    //reassign the selected class to current items
    next_image.addClass('selected');
    next_excerpt.addClass('selected');

    //Scroll the items
    $('#mask-gallery').scrollTo(next_image, 800);        
    $('#mask-excerpt').scrollTo(next_excerpt, 800);                    
    
}



</script>

<style>

#slider {

    /* You MUST specify the width and height */
    width:300px;
    height:186px;
    position:relative;    
    overflow:hidden;
}

#mask-gallery {
    
    overflow:hidden;    
}

#gallery {
    
    /* Clear the list style */
    list-style:none;
    margin:0;
    padding:0;
    
    z-index:0;
    
    /* width = total items multiply with #mask gallery width */
    width:900px;
    overflow:hidden;
}

    #gallery li {

        
        /* float left, so that the items are arrangged horizontally */
        float:left;
    }


#mask-excerpt {
    
    /* Set the position */
    position:absolute;    
    top:0;
    left:0;
    z-index:500px;
    
    /* width should be lesser than #slider width */
    width:100px;
    overflow:hidden;    
    

}
    
#excerpt {
    /* Opacity setting for different browsers */
    filter:alpha(opacity=60);
    -moz-opacity:0.6;
    -khtml-opacity: 0.6;
    opacity: 0.6;
    
    /* Clear the list style */
    list-style:none;
    margin:0;
    padding:0;
    
    /* Set the position */
    z-index:10;
    position:absolute;
    top:0;
    left:0;
    
    /* Set the style */
    width:100px;
    background-color:#000;
    overflow:hidden;
    font-family:arial;
    font-size:10px;
    color:#fff;    
}

    #excerpt li {
        padding:5px;
    }
    


.clear {
    clear:both;    
}


</style>


W <body> :
Kod:
<div id="debug"></div>

<div id="slider">

    <div id="mask-gallery">
    <ul id="gallery">
        <li><img src="images/pier1.jpg" width="300" height="186" alt="" border="0"/></a></li>
        <li><img src="images/pier2.jpg" width="300" height="186" alt="" border="0"/></a></li>
        <li><a href="http://www.niebiescy.pl/index.php?id=6700" target="_blank" rel="nofollow" title="Niebiescy.pl" alt="Ruch Chorzów"><img src="images/pier3.jpg" width="300" height="186" alt="" border="0"/></a></li>
    </ul>
    </div>
    
    <div id="mask-excerpt">
    <ul id="excerpt">
        <li>Fiat Seicento – Wikipedia, wolna encyklopedia
Fiat Seicento (od 2005 roku zwany Fiat
                </li>
        <li> 600) – pięciomiejscowy (Seicento), czteromiejscowy (600) samochód miejski produkowany p
                </li>
        <li>iat Seicento (od 2005 roku zwany Fiat</li>
    </ul>
    </div>

</div>

<div id="buttons">
    <a href="#" id="btn-prev"><img src="images/rewind.png" border="0"/></a>
    <a href="#" id="btn-pause"><img src="images/pause.png" border="0"/></a>
    <a href="#" id="btn-play"><img src="images/play.png" border="0"/></a>
    <a href="#" id="btn-next"><img src="images/fastforward.png" border="0"/></a>
</div>


<div class="clear"></div>




Galeria

w <head> :
Kod:
<style type="text/css">
    html {
        overflow: hidden;
    }
    body {
        position: absolute;
        margin: 0px;
        padding: 0px;
        background: #111;
        width: 100%;
        height: 100%;
    }
    #center {
        position: absolute;
        left: 50%;
        top:  50%;
    }
    #slider {
        position: absolute;
        width: 820px;
        height: 170px;
        left: -430px;
        top: -186px;
        overflow: hidden;
        background: #000;
        border: 10px solid #000;
    }
    #slider .slide {
        position: absolute;
        top: 0px;
        height: 333px;
        width: 500px;
        background: #000;
        overflow: hidden;
        border-left: #000 solid 1px;
        cursor: default;
    }
    #slider .title   {
        color: #F80;
        font-weight: bold;
        font-size: 1.2em;
        margin-right: 1.5em;
        text-decoration: none;
    }
    #slider .backgroundText {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 100%;
        background: #000;
        filter: alpha(opacity=40);
        opacity: 0.4;
    }
    #slider .text {
        position: absolute;
        top: 1%;
        top: 100%;
        color: #FFF;
        font-family: verdana, arial, Helvetica, sans-serif;
        font-size: 0.9em;
        text-align: justify;
        width: 470px;
        left: 10px;
    }
    #slider .diapo {
        position: absolute;
        filter: alpha(opacity=100);
        opacity: 1;
        visibility: hidden;
    }
</style>

<script type="text/javascript">
/* ==== slider nameSpace ==== */
var slider = function() {
    /* ==== private methods ==== */
    function getElementsByClass(object, tag, className) {
        var o = object.getElementsByTagName(tag);
        for ( var i = 0, n = o.length, ret = []; i < n; i++) {
            if (o[i].className == className) ret.push(o[i]);
        }
        if (ret.length == 1) ret = ret[0];
        return ret;
    }
    function setOpacity (obj,o) {
        if (obj.filters) obj.filters.alpha.opacity = Math.round(o);
        else obj.style.opacity = o / 100;
    }
    /* ==== Slider Constructor ==== */
    function Slider(oCont, speed, iW, iH, oP) {
        this.slides = [];
        this.over   = false;
        this.S      = this.S0 = speed;
        this.iW     = iW;
        this.iH     = iH;
        this.oP     = oP;
        this.oc     = document.getElementById(oCont);
        this.frm    = getElementsByClass(this.oc, 'div', 'slide');
        this.NF     = this.frm.length;
        this.resize();
        for (var i = 0; i < this.NF; i++) {
            this.slides[i] = new Slide(this, i);
        }
        this.oc.parent = this;
        this.view      = this.slides[0];
        this.Z         = this.mx;
        /* ==== on mouse out event ==== */
        this.oc.onmouseout = function () {
            this.parent.mouseout();
            return false;
        }
    }
    Slider.prototype = {
        /* ==== animation loop ==== */
        run : function () {
            this.Z += this.over ? (this.mn - this.Z) * .5 : (this.mx - this.Z) * .5;
            this.view.calc();
            var i = this.NF;
            while (i--) this.slides[i].move();
        },
        /* ==== resize  ==== */
        resize : function () {
            this.wh = this.oc.clientWidth;
            this.ht = this.oc.clientHeight;
            this.wr = this.wh * this.iW;
            this.r  = this.ht / this.wr;
            this.mx = this.wh / this.NF;
            this.mn = (this.wh * (1 - this.iW)) / (this.NF - 1);
        },
        /* ==== rest  ==== */
        mouseout : function () {
            this.over      = false;
            setOpacity(this.view.img, this.oP);
        }
    }
    /* ==== Slide Constructor ==== */
    Slide = function (parent, N) {
        this.parent = parent;
        this.N      = N;
        this.x0     = this.x1 = N * parent.mx;
        this.v      = 0;
        this.loaded = false;
        this.cpt    = 0;
        this.start  = new Date();
        this.obj    = parent.frm[N];
        this.txt    = getElementsByClass(this.obj, 'div', 'text');
        this.img    = getElementsByClass(this.obj, 'img', 'diapo');
        this.bkg    = document.createElement('div');
        this.bkg.className = 'backgroundText';
        this.obj.insertBefore(this.bkg, this.txt);
        if (N == 0) this.obj.style.borderLeft = 'none';
        this.obj.style.left = Math.floor(this.x0) + 'px';
        setOpacity(this.img, parent.oP);
        /* ==== mouse events ==== */
        this.obj.parent = this;
        this.obj.onmouseover = function() {
            this.parent.over();
            return false;
        }
    }
    Slide.prototype = {
        /* ==== target positions ==== */
        calc : function() {
            var that = this.parent;
            // left slides
            for (var i = 0; i <= this.N; i++) {
                that.slides[i].x1 = i * that.Z;
            }
            // right slides
            for (var i = this.N + 1; i < that.NF; i++) {
                that.slides[i].x1 = that.wh - (that.NF - i) * that.Z;
            }
        },
        /* ==== HTML animation : move slides ==== */
        move : function() {
            var that = this.parent;
            var s = (this.x1 - this.x0) / that.S;
            /* ==== lateral slide ==== */
            if (this.N && Math.abs(s) > .5) {
                this.obj.style.left = Math.floor(this.x0 += s) + 'px';
            }
            /* ==== vertical text ==== */
            var v = (this.N < that.NF - 1) ? that.slides[this.N + 1].x0 - this.x0 : that.wh - this.x0;
            if (Math.abs(v - this.v) > .5) {
                this.bkg.style.top = this.txt.style.top = Math.floor(2 + that.ht - (v - that.Z) * that.iH * that.r) + 'px';
                this.v = v;
                this.cpt++;
            } else {
                if (!this.pro) {
                    /* ==== adjust speed ==== */
                    this.pro = true;
                    var tps = new Date() - this.start;
                    if(this.cpt > 1) {
                        that.S = Math.max(2, (28 / (tps / this.cpt)) * that.S0);
                    }
                }
            }
            if (!this.loaded) {
                if (this.img.complete) {
                    this.img.style.visibility = 'visible';
                    this.loaded = true;
                }
            }
        },
        /* ==== light ==== */
        over : function () {
            this.parent.resize();
            this.parent.over = true;
            setOpacity(this.parent.view.img, this.parent.oP);
            this.parent.view = this;
            this.start = new Date();
            this.cpt = 0;
            this.pro = false;
            this.calc();
            setOpacity(this.img, 100);
        }
    }
    /* ==== public method - script initialization ==== */
    return {
        init : function() {
            // create instances of sliders here
            // parameters : HTMLcontainer name, speed (2 fast - 20 slow), Horizontal ratio, vertical text ratio, opacity
            this.s1 = new Slider("slider", 12, 1.84/3, 1/3.2, 70);
            setInterval("slider.s1.run();", 16);
        }
    }
}();

</script>

W <body> :
Kod:
<div id="center">
    <div id="slider">
        <div class="slide">
            <img class="diapo" src="1.jpg" alt="">
            <div class="text">
                  <span class="title">The best</span>
                  The offspring of a customized orbiter, Oďkostem arose as the best balanced
                  home for our plans. So we submitted to its conditions.
            </div>
        </div>
        <div class="slide">
            <img class="diapo" src="2.jpg" alt="">
            <div class="text">
                <span class="title">Prototype</span>
                Oďkostem's deep impulse flow is selectively regulated by a molecule
                originated in the prototype model, that creates its own variational
                principles, as oriented by the first local generation of terminable androids.
            </div>
        </div>
        <div class="slide">
            <img class="diapo" src="3.jpg" alt="">
            <div class="text">
                  <span class="title">Has been reduced</span>
                  Paired hosts come out nicely after only two cycles now. Their size has been
                  reduced to a half the original as planned, and indeed they show an
                  evolutionary advantage in the process of fixing self-generated instructions.
                  Plus, they are beautiful.
            </div>
        </div>
        <div class="slide">
            <img class="diapo" src="4.jpg" alt="">
            <div class="text">
                <span class="title">By close-alikes</span>
                Now I have regained hopes in someday finding myself surrounded by
                close-alikes to us. However, they will not be audible, at least not in my
                life span. We resolved the low freq vibration a superior solution for our
                communicational goals ...
            </div>
        </div>
        <div class="slide">
            <img class="diapo" src="5.jpg" alt="">
            <div class="text">
                  <span class="title">To bear</span>
                  We did not expect their surface to produce such a carbon powder coat, though
                  this is the best model so far. I shall have to bear with the inconveniences.
                  They seem to establish a parallel communication through that carbon coat and
                  I find myself unable to decodify the signal into anything meaningful.
            </div>
        </div>
        <div class="slide">
            <img class="diapo" src="6.jpg" alt="">
            <div class="text">
                  <span class="title">The zero level</span>
                  Today a set of vibration came up from the zero level;  we expect to launch
                  the transitional program in no longer than five basetime units. Psykesoma?                  galore and we'll betray our very nature into infinite, unending 2D surfaces.
                  We do need that vibration, and we will conquer its source.
            </div>
        </div>
        <div class="slide">
            <img class="diapo" src="7.jpg" alt="">
            <div class="text">
                  <span class="title">Beautifully</span>
                  To keep my sanity I wear the tactile sensors all the time. They translate
                  beautifully; I can even see distances while still on Psykesoma. This was
                  quite a discovery. We have grown more adaptable than expected.
            </div>
        </div>
        <div class="slide">
            <img class="diapo" src="8.jpg" alt="">
            <div class="text">
                  <span class="title">Uneasy to match</span>
                  Yewoona had to travel farther and longer than I did. Her base orbiter was
                  set to keep a complex combinational path that made it uneasy to match our
                  circuits. But her nature showed stronger than programmed.
            </div>
        </div>
        <div class="slide">
            <img class="diapo" src="9.jpg" alt="">
            <div class="text">
                  <span class="title">Adapted to serve</span>
                  Keep feeding them. We will never be this lucky again; an autogenerated
                  species adapted to serve all our needs!
            </div>
        </div>
        <div class="slide">
            <img class="diapo" src="10.jpg" alt="">
            <div class="text">
                  <a class="title" href="http://www.dhteumeuleu.com">At soonest</a>
                  "Blood is dark red, iron dark blue, this tale is blissful and so are you". I
                  should get to the hotel at soonest. The agency guy must be there already,
                  with some luck we'll have some nice dinner on him. How's that?
            </div>
        </div>    
        <div class="slide">
            <img class="diapo" src="11.jpg" alt="">
            <div class="text">
                  <a class="title" href="http://www.dhteumeuleu.com">At soonest</a>
                  "Blood is dark red, iron dark blue, this tale is blissful and so are you". I
                  should get to the hotel at soonest. The agency guy must be there already,
                  with some luck we'll have some nice dinner on him. How's that?
            </div>
            </div>    
        <div class="slide">
            <img class="diapo" src="12.jpg" alt="">
            <div class="text">
                  <a class="title" href="http://www.dhteumeuleu.com">At soonest</a>
                  "Blood is dark red, iron dark blue, this tale is blissful and so are you". I
                  should get to the hotel at soonest. The agency guy must be there already,
                  with some luck we'll have some nice dinner on him. How's that?
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
/* ==== start script ==== */
slider.init();
</script>
Odpowiedz
#4
Dobrze rozumiem, że korzystasz z dwóch bibliotek na raz, jQuery i Prototype?
[Obrazek: 2guxq1i.gif]
Odpowiedz
#5
Powiem Ci,że nie wiem :]
Znalazłem SlideNews i wstawiłem na stronie.Potem znalazłem ta Galerię i pojawił się problem więc go tu opisałem...
Odpowiedz
#6
To nie korzystaj, albo Prototype, albo jQuery. Korzystanie z dwóch naraz jest niezbyt dobrym pomysłem, ani jedna, ani druga, nie ma czegoś, czego pozostała nie ma.
Odpowiedz
#7
[Obrazek: 2guxq1i.gif]
Odpowiedz


Podobne wątki…
Wątek: Autor Odpowiedzi: Wyświetleń: Ostatni post
  [JAVA SCRIPT][PHP][MYSQL] Odlicznie czasu hahahehe 4 4,101 03-09-2013, 14:21
Ostatni post: mateo
  Skrypty facebooka nie ładują się na stronie mat2224 3 2,296 11-09-2012, 03:59
Ostatni post: camelrafal
  Dwa skrypty - działa tylko jeden. puma 2 3,211 03-01-2012, 19:48
Ostatni post: puma
  GALERIA (HTML + odrobina JAVa) rothejro 10 6,476 11-12-2011, 02:23
Ostatni post: rothejro
  Java tomek 0 1,273 06-11-2011, 20:49
Ostatni post: tomek

Skocz do:


Użytkownicy przeglądający ten wątek:
Sponsorzy i przyjaciele
SeoHost.pl