i have this code :
<div class="box">
<button class="box-more">show more</button>
</div>
the button "show more" will show more contents if click on it .
i want if scroll the page down (at the end of the page) the button will auto clicked and show more contents.
again if scroll the page down (after showing the new contents) the button will auto clicked and show more contents .
in other words :
i want the button auto click in evry scroll down .
i try this code that didnot works for me :
`
var mybutton = document.getElementsByClassName("box-more")[0];
// When the user scrolls down 200px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 200 || document.documentElement.scrollTop > 200) {
mybutton.click();
}
}
`
what is the best code that can do this jop ?
scroll down will click the button ?
Related
I have a menu that the user can click. Clicking a button in the menu replaces text and image content on the page. Much like a tabs menu.
I'm working on the accessibility of this feature.
I have the following code that includes and event listener for keydown:
const tabList = document.querySelector('[role="tablist"]');
const tabs = tabList.querySelectorAll('[role="tab"]');
let tabFocus = 0;
tabList.addEventListener('keydown', (e) => {
const keydownLeft = 37;
const keydownRight = 39;
if (e.keyCode === keydownLeft || e.keyCode === keydownRight) {
tabs[tabFocus].setAttribute("tabindex", -1);
}
if (e.keyCode === keydownRight) {
if (tabFocus < tabs.length-1) {
tabFocus++;
} else {
tabFocus = 0;
}
}
if (e.keyCode === keydownLeft) {
if (tabFocus > 0) {
tabFocus--;
} else {
tabFocus = tabs.length - 1;
}
}
tabs[tabFocus].setAttribute("tabindex", 0);
tabs[tabFocus].focus();
})
Here is the HTML:
<div role="tablist" aria-label="destination list">
<button role="tab" aria-selected="true" aria-controls="moon-tab" tabindex="0">Moon</button>
<button role="tab" aria-selected="false" aria-controls="mars-tab" tabindex="-1">Mars</button>
<button role="tab" aria-selected="false" aria-controls="europa-tab" tabindex="-1">Europa</button>
<button role="tab" aria-selected="false" aria-controls="titan-tab" tabindex="-1">Titan</button>
</div>
In Chrome 100.0.4896.127 and Safari 15.4 (17613.1.17.1.13) once the first element in the tablist has focus I can use the left and right arrow keys to move through the buttons.
However, in Firefox 99.0.1 (64-bit) when I click the arrow keys this does not happen because the focus completely leaves the tablist and the buttons.
I've Googled this and no one seems to report this issue. So I must be doing something wrong.
Any ideas how I can get this to work in Firefox?
I found the solution:
In Firefox go to
settings > general
In the search field type
"Always use the cursor keys to navigate within pages"
Uncheck this setting. and
Now the arrow keys can be used to move focus.
I can´t click on button:
// tslint:disable-next-line:no-shadowed-variable
elementToClick.isEnabled().then(function(isEnabled) {
if (isEnabled) {
console.log('button enabled');
browser.
wait(protractor.ExpectedConditions.elementToBeClickable(elementToClick), 50000)
.then(function() {
elementToClick.click();
});
}
});
Click fails due:
Failed: Element is not clickable at point (1781.908317565918,887) because another element obscures it
Do you know why?
The class modal fade show d-block is on top of button div.
I am able to scroll to a section of the website, and click on the element. But my test fails as the elements opening on the click is not visible without scrolling again.
This is the code I used to scroll and click:
var filter = theSwitch.pageBar;
var scrollIntoView = function () {
arguments[0].scrollIntoView();
};
browser.executeScript(scrollIntoView, filter);
theSwitch.pageBar.click();
I have OverlayTrigger with trigger='hover'. Expected behaviour here would be hiding popover when I moved cursor out of it. However, library hides popover when I move cursor out of button, i.e.
<OverlayTrigger trigger='hover' placement='left' overlay={
<Popover>
... content ...
</Popover>
}>
<Button bsStyle='default'>name</Button>
</OverlayTrigger>
So, when cursor out of button on popover content (if I want to click on link there for instance) it disappears.
Any solutions for this?
I am just starting to learn React. My solution to this is to set trigger option as "manual", and add onMouseOver={fn} and onMouseOut={fn} to manually show and hide the PopOver content. Here is my sample code:
var popOver_timer;
var Pop = React.createClass({
mixins: [TimerMixin],
mouseOverhandler: function() {
this.clearTimeout(popOver_timer);
this.refs.pop.show();
},
mouseOuthandler: function() {
popOver_timer = this.setTimeout(
()=> {this.refs.pop.hide();},
50
);
},
render: function() {
return (
<div onMouseOver={this.mouseOverhandler} onMouseOut={this.mouseOuthandler}>
<OverlayTrigger ref="pop" placement="bottom" trigger="manual" container={document.body} overlay={
<Popover onMouseOver={this.mouseOverhandler} onMouseOut={this.mouseOuthandler}>
This Page
</Popover>}>
<a href={this.props.popUsrUrl}>
<button>PopOver</button>
</a>
</OverlayTrigger>
</div>
);
}
});
Besides react-boostrap, I also require react-time-mixin and use the react-setTimeout. It is because when your mouse moves from the button to the popover content, the onMouseOut will be triggered first, then the onMouseOver. Therefore, a time delay for onMouseOut should be set. I set it to 50 ms. Hope it helps.
Setup
I've got a Telerik Kendo UI TabStrip with multiple tabs inside of an UpdatePanel...
<asp:UpdatePanel ID="DataDetails_Panel" UpdateMode="Conditional" runat="server">
<div id="ABIOptions_TabContainer">
<ul>
<li>Attendance</li>
<li>Grades</li>
<li>Gradebook</li>
<li>PFT</li>
<li>Scheduling</li>
<li>Miscellaneous</li>
<li>Parent Data Changing</li>
</ul>
</div>
</asp:UpdatePanel>
...which I then wire up in javascript later...
var optionTabContainer = $("#ABIOptions_TabContainer").kendoTabStrip({
animation: {
open: {
effects: "fadeIn"
}
},
select: onMainTabSelect
}).data("kendoTabStrip");
Scenario
The users will click on the various tabs and inside of each tab are settings for our portal. When they are in a tab and they make a change to a setting, the expectation is that they'll click on the 'Save' button, which will perform a postback to the server via ajax, because it is in the update panel.
Current Behavior
After the post back happens and the ul content comes back, I reapply the kendoTabStrip setup function call, which makes none of the tabs selected. This appears to the user like the page is now empty, when it just had content.
Desired Result
What I want to do, is after the partial postback happens and the UpdatePanel sends back the ul, I want to reselect the tab that the user previously selected.
What Already Works
I already have a way to preserve the tab that the user clicked on:
var onMainTabSelect = function (e) {
tabToSelect = e.item;
console.log("onTabSelect --> ", e.item.textContent);
}
and a function to reset the selected tab whenever it is called:
function setMainTab() {
if (!jQuery.isEmptyObject(tabToSelect)) {
var tabStrip = $('#ABIOptions_TabContainer').data("kendoTabStrip");
console.log("Attempt to set tab to ", tabToSelect.textContent);
tabStrip.select(tabToSelect);
} else {
console.log("tabToSelect was empty");
}
}
What Doesn't Work
My hypothesis is that the Kendo TabStrip says, "Hey, that tab is already selected" when I call the setMainTab after my postback:
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function () {
BindControlEvents();
setMainTab();
});
...and therefore, doesn't set my tab back. If I click on the tab, then Poof, all my content is there just like I expect.
Any ideas what I may be doing wrong?
I ended up changing the onMainTabSelect method to:
var onMainTabSelect = function (e) {
tabToSelect = $(e.item).data("tabindex");
}
which gets me the data-tabindex value for each li in my ul. I couldn't get the tab index from kendo, so I had to role my own. Once I got that value, then I was able to set the selected tab via an index rather than the tab object reference itself.