javascript: Resolving deeplinking issue - javascript

I have a tab component say in a HTML strcture
<ul>
<li><a id='tab1' href='/url#tab1'> Tab1 </a></li>
<li><a id='tab2' href='/url#tab2'> Tab2 </a></li>
<li><a id='tab3' href='/url#tab3'> Tab3 </a></li>
</ul>
<div class='tab-content'>
content of respective div loaded on click.
</div>
Here the content of the respective TAB as the click handlers are in place for that and its working fine without any
problems. The click handler looks like
$('#tab2').click(function() {
//show tab2 content.
});
Now, I have to support deeplinking so that , when user comes through URL : http://url#tab2, need to show respective tab content. So for this,
my approach is to use 'hashchange' event , which will read hash params and load the content based on the hash value.
The query or the pain is , woundn't it cause a conflict between click event on a and hash change event?
What should be the appropriate way of resolving deepliking in this case ?

Related

duplicate tab content with different information loaded

I have two tab that have the same content-structure but the information that I have to load in each one is different. I do not want to duplicate the html code, how can I do it and also how can I indicate to each form which are the value to load in each tab.
<div id="tabs">
<ul>
<li>Tab1</li>
<li>Tab2</li>
</ul>
<div id="Tab1">
// some html dropdown, textfield, etc
</div>
</div>
Now the tab1 loaded but tab2 dont work fine. I try somethig like this but I loose all my event in tab2
var clonedDiv = jQuery('#Tab1').clone();
clonedDiv.attr('id', 'Tab2');
jQuery('#tabs').append(clonedDiv);

Keep selected tab when click on back button

Here is the demo code:
<ul>
<li>All</li>
<li> ADVERTISING </li>
</ul>
suppose, advertise is selected and and goes inside it. Clicking on back button sends back to All tab selected, how to get advertise selected.
I tried following codes but doesn't work
Back
<button type="button" onclick="history.back();">Back</button>
You should send back the data-filter from the inside page to identify which tab needs to be selected.
If received .advertising data-filter then you need to add class is-checked to the respective <a> tag
Example
Inside page
Back
don't forget to update the filename mainPage.php to your file name
Main page
<?php
$dataFilter = $_GET['dataFilter'];
?>
<ul>
<li>All</li>
<li> ADVERTISING </li>
</ul>

Set different hyperlink for same <a> tag (Using AngularJs)

I have a very weird query. Searched a lot online but couldnot find a correct solution.
<ul class="dropdown-menu">
<li><a ng-model="data" href="Pre.html" target="_blank">Pre</a></li>
<li>Post</li>
</ul>
I have a simple dropdown menu with Pre and Post as its list in the dropdown.
When user clicks Pre, pre.html page opens, when he clicks post, post.html page opens.
this is normal operation. Now i want to do this.
If user clicks on the hyperlink 'Pre', assuming $scope.data= fasle at the controller side, then Pre.html page should open once
if $scope.data = true, then instead of Pre.html, i want the hyperlink to open some other html. for e.g. block.html.
how to ensure that depending on the condition in controller, the particular html page should display.
<ul class="dropdown-menu">
<li><a ng-model="data" href="Pre.html OR Block.html" target="_blank">Pre</a></li>
<li>Post</li>
</ul>
As seen above href="Pre.html OR Block.html", means i want to show either of the two pages depending on the controller side data
You could use ngHref and write something like:
<a ng-href="{{ data ? 'Pre.html' : 'Block.html' }}" target="_blank">Pre or Block</a>
Why not have two different tags toggle able using ng-if based on the controller's value. You could do something like,
<li>
<a ng-if="data" ng-model="data" href="Block.html" target="_blank">Block</a>
<a ng-if="!data" ng-model="data" href="Pre.html" target="_blank">Pre</a>
</li>
<li>Post</li>
Then some logic in the controller to change from true to false.

jQuery button does not fire click event consistently

I have a nav bar in jQuery Mobile defined like this:
<div data-role="header" data-id="foo2">
<div data-role="navbar">
<ul>
<li><a data-icon="arrow-l" id='prevPage'>Wstecz</a></li>
<li><a data-icon="home" id='mainLink'><span id='mainButton'>Quizz.pl</span></a></li>
<li><a data-icon="arrow-r" id='nextPage'>Dalej</a></li>
</ul>
</div>
</div>
I want nextPage button to do some work, so i bind it
$("#nextPage").bind("click", nextPage);
And here, strange thing happens. In latest Firefox when i click the button sometimes it does nothing, sometimes i does not fire click event and it seems like it didn't get "unclicked", so when i scroll page content is selected. Sometimes it fires click properly.
Anyone had this issue and know how to handle it properly?

How to open particular menu div in a new tab

I have created a one page website. When i click on menu it go to particular div tag. When I right click on menu & click on 'open in new tab' it opens url "www.mysite.com/#" instead it should open "www.mysite.com/#show-3".
Please help me with this......soon
/**************Script used to open Different menu div on page*********************/
$(".menu a").click(function(){
var id = $(this).attr('class');
id = id.split('-');
$("#menu-container .content").hide();
$("#menu-container #menu-"+id[1]).addClass("animated fadeInDown").show();
return false;
});
<div class="menu-wrapper">
<ul class="menu">
<li><a class="show-1" class="MENUNAME" href="#" onclick="javascript:myFunction(this);">About Us</a></li>
<li><a class="show-2" class="MENUNAME" href="#" onclick="javascript:myFunction(this);">Rooms</a></li>
<li><a class="show-3" class="MENUNAME" href="#" onclick="javascript:myFunction(this);">Reservation</a></li>
<li><a class="show-4" class="MENUNAME" href="#" onclick="javascript:myFunction(this);">Gallery</a></li>
<li><a class="show-5" class="MENUNAME" href="#" onclick="javascript:myFunction(this);">Contact Us</a></li>
</ul> <!-- /.menu -->
</div>
This will work
<a target="_blank" href="yourlink">Link</a>
In your case
<div class="menu-wrapper">
<ul class="menu">
<li><a target="_blank" class="show-1" href="#">About Us</a></li> <li><a target="_blank" class="show-2" href="#">Rooms</a></li>
<li><a target="_blank" class="show-3" href="#">Reservation</a></li>
<li><a target="_blank" class="show-4" href="#">Gallery</a></li>
<li><a target="_blank" class="show-5" href="#">Contact Us</a></li>
</ul> <!-- /.menu -->
</div>
The "open in new tab" button in most browsers will follow standard hyperlink rules, meaning that they will open the href of the tag. A one page site usually manages all it's content with javascript and dynamic html generation. The open in new tab function doesn't know how to handle this.
What you are going to have to do is write routing and html generation logic, give all of your links actual href attributes, not just hashtags. For normal page navigation, you can return false whenever a user clicks on a link so that you can perform your normal one page logic, but when someone forces the browser to navigate to the href location (as in opening in a new tab), you will have an actual page with your div displayed there.
Please Try this fiddle
Demo
Just make minor change in your a tag
<a href="#" target="_blank">
You can give divs id:
<div id="show-1">About Us Content</div>
And create hyperlinks like:
<a class="show-1" target="_blank" href="yourPage.html#show-1">About Us</a></li>
This will open your div directly in new tab.
The thing about what you are trying to do is that, if you want to open just that particular div in a new web page, it isn't a 1 page site anymore. It is a NEW page with that div content.
Regarding your code, the
... href="your new page link here"
that " # " of yours is the link (or in a more technical term, it will append that link to your base url on your current page. Which resulted on
it going to "www.mysite.com/#" The reason why it shows the same page instead of just a new page is simply because # is not to link to a new page but to an element in your current page on any event (such as an onclick). You can get more details on that here
But like the other answers had mentioned, if you want to open a new tab (aka page), you have to have another page. Which also means this will no longer be a 1 page website.

Categories

Resources