1 00:00:01,290 --> 00:00:08,430 Hello, in this video, I am going to show you how to implement a scroll spy and bootstrap. 2 00:00:08,700 --> 00:00:14,510 So let me show you want to scroll spying by going to the official bootstrap API guide to scroll down 3 00:00:14,730 --> 00:00:16,630 where you got this example in a bar. 4 00:00:16,650 --> 00:00:20,130 That's the example that will be implementing a scroll down. 5 00:00:20,430 --> 00:00:26,520 And you can see when we go to a certain particular different section of it's a highlight which one we're 6 00:00:26,520 --> 00:00:31,890 on and we're like the one that's marked as one of part of the dropdown to go to. 7 00:00:32,160 --> 00:00:34,600 And there we go and verify. 8 00:00:34,650 --> 00:00:35,370 Pretty cool. 9 00:00:35,370 --> 00:00:39,300 You can implement to use a nested nav as well. 10 00:00:39,300 --> 00:00:41,430 You can implement it using a list group. 11 00:00:41,820 --> 00:00:47,370 I recommend that you have a go at all the different ways of doing it, but we're going to be using a 12 00:00:47,440 --> 00:00:48,240 NAV. 13 00:00:48,330 --> 00:00:51,030 So let's go over here. 14 00:00:51,030 --> 00:00:59,490 First of all, we need to add some Cyesis if you have a separate designated access file for this particular 15 00:00:59,490 --> 00:01:00,060 page. 16 00:01:00,330 --> 00:01:03,030 Feel free to use that one because it's very basic. 17 00:01:03,060 --> 00:01:04,920 I'm just going to keep you on the same page. 18 00:01:05,290 --> 00:01:13,140 So you need to make the body position relative or, you know, using it with an upvote, but it just 19 00:01:13,140 --> 00:01:14,310 doesn't work very well. 20 00:01:14,640 --> 00:01:16,980 And I'm going to do container 21 00:01:20,250 --> 00:01:23,580 margined, top of 200 pixels. 22 00:01:23,820 --> 00:01:30,870 Reason I'm doing that will be putting the NABA also forgot to mention of covered nav bars and tabs in 23 00:01:30,870 --> 00:01:31,770 a separate video. 24 00:01:31,770 --> 00:01:34,170 So feel free to check that video out. 25 00:01:34,290 --> 00:01:40,020 They're going to be going over the nav part of it pretty quickly just because I've covered it in a separate 26 00:01:40,020 --> 00:01:40,380 video. 27 00:01:40,640 --> 00:01:44,100 OK, the nabob will be here at the start of the body. 28 00:01:44,340 --> 00:01:52,890 And I don't know why bootstrappers like this, if you just put a nabob there, this content, the container 29 00:01:52,890 --> 00:01:57,180 where your main body of your website will be, gets overlapped by this. 30 00:01:57,180 --> 00:02:01,770 So it's this start at the top Bonalbo stuff at the top. 31 00:02:01,770 --> 00:02:05,250 And the Nebojsa has a great asset index next basically on top of it. 32 00:02:05,460 --> 00:02:10,620 So we want to just sort of, you know, by doing margined top, we are moving this down a little bit. 33 00:02:10,700 --> 00:02:14,850 We could imagine that bottom on the number that that's the only reason. 34 00:02:15,390 --> 00:02:28,710 Yeah, OK, so we also need to in the body with data dashes by scroll data dash all that equals hash 35 00:02:29,790 --> 00:02:30,540 tag number. 36 00:02:30,600 --> 00:02:37,020 So this is a number that we are going to create that's going to have an idea of epic nav, but we have 37 00:02:37,020 --> 00:02:40,530 not created that yet, but we will literally start doing that now. 38 00:02:40,680 --> 00:02:41,610 The NAV 39 00:02:44,730 --> 00:02:49,350 already equals nav ball. 40 00:02:51,660 --> 00:03:06,730 Plus, you never know, Bardash liked big Dutch Light, Dutch free Dutch top, OK? 41 00:03:08,250 --> 00:03:13,440 And next hour we're going to do is just pull up a toy store. 42 00:03:13,440 --> 00:03:22,980 Hidden thing here, you know, an icon, an image that's totally up to you to brand a Taraf Prakash 43 00:03:23,040 --> 00:03:27,510 so it doesn't go to a different page or website, but you naturally would make that go to a different 44 00:03:27,510 --> 00:03:30,990 page or website, usually by the homepage of your website. 45 00:03:31,560 --> 00:03:37,410 Next, what we are going to do inside the knife is put a on order list. 46 00:03:37,860 --> 00:03:47,970 So on the list and this class now of dash tells 47 00:03:51,030 --> 00:03:52,080 list item. 48 00:03:53,080 --> 00:03:58,470 This is going to have a class of NAV Dutch item 49 00:04:01,050 --> 00:04:01,730 in here. 50 00:04:02,000 --> 00:04:14,340 Another class called NAV Dutch link, HSF equals hash tag Batman. 51 00:04:14,370 --> 00:04:19,470 So this is going to be a section that we'll navigate to and we'll get them an image of the Internet 52 00:04:19,470 --> 00:04:24,090 as some text basically to describe a few different of my favorite characters. 53 00:04:24,330 --> 00:04:27,440 And those would be the different sections that will be scrolling through. 54 00:04:27,890 --> 00:04:34,640 And if that suits, we need as many of that you want on. 55 00:04:34,650 --> 00:04:40,380 I'm a total bear in mind, because you know, the number we have certain size, if you put too many, 56 00:04:40,390 --> 00:04:42,000 you can look very good. 57 00:04:42,000 --> 00:04:43,590 You're still going on multiple lines. 58 00:04:44,070 --> 00:04:46,970 So just bear in mind this one 59 00:04:50,010 --> 00:04:55,590 is not going to be Yoda and it's going to be Anakin. 60 00:04:56,010 --> 00:04:57,680 Got one thing in here. 61 00:04:57,730 --> 00:05:03,360 We need to put the text up here, because if you click that and go to that section at well, you'll 62 00:05:03,370 --> 00:05:08,780 have to just scroll and see the map always keeping up where you are on the page. 63 00:05:08,790 --> 00:05:09,840 That's totally up to you. 64 00:05:14,910 --> 00:05:23,390 OK, so now that we've done that in our container, we can actually implement the content. 65 00:05:23,430 --> 00:05:26,020 If we look at it now, this is what we get. 66 00:05:26,040 --> 00:05:33,420 So we want to be able to click to the scroll through these and actually go to the particular page, 67 00:05:33,780 --> 00:05:35,070 I mean, section on the page. 68 00:05:35,100 --> 00:05:43,620 So in here we're going to have a div and this is going to be dated by. 69 00:05:45,880 --> 00:05:54,730 He calls all data and all that is going to be equal hashtag. 70 00:05:57,390 --> 00:05:58,530 NAV bar. 71 00:06:07,820 --> 00:06:19,880 Like, so we're going to put data dash offset because calls zero and now we can start literally is now 72 00:06:19,880 --> 00:06:22,930 content like formatting our Web page. 73 00:06:22,940 --> 00:06:26,390 So we're going to have a page for time for anything you want. 74 00:06:26,630 --> 00:06:36,890 And already and this idea is going to be B.S. So Batman, Superman, Yoda, Anakin and here would put 75 00:06:37,310 --> 00:06:38,620 the name of the character. 76 00:06:39,140 --> 00:06:44,120 We're going to have a P tag and we are going to an image. 77 00:06:44,630 --> 00:06:48,110 Well, I'm in the class of the Budos. 78 00:06:48,110 --> 00:06:48,760 One hundred. 79 00:06:48,770 --> 00:06:53,870 This will just make it, you know, one hundred percent of the width of its parent container, which 80 00:06:53,870 --> 00:06:55,310 in this case is Esteve. 81 00:06:55,460 --> 00:06:59,020 And this will be relative to column 12. 82 00:06:59,270 --> 00:07:04,610 So that way the images, regardless of the screen size, and we go to the original image of full size 83 00:07:04,610 --> 00:07:06,890 and they don't go over the screen. 84 00:07:06,910 --> 00:07:08,120 It is on the really small screen. 85 00:07:09,100 --> 00:07:19,360 And FLC, we are we will implement that in a second, but that's basically the format for let me do 86 00:07:19,690 --> 00:07:20,240 this. 87 00:07:20,250 --> 00:07:21,960 This is going to be Superman. 88 00:07:25,600 --> 00:07:27,310 This is going to be Ilda. 89 00:07:32,440 --> 00:07:43,120 By duplicator to me, two and one to four would not be good for duplicated it too many times and I can 90 00:07:48,610 --> 00:07:49,950 go back refreshed. 91 00:07:49,960 --> 00:07:55,210 That's what we get if I just goes to the bottom one because there is no content here to let's actually 92 00:07:55,210 --> 00:07:58,960 put some text and an image that we like in Batman. 93 00:08:00,010 --> 00:08:02,290 We're going to grab ahold of this text. 94 00:08:10,330 --> 00:08:16,620 So we're going to get an image I will be using the first one. 95 00:08:24,280 --> 00:08:25,350 Put that there. 96 00:08:26,620 --> 00:08:28,240 No, that's Superman. 97 00:08:31,250 --> 00:08:33,320 Supermodel and supermodel. 98 00:08:40,190 --> 00:08:41,440 Actually, let me show you something. 99 00:08:41,720 --> 00:08:47,090 In this, why we copy the image of dress, it gives us this massive a one or two of them doing. 100 00:08:47,090 --> 00:08:49,080 You might come across this and this one does. 101 00:08:49,190 --> 00:08:49,610 So this is. 102 00:08:49,610 --> 00:08:50,180 All right. 103 00:08:50,480 --> 00:08:52,200 The other one will. 104 00:08:52,250 --> 00:08:53,290 So let me show you. 105 00:08:54,530 --> 00:08:55,430 We'll show you in a second. 106 00:08:55,430 --> 00:08:57,980 Let me get the text, the description. 107 00:08:59,120 --> 00:09:07,910 Man, I am excited to see the Snyder cut next year, see what they like and get your to vote on this 108 00:09:08,300 --> 00:09:08,750 issue. 109 00:09:08,750 --> 00:09:12,500 But we go get the text first. 110 00:09:17,170 --> 00:09:19,780 Now, let's get an image for Yoda. 111 00:09:21,340 --> 00:09:29,890 Good, the same if I was to copy me to dress this work in all right at the moment, but sometimes you 112 00:09:29,980 --> 00:09:32,320 given me this massive, you know. 113 00:09:34,790 --> 00:09:42,420 Though none is getting this massive data attribute, which is not what you want, and it just is massive 114 00:09:42,430 --> 00:09:48,180 and well, next on American Pie, let me just. 115 00:09:48,710 --> 00:09:51,640 OK, so let's get this text. 116 00:09:52,240 --> 00:09:53,500 Let's put this 117 00:09:57,280 --> 00:09:58,130 up there. 118 00:09:58,960 --> 00:10:08,130 Let's get an image of Anakin Skywalker like this did to copy image dress. 119 00:10:09,160 --> 00:10:14,300 Now, he may be all it had a noted possibly know him. 120 00:10:15,130 --> 00:10:18,080 OK, so almost there. 121 00:10:18,460 --> 00:10:20,930 So I just wanted to add a bit of JavaScript now. 122 00:10:21,010 --> 00:10:25,690 So if we go down, open up some script tag again. 123 00:10:25,690 --> 00:10:32,020 If you have a separate designated JavaScript file for this particular page, feel free to use that one. 124 00:10:32,170 --> 00:10:33,030 I do not. 125 00:10:33,040 --> 00:10:34,320 And this is a simple example. 126 00:10:34,330 --> 00:10:43,390 So I will just put an ad eventually snap when we we saw the website do the browser. 127 00:10:43,630 --> 00:10:51,570 We want to call this method resize window, which is what we're going to implement right now. 128 00:10:54,460 --> 00:11:00,370 And the reason why we want to do here is basically refresh all our data. 129 00:11:00,370 --> 00:11:06,940 Spilman, just because when we resizing, it's sometimes the scrolling position can be a bit off. 130 00:11:06,940 --> 00:11:11,140 If we go from a big size and small size, it may not adjust accordingly. 131 00:11:11,170 --> 00:11:26,350 So you want to just put this Savol data spy list equals square brackets, dot, dot or document dot 132 00:11:26,350 --> 00:11:27,220 query. 133 00:11:31,200 --> 00:11:32,940 Select all 134 00:11:35,700 --> 00:11:45,240 that single quotation marks, web brackets, data that's by this is going to get any element with the 135 00:11:45,240 --> 00:11:47,930 data by roll. 136 00:11:48,770 --> 00:11:56,420 Attribute, which is, you know, the ones we want, should be good to clothe that now make sure you 137 00:11:56,420 --> 00:11:59,720 close the quotation marks and so it doesn't automatically close, are they? 138 00:11:59,720 --> 00:12:03,380 Make that mistake on a previous video and if it's in the video. 139 00:12:03,380 --> 00:12:06,830 But that was no time wasted. 140 00:12:08,040 --> 00:12:10,770 Well, I learned from it, so not completely wasted 141 00:12:13,930 --> 00:12:18,390 due to the elements. 142 00:12:28,740 --> 00:12:46,150 And now, in the sense they do not grow by don't get instant data by element, Doug Rethread. 143 00:12:50,880 --> 00:12:56,380 There we go, we should be ready to see what we've got, make sure we get no errors in the console, 144 00:12:56,380 --> 00:13:01,000 which we do not great, I selected by my father scrolling. 145 00:13:01,150 --> 00:13:07,270 Once we get to the Sukma section, a supermax, we go to the Yota section theater to go to the bottom 146 00:13:07,510 --> 00:13:14,020 of Skywalker and we can click on that particular one as well so we can resize it. 147 00:13:14,590 --> 00:13:17,320 Batman and man, Yoda and Anakin. 148 00:13:17,620 --> 00:13:19,330 So that's it. 149 00:13:19,480 --> 00:13:23,860 If you have any questions, feel free to put me a message. 150 00:13:24,190 --> 00:13:28,570 And as usual, I look forward to seeing you in the next awesome bootstrap video.