Download "#7 ActiveBox - Верстка сайта с нуля для начинающих | jQuery"
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252F6QaXpMaBFv8%252Fmaxresdefault.webp&w=1139&q=75)
Please wait. We're preparing links for easy ad-free video watching and downloading.
Similar videos from our catalog
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252F3wrKB-Sy4oI%252Fmaxresdefault.webp&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252FI7lm-CqCPHk%252Fmaxresdefault.webp&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252FOYbw7opQwlw%252Fmaxresdefault.webp&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252FTP9avrMMnwM%252Fmaxresdefault.webp&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252FTiwl8F185J0%252Fmaxresdefault.webp&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252FYH7wQURtZ9Q%252Fmaxresdefault.webp&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252Fb8K_iowSriQ%252Fmaxresdefault.webp&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252Fr9V07GST5p4%252Fmaxresdefault.webp&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi%252Ftri6sAp45RE%252Fmaxresdefault.jpg&w=1139&q=75)
%3Aformat(webp)%2Fi.ytimg.com%252Fvi_webp%252FtrqPzpwvsx4%252Fmaxresdefault.webp&w=1139&q=75)
Video tags
Subtitles
Russian
00:00:02
Dmitry Valak is with you and we continue to00:00:03
work with you on the layout of the active box sites, we have already00:00:06
done, in principle, all the layout itself, you and I will make an00:00:08
accessible version, a mobile00:00:09
version, and now we will work with you00:00:12
with scripts, we need to do what in00:00:15
first of all, we need to make a header,00:00:17
we will make it sticky, that is, if we00:00:20
happen, for example, the first block will split00:00:23
it, the header will stick to the top00:00:26
so that we can see and can00:00:29
navigate through our site,00:00:31
this is the second thing we will do for you to00:00:33
move around our site when you click on00:00:36
these menu items, that is, we click00:00:37
on the futures item, a foreigner go00:00:40
to the futures block, we click on the00:00:42
works block and we have a page scrolling to the00:00:45
works block and so on, in general, this is what we00:00:48
will do now, well, let’s00:00:51
decide what we are doing we will work with you00:00:52
we will work with you I was00:00:54
thinking that after all we will00:00:56
use with you jake believe00:00:57
no matter what anyone says jack is a good00:00:59
tool00:01:00
if you are doing any kind of landing, it00:01:03
allows you, in principle, to00:01:04
save time and as for Lenny I00:01:08
think it’s normal to use cvari00:01:09
because, again, everything is much simpler00:01:11
to write if, of course, you’re working00:01:14
on a large project, to declare is of course00:01:16
no longer an option, so yes, but for00:01:19
small projects it’s basically00:01:20
fine, there’s nothing wrong with that, so00:01:24
don’t listen to those who say that00:01:26
jack variesa it’s not very much that each00:01:30
tool has its own approach, so to speak,00:01:32
especially if you are making a website that in00:01:34
the future you will build, so to speak, on00:01:37
some cms, then feel free to use grief00:01:41
because on popular cms00:01:43
jack gates and does as if in stock,00:01:45
so there, in any case, you will be the same Kvari,00:01:48
so work right away with it, the same00:01:50
wordpress product cms, I’m sure different prices,00:01:53
but if they’re like there, I don’t know, drupal00:01:55
juno got into it, most likely, too, everything is on jig00:01:57
Vari, so he’ll live there for a long time00:02:00
because that thousands of plugins are written,00:02:02
masks are paid with Jack Vari,00:02:04
so yes, if anyone wants to learn more about00:02:06
life in a couple, then watch my00:02:09
videos on the channel, there is a separate video00:02:11
about00:02:12
Muji Woe in 2019, well, let’s go00:02:15
to the Jack Foley website, Jack at dot com,00:02:18
this page opens we click00:02:21
here download jay corey and you and I00:02:24
will connect the jack at least using sedin we00:02:26
will not download it not to our folder00:02:28
locally in the project we will00:02:30
connect it through00:02:31
sit, that is, third-party servers why00:02:34
we will do it this way simply00:02:36
because, well, in principle, the loading speed00:02:39
will be, well, possibly faster because00:02:42
Sedin will use00:02:45
the server closest to your site visitor, so the00:02:49
Jack Vary library will be downloaded from there,00:02:50
perhaps00:02:53
if you stored it on your hosting, then00:02:55
for example, I don’t know hosting there; in00:02:57
Moscow, the person coming in there doesn’t know00:03:00
Vladivostok and a long distance from the00:03:03
server to your client, and here he00:03:06
would take it through the nearest server sitting there,00:03:08
perhaps Google and the service are closer there00:03:10
and the loading will happen much faster than the00:03:13
library itself, plus very often many00:03:17
developers use a connection via Sedin on their sites00:03:20
because there is the advantages of this are when a person00:03:24
goes to one site and there is a download of00:03:28
Jack Cooking after 1 g the wig is cached and00:03:31
then if a person comes to your site00:03:34
he has already agreed in the cache because00:03:36
he dived there through a certain00:03:38
level and Gregory is already taken from the cache00:03:42
that in principle, it gives instant00:03:44
loading in the decor,00:03:46
so we will use the00:03:48
feeding connection so let's00:03:50
take it here, below there are sections of00:03:52
google judges microsoft incident with00:03:55
and jess deliver jing any of them, in principle,00:03:58
take probably google among us there00:04:00
and popular but i from often00:04:02
use Devin Jamison is also00:04:03
popular, let's click on it and00:04:06
go to such a site and here we00:04:08
have a selection of different libraries we are00:04:12
interested in the regular jack white library00:04:14
compressed jack vary manager00:04:17
version 341 copy this line00:04:21
go to our document and somewhere like00:04:24
this00:04:25
you write the text script in the squid tag, we00:04:28
write the src attribute and indicate the path to00:04:31
this file, that is, we indicate here the00:04:34
path of the CD and this file, that is, we are00:04:37
loading Jack Vore, we do00:04:39
this in such from because when you go to the00:04:42
page it should load immediately00:04:44
the library, then all the house elements, our entire layout,00:04:49
and already at the very bottom, you and I will already be00:04:51
working with Jack Vere, that is, we will connect00:04:53
here our Jess Fas, which we will00:04:56
work to interact with already00:04:57
loaded systems or00:05:00
house elements, let’s00:05:02
make ours folders a new file called00:05:05
Jess, for example, here we will00:05:08
write the code for Jack Vera and let's00:05:12
connect our angels file here at the very bottom,00:05:15
so we can also leave a00:05:19
javascript comment here, that is, we will00:05:21
work with Jess here, connect different00:05:23
files, but in principle we will have only00:05:25
one connected, our Angeles, in it we00:05:27
will work for now in this one file,00:05:30
okay, in principle, you and I have done everything, we have00:05:33
connected00:05:34
Jake Vera and you and I have connected our00:05:38
file which we will write the code let's00:05:40
open it and let's start write,00:05:43
speaking for our site, and the first00:05:46
thing we need to do is we need to write00:05:48
this construction, dollar sign,00:05:49
brackets, function brackets, and after the00:05:53
brackets, curly braces and here we put00:05:57
a period, this is the construction we00:05:59
make at the beginning of the document, this entry00:06:02
allows you to wait for the entire00:06:04
document to load and only then performing00:06:07
some actions with the home elements of00:06:09
your site is considered the correct00:06:11
approach, and here already inside this code00:06:13
we write with you jack say the code for00:06:16
our elements something like this, let's00:06:19
check that everything works for us and,00:06:20
for example, write with you have such a phrase00:06:22
console log console forehead and here we will write,00:06:26
for example, it works there,00:06:30
it works, to check our work, at00:06:33
the end we put a period, we will now display in00:06:35
the console the message it works, let's00:06:38
check it, go to our website, update00:06:41
it, open the developer panel,00:06:44
and here is the developer tool and00:06:46
there is a section console we see here00:06:49
the phrase works I'll start everything00:06:51
working fine if you00:06:53
don't have the panel data then it is here 300:06:56
dots here there is a console00:06:59
drawer you can have then who click00:07:02
from the show console drawer we will be shown00:07:05
such a small console that we can00:07:07
use you can see the mistakes Jack Vera that00:07:09
we made and so on so well,00:07:11
let's get to work, let's00:07:13
first of all make our header00:07:15
fixed, since how to do this we00:07:19
need to get access to our header, we00:07:21
have ours, so Fedor, we00:07:25
did it before a separate header for us in a toga00:07:27
header, let's give it the ID of00:07:30
these kernels and with the help of this we00:07:34
will gain access to our header,00:07:36
let's make a00:07:40
variable here in which we will save the selector to00:07:42
our header, so we will create a change with you00:07:45
in which just the same is placed our00:07:46
selector we write years what does it mean to declare00:07:49
a variable then we write with you00:07:51
the name of the variable for example Fedor00:07:53
set equal00:07:54
and here we write the selector of our element00:07:56
jquery selector write as follows00:07:58
we put a dollar sign brackets00:08:00
quotes and here we write that we want to00:08:03
select an element with an ID header we put00:08:06
a hash as in cs Icy00:08:07
and write a header, if we chose by00:08:10
class, then we would put it up with you.00:08:12
instead of a lattice, but since00:08:14
there is an ID on your element, we use00:08:17
a lattice, I usually, if it is possible,00:08:19
use it to work with g quarire00:08:21
Jason here and to style the class, but00:08:25
sometimes you also have to add classes00:08:27
to work jack cook Jason in principle00:08:30
and usually do not do other classes to00:08:33
work with jess, that is, for example, if I were00:08:36
now working through a class, then00:08:37
most likely I would not use00:08:40
game classes because the header class is used00:08:41
for styling,00:08:42
I would add another class, for example, there is00:08:45
jess header and would already use00:08:49
this class for work with Jess, that is,00:08:52
I will have a separate class for working with00:08:53
jeans, I can see from the name that this is a00:08:55
class for working with Jones, and this is a class00:08:58
for working in Sessom, so it’s much more convenient00:09:01
and you will thereby make00:09:04
your PC safer because you won’t00:09:05
have connections in the USSR itself, that is, there00:09:09
will be no such triangle, you will have00:09:11
everything as if located separately,00:09:13
because it very often happens if the00:09:14
project is large and the jack were00:09:17
there, tied to the class that is00:09:19
stamped for stylization, and if suddenly this00:09:21
element is gone, then you're getting00:09:23
errors there, let's say Jaycee, if for example a00:09:27
class was renamed,00:09:28
its name was changed, the style was changed, for some00:09:30
reason your James broke, you don't00:09:32
understand why, but all because James00:09:35
was assigned to the class that is responsible for00:09:37
styling00:09:38
and you suddenly renamed it, well,00:09:40
anything can happen, so it's safe00:09:42
use separate classes to work00:09:44
with we will use00:09:48
ID header for now, we have made a selection of00:09:52
core elements, that is, we now have a00:09:54
variable fret, here we have a variable fedor, the00:09:57
header selector is stored,00:09:59
now we can work with it, we can00:10:01
give it a class, we can give it00:10:04
let's do different things, let's give00:10:06
a class to our header element, we will write00:10:09
that we are working with the header element and we00:10:11
want to assign a class to it, and for example fixed00:10:14
at close we write such a method from the00:10:17
class and here we write the name of the class00:10:19
that we want to give to our leader00:10:22
for example fix that is, everything is very simple00:10:23
here, the syntax is very00:10:25
simple, it’s very clear in principle, that00:10:28
is, we want to add a class, this means00:10:31
from the class, which class is fixed, we indicate in the00:10:34
parameter ok, let’s check if we are on00:10:37
one page, we will see that we00:10:39
now have a class in the header fixed is great, the00:10:42
nose class is there, but we need to issue it00:10:45
under a certain condition, that is, when00:10:48
on our split our page is00:10:50
larger than the00:10:51
size of the height of our intro block, so00:10:55
let us work with this, we00:10:58
also have an intro element and give00:11:00
it to it too id im trang00:11:02
we will work through this id with our00:11:06
intro block we will also make another00:11:08
variable with the name intro and here we00:11:11
will select the block00:11:13
im then we need to know the height of our00:11:15
intro block and when we open this00:11:18
height00:11:19
we will give you a fix class for the00:11:22
header like let's find out i'm sad our00:11:25
intro block has a method for this - hate and int x00:11:29
and let's see how they differ00:11:32
and let's make another00:11:34
inter variable for example h, that is, this00:11:36
will be the height of our intro block and here00:11:39
we are we access the intro selector00:11:42
through a variable because we00:11:44
saved this selectors into a variable00:11:46
and here we call the hate00:11:49
brackets method and let us display00:11:52
this value in the console console to00:11:56
see what we have stored in this00:11:57
variable let’s see if we00:12:00
refresh the page we will see 650 pixels00:12:03
so let's see our intro is more00:12:07
than 650 by 750 why is this all because the00:12:10
hide method takes the height of the element not00:12:13
counting the padding we have a duel00:12:15
on top 100 pixels so we have00:12:17
bisping shown if we want to00:12:19
take the height of the element with the duel there well00:12:21
then we need to use the in our00:12:23
faith in our high method then you and I00:12:25
will get the height of the element including from p00:12:28
money we see that now it’s 750 and everything00:12:31
is correct, that is, we have the value of the00:12:33
height of our intro element in a00:12:37
variable and now we can work with it00:12:38
and compare the height of our00:12:41
element with the scroll size how much on00:12:45
shot your page until when we00:12:47
hide the page we can also get00:12:49
this value strictly ours how do we00:12:51
do this it’s very simple00:12:54
again, let’s make for example a00:12:56
variable00:12:57
for example a variable scroll position00:13:01
revealed the position and here we we need to get the00:13:03
position from the top of our document,00:13:06
we will use this00:13:09
construction, we will refer to00:13:11
our window and we will refer to the00:13:15
scroll to top method,00:13:17
that is, how much we just start from the top of the00:13:19
page00:13:20
and let us output this value to the console00:13:24
if we update now,00:13:26
we will see 0 with you, that is, we00:13:29
are now at the very top of the page, it00:13:31
turns out that 0 is stored here if we00:13:34
scroll down one page and now00:13:36
we will see with you 137, that is,00:13:39
our scroll position from the top is stored here00:13:42
that is, we take the scroll top of00:13:46
the stripes in our hands, we already have two00:13:49
variables, the height of our intro and we00:13:52
have the position of our scroll, great, we have it00:13:54
ready now, let us keep an eye on the00:13:59
scroll, that is, we00:14:02
want00:14:03
everything to be visible when scrolling time the00:14:05
position of our scroll was compared with the height and if the00:14:09
scroll position is greater than the height of the00:14:11
inter element, we want to issue a fix class for00:14:13
our header in order to monitor some00:14:17
events, we are writing such a thing, we00:14:20
want to monitor the scroll event00:14:22
for our page for our windows, we write00:14:26
that we are working with a window and we want to00:14:28
monitor the scroll, we will enter .00:14:31
he opens the brackets and here we indicate the00:14:34
events he scroll,00:14:36
that is, when you scroll, we want to00:14:38
do something with you, put a dot and ,00:14:40
write a function,00:14:42
open the brackets, here are also curly00:14:45
braces, and here we are already inside this00:14:47
construction writing the action that we00:14:49
want to perform when scrolling the page00:14:52
and let us update00:14:54
the value of the variable because the changes are00:14:57
currently stored precisely in the position of the00:14:59
page when loading and we want to00:15:01
update this position every time because00:15:03
our crawl will change when scrolling00:15:05
correctly, our position changes, we00:15:07
need to update it, so let’s do it00:15:09
here let's write such a thing, we will00:15:12
again refer to our00:15:15
window and we can access it00:15:16
now using the des construction, that00:15:20
is, we want to update the country with our00:15:22
scroll variable pos to the current00:15:26
scroll position, we write dice, that00:15:29
is, thereby we refer to our00:15:31
window because we are inside00:15:33
this event and all calls through dice00:15:35
will refer to this particular window and00:15:37
we want, again, the area scroll top00:15:40
position and let's now show00:15:43
you the scroll pose in our event it00:15:48
scrolls for windows let's look at00:15:51
one minute page let's start scroll we00:15:53
see the scroll post is changing, that is, the00:15:55
scroll position we have this value00:15:59
now we can compare it with the00:16:01
height of our intro element so let's00:16:06
see here we will write00:16:08
the conditions with you, that is, iv as in00:16:12
programming we love00:16:13
programming languages conditions are written through00:16:15
construction and in LS, that is, we00:16:17
write here in brackets and inside we write00:16:20
the conditions that we will compare with you,00:16:21
we compare if the00:16:25
scroll position is greater than the height of our intro00:16:29
block, then we will do one action with you,00:16:32
otherwise we will do00:16:34
another action with you, let's console.log00:16:37
will be deleted for now, if our position in the scroll is00:16:41
greater than the height of the intro block, we will00:16:43
issue a fixed class for our00:16:47
header element, otherwise we will remove the00:16:50
fixed class, that is, we will write here instead of00:16:52
from class to class,00:16:55
so let’s see Let's update00:16:58
the page now Fedor doesn't have the00:17:01
fix class from because we removed it, now we00:17:03
scroll the page with the crawl modestly00:17:05
and as soon as we scroll the00:17:08
intro block we see that we have a00:17:11
fix class from the couch because the00:17:14
scroll height is greater than the height of the00:17:17
intro block if we built up, then we have a00:17:20
header class from the fix from the ear to the one that is removed because the00:17:23
scroll position is already less than the00:17:25
height of our intro block, it’s clear, yes, that00:17:29
is, it all works for us, now we just00:17:31
need to add the style for our00:17:32
header for the fix class, go to css,00:17:36
find work with our header so we00:17:41
find work with our header so00:17:43
we want to work with you a header00:17:46
from cool fixes and if the header has a00:17:49
fixed class we change the position of00:17:51
absolutely positions fixed from let's00:17:55
see what we got I00:17:57
update the page with the crawl we00:17:59
get here we see our hat,00:18:02
yes it appeared, disappeared, appeared,00:18:05
disappeared, appeared perfectly, and that is,00:18:08
now let's add a little00:18:10
background, Fedora will have00:18:13
a background00:18:14
the same as the intro, we have winter clouds, there is a00:18:18
background, yes, this color is so00:18:21
dark blue, we will use it use00:18:22
for our header, that is, we write00:18:25
backgroundcolor00:18:26
and we will use this color so that00:18:29
our navigation elements are also visible,00:18:31
so let’s see, we have a00:18:36
background horse that’s great, also for00:18:40
example, we want to reduce the duel with you00:18:42
because, in principle, when00:18:44
the header is already fixed and we don’t want as00:18:46
if we had such large peelings,00:18:47
we again can work with you in the00:18:51
following way, that is, we write if00:18:53
we are in the header ce class a00:18:56
fixed, we work with you with the header inner00:18:59
element and we want to reduce the fighting00:19:03
games from above and from below, do 15,00:19:06
either we write this way or we write just00:19:08
rewrite what we need with this00:19:10
bot and we’ll go to the top because it’s like this and00:19:14
now if we look at this, it’s like there’s00:19:17
less of a fight, and in our header00:19:20
we’ll also remove it, so we’ll remove it with00:19:24
you00:19:25
header and nora border then we will make 000:19:29
border by the bot and at the header, let's00:19:33
fix the idea by making the height automatic,00:19:36
that is, we will have a height of the00:19:38
let's look at my page at the00:19:41
header, here we slide the00:19:43
intro element, we have a header on top, we00:19:46
see it is now smaller there is no border and00:19:49
it is like this, now we have00:19:52
the page on top00:19:53
as soon as we go up with the troll and00:19:57
get to the intro block, our header00:19:59
disappears and is already placed in this position,00:20:03
great, in principle, we are done with this,00:20:05
but there is a small moment here00:20:07
if we update page here, we00:20:10
don’t see the header right now, although we00:20:12
would like to see it right away because00:20:17
our check only works on00:20:18
scroll events, that is, we start00:20:20
to hide and we see that00:20:23
this check is triggered, what should we do in this00:20:26
situation? just00:20:27
another event for our page, that is,00:20:30
when our window loads, you and I will00:20:33
also do this check, that00:20:35
is, we will add here another event00:20:36
oh lord when loading and you and I, let's00:20:40
see, we refresh the page, we see00:20:42
immediately the header appears in this00:20:43
position then there is, when our window loads,00:20:46
we have the same action,00:20:49
everything is checked, the scroll position, the00:20:52
height of the element is compared,00:20:54
and so on, if we are here,00:20:56
we refresh the page, we don’t see our00:20:58
headers on top because we are still00:21:00
in the inter block, that is, now everything00:21:03
works fine we can also, in00:21:08
principle, if we look at the mobile00:21:12
version, then you and I will see the same thing: in00:21:15
principle, the header works for us, but00:21:18
there is one thing, but we see that when we00:21:21
switched from the mobile version to the00:21:22
accessible version, it’s like00:21:25
when we look at us when we00:21:28
are on the mobile version of the site,00:21:29
our00:21:31
intro size is much smaller, that’s right,00:21:33
here we have a completely different height, so we still have the00:21:37
intro variable saved, so we switch with you to the00:21:40
accessible version, we still have you00:21:42
indra or the value of the intro height is stored00:21:46
as on mobile version and when we00:21:48
build a page on the available version,00:21:49
we get that00:21:52
the header appears ahead of time, we will also do this00:21:56
check on the00:21:58
Norris resize events from the window, that is,00:22:01
we will make three events: he scrolls,00:22:03
he lauts the resize, that is, when we will be00:22:06
with you rice from the window, we will also have00:22:08
this check going on, so let us00:22:10
check it, and by the way, yes, it00:22:12
turns out that we need to do this check like this, so00:22:15
let us00:22:19
bring the intro variable here, that is,00:22:23
we will create exactly here, that00:22:26
is, what will happen when we have00:22:28
events don’t even create we will, we will just be00:22:31
with you, I’ll also just00:22:32
overwrite, in principle, probably something like this, that00:22:37
is, we will overwrite the00:22:38
value of the weaving variable on the site, this is00:22:42
important to us, so let’s look at the00:22:44
block now like this the header appears in the right00:22:46
place, that is, the right moment ok, as00:22:49
soon as we change the position with you, that is, the00:22:51
rice and winter window, as we see, the00:22:54
header also appears at the right time, that00:22:57
is, now everything works as it should, the00:22:59
same if we, for example, are on on the00:23:02
mobile device we turn it over,00:23:04
again the size of the block core00:23:05
changes and our header will appear at the00:23:07
right moment if we did00:23:12
not do this event here we would have00:23:15
countries with strange behavior, that is, we would00:23:17
not have a resize we would have like this00:23:19
the header appears here we turn the00:23:22
mobile device over with the header appears in00:23:26
principle here00:23:28
as if I didn’t notice the difference, perhaps00:23:32
the size of the header, that is, the size of the inter block here00:23:34
turned out to be the same, but although in principle,00:23:38
yes, in principle, yes, the value of00:23:43
the intro changes as much as you scroll, so yes00:23:46
if we are on the mobile version00:23:49
here and scroll, then we have already00:23:51
overwritten the intro value because00:23:53
we have already woken up the page00:23:55
if we are, for example,00:23:57
somewhere here, we will00:24:00
turn it over, now in principle it00:24:03
will work a little incorrectly, well, in general, yes,00:24:06
in general, there are some nuances here00:24:09
done differently again, well, let's00:24:11
leave the resize with us, it will be more00:24:13
reliable because on the 3rd site, in00:24:14
any case, we will perform00:24:16
these actions with you, check the height of the00:24:19
intro block if it has changed, the00:24:22
value in the intro block changes as much, and so on, that is,00:24:24
we can with you look and00:24:25
display this value here in the console.log00:24:28
during intro events, let's just00:24:32
spin our device,00:24:34
we see that the height of the block is changing,00:24:36
so we need to do it right00:24:39
here, that is, we can even change the intro variable00:24:42
at this event00:24:46
In principle, it’s00:24:47
easy to make an empty variable and declare it because, in00:24:49
principle, we don’t00:24:51
need the height of the element here yet, so we need to recognize it00:24:54
already during events and check it, use it00:24:56
in checking like this, but it turns out something like this,00:24:59
that is, we have a block and gentra is ready, that00:25:02
is not a blog entry on a blog00:25:04
header, it now works as it should, that00:25:07
is, in principle, we have analyzed many situations,00:25:10
everything seems to work as00:25:13
it should, that is, we have a block that00:25:15
appears when loading, we have a steering wheel00:25:18
appears, we have a changing00:25:19
screen size, then we have Also, the checks are all00:25:22
working correctly, we take into account00:25:25
many nuances about this, in principle, yes, in00:25:27
principle, everything is fine with this, well, this is how I00:25:31
got my lesson, if you00:25:33
liked the video, don’t forget to00:25:34
like and subscribe to the channel00:25:36
because I looked at the statistics, a lot00:25:38
of people are watching I haven’t subscribed, this is00:25:40
very bad because00:25:42
approximately sixty percent of the viewers are watching,00:25:43
changing without subscribing to the channel, this is00:25:45
very sad, such a Turk, you and I have00:25:48
such an introductory video, arson, we believe in the00:25:51
next video, we will00:25:53
work with other elements, we00:25:55
met in this video how in00:25:57
principle it works the same with in a project how00:26:00
to create variables make selectors00:26:02
select different elements of00:26:04
your html document how it works with00:26:07
events and makes conditions well something like this I00:26:10
hope you liked the video and00:26:14
thank you all for your attention and byeDescription:
В этом видео поработаем jQuery и сделаем фиксированную шапку при прокрутке сайта, когда скролл страницы достигнет необходимую нам позицию. // Ссылки ================= Основы HTML и CSS для начинающих: https://brainscloud.ru/landing/html-css Материалы урока: https://files.brainscloud.ru/file/activebox-urok-7 *Профессиональная, быстрая и комфортная верстка сайтов: https://frontend.brainscloud.ru/ (Купон youtube -1000руб.)* // О проекте ================= Меня зовут Дмитрий Валак. Я занимаюсь разработкой сайтов уже много лет, специализируюсь больше на front-end разработке и верстке сайтов, но и программирование тоже изучаю. Здесь буду делиться с вами информацией на разные темы по веб-разработке - HTML, CSS, Javascript, JQuery, Vue, PHP, MySQL, React, Gulp и тд. На сайте проекта https://brainscloud.ru вы найдете много полезных закрытых материалов, а так же сможете поработать со мной лично, при наличии такого желания. // Соц. сети ================= Мой ВК - https://vk.com/odimaz Группа BC - https://vk.com/brainscloud Мой Instagram: https://www.instagram.com/dmitryvalak/ #верстка #версткасайта #созданиесайта #html #css
Preparing download options
* — If the video is playing in a new tab, go to it, then right-click on the video and select "Save video as..."
** — Link intended for online playback in specialized players
Questions about downloading video
How can I download "#7 ActiveBox - Верстка сайта с нуля для начинающих | jQuery" video?
http://unidownloader.com/ website is the best way to download a video or a separate audio track if you want to do without installing programs and extensions.
The UDL Helper extension is a convenient button that is seamlessly integrated into YouTube, Instagram and OK.ru sites for fast content download.
UDL Client program (for Windows) is the most powerful solution that supports more than 900 websites, social networks and video hosting sites, as well as any video quality that is available in the source.
UDL Lite is a really convenient way to access a website from your mobile device. With its help, you can easily download videos directly to your smartphone.
Which format of "#7 ActiveBox - Верстка сайта с нуля для начинающих | jQuery" video should I choose?
The best quality formats are FullHD (1080p), 2K (1440p), 4K (2160p) and 8K (4320p). The higher the resolution of your screen, the higher the video quality should be. However, there are other factors to consider: download speed, amount of free space, and device performance during playback.
Why does my computer freeze when loading a "#7 ActiveBox - Верстка сайта с нуля для начинающих | jQuery" video?
The browser/computer should not freeze completely! If this happens, please report it with a link to the video. Sometimes videos cannot be downloaded directly in a suitable format, so we have added the ability to convert the file to the desired format. In some cases, this process may actively use computer resources.
How can I download "#7 ActiveBox - Верстка сайта с нуля для начинающих | jQuery" video to my phone?
You can download a video to your smartphone using the website or the PWA application UDL Lite. It is also possible to send a download link via QR code using the UDL Helper extension.
How can I download an audio track (music) to MP3 "#7 ActiveBox - Верстка сайта с нуля для начинающих | jQuery"?
The most convenient way is to use the UDL Client program, which supports converting video to MP3 format. In some cases, MP3 can also be downloaded through the UDL Helper extension.
How can I save a frame from a video "#7 ActiveBox - Верстка сайта с нуля для начинающих | jQuery"?
This feature is available in the UDL Helper extension. Make sure that "Show the video snapshot button" is checked in the settings. A camera icon should appear in the lower right corner of the player to the left of the "Settings" icon. When you click on it, the current frame from the video will be saved to your computer in JPEG format.
What's the price of all this stuff?
It costs nothing. Our services are absolutely free for all users. There are no PRO subscriptions, no restrictions on the number or maximum length of downloaded videos.