How to open particular menu div in a new tab - javascript

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.

Related

How to keep submenu opened after page load in JavaScript

I have almost done my work and my client ask for keeping submenu opened when user click the item in the menu and also set active color. The idea is better orientation when user actualy is. In React App it wouldn't be problem, cuz whole app works like single page. In this case i've decided use only HTML/JS as my challenge.
Is it even possible somehow keep menu opened/open again menu when new page is loaded please?
I tried make from this app something like single page app by some tutorials like "load paghe without refresh" etc, but nothing worked.
menu
<div class="menu">
<div class="item">
<a class="sub-btn">
Matice
<i class="fas fa-angle-right dropdown"></i>
</a>
<div class="sub-menu">
<a
href="/pages/matice/zakladni-operace.html"
id="matice/zakladni-operace"
onClick="reply_click(this.id)"
class="sub-item">
Základní operace
</a>
<a
href="/pages/matice/hodnosti.html"
id="matice/hodnosti"
onClick="reply_click(this.id)"
class="sub-item">
Hodnost
</a>
<a
href="/pages/matice/determinanty.html"
id="matice/determinanty"
onClick="reply_click(this.id)"
class="sub-item">
Determinanty
</a>
<a
href="/pages/matice/inverzni-matice.html"
id="matice/inverzni-matice"
onClick="reply_click(this.id)"
class="sub-item">
Inverzní matice
</a>
<a
href="/pages/matice/maticove-rovnice.html"
id="matice/maticove-rovnice"
onClick="reply_click(this.id)"
class="sub-item">
Maticové rovnice
</a>
<a
href="/pages/matice/vlastni-cisla-a-vektory.html"
id="matice/vlastni-cisla-a-vektory"
onClick="reply_click(this.id)"
class="sub-item">
Vlastní čísla a vektory
</a>
</div>
</div>
</div>
You can try to get window.location.href on load of your page and add style classes depending on conditionally with something like
<div class="<%= 'yourStyleClass' if #url== 'urURL' %>"> to set active color
You could use AJAX to call the page. But that doesn't sound like what you want. An alternative way in javascript would be to get the current window.location.href when the page loads, then inject a class name into the relevant node, and have the css for that class make it visible and highlighted.
If you're using a library like jQuery this shouldn't be too hard to achieve.

Jquery after load link, scroll to top

I am currently using bootsrap.
I have a main navigation menu.
I am linking each section on the main nav drop down menu to another page with a specific ID, which is a set of tabs on another page.
(Visual Composer Tabs - Wordpress)
The hash change function below shows the top of the page for a second however it then still scrolls to the hash...
Update HashChange Not Working
$(window).on('hashchange',function(e){
document.body.scrollTop = 0;
e.preventDefault();
});
UPDATE - JQUERY NOT WORKING
$('.link-2').click(function() {
$('html,body').animate({ scrollTop: $("#1234567891011").offset().top });
});
I am linking it directly this way so that the tab appears as active when the link is clicked.
My code is below.
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="http://myURL#123456789">Title<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
<a class="link-2" href="http://myURL#1234567891011">Tab Link 1</a>
</li>
<li>
<a class="link-3" href="http://myURL#1234567891011">Tab Link 2</a>
</li>
</ul>
</li>
The problem is when the link is opened it automatically goes to that tab section with that ID, which cuts out half of the information before the tabs.
I need it to load at the top of the page but still keep the tab active. How can i do this with Jquery?
Alter your hash not to trigger the scroll
Change your hash to: #tab_1234567891011
in the page you want to navigate get the id of the tab by splitting this hash
id = window.location.hash.split('_')[1];
activate the tab with the new id:
$('#'+id).tab('show');

javascript: Resolving deeplinking issue

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 ?

Iframe in web part page SharePoint 2013

I have page on my SharePoint site that has toolbar (call it toolbar page). All items/elements in that toolbar are actually links to offsite locations, that are not on SharePoint at all.
Toolbar page consists of two web parts both content editor web parts, one where toolbar is and the other where I intended to put iframe code. To be more clear, I want to see off-SP pages on my Toolbar page when I click on any element in toolbar but to still stay on same toolbar page (just to get web part load off-SP pages).
Example: Toolbar:
<ul>
<li class='has-sub'><a href='#'>Item 1</a>
<ul>
<li><a href='#'><span>Product 1</span></a></li>
<li><a href='#'><span>Product 2</span></a></li>
</ul>
</li>
</ul>
iframe web part:
<script type="text/javascript">
function Navigate(file) {
document.getElementById('iframe1').src=file;
}
</script>
<iframe name="iframe1" id=iframe1 src="homepage link" width="1280px" height="1024px" scrolling="auto">
</iframe>
So my question is, can this code be edited so page can work correctly or what should I do to make it work? Any suggestion and help is greatly appreciated.
I finally found solution for this one.
In a tags person should just put target="optional word exp. MyFrame" after a href="#".
So it should look like this
<a href="#" target="MyFrame">
In iframe part of code just put
<iframe name="MyFrame" src="#"></iframe>

jQuery Pop- out browser is not calling on href link

functionality:
User clicks on the link in page A, it will prompt a pop-up. The pop-up is displaying separate web-browser thread which is an overlay over the page A which will turn opaque.
What has been done:
This is the code that has been done to enable to pop-up web browser:
$('link1').click(function() {
$('#subscribe-pop1’).toggle();
});
<div id="footleft">
<ul>
<li><a href="#" id='link1'>India, Mumbai</a>
</li>
<li><a href="#" id='link2'>India, New Delhi</a>
</li>
<li><a href="#" id='link3'>India, Chennai and Banglalore</a>
</li>
<li><a href="#" id='link4'>United Arab Emirates, Dubai</a>
</li>
</ul>
</div>
<div id="subscribe-pop1" style="display:none">
<iframe src="http://www.w3schools.com/js/">
</iframe>
</div>
Issue:
When I try to click on the link, it will only work for some of the url links. It will work if the url link is "http://www.w3schools.com/js/" but it may not work for "http://www.youtube.com".
It will only display a white screen for url that is not called.
I would like to know why is that so that the following href is only able to call on some url but not the rest and how am I able to rectify this issue?? thanks

Categories

Resources