in a web page, I am trying to open an overlay with the help of ng-click and there is no href available for this with the help of java script, respective overlay is being called. This function is working fine with keyboard when no screen reader is being used or NVDA screen reader is being used. However, when I use Jaws screen reader, functionality is not working at all. Can anyone suggest approach how to fix this issue without using href? here is code I am using
HTML
<a href="javascript:void(0)" ng-click="openModal()">
<h2 class="mu-item__title" ng-if="!hideInfo" data-share-title>{{videoData.title}} <span class="screenreader">{{item.contenttype_t}}</span></h2>
JavaScript code
$scope.openModal = function() {
if ($attrs.modalvideo) {
$scope.openInModal = true;
$scope.fromChild = false;
$scope.genericData.showModal = true;
$scope.genericData.isVideo = true;
$scope.modalData = $scope.videoData;
}
};
can anyone suggest what need to be changed in current code?
Thanks
Anubhav Mitra
Try using the button instead of anchor tag
<button aria-label="{{item.contenttype_t}}" ng-click="openModal()" ng-if="!hideInfo">
<h2 class="mu-item__title" data-share-title>{{videoData.title}}</h2>
</button>
Related
I found this nice looking button on the web. Now I was wondering is it even possible to link something with it? The <a href""> is needed for the status of the button and the second href indside of the div doesn't work. Did the creator make a small mistake or would a button like this never work?
http://codepen.io/seansean11/pen/wHIae
I think the point of this button is to send something (probably a form) with AJAX and then show the thank you-side.
If you use it with a href to another page you will not see the thank you-side as you are leaving the page.
The href on the div will never work without some JavaScript. The button effect works without JavaScript but is kind of pointless on it's own.
Updated with example to use it as download link
In order to make the button work for non-JS users you should set the href to the file you want them to download. For non-JS users it doesn't show the thank you-side unfortunately.
I also added an ID (#btn-download) to the button to make it easy to get it in the JS.
HTML
<a id="btn-download" href="http://www.domain.com/some_file.pdf" class="flipper-container">
<div id="id" class="flipper">
<div class="front-face" data-icon="➣">Click Me</div>
<div class="back-face" data-icon="✓">Thank You</div>
</div>
</a>
JavaScript
(function (d, w) {
var button = d.getElementById('btn-download');
// Store the download link
var downloadLink = button.href;
// Set the href back to the id of .flipper
button.href = '#' + d.getElementById('id').id;
// Add the cross browser event listener
addEvent('click', button, function() {
// Send the user to the download link
w.location = downloadLink;
});
}(document, window));
// Taken from http://stackoverflow.com/a/6927800/3351720
// This is only to support IE8 and below
function addEvent(evnt, elem, func) {
if (elem.addEventListener) { // W3C DOM
elem.addEventListener(evnt, func, false);
}
else if (elem.attachEvent) { // IE DOM
elem.attachEvent('on' + evnt, func);
}
else { // Not much to do
elem[evnt] = func;
}
}
I haven't tested it in various browsers but I think it should work in all modern browsers (Chrome, Firefox, Opera and Safari) and Internet Explorer to atleast version 7.
altough a href attribute will work on a element only you may add a click event to any element to call a url
or you can wrap a span with an a
I'm using jquery plugin token input for my dropdowns on this page
http://www.connectweb.com.au/search.aspx
It works fine in firefox in that I can click the arrow and the dropdown opens with the contents and allows me to scroll up and down using the scrollbar. However in IE and Chrome I cannot seem to scroll by moving the scroll bar up and down. Its some css somewhere but I'm struggling to find out what..any css experts out there want to take a quick look? would be appreciated : -)
thanks
Hello please take a look at the https://github.com/loopj/jquery-tokeninput/issues/130
The issue happens to be with the the way IE handles scroll bars versus chrome or firefox. The solution is to modify the inputtoken.js file as mentioned in the forum.
Here is the basic outline.
Declare a variable to hold the state
Check of the variable in the .blur event of the input_box
Add .mouseover, .mouseout to .dropdown
// 1. Keep track of mouse being over dropdown
var mouseOverDD;
// 2. IF the blur function
var input_box = $("<input type=\"text\" autocomplete=\"off\">")
.blur(function () {
if (!mouseOverDD) {
hide_dropdown();
$(this).val("");
}
})
// 3. Add over/out events
var dropdown = $("<div>")
.addClass(settings.classes.dropdown)
.appendTo("body")
.hide()
.mouseover(function(){
mouseOverDD = true;
})
.mouseout(function(){
mouseOverDD = false;
});
This topic may have lots of code out there, BUT I seem to be looking for a variation that isn't based on history, is it possible...
So I have this code...
<script type="text/javascript">
var pages=new Array();
pages[0]="listItem1.html";
pages[1]="listItem2.html";
pages[2]="listItem3.html";
pages[3]="listItem4.html";
pages[4]="listItem5.html";
var i=0;
var end=pages.length;
end--;
function changeSrc(operation) {
if (operation=="next") {
if (i==end) {
document.getElementById('the_iframe').src=pages[end];
i=0;}
else {
document.getElementById('the_iframe').src=pages[i];
i++;}}
if (operation=="back") {
if (i==0) {
document.getElementById('the_iframe').src=pages[0];
i=end;}
else {
document.getElementById('the_iframe').src=pages[i];
i--;}}}
</script>
</head>
<body>
<ul id="menu" role="group">
<li>Welcome
<ul>
<li>Ease of Access Center</li>
</ul>
</li>
<li>Getting Started
<ul>
<li>Considerations</li>
<li>Changing Perspective</li>
</ul>
</li>
</ul>
<iframe id="the_iframe" scrolling="no" src="listItem1.htm" name="ifrm" style="width:540px;></iframe>
<input type="button" onClick="changeSrc('back');" value="Back" />
<input type="button" onClick="changeSrc('next');" value="Next" />
and if I click on the next or prev button, it does move somewhere,but...
let's say my iframe is showing listItem2, then I click on listItem4 in the menu (there is a tree menu involved), then I want to go to listItem3 and I hit the back button...instead of going to listItem3, it goes to listItem2 (or someplace that is not back a page from 4 to 3).
It appears that the buttons are navigating based on history?...but I just want a straight forward or backward movement...I don't want my buttons to have this browser-type functionality...If I'm on listItem4 and hit the next button, I want it to go to listItem5.
Many Thanks For Any Help!
Okay, I'll try the code, but don't down-rate it if its off.
This is the function that you could put before the changeSrc function:
function UpdateI(value) {i = value}
This the one click event that you would add to your links in the a tag. Off course, the 4 that is sent the function in this case, would be changed to whatever is appropriate for whatever ListItem is being referenced:
onClick ="UpdateI(4)"
Does this help you?
I don't understand your code here:
document.getElementById('the_iframe').src=pages[i];
i++;
If that is going to advance to the next element AND display it, you need to increase i first. Perhaps I'm just missing something, though.
I think your problem is that if the user clicks one of your direct links, rather than "next" and "previous" i in your code is not getting updated. So if your on page 2 and click the link for 4 and then click back, i is currently 2 and not 4. Hope that helps you. Be sure mark it as the answer if it does.
add an on click event to each of the link tags that would call a single function just like you have in the input tags. Have the function take an input of some number and assign that number to i. That should do it. Sorry I cant show any source code, JAVASCRIPT is not my language. I can read it but I wouldn't dare to write code from scratch. Hope this helps you.
I want to open an URL like gmail.com when a user clicks on a button. How can I open this link in new tab from code (I want to read link from database)?
You can use:
Response.Redirect
Method in ASP.NET to navigate to another web page.
call JavaScript from Page Behind Code Like this.
Page.ClientScript.RegisterStartupScript(this.GetType(),
"onLoad", "openNewWindow()", true);
<script language="JavaScript">
<!-- hide
function openNewWindow() {
popupWin = window.open('http://webdesign.about.com/',
'open_window',
'menubar, toolbar, location, directories, status, scrollbars, resizable, dependent, width=640, height=480, left=0, top=0')
}
// done hiding -->
</script>
you can also do it using window.location("http://www.yourpath.com")
As suggested before me use
Response.Redirect("http://www.gmail.com")
this should work as the method is designed also for absolute urls. Do not leave the http:// prefix.
<input type="button" onclick="openlink()"/>
<script>
function openlink()
{
document.location.href = "http://www.gmail.com";
}
</script>
just execute the below line on button click
window.location="http://www.google.com";
I have two pages namely www.abc.com/pg1.aspx and www.abc.com/pg2.aspx
pg1.aspx
response.redirect("www.abc.com/pg2.aspx");
pg2.aspx
string url_refer = Request.UrlReferrer.ToString();
UrlReferrer is working fine.
pg1.aspx
<a href='#' onclick=\"window.open('www.abc.com/pg2.aspx', 'windowname2', 'width=1014, height=709, screenX=1, left=1, screenY=1, top=1, status=no, menubar=no, resizable=no, toolbar=no'); return false;\">
pg2.aspx
string url_refer = Request.UrlReferrer.ToString();
UrlReferrer is NULL
I googled for the solution. but none of them are leading to the solution i want.
My problem is if the window is with no menubar, status or toolbar, UrlReferrer is NULL
if not, UrlReferrer has the previous page's URL.
I also tried url_refer = Request.ServerVariables["HTTP_REFERER"].ToString(); instead of string url_refer = Request.UrlReferrer.ToString();.
the result is the same.
Any solution?
My solution is to take it from "document.referrer"
document.addEventListener('DOMContentLoaded', function () {
document.getElementById('hfUrlReferrer').value = document.referrer;
})
<a href="javascript:void(0);" onClick="MyWindow=window.open('','gallery','location=no,directories=no,menubar=no,scrollbars=no,width=550,height=550');MyWindow.location.href='yoururl.html;MyWindow.focus(); return false;">
The trick is to use location.href which does record the referer in IE.
I found this great workaround on a forum, and adapted it slightly.
Put this code at the top of your page:
<script language="JavaScript">
function goTo(url){
var link = document.getElementById("link");
link.href = url;
link.click();
}
</script>
<a id="link" target="_blank" href="javascript:void(0)"
style="visibility:hidden;position:absolute;"></a>
...and then build your links like this:
<input type="button" value=google onclick="goTo('http://www.google.com')">
What you're doing is creating an invisible <a> element, then using javascript to change that element's address, and programatically "click" it.
There's no easy answer to this - in general, the UrlReferrer is a browser-specific behaviour. Chrome, for instance, can process this differently than Internet Explorer.
If you are doing the referring yourself then you'll be best off passing a querystring parameter or using session state to identify the referring URL.
I'm not sure.. but I found out..
Session is not working if we call a new page using Javascripts.
I was told that all session values are reset on a new page which is called using javascripts.
As an alternative for my question, I used QueryString.
I really don't want the users to see the URL but I already hide the URL with javascript.
So, I have no problem using querystring, right?
Does anyone hava a better solution?