Front-End Programming Exam > Front-End Programming Videos > AJAX and jQuery: Complete Series for Beginners > jQuery and AJAX Tutorials 21 | Adding Overlay and Frame
jQuery and AJAX Tutorials 21 | Adding Overlay and Frame Video Lecture | AJAX and jQuery: Complete Series for Beginners - Front-End Programming
FAQs on jQuery and AJAX Tutorials 21 - Adding Overlay and Frame Video Lecture - AJAX and jQuery: Complete Series for Beginners - Front-End Programming
| 1. What is jQuery? |  |
Ans. jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, and animation much simpler with an easy-to-use API that works across a multitude of browsers.
| 2. What is AJAX? | |
Ans. AJAX stands for Asynchronous JavaScript And XML. It is a technique used in web development to create asynchronous web applications. With AJAX, you can send and retrieve data from a server asynchronously without interfering with the display and behavior of the existing page.
| 3. How can I add an overlay to my web page using jQuery? | |
Ans. To add an overlay to a web page using jQuery, you can create a new HTML element (such as a `<div>`) with a CSS class that styles it as an overlay. Then, you can use jQuery's `.append()` or `.appendTo()` method to add the overlay element to the desired container on your web page. Finally, you can use CSS to position the overlay and adjust its appearance as needed.
| 4. How can I create a frame in the front-end using jQuery? | |
Ans. To create a frame in the front-end using jQuery, you can use HTML and CSS to define a container element that represents the frame. Then, you can use jQuery to dynamically populate the frame with content. This can be done by using jQuery's `.html()` or `.append()` method to add HTML content to the frame container. Additionally, you can use CSS to style the frame and apply any desired visual effects.
| 5. Can I use jQuery and AJAX together? | |
Ans. Yes, jQuery and AJAX can be used together. In fact, jQuery provides convenient methods for making AJAX requests, such as `$.ajax()` and `$.get()`, that simplify the process of sending and retrieving data from a server asynchronously. These methods handle many of the underlying details of AJAX, making it easier to incorporate AJAX functionality into your web applications.
Text Transcript from Video
hey what's up guys my name is Yas and
welcome to your 21st Tori on jQuery and
this tutorial we are going to start
writing some jQuery code for our
portfolio alright and but first I want
to get rid of this empty space so that
we have four pictures in in a row know a
line so you know every unordered lists
have default padding left of 20 pixels
and we want to overwrite it
to zero pixels and now it looks better
yes and the next thing I want to create
I want to create a frame I hope you
already know what lightbox is so
lightbox is simple plugin written in
jquery or javascript which allows you to
view pictures in a very good way you
just click on the thumbnail and pictures
appears slowly on the screen and the
rest of the page gets dark and this is
something what we are going to create
and how the rest of the pictures gets
dark we well the most picture viewers
just have an overlay which covers the
whole page and makes it like look dark
so let's create an overlay first just a
div element and I will just create a div
element and named overlay then style the
overlay so what the aurélie is going to
be it's going to be width and a
development with with 100% width and
100% height so it's going to cover the
whole page and it also have to has to
have a fixed position and background
color of black but we'll also set some
opacity so it will be a semi-transparent
and opacity let's just set it to 0.7
opacity now we can already take a look
at the overlay you see there the whole
page gets dark and this effect is caused
by this overlay but we don't need these
órale over time of course and we'll hide
it as default some the early wood will
only appear when we need it and the the
next step we want to create a frame a
frame which will appear above the
overlay just in centre of the page to
display a picture so let's create a
frame it doesn't matter where we created
since if you have the position fixed so
you can just create a div element just
underneath the overlay encode frame and
inside of this frame I would create an
image element and it shouldn't have any
source and just create an empty image
element and then let's hide it let's say
frame image or we can actually hide the
whole frame because we don't need it the
frame display:none
and we need to Center this frame and I
will also add background color white and
so what I'm also going to do is I'm
gonna Center it so first I have to add a
width of I'll just say 500 pixels and
the height of 400 pixels and I have to
Center it and how do I do that I can use
this margin lack property and set it
negative to the half of the width minus
250 pixels this is how we can Center it
and now let's test it see how it's going
to look like yeah but we forgot to set
position fixed of course position fixed
and now we would we see this frame
somewhere here on the left side but and
I think I did a mistake by using this
margin left and it's margin left yeah I
forgot something very important you need
to set it all
left 250 percent and then it's going to
be centered so now the frame is centered
but I don't like that frame is too small
so let's make it bigger I will just say
700 pixels to 500 pixels yeah and of
course adjust the margin left to 350
pixels and now we are going to have a
frame right here this white frame and
the rest of the page will be will be
dark because of the overlay and let's
just see how it's going to look like so
we'll basically see the rest of the page
is dark and right in the center is going
to be a frame with an image and I'm
afraid we are not going to make it in
this tutorial so in next tutorial we are
going to add this feature so that when
we click on this on the some on the
thumbnail the rest of the page gets dark
through this overlay and this frame will
appear and it's and will also have an
image here which just displays in the
context of the thumb or the thumb
thumbnail image alright guys I hope you
kind of learned stuff and you now you
know what overlay is and how you create
this effect so thanks for watching guys
and I'll see you in the next tutorial
welcome to your 21st Tori on jQuery and
this tutorial we are going to start
writing some jQuery code for our
portfolio alright and but first I want
to get rid of this empty space so that
we have four pictures in in a row know a
line so you know every unordered lists
have default padding left of 20 pixels
and we want to overwrite it
to zero pixels and now it looks better
yes and the next thing I want to create
I want to create a frame I hope you
already know what lightbox is so
lightbox is simple plugin written in
jquery or javascript which allows you to
view pictures in a very good way you
just click on the thumbnail and pictures
appears slowly on the screen and the
rest of the page gets dark and this is
something what we are going to create
and how the rest of the pictures gets
dark we well the most picture viewers
just have an overlay which covers the
whole page and makes it like look dark
so let's create an overlay first just a
div element and I will just create a div
element and named overlay then style the
overlay so what the aurélie is going to
be it's going to be width and a
development with with 100% width and
100% height so it's going to cover the
whole page and it also have to has to
have a fixed position and background
color of black but we'll also set some
opacity so it will be a semi-transparent
and opacity let's just set it to 0.7
opacity now we can already take a look
at the overlay you see there the whole
page gets dark and this effect is caused
by this overlay but we don't need these
órale over time of course and we'll hide
it as default some the early wood will
only appear when we need it and the the
next step we want to create a frame a
frame which will appear above the
overlay just in centre of the page to
display a picture so let's create a
frame it doesn't matter where we created
since if you have the position fixed so
you can just create a div element just
underneath the overlay encode frame and
inside of this frame I would create an
image element and it shouldn't have any
source and just create an empty image
element and then let's hide it let's say
frame image or we can actually hide the
whole frame because we don't need it the
frame display:none
and we need to Center this frame and I
will also add background color white and
so what I'm also going to do is I'm
gonna Center it so first I have to add a
width of I'll just say 500 pixels and
the height of 400 pixels and I have to
Center it and how do I do that I can use
this margin lack property and set it
negative to the half of the width minus
250 pixels this is how we can Center it
and now let's test it see how it's going
to look like yeah but we forgot to set
position fixed of course position fixed
and now we would we see this frame
somewhere here on the left side but and
I think I did a mistake by using this
margin left and it's margin left yeah I
forgot something very important you need
to set it all
left 250 percent and then it's going to
be centered so now the frame is centered
but I don't like that frame is too small
so let's make it bigger I will just say
700 pixels to 500 pixels yeah and of
course adjust the margin left to 350
pixels and now we are going to have a
frame right here this white frame and
the rest of the page will be will be
dark because of the overlay and let's
just see how it's going to look like so
we'll basically see the rest of the page
is dark and right in the center is going
to be a frame with an image and I'm
afraid we are not going to make it in
this tutorial so in next tutorial we are
going to add this feature so that when
we click on this on the some on the
thumbnail the rest of the page gets dark
through this overlay and this frame will
appear and it's and will also have an
image here which just displays in the
context of the thumb or the thumb
thumbnail image alright guys I hope you
kind of learned stuff and you now you
know what overlay is and how you create
this effect so thanks for watching guys
and I'll see you in the next tutorial
Related Exams
About this Video
|
4.60/5 Rating |
|
Nov 25, 2024 Last updated |
Video Description: jQuery and AJAX Tutorials 21 | Adding Overlay and Frame for Front-End Programming 2024 is part of AJAX and jQuery: Complete Series for Beginners preparation.
The notes and questions for jQuery and AJAX Tutorials 21 | Adding Overlay and Frame have been prepared according to the Front-End Programming exam syllabus.
Information about jQuery and AJAX Tutorials 21 | Adding Overlay and Frame covers all important topics for Front-End Programming 2024 Exam.
Find important definitions, questions, notes, meanings, examples, exercises and tests below for jQuery and AJAX Tutorials 21 | Adding Overlay and Frame.
Introduction of jQuery and AJAX Tutorials 21 | Adding Overlay and Frame in English is available as part of our AJAX and jQuery: Complete Series for Beginners for Front-End Programming & jQuery and AJAX Tutorials 21 | Adding Overlay and Frame in
Hindi for AJAX and jQuery: Complete Series for Beginners course. Download more important topics related with notes, lectures and mock test series for
Front-End Programming Exam by signing up for free.
Description
Video Lecture & Questions for jQuery and AJAX Tutorials 21 | Adding Overlay and Frame Video Lecture | AJAX and jQuery: Complete Series for Beginners - Front-End Programming - Front-End Programming full syllabus preparation | Free video for Front-End Programming exam to prepare for AJAX and jQuery: Complete Series for Beginners.
Information about jQuery and AJAX Tutorials 21 | Adding Overlay and Frame
Here you can find the meaning of jQuery and AJAX Tutorials 21 | Adding Overlay and Frame defined & explained in the simplest way possible.
Besides explaining types of jQuery and AJAX Tutorials 21 | Adding Overlay and Frame theory, EduRev gives you an ample number of questions to practice jQuery and AJAX Tutorials 21 | Adding Overlay and Frame tests,
examples and also practice Front-End Programming tests.
|
Explore Courses for Front-End Programming exam
|
|
Signup for Free!
Signup to see your scores go up within 7 days! Learn & Practice with 1000+ FREE Notes, Videos & Tests.
Related Searches
Sample Paper
,shortcuts and tricks
,Exam
,Free
,Extra Questions
,ppt
,practice quizzes
,MCQs
,mock tests for examination
,Summary
,past year papers
,Important questions
,Viva Questions
,Semester Notes
,jQuery and AJAX Tutorials 21 | Adding Overlay and Frame Video Lecture | AJAX and jQuery: Complete Series for Beginners - Front-End Programming
,jQuery and AJAX Tutorials 21 | Adding Overlay and Frame Video Lecture | AJAX and jQuery: Complete Series for Beginners - Front-End Programming
,jQuery and AJAX Tutorials 21 | Adding Overlay and Frame Video Lecture | AJAX and jQuery: Complete Series for Beginners - Front-End Programming
,Objective type Questions
,study material
,Previous Year Questions with Solutions
,video lectures
;
Study jQuery and AJAX Tutorials 21 | Adding Overlay and Frame on the App
Students of Front-End Programming can study jQuery and AJAX Tutorials 21 | Adding Overlay and Frame alongwith tests & analysis from the EduRev app,
which will help them while preparing for their exam. Apart from the jQuery and AJAX Tutorials 21 | Adding Overlay and Frame,
students can also utilize the EduRev App for other study materials such as previous year question papers, syllabus, important questions, etc.
The EduRev App will make your learning easier as you can access it from anywhere you want.
The content of jQuery and AJAX Tutorials 21 | Adding Overlay and Frame is prepared as per the latest Front-End Programming syllabus.
|
© EduRev
|
Education Revolution
|
Follow Us
|
Signup to see your scores
go up within 7 days!
Access 1000+ FREE Docs, Videos and Tests
Takes less than 10 seconds to signup