Antworten auf deine Fragen:
Neues Thema erstellen

Nach Klick wird Seite weiß

S

skiron

Guest

Läuft da irgendwo noch ein Script welches man nicht im Quellcode sehen kann? PHP oder js? Wird der Klick evtl ausgewertet (Counter etc) und das Script führt ins Leere?
Um mehr zu sagen müsste man den "echten" Quellcode sehen inkl. css
 

dn3d_fanboy

Aktives Mitglied

Also ich habe mit dem aktuellen Firefox keine Probleme.
Bei Klick auf einen Link erscheint so ein Ladedings und dann öffnet sich die Seite.
 

patrick_l

Hat es drauf

Läuft da irgendwo noch ein Script welches man nicht im Quellcode sehen kann? PHP oder js?
Da JavaScript Client-seitig verarbeitet und ausgeführt wird, wird man all jene auch im Quellcode finden. Server-seitig wäre es wenn überhaupt mit Ajax. Dem Markup nach auch kein CMS am werkeln ist. An sich ne einfache statische Website.
Um mehr zu sagen müsste man den "echten" Quellcode sehen inkl. css
In Chrome mit Strg+Shift+I die Developer-Tools aufrufen oder mit einem Rechtsklick über Kontextmenü den Quellcode anzeigen lassen. ;) Wenn ich mir das Markup anschaue, denke ich das hier mit Bootstrap Snippets gearbeitet wurde.

Die Performance deiner Website ist nicht die Beste. Markup habe ich jetzt nicht validiert. Trotzdem gibt es hier und einige Baustellen. Bündel alle verwendeten Scripte in einem File. Lediglich jQuery getrennt laden. Ebenso alles vor den schließenden Body-Tag packen.

Was jQuery angeht, wird dieses zweimal eingebunden. Einmal unter »Mousewheel Scroll« über Google APIs und kurz direkt danach unter »Hauptscripte« samt Migration. Dies solltest du ändern. Binde lediglich die aktuellste 1.x Version ein. Danach kurz überprüfen ob die verwendeten Plugins herum zicken oder nicht. ;)

Liebe Grüße, Patrick
 
Zuletzt bearbeitet:
S

skiron

Guest

@patrick_l
Mit "echtem" Quellcode meinte ich den originalen Quellcode. Rein theoretisch könnte die HTML-Seite, dessen Quellcode im Browser zu sehen ist, von einem Script (mit PHP zb) generiert worden sein. OnDemand-Lösungen sollten dir nicht fremd sein, vermute ich mal.
 

patrick_l

Hat es drauf

Rein theoretisch könnte die HTML-Seite, dessen Quellcode im Browser zu sehen ist, von einem Script (mit PHP zb) generiert worden sein.
Mir ging es lediglich um JavaScript. Was jetzt das eigentliche Problem angeht, konnte ich es hier nicht reproduzieren. So ins blaue jedoch das »JS-Gefrickel« als Ursache vermute. Wobei das Markup auch nicht prickelt ausschaut.
OnDemand-Lösungen sollten dir nicht fremd sein, vermute ich mal.
That's true :)

Liebe Grüße, Patrick
 
G

Gelöschtes Mitglied 345460

Guest

Die "Links", die Probleme machen sind die drei mitten auf der Seite. Naja, die Tel als Link ist eh quatsch. Mailto öffnet zwar mein mailprogramm, aber die Seite wird weiß. Und Facebook öffnet nicht eine neue Seite, sondern öffnet im eigenen Fenster.... Denke diese meint er.
 

Foos

Member

Die "Links", die Probleme machen sind die drei mitten auf der Seite. Naja, die Tel als Link ist eh quatsch. Mailto öffnet zwar mein mailprogramm, aber die Seite wird weiß. Und Facebook öffnet nicht eine neue Seite, sondern öffnet im eigenen Fenster.... Denke diese meint er.


Ich danke euch schon mal für die Antworten. Ja, die Seite hab ich damals von einem Wordpress Theme in HTML umgebaut. Bisher gab es da eigentlich nie Probleme.

Es geht mir um die Links genau. Es öffnet sich eben immer die weiße Seite nach einem Klick.

Ich denke auch, dass es vielleicht irgendwo in der functions.js liegt. Aber ich weiß nicht wo, ich was ändern soll ;)

Die functions.js sieht so aus:
Javascript:
/**
* Theme functions file
*
* Contains handlers for navigation, accessibility, header sizing
* footer widgets and Featured Content slider
*
*/
var _tablet_width = 950;
var _window = jQuery(window);
var _document = jQuery(document);
var _body = jQuery('body');

function fullHeight(el) {
    return el.height() + parseInt(el.css('padding-top')) + parseInt(el.css('padding-bottom'))
        + parseInt(el.css('border-top-width')) + parseInt(el.css('border-bottom-width'));
}

(function($) {
    // Footer & header hacks for single pages
    var fixed = {
        header: false,
        footer: false,
        page: false,
        container: false,
        init: function() {
            this.header = $('#masthead');
            this.footer = $('#colophon');
            if (this.header.length == 1 && this.footer.length == 1) {
                this.page = $('#page');
                this.container = $('.hentry');
                _window.on('ready load resize', fixed.process);
            }
        },
        process: function() {
            if (_window.width() > _tablet_width) {
                fixed.updateScroll();
                _window.on('scroll.fixed', fixed.updateScroll);
            }
            else {
                _window.off('scroll.fixed');
            }
        },
        updateScroll: function() {
            var admin_bar = 0;
            if ($('#wpadminbar').length == 1) {
                admin_bar = $('#wpadminbar').height();
            }

            var top = _window.scrollTop();
            var header_height = fullHeight(fixed.header);
            if (top <= header_height + admin_bar) {
                fixed.header.css({
                    top: admin_bar - top
                });
            }
            else {
                fixed.header.css({
                    top: -1 * header_height - admin_bar
                });
            }

            var from_top = top + _window.height() - admin_bar;
            var page_height = fullHeight(fixed.page);
            if (fixed.container.length == 1) {
                var container_height = fullHeight(fixed.container) + header_height;
                if (page_height < container_height) {
                    page_height = container_height;
                }
            }
            var footer_height = fullHeight(fixed.footer);
            if (page_height - from_top < footer_height) {
                fixed.footer.css({
                    bottom: -1 * (page_height - from_top)
                });
            }
            else {
                fixed.footer.css({
                    bottom: -1 * footer_height
                });
            }
        }
    };
    fixed.init();

    // index gallery
    var index = {
        el: false,
        images: [],
        count: 0,
        first_image: false,
        init: function() {
            this.el = $('body.home .main-content');
            if (this.el.length == 1) {
                this.update();
                if (this.count != 0) {
                    this.first_image = $(this.images[0]);
                    _window.on('ready load resize', index.process);
                }
            }
        },
        update: function() {
            index.images = index.el.find('img');
            index.count = index.images.length;
        },
        process: function() {
            var height = index.first_image.height();
            var padding = parseInt(index.first_image.parents('.post').css('padding-right'));
            index.images.each(function() {
                var image = $(this);
                if (_window.width() > _tablet_width) {
                    var ratio = image.attr('width') / image.attr('height');
                    var width = Math.round(height * ratio);
                    image.css('width', width + 'px');
                    image.parents('.post').css('width', width + padding + 'px');
                }
            });
        }
    };
    index.init();

    // single page gallery
    var gallery = {
        duration: 300,
        el: false,
        images: [],
        count: 0,
        first_image: false,
        init: function() {
            this.el = $('.gallery-animated');
            if (this.el.length == 1) {
                this.update();
                if (this.count != 0) {
                    this.first_image = $(this.images[0]);
                    _window.on('ready load resize', gallery.process);
                }
            }
        },
        update: function() {
            gallery.images = gallery.el.find('img');
            gallery.count = gallery.images.length;
        },
        process: function() {
            var height = gallery.first_image.height();
            var padding = parseInt(gallery.first_image.parent().css('padding-right'));
            gallery.images.each(function() {
                var image = $(this);
                image.off('click');
                if (_window.width() > _tablet_width) {
                    var ratio = image.attr('width') / image.attr('height');
                    var width = Math.round(height * ratio);
                    image.css('width', width + 'px');
                    image.parent().css('width', width + padding + 'px');
                    image.on('click', function(event) {
                        event.preventDefault();
                        gallery.move(image);
                    });
                }
            });
        },
        move: function(image) {
            var scroll = _window.scrollLeft();
            var window_width = _window.width();
            var offset = gallery.offset(image, window_width);
            var index = image.parent().index();
            if (offset == scroll) { // current image clicked
                if (index != gallery.count - 1) { // not last image clicked
                    offset = gallery.offset($(gallery.images[index + 1]), window_width);
                } else {
                    offset = gallery.offset(gallery.first_image, window_width);
                }
            }
            if (offset != scroll) {
                $('html, body').stop().animate({ scrollLeft: offset }, gallery.duration);
            }
        },
        offset: function(image, window_width) {
            var offset = image.offset().left;
            var width = image.width();
            if (width < window_width) {
                offset -= Math.round((window_width - width) / 2);
            }
            return offset;
        }
    };
    gallery.init();

    // Infinite loading for index page
    var loading = {
        start_from: 500,
        el: false,
        nav: false,
        loader: false,
        enabled: true,
        ajax: false,
        init: function() {
            this.el = $('.paging-navigation a');
            if (this.el.length == 1) {
                this.nav = this.el.parent();
                this.loader = $('#infinite-loader');
                _window.on('ready load resize scroll.loading', loading.process);
            }
        },
        process: function() {
            if (loading.enabled && !loading.ajax) {
                var ajax = false;
                if (_window.width() > _tablet_width) {
                    if (_window.scrollLeft() > _document.width() - _window.width() - loading.start_from) {
                        ajax = true;
                    }
                }
                else {
                    if (_window.scrollTop() > _document.height() - _window.height() - loading.start_from) {
                        ajax = true;
                    }
                }
                if (ajax) {
                    loading.loader.addClass('active');
                    loading.ajax = true;
                    $.ajax({
                        type: 'GET',
                        url: loading.el.attr('href'),
                        dataType: 'html',
                        success: function(response) {
                            var html = $(response);
                            var next_link = html.find('.paging-navigation a');
                            var items = html.find('#main-content .hentry');
                            items.each(function() {
                                $(this).insertBefore(loading.nav);
                            });
                            index.update();
                            index.process();
                            if (next_link.length == 1) {
                                loading.el.attr('href', next_link.attr('href'));
                                loading.ajax = false;
                            }
                            else {
                                _window.off('scroll.loading');
                            }
                            loading.loader.removeClass('active');
                        }
                    });
                }
            }
        }
    };
    loading.init();

    // load animations
    var load_effect = {
        duration: 300,
        els: [],
        loader: $('#infinite-loader'),
        init: function() {
            var els = $('.nav-menu > li');
            if (els.length != 0) {
                els.each(function() {
                    load_effect.els.push($(this));
                });
            }
            $('a').on('click', function(e) {
                e.preventDefault();
                load_effect.loader.show();
                var href = $(this).attr('href');
                $('.site').css('opacity', 0);
                setTimeout(function() {
                    window.location = href;
                }, load_effect.duration);
            });
            _window.on('ready pageshow', function() {
                load_effect.loader.show();
                $('.site').css('opacity', 1);
                setTimeout(function() {
                    load_effect.loader.hide();
                    if (load_effect.els.length != 0) {
                        load_effect.process();
                    }
                }, load_effect.duration);
            });
        },
        process: function() {
            $(load_effect.els[0]).animate(
                { opacity: 1 },
                load_effect.duration,
                function() {
                    load_effect.els.shift();
                    if (load_effect.els.length != 0) {
                        load_effect.process();
                    }
                }
            );
        }
    };
    load_effect.init();

    /**
     * Menus for desktop view
     */
    function updateMenuItem(li) {
        var ul = li.find('> ul');
        if (!ul.hasClass('submenu-visible')) {
            var parent = li.parent();
            parent.find('li').removeClass('submenu-active');
            li.addClass('submenu-active');
            parent.find('ul').removeClass('submenu-visible');
            ul.addClass('submenu-visible');
        }
        else {
            li.removeClass('submenu-active');
            ul.removeClass('submenu-visible');
            ul.find('ul').removeClass('submenu-visible');
        }
    }

    $('.site-navigation > div > ul > li').on('hover', function() {
        var li = $(this);
        updateMenuItem(li);
    });

    $('.site-navigation > div > ul > li > a').on('touchstart', function(e) {
        if (_window.width() > _tablet_width) {
            e.preventDefault();
            var li = $(this).parent();
            updateMenuItem(li);
        }
    });

    // removes visible submenus on safari for bfcache (when back button is clicked)
    _window.bind('pageshow', function(e) {
        if (e.originalEvent.persisted) {
            $('.submenu-visible').removeClass('submenu-visible');
            $('.submenu-active').removeClass('submenu-active');
        }
    });

    // Enable menu toggle for small screens.
    (function() {
        var nav = $('#primary-navigation');
        if (!nav) {
            return;
        }

        var button = $('.menu-toggle');
        if (!button) {
            return;
        }

        // Hide button if menu is missing or empty.
        var menu = nav.find('.nav-menu');
        if (!menu || !menu.children().length) {
            button.addClass('hidden');
            return;
        }

        $('.menu-toggle').on('click', function() {
            loading.enabled = false;
            _body.addClass('toggled-on');
        });

        $('#navigation-close').on('click', function() {
            _body.removeClass('toggled-on');
            loading.enabled = true;
        });
    })();
})(jQuery);
 

patrick_l

Hat es drauf

Naja, die Tel als Link ist eh quatsch.
;)
Guten Morgen und nein, kein quatsch. Was mobile Devices (primär Smartphones) angeht, sollte die Telefonnummer allein schon der Usability wegen als Link eingebunden werden. So ist genau diese anklickbar und kann so ohne weitere Umwege direkt angerufen oder unter Kontakte gespeichert werden.

- Kulturbanause: Anklickbare Telefonnummern

Edit:
@Foos Deine Website schau ich mir später nochmal an. Jetzt erst einmal Feierabend mache. Zeit fürs Bett.

Liebe Grüße, Patrick
 
Zuletzt bearbeitet:
G

Gelöschtes Mitglied 345460

Guest

So ist genau diese anklickbar und kann so ohne weitere Umwege direkt angerufen oder unter Kontakte gespeichert werden.
Danke, das wusste ich nicht. Wieder was gelernt. Allerdings sollte, laut der Aussage in deinem Link, die Tel dann auch nicht auf die Website verweisen, sondern "tel:+4917012345678" enthalten?

Wenn man bei mailto und tel als Ziel -> target="_blank" <- in die Linkangabe einfügt, wird ja ein neues Fenster/Tab aufgerufen, in dem der Link verarbeitet wird. Dann dürfte die offene Seite theoretisch keinen weißen Inhalt mehr zeigen...Oder denk ich gerade zu einfach??? Für Facebook wäre es zumindest empfehlenswert, damit die eigendliche Seite offen bleibt und FB im neuen Tab geöffnet wird, oder?
 
Zuletzt bearbeitet von einem Moderator:
S

skiron

Guest

Ich würde die Navigation einfach mal aus dem "Zugriff" eines Scriptes nehmen und ganz schlichtes HTML arbeiten lassen. Dann klappt dat!
Denn dass da irgendwas Zugriff auf die Seite/Navi hat merkt man schon daran, dass das Drücken der Ctrl-Taste beim Klick auf einen Link keinerlei Auswirkung hat.
Auch wenn ich mit der mittleren Maustaste klicke hat das keine Auswirkung.

Ich als User finde es recht nervig wenn mir eine Seite vorschreiben will in welchem Tab ich neue Seiten öffne. Deshalb ist die Benutzung von target für mich auch keine Option.
 

patrick_l

Hat es drauf

Allerdings sollte, laut der Aussage in deinem Link, die Tel dann auch nicht auf die Website verweisen, sondern "tel:+4917012345678" enthalten?
Ich habe mir den Link vorher nicht angeschaut. Lediglich auf deine Aussage das es Quatsch wäre geantwortet. Natürlich muss der Link dann die Telefonnummer beinhalten. Eine Website kann man ja schlecht anrufen. ;) Mit dem verlinken von Nummern kann man so auch wunderbar zu WhatsApp, Skype und Co. weiterleiten. Cool, oder? :)
Wenn man bei mailto und tel als Ziel -> target="_blank" <- in die Linkangabe einfügt, wird ja ein neues Fenster/Tab aufgerufen, in dem der Link verarbeitet wird. Dann dürfte die offene Seite theoretisch keinen weißen Inhalt mehr zeigen...Oder denk ich gerade zu einfach???
Hängt davon worauf verlinkt wird. Bei Telefonnummer und E-Mail Adressen sollte das target-Attribut weg gelassen werden. Über die Parameter tel: und mailto: innerhalb des hrefs weiß der Browser dann, wie er dieses verarbeiten soll/muss.
Für Facebook wäre es zumindest empfehlenswert, damit die eigendliche Seite offen bleibt und FB im neuen Tab geöffnet wird, oder?
Eine einfache »Regel«: Alles was von der eigenen Website wegführt, mit dem taget-Attribut versehen. Bei Seiten internen Querverweisen dann logischerweise umgekehrt.

Liebe Grüße, Patrick
 

Foos

Member

Ich würd ja gern das Script bei der Kontaktseite entfernen. Also komplett auf diese Fade-Effekte entfernen. Allerdings wenn ich nur ein paar Zeilen Code lösche, dann geht gar nix mehr. :(

Und wenn ich dem Mail-Link "target=_blank" zuweise, dann kommt trotzdem die weiße Seite.

Ich bin am Ende :D
 
G

Gelöschtes Mitglied 345460

Guest

In deinem Code die Zeilen 248 bis 293 dürften der Fade-Effekt sein.
 
G

Gelöschtes Mitglied 345460

Guest

Mit Java kenn ich mich nicht wirklich aus... Vlt kann Dir jemand anderes weiter helfen. Fange selbst betrtieblich bedingt gerade mit VB.net an. Denke, da spielt noch mehr Code eine Rolle, da die Seite ja anscheinen auch erst gecached wird bevor sie angezeigt wird. Wahrscheinlich muss das auch raus. Was passiert denn, wenn Du die Funktion.js garnicht lädtst? Oder hängt da auch noch Menü-Code drin?
 

patrick_l

Hat es drauf

Hätte auch gern die ganze Funktion.js einfach weggehauen. Aber da steckt tatsächlich Menü-Code drin. :(
@Foos Ich bin jetzt kurz einkaufen. Pack mal deine Website in ein Zip-Archiv, lade das ganze bei einem File-Hoster oder auf deinem Webspace hoch und schick mir den Link per PN. Dann kann ich mir das gleich in aller Ruhe lokal anschauen. Es reicht wenn du dein Markup samt CSS und Scripte zusammenschnürst.

Liebe Grüße, Patrick
 
G

Gelöschtes Mitglied 345460

Guest

Du könntest es evt umgehen, wenn Du in Zeile 264 die Opacity statt 0 auf 1 setzt. Dann wird die Seite bei einem Klick auf einen Link nicht Unsichtbar gesetzt. Dan müsstest Du die funktion.js als funktion2.js abspeichern und nur auf der Seite einbinden, damit der Effekt nur hier deaktiviert wird.
Das script erwartet anscheinend ein neuladen der Seite, wenn man auf einen Link klickt. Da aber keine neue Seite geladen wird, wird der Teil zum wieder Sichtbarmachen nicht mehr ausgeführt.
Um einzelne Links von dem Effekt auszuschließen, müsste man eine Abfrage in die funktion.js einbauen, die bei speziell gekennzeichneten Links bzw Links mit speziellem Inhalt den Loadeffekt deaktiviert.
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.634
Beiträge
1.538.447
Mitglieder
67.555
Neuestes Mitglied
scheflo
Oben