IT developer remarks

There is, as minimum, two ways how to add 'active' class to menu item, to highlight it. First one is on backend side. Second one is on frontend side. Now, I talk about variant with frontend side. So, I choose javascript to decide to add 'active' class to menu item or not. There is a code for this: var pathName = window.location.pathname; // Iterate through each anchor tag within list items $("ul li a").each(function () { // Check if the href attribute matches the current URL if ($(this).attr("href") == pathName) { // If there is a match, traverse up the DOM hierarchy to find the corresponding list item $(this).parents('li').each(function () { // Add the 'active' class to highlight the menu item $(this).addClass("active"); }); } }); This script essentially loops through all anchor "a" tags within list items "li" in the specified unordered list "ul". For each a...

 At least, you need to have Bootstrap 5 or higher version. The code below will insert Default toggle button. Actually, it is checkbox. < input type ="checkbox" class ="btn-check" id ="default" autocomplete ="off" > < label class ="btn btn-outline-success" for ="default" >Default</ label > And also you can change the color of button by label class. It has checkbox behavior. It means, when it is checked, the toggle button switches own state. So, you can just change checkbox status by 'checked' attribute as usual, and toggle button show this as well.

Сегодня столкнулся с такой проблемой: нужно было прикрепить рисунок справа, что бы он там висел постоянно, независимо от изменения окна по ширине. Я знал, что есть такое свойство в CSS как absolute в параметре position. То есть: style="position: absolute;" что указывает слою, что он будет на постоянном месте, относительно родительского элемента. Но изначально я пошел неверным путем... мне надо было прикрепить к правому краю, и я стал это делать через атрибут left. Так как фиксированное значение мне не подходит (откуда мне знать какого размера будет окно), я начал вычислять в процентах. В итоге получилось так, что при изменении ширины окна, часть слоя так же пряталась за краями окна. И тут ко мне пришла гениальная мысль: надо отсчитывать от правого края! То есть надо взять нулевое значение от правого края, и автоматически слой будет прикреплен к правому краю! Бинго! Итого мой код выглядел так: style="position: absolute; right: 0px;" или можно так: ...

Продолжаем о Микроданных (microdata). Оказывается есть такой сайт Schema.org который создавался общими усилиями Google, Microsoft и Alexa (точно уже не помню), который служит в качестве словаря для описания микроданных. Словарей там довольно много и расположены они в древовидном порядке, то есть есть корневой словарь и от него наследуемые по убыванию, в порядке от большого к меньшему и более специализированному. Я описывал свой рабочий сайт Team.in.ua с помощью словаря Organization. Подключение словаря к вашему сайту происходит довольно легко. В родительском элементе itemscope пишем еще один атрибут itemtype  и указываем адрес словаря. В моем случае это http://schema.org/Organization. То есть в итоге должно получится что-то такое: <span itemscope itemtype="http://schema.org/Organization"> Сам по себе этот словарь содержит довольно много различным типов данных. Но лично мне понадобилось только три, это name - название организации, telephone - собственно ...

Сегодня узнал как сделать красивую кнопку без использования тега img (то есть без картинки). Оказывается есть такое замечательное свойство в CSS3: для Chrome background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#85D390),color-stop(50%,#009700),color-stop(51%,#007800),color-stop(75%,#219B0C),color-stop(100%,#31A517)); для Opera background: -moz-linear-gradient(center top , #85D390 0%, #009700 50%, #007800 51%, #219B0C 75%, #31A517 100%) repeat scroll 0 0 transparent; Разберем что делают эти свойства. В случае хрома используется -webkit-gradient у которого указывается сначала в каком направлении будет осуществляться заливка (в нашем случае линейно) и указываются контрольные точке color-stop на которых мы изменяем цвета. color-stop имеет два параметра, первый это точка в процентах где нам нужно установить необходимый цвет и второй параметр это сам цвет. В случае оперы этим занимается -moz-linear-gradient, в сущности с таким же принципом: контрольные...