Hello i try to mouseenter a JSXGraph DIV but if you move the mouse 1mm it will re enter the div and the js start automaticle new. thats bad.
I found out there are EVENT HANDLER with mouseover but i dont understand how i use it for the full div. there are only examples for a point. I tryed to put an other div over the "box" DIV but it didnt help, the div is everytime over the other.
Example code that dosent work well:
<div id="box" class="jxgbox" style="width:400px; height:400px;" onmouseenter="functionx()"></div>
JSXGraph does not capture the mouseenter event. The following code will print enter to the console whenever the mouse pointer enters the div element:
<div id="box" class="jxgbox"
style="width:400px; height:400px;"
onmouseenter="enter();"></div>
<script type="text/javascript">
var board = JXG.JSXGraph.initBoard('box', {
axis: true,
boundingbox: [-0.5,2.5,2.5,-0.5]});
var enter = function() {
console.log('enter');
};
</script>
Related
Is it possible to disable this blur call on the active element from SwiperJS in the onTouchStart event handler?
Some background:
For touch and desktop devices I'm using swiper for forms on swiper-slides. Within a form I'm using vue-select (a combobox).
The Problem: When the user selects an entry, the entry get not selected on the first time but on the second time.
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div>First form</div>
<v-select :options="selectionEntries"></v-select>
</div>
<div class="swiper-slide">
<div>Second form</div>
<v-select :options="selectionEntries"></v-select>
</div>
</div>
</div>
See also this example on codepen
I figured out that it seems to work correctly:
When I remove the blur-listener on the input field of the vue-select box. But it is used to close the selection list when the user leaves the field.
When I comment out this blur call in SwiperJS. I'm not sure why it is used there.
The first point is not an option, so is it possible to disable the blur call of SwiperJS via configuration?
Currently I'm using this workaround (SwiperJS V6.4.1):
const swiper = new Swiper(".swiper-container", {
// Workaround part 1:
touchStartPreventDefault: false
})
// Workaround part 2:
swiper.touchEventsData.formElements = 'notExistingHtmlTagName'
Part 1: To handle mouse down and click events on all elements, set the swiper parameter touchStartPreventDefault: false.
That will disable this code block: https://github.com/nolimits4web/swiper/blob/9dead9ef4ba5d05adf266deb7e3703ceb199a241/src/components/core/events/onTouchStart.js#L90-L97
Part 2: Set swiper.touchEventsData.formElements = 'undefined' to define nothing as formElements. That will disable the code block that calls blur: https://github.com/nolimits4web/swiper/blob/9dead9ef4ba5d05adf266deb7e3703ceb199a241/src/components/core/events/onTouchStart.js#L81-L88
I have an icon, which when you hover, pops up some extra information in a bootstrap popover
This works as expected, however, if I then click on any field on the page, which then does a partial refresh of a div containing the icon, it then loses the hover functionality.
Icon code:
<!--INFO BUTTON START-->
<xp:text escape="false" id="computedField4">
<xp:this.value><![CDATA[#{javascript:try{
var text = #DbLookup(#DbName(), "LookupKeywordLists", "Info"+compositeData.fieldName, "Members");
return " <i class='fa fa-info-circle' data-container='body' data-toggle='popover' data-trigger='hover' data-placement='right' data-content='"+text+"'></i>"
}catch(e){
openLogBean.addError(e,this.getParent());
}
}]]></xp:this.value>
<xp:this.rendered><![CDATA[#{javascript:try{
return compositeData.showInfoIcon;
}catch(e){
openLogBean.addError(e,this.getParent());
}}]]></xp:this.rendered>
</xp:text>
<!--INFO BUTTON END-->
Script block on the page:
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[$(document).ready(function(){
$('[data-toggle="popover"]').popover({
trigger: 'hover',
title: 'Information'
});
});]]></xp:this.value>
</xp:scriptBlock>
The script block is currently outside the div that the partial refresh "refreshes" however I tried putting it within the div, which didn't resolve the issue. Any ideas? Thanks
You need to add the popover when the partial refresh occurs. In order to do so you use Dojo to subscribe to the partialrefresh-complete event.
This answer can help you: https://stackoverflow.com/a/49014247/785061.
I am testing an application that have the following html code:
...
<input
type="button"
class="picto modif"
onclick="hideDiv('divGlobalResult');showDiv('divForm')"
/>
When the user clicks on this button, the div divGlobalResult is hidden and the div divForm is shown.
I want to simulate this action with Selenium. Here is how I did:
focus css=input.picto.modif
fireEvent css=input.picto.modif click
However, the divForm appears while the second div divGlobalResult stays on the screen...
What am I missing?
function hideDiv(idDivElement) {
$("#" + idDivElement).css("display", "none");
}
function showDiv(idDivElement) {
$("#" + idDivElement).css("display", "");
}
thats happening because Selenium click function cannot simulate a real "Click" action performed with the mouse.
I have also faced this problem and the solution that best suited me was to take control of the mouse by using java robot and performing the click with it.
I hope this helps.
I have built a sort of picture gallery in JS. On given img and p elements, the onmousedown events calls two functions: it loads a new image and a new description (see below)
But, as opposed to what I was thinking, the onmousedow it is triggered by right-click too. I don't like this and I'd love to limite the onmousedown event to the left-click of the mouse.
Is there any way to do this?
Many thanks for your help.
HTML:
<img style="max-width: 100%; cursor:pointer;" src="../../img/picture1.jpg" alt="text" title="click me"
id="showgallery" onmousedown="changeimg(); changedscrpt()" />
enter code here
<p class="myclass" style="text-align: center;" id="imgdescription">Description</p>
You should move out calls to changeimg() and changedscrpt() to separate method which would evaluate first whether left mouse was pressed, something like that:
onmousedown="checkAndChange(event, this)";
JavaScript:
function checkAndChange(e, obj)
{
if (leftMousePressed(e))
{
changeimg();
changedscrpt();
}
}
function leftMousePressed(e)
{
e = e || window.event;
var button = e.which || e.button;
return button == 1;
}
If the right mouse button will be pressed, JavaScript will not do anything (will not change next image).
I am trying to create a simple HTML Metro App for Windows 8. I want to display a list view, and based on the clicked item display different content on the screen. It sounds trivial, right?
But it doesn't work! Here is my code:
<div id="frameListViewTemplate" data-win-control="WinJS.Binding.Template">
<img data-win-bind="src: picture" class="thumbnail" />
</div>
<div id="basicListView" data-win-control="WinJS.UI.ListView"
data-win-options="{itemDataSource : DataExample.itemList.dataSource, itemTemplate: select('#frameListViewTemplate'),onselectionchanged : handler}">
</div>
Than in the defult.js
var myListView = document.getElementById("basicListView").winControl;
myListView.addEventListener("selectionchanged", handler);
And the handler:
function handler() {
console.log("Inside the handler : ");
}
handler.supportedForProcessing = true;
So the handler is never called. My questions are: How can I add an event listener and its handler to the listview control.
How can I recognize which element on the list view was clicked.
P.S.
The listview is displayed properly in my app.
Thank you for help,
J
To get the item that is "clicked", you need to use itemInvoked. Selection changed would happen when the user cross slides on the item to select it, rather than taping/clicking to "invoke" it.
http://msdn.microsoft.com/en-us/library/windows/apps/br211827.aspx has some basic details.