directive to enable keyboard-navigation (using tab) - javascript

Hi I have this div which is skipped when we press tab, other UI elements come into focus but not this one, Which directive do I need to add to this so that it comes into focus when we navigate UI using keyboard
<div class="vertical-menu">
<a ng-class="{active: Page == 'homeview'}" ng-click="Page = 'homeview'">
Home
</a>
</div>

There are html elements without tabindex enabled by default, and the div element is one of these.
To enable it, you must set the tabindex attribute to something >= 0:
<div tabindex="0"> ... </div>
Here you can find more information.

Related

Can I trigger xe:namepicker via csjs?

On an xpage I have an editbox control and xe:namepicker nicely grouped beside each other with a Bootstrap add-on component.
However I would like to trigger the xe:namepicker when the cursor enters the editbox.
In the DOM I see that for the namepicker an anchor link is generated such as:
a class="glyphicon glyphicon-user xspPickerLink" href="javascript:;"
And I could trigger the click event via csjs
$("a.xspPickerLink").trigger('click');
But I happen to have multiple xe:namepicker-s on my xpage.
Does anyone have a clue how I can trigger a SPECIFIC xe:namepicker ?
You can work with wrapper elements:
<div id="namePicker1Wrapper">
<xe:namePicker id="namePicker1" pickerText="Select..."></xe:namePicker>
</div>
<div id="namePicker2Wrapper">
<xe:namePicker id="namePicker2" pickerText="Select..."></xe:namePicker>
</div>
Now you have the opportunity to select a SPECIFIC xe:namepicker:
$("#namePicker1Wrapper a.xspPickerLink").trigger('click');

Proper way to mark up HTML to allow for right click "open in a new tab" option in context menu

I have searched around but no question seems to address this concern.
I have the following markup:
<li>
<div class="box-brochure-slide" onclick="window.location='product.php?item=TEC%2FSR-888HP-SS';">
<div class="boxInner-item">
<div class="triangle-topright-cover"></div>
<div class="triangle-topright-red"></div>
<div class="label-limitedsets">LIMITED SETS</div>
<img class="lazy" alt="" src="img/pixel.png" data-original="user/picture/TEC-SR-888HP-SS.jpg">
<div class="ui content">
<div class="productbrand">TECNO</div>
<div class="productname">TECNO SR-888HP-SS 2 X HI POWER BURNERS, 1 X MED BURNER, <br>BATTERY AUTO IGNITION</div>
<div class="price">
<div class="specialprice"><div class="specialprice-name">Crazy Price</div><span class="pricecurrency">$</span>488<span class="pricecents">00</span></div>
<div class="usualprice">U.P. $588.00</div>
</div>
</div>
</div>
</div>
</li>
However, when I try to right click on the <li> on the web page, there was not an option for me to open in a new tab. What is wrong with the markup here?
Edit: I have read in some sources that <a> would solve the problem, but I do not wish to wrap the entire <li> in an anchor tag. Is there a way to do this?
Note: I do not wish to right click to OPEN in a new tab. I just wish to have an option available to open in a new tab when I right click on it.
Although you don't want to use the element but if you replace the topmost div with "a" leaving the class id and css intact, you will get the same look and feel with the option of "open in new tab" as well.
For that purpose you need to use <a> tag and pass the href property to the tag
To Open in new tab on right click first we need to check the mouse click event and then open the link.
<div id="open">open</div>
$('#open').mousedown(function(event) {
if(event.which == 3) { //Right click event
window.open('http://google.com','_newtab'); // To open in new tab
} else{
alert('Please Right click to open');
}});
Working Code Pen

.load() in jQuery and odd behaviour

I'm implementing a simple jQuery script on a website that loads content from one section of a webpage into the 'display container' on the same webpage.
The content i'm loading is multiple div's which are all wrapped in an outer <div> which has been hidden from view.
I have the display container div and several links the use can click on. Each time they click a link, the appropriate matched content is loaded in to the display container.
My jQuery.
$(".Prod-Link-2").click(function(e){
e.preventDefault();
$("#ITARGET").empty();
$("#ITARGET").prepend('<img id="theImg" src="http://sensing-precision.com/wp-content/uploads/2015/12/page-loader.gif" />');
$("#ITARGET").load($(this).attr('href'));
});
Menu HTML
<div class="MPD">
<div class="Option">
<a class="Prod-Link-2" id ="DEF" href ="/electricalelectronic-products/alf150 #specTable" ><p>SPECIFICATIONS</p></a>
</div>
<div class="Option">
<a class="Prod-Link-2" href ="/electricalelectronic-products/alf150 #COMPARE" ><p>ALF150 v ALF150+</p></a>
</div>
<div class="Option">
<a class="Prod-Link-2" href ="/electricalelectronic-products/alf150 #FEAT" ><p>APPLICATIONS</p></a>
</div>
<div class="Option">
<a class="Prod-Link-2" href ="/electricalelectronic-products/alf150 #ACCESSORY" ><p>ACCESSORIES</p></a>
</div>
</div>
The Target div
<div class="Info-Target" id="ITARGET">
</div>
So my problem is this all works except one of the links.
My hidden div has 4 content divs and 2 tables inside which all have their own IDs. SPECIFICATIONS grabs the #specTable, APPLICATIONS grabs the #FEAT div etc etc.. ACCESSORIES will not load the #ACCESSORY div at all and I don't know why. The script initializes and the page loader gif is displayed, but then instead of displaying the content I'm trying to load.. it displays nothing.
The hidden area format
<div style="display: none;">
<div id ="COMPARE"> some content </div>
<table id="specTable"> some content </div>
<div id ="ACCESSORY"> some content </div>
etc ....
</div>
For test purposes
<div id="ACCESSORY">
<p> This is the accessory div </p>
</div>
No matter what I change the name to in the ID tag and the links href attr, it will not load (I even tried making a new div with a different name and moving the div up to top of the hidden content area thinking it was maybe a loading issue), but if I change the links href attr to one of the tables or a different div such as #FEAT or #specTable.. it loads that fine.
My gut feeling is that there is some qwirk with jQuery and .load() that i'm unaware of.
This problem may be CSS related. I've just taken a look at a couple of products, and wherever the content includes lists, the display appears blank because of extremely excessive white-space.
This CSS rule seems to be the culprit:
.Features li:before { content: url(#)!important; }

Angularjs: Load tabs based on active tabs but prevent rendering on visited tabs

I have a page having about 8 tabs and each tab has lot of html controllers(data bindings).so data rendering becomes slow.
So i used ng-if condition based on active tab which is found using ng-click on tab. The active tab is made visisble using css class.
So after using ng-if condition default tab gets loaded fast and on subsequent click on tab each tab gets loaded.But if i again click on the tab which was loaded previously then it again reloaded due to ng-if condition.
If i dont use ng-if condition based on active tabs then intial load of page is very slow but navigating between tabs will be faster due to entire tabs loaded at begining.But this method is not efficient as page load is slow at begining.
So i want to load tabs based on active tabs as shown below.But i dont want to reload or render the tab again for the tabs which are loaded once. So how it can be done?
<div class="claimant-data-nav " ng-controller="MyController">
<ul class="nav nav-tabs ">
<li ng-repeat="tabname in Mylist | unique:'TabName'" ng-class="{'active':tabname.TabName == 'Tab1'}">
<a data-target="#tab-{{tabname.TabName}}" data-toggle="tab" ng-click="activetab(tabname.TabName)">{{tabname.TabName}}</a>
</li>
</ul>
<div class="tab-content">
<a data-toggle="tab" class="mobile-tabs" data-target="#tab-{{tabname1.TabName}}" href="javascript:void(0)" ng-repeat="tabname1 in Mylist | unique:'TabName'">{{tabname1.TabName}}</a>
<div id="tab-{{tabname2.TabName}}" ng-class="{'tab-pane fade active in':tabname2.TabName == 'Tab1','tab-pane fade':tabname2.TabName != 'Tab1'}" ng-repeat="tabname2 in Mylist | unique:'TabName'">
<div ng-if="activetab == tabname2.TabName">
<!-- data binding logic here.It has lot of angularjs databindings.-->
</div>
</div>
</div>
</div>
Are you loading all the data from Ajax call or there are static templates that are being loaded. In either case, you need to maintain another scope map, which retains the state of tabs already loaded/clicked. Update your ng-if condition to execute a function which returns true or false. That function can first check for active tab and then check if it was loaded initially.
If the tab data was already loaded then its just a show/hide game, else show with Bindings and controller functions.

Href: Target ID in Current DIV

I have a list of <li> items being generated from a CMS/DB. Each <li> has a <div> in it which contains a link to a lightbox (a hidden <div>). The link targets the id of the hidden <div> (#inline-content-print) so the javascript plugin triggers and pulls up the lightbox.
The problem I'm running into is that all of the <li>s on the page generate with the same hidden div id (I can change this to classes). So no matter which <li> href is clicked, it always pulls up the lightbox for the first <li> on the page (the first instance of the id). I need a way for the href to say "open #inline-content-print" from THIS div (the one the link being clicked lives in)".
<li>
<div class="store-buttons-bg hide-print-buttons-{tag_Hide-Print-Buttons}">
PRINT
<div style="display: none;" id="inline-content-print">
CONTENT OF LIGHTBOX
</div>
<!-- end inline-content-print -->
</div>
</li>
Any advice would be greatly appreciated.
What server side language are you using? Is it producing these list items in a loop? Is there an index on that loop? If so, this would work for you.
[Server language version of a for loop with an index variable named "i"]
<li>
<div class="store-buttons-bg hide-print-buttons-{tag_Hide-Print-Buttons}">
PRINT
<div style="display: none;" id="inline-content-print_[server language output of "i"]">
CONTENT OF LIGHTBOX
</div>
<!-- end inline-content-print -->
</div>
</li>
[server language version of an end to the for loop]
Assuming you want to do this with jQuery/Javascript, you could use something like this:
$(document).ready(function()
{
$('li a.store-button').click(function(e)
{
var lightboxElement = $(e.currentTarget).find('div');
lightboxElement.show(); // or whatever function you need to display
return false;
});
});
Which is a little script that:
Waits for the page to load.
Finds your list elements (by li object type and the class on the links)
Intercepts click events.
Finds the div element nested in the link that was clicked.
Displays (or runs another function) on the target lightbox element.

Categories

Resources