Thursday, 15 October 2020
Use Hash Value As Different Page For Navigation Like Angular JS | Hashtag | Javascript | Jquery | Ajax
You can download code from: https://unpossiblepog.com/codes/JAVASCRIPT+AJAX-JQUERY/Use-Hash-Value-As-Different-Page-For-Navigation-Like-Angular-JS-Using-Javascript-Jquery-And-Ajax
Code :-
product.php
------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<script type="text/javascript">
loc = (window.location).toString();
res = loc.split("#");
</script>
<div class="container">
<h2> </h2>
<div class="row">
<center>
<div class="col-md-4">
<a onclick="showDataAjax('#Linux');history.pushState({},'','#Linux');">
<button type="button" class="btn btn-info btn-lg">Linux</button>
</a>
</div>
<div class="col-md-4">
<a onclick="showDataAjax('#Microsoft');history.pushState({},'','#Microsoft');">
<button type="button" class="btn btn-info btn-lg">Microsoft</button>
</a>
</div>
<div class="col-md-4">
<a onclick="showDataAjax('#Apple');history.pushState({},'','#Apple');">
<button type="button" class="btn btn-info btn-lg">Apple</button>
</a>
</div>
<center>
</div>
<div class="row">
<div class="col-md-12" id="show-data" style="background-color: #fff68d;margin-top: 15px;height: 100px;">
</div>
</div>
<div class="row">
<center>
<div class="col-md-12">
<a class="btn btn-info btn-lg" style="margin-top: 15px;"
onclick="history.pushState({},'',res[0]);">Refresh</a>
</div>
</center>
</div>
</div>
<script type="text/javascript">
function showDataAjax(company)
{
$.ajax({
url: "read_data.php",
method: "POST",
data:{company:company},
beforeSend : function()
{
},
success: function(ajax_data)
{
$("#show-data").html(ajax_data);
}
});
}
window.onpopstate = function(event){
var hash = location.hash;
showDataAjax(hash);
};
function runHash()
{
var hash = location.hash;
if(hash!=="")
{
showDataAjax(hash);
}
}
runHash();
</script>
</body>
</html>
------------------------------------------
read_data.php
<center>
<h1>
<?php
echo str_replace(array("#","%20"), array(""," "), $_POST['company']);
?>
</h1>
</center>
------------------------------------------
This video is about how to dynamically navigate on browser using hashtag and display data based on hash values with the help of ajax jquery & javascript.
For example, when I click on buttons, I am displaying the data using AJAX, but at the same time I am also manipulating the url.
Not only that, when I click on back and forth buttons, the data changes respectively.
Also if I directly open with hash value, it shows the data.
You can also remove the hash value by clicking on refresh button.
Lets start building code from the scratch.
Here is the page design, I using PHP language but you can use any backend language.
I have including a header file, which has JQUERY and boostrap links.
In our main page, I added onclick event and “showDataAjax” function on each button.
I added them statically just to avoid backend language,
Notice that I added hashtag before each value which is important.
And here is the ajax code which shows data in ID.
You can remove hashtag from post data using your backend language.
Lets add history.pushState function with 3 arguments.
1st will be empty array, 2nd will be empty string and the will be the hash value.
Copy paste them and add values respectively.
Notice that your URL hash is also changing.
Now next problem is when I click on back button, it doesn’t change the ajax value.
So for that, add a javascript code.
we shall get the hashvalue and call the function.
Now lets check.
Now, next challenge is what do when when user applies URL with hashvalue.
For that we shall add similar code.
Lets check the direct URL.
As you can see, its working, now to remove hash value, create the script tag at the top of page.
You can also add in common header file but I don’t want to confuse viewers, so I am writing on same page.
On click of refresh page, paste that code, and use array’s first element.
As you can see, this button wipes out the hash value.
Create a function.
Run that function after it’s declaration.
Don’t forget to like, share and subscribe.
Thanks for watching.
Monday, 28 September 2020
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.
Sunday, 13 September 2020
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.
Sunday, 6 September 2020
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.
Tuesday, 1 September 2020
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.
Thursday, 20 August 2020
Connecting Java Gradle With Google Drive | Part 1 | Groovy
You can download library from:- https://unpossiblepog.com/research-and-development/GRADLE+JAVA/Google-Gradle-API-In-Java-For-Google-Drive-And-Google-Calendar
Create a connection between java and google drive using gradle.
Quickstart link:-
https://developers.google.com/drive/api/v3/quickstart/java
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/
------------------------------------------------
Hey guys.
This video is about creating a connection between java and your google drive through gradle.
In this part, we shall display files list in command prompt.
Linux OS is mostly recommended.
Java version 1.8 or greater & also gradle version 2.3 or greater are required.
You will also need google account with google drive enabled.
Open the browser and search “java google drive quickstart”.
Go inside this link.
Check versions in terminal or command prompt before proceeding forward.
Click on “Enable the Drive API” button.
Download configuration.
Create a folder.
Open it in terminal.
Paste the first command.
Select 1 for groovy and for second question, hit enter without typing anything.
It will create basic files & folders for gradle.
Second command will also create 2 more folders.
Now, copy that credentials.json file into src -> main -> resources folder.
Rename it if the file name is not credentials.json.
Go back and open build.gradle file in text-editor.
Paste the gradle code, save it and close it.
Create a java file with same name as they told at location src -> main -> java.
Open java file in editor. Paste the code.
Remove _READONLY.
SetPageSize decides how many results do you want to be displayed.
I shall type 4.
Now open the command prompt and type “gradle run” and hit enter.
It will open link in browser.
Click on “allow".
Close the tab.
Now if you check terminal, you will see the list of files.
Lets try again, now it will not open any link on browser and will display results directly.
Required links are given in the description.
Don’t forget to like, share and subscribe.
Thanks for watching.
Monday, 17 August 2020
Root Cause & Solution Of The UnsupportedClassVersionError | Linux Only |...
Error: A JNI error has occurred, please check your installation and try again
Exception in thread "main" java.lang.UnsupportedClassVersionError: JavaProgram has been compiled by a more recent version of the Java Runtime (class file version 55.0), this version of the Java Runtime only recognizes class file versions up to 52.0
Commands:-
update-alternatives --config java
update-alternatives --config javac
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/
------------------------------------------------
Hey guys.
Now we shall find out the root cause & solution of the UnsupportedClassVersionError which occurs while running java program for LINUX users only.
This thing occurs when we successfully compiles the code using javac command but throws an error when we run the program.
Lets create a program.
I am opening the terminal where our java file is present.
Now, there is nothing wrong with syntax, compiling is successful but this error is thrown.
The main reason is that we are using different JVM version for compiling and different JVM for running the code.
Don’t forget to add sudo before commands.
Type your password.
If we check runtime version, the version 8 is set.
Press enter or already set number.
However, if we check compiler version, the 11th version is set.
So to change it, enter the SELECTION number which is in front of it. In my case, its 2.
And now, if we recompile and execute, it shall work fine.
Code is given in the description.
Don’t forget to like, share and subscribe.
Thanks for watching.
Subscribe to:
Posts (Atom)