Posts Tagged ‘ CSS

Ukrywanie linków na stronie

Link Camouflage

Często zdarza się, że chcemy żeby jakiś link na naszej stronie ( np. do panelu administracyjnego strony ) nie był widoczny dla wszystkich jednocześnie będąc w miejscu ogólnie dostępnym. Oczywiście zawsze można tego typu linku wrzucić na pasek przeglądarki, niemniej jednak przy paru stronach może być z tym problem. W przypadku WordPress ‘a domyślnie widoczny jest okropny widget „Meta” wyposażony w masę niepotrzebnych linków, dobrze byłoby go zastąpić czymś równie funkcjonalnym ale mniej rzucającym się w oczy. Jak zawsze sposobów rozwiązania jest wiele, jednym z nich jest ukrycie osadzonego na stronie linku za pomocą JavaScriptu oraz akcji

onmouseover="doOnMouseOver();

która wywoła odpowiednią funkcję ustawiającą np. atrybut visibility obiektu ( lub atrybut z-index ).

Podobnym rozwiązaniem jest wykorzystanie CSS ustawiając kolor linku na identyczny z kolorem jego tła ( dla ułatwienia można odróżnić tylko a:hover ).

Jest jednak jeszcze jedna metoda na ukrycie odnośnika:

Czytaj dalej

Optymalizacja JavaScript

Najczęściej spotykanym zastosowaniem języka JavaScript są strony WWW. Wolne działanie napisanych przez nas skryptów może odstraszyć potencjalnych użytkowników. Powinniśmy się więc starać aby nasze aplikacje działały sprawnie i szybko. JavaScript jako język  interpretowalny jest nieporównywalnie wolniejsza od języków kompilowalnych, zazwyczaj jednak programy pisane w JS są na tyle małe aby nie dało się tego zauważyć. Problemy zaczynają się gdy nasz kod rozrasta się i zaczynamy spostrzegać niepokojące nas spowolnienie.

Jak temu zaradzić:

1. Narzędzia

Potrzebujemy odpowiednich narzędzi aby móc sprawdzić czy wprowadzane przez nas poprawki przynoszą jakiekolwiek efekty. Z pomocą może przyjść nam dodatek do Firefoxa Firebug, z pomocą którego będziemy mogli śledzić ewentualne błędy w naszym skrypcie oraz monitorować prędkość wykonywania wybranych fragmentów naszej aplikacji.

Czas wywołania fragmentów kodu możemy monitorować za pomocą konsoli:

console.time("naszaFunkcja");
naszaFunkcja();
console.timeEnd("naszaFunkcja") ;

Po odświeżeniu strony na której umieszczony jest ten kod, w konsoli Firebug’a powinniśmy zobaczyć powiadomienie:

Czytaj dalej

Partnerzy Pro: