i am writing a website in html
but in my code on one page i want to have something say
"click HERE to print directory listing"
and the directory listing is another webpage that has my information loaded on it.
can anyone tell me how to do this?
You may use jQuery:
Click here for...
<div id="directorylisting"></div>
$("#dir_list").click(function() {
$("#directorylisting").load("/path/to/your/page/with/data");
// or if you what replace all page contents use:
// $('body').load(...);
return false;
});
Or something like this:
Click for...
Related
I am currently developing a website that will dynamically load the page content using ajax triggered by hash changes.
The code looks like this
$("*").delegate("a", "click", function () {
// Trigger Hash Change
window.location.hash = $(this).attr("href");
return false;
});
$(window).bind('hashchange', function () {
let newHash = window.location.hash.substring(1);
$("#main-content").load(newHash + " #ajax-content", function (responseTxt, statusTxt, xhr) {
}).hide().fadeIn();
});
Basically what I am working on now is making the URL look "Pretty", I have modified the .htaccess file to remove the .html extension
So a URL that looks like this
www.example.com/about.html
will become this
www.example.com/about
If I navigate the index (home) "www.example.com" page of the website and then navigate from there to the about page, the URL looks fine. "www.example.com#about" since the server does not display the "index" in the URL.
However, if I navigate straight to the about page like this www.example.com/about, then from the about page to another page, for example, the contact page. I get a URL that looks like this www.example.com/about#contact. When it should look like this www.example.com#contact.
My question is what is the best way to handle this? should I use jquery to redirect all to the index page and then add the hash to load the correct content? or is there some way I can not display the unnecessary part of the URL?
I hope my question was clear, I'm new to the server-side stuff involving the .htaccess file. FOr the ajax stuff I was following this tutorial from CSS tricks
https://css-tricks.com/video-screencasts/85-best-practices-dynamic-content/
You can use history.pushState
window.history.pushState("object or string", "Title", "/new-url");
The url will be www.example.com/new-url
in fact you can get history.state after use this method.
console.log(window.history.state)
output should be "object or string"
You can see the docs here.
Remember to use / to override the entire path.
To do what i think that you want, you can just override the url to / and set the hash.
This is probably not the best way to do this, but I have managed to redirect any page to the home page and then replace the / with the hash value so that the site wont end up wit "messy" URLs.
if(window.location.pathname != "/home.html")
{
window.location.replace("home.html" + window.location.pathname.replace("/", "#"));
}
what happens id the user navigates to "*www.example.com/about*" they will actually be sent to the homepage with the #about.html. So the never end up like this "*www.example.com/about#about*"
Here is my apps home page url: http://localhost:4200/
Whenever the user selects a next button a new screen loads with a new url similar to the examples shown below:
http://localhost:4200/screen/static/text/1/0
http://localhost:4200/screen/activity/click-and-reveal/1/1
http://localhost:4200/screen/activity/click-and-reveal/3/2
and so on
I would really like the url to display a single value something like http://MyProjectName ..... as i think it looks rather unprofessional to have the url looking the way it is looking currently.
Any help as to how i could accomplish this would be greatly appreciated :).
The URL won't change if you use the navigation option SkipLocationChange on your links.
<a routerLink="/somePath" skipLocationChange>Settings</a>
Or in code behind:
this.router.navigate(['/somePath'], { skipLocationChange: true });
Their are few ways to achieve it:-
Redux
Shared Observable
I have a sub html (template) products.html, that I included in my index.html page with JavaScript/jquery function .load()
Now the problem is products.html can be access directly if you type its url, and it gives a very ugly page alone, so I tried to redirect anyone who tries to access it to index.html using JS function windows.location. The problem with this method is, when my template is loaded in my main page, the js script fires, and it leads to refresh to the page. So is there another way to go about this !?
You can define a variable like window.parentPage = true;
in the index.html file.
In the products.html page make a check like so:
if(!window.parentPage)
{
window.location.href = "YOUR REDIRECTION PAGE"
}
Another alternative:
<body onload="if (document.referrer == '') self.location='index.html';">
I have a menu that is static and is the same on all page views. On the main page it should link to bottom of the page (#footer) and when you go to a subpage then it would link to another page.
In my case I have a blog on Magento shop and on the front page there are some blog posts at the bottom of the site and when clicked on the main menu it should redirect there. But when user goes to category or product page then it should link to blog directly.
I'm not sure if this is even possible, google didnt help also.
If there are any ways I would be happy to see them.
Thanks!
Your solution would be like this:
Click Me
<script>
$(document).ready(function(){
$('#myBtn').click(function(){
if(window.location.href == "http:// ...."){ //used to find the current page location
location.href = "#abc"; //at the bottom of page
}
else{
location.href = "http:// .... ";//the next page you want to take the user to
}
});
});
</script>
Using plain html, any anchor cannot have multiple href locations. But, by making use of JavaScript (I have used jQuery Lib) you can first find the current webpage location and based on it redirect the user on click of hyperlink or button to other locations on your desire.
Maybe you can use Javascript to get the page where you at. Then build an if-statement with something like if (page == homepage) to go to the footer and (if page == category go to product).
if sub-page is on different URL, Use condition by checking current URL.
Get current URL in web browser
<script>
function myFunction() {
var str = window.location;
var patt = new RegExp("#ide");
var res = patt.test(str);
if(res){
location.replace("http://www.homepage.com")
}else{
location.replace("http://www.subpage.com#ide")
}
}
may be this script will help you.
I am at a bit of loss of knowledge and honestly don't know what to search for. What I need to be able to do is determine what content to show on a webpage that way when I refresh it will not reset everything. For example, if someone clicks on the messages tab I want the browser to know when it refreshes, that is the tab to stay on. I believe this is done through url encoding but I am not sure. Any help would be AWESOME! Thanks fellow coders.
MORE INFO: I have 2 buttons on a page. One is named "home" and when I click it I want the content of the home page to appear in a box named "info-main". I am doing this with ajax requests. When I click on "edit profile", I want the content in div id "info-main" to be replaced with the edit profile information that is retrieved via ajax as well. I need to figure out how if someone refreshes the page... I want it to stay showing the edit profile information rather then going back to the default of "home" content.
MORE INFO(AGAIN)
I just had a great idea. When the page refreshes, I want it to load specific ajax code based on what the url encode is.
For example.... if the url is:
http://www.exampleurl.com/index.php?info=status-load
I want the browser to execute the ajax I have for retrieving status's.
OR
If the url is:
http://www.exampleurl.com/index.php?info=edit-prof
I want it to load the ajax code I have for retrieving profile edit info.
I really hope this helps. :/
The way I do it is I place a # before the link i.e. href="#messages"
Then I link a .js with this code.
$(function () {
var hash = location.hash
, hashPieces = hash.split('?')
, activeTab = $('[href=' + hashPieces[0] + ']');
activeTab && activeTab.tab('show');
});
I hope this helps
For referring an element on your page, you use a link with a hashtag.
For example, if you have a layout like this:
<div class="top-nav">
Home
Edit Profile
</div>
And you have a password edit form on your editProfile page, you can like to it like this:
Edit Profile
if you have a <form id="passwordChange"> on your editProfile.
Read more: http://css-tricks.com/hash-tag-links-padding/