JQUERY Tutorial | Hide Collapsible Navbar When Clicked Outside It | Bootstrap

You can now download a code from : 
https://unpossiblepog.com/codes/javascript+jquery+bootstrap/Hide-Collapsible-Navbar-When-Clicked-Outside

In this video, I shall create a code in JQUERY to hide bootstrap’s responsive navbar when user clicks outside that navbar.

I have created one bootstrap page.

When I convert User Interface from desktop to mobile version, and click on hamburger icon, the menu appears and same button is used for hiding it.

Lets create a script tag.

Write a function which shall run as soon as the whole page load.

And first we are going to check if jquery is working or not.

Lets refresh. When I click, it shows the alert message.

Now comment it just for now.

Now we have to observe which one is the main class which shows the navbar,

As there different types of navbar for each version of bootstrap,  only the classes names will differ from me but overall the process will be same.

When I toggle, this part is the topmost part which is changing it’s class.

So have to copy the classes of both toggle button and navbar division.

Now we have to find out the class name where user clicks.

As there are different JQUERY versions, one of them is applicable for your version.

For me the second one works so I am going to comment the first one.

Now we are getting the class name of elements where we clicked.

We shall use the IF-ELSE statements and check if the class is same as navbar’s class or not.

However there are some classes which are inside the navbar, So to find out if we click inside navbar too, we shall use this code in alert box.

Now if we click outside navabar, it shall give 0, but if we click inside navbar it shall give 1.

So we shall also use it inside our IF-ELSE statement.

We shall put if statement empty and use the ELSE part.

Here, if we check, when the navbar is expanded, there is an “IN” class present with it.

So in code, we have to find out if that NAVBAR class have “IN” class with it.

If yes, then we shall auto-click the toggle button.

Lets refresh.

It is not hiding when I click inside the navbar, but is hiding when I click outside.

Don’t forget to like, share and subscribe.Thanks for watching.

JQUERY Tutorial | Add Unique Count On Repeated HTML Elements Without Bac...

Automatically add count in repeated elements using only JQUERY.

Boostrap code with JQUERY link:-
https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_default&stacked=h

Subscribe my Channel:-
http://www.youtube.com/user/SanketRooney?sub_confirmation=1

Facebook Page:-
https://www.facebook.com/UnpossibleNS

Twitter Account:-
https://twitter.com/UnpossiblePOG

Blog :-
https://unpossiblepog.blogspot.in/
------------------------------------------------

In this video, I am going to show how to add count in incrementing order in elements.
I created an empty html page as you can see.
I am lazy so I am going to copy some html code from w3schools. Link in the description.
In that code, they manually added 1,2,3. Which might take a lot of time if you add one by one.
Let me just remove Order and add LIST in h3 tag.

Now, they already provided one jquery link which is necessary.
Now create a script tag, make sure that it is below those repeated elements.
Create a random function, and call it.

Now, as soon as page loads, it will show an alert message.
After that, remove alert.
If you observe the pattern, H3 tag comes after the class called “col-sm-4”.

So, we shall now call then one by one using jquery.
We have to append the number, so we shall need an integer and increase it by 1 each time.

Don’t forget to like, share and subscribe.
Thanks for watching.

Redirect Outside IFRAME Using Anchor Href & Form Submit Action | Javascr...

This video is about redirecting html page outside IFRAME.
There are usually two types of redirects.
1st is an anchor tag with href, and 2nd is form tag with action.
If we click on any link which is inside iframe, then it redirects only within that iframe section, also browser’s URL doesn’t change.
In given code, iframe page is added called “internal_page.html” which has anchor tag and form.
The anchor link redirects to “welcome.html” page.
So, to redirect outside iframe, use the “base” tag with target as “_parent”.
Now, if we refresh and and click on it, the browser’s URL is changed to the page we wanted.

However, the form redirect is the tricky one.
Because, we have base tag in initial page, the basic action tag itself redirects on browser URL which we don’t want.
So, just remove base tag from internal page.
The action page redirects to PHP file but you can use any language you want because logic will be same.

If name is admin, then create a base tag in if statement’s bracket, create an anchor tab, give it an ID.
Hide it using CSS.
Now in script tag, create a javascript to auto-click that anchor tag.

Let’s refresh.
If we type something else, it redirects within an IFRAME, but if we type admin, it shall redirect itself to welcome page.

Don’t forget to like, share and subscribe.
Thanks for watching.

Drum Beginner - Unpossible POG Musics | Free HIP-HOP Music | LMMS Experi...

This is the second time I am creating my own music using LMMS Software.
It is a bit awkward to upload music on the internet. I hope it is not
cringey. Enjoy.