I have looked everywhere for this but have no idea how to go about it.
I want to have links at the top of a page such as; News | Reviews | Images etc
When someone clicks on one those links, I want it to load content from another php file and at the same time append the link name on to the url. Example: example.com/page1/review.
I have seen other sites do this like http://www.gamespot.com/the-witcher-3-wild-hunt/
I don't have any code examples because I am not sure how I would even start. I tried with .Load but not found that it works.
You can use the History API, you can use either pushState or replaceState to replace the url
history.pushState({},"","/the/new/url");
//or
history.replaceState({},"","/the/new/url");
The parameters for both functions are the same. The first one is an object that gets stored and passed to the onpopstate event. You can also retrieve it by history.state in the event of a browser restart.
The second is a title string, i believe at the moment no browsers fully utilize it so it can be whatever.
The last parameter is the new url you want in the address bar.
So if say you wanted to load your Images link and you wanted the url to look like /Images you would do something like
jQuery("#content").load("/images.php").then(function(){
history.replaceState({},"","/Images");
});
Session History Management Compatibility
I assume since you tagged the question with jQuery, that you are using the library. Look at the documentation for the ajax function in jQuery. http://api.jquery.com/jquery.ajax/ Without seeing your code, I can't give you specific code to help you but here's an example:
$.ajax({
url: "example.com/page1/" + variable + "/index.php",
success: function(result){
$("#div").html(result);
}
});
Related
So in Wordpress I have a static link in the footer that appears in all pages and I would like the URL in the link to change when but only when it's in a certain page. So it's like
All pages - footer link goes to href="https://website-A"
Except when on page 'x'(or lets say the About Page) then footer link goes to href="https://website-B"
Is there a way to do that in jQuery or JS?
Thanks,
Try something along the lines of this...
$(document).ready(function() {
var url = window.location.href;
var UrlofpageX = url.indexOf('theurlyouwanttolookfor');
if (UrlofpageX >= 0) {
$('.yourlink').append('<li>Your different link</li>');
}
else {
$('.yourlink').append('<li>Your original link</li>');
}
});
So what happens here is you get the URL of the page that you're currently on. It gets stored in a variable. You then look for the words within that URL that will determine that you are on this particular page X and not some other page.
Then you run an If/else. IF the variable has something in it after the check then you know you're on page X and you append a new link. ELSE you're on a normal page and you set the regular link.
You could use JavaScript in order to achieve that, using the window.location.href in order to get the current link of the page and then changing the text depending on the page.
BUT, this is really an awful solution for a LOT OF REASONS.
You should use directly Wordpress in order to do that and use PHP.
There are really a lot of ways for doing that.
You can implement your own widget/plugin, you can create a text plugin on the widget pages (using also a wordpress plugin in order to embed PHP code there) or you can directly add this PHP code inside the template section where to show the link, retrieve the current page and display the wanted text.
I suggest you also to change the tags to PHP and Wordpress, because as I said above, performing this task with JavaScript it's the worst solution you can do.
So i was wondering if it would be possible to change the client's link in the browser's searhbar with the help of either PHP or JavaScript(Not jQuery).
So let's say that i have this site with just one normal page but with multiple additional content files for specific subjects.
And these files are fetched with the help of variables stored in the link, just like youtube's: youtube.com/watch?v=105cdU..
And when you click on a link leading to some other content on this site it uses an javaScript ajax to fetch that other content without updating the navigation bar, the footer etc..
Now this all works up until now, but here comes the problem. Whenever an ajax is used, the page won't have the link to just that specific content.
Let's say the site have loaded some content about stawberries and then i'm clicking on a link that uses an ajax to update the content to chocolate instead. Now i'll be reading the content about chocolate but my link will still be directed to the strawberries.
Note that this isn't a real site because I haven't made it yet. So please don't ask for the code. I also appologize for my poor grammar and spelling.
Your question is correct.
Check Mozilla documentation to find complete details with example
https://developer.mozilla.org/en-US/docs/Web/API/History/pushState
https://developer.mozilla.org/en-US/docs/Web/API/History_API
I believe what you are looking for is called pushState. Here is a Javascript example of using it.
if (history.pushState) {
var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname + 'VARIABLES I WANT TO ADD';
window.history.pushState({path:newurl},'',newurl);
}
I often work with three variations of a web page, 1) a dev url, 2) a preview/staging url, and 3) and live url.
I would like to create a link (bookmarklet?) that I can then add to my bookmarks bar that will change part of the URL string (basically everything before the page name) and then load the resulting URL in a new tab (or same tab if easier).
Example:
working on a page with the Dev URL:
https://dev.mysite.com/cf#/content/www/page1.html
I would like to be able to click the link and have the page reload and return the following staging URL in the same or new window/tab:
https://preview2.mysite.com/page1.html
and then if I click the link again, I would like the page to reload and return the following live url in the same or new window/tab:
http://www2.mysite.com/page1.html
and then if I click the link again, I would like the page to reload and return the following dev url in the same or new window/tab:
https://dev.mysite.com/cf#/content/www/page1.html
So, I would basically like to avoid a lot of cut/copy and paste when I am changing through these variations of the url while developing, testing, and visiting the live versions of the page.
Here is where I am so far.. Stuck on the most basic aspect of it, if on the dev page, reload to preview page:
A variation of the method by joewiz.org "fixing-urls-with-dns-errors"
and this one from Stack user63503 "how to replace part of the URL with JavaScript?" and after also trying str.replace from W3Schools.
javascript:(function(){window.location.url.replace("dev.mysite.com/cf#/content/www/","preview2.mysite.com/");})();
or
javascript:(function(){window.location.pathname.replace("dev.mysite.com/cf#/content/www/","preview2.mysite.com/");})()
Thats just one of the steps as you can tell and I'm already stuck. I have tried so many variations but I cannot replace a specific part of the url, let alone add the rules to reload to dev, preview, live depending on where the current browser is.
I realize that very similar questions have already been asked, but I'm afraid that I am unable able to extrapolate actionable information from the ones that I have found. However, please let me know if you feel a previous post is relevent and I'll head over there and study-up.
Thank you all so much!!
Your code should work.
But try this
javascript:(function(){var loc=location.href;loc=loc.replace('dev.mysite.com/cf#/content/www/','preview2.mysite.com/'); location.replace(loc)})()
Remember to copy this into the URL of a real bookmark - I normally send people a web page they can drag from so the quotes are indeed important:
ReplaceUrlBM
i am dynamically creating an iframe then calling aspx pages into it, what i need to do is access the elements of the iframe page and change its ( only specific element like text box or label etc.) value without reloading the whole page.
the first task is to access the elements of pages being called into my iframe, i am trying to acess them with javascript but no progress so far.
i have tried various solution like this :
How to get the body's content of an iframe in Javascript?
Actually, the answer you've attached should work. But note that this is only true in case that your parent page and the iframe URL are loaded from the same host (domain name). if not, you will get an error message from your browser stating that this operation is blocked.
If you are trying to show another site through and iframe and then manipulate it then you have to give up this dream because it can't happen that simply.
I can think of one solution for you, not sure about the legality of it, and it is kind of a pain in the ass.
You can open up a server side script on your own domain that receive a URL, fetches it's content and then echo it. This way you get the original desired page contents but you have it on your own host so you can manipulate it as mention in the attached answer.
Note that it's not easy at all to control from there, because once a user clicks a link in the page his out of your control again, so you may want to change all the page links to the address of your server side script and attach the original link to let it fetch it for you. Probably a lot more issues that i haven't thought about.
PHP Example of such a function:
function fetchURL() {
$urlToFetch = urldecode($_GET['url']);
$contents = file_get_contents($urlToFetch);
// maybe here manipulate links and other stuff throw str_replace or,
// if you want more control over it, you may want to load it in to some DOM parser class,
// manipulate it and extract the result back to a string variable.
echo $contents;
}
Note that in that case you should load the script through the iframe with the desired URL as a query string like that:
$yourDesiredURL = 'http://www.example.com';
echo '<iframe src="http://www.yourdomain.com/your/script/path.php?url=' . urlencode($yourDesiredURL) . '"></iframe>';
*************** EDIT *****************
Actually now i see that you tagged .NET, so my example code is probably not the best for you, but since it's very short and simple it wouldn't be any problem converting it.
Again, i want to say that iv'e never tried it and it's probably over your (and my) head, maybe you better give up on the idea.
I am trying to rewrite a URL from something like this:
http://www.asdf.com/index.php
to
http://www.asdf.com/#welcome
http://www.asdf.com/#test
Right now, the welcome/test pages are sliders on the page and it moves it around without changing the url from index.php to welcome/test. How can I directly link these sliders?
Here's an article on preserving bookmarkability and the back button with Ajax.
http://onjava.com/pub/a/onjava/2005/10/26/ajax-handling-bookmarks-and-back-button.html
You would use a bit of JavaScript on the page to detect which (if any) sliders are in the URL and then triggering the action that exposes them.
you can not modify what the user has put in the url, you want to make sure your links say that. The only way you can change the url is with a redirect. you would need to use something like .htaccess files on apache to rewrite the .php urls to 'seo friendly' urls.
browsers auto detect the parts after # and go to that part of the page (if it exists). It does not do anything for the server though.