I have a web page side navigation menu in the left and content pane in the right.In the content pane there is a text and a iframe.When going through nav menu with tab and enter any menu option relevant content will be loaded to the content pane.Even content loaded to the pane tab focus is on the navigation menu.
I need to give the tab focus to the text or to the iframe in the content pane whenever content is newly loaded.I tried with tabindex ..
test text for tab focus
<div id="content-frame" class="fill center-content">
<div id="content-frame-loading" class="load-img"><img ng-src="{{loadingIconUrl}}" alt="{{$scope.loadingSpinnerAltText}}"></div>
<iframe id="centerIframe" name="centerIframe" class="fill content-frame" src="" orientable height="100%" width="100%" ng-style="{'height' : settings.iFrameHeight}" webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen="true" allowtransparency="true">
</iframe>
</div>
Above is the code block of the content pane.
only setting tabindex will not solve the purpose. tabindex will add the dom node into the tabbing sequence and will be focused on clicking tab when its turn comes according to the sequence.
Here you are setting the tabindex but additionally you also want the content to get focused automatically, so you will have to write some script to achieve that.
So if your content is part of a component, you can manually focus the desired element on load of that component in any of the life cycle hooks.
that way, when you click the navigation menu option, your content's component gets loaded, its lifecycle hook gets executed where your script to focus the desired element gets executed and focus gets onto that element.
Related
Popup-like components in Material-UI render on an invisible top overlay that is programmatically appended directly to body. For example, when a SelectField or DropDownMenu is opened:
<body>
<div id="app-container>
<div ...>
<!-- This is where the SelectField is rendered. -->
</div>
</div>
<div ...>
<!-- This div is: -->
<!-- (1) where the visible dropdown is rendered when open -->
<!-- (2) a full-screen overlay -->
<!-- (3) removed when the dropdown is closed -->
</div>
</body>
This mechanism is in place so that (1) the user can "click away" to close the open dropdown, (2) the user does not accidentally click on another control when attempting to close the open dropdown.
However, I need to allow clickaways to actually hit the underlying element, without being blocked by the overlay. This can be accomplished in the Popover component by using the useLayerForClickAway prop:
<Popover useLayerForClickAway={false} ... >
...
</Popover>
Unfortunately, no such option exists for SelectField or DropDownMenu (or seems to exist, it's not documented), and I need one of these instead of a Popover.
Moreover, I don't seem to find any option that allows to reliably identify the overlay element created by the dropdown, beside getting the last element in body immediately after the dropdown opened (which is hackish at best). Material-UI also doesn't seem to offer a way to manually override the inline styles of this overlay element.
So, what's the "appropriate" way to disable the invisible overlay, and allow clicks when the dropdown is open?
I have an option in my page where in I can add new div on button click.
But when ever I add new div the page scrolls back to top, instead of staying focused on new item.
How can i make page stay focused on newly added div??
You can use .focus().docs are here.hope that helps.
As if that button is created using <a href="#"> tag then whenever you click on it due to href="#" it will automatically go to top of the page.
So you need to give either "ID" of that new appended DIV or "javascript:;".
If you passed ID of the DIV then that DIV focused and if you given "javascript:;" then that page will be there only it will perform the action whatever the action function written on click of it.
OR
If that DIV is loading after some service call then you need to handle it through JS you can use event.stopPropagation() function.
If that button is simple <button> element then add an attribute "type" as <button typr="button"> default type is submit so some times its perform some action if that button is included in some <form>
I am assuming the scenario because that Js Fiddle link is not accesible.
Hope it will helps.
I have four frame in one page and each iframe has its own content and parent div with some class in it
Below is the screen shot for that page:
Requirements: In Every panel there are some links, when you click on these links its call some other page using AJAX you can see in second image.
Below is HTML Code:
<div class="north-center border">
<div class="linksDetails">
<div class="panelLinks">
<ul>
<li>FX Traders</li>
<li>Fx Charting</li>
<!--<li>FI Inventory (Bonds)</li>-->
<li>FX RATE WATCHER</li>
</ul>
</div>
</div>
<div class="open-row-box" id="panel1"></div>
</div>
Links screen are comming under (linksDetails class) when user click on any link then i m adding new class with name (hidelinks) in this same div and make it display none
So how can i hide my content panel when i clicked on cross icon on top of every panel means when i clicked on that cross icon which is inside iframe i only want to add hidelink class to its parent divs which again hide content div and show this links div again.
i can hide only first panel using this jqyery code but not each panel.
Jquery Code:
$(window).load(function(){
// Through this i m adding and removing hide links:
$(".panelLinks a").click(function(){
$(this).parents().eq(2).parent().removeClass("hideLinks");
$(this).parents().eq(2).parent().addClass("hideLinks");
});
// Through this i can only add hidelinks class for first panel only not for each panel seperately:
$("a.close").on('click', function() {
$("#mainFrame", window.parent.document).parent().parent().children().removeClass('hideLinks');
});
});
Main Reqirement:
How can i hide my content panel seperately like when i click on first panel cross icon its hide only first panel, when i click on second panel its hide only second panel like this?
Thanks in Advance :)
This is how you can get the parent of an iframe
var parent = $(window.frameElement).parent();
My store's collection pages have the quick-view feature where hovering over products images allow you to click 'Quick View' to open a modal dialog window with summary info about the products. This is done with the leanModal plugin.
See: http://froy.com/collections/beds-mattresses for example. Store is powered by Shopify.
The problem is, when the page initially loads, all the elements within the modal are loaded despite being hidden. This unnecessarily slows down the site. I'd like to load the contents within the modal only after the user clicks on 'Quick View.'
<div class="quick_shop"> <!--This is the modal trigger-->
<div class="quickview-text">Quick View</div>
</div>
<div class="modal">
<!--All contents of the modal dialog window go in this div-->
</div>
Script:
$('.quick_shop').leanModal(); //Calls the function on the modal trigger
(function($){$.fn.extend({leanModal:function(_1)...});})(jQuery);
//The above line of code is for leanModal. I didn't paste entire thing cause it's long
Any help would be much appreciated! I'm new and learning so this is all very exciting.
The purpose of the modal div is to have a precise view on one specific element.
In your case (on the webpage you provided), the modal is loaded for each element, which breaks the sense of what you're trying to achieve.
I've never used the leanModal plugin but I guess you could try doing the following:
When the "Quick view" is pressed, find the closest element with jQuery .closest() method by searching the element with class .quick_shop, THEN leanModal that single element and display it:
$(".quickview-text").on("click", function(e){ $(this).closest(".quick_shop").leanModal(); //Then display it with .show() if it's hidden by default });
Once the modal is closed you can delete the element instead of hiding it with the jQuery's remove() method.
I have <div> with width and height properties. I want to put <div> over it, so the click events of the first <div> will not be registered anymore.
For example, I have div and when I click on it something is happening, but when I put second <div> over the first, clicking on the first <div> area will now fire that click events anymore.
<div id="firstDiv" style="width:100px; height:100px">bla bla</div>
How to put another <div> over "firstDiv" so I will not be able to change its elements? Is it possible?
just to disable click event to a div don't place extra div over it just use on() and off() from jQuery
Details : ON ,OFF
Still if you want to place a div over another try using css positioning and z-index
A nice way I've seen it done, and done it myself is to use a modal 'mask' overlay.
The grayed out transparent mask that covers the entire page, except for the element you're interacting with, eg. modal popup window.
You could do a mini version of it just within the popup and push the three non active divs behind it with CSS z-index.
One more way is to use the jQuery BlockUI plugin.
I personally like using something like this
pointer-events:none;
Disable's click events