Textslider abhacken

[nad86]

Hallo,

hab folgendes Problem:

ich habe auf der Seite Mantel verkaufen 4 Texte die sich durch drücken auf den Titel nacheinander öffnen.
Beim öffnen soll ein Kreuz in dem Kästchen sein und wenn man auf das nächste drück soll das schon gesehene eine Hacken bekommen.
Ich hab es bisher mit a:visited versuch, aber in verschiedenen Foren und auf verschiedenen Seiten gelesen, dass die Hintergrundbild-Funktion für visited nicht mehr existiert.
Es funktioniert bei mir nur noch im Opera.
Die Seite ist teilweise mit Joomla umgesetzt.

Css:

div.slider_slide {
    display: block;
    clear: left;
    margin: 5px 0px 5px 0px !important;
    padding: 0;
    line-height: 1em;
    background: none;
}

div.slider_slide.slider_slide.active {
    color: #F00;

}

/* Slides */
div.slider_slide a:link,
div.slider_slide a:active,
div.slider_slide a:hover {
    color: #666666;
    outline: 0;
    text-decoration: none;
    line-height:1.5em;
}

div.slider_slide a div.ueber,
div.slider_slide a:hover div.ueber{
    font-size:20px;
}

div.slider_slide a div.ueber2,
div.slider_slide a:hover div.ueber2{
    font-weight:normal;
    font-size:12px;
    padding: 5px 0 0 0;
    line-height:1.5em;
}

div.slider_slide a,
div.slider_slide a:hover {
    display: block;
    width: auto;
    _width: 0%; /* IE hack */
    font-size: 14px;
    line-height: 1em !important;
    font-weight: bold;
    border: solid 1px #B4B4B4;
    background: transparent url('../images/gradient.png') repeat-x 0 -100px;
    text-decoration: none !important;
    padding: 13px 10px 10px 40px;
}

div.slider_container.rounded div.slider_slide a,
div.slider_container.rounded div.slider_slide a:hover {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

/* Slides: Hover state */
div.slider_slide a:link  {
    background: url('../images/bg_slider_off.jpg');
    color: #666666;
}

div.slider_slide a:visited { 
    background: url('../images/bg_slider_select.jpg') no-repeat;
    color: #666666;
}
 
 div.slider_slide a:hover {
    background: url('../images/bg_slider_ausw.jpg');
}

div.slider_slide a:active {
    background: url('../images/bg_slider_select.jpg') no-repeat;
}

/*Slides: Active state */
div.slider_slide.active a,
div.slider_slide.active a:hover {
    color: #333333;
    background-color: #e1e1e1;
    background: url('../images/bg_slider_header_on.jpg') no-repeat;
}

div.slider_slide.active a div.ueber,
div.slider_slide.active a:hover div.ueber{
    color: #be1722;
    outline: 0;
    text-decoration: none;
}

div.slider_slide.active a div.ueber2,
div.slider_slid.activee a:hover div.ueber2{
    font-weight:bold;
}

div.slider_container.rounded div.slider_slide.active a,
div.slider_container.rounded div.slider_slide.active a:hover {
    -webkit-border-radius: 10px 10px 0 0;
    -moz-border-radius: 10px 10px 0 0;
    border-radius: 10px 10px 0 0;
}

/* Content area */
div.slider_content_wrapper,
div.slider_content_wrapper > div,
div.slider_content_wrapper div.slider_content,
div.slider_content_wrapper div.slider_content > div,
div.slider_content_wrapper div.slider_item {
    position: relative !important;
    overflow: hidden !important;
    background: url(../images/bg_slider_on_unten.jpg) no-repeat center bottom;
}

div.slider_content_wrapper {
    clear: left;
    margin-top: -5px;
    left: 1px;
    padding: 0;
    background: url(../images/bg_slider_on.jpg) repeat-y center;    
}

div.slider_content_wrapper div.slider_content {
    clear: both;
    margin-top: -1px;
    border: 1px solid #B4B4B4;
}

div.slider_container.rounded div.slider_content_wrapper div.slider_content {
    -webkit-border-radius: 0 0 10px 10px;
    -moz-border-radius: 0 0 10px 10px;
    border-radius: 0 0 10px 10px;
}

div.slider_content_wrapper div.slider_item {
    padding: 30px 20px 0px 39px;
    margin-top: -28px;
    left: -1px;
    background: url(../images/bg_slider_on_oben.jpg) no-repeat center top;
    color:#333333;
}


/* INDENTING */
div.slider_slide.noindent,
div.slider_slide.indentcontent {
    /* default */
}

div.slider_slide.indent,
div.slider_slide.indenttitle {
    padding: 0 10px;
}

div.slider_slide.noindent.active a,
div.slider_slide.noindent.active a:hover,
div.slider_slide.indenttitle.active a,
div.slider_slide.indenttitle.active a:hover {
    /* default */
}

div.slider_container.rounded div.slider_slide.indentcontent.active a,
div.slider_container.rounded div.slider_slide.indentcontent.active a:hover {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

div.slider_content_wrapper.noindent,
div.slider_content_wrapper.indenttitle {
    /* default */
}

div.slider_content_wrapper.indent,
div.slider_content_wrapper.indentcontent {
    padding: 0 10px;
}

div.slider_content_wrapper.noindent div.slider_content,
div.slider_content_wrapper.indentcontent div.slider_content {
    /* default */
}

div.slider_container.rounded div.slider_content_wrapper.indenttitle div.slider_content {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

/* STYLING FOR IF JAVASCRIPT FAILS */
div.slider_noscript div.slider_content,
div.slider_noscript div.slider_item {
    margin: 0;
    padding: 0;
    border: none;
}

/* EXTRA STYLING
 * If you want to change styles, it's best to place your custom (overriding) styles in the templates stylesheet,
 * so they do not get overwritten when updating Slider.
 */

/* Style: blue */
/* Slides: Normal state */
div.slider_slide.blue a {
    background-color: #BFDDFF; /* 75% white */
}

/* Slides: Hover state */
div.slider_slide.blue a:hover {
    background-color: #80BCFF; /* 50% white */
}

/* Slides: Active state */
div.slider_slide.active.blue a,
div.slider_slide.active.blue a:hover {
    background-color: #0078FF;
}

/* Content area */
div.slider_content.blue {
    /*background-color: #BFDDFF;*/
}

/* Style: green */
/* Slides: Normal state */
div.slider_slide.green a {
    background-color: #BFE5C0; /* 75% white */
}

/* Slides: Hover state */
div.slider_slide.green a:hover {
    background-color: #80CC82; /* 50% white */
}

/* Slides: Active state */
div.slider_slide.active.green a,
div.slider_slide.active.green a:hover {
    background-color: #009905;
}

/* Content area */
div.slider_content.green {
    /*background-color: #BFE5C0;*/
}

/* Style: grey */
/* Slides: Normal state */
div.slider_slide.grey a {
    background-color: #D9D9D9; /* 75% white */
}

/* Slides: Hover state */
div.slider_slide.grey a:hover {
    background-color: #B3B3B3; /* 50% white */
}

/* Slides: Active state */
div.slider_slide.active.grey a,
div.slider_slide.active.grey a:hover {
    background-color: #666666;
}

/* Content area */
div.slider_content.grey {
    /*background-color: #D9D9D9;*/
}

/* Style: mystyle */
/* This is an example of how you can make your own style
 * You can add styles as you like
 * You can use css to style the Tabber elements how you want it.
 * It's best to place your custom (overriding) styles in your templates stylesheet (css file),
 * so they do not get overwritten when you update this extension.
 */
/* Slides: Normal state */
div.slider_slide.mystyle a {
    background-color: #123456;
}

/* Slides: Hover state */
div.slider_slide.mystyle a:hover {
    background-color: #ABCDEF;
}

/* Slides: Active state */
div.slider_slide.active.mystyle a,
div.slider_slide.active.mystyle a:hover {
    background-color: #456789;
}

/* Content area */
div.slider_content.mystyle {
    background-color: #CCDDEE;
}

Vielleicht kann mir ja jemand helfen oder weiß eine andere Lösung?

LG Nad86

 

[threadi]

Der Pseudoklasse visited ist es egal, was für Eigenschaften an ihr hängen. Das können Hintergrundbilder, aber auch Textformatierungen sein.

Dein Problem ist eher, dass der Link der angeklickt wird in der Browser-Historie nicht als "besucht" / "visited" markiert wird. Es ist schließlich nicht wirklich ein Link sondern ruft lediglich eine JavaScript-Funktion auf, welche den Inhalt animiert einblendet.

Mein Tipp wäre, dass Du den bereits aufgerufenen Textabschnitten eine zusätzliche Klasse gibst. Diese kann dann auch das Häkchen entsprechend formatieren.

 

[Cheffchen]

edite: wieder zu langsam geschrieben :O(
das nervt langsam wieder, gibts kein update dagegen wie in anderen Foren :O)

Hallo,

wo steht denn son schro.. bzw in was für foren?
nicht hier oder?

Ich hab es bisher mit a:visited versuch, aber in verschiedenen Foren und auf verschiedenen Seiten gelesen, dass die Hintergrundbild-Funktion für visited nicht mehr existiert.

:visited kann nicht funktionieren weil nichts visited wurde sondern nur der style geändert wurde :O).

also müsstest eine andere classe visited oder so vergeben beim besuch, kenn den script aber nicht und der erschließt mir jetzt auch nicht auf die schnelle.

Cheffchen

 

[nad86]

komischerweise geht es aber wenn ich nur die linkfarbe ändere. Dann werden die besuchten Seiten Farbig markiert, ich hab das mal geändert damit man es sehen kann. Und im Opera geht es ja bei mir!?

Also der Codeabschnitt jetzt:

/* Slides: Hover state */
div.slider_slide a:link  {
    background: url('../images/bg_slider_off.jpg');
    color: #666666;
}

div.slider_slide a:visited { 
    background: url('../images/bg_slider_select.jpg') no-repeat;
    color: #90F;
}
 
 div.slider_slide a:hover {
    background: url('../images/bg_slider_ausw.jpg');
}

div.slider_slide a:active {
    background: url('../images/bg_slider_select.jpg') no-repeat;
}

/*Slides: Active state */
div.slider_slide.active a,
div.slider_slide.active a:hover {
    color: #333333;
    background-color: #e1e1e1;
    background: url('../images/bg_slider_header_on.jpg') no-repeat;
}

ach ja und gefunden dass es nicht geht hab ich hier:
CSS :visited - Einschränkung der Gestaltung nach gestopftem Sicherheitsleck | hyperkontext | Weblog
da steht drin:

Wenn Browser also die von Mozilla erläuterte Art umsetzen, dann werden

1. mit der Pseudoklasse :visited nur mehr folgende Anweisungen verarbeitet:
   • color,
   • background-color,
   • border-color, border-*-color,
   • outline-color
   Zusätzlich wird bei Farbangaben kein rgba(), hsla() oder transparent akzeptiert.
   Anderes wird ignoriert beziehungsweise der Stil von den Angaben für unbesuchte Links übernommen, auch CSS3 Transitions und Hintergrundbilder.
2. alle Notationen hinter :visited ausnahmslos ignoriert. Zum Beispiel a:visited:before, a:visited:active, a:visited+* oder a:visited *.

Das hat Folgen für die (visuelle) Webgestaltung.
Beispielsweise ist es dann nicht mehr möglich, besuchte Links mit (verändertem) Zeichen oder Bild danach oder davor zu kennzeichnen.
Auch opacity oder lediglich die Angabe text-decoration:line-through in Kombination mit :visited wird ignoriert.

 

[Cheffchen]

Hallo,

oh, das ist total an mir vorbei gegangen, da ich :visited nie nutze und dies auch eher störent entfinde.

Da bleibt nur dein script anzupassen das eine extra classe gesetzt wird beim besuchen und die auch steht.
mit jquery ja kein problem aber dein script kenn ich halt nicht, also vielleicht mal in der JS ecke fragen.

Cheffchen

 

[nad86]

Gut also is das schonmal richtig dass das nicht geht :) ... da kann ich bei dem ansatz schon mal aufhören zu suchen

na das scribt ist wie folgt:

window.addEvent('domready', function()
{
    // Only do stuff if slider_nav is found
    if (document.getElements('div.slider_slide').length && document.getElements('div.slider_content').length) {
        (function() { Slider = new Slider(); }).delay(100);
    } else {
        // Try again 2 seconds later, because IE sometimes can't see object immediately
        (function()
        {
            if (document.getElements('div.slider_slide').length && document.getElements('div.slider_content').length) {
                Slider = new Slider();
            }
        }).delay(2000);
    }
});

var Slider = new Class({
    initialize: function()
    {
        var self = this;
        this.containers = new Array();

        var slider_hash = '';
        if (slider_use_hash && window.location.hash) {
            slider_hash = window.location.hash.replace('#', '');
        }

        document.getElements('div.slider_container').each(function(container)
        {
            if (typeof( container ) != "undefined") {
                container.removeClass('slider_noscript');

                var c_id = container.id.replace('slider_container_', '');
                var active = 0;
                var active_hash = 0;

                // add events on slides and show them
                container.getElements('div.slider_slide').each(function(el)
                {
                    if (typeof( el ) != "undefined") {
                        if (!el.hasClass('slider_noslide')) {
                            var id = el.id.replace('slider_slide_', '');
                            var set_id = id.slice(0, id.indexOf('-'));
                            if (set_id == c_id) {
                                self.containers[id] = c_id;
                                // set first slide as active or active slide
                                if (el.hasClass('active')) {
                                    active = id;
                                }
                                if (slider_use_hash && !active_hash && slider_hash) {
                                    var alias = el.getFirst().className.slice(String('slider_alias_').length);
                                    if (alias == slider_hash) {
                                        active_hash = id;
                                    }
                                }
                                    mode = 'click';
                                el.addEvent(mode, function() { self.showSlide(id, c_id); });
                            }
                        }
                    }
                });

                // add fx
                container.getElements('div.slider_content_wrapper').each(function(el)
                {
                    if (typeof( el ) != "undefined") {
                        el.setStyle('display', 'block');
                        var id = el.id.replace('slider_content_', '');
                        var set_id = id.slice(0, id.indexOf('-'));
                        if (set_id == c_id) {
                            el.fx = new Fx.Slide(el, { 'duration': 0, onComplete: function()
                            {
                                self.autoHeight(el.getParent());
                                self.showItem(id);
                            } });
                            el.setStyle('visibility', 'hidden');
                            el.fx.hide();
                        }
                    }
                });

                if (slider_use_hash && active_hash) {
                    active = active_hash;
                }

                // add fx
                container.getElements('div.slider_item').each(function(el)
                {
                    if (typeof( el ) != "undefined") {
                        var id = el.id.replace('slider_item_', '');
                        var set_id = id.slice(0, id.indexOf('-'));
                        if (set_id == c_id) {
                            el.setStyle('display', 'block');
                            el.fade_in = new Fx.Tween(el, { property: 'opacity', 'duration': slider_fade_in_speed });
                            el.fade_out = new Fx.Tween(el, { property: 'opacity', 'duration': slider_fade_out_speed });
                            el.fx = new Fx.Slide(el, { 'duration': slider_speed, onComplete: function()
                            {
                                self.autoHeight(el.getParent());
                                self.hideContent(id);
                            } }).hide();
                        }
                    }
                });

                // hide content titles
                container.getElements('.slider_title').each(function(el)
                {
                    if (typeof( el ) != "undefined") {
                        el.setStyle('display', 'none');
                    }
                });

                // show only active slide
                self.showSlide(active, c_id, 1, 0, ( active === slider_urlscroll ));

                container.getElements('div.slider_slide').each(function(el)
                {
                    if (typeof( el ) != "undefined") {
                        el.setStyle('display', 'block');
                    }
                });
            }
        });

        // add onclick events on slide links {slidelink=...}
        document.getElements('a.slider_slidelink').each(function(el)
        {
            if (typeof( el ) != "undefined" && el.rel && typeof( self.containers[el.rel] ) != "undefined") {
                el.addEvent('click', function()
                {
                    self.showSlide(el.rel, self.containers[el.rel], 0, 1, slider_linkscroll);
                });
                el.href = 'javascript://';
            }
        });
    },

    showSlide: function(id, c_id, first, open, scroll)
    {
        var self = this;
        var container = document.id('slider_container_'+c_id);
        var item = document.id('slider_slide_'+id);
        var show_slide = ( first || open || ( item && !item.hasClass('active') ) );

        // remove all active classes
        container.getElements('div.slider_slide').each(function(el)
        {
            if (typeof( el ) != "undefined" && el) {
                var el_id = el.id.replace('slider_slide_', '');
                var set_id = el_id.slice(0, el_id.indexOf('-'));
                if (set_id == c_id) {
                    el.removeClass('show');
                }
            }
        });

        if (show_slide && typeof( item ) != "undefined" && item) {
            item.addClass('show');
            if (first) {
                item.addClass('active');
            }
        }

        var el = document.id('slider_content_'+id);

        // show active blocks
        if (typeof( el ) != "undefined" && el && typeof( el.fx ) != "undefined") {
            if (show_slide) {
                el.setStyle('visibility', 'visible');
                el.fx.cancel();
                // show active content block
                if (first) {
                    el.fx.show();
                    this.autoHeight(el.getParent(), 1);
                } else {
                    el.fx.slideIn();
                }
            }

        }

        // hide all non-active blocks
        container.getElements('div.slider_item').each(function(el)
        {
            if (typeof( el ) != "undefined" && el && typeof( el.fx ) != "undefined") {
                var el_id = el.id.replace('slider_item_', '');
                var set_id = el_id.slice(0, el_id.indexOf('-'));
                if (set_id == c_id) {
                    el.fx.cancel();
                    if (show_slide && id && el.id == 'slider_item_'+id) {
                        if (first) {
                            el.fx.show();
                            self.autoHeight(el.getParent());
                        }
                    } else {
                        el.fx.slideOut();
                        el.fade_in.cancel();
                        el.fade_out.cancel().start(0);
                    }
                }
            }
        });
    },

    hideContent: function(id)
    {
        var item = document.id('slider_slide_'+id);
        if (typeof( item ) != "undefined" && item && !item.hasClass('show')) {
            // hide content block
            var el = document.id('slider_content_'+id);
            if (typeof( el ) != "undefined" && el) {
                el.fx.cancel().hide();
                el.setStyle('visibility', 'hidden');
            }
            item.removeClass('active');
        }
    },

    showItem: function(id)
    {
        var item = document.id('slider_slide_'+id);
        if (typeof( item ) != "undefined" && item && item.hasClass('show')) {
            item.addClass('active');
            // show item block
            var el = document.id('slider_item_'+id);
            if (typeof( el ) != "undefined" && el) {
                el.removeClass('slider_item_inactive');
                el.fx.cancel().slideIn();
                el.fade_out.cancel();
                el.fade_in.cancel().start(1);
            }
        }
    },


    autoHeight: function(el, force)
    {
        if (typeof( el ) != "undefined" && el && el.getStyle('height') && ( force || parseInt(el.getStyle('height')) > 0 )) {
            el.setStyle('height', 'auto');
        }
    }
});

Ich kann aber den Beitrag auch einfach noch mal bei der JS-Ecke einstellen. :)

Ich nutz das sonst auch nie, aber dachte erst ist jetzt die einfachste Methode für mich dass zu ändern ;D

 

[Cheffchen]

Hallo,

also dann würde ich das so probieren.
ist zwar nicht schön, dürfte aber funktionieren dasn dann die classe visited hast.
Find the difference between two text files online - Diff Checker

Cheffchen

 

[nad86]

Hallo,

so toll, es geht!!!

DANKE!!!!!!!!!!!!!!!

Nad86