ερώτηση για css κώδικα??

[ekriksi]

καλημέρα παιδιά λοιπόν έχω το εξής θέμα στην αρχική αυτού του site iaras.org άμα δείτε έχω βάλει κάποιες εικόνες να παίζουν στο firefox όμως δεν δουλεύει σωστά όπως στο chrome τι πρέπει να κάνω? το site ειναι σε joomla στημένο, ο κώδικας στο συγκεκριμένο είναι περασμένος από μένα.

 

ορίστε και ο κώδικας μου...

 

html: 

 

<div class="borderimgscrol1textre">

<h2>IARAS Journals</h2>

</div>

<p id="borderimgscrol1">

<marquee behavior="scroll" direction="left" onmouseover="this.stop();" onmouseout="this.start();" height="300;" style="height: 200px;"> μεσα εδω τρεχω εναν table δεν το εβαλα νομιζω δεν παιζει ρολο....

 

 

css:

 

#borderimgscrol1 {

  border: 62px;

    padding: 8px;

    border-image-source: url(../images/relevant2.png);

    border-image-repeat: inherit;

    border-image-slice: 161;

    border-image-width: 82px;

    height: 194px;

    width: auto;

    max-width: 80%;

}

 

 

/* ΑΥΤΟΣ ΕΙΝΑΙ Ο ΚΩΔΙΚΑΣ ΓΙΑ ΕΝΑ h2 text ΠΟΥ ΕΧΩ */

.borderimgscrol1textre{

 

position: absolute;

    color: black;

    font-size: 11px;

    font-weight: bold;

    margin-top: 27px;

    margin-left: 1%;

    margin-right: auto;

}

[dominotrix]

Χρησιμοποιεις <marquee> ;;;

 

Ο CSS κωδικας που εβαλες δεν εχει σχεση με το προβλημα σου.

 

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee

(ανοιξε το σε chrome και μετα σε firefox και scrollare κατω στο παραδειγμα)

 

Αυτο το tag εγινε depricated εδω και πολλα χρονια, μη το χρησιμοποιεις.

[Tmark]

Μπορείς να επιτύχεις ανάλογο αποτέλεσμα με Jquery.

 

https://remysharp.com/2008/09/10/the-silky-smooth-marquee

[mentoras28]

Μπορεις να δοκιμασεις και css animations  

Για δες και εδω https://css-tricks.com/almanac/properties/a/animation/

[ekriksi]

καλό φαίνεται το js άλλα πως το καλώ στην joomla δηλαδή εντάξει θα το φορτώσω σε ένα φάκελο το αρχείο στον κώδικα πως θα το τρέξω πχ εδώ τρέχω κάτι τέτοιο  

 

<p id="borderimgscrol1">

<marquee behavior="scroll" direction="left" onmouseover="this.stop();" onmouseout="this.start();" height="300;" style="height: 200px;">

 

πως θα είναι το αντίστοιχο???

[dominotrix]

<script type="text/javascript">
    <!--
    $(function () {
        // basic version is: $('div.demo marquee').marquee() - but we're doing some sexy extras
        
        $('div.demo marquee').marquee('pointer').mouseover(function () {
            $(this).trigger('stop');
        }).mouseout(function () {
            $(this).trigger('start');
        }).mousemove(function (event) {
            if ($(this).data('drag') == true) {
                this.scrollLeft = $(this).data('scrollX') + ($(this).data('x') - event.clientX);
            }
        }).mousedown(function (event) {
            $(this).data('drag', true).data('x', event.clientX).data('scrollX', this.scrollLeft);
        }).mouseup(function () {
            $(this).data('drag', false);
        });
    });
    //-->
    </script>

<div class="pointer" style="display: block-inline; width: 350px; height: 41px; overflow: hidden;"><div style="float: left; white-space: nowrap; padding: 0px 350px;"><p>START Lorem ipsum dolor sit amet END</p></div></div>

Και δινεις class .pointer στο div που θελεις να περιστρεφεται. Αυτο δεν ειναι ομως δυναμικο. Δε μπορει δηλαδη να συνδεθει μαζι με τα βιβλια σου που εχεις περασει στο διαχειριστικο του Joomla και να τα εμφανιζει αυτοματα. Αρα θα πρεπει να τα περασεις ενα-ενα. Προτεινω να βρεις ενα παρομοιο plugin για να το κανει αυτοματα.