I have different pages and scripts on my website. I want to show 1 URL in the adressbar for all the pages.
I have pages like:
www.example.com/index.php
www.example.com/map1/index.php
www.example.com/map1/map2/index.php
www.example.com/map1/map2/map3/index.php
I want that all these URLS should be shown like:
www.example.com
I have expirimented with my .htaccess script, but I cant get this working.
Can anybody help me with this problem? How can I show all the URL`s on my page like "www.example.com".
You could make www.example.com/index.php (which would be the default for www.example.com) be the only page that actually gets loaded fully, with all the others simply providing content to be loaded via ajax.
You could also make www.example.com/index.php contain only an iFrame or a frameset, such that clicks to other locations would only be to the nested frame, leaving the address bar always at www.example.com
You could also try taking "map1" and "map2" etc out of the URL and use them instead as post variables, or $_SESSION variables, or what have you.
Hide the Target URL of a Link in Status Bar
There are some instances where you have redirect the user through one page to get them to another page. There is a way to do this stealthily - without letting the user know that there was a redirect. Yes - it sounds evil - but it don't have to be. Say you have a click tracking software - you have to track each click the users make. To do that you need a redirecting page what will track the clicks. Hopefully, the following illustration will make things clearer...
Current Page->Page with the click counter->Destination Page
You don't want the user to see that you are passing through the middle page. Usually, the URL will flash in the address bar for just a second(or less) - so we don't have to worry about that. We just have to prevent the URL from appearing in the status bar when the user hovers over the link.
There are three methods to do this...
Change the status text
Hijack and stop the click event and redirect
page.
Make an Ajax call on click event.
Changing Status Text
This is the old method. This uses the window.status property to show a different URL to the user. Simple and easy method - but it rarely works now a days. This method has been abused by malicious sites a lot - so most browsers have disable this option. In Firefox, you can find that option at Tools -> Preferences -> Content -> Enable Javascript(click on the 'Advanced' Button) -> Change status bar text. If that's checked, you can use window.status to change the status bar text. But its disabled by default.
But if you still want to use this method(not recommended), this is how to do it...
<a href="click_counter.php?redirect_to=http://www.google.com/"
onmouseover="window.status='http://www.google.com/';return true;"
onmouseout="window.status='';">Go To Google</a>
Hijacking Click Event
In this method, when the user clicks on the link, the script captures the click event and stops it. This will prevent the browser from opening up the target page. Then we use location.href to go to the new page. Sample code below...
HTML Code
Go To Google
Javascript Code
<script type="text/javascript">
function init() {
document.getElementById("google-link").onclick=function(e) {
e=e||window.event;
stopEvent(e);
location.href="click_counter.php?redirect_to=http://www.google.com/";
return false;
}
}
window.onload=init;
</script>
Ajax Method
This is for all you web 2.0 fans. Ajax method simply makes a call to the counter server side script on the click event. This is perhaps the best method of all - as the counter URL doesn't appear at all. Needless to say, the server side script used here will be different from the one used in the other methods - there is no redirection here. The code is very simple as well...
HTML Code
Go To Google
**Javascript Code**
<script type="text/javascript">
function init() {
document.getElementById("google-link").onclick=function(e) {
jx("counter.php?url="+escape("http://www.google.com/")); //Use your favorite ajax library here.
}
}
window.onload=init;
</script>
Related
How can I use php to echo a page instead of linking to existing html page with hyperlink?
One example would be
<html>
<body>
click on this link to go back
</body>
</html>
Now, I don't want this link above to be a link to html page but to echo a page with php code when user clicks on click on this link to go back(to generate a page). This way, nobody can access a page after they logout.
Can php do this?
If someone logged out of your website or application I assume you will have a check whether or not this person is allowed to view the content.
Your question itself is very unclear to me. But it sound a bit if you want to do client-side coding (don't follow a link when it's clicked) with PHP which is not possible since PHP is a server side language. You will need Javascript to change the behavior of a link (for example, make an AJAX request which returns the content of another page).
Create a function, what the function should do is it should get triggered on a button click event and the code inside the function must send an curl request to the url you want and get back the html from it and echo it on your page
For answering the second part of your question!. you want no one to access the data without logging in so maintain $_SERVER['']; and sessions for users and validate if the user is inside a genuine session then show him content else no
This may sound vague, I apologise for that. But I can't seem to find anything or anyone that's trying to do the same as me.
Although, I've just seen How to trigger open a jQuery UI dialog from a separate page? but I'm not sure that would strictly work.
I have a single profile page for members with the data driven by an XML feed. On the profile page is a link that opens a jQuery dialog box. This is working fine.
Elsewhere on the site, is another page that generates a list of members depending on a filter, with a link to that users profile. Also on this other page, with the list of members, is a duplicate link to the jQuery dialog box.
How can I make this duplicate link go to the profile page and automatically fire the jQuery dialog box to open?
My way to do this is to use Hash part of URL
for example your URL to profile from other page should be like this
profile#showdlg
and in profile page
var hash = window.location.hash.substr(1);
if(hash == "showdlg"){
//Show dialog here
}
And this should do the trick
You cannot (should not) directly trigger some script action in a page "to be loaded in future". Instead the trigger should be part of the page itself.
So if that profile page is generated in a dynamical way an approach would be to implement a conditional feature that adds such trigger (like using jquery to fire the dialog when the dom tree is ready, there are millions of examples for that). The condition would be whether the profile page has been called via such a special reference or not. You could detect that by looking at the HTTP-REFERER. So it boils down to: if called in a specific way, then add a 2-lines-of-code trigger to the profile page that initially fires the dialog.
To answer your comment below here some more detailed description:
There is not much coding involved. The links reference the users profile pages. The profile pages are generated by php I assume. So all you need to add is one detail: inside php check if the request currently processed has a certain referer it was raised from:
<?php .... if ('other_page.php'==$_SERVER[HTTP_REFERER]) { ... } ... ?>
If so you know that the profile page was called from that other page instead of the normal situation, so you want the UI dialog to fire by itself. For this you add a tiny javascript to the generated page which does the trick as soon as the page has loaded:
<script>$(document).ready(function(){$('#mydialog').raise();})</script>
The details obviously depend on what type of dialog and how it is raised. But you should get the idea of what I suggest...
I have a website that loads its content by the user clicking a button, then the clicks calls a javascript function that updates just the content of a central <div> element by changing its inner html with AJAX and jQuery.
So for example, when the visitor wants to go to my contact page, they click the contact button, and the div's content is updated to the contact form by pulling that content from an external file and using it to replace the div's innerHTML. The actual address of the entire page doesnt change, as the entire page isnt being reloaded, just the innerHTML of the div.
Further to this, my site uses PHP, and I've coded it such that various content can be populated in the div on page load by passing variables in the url. For example, index.php?page=home will tell the PHP script to load the home page content from an external file, while index.php?page=contact will load the contact form. This way search engines can find each page and their content by following these links in my sitemap.
My problem is that if a visitor clicks a button and loads different content into the div, then clicks the reload button of their browser or presses CTRL+R, the entire page reloads and the div of course reverts to its original content.
My question is, is there a way to load a particular page when the browser refreshes? For example, if the visitor has loaded the page index.php?page=home then clicked on the contact button and updated the div content, then pressed the refresh button of their browser, can i somehow write a script that will load index.php?page=contact instead, preserving the look of the page and the content?
Option 1: location.hash
Easier, but not as robust. Worth taking a look at, but if you want to store the states of multiple elements, you probably want option 2.
Here's a demonstration of the code below.
Example:
function onHashChange() {
var hash = window.location.hash;
// Load the appropriate content based on the hash.
}
$(window).on('hashchange', onHashChange);
$(document).on('load', onHashChange);
$('#button').click(function(){
window.location.hash = "home";
});
This way, all you need to do is change the hash on button change and handle the page load using the hashchange event.
Option 2: History API using History.js
A little harder to implement (but not much!), but infinitely more robust. Relies on a widely used framework.
Another, and perhaps a cleaner way of doing this would be to use the History API. It allows you to change window.location without refreshing the page, allowing you to handle those changes using JavaScript.
Not all browsers support the API yet though, but you could use History.js, which provides location.hash fallbacks if needed. Here's a demo.
From History.js's github page:
History.js gracefully supports the HTML5 History/State APIs
(pushState, replaceState, onPopState) in all browsers. Including
continued support for data, titles, replaceState. Supports jQuery,
MooTools and Prototype. For HTML5 browsers this means that you can
modify the URL directly, without needing to use hashes anymore. For
HTML4 browsers it will revert back to using the old onhashchange
functionality.
Example of History.js:
function onStateChange() {
var state = window.History.getState();
// Handle state accordingly.
// Fetch the data passed with pushState.
var data = state.data;
var title = state.title;
var url = state.url;
}
// Check the initial state.
$('document').on('load', onStateChange);
// Listen for state changes.
window.History.Adapter.bind(window, 'statechange', onStateChange);
// Any data you want to be passed with the state change.
var stateObj = { variable : 'value' }
// Change state using pushState()
window.History.pushState(stateObj, "State name", "/page.html");
The state name is ignored by most browsers. The third parameter is the bit that gets added to the URL.
Weeks ago I've released a jQuery plugin for this situations, when the developer wants to add ajax content to a page, and dynamically change the URL.
The plugin is jQuery Dynamic URL https://github.com/promatik/jQuery-Dynamic-URL
There is a demo here: http://promatik.pt/github/dynamic-url/
When you load ajax content, you can push a path to the URL, ex:
$.pushPath( 0 /*level*/, "contact" )
Your site instantly turns to: example.com/contact
Or in your case, you can use:
$.pushVar( "page", "contact" )
Your site instantly turns to: example.com/?page=contact
This plugin also allows you to do this:
Imagine that you give me a link for: example.com/?page=contact
In the index page, $.getVars( ) will return: {"page" : "contact"}
So with this info you can build your page based on the this queries.
There's more thigs you can do with the plugin, like listening to event onPopState (that means user went back or forward in browser, so you can rebuild your pages based on that) just try out the demo...
Important information: This plugin works in all modern browsers except IE9, witch works partially, you still can access url data like example.com/?page=contact (and build your page based on this queries) but not modify dynamically the URL during the user experience.
currently I have the a basic jQuery gallery:
<ul>
<li>IMAGE</li>
<li>IMAGE</li>
</ul>
// with NAV stuff
I cycle through the images with animations and everything works great.
However, my client "NEEDS" another setup, whereby there will be a new page per slide. GQ.com is a good example of this. Click the link to check it out.
If you will notice, each time you click 'Previous' or 'Next' a new page is loaded, creating more pageviews for the site.
My Question:
Is it possible to have this with my current setup (b/c it can't change)? Or is it only possible through the server-side programming? How are they doing this?
Take a look at what's actually happening there. The URL for the "next" button looks like this:
Next
But when you click on it, where does it take you? You get here:
http://www.gq.com/style/wear-it-now/201010/best-jean-jackets-denim#slide=2
Notice the difference? It's a hash # instead of a question mark ?. They aren't reloading the entire page, they are making an HTTP request asynchronously in Javascript and using some form of hijax to change the browser's hash value (that which appears after the #...the only part that javascript can change), thereby allow the user to cycle backward and forward with the regular browser controls. The way to do this is to build in methods in your javascript to detect the value of what's after the hash both on page load and after a page's hash value has changed. Then you can have another javascript function actually control changing it when you click the "next" or "previous" buttons, and return false to kill the normal anchor href execution.
The reason this is called "hijax" is because your site still has perfectly-valid hrefs (e.g. you can go to that link above but replace the # with a ? and get to the exact same application state). This allows search engines to crawl your site and users without javascript to effectively use your site, while also providing all the AJAXery that people expect in fully-featured browsers. The trick here is to make sure that what comes after the # can be passed via AJAX to your server, have the server understand that it's an AJAX call, and process a return value that your javascript can understand. The easiest way is to use the extra bit after the # as the URL of your AJAX request and let the server interpret everything properly.
Is it possible to detect when the user clicks on the browser's back button?
I have an Ajax application and if I can detect when the user clicks on the back button I can display the appropriate data back
Any solution using PHP, JavaScript is preferable. Hell a solution in any language is fine, just need something that I can translate to PHP/JavaScript
Edit: Cut and paste from below:
Wow, all excellent answers. I'd like to use Yahoo but I already use Prototype and Scriptaculous libraries and don't want to add more ajax libraries. But it uses iFrames which gives me a good pointer to write my own code.
One of my favorite frameworks for doing this is Yahoo!'s Browser History Manager. You register events and it calls you back when the user returns Back to that state. And if you want to learn how it works, here's a fun blog entry about the decisions Yahoo! made when designing it.
There are multiple ways of doing it, though some will only work in certain browsers. One that I know off the top of my head is to embed a tiny near-invisible iframe on the page. When the user hits the back button the iframe is navigated back which you can detect and then update your page. Here is another solution.
You might also want to go view source on something like gmail and see how they do it.
Here's a library for the sort of thing you're looking for by the way
There's no way to tell when a user clicks the back button of presses the backspace key to go back in the browser, however there are other events that happen in a certain order which are detectable. This example javascript has a reasonably good method for detecting back commands:
The traditional way, however, is to track user movement through your site using cookies or referrer pages. When the user goes to page A, then page B, then appears at page A again (especially when there's no link on B to A) then you know they went back - A can detect this and redirect them or otherwise.
The Yahoo User Interface Library, my personal favorite client-side JS library, has an excellent Browser History Manager that does exactly what you're asking for.
The simplest way to check if you came back to a cached version of your page, which needs to be refreshed, is to add a hidden input element that will be cached, and you can check if it still has its default value.
Just place the following inside your body tag. I place mine right before the end tag.
<input type="hidden" id="needs-refresh" value="no">
<script>
onload=function(){
var e = document.getElementById("needs-refresh");
if (e.value === "yes")
location.reload();
e.value = "yes";
}
</script>
I set a variable $wasPosted in $_SESSION with value false.
All my posts go via the same php file, and set $wasPosted to true.
All header(location:) requests are preceded by setting $wasPosted to true.
If $wasPosted is false then the page was loaded after use of the backward or forward buttons.
The dojo toolkit has functionality to deal with this in javascript. I don't think there is any good way to handle it in pure PHP.
Here is the docs page they have: http://dojotoolkit.org/book/dojo-book-0-9/part-3-programmatic-dijit-and-dojo/back-button-undo