[une_art / Portfolio & Blog] WIP-Kritik

une_art · 11.01.2012

AW: [une_art / Portfolio & Blog] WIP-Kritik

Oh! Ups, da hast du natürlich vollkommen recht. Ich muss die Inhalte echt noch mal komplett auf solche Fehler durchschauen. Danke für den Tipp!

EDIT: Ich habe einen Großteil der Fehler beseitigt. Falls irgendwer noch ein falsches "Webseite" findet, immer her damit ;-)

Myhar · 11.01.2012

AW: [une_art / Portfolio & Blog] WIP-Kritik

une_art schrieb:
Das Kontaktformular wollte ich auf der Startseite nur anzeigen lassen, wenn Javascript angeschaltet ist. Ansonsten müsste ich ihm per Javascript ein display:none zuweisen und dann würde bei jedem laden der Seite erst das Kontaktformular kurz erscheinen, dann mit JS ausgeblendet werden um beim Klickem wieder zu erscheinen.

Das mit dem ein- und gleich wieder ausblenden (flackern) ist tatsächlich ein nerviges Problem. Eine Lösung, welche ich einmal gefunden habe und welche gut funktioniert, um das flackern zu reduzieren (bzw. zu entfernen) ist folgende. Der Nachteil der Lösung ist jedoch, dass ein zusätzliches CSS erstellt werden muss. Dieses CSS muss aber nur ein paar Anweisungen enthalten und so gut wie nie geändert werden.

HTML:

<link type="text/css" rel="stylesheet" href="/css/default.css" />
<script type="text/javascript">
//<![CDATA[
document.write('<link type="text/css" rel="stylesheet" href="/css/JSactivated.css?1.x" media="screen, projection" />');
//]]>
</script>


In der default.css:
.hidden {display:block} /*zeigt die Elemente für User ohne JS an*/

In der JSactivated.css:
.hidden{display:none} /*Versteckt die Elemente, sobald das CSS geladen wurde -> Es ist kein ondomready notwendig*/

Ich habe noch eine Unterscheidung zwischen inline und blockelementen in meiner default.css gemacht. Eine Klasse .hidden und eine .hidden_InlineElement,welche ein display:inline in der default.css bekommen hat.
Mit der Methode kann man auch Elemente, für User ohne JS anzeigen und für User mit JS verstecken. Mehr braucht man eigentlich nicht

une_art schrieb:
Die Projektfilter funktionieren leider ohne Javascript nicht, da der ganze FIlter darauf aufbaut. Allerdings kann man die Projekte trotzdem in der Einzelansicht anschauen. Ich werde aber noch einmal überlegen, die Filter-Buttons bei ausgeschaltetem JS ganz auszublenden.

Ein Punkt, welcher mir bezüglich der Projektvorschau noch aufgefallen ist:
Klickt man auf Webdesign Projekte auf der Startseite, werden einem alle Projekte angezeigt (ebenso bei Printdesign Projekte)

une_art schrieb:

Das Wechseln der Projekte bereitet mir auch noch Kopfschmerzen.
Hat jemand eine Idee, wie man das bewerkstelligen könnte? Hier mal der jQuery-Code der Nachlade-Funktion:

Code:

/********************************
    AJAX Project Loader 
*********************************/

    //Define Variables
        var project_single = $("#single-project");
        var project_load = $("#project-loading");
        var project_wrap = $("#single-project-wrapper");
        var project_trigger = $(".prothumb a");
        var project_close = $("#project-hide");
        
    $.ajaxSetup({cache:false});
    
    // hide Project view on start
    project_single.slideUp(); 

    //Click Event
    project_trigger.click(function(){
    
        showLoading(); //Show Loading animation
                             //(Diese Funktion nur aufrufen, wenn kein Projektfenster sichtbar ist... Also so in etwa: 
    
/*Pseudocode:
if projekt_single.display ==  'none' showLoading();
*/

        
        var post_id = $(this).attr("rel")
        
        project_single.slideUp(); //Hide previous project
                                         //Ebenfalls nru ausführen, wenn kein Projekt offen ist.
        
        
        project_single.load("../project-load/",{id:post_id}, function(){
            hideLoading(); //Hide Loading button and show project
            showClose(); //Show close Button
            pro_nivo();
            $('html,body').delay(450).animate({scrollTop: 200}, 700);
        });
        return false;
        
    });

Habe dir den relevanten Teil des Codes mit JS Kommentaren versehen, damit du siehst, wo was zu ändern ist. So schwierig sollte das nicht sein

Viel Erfolg noch.

une_art · 11.01.2012

AW: [une_art / Portfolio & Blog] WIP-Kritik

Myhar schrieb:
Ein Punkt, welcher mir bezüglich der Projektvorschau noch aufgefallen ist:
Klickt man auf Webdesign Projekte auf der Startseite, werden einem alle Projekte angezeigt (ebenso bei Printdesign Projekte)

Habe dir den relevanten Teil des Codes mit JS Kommentaren versehen, damit du siehst, wo was zu ändern ist. So schwierig sollte das nicht sein
Viel Erfolg noch.

Die Links von der Startseite sind auch noch so ein Knackpunkt. Gibt es eine Möglichkeit, eine Art Anker trotz Seitenwechsel von Startseite zum Portfolio zu übermitteln, damit das Filter-Script diesen erkennt und dementsprechend "vorfiltert"?

Ich habe die Animation der Projektansicht jetzt wie folgt geändert :

Code:

    //Define Variables
        var project_single = $("#single-project");
        var project_view = $("#single-project > div");
        var project_load = $("#project-loading");
        var project_wrap = $("#single-project-wrapper");
        var project_trigger = $(".prothumb a");
        var project_close = $("#project-hide");
        
    $.ajaxSetup({cache:false});
    
    // hide Project view on start
    project_single.slideUp();
    
    //Click Event
    project_trigger.click(function(){
    
        showLoading(); //Show Loading animation
        
        var post_id = $(this).attr("rel")
        
        project_single.fadeTo(500, 0); //Hide previous project
        
        project_single.load("../project-load/",{id:post_id}, function(){
            hideLoading();    //Hide Loading button and show project
            showClose(); //Show close Button
            pro_nivo();
            $('html,body').delay(450).animate({scrollTop: 200}, 700);
        });
        return false;
        
    });
    
    // close button functions

        project_close.click(function(){
            project_single.fadeTo(700, 0).hide('500');
            hideClose();
        });

        
    // Loading functions
        //show loading bar 
        function showLoading(){ 
            project_load  
                .css({visibility:"visible"})  
                .animate({opacity:"1"}, 400) 
                .css({display:"block"})  
            ;  
        };
        //fade out loading bar and show project view  
        function hideLoading(){  
            project_load.fadeTo(500, 0);  
            showSingle();
        };
        //show close link 
        function showClose(){
            project_close
                .css({visibility:"visible"})
                .animate({opacity:"1"}, 400)
                .css({display:"block"})
            ;
        };
        // fade out close link
        function hideClose(){
            project_close.fadeTo(300, 0);
        };
        // show Project view
        function showSingle(){
            project_single
                .slideDown()        
                .css({visibility:"visible"})  
                .animate({opacity:"1"}, 400)  
                .css({display:"block"})
            ;
        };/* end of AJAX project Loader */

Es scheint soweit ganz gut zu funktinieren, der Wechsel von Projekten ist ein ganzes Stück weniger nervig. Leider slided das Panel beim ersten Öffnen eines Projekts nicht nach unten, sondern erscheint sofort. Obwohl ich in der Funktion showSingle() ein .slideDown() eingebaut habe. Wo ist der Denk-Fehler?
Ich hatte erst eine if-Abfrage versucht, kam aber zu keinem besseren Ergebnis.

Myhar · 11.01.2012

AW: [une_art / Portfolio & Blog] WIP-Kritik

Ja, natürlich. (Ich nehme jetzt pseudolinks, weil ich die Webseite nicht mehr offen habe)
Link 1: www.deineSeite.de/projekte.html#Web
Link 2: www.deineSeite.de/projekte.html#Design
Dann einfach den loc.href auslesen und den Wert hinter dem # abfragen. Das zeigt dir dann, welchen Teil du anzeigen musst.

une_art · 11.01.2012

AW: [une_art / Portfolio & Blog] WIP-Kritik

Es klappt, beim Auruf der Seite die Projekte zu filtern, wenn ich an den Link ein "#type-web" anhänge.

Mittels diesem Code wird dann das Script noch einmal aufgerufen und filtert.

Code:

var hashselector = window.location.hash.substring(1);
var hashselector = "." + hashselector

$('#project-filter').find('.selected').removeClass('selected');
alert(hashselector);

$("#projects").isotope({filter: hashselector});

Allerdings kriege ich es nicht hin, dem nun aktuellen Filter-Button die Klasse "selected" zuzuweisen. Ich hatte es mit folgendem Code versucht:

Code:

$('#project-filter a[data-option-value=hashselector]').addClass('selected');

Aber irgendwie scheint das nicht zu funktionieren. Ich muss vielleicht dazu sagen, dass jeder der Buttons ein Attribut, wie z.B. data-option-value=".type-web" hat um die zu filternde Klasse auszuwählen. Ich dachte, dass ich den Button damit auch ansteuern kann, wenn der hashselector diesen Wert hat.

EDIT: Hat sich erledigt, habe es wie folgt gelöst. Vielleicht nicht der hübscheste Weg, aber es funktioniert.

Code:

var hashselector = window.location.hash.substring(1); //get hash-name from url
    var hashselector = "." + hashselector; // add a . to the hash
    var hashelement = ".btn-" + hashselector.substring(1); // transform hash to .btn-hash
    
    //prevent from beeing executed when there is no hash
    if (hashselector.substring(1).length) {
    $('#project-filter').find('.selected').removeClass('selected'); //remove selected-class from former button
    $('#project-filter').find( hashelement).addClass('selected'); //give new button selected-class
    $("#projects").isotope({filter: hashselector}); //execute filter on hash-class
    return false;
    }