Hello and welcome to another new episode of learning simplified.
Today in this tutorial we are going to solve a riddle that we left earlier in our previous
tutorial of adding jQuery to the button, on clicking which there will be a smooth scroll
animation to the top of the page.
We had a question at the end of the tutorial that why this button is still visible while
it is supposed to stay hidden at the time of page loading or at the time when the page
is on the topmost position of the browser and then it is supposed to resurface again
as it seems to be here.
Now if we just reload this page in this particular case we can see that from the beginning the
button is still in visibility.
But this is what is the main reason of conflict and we can see that if we scroll down the
page it first disappears, and then it resurfaces again and from the end of the page on reaching
the top it is now getting invisible.
If we come down again it is now acting properly as we can see over here.
But if we reload the page, we can see that this button is back in its position and it
is now visible.
So this is the main problem that we left Behind in our previous tutorial in a hope that you
will solve the problem and you will communicate with us with the solution; however... let's
proceed.
How to solve this problem that we are facing right now?
So if we come back to our index.html, we can see that this is the script but this is not
the place where this recommendation should take place.
Then where it should be conducted?
This is practically not a problem in case of a script tag that we have used on; all
this scripting code all this jQuery that we have used, no the problem is not here.
The problem is somewhere else and this is not practically a problem, we are just missing
a CSS customization.
Yes, a very normal simple CSS customization that needed to be mentioned in its first place.
So we are getting back to custom style sheet and here into this 'scroll-top' position,
the only thing that we are going to add is display:none.
Now if we press Control + s and get back to our project and reload, now we can see that
the button is gone, the button is disappeared; we are residing on the top of the page, now
if we scroll down we can see that the button is resurfacing again.
We may come to the end of the page, we may click here and we can see that on reaching
the top position of this page, the button is disappeared again.
Reload and you can see that the same result will be active in this particular case.
So this is the only Amendment that we need to make.
We need to add this particular CSS property here, display none to the scroll-top class
that was used to introduce this button.
Hopefully this is the part that we left untouched in our previous tutorial and this is the part
that we have discussed over here.
Another thing, if we get back to our project and if we press Control + shift + m, now let's
check on what are the changes that we made in our tutorial and whether it is a bootstrap
responsive according to the responsiveness of template and we can see that no horizontal
line is present here so far.
Let's change it or you may rotate it to 480px.
We can see that still it is working well.
Let's make it 640px and we can see that still it is working well.
There's absolutely no problem with the bootstrap responsiveness.
And make it now 767px.
Enter.
Still now it is working well there is absolutely no problem.
Everything is in order.
Make it 767px.
And we can see now that there's a little bit of problem undefined let's change the height
to 1024px.
There it goes.
And we can see that there is a little bit of problem.
This image and this text are now getting a little bit of jumbled up over each other.
So in an effort to rectify all we need to do we need to make some more experiments with
the @ media queries.
You need to assign more properties for attributes to all those parts such as they look well,
they fit into our device.
All you need to do you need to make much more experiments with it.
Let's get down and we can see that the rest of the things are quite ok but the only place
where it is now getting a disrupted preview is this header part.
So, what you can do over here?
You can just reduce this font size over here or you may discard this background image which
is present over here.
So these are the experiments that you need to make.
I think I must mention while designing a bootstrap responsive or a kind of responsive web design
all we need to do is to make some little experiments with your contents, you need to make more
@ media queries to keep those things into your device width.
So that's it for today's tutorial.
Hope you guys have liked the tutorial.
If you guys have liked this tutorial then do not hesitate to hit that RED subscribe
button down below.
Hope to see you guys in our next tutorial.
Till then, bye..
For more infomation >> DArte en tu Kodi - Duration: 7:39. 
For more infomation >> La signification des fossettes sur le menton!|LSF TV - Duration: 5:28. 
For more infomation >> 𝕄𝕒 𝕡𝕠é𝕤𝕚𝕖 𝕒𝕦𝕕𝕚𝕠 : 𝔸𝕙 ! 𝕝𝕖𝕤 𝔹𝕖𝕝𝕝𝕖𝕤 𝔹𝕣𝕠𝕔𝕒𝕟𝕥𝕖𝕤 - Duration: 2:40. 
For more infomation >> சூப்பர் சிங்கரில் ராஜலட்சுமி பாடிய கடைசி பாடல் | செந்தில் | SUPER SINGER 6 29.04.2018 TODAY PROMO - Duration: 5:17. 
For more infomation >> 【咀嚼音】チーズドッグ【Eating ASMR No talking/cheese corn dog】먹방/모짜렐라핫도그 - Duration: 26:55. 
For more infomation >> Cardiac Coherence Exercise Audio (OCEAN) - Duration: 5:17. 
For more infomation >> PLAYMOBIL FILM DEUTSCH - MÜLLWERFER - LERN MIT PLAYMOBIL - Duration: 6:36. 
For more infomation >> Top 10 Mejores Frases del Anime | Parte 7 - Duration: 4:31. 
Không có nhận xét nào:
Đăng nhận xét