Is there any option without anchor link when use multiple page? - javascript

I'm use Jquery Mobile and there is 3 page. I need user open the page by his app and share the link to his friends.
But If I use the link way, like:
<!-- this is a second page -->
<div data-role="page" id="secondPage"><div/>
<!-- this is navigator from first page -->
<div><a href="#secondPage" >secondPage</a></div>
If I click the link, it will navigate to second page, but it will also change the website link address(add #secondPage). then if user share the address , the second page will display every time his friends open it.
So Is there any way to replace the anchor link way? or resolved this problem?
Thank.

I copied and pasted this solution from: Remove querystring from URL
var testURL = '/Products/List#discounted?SortDirection=dsc&Sort=price&Page=3&Page2=3';
testURL.split('#')[0].split('?')[0]; // Returns: "/Products/List"
This was the winner among the other alternatives.

Related

Anchor link opens Lightbox in another page

I'm having a bit of an issue figuring out a very simple interaction.
Some Context:
I'm working on a website that showcases some products in a grid and when clicked, a Lightbox pops up with the information of the product..pretty simple! Roughly my markup/script:
<img id="1234" src=".../blah.jpg"></img>
$( img ).click(function() {
// open (this) lightbox
// etc. etc.
});
Now I'm trying to implement the search functionality, which exists obviously in another page. The search reutrn a list of products each one with a path such as:
Product 1234
So if I click the item, it will take me to the correct page where the item exist and since I'm including the anchor link, it will kind of place it visible to the user. This works fine.
My question is, how can I make the Lightbox open automatically after being directed from the search to the actual category page where the product exists?
This seems to be super simple, but for some reason I can't manage to figure it out! Any help would be really appreciated!
Thanks!
So when the dom is ready on the category page, you wan to check the url to see if an anchor exists. This will mean that they have arrived via the search results page.
reference:
How can you check for a #hash in a URL using JavaScript?.
Something like this:
if(window.location.hash) {
var hash = window.location.hash.substring(1); //Puts hash in variable, and removes the # character
alert (hash);
// hash found
// open (this) lightbox
}
If it exists, get the product id from the hashtag and trigger the lightbox functionality

Redirect to particular tab on a page from a different page

I have 2 pages and in page 2 we have dynamically tabs created . In page 1 I have a button and when I click that button I open a form and fill the details and select under which tab i have to show this information (Usually we select tabs in page 2) .
Now once i click on submit button in page 1, I am able to navigate to page 2. But I also want to navigate to tab level. In short I have to navigate to page 2 (which ever tab i selected earlier). How to do this in angular JS.
For naviagating I am using window.location("/page2)".
My code is
<div ng-repeat="t in tdata" class="time-tab-adspace " ng-class="{'tab-align-center':tdata.length==2}">
<a class="nav-people-tab text-hover" data-toggle="tab" ng-class="{'nav-people-tab-hover in': 'ticket'+seltab=='ticket'+t.code}" ng-click="selecttab(t)" data-target="#ticket{{$index}}">{{t.name}}
</a>
</div>
A piece of working snippet would be appreciated greatly.
Thanks in advance
Tell the page which tab has to be activated. This can be done via $localStorage if you don't want to add search parameters to the url.
In your function which calls the page2:
$localStorage.nextTab = 2;
Now in your page2, you can access this tab number and set the tab at the startup.
$scope.setTab($localStorage.nextTab);
See ng-storage
You can use window.localStorage if you need to do it in plain JS
One way to do is to set the selected tab as query string parameter. So you will have for navigation:
window.location("/page2?tab=2)"
And in the controller check for the query string tab value and activate the corresponding tab.

jQuery tabs programmatically call a URL based tab from within code

Situation
As you can see in the screenshot below, I have an area of my site which makes use of tabs to split up the user dashboard. The tab indexes along the top are declared as URLs and as a result jQuery creates the references at runtime. I would like the user to be able to click the "here for free content" link and the system calls the Free content tab. Let's call that URL "testserver/user/free-content" for the moment
Issue
Now, I know how to programmatically deal with this situation when the tabs are declared on page as divs and have static IDs I may assign but, in this case, am not ashamed to say it has me a little stuck before I've even started.
If I set an ID on the link, jQuery will overwrite it so, I can't use that approach.
Start of solution
What I'm thinking of is the following, sorry that for the moment, I don't have a fiddle, as/if I progress, I'll update the question.
User clicks the link and jQuery picks up the event by checking if it hasClass('tab-url-call')
Temporarily save the URL attribute
Loop through the tab index
Check if URL attribute matches the temp stored
If matching call this tab
This bit has me at an end of what to do
Next
Update - Extra information
As requested, here is some HTML to demonstrate the current structure
<div id="user-tabs" class="tabs">
<ul>
<li>
Welcome
</li>
<li>
Free content
</li>
<li>
Learning
</li>
</ul>
<div id="tab-user-home">
<h3>You current have freen content "showing"</h3>
<p>
This is just an information box to highlight that the user has an
option set to show free content and inform them that they can
reach it via the tab controls or click
<a
class="tab-url-call"
href="testserver/user/free-content"
>
here for free content
</a>
</p>
</div>
</div>
Thank you for taking the time to read my question.
In abstract what you are looking for is
//register a click event handler for elements with class tab-url-call
$(document).on('click', '.tab-url-call', function(e){
e.preventDefault();
//you need to place the selector for the tab header element here
//find the anchor element with the same href as the clicked element which is inside the tab header element
$('tabheader').find('a[href="' + $(this).attr('href') + '"]').click();
})

After button clicked, change to different page and show hidden content

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

Click a "button" in an HTML page will direct the user to another HTML page, and make a "hidden div" in that other page shows with jQuery

I want to create something like this:
Clicking a "button" in an HTML page will direct the user to another HTML page, and make a "hidden div" in that other page shows.
How to make this with jQuery?
Here is my code:
• PAGE01.html (where the "button" resides):
(HTML code & jQuery code):
http://jsfiddle.net/pDpeN/
• PAGE02.html (where the user will be directed and the "hidden div" resides):
(HTML code):
http://jsfiddle.net/kdHrh/
Thank you in advance.
You can just pass a parameter to URL (e.g. www.example.com/?loaddiv=1) and then check for loaddiv=1 using simple jquery code on the next page (Search on Google).
Best I can think off based on your example is to make call to second page with anchor
document.location.href='PAGE02.html#'+x;
Second page will be than PAGE02.html#hiddenDiv. Than parse value of hash from jQuery on second page and show div with same id. See here how: Getting URL hash location, and using it in jQuery
Second line of your script on first page ( $('#'+x).slideDown(200);) can not in any way do that, you must do it on second page.
But I think you should rethink your approach, in your example all should be probably done in a single page.
This will open the redirect url:
<a href="javascript:q=(document.location.href);void(open('http://example.com/#redirect,'_self','resizable,location,menubar,toolbar,scrollbars,status'));">click here
</a>
for second window:
$(function(){
if(window.location.hash.replace('#','') == 'redirect'){
$('#hiddenDiv').slideDown();
}
});
here i use a hashing when the url is visited by button.

Categories

Resources