Уеб Дев Трикове

ООП: Каква е разликата между обект и инстанция?

Това е често срещан и задаван въпрос по форуми, изпити и пр.

Разликата между двете е:
Когато се създаде обект от класа, при съществуването вече на обекта в паметта се нарича инстанция.
При вече създаден обект от даден клас, който съществува в паметта или хийпа, за такъв обект се използва термина инстанция на обект, двата термина по принцип са взаимно заменяеми.

CSS Tooltip link hover

В предният пост, показах принципно как се прави съвсем от общ вид css tooltip.
В този пост ще покажа, друго решение, което е по – практично и по – често използван вариант.

С тази версия може да се види как може да се направи, така, че когато в сайта има линк и когато мине потребителя с курсора на мишката върху надписа на линка, ще му се покаже стилнат тултип.

default.css

    

body {
 padding: 0;
 margin: 0;
 background: #000000;
 color: #ffffff;
 font-family: "Trebuchet MS",Helvetica,Jamrul,sans-serif;
}

p {
 margin: 0;
 padding: 0;
}

#wrapper {
 width: 980px;
 margin: 0 auto;
}

#header, #footer {
 padding: 40px;
}

#content {
 padding: 20px;
 overflow: hidden;
}

.main_container {
 width: 100%;
}

#content div.box {
 padding: 5px;
 float: left;
 margin-right: 10px;
 width: 290px;
 background-color:#2229FF;
}

a.tooltip_container {
 position: relative;
 color: #FFB731;
}

.tooltip {
 display: none;
}

a:hover.tooltip_container .tooltip {
 display: block;
 width: 200px;
 padding: 5px;
 background: #FFF47B;
 font-size: 10px;
 position: absolute;
 top: 20px;
 left: 70px;
 color: #000;
 border: 1px solid #000000;
 z-index: 50;
}
 
  

index.html

    




 

 CSS tooltip 1

 
 



 

Започваме...

Lorem Ipsum

Lorem ipsum dolorТова е подсказка за Блок 1. sit amet, consectetur adipiscing elit. Integer tempus, mauris ut facilisis porttitor, est tortor mattis metus, eu lobortis turpis urna ut risus. Vestibulum nec orci lorem. Nullam posuere lobortis augue a malesuada. Etiam enim lacus, ornare quis iaculis vel, iaculis sit amet nulla. Sed nulla ante, sodales et euismod vitae, hendrerit vitae ligula. Morbi id lacus a elit fermentum ultricies imperdiet sit amet nunc. Morbi nec purus vitae felis faucibus lobortis eget id mi. Donec facilisis pharetra lectus, at tempus leo fringilla ac. Aenean vulputate purus id turpis bibendum sodales. Sed feugiat, risus a pulvinar vehicula, metus arcu commodo tortor, sed hendrerit tortor nunc eget tellus.

css tooltip on hover

При използването на този вариант, трябва да се внимава, при подбора на тагове, които ще се включат в тултипа, за да няма проблеми с валидацията на документа!

HTML5 примери с използване на html5shiv фикс за IE

Здравейте, скоро открих удобен начин за използване на HTML5 тагове в по – ниски версии на ИЕ, по принцип под ИЕ9, се подържа, но проблема, е че не всички потребители на ИЕ, си обновяват браузъра до последна версия и все още това се явява проблем за да интегрираме в нови сайтове ХТМЛ5 и негови нови възможности. Въпросният начин за фиксване на поддръжката на хтмл 5 тагове в старите версии на ИЕ се казва html5shiv, достъпен е онлайн от адрес: https://github.com/afarkas/html5shiv, разбира се може да се свали локално при останалите джава скипт файлове. Препоръчително е от този сайт от оглед на това, че го държват винаги на последни стабилни версии и в случай, че има проблеми, и ги фикснат, веднага на вашият сайт са обновени.

Този пост, ще го използваме и като хтмл5 скелет, който е готов да се изтегли с копи, пейст и да се модифицира, според конкретният проект.

Да разгледаме долният пример:

index.html

    




 
 Пример за използване на html5shiv с хтмл5 тагове
 
 
 
 
 
 
 
 


 

Header section

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.

Content section

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet

Footer section

default.css

    
body {
 padding: 0;
 margin: 0;
 background: #000;
 font: 0.8em 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
 color: #000;
 }
h1 {
 font-weight: normal;
 font-size: 2.1em;
}
h2 {
 font-weight: normal;
 font-size: 1.8em;
}
p {
 margin: 0 0 15px 0;
}
#wrapper {
 width: 950px;
 margin: 0 auto;
 background: #f8f8f8;
}
#container {
 padding: 15px;
}
 
/** htm5 тагчета виждаме **/
header {
 display: block;
 padding: 15px;
 background: #AA0000;
 color: #FFF;
}
 
footer {
 padding: 15px;
 background: #900000;
 color: #FFF;
}

 
  

Добавяме хтмл5 тага nav. Тага nav се поставя в таг-а header, и се използва предимно за контейнер на меню.
index_nav.html

    



 
 Пример за използване на html5shiv с хтмл5 тагове
 
 
 
 
 
 
 
 


 

Header section

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.


Content section

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet

Footer section

Съответно : default_nav.css

    
body {
 padding: 0;
 margin: 0;
 background: #000;
 font: 0.8em 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
 color: #000;
 }
ul li {
 list-style: none;
}
a {
 text-decoration: none;
}
h1 {
 font-weight: normal;
 font-size: 2.1em;
}
h2 {
 font-weight: normal;
 font-size: 1.8em;
}
p {
 margin: 0 0 15px 0;
}
#wrapper {
 width: 950px;
 margin: 0 auto;
 background: #f8f8f8;
}
#container {
 padding: 15px;
}
 
/** htm5 тагчета виждаме **/
header {
 display: block;
 padding: 15px 0px 0px 0px;
 background: #AA0000;
 color: #FFF;
}
header h1 {
 padding: 0px 0px 0px 15px;
}
header p {
 padding: 0px 15px 0px 15px;
}
 
footer {
 padding: 15px;
 background: #900000;
 color: #FFF;
}
 
nav {
 float: left;
 background: #111;
 width: 100%;
}
 
nav ul {
 float: left;
 margin: 0px;
}
 
nav ul#top_menu li {
 float: left;
 padding: 15px;
}
 
nav ul#top_menu li:hover {
 background-color: #501010;
}
 
nav ul#top_menu li a {
 color: #FFF;
}
 
  

Надявам, се този пост да бъде полезен и очаквам да видя линкове на нови хтмл5 сайтове.

Няма коментари

Вашият коментар

Вашият имейл адрес няма да бъде публикуван. Задължителните полета са отбелязани с *

Нови технологии
Базов Python скрипт

Сега ще разгледаме, как можем да си направим базов Python скрипт, с който ще се обхожда зададена директория и ще се показва, пълното съдържание. Това скриптче (scandir.py), е съвсем базово и изчистено, ще използваме функцията, scandir, с входен параметър директория, която ще се листва. Ще използваме пакети os и glob. …

Нови технологии
Нова продуктова линия Acer Extensa

Acer Extensa е продуктова линия лаптопи със сравнително дълга история. Този модел датира от преди 2010 г., но през 2017 година беше възроден за нов живот. И ако на вас този модел не ви говори нищо ще трябва да кажа с две думи основните характеристики на ноутбуците от тази линия. …

Нови технологии
Вече съм собственик на Acer Iconia W510 – ревю

Нали знаете поговорката „По лаптопа посрещат, по таблета изпращат“. Шегата настрана, но в днешно време за много хора е задължително да притежанат и лаптоп и таблет, а като добавим и смартфон нещата стават тегави. Разбира се не е нужно да ги носите всичките заедно. Точно, когато нямата място да разнасяте …