php.de

Zurück   php.de > Webentwicklung > JavaScript, Ajax und mehr
[Erledigt] slideshow im ie7 [Erledigt] slideshow im ie7
Wiki Registrieren Grundlagen Suchen Heutige Beiträge Alle Foren als gelesen markieren

JavaScript, Ajax und mehr dynamisches Scripten und Interaktion auf Clientebene

Antwort
 
LinkBack Themen-Optionen Thema bewerten
Alt 03.02.2012, 11:34  
Benutzer
 
Registriert seit: 13.12.2011
Beiträge: 47
PHP-Kenntnisse:
Anfänger
dula89 befindet sich auf einem aufstrebenden Ast
Standard [Erledigt] slideshow im ie7
Hallo ich habe folgendes Problem und zwar läuft meine eigene Slideshow, im firefox "fast" perfekt. Allerdings wenn ich im ie das ganze öffne benutzt er die
opacity nicht wirklich und stellt somit mein Überbledungseffekt nicht richtig dar.
Das ganze macht er selbst im ie9 nicht, wo ich eig. dachte das es wenigstens dort geht.
Ich habe schon etwas gelesen mit "filter":alpha.... aber iwie bekomm ich das ganze nicht richtig eingebaut bzw. benutzt er es nciht richtig.

hier der code:
PHP-Code:
function hideAll(){ 
                    $("#project_logo").hide();
                    jQuery("#project_logo").children().each(function(){
                        jQuery(this).hide();
                    });
                    jQuery("#stepImage ul").children().each(function(){
                        jQuery(this).removeClass("sliderlistactiv");
                    });
                    jQuery(".sliderText").each(function(){
                        jQuery(this).hide();
                    });
                }
function slideShow(use_id){ 

                    countChildElements("imageblock", "img"); 
                    hideAll(); 
                    
                    parseInt(use_id);
                    if(use_id) {
                        imageCounter = use_id; 
                    }
                    if(imageCounter == 1){
                        console.log('first step');
                        jQuery("#imageblock").children().each(function(){
                            jQuery(this).animate({opacity: 0}, 0).css('display', 'none');
                        });
                        jQuery("#sliderImage_"+imageCounter).css("display", "block").css("opacity", "1");
                        jQuery("#sliderImage_"+imageCounter).animate({opacity: 1}, 5000);
                    }
                   
  Container ausgeblendet
                 
                    if(imageCounter > childCount) {
                        imageCounter = 1;
                       jQuery("#imageblock").children().each(function(){
                            jQuery(this).animate({opacity: 0}, 0).css('display', 'none');
                        });
                        jQuery("#sliderImage_"+imageCounter).css("display", "block").css("opacity", "1");
                        jQuery("#sliderImage_"+imageCounter).animate({opacity: 1}, 5000);
                        jQuery("#stepImageShow").animate({"left": "0px"});
                        jQuery("#stepImageShow").removeClass("sliderlistactiv");
                        if(jQuery("#containerProjectImage_"+imageCounter+" img").attr("src") == "") {
                            jQuery("#project_logo").hide();
                            jQuery("#menu_li_"+imageCounter).addClass("sliderlistactiv");
                        } else {
                            jQuery("#project_logo").fadeIn(2000);
                             jQuery("#text_"+imageCounter).fadeIn(2000);
                            jQuery("#menu_li_"+imageCounter).addClass("sliderlistactiv");
                            jQuery("#containerProjectImage_"+imageCounter).fadeIn(2000);
                            imageCounter = imageCounter + 1;
                        }
                    } else {

                        jQuery("#imageblock").children().each(function(){
                                 console.log('id = ' + jQuery(this).attr('id') + '  actual display = ' + jQuery(this).css("display"));
                                if(jQuery(this).css("display") == "block"){
                                    sliderImage = jQuery(this);
                                }
                        });
                        
                        jQuery("#sliderImage_"+imageCounter).css('display','block').animate({opacity: 1}, 4000);
                        console.log("##################################");
                        console.log("counter ="+imageCounter);
                        
                        sliderImage.animate({opacity: 0}, 4000,function(){
                            sliderImage.css("display", "none");
                        });
                        console.log('slider = ' + sliderImage.attr('id'))
                        console.log("######################################")

                        if(jQuery("#containerProjectImage_"+imageCounter+" img").attr("src") == "") {
                            jQuery("#project_logo").hide();
                            jQuery("#menu_li_"+imageCounter).addClass("sliderlistactiv");
                            jQuery("#text_"+imageCounter).fadeIn(2000);
                            
                        } else {
                             jQuery("#project_logo").fadeIn(2000);
                             jQuery("#text_"+imageCounter).fadeIn(2000);
                            jQuery("#menu_li_"+imageCounter).addClass("sliderlistactiv");
                            jQuery("#containerProjectImage_"+imageCounter).fadeIn(2000);
                        }
                        imageCounter = imageCounter + 1;   

                    }
                    if(!use_id) {
                        if(imageCounter > 2) {
                            jQuery("#stepImageShow").animate({"left": "+="+currentRangeTest+"px"}).addClass("sliderlistactiv");
                        }
                        
                        timer = setTimeout('slideShow()', 10000);
                        
                    } 
dula89 ist offline   Mit Zitat antworten
Sponsor Mitteilung
PHP Code Flüsterer

Registriert seit: 21.08.2005
Beiträge: 4682
PHP-Kenntnisse:
Fortgeschritten

Alt 03.02.2012, 12:25  
Erfahrener Benutzer
 
Benutzerbild von Wolfsblut
 
Registriert seit: 30.12.2011
Beiträge: 208
PHP-Kenntnisse:
Fortgeschritten
Wolfsblut wird schon bald berühmt werden
Standard
Du hast fadeIn() ja schon in gebrauch...versuch mal anstatt animate() fadeOut().
Wolfsblut ist offline   Mit Zitat antworten
Alt 03.02.2012, 13:45  
Benutzer
 
Registriert seit: 13.12.2011
Beiträge: 47
PHP-Kenntnisse:
Anfänger
dula89 befindet sich auf einem aufstrebenden Ast
Standard
geht damit auch nicht. slideshow läuft nun wie sie laufen soll...ausser im ie da macht er statt mein überbledungseffekt einfach nur ein show.... -.-
dula89 ist offline   Mit Zitat antworten
Alt 03.02.2012, 15:26  
Benutzer
 
Registriert seit: 13.12.2011
Beiträge: 47
PHP-Kenntnisse:
Anfänger
dula89 befindet sich auf einem aufstrebenden Ast
Standard
mir ist grad folgendes aufgefallen und zwar habe ich an der stelle:

PHP-Code:
jQuery("#imageblock").children().each(function(){
//                                 console.log('id = ' + jQuery(this).attr('id') + '  actual display = ' + jQuery(this).css("display"));
                                if(jQuery(this).css("display") == "block"){
                                    sliderImage = jQuery(this);
                                }
                        });
                        
                        jQuery("#sliderImage_"+imageCounter).css('display','block').animate({opacity: 1}, 4000);
                        
//                        console.log("counter ="+imageCounter);
//                        
                        sliderImage.animate({opacity: 0}, 4000,function(){
                            sliderImage.css("display", "none");
                            console.log(sliderImage);
                        }); 
die Variable sliderImage und diese erkennt der IE anscheint nicht. wenn ich diese mir im ie ausgeben lasse steht da [object object].
dula89 ist offline   Mit Zitat antworten
Alt 03.02.2012, 16:46  
Erfahrener Benutzer
 
Registriert seit: 28.05.2008
Beiträge: 2.094
PHP-Kenntnisse:
Fortgeschritten
rudygotya ist einfach richtig nettrudygotya ist einfach richtig nettrudygotya ist einfach richtig nettrudygotya ist einfach richtig nettrudygotya ist einfach richtig nett
Standard
Wieviele Freds denn noch zum gleichen Thema? http://www.php.de/javascript-ajax-un...-slidebox.html (Jquery slidebox)

Wieso nimmst du nicht einfach das fertige Plugin?

Zitat:
wenn ich diese mir im ie ausgeben lasse steht da [object object].
Kann es sein, dass der IE mit dem console.log nicht zurechtkommt? Alert ist immer noch Grütze zum debuggen. Bitte schau dir das hier an: http://fixingthesejquery.com/#slide1
__________________
++++ Wieder einer ins Netz gegangen: Phishers Fritz zufrieden ++++
Blog
rudygotya ist offline   Mit Zitat antworten
Alt 06.02.2012, 12:42  
Benutzer
 
Registriert seit: 13.12.2011
Beiträge: 47
PHP-Kenntnisse:
Anfänger
dula89 befindet sich auf einem aufstrebenden Ast
Standard
ja ok =)

ich hab jetzt folgendes plug in genommen jquery cycle und auch fast alles so hin bekommen wie ich es wollte...
jetzt habe ich nur folgendes Problem und zwar vergibt das plugin beim "faden" ein z-index, allerdings habe ich Box die auch ein z-index hat.
Diese hat zb. ein z-index von 10 und die fade "objekte" in mein Fall ist es Text, ein z-index von 5 bzw 6. Somit wird der Content durch die Box überdeckt.
Allerdings brauch ich die Box mit dem 10er z-index da diese ein Schatten hat.

Ich habe schon versucht, einen neuen DIV mit dem Schatten dazwischen zu machen allerdings sieht das ganze nicht grade toll aus...

Hat jemand eine Idee wie ich das ganze lösen könnte?
dula89 ist offline   Mit Zitat antworten
Alt 07.02.2012, 08:02  
Benutzer
 
Registriert seit: 13.12.2011
Beiträge: 47
PHP-Kenntnisse:
Anfänger
dula89 befindet sich auf einem aufstrebenden Ast
Standard
Ich habe eine Frage was das Plugin Cycle angeht und zwar wollte ich wissen ob man den Pager noch stylen kann. Und zwar wie folgt, momentan sieht er wie folgt aus:

PHP-Code:
.nav{
    text-align: center;
    margin-top: 15px;
    position: relative;
    left: 10px;
    top: -385px;
    font-size: 0.9em;
}

.nav a{
    float: left;
    margin-right: 5px;
    width: 23px;
    height: 18px;
    padding-top: 4px;
    border-bottom: 4px solid #C1C1C1;
    cursor: pointer;
    font-size: 0.8em;
}
#nav .activeSlide {
    background-color: #f2f1f1;
    border-bottom: 4px solid #75DCFF;
} 
Also ganz einfach gehalten, ein Background und ein Border-bottom. Ich würde gern wenn Page ein Sprung nach vorne macht oder zurück, das er zum nächsten Slided. Also das er immer left: 25px macht oder right: 25px

Kann man das ganze umsetzten oder ist es nicht möglich?
dula89 ist offline   Mit Zitat antworten
Alt 07.02.2012, 11:08  
Erfahrener Benutzer
 
Registriert seit: 28.05.2008
Beiträge: 2.094
PHP-Kenntnisse:
Fortgeschritten
rudygotya ist einfach richtig nettrudygotya ist einfach richtig nettrudygotya ist einfach richtig nettrudygotya ist einfach richtig nettrudygotya ist einfach richtig nett
Standard
zeig uns doch mal ein vereinfachtes online-beispiel
__________________
++++ Wieder einer ins Netz gegangen: Phishers Fritz zufrieden ++++
Blog
rudygotya ist offline   Mit Zitat antworten
Alt 07.02.2012, 11:54  
Benutzer
 
Registriert seit: 13.12.2011
Beiträge: 47
PHP-Kenntnisse:
Anfänger
dula89 befindet sich auf einem aufstrebenden Ast
Standard
mh iwie schwer ein Beispiel zu finden, da das iwie kaum jemand verwendet bei den meisten werden die Steps einfach dann makiert(angezeigt) als punkt oder viereck^^

vllt hilft das hier http://wowslider.com/jquery-image-ro...blur-demo.html oben rechts sieht man, wo man sich gerade befindet und die Punkte sollen sich von a nach b verschieben und nicht mit einfach auf blinken.^^ Also quasi nach rechts sliden, über die freiefläche zwischen den einzelnen Punkten und dann halt bei dem nächsten Punkt halten.

Mit meinen "eigenem" SLider hab ich das ganze hin bekommen, leider bugt dieser im ie total rum und kann ihn deswegen nciht benutzten.
dula89 ist offline   Mit Zitat antworten
Alt 08.02.2012, 12:41  
Benutzer
 
Registriert seit: 13.12.2011
Beiträge: 47
PHP-Kenntnisse:
Anfänger
dula89 befindet sich auf einem aufstrebenden Ast
Standard
Ich habe mich nun doch wieder meinen eigenen Slider gewidmet. Momentan läuft auch fast alles . Mein einziges Problem ist grad noch, wenn ich auf mein pager klicke, das nachdem das entsprechende Bild angezeigt wird, meine Slideshow nicht erneuert startet.

hier kurz etwas code
PHP-Code:
jQuery("#stepImage ul").children().each(function(){
                        jQuery(this).click(function(){
//                            jQuery("#imageblock").children().each(function(){
//                                jQuery(this).css({opacity: 0})});
//                            jQuery("#imageblock").children().each(function(){
//                                    jQuery(this).hide();
//                                });
//                          hideAll();     
//                            setTimeout("timer", 10000); 
                            clearTimeout(timer); 
                            stepCount = 1;
//                            imageCounter = parseInt(jQuery(this).attr("rel"));
                            
                            listId = jQuery(this).attr("id");
                            showElementId = listId.slice(listId.length -1, listId.length);
                            currentRange = 28 * (showElementId) -28;
                            jQuery("#stepImageShow").animate({"left": +currentRange+"px"}).addClass("sliderlistactiv");
//                            console.log(showElementId);
                            showElementId = parseInt(showElementId);
                            slideShow(showElementId);
                            showElementId = parseInt(showElementId);
                            setTimeout(goSlider, 5000);
                        });
                        function goSlider(){
                            showElementId = showElementId + 1;
                            jQuery("#stepImageShow").animate({"left": "+=28px"}).addClass("sliderlistactiv");
                            slideShow(showElementId);
                            stepCount = 0;
                        }
                    });
                });
function countChildElements(parent, child){
                    var parent = document.getElementById(parent);
                    childCount = parent.getElementsByTagName(child).length;
                }
                var valueTime = 10000;
                var stepCount = 0;
                var imageCounter = 1;
                var test = 0;
                var currentRangeTest = 28 * (imageCounter);
                var childCount;
                var sliderImage;
                
                // alle verwendeten Blöcke werden auf hide gesetzt
                // und jQuery wird gestopt
                function hideAll(){ 
                    $("#project_logo").hide();
                    jQuery("#project_logo").children().each(function(){
                        jQuery(this).hide();
                    });
                    jQuery("#stepImage ul").children().each(function(){
                        jQuery(this).removeClass("sliderlistactiv");
                    });
                    jQuery(".sliderText").each(function(){
                        jQuery(this).hide();
                    });
                }
                /**
                 * use_id wert übergabe von klick event
                 * countChildElements wird auf gerufen und zählt die Anzahl 
                 * hideall wird aufgerufen, alle blöcke werden auf display none gesetzt
                 * parseInt wandet die übergebene use_id in integer um
                 * 
                 */
                function slideShow(use_id){ 
                    countChildElements("imageblock", "img"); 
                    hideAll(); 
                    
                    parseInt(use_id);
                    if(use_id) {
                        imageCounter = use_id; 
                    } 
                    
                    if(imageCounter == 1){
//                        console.log('first step');
                        jQuery("#imageblock").children().each(function(){
                            jQuery(this).animate({opacity: 0}, 0).css('display', 'none');
                        });
                        jQuery("#sliderImage_"+imageCounter).css("display", "block").css("opacity", "1");
                        jQuery("#sliderImage_"+imageCounter).fadeTo(5000, 1);
                        jQuery("#project_logo").show();
                        jQuery("#containerProjectImage_"+imageCounter).show();
                        jQuery("#text_"+imageCounter).show();
//                        .fadeTo(4000, 1)
                    }
                   
                    // Wenn der Imagecounter größer ist als childCount
                    // wird der imageCounter auf 1 gesetzt
                    // die einzehlen Containter werden auf show gesetz
                    // Falls #containerProjectImage + (id) kein img hat wird der Container ausgeblendet
                    // imageCounter wird um +1 erhöht 
                    if(imageCounter > childCount) {
                        imageCounter = 1;
                      jQuery("#imageblock").children().each(function(){
//                                 console.log('id = ' + jQuery(this).attr('id') + '  actual display = ' + jQuery(this).css("display"));
                                if(jQuery(this).css("display") == "block"){
                                    sliderImage = jQuery(this);
                                }
                        });
                       jQuery("#sliderImage_"+imageCounter).css('display','block').animate({opacity: 1}, 2000);
//                        console.log("##################################");
//                        console.log("counter ="+imageCounter);
//                        
                        sliderImage.animate({opacity: 0}, 2000,function(){
                            sliderImage.css("display", "none");
                        });
                        jQuery("#stepImageShow").animate({"left": "0px"});
                        jQuery("#stepImageShow").removeClass("sliderlistactiv");
                        if(jQuery("#containerProjectImage_"+imageCounter+" img").attr("src") == "") {
                            jQuery("#project_logo").hide();
                            jQuery("#menu_li_"+imageCounter).addClass("sliderlistactiv");
                        } else {
                            jQuery("#project_logo").fadeIn(2000);
                             jQuery("#text_"+imageCounter).fadeIn(2000);
                            jQuery("#menu_li_"+imageCounter).addClass("sliderlistactiv");
                            jQuery("#containerProjectImage_"+imageCounter).fadeIn(2000);
                            imageCounter = imageCounter + 1;
                        }
//                        imageCounter = imageCounter + 1;
                        // wenn imagecounter nicht größer ist als childcount
                        // Slider Image und Text werden angzeigt danach
                        // wird gesprüft ob  ProjectImage vorhanden ist
                        // wenn nicht wird der Container dafür ausgeblendet
                        // ansonsten angezeigt 
                    } else {
//console.log("nach mouseout = "+showElementId);
                        jQuery("#imageblock").children().each(function(){
//                                 console.log('id = ' + jQuery(this).attr('id') + '  actual display = ' + jQuery(this).css("display"));
                                if(jQuery(this).css("display") == "block"){
                                    sliderImage = jQuery(this);
//                                    console.log("so heiß ich "+jQuery(this));
                                }
                        });
                        
                        jQuery("#sliderImage_"+imageCounter).css('display','block').fadeTo(4000, 1);
                        
//                        console.log("counter ="+imageCounter);
//                        
                        sliderImage.fadeTo(4000, 0,function(){
                            sliderImage.css("display", "none");
//                            console.log(sliderImage);
                        });
//                        console.log('slider = ' + sliderImage.attr('id'))
//                        console.log("######################################")

                        if(jQuery("#containerProjectImage_"+imageCounter+" img").attr("src") == "") {
                            jQuery("#project_logo").hide();
                            jQuery("#menu_li_"+imageCounter).addClass("sliderlistactiv");
                            jQuery("#text_"+imageCounter).fadeIn(2000);
                            
                        } else {
                            jQuery("#project_logo").fadeIn(2000);
                            jQuery("#text_"+imageCounter).fadeIn(2000);
                            jQuery("#menu_li_"+imageCounter).addClass("sliderlistactiv");
                            jQuery("#containerProjectImage_"+imageCounter).fadeIn(2000);
                        }
                        imageCounter = imageCounter + 1;   
                    }
                    // wenn use_id nicht gesetzt ist startet die slideshow nach 8 sekunden neu
                    if(!use_id) {
                        if(imageCounter > 2) {
                            jQuery("#stepImageShow").animate({"left": "+="+currentRangeTest+"px"}).addClass("sliderlistactiv");
                        }
                        timer = setTimeout('slideShow()', valueTime);
                    }
//                    imageCounter = imageCounter + 1;   
                } 
Ich glaube es liegt am letzten Teil if(!use_id) ....bin mir aber nicht sicher ich bin schon fleißig am probieren..
dula89 ist offline   Mit Zitat antworten
Antwort

« jquery fade in | Kombiniation aus Dropdownliste und Eingabefeld »

Themen-Optionen
Thema bewerten
Thema bewerten:

Forumregeln
Es ist dir nicht erlaubt, neue Themen zu verfassen.
Es ist dir nicht erlaubt, auf Beiträge zu antworten.
Es ist dir nicht erlaubt, Anhänge hochzuladen.
Es ist dir nicht erlaubt, deine Beiträge zu bearbeiten.
BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are an
Gehe zu

Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
[Erledigt] Banner – Slideshow programmieren JoeBärlin Gewerblich 1 13.09.2011 19:54
[Erledigt] [Suche] jemanden der mir eine Slideshow umsetzt mit CSS und jQuery tooken Gewerblich 0 15.06.2011 15:53
Slideshow und document write Probelm tooken JavaScript, Ajax und mehr 14 06.06.2011 21:16
jQuery Slideshow Probleme IE nutcracker JavaScript, Ajax und mehr 1 29.01.2011 20:50
Fehler bei Slideshow SleepWalker86 JavaScript, Ajax und mehr 1 26.11.2010 19:05
Dynamische slideshow php Daani PHP Tipps 2010 10 02.09.2010 21:30
Slideshow automatisieren? BartTheDevil89 JavaScript, Ajax und mehr 3 28.03.2010 19:13
Lightbox (Klon) Slideshow über mehrer Seiten Lenki JavaScript, Ajax und mehr 0 19.02.2010 00:10
Slideshow Script Problem Sebo HTML, Usability und Barrierefreiheit 1 07.09.2009 12:47
Slideshow mit Anzeige durch einem Textlink Bloedlah PHP Tipps 2009 4 23.08.2009 23:17
News Slideshow fager PHP Tipps 2006 6 29.03.2006 22:30
Slideshow mit Bildern vom anderen Server geht nicht! :-( PHP Tipps 2005 7 08.05.2005 18:18
problem bei Slideshow HTML, Usability und Barrierefreiheit 1 20.10.2004 23:59

Besucher kamen über folgende Suchanfragen bei Google auf diese Seite
-ms-filter in animate() jquery, jquery console.log show attribute, console.log ie ausgeben object, wow slider wird nicht im internet explorer dargestellt, jquery internet explorer 7 alpha, jquery cycle plugin fehler im ie7, slideshow ie7 geht nicht, jquery ie7 img attr, slideshow for ie7

Alle Zeitangaben in WEZ +2. Es ist jetzt 12:07 Uhr.

php.de - Das deutsche PHP-Forum - Kontakt - Impressum - Forenregeln - Archiv - Nach oben



Powered by vBulletin® Version 3.7.2 (Deutsch)
Copyright ©2000 - 2012, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.2.0
Aprilia-Forum, Aquaristik-Forum, Liebeskummer-Forum, Zierfisch-Forum, Geizkragen-Forum