open "view details" page in new tab at alfresco workflow accept/reject page but ** also to retain focus on the current page (approval/rejection) page**
with target=_blank focus on current page is getting lost
****overriding object-finder.js here****
function ObjectFinder_fnRenderCellListItemName(elCell, oRecord, oColumn, oData)
{
if (scope.options.showLinkToTarget && scope.options.targetLinkTemplate !== null)
{
if(item.site=="######xxxxxxxxxxany site****"){
title = '**' + $html(item.displayName?item.displayName:item.name) + '';
}
}
ObjectFinder_fnRenderCellListItemActions(elCell, oRecord, oColumn, oData)
{
if (scope.options.disabled === false)
{
var links = "", link, listAction;
for (var i = 0, il = scope.options.listItemActions.length; i < il; i++)
{
listAction = scope.options.listItemActions[i];
if (listAction.event)
{
if(item.site=="xx Any RAndom Site xxxxx"){
links += '<div class="list-action">'** + scope.msg(listAction.label) + '</div>';
}
Staying in the current tab when opening a new tab is controlled by the browser and there are some workarounds are present here.
You may need to simulate "Ctrl" + Click event while clicking the link.Please refer the below links.
https://stackoverflow.com/a/36027776/405317
Open a new tab in the background?
https://www.quora.com/How-do-I-open-a-link-in-a-new-tab-but-stay-on-the-same-page-using-HTML-code
https://productforums.google.com/forum/#!topic/chrome/RCCFMX3b7NA
Hope you will get some idea.
Related
I'm working on making my existing tab component accessible, I'm basing my design off of the W3C's Example of Tabs with Manual Activation.
You can access my demo here
HTML
<div class="tab-container" lang="en">
<div class="tabs" role="tablist">
<button class="tab" aria-selected="true" href="#" role="tab" data-tab-name="tab1" tabindex="0">
<!-- tab name -->
</button>
<!-- more tabs -->
</div>
<div class="tab-content" data-name="tab1" role="tabpanel" tabindex="0">
<!-- tab panel content -->
</div>
<!-- more tab panels -->
</div>
JQuery
function getTabContent($tabContents, tabName) {
return $tabContents.filter('[data-name="' + tabName + '"]');
}
function setSelectedTab($tab) {
var tabName = $tab.data('tab-name'),
$tabSet = $tab.closest('.tabs'),
$tabContents = $tab.closest('.tab-container').find('.tab-content');
// update the tab indices and aria attributes
$tabSet.find('.tab').attr('aria-selected', 'false').attr('tabindex', '-1');
$tab.attr('aria-selected', 'true').removeAttr('tabindex');
$tabContents.addClass('hidden');
getTabContent($tabContents, tabName).removeClass('hidden');
}
function handleTabSelection(event) {
var $tab = $(event.target);
if ($tab.data('tab-name')) {
event.preventDefault();
setSelectedTab($tab);
$tab.focus();
}
}
// Our tab control needs to be used in many places on our site, we cannot guarantee that all devs will use unique IDs
// so we need to generate them here
function initTabs($tabContainer) {
var $tabList = $tabContainer.find('.tabs'),
$tabContents = $tabContainer.find('.tab-content'),
tabSetName = $tabList.data.name,
tabIdPrefix = 'tab-',
contentIdPrefix = 'tab-content-';
// add unique ids and labels
$tabList.children().each(function() {
var $tab = $(this),
tabName = $tab.data('tab-name'),
$tabContent = getTabContent($tabContents, tabName),
tabId = getUniqueId(tabIdPrefix + tabName),
contentId = getUniqueId(contentIdPrefix + tabName);
// add the unique id and associate the link with the content
$tab.attr('id', tabId).attr('aria-controls', contentId);
// add the unique id and use the link as the label for the content
$tabContent.attr('id', contentId).attr('aria-labelledby', tabId);
});
}
function getUniqueId(id, index) {
var newId = id;
if (index) {
newId += '--' + index;
index++;
} else {
index = 1;
}
if (document.getElementById(newId)) {
return getUniqueId(id, index);
}
return newId;
}
function handleKeyPress(event) {
var $tab = $(event.target);
if ($tab.is('.tab')) {
var keyCode = event.which,
$tab = $(event.target);
if (keyCode === 13 || keyCode === 32) {
// user pressed enter, or space
setSelectedTab($tab);
event.preventDefault();
} else if (keyCode === 37 || keyCode === 39) {
// the user pressed left or right
var $newTab = $tab[keyCode === 39 ? 'next' : 'prev']();
// move the focus
if ($newTab.length > 0) {
$newTab.focus();
}
event.preventDefault();
}
}
}
$('.tabs').click(handleTabSelection);
$('.tabs').keyup(handleKeyPress);
$('.tab-container').each(function() {
initTabs($(this));
});
A user can use the left and right keys to move focus within the tab list, and enter or space to select a tab.
When a user selects a tab however, the screen reader simply announces "selected" where on the W3C's example, it announces the tab name followed by "selected".
I'm testing using NVDA in Firefox and here are my steps to reproduce:
Set the focus on the "Nils Frahm" tab
Press TAB
You should hear "Agnes Obel tab two of three"
Press ENTER
You should hear "Agnes Obel tab selected tab two of three"
This is exactly what happens in the W3C's example, but in mine, the final step only reads "selected".
I've tried to match their example as closely as possible but I have yet to figure out how to get my example to announce the tab name when activated.
What could cause NVDA to skip reading the tab name once it is activated?
I discovered how to solve the problem, but as of yet, not why the problem exists.
When I add an after CSS rule on my selected tab, the screen reader starts reading the content when selected.
.tab[aria-selected="true"]::after {
content: '';
}
If I add the after tag to all tabs, the problem persists; it needs to only be on the selected element.
My guess is that this is fooling the screen reader into thinking that the content has changed, so it reads the new tab name.
Here is the working demo
I'm using the following to load posts into a index page of a wordpress site. The problem is when it gets to the last page and there are no more posts to load. Its just keeps reloading the last page.
Any ideas of how I might stop this from happening? Thanks.
var $content = '#content';
var $nav_wrap = '.navigation';
var $anchor = '.navigation a.next';
var $text = 'Load More';
var $next_href = $($anchor).attr('href'); // Get URL for the next set of posts
$($nav_wrap).html('<a id="almc-load-more" href="' + $next_href + '">' + $text + '</a>');
$('#almc-load-more').click(function(e) {
e.preventDefault();
$.get($(this).attr('href'), '', function(data) {
var $timestamp = new Date().getTime();
var $new_content = $($content, data).wrapInner('<div class="almc-loaded" id="almc-' + $timestamp + '" />').html(); // Grab just the content
$next_href = $($anchor, data).attr('href'); // Get the new href
$('html,body').animate({scrollTop: $($nav_wrap).position().top}, 'slow'); // Animate scroll
$($nav_wrap).before($new_content); // Append the new content
$('#almc-' + $timestamp).hide().fadeIn('slow'); // Animate load
$('#almc-load-more').attr('href', $next_href); // Change the next URL
$('.almc-loaded ' + $nav_wrap).remove(); // Remove the original navigation
});
});
Above code taken from here: http://kaspars.net/blog/wordpress/jquery-script-for-loading-more-posts
You could add some code to check if the new href is different than the current href, and then only try to add a new post if they're different. Then, if they aren't, you could have a message saying there are no more posts.
var lastLink;
$('#almc-load-more').click(function(e) {
if ( $anchor == $('.navigation a.next').last() ) {
lastLink = 1;
}
if (lastLink == 1) {return} else {
...
}
...
After the comment from Mr. Mayers (Thanks) I gave up on the code and used this tutorial:
http://www.problogdesign.com/wordpress/load-next-wordpress-posts-with-ajax/
Has / does everything I needed.
I am working on a mvc3 controller which loads a page on search. In the main index page, there is a search button and that loads another (details list) page in the given div.
I have incorporated pagination to the child view (details list). So, upon clicking on the "Next" link, it loads the next page.
cshtml of the index page: The flat id refers to where the details list loads.
<div id='FlatDetailcontainer'>Select a Project for Flat Details.. Loading...</div>
<script type="text/javascript" language="javascript">
// $(document).ready(function () {
function login() {
var check = document.getElementById("rad").value;
$("input[name=selectproj][value="+check+"]").attr('checked', true);
//document.getElementById("selectproj").checked = document.getElementById("rad").value;
if (check != "") {
handleprojselect(check);
}
}
function handleprojselect(myRadio) {
// document.getElementById("rad").value = myobj["proj"];
$.get('#Url.Action("Details", "ProjectDetails")?id=' + myRadio,
function (viewResult) {
$("#FlatDetailcontainer").html(viewResult);
});
}
function createproj() {
var url = '#Url.Action("Create")';
window.location.href = url;
}
</script>
The details page has the links of next and url action is as follows:
#if (Model.HasNextPage)
{
#Html.ActionLink("Next >", "Details", new { page = Model.PageNumber + 1 })
#Html.Raw(" ");
#Html.ActionLink(">>", "Details", new { page = Model.PageCount })
}
else
{
#:Next >
#Html.Raw(" ")
#:>>
}
However, this link always loads on a fresh page as there is no reference to the main Index page's div id. Please can someone suggest how to go ahead with this?
As far as you are loading part of the page via AJAX call you should also use AJAX to handle your pagination. You should create JS function like the following:
function nextPageClick(e)
{
e.preventDefault();
$.get($(this).attr("href"), //getting the URL from your link and loading the content via AJAX
function (viewResult) {
$("#FlatDetailcontainer").html(viewResult);
});
}
and bind it to the paging links on page load:
$(function (){
$('.nextPageLink').live('click', nextPageClick);
})
Notice that "live" jQuery method assigns click handler to the dynamically loaded content as well as on existing static content, so you have no need to reassing handler after each data reload.
You shoud add CSS class to your link to be able to locate it:
#Html.ActionLink("Next >", "Details", new { page = Model.PageNumber + 1, #class="nextPageLink" })
Of course you may use IDs or any other way to uniquely identify your pagination links.
I'm using the Wordpress Thickbox to try and retrun the value of the images that a user wants to select (when they click 'Insert into Post'), but the Thickbox is not closing, just showing as any empty white box.
The field $('#office-image input#image') exists, and Firebug is not reporitng any errors.
I'm not sure why this is not working, so any help is appriciated. Thanks.
window.send_to_editor = function(html){
var image_url = $('img', html).attr('src');
$('#office-image input#image').val(image_url);
tb_remove();
}
tb_show('', 'media-upload.php?type=image&TB_iframe=true');
window.original_send_to_editor = window.send_to_editor;
window.send_to_editor = function (html) {
var fileInput = jQuery(fileInput_id);
if (fileInput) {
fileurl = jQuery('img', html).attr('src');
jQuery(fileInput).val(fileurl);
tb_remove();
} else {
window.original_send_to_editor(html);
}
};
I am using above script for that and its working fine
I am working on contact page where the client can enter the postcode which will take them to google maps for directions to the company, the problem which i am having is although the hyperlink is set to target_blank but still the window opens on the back hand instead of opening in front of the website page. I have no idea why it opens on the back hand and focus is on the current page instead of moving it to google map page
<a href="#" target="_blank">
<img alt="" src="/images/contactUs/directionbtn.png" onclick="return openDirections(1);" /></a>
<script type="text/javascript">
function openDirections(NumVal) {
if (NumVal == 1) {
if (document.getElementById("<%=txtPostcode.ClientID%>").value == "") {
alert("PostCode can not be blank");
document.getElementById("<%=txtPostcode.ClientID%>").focus();
return false;
}
else {
var regPostcode = /^([a-zA-Z]){1}([0-9][0-9]|[0-9]|[a-zA-Z][0-9][a-zA-Z]|[a-zA-Z][0-9][0-9]|[a-zA-Z][0-9]){1}([ ])([0-9][a-zA-z][a-zA-z]){1}$/;
var tempURL = document.getElementById("<%=txtPostcode.ClientID%>").value;
if (regPostcode.test(tempURL) == false) {
alert("Please Enter a Valid PostCode");
document.getElementById("<%=txtPostcode.ClientID%>").focus();
return false;
}
else {
var url = 'http://maps.google.co.uk/maps?saddr={' + $('#<%=txtPostcode.ClientID%>').val() + '}&daddr=&daddr=646+Preston+Rd,+Clayton-le-Woods,+Chorley+PR6+7EH,+United+Kingdom&iwloc=1&dq=Tangent+Design';
document.location = url;
return true;
}
}
}
</script>
Try window.open(url); instead of of document.location = url;
All I see you doing is setting the url of the current window. Maybe try using something like this to open a new window instead.
window.open('url to open',)
in place of document.location = url
Each browser can be configured to handle how new pages are opened. Take a look at the preferences in the browser you are using, and see if that is the behavior that you currently have configured.
I think this is what you are looking for:
var x = window.open(URL, 'name', '...');
x.focus();