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.
Related
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.
Im building a chrome extension which injects CSS and JS to a particular website. I just wanted to know if there is any way to manipulate a variable element. As an example if I wanted to duplicate the user's username and place it somewhere else on the site. This is an example of such to the current DOM I have access to:
<span class="nav-user">
<li class="dropdown nav-item">
<img alt="Avatar" class="nav-user-avatar" src="usersimage.png">
<a aria-haspopup="true" href="#" class="dropdown-toggle nav-link" aria-expanded="false"> <span class="nav-username">Rbxntl</span>
</a>
<div tabindex="-1" role="menu" aria-hidden="true" class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">
<span>Logout</span>
</a>
</div>
</li>
</span>
To reiterate basically just to move this element somewhere else on the page that will allow it to work on all users when they have the extension installed, or possibly to duplicate and place the duplicate somewhere else. I have tried researching the problem but I cant seem to find the solution.
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
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 this menubar-
When i load this page, by default page is redirect to dashboard, Dashboard has no content now.
Everything goes fine, until i click on back button of browser, This page is redirected to login page.
How can i keep history so everytime when i click back button of browser it should redirect to Dashboard Page? and then stop propagating for more clicks.
Take a look at HTML-
<li class="active"><a href="/Home/Dashboard" rel="tooltip" data-original-title="What is new?"
data-placement="bottom"><i class="icon-home icon-white"></i> Dashboard</a></li>
<li><a href="#" id="_Layout_Contact" rel="tooltip" data-original-title="Manage Contacts"
data-placement="bottom"><i class="icon-white icon-user"></i> Contact</a></li>
<li><a href="#" id="_Layout_Task" rel="tooltip" data-original-title="Task House"
data-placement="bottom"><i class="icon-white icon-tasks"></i> Task</i></a></li>
<li><a href="#" id="_Layout_Appointment" rel="tooltip" data-original-title="Handle Appointments"
data-placement="bottom"><i class="icon-white icon-calendar"></i> Appointment</a></li>
<li><a href="#" id="_Layout_Project" rel="tooltip" data-original-title="Explore Projects"
data-placement="bottom"><i class="icon-white icon-briefcase"></i> Project</a></li>
<li><a href="#" id="_Layout_Sales" rel="tooltip" data-original-title="Check Sales"
data-placement="bottom"><i class="icon-white icon-barcode"></i> Sales</a></li>
<li><a href="#" title="" onclick="showDialog('/Opportunity/_Create' , 'Add Opportunity')"
id="_Layout_AddOpportunityLink">Add Opportunity</a> </li>
I tried-
I read javascript helps us keeping history, so i tried it with hyper-reference as-
Ex. with contact page-
<li><a href="javascript:history.go(-1)" id="_Layout_Contact" rel="tooltip" data-original-title="Manage Contacts"
data-placement="bottom"><i class="icon-white icon-user"></i> Contact</a></li>
But it kept loading the page, nothing happened. Help?
I am using MVC4 razor view engine.
For newer browsers, you can use the HTML5 History API.
history.pushState(null, null, $(window).attr("href"));
$(window).on("popstate", function (e) {
e.preventDefault();
alert("dashboard");
//load dashboard
});
If you need to support older browsers, you can use history.js.