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.
Related
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.
Alright so I am not the most astute javascript/jQuery user, but here it goes.
I want to make a series of html pages that will each link to the next/prev page and will loop once they reach the end of those pages ('page1' and 'lastpage.html'). I know I could do that with just html, but I don't want to have to continually go and revise each page, as I plan on adding pages to that bank/series of pages, so the amount of pages cycling will increase.
The one solution I have thought up of is to test if the 'next' link will exist like this
$(document).ready(function(e) {
$('#next').click(function(){
.preventDefault();
.ajax({
type: 'HEAD',
url: 'art_2.html',
success: function() {
window.location.href = "art_2.html";
},
error: function() {
window.location.href = "art_1.html";
}
});
});
});
So basically how do I make this work, or am I trying to use a tool where I could be using a power-tool?
also added in a prevent default just remembered...
and guess what? Cannot use PHP :/ so yeah...
ALSO I'm kinda lack necessary intelligence to do a good deal of the things with the coding. Entirely self taught...
This is a broken "fix" at most. You should have a server-side script that updates the list regardless of which page you are viewing.
An example of decent implementation would be a mySQL database with a table that contains each page id (auto increment), page url, and optionally a page name. Then dynamically create the "next" and "previous" page based on the results returned form the sql queries.
Keep all pages you want in the cycle/loop in a folder in project
Write a class that reads directory structure
Manipulate file names as you want to link name and store these into a data structure
In UI, based on current page name, get the next one.
I hope this helps.
You could store the data structure in session to access via UI.
I need a search field on my site allowing users to search for their location (for a local weather forecast).
I have a html list of locations - each location is clickable (with href to the relevant weather forecast page).
The user should start typing a location in the search field - and as the location name is typed, a match function should start and autofill the search field.
The user should not see the list - only the search field.
Once the match function has autofilled the search field, user should press go or return - and the link to the relevant weather forecast be activated.
I know some html and javascript, but this one is above my level.
I found this code on stackoverflow Filter search for <ul>. It's something like that - but user must not see the list.
You would have shared a bit info with us:
You know some HTML, but don't wanna show it? We would have helped you better if you just sent us some code! :)
What you'll need
Ok, here is the thing.
First create an input field such as:
<input type="text" name="text" id="text" value="" onkeyup="search()"/>
Then use a function as:
function search () {
var value_field = $('#text').val();
$.ajax({
// create an ajax request here..and get the value
success: function (data) {
$('#div').html(data);
}
});
}
<div id="div"></div>
This will be the div where all the data from ajax would come and display.
Where all the thing is happening
Now the main thing is from the other page. You need to control it to show the data or hide it or whatever you want it to do. That's going to happen on the other page the page where request is going.
You can try to show the data only when there is a perfect match else write this:
$('#div').html('Keep writing, you can match');
And make the user write some more words, who know what he mind match!
User will never see the list
Untill or unless you let him go to the page, untill then he will just see the results you are viewing him! So you should use a Database to show the data when the request is Ajax only, otherwise don't create a connection to the database. This way user would never ever see the list, unless its you! :D
Summary:
And the thing is same, the main process is:
You create a function in the input field to search when there is any word added. Forget the backspace right now.
You will send the value to the next page for processing, get the data, set it to the type you want the user to see.
Display it using `$('selecter').html(data);
Good luck.
How do I get the previous page with javascript on phonegap?
I want to go back (window.history.back()) only if I come from one specific html file, otherwise I want to go to another html page when back button is pressed.
So I want to know which one is the previous page on history.
I have been googling for a while and I didn't find an answer that suits for me.
If you want something built in you can use document.referrer to get the previous URL. But it might not be reliable for your needs. More info here, here and here
Another VERY simple option is to store the current page name in the session storage, read it and then decide what to do next.
//retrieve the previous page
var previouspage = window.sessionStorage.getItem("page"):
// if thee is no previous page you are on the first page
if (previousPage == undefined){
//do something if you want, this means it's the first page the user is seeing
}
//get current page address
var currentPage = window.location.href;
//store it
window.sessionStorage.setItem("page",currentPage);
//check if the previous page is the one you wanted.
if (previousPage == "the_page_you_wanted"){
// do something.
}
LocalStorage vs SessionStorage
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
}
});