Ok so i am creating a website for a friend and he wants the site to work in the following way.
He has one page that has two sections that can appear. Only one section can appear at one time. A button is used to switch between the different sections. The way im currently doing this is by using two div's and dispalying/hiding them when the button is pressed. So if section 1 is showing and the button is pressed section 1 will fade out and section two will face in.
This all works great, however what he would like it to be able to send people links to his site and depending on the extension show that particular section. For example, lets say these two sections are credits and content. If he send someone the url of www.site.com/credits then he would like the credits section to show. And if he sends the url of www.site.com/content then he would like the content section to show up. He would also like to maintain the button click to switch between the two.
I have been looking into it and it seems that this could be done using hash values (#) for example www.site.com#credits. Is there any way of doing this but using /'s instead of #'s?
Edit
The other thing about this is that he would not like the page to refresh when the button is clicked he would just like to use javascript to change the section.
If you're running Apache, you could use the rewrite module.
For example, setting it up like this:
RewriteEngine On
RewriteRule ^/(credits|content)/?$ switch.php?view=$1
Then in switch.php you have to evaluate the view variable you GET with the URL which section would be show by default.
this will help you get last portion from your url, based on that you can hide/display your content or credits.
jQuery(function() {
var url, page, n;
url = window.location.pathname;
n = url.lastIndexOf('/');
if (n >= 0) {
page = url.substring(n + 1);
}
if(page == "content"){
//display content
} else {
//display credits
}
});
Related
I have page flow like this
User lands on the landing page.
Then does some selection of some select boxes and then hits search.
Then use is taken to new page with all search criteria and displayed search results.
In this page we have left section to display all results and when user clicks on any result item we show the result details on right side.
All this was fine. But now client want a bookmarkable link for the open section i.e. when use clicks on the left div, right div should open and this should have proper url, so that it can be shared.
How can i achieve this, making urls for open divs? i tried #id=1002 everything worked, but when user copies the url and pastes, java is not able to get the hash tag.
Here is one of doing it. -- Codify and map URLs and then handle them within the javascript.
Let me explain.
Say for example, you have 2 divs -- div1, div2
(1) Codify and create a mapping logic/convention ---
Map the states of divs to URLS --
div1 open div2 close --> URL = mysite.com/page/d1-open/d2-close
div1 open div2 open --> URL = mysite.com/page/d1-open/d2-open
div1 close div2 open --> URL = mysite.com/page/d1-close/d2-open
div1 close div2 close --> URL = mysite.com/page/d1-close/d2-close
and so on
(2) Handle the URL at Server --- Just make send the output of mysite.com/page , ignore the rest
(3) Handle the URL at Client ---
something like this
function handleURL() {
var myURL = window.location.href;
var urlArray = myURL.split("/");
//examine the urlArray and decode the URL code after mysite.com/page/
// and open or close your divs accordingly
// eg: if the url-part after page/ is div1-open/div2-close
// i.e urlArray[2]=div1-open and urlArray[3]=div2-close
// you would know what to do accordingly...
}
The example I explained you, is barely scalable. You will have to manually come up with 2^n mappings for each combination of n divs. However, if really want to make it scalable, you can automate the codification too.
You can assign each state of the page a unique id.
Eg: mysite.com/mypage/page-config-id=abcd1
Then you ask the server the for the div configuration
i.e which div is open which divs are closed etc as a JSON. And then you can use Javascript to parse the JSON and rearrange the page.
You can store the div config --> page-config-id key-value pair in a key-value database on the server in a database or file or noSQL or whatever.
You need URL to right divs content only.
You will have to come up with a uri router that links to the searched resource.
If your search resource is user profile then all user should be accessible via some uri like /user/:userid.
Suppose the search is for a person named z.Your left div will have all profiles with name z. Clicking on any result item will open that person in detail view, however the URL should be changed using location attribute to /user/z1.
Also you will need to check if the user that is searching for the resource has access level to view that content.
Not sure if this is possible, with or without jQuery. I have a page where there are two dropdown menus; one is showing today's car sales and the other is showing car sales from yesterday. Today's Sales is always rendered on page load; when a radio button is checked the Comparison Sales is then rendered and an extra path is added onto the URL.
The issue I have is that when a user is sent the url with the extra path (i.e the comparison menu has been selected prior to the link being sent) the text etc of the Today's Sales dropdown won't populate when they open the link.
So for eg:
URL with no comparison:
http://www.example.com/today/sales
URL with comparison dropdown open:
http://www.example.com/today/sales/compare/yesterday
I want to create an if statement to say something like
if(link.pasted) {
//do this
}
Again not sure if this is possible.
You seem to have redirected an entire page to a different URL when the user makes their selection, instead you should consider using a hash at the end of the url to indicate the "comparison" has taken place.
So you'll end up with two urls, both of which could be pasted into a browser
http://www.example.com/today/sales
http://www.example.com/today/sales#compare-yesterday
It is easy enough to apply the hash to the first url on a javascript action
$('input:radio.compareYesterday').click(function(){
location.hash = "compare-yesterday";
});
You can also watch for a change in the hash location, in order to perform some update to the view - I suggest you wrap that up in a function, as you'll be doing it onload too!.
function updateUI(){
if(location.hash == "#compare-yesterday"){
// do whatever happens when comparison is active
}
else{
// reset the UI to its default state
}
}
$(function(){
$(window).on('hashchange',updateUI);
// other onload stuff
updateUI();
});
This fiddle demonstrates however jsfiddle does not allow me a url that goes direct to the result in a way which passes the hash through - so although the code is there I cant demonstrate that it would also work if you went directly to the #compare-yesterday route.
This is the basis for how Single Page Applications deal with routing, and how to adjust the view depending on the users actions (or indeed, if they've followed a link into your SPA). You may like to have a look at frameworks such as Angular if you're interested in learning more.
Depending on the entire architecture of your page you could propably set a js variable to some value on dropdown selection. You can then check if this variable is set to determine if the user got to this page just now.
Is it possible to alter the url of a webpage so that it will activate specific click-activated features on the webpage without the user having to do the clicking?
To better illustrate my question I made this fiddle.
The page loads with a red box with information in it. The user can click the box once to see new information. They can click it again to see a third piece of information.
I would like to have urls that load the page with specific information showing. For example, if the main url for my page is http://www.mypage.com, then I would like to have urls http://www.mypage.com/#info2 and http://www.mypage.com/#info3 so that when the user enters the info2 (respectively, info3) url, the page loads with the second (respectively, third) piece of information showing.
Remarks: I have searched some other questions about activating scripts with hashtags, but have not found something I can understand or implement into what I want to do. In particular, I need my hashtag urls to be able to implement a sequence of several actions (e.g. two clicks to get info3 in the above example).
Remark 2: I am open to other solutions too. I just need someone to explain how to accomplish what I am trying to do.
You could use this after you define your click handlers.
if (window.location.hash == '#1'){
$("#info1").click();
}
if (window.location.hash == '#2'){
$("#info1").click();
$("#info2").click();
}
Not sure if any of this works -- I didn't devote much time on it, given the state of the question, but consider:
var hash_page = (window.location.hash+'').replace(/^#/,''); // get hash and parse
var page_number = hash_page.match(/\w+?(\d+)/)[1] || 1; // get the number
var next_page = page_number + 1; // get next number
$('#info'+page_number).click(function(){
window.location.hash = 'info' + next_page;
});
Assuming that your red box is a div like this:
<div class="redbox">...</div>
and that you have three blocks within it (info 1, 2, and 3):
<div class="redbox">
<div class="info1">...</div>
<div class="info2">...</div>
<div class="info3">...</div>
</div>
With jQuery you could do something simple like this:
jQuery(".redbox").click(function()
{
if(jQuery(".redbox .info3").is(":visible"))
{
return; // all done already
}
if(jQuery(".redbox .info2").is(":visible"))
{
jQuery(".redbox .info3").show();
return;
}
jQuery(".redbox .info2").show();
});
I'm not too sure why you'd like that in the URI. The only reason for such would be in case the user comes back to that same place and you'd want them to see the page in the same state. If that is important, then yes, you should use the window.location.hash to change the URI. That way, if the user comes back you can test the hash and setup the status as required on load. However, note that the hash does not get sent to the server. It is only a client thing.
My solution supposes that info2 and info3 are already loaded. It is also possible to use the load() function to load them dynamically. It depends on their size and whether you do or do not want that information to be visible when the user does "Show Source".
There is the reason why some systems use the "hashbang" feature in their website:
https://developers.google.com/webmasters/ajax-crawling/
Google, at some point, said they would drop that functionality, but it looks like they have not done so and actually continue to encourage people to use that methodology. Twitter has been using it for a while, but from what I can see they don't use it anymore.
I have 16 database results shown on my website. Using a load more button, the user can load the next 16 database items and they get appended into the container.
Im trying to make a way so that if the user clicks back after visiting a link, they will get shown the same amount of results as they had loaded.
My plan for this is to add a page number to the url after each load more function. When the user clicks back in the browser, i can then use that parameter in the LIMIT php claus.
So, in my ajax response, i append the data and then i wish to add a page number to the url, or update the page number if there already is one.
An example of what i want to achieve is:
www.mydomain.com/?page=1
I have made a jsfiddle with a basic button click function just for testing since im away from my laptop until later.
jsFiddle
And the code just incase:
var url = document.URL;
var pageID = '1';
$("#addtourl").click(function(){
// add page id to the url
alert(url);
});
Where the url is alerted i want to modify the URL. I already create a page ID so thats not an issue.
Thanks!
You can use the HTML 5 history.pushState function as explained here .
I have some "Learn More" links on my Home page, all of which correspond to different sections of content that is on the More Info page. These different sections of content are all hidden using display: none.
What I'm wondering is if there's a way to make it so that when I click a particular "Learn More" link, the user will be sent to the More Info page, and the section of content corresponding to the Learn More link they clicked will be shown.
I can't think of a way to achieve this, but I'm hoping it will be possible, perhaps using JavaScript.
EDIT:
The code I currently have is nothing special. Four <a> links on the Home page, then on the More Info page, four divs that are all initially hidden using display: none.
The solution ended up being fairly simple, I did what is described in the top answer of this question: Getting URL hash location, and using it in jQuery
Learn more
<script>
function showContent(id) {
$("#"+id).show();
}
</script>
I think it is possible.You can take the information on a div,and then you click "Learn more",show the div.
In this way,you even needn't a hyperlink,just a click event,like the code upstairs.Of course,this div was hidden before.
One way you can achieve this would be to add a hash to that link with the id of the section you want to show, like this: Learn More. Then just check for it in window.location.hash on the /moreinfo page and show the div.
You have to do it this way: try to use named anchors.
first:
Learn More
when use clicks this link user will navigate to particular page with different sections.
second:
on this page suppose you want to show the 3rd section:
.....
<a name='section-3'></a>
<h1>Your section-3</h1>
In your case divs are hidden then use js or jQuery for this:
As you will get a hash in the location url then use .substr()' and.indexOf()` javascript methods.
try to put this script on those page where you are having your hidden divs
$(function(){
var url = window.location.href;
var obj = url.substr(url.indexOf('#'));
$(obj).show();
});