Update the user's link with either PHP or JavaScript - javascript

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);
}

Related

Change link URL to a different link depending on the page

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.

Open URL but point to main directory

I'm going to do a website with AJAX.
At the moment i change my main content with '#':
e.g. example.com/#home --> example.com/#site1
I managed it to change the content at the moment the hashtag changes.
But now i want to use a method i know from google.
example.com/home/ --> example.com/site1/
I know so far how to change the URL without reloding the page. (Modify the URL without reloading the page) My problem is if the user reloads the site or uses the navigation buttons, he will land on example.com/site1/index.php and not on example.com/index.php.
BUT it is important that the data (site1) is send to the script.
I hope you can understand my problem.
You need something on the server side (.htaccess for example) to return your index.php no matter what the url is.
See here for a possible solution: https://stackoverflow.com/a/8392502/1030527

Load another page in page and append another url

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);
}
});

Showing a demo of my CSS on any website

I have developed a small component which can be put in to any website. Now, I want to develop a code that could demonstrate how would my component look like on any website.
So, the person would come to my page and put in his URL and then my code should embed my custom JS/CSS in to the downloaded HTML and display it. Something like this.
Here, like the feedback tab, I want to show my component any where on that page.
Try a bookmarklet.
Create a piece of javascript that adds your code into the page such as the following:
javascript:(function(){var%20script=document.createElement('script');script.src='http://www.example.org/js/example.js';document.getElementsByTagName('head')[0].appendChild(script);})()
Add it as the href of a link like so:
Link Text Here
Tell your users to drag the link to their bookmark toolbar and click on it on different websites to try your code out.
Some examples: http://www.reclaimprivacy.org/, http://www.readability.com/bookmarklets
In the example you linked, they are requesting the page specified in the url querystring parameter on the server, and then doing more or less the following steps:
In the <head> tag they are adding a <base href="url" /> tag to the document. The base tag will make any relative links in the document treat the value in the href attribute as their root. This is how they are getting around broken css / images. (The base tag is supported by all browsers)
At the end of the document (IE the </body> tag) they are injecting the javascript that runs their demos.
They serve the modified HTML requested to the browser.
All of this is pretty straight forward in implementation. You could use regular expressions to match the <head> and </body> tags for steps 1 and 2 respectively. Depending on the server platform how you actually request the page will vary, but here are some links to get you started:
C# - HttpWebRequest object documentation
PHP - HttpRequest::send
Nathan's answer is the closest to how we have done the demo feature at WebEngage. To make such a demo functional, you'll need to create a Javascript widget that can be embedded on third party sites. syserr0r's answer on creating a bookmarklet is the simplest approach to do so. Our's is a JAVA backend and we use HttpClient to fetch the responses. As Nathan suggested, we parse the response, sanitize it and add our widget Javascript to the response. The widget JS code takes it on from there to render the Feedback tab and load a demo short survey.
Disclosure: I am a co-founder and ceo at WebEngage.
You can not do this with JQuery due to cross site scripting restrictions.
I suggest you write a PHP script that downloads the URL specified by the user and includes your widget code and then echo it back to the user.
I recommend using bookmarklets. I've made a bookmarklet generator for adding jQuery-enabled bookmarklets to a page to make development easier.
There's a caliper bookmarklet on the page that you can mess around with just to show an example of it working.
Full disclosure, this is something I've made, I'm not trying to be spammy as I think it's relevant: zbooks
You could make an iframe page, which loads their page in the iframe, and uses javascript to inject your code into the iframe.
Here is my approach...
http://jsfiddle.net/L2kEf/
html
<iframe src="http://www.bing.com"></iframe>
<div>I am div</div>
css
div { background: red; position: absolute; top: 20px; width: 100px; left:20px;}
iframe{width: 100%; height: 500px;}
you can add javascript/jquery too, so you could do something like,
jQuery //not 100% sure it would work coz of cross browser thingy, but you know, worth a try.
$('div').click(function (){
$('iframe').contents().html('changed');///
});
if this can't change any of the contents, you can display a dialog, to say it would normally work if it was in your website, then use #syserr0r approach for bookmarked users, for better results, since you are offering this kinda services, to developers, im sure they would know about bookmarking, my approach would be rarely used :) so hope it helps.
I had a problem of a similiar nature, and the main obstacle is the cross-domain policy.
You have to ask the user to put your code in a <script src="..."> or create a proxy solution that would add your code for them.
I went for the proxy and here are my observations:
it's easy to create a basic proxy in php - there are some php proxies on sourceforge and Ben Alman has created a simple php proxy for AJAX. Based on those I was able to create a php proxy altering the content properly in one day.
after that I spent a lot of time making it work with more and more sites with issues. You can never create a perfect proxy.
As an alternative (sa long as you are non-commercial) you can use http://www.jmarshall.com/tools/cgiproxy/ and put the site in an iframe and then do whatever you want to do with the iframes document, as it's in your domain thanks to the proxy. You can access iframeDOMnode.contentWindow.document then, etc.
You can create a Crossrider extension which your users can download.
Then simply add this to your App/Extension code:
appAPI.dom.addRemoteJS("http://yourdomain.com/file.js")
Your users can then download the extension (it works cross-browser for Internet Explorer, Chrome and Firefox) and it will load your JS code on every page load.
You can get an approximation of what it will look like using a iframe. Take a look at that link for an example.
http://jsfiddle.net/jzaun/5PjRy/
The issue with this appoch is that you can't move your DIV(s) when the page scrolls, they are in effect just floating over the iframe. There is no way around this as cross-domain scripting wont let you access the iframe's document to monitor scroll events.
The only other option you have for a better fitting example would be to load the page from the server side in whatever scripting language you are using and load that into the iframe (or into a div, etc.) and you can use javascript all you want as the page is coming from your domain.
For your example of what will your widget look like I imagine floating your DIV(s) over an iframe would give enough of an idea.
Please note the example you gave is using the server side method, not the iframe method.
I agree with the bookmarklet strategy.
I'm a fan of http://bookmarklets.heroku.com/, which lets you generate bookmarklets easily, inject jQuery, etc.

Changing the URL without reloading the page

I would like to know if it's possible to change the contents of the URL in the browser without reloading the page?
I use jQuery and Ajax to load new parts of my page. When I choose "product one", the direct link would be mysite.com/product1 and for "product two" would be mysite.com/product2, but I don't want to reload the site to these pages.
its now possible with HTML_5..
chack this link... http://www.spoiledmilk.dk/blog/?p=1922
also facebook and google using this tric beside Hash(#) attribute
You will have to add hash # if you want to prevent page from reloading.
The css-tricks.com has an excellent screencast on that, have a look at:
Best Practices with Dynamic Content
just use this one
window.history.pushState("object or string", "Title", "/new-url");
This is possible in HTML5. See a demo here.
You can change the URL to another URL within the same domain, but can not change the domain for security reasons.
See the history interface in HTML5 specification for details.
You CAN do that. Though likely you'll need a modern browser. Have a look at this page: http://www.20thingsilearned.com/ created by the Google Chrome team (I used Chrome 9 to read it). Changing pages doesn't reload the entire web page, but changes the URL.
Yes, it is possible using the HTML5 History API. Check this page and this example
You can't. Only if you change the hash, like sAc told you.
But.. May I ask WHY?

Categories

Resources