GrAndSE's blog

Визначення позиції елементу за допомогою javascript

Якщо подивитись на чудові демо з використанням фреймворків, таких як Mootools, наприклад MooFlow чи то Exc Documentation Center, то можна помітити безліч рухомих елементів. Для написання подібних скриптів необхідно мати набір функцій для визначення положення елемента на сторінці.

Зрозуміло, що такі складні скрипти краще писати на основі великих JavaScript framework'ів. Однак існує багато елементів інтерфейсу для створення яких не потрібно використовувати хоча б частину функцій великої бібліотеки. Що ж робити в такому випадку? Дописати всі необхідні функції самотужки.

Згортаємо елемент одним натиском

Нещодавно постало завдання швидко зробити можливість згортати/розгортати елемент інтерфейсу натисканням на одну кнопку. Зазвичай, не має необхідності, згортати/розгортати елемент плавно, а більше цікавить спосіб зробити це з найменшими витратами з точки зору ваги сторінки. Однак для сайту-візитки, однією з головних вимог до якої є саме приємний вигляд, було вірішено зробити все "як слід".

Підсвітка синтаксису за допомогою javascript

Як Ви могли помітити в моєму блозі всі блоки програмного коду мають підсвітку синтаксису, що значно спрощує його перегляд. Чесно кажучи не вигадав іншого використання, як для якихось сайтів та блогів з програмування, однак сама концепція може стати в нагоді не тільки для таких проектів.

Теорія

Яким чином можна надати будь-якому елементу html сторінки певного кольору чи інші характеристики? Звичайно ж за допомогою css. Найпростіший варіант, який здається вірним і з точки зору валідності та семантики - використання html-тега span.

Тепер залишається автоматично огорнути елементи. Саме тут стане корисним javascript та його регулярні вирази. За допомогою функції replace будемо "огортати" всі входження ключових слів та спеціальних символів в span з відповідним стилем.

Бажаєете прекрасного? Користуйтесь javascript. Відбиття

Неодноразово бували випадки, коли здавалося б чогось не вистачає на сторінці. Здавалося б і дизайнер попрацював добре: приємні кольори, якісно зроблена графіка. Однак чогось не вистачає. Якесь все "мертве".

А буває і навпаки: дизайн не дуже цікавий, здавалося б шаблонний, а викликає приємне враження.

Пошук чогось такого, щоб викликало захоплення, вирізняло проект зпоміж інших - завдання не легке. І іноді не треба бути дизайнером, для пошуку таких речей. Для веб іноді достатньо додати трошки JavaScript.