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
Related
I am editing a template and links don't respond to left clicks. If you right-click and choose 'Open in New Tab,' they work just fine. When you hover over them, you can see the URL in the status bar at the bottom of the browser.
I will only post the menu section of the index file since the webpage is too long. Please download the template from the following link to see it yourselfClick Here
I am new here so I don't clearly understand the rules of posting a question. let me know if you need other info and please help me out.
`
<nav class="navbar navbar-light">
<ul class="nav navbar-nav single-page-nav">
<li class="nav-item">
<a class="nav-link" href="#home">Home <!-- <span class="sr-only">(current)</span> --></a>
</li>
<li class="nav-item">
<a class="nav-link" href="gallery.html">Products</a>
</li> <!-- this link won't work -->
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</nav>
</div>`.
<div class="sigma-content col-lg-6 col-md-6 photo text-center" >
<h2></h2>
VISIT OUR GALLERY
</div>
EDIT: I just learned about browser console and the error is
Uncaught Error: Bootstrap tooltips require Tether (http://github.hubspot.com/tether/)
at bootstrap.min.js:7
at bootstrap.min.js:7
at bootstrap.min.js:7
How do I fix this.
A quick inspection of the live demo of the linked template shows, at the bottom of the source (the frame source, not the page source) this code
// The actual plugin
$('.single-page-nav').singlePageNav({
offset: $('.single-page-nav').outerHeight(),
filter: ':not(.external)',
updateHash: true,
beforeStart: function() {
console.log('begin scrolling');
},
onComplete: function() {
console.log('done scrolling');
}
});
which looks like it's using this library which states
Clicking on any links within the container will cause an animated scroll down to the element whose ID is identified by that link's "hash" (if it exists)
and then in the options
'filter' - By default, the plugin will be applied to all links within the container, use this to filter out certain links using jquery's built in filter method (e.g. ':not(.external)')
So, since the code on the live demo has filter: ':not(.external)', and I assume you have that on your page as well (and since your <ul> has the single-page-nav class) changing
<a class="nav-link" href="gallery.html">Products</a>
to
<a class="nav-link external" href="gallery.html">Products</a>
should fix your problem
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>
My website uses modal to display information that requires buttons to be clicked e.g. back and submit. Now the link appears to be broken even though it's target is another page. The page reloads on any button click.
This has been working thus far but some users have been having issues with submitting the information. When myself and my colleagues then tested what was causing the issue we found out that the problem was only affecting devices running iOS9.
We looked up some information and found it might be something to do with having an empty href.
<ul>
<li><a class="pop" href="#" target="#modal" data-id="deposit-funds.aspx">Deposit Funds</a> <span class="moreinfo" title="How to deposit funds into your investor account"></span></li>
<!--<li><a class="pop" href="#" target="#modal" data-id="dynamic-invest.aspx">Dynamic Invest</a> <span class="moreinfo" title="Dynamic investing explained"></span></li>-->
<!--<li><a class="pop" href="#" target="#modal" data-id="auto-invest.aspx">Auto Invest</a> <span class="moreinfo" title="Autoinvest guidelines, setting criteria and turning on and off"></span></li>-->
<li><a class="pop" href="#" target="#modal" data-id="current-investments.aspx">Current Loans</a></li>
<li><a class="pop" href="#" target="#modal" data-id="my-resale.aspx">My Resale Offerings</a></li>
<li><a class="pop" href="#" target="#modal" data-id="completed-investments.aspx">Completed Loans</a></li>
<li><a class="pop" href="#" target="#modal" data-id="bids-outstanding.aspx">Bids Outstanding</a></li>
<li><a class="pop" href="#" target="#modal" data-id="my-transactions.aspx">Transaction History</a></li>
</ul>
</div>
If anybody has had the same problem or has any ideas on a potential fix a point in the right direction would be most appreciated.
I had this problem a while back and if I remember correctly I update the href to href="javascript:;". This tricks the browser in to running some empty javascript instead of doing nothing at all (which is why iOS blocks it, I believe). Your other javascript will also run on click as well.
I also believe I ventured down the path of changing the <a> tags to <span> tags; as far as I remember, this also worked, but wasn't a great fix for my problem.
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.
I have multiple office websites that use the same navigational dropdown menu in the page header to allow site visitors to easily jump to another office website. I have designed the dropdown menu, but I am unsure how to approach the server side coding aspect so the dropdown menu knows what is the active office page the visitor is currently on. I have 3 office websites:
Office Location 1
Office Location 2
Office Location 3
My menu structure is: (also JSFIDDLE here)
<section id="ad_banner" class="container">
<div class="network">
<span class="abc_network">ABC Services</span>
<div class="dropdown" style="display:inline-block;">
Office Location 1 <i class="fa fa-caret-down"></i>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="1" href="index-header2.php">Office Location 2</a></li>
<li role="presentation"><a role="menuitem" tabindex="1" href="index-header3.php">Office Location 3</a></li>
</ul>
</div>
</div>
Rather than having to update all the office pages manually when new office locations are added, I want to include the dropdown code into my office page template (I'll use a PHP include unless someone has another suggestion). I'm guessing I'll add a php variable at the top of each office location page like $page = "office location 1" and then add it to the global dropdown menu code somehow. I just don't know how to have the dropdown menu autoselect the page. Help!
I used an iframe to achieve this.
Edited: Here is the Fiddle: http://jsfiddle.net/yrf81u0c/5/
The iframe code:
<iframe src="#" width=100% height= 500px>
<p>Your browser does not support iframes.</p>
</iframe>
The Jquery:
$('a').click(function(event){
event.preventDefault();
var site = $(this).attr("href");
$('iframe').attr("src",site);
var value = $(this).text();
$("#top").text(value);
});