I hope you all are having a good day. I have a little issue, coud you help me? I can't open a tooltip by methods. I have in HTML
<div id="filter-btn" class="filter-btn right waves-effect waves-blue tooltipped"
data-position="left"
data-tooltip="¡Ahora puedes filtrar por tipo de resultado!">
<i class="material-icons">filter_list</i>
</div>
I initialized it and it works moving the mouse over it, but when I try to open it with the open() method:
var tooltip = M.Tooltip.getInstance(document.getElementById('filter-btn'));
tooltip.open();
Does not work, but if check the status with tooltip.isOpen it return true despite is not showing nothing.
The initialization is there:
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.tooltipped');
var instances = M.Tooltip.init(elems, {enterDelay:50});
});
Related
I'm learning Dojo Toolkit and I'm fighting with adding dijit into dijit. There was simmilar post about it but wih DIV's. I just simply want to programmatically insert a button or anything else to a ContentPane like this:
I have a script (with required items to insert button):
require(["dijit/layout/AccordionContainer", "dijit/layout/ContentPane", "dojo/domReady!", "dijit/form/Button", "dijit/_WidgetBase"],
function(AccordionContainer, ContentPane, Button){
var aContainer = new AccordionContainer({style:"height: 300px"}, "markup");
var aChild1 = new ContentPane({
title: "Date selectors",
content: "Test"
});
var aChild2 = new ContentPane({
title:"Group 2",
content:"Test"
});
var aChild3 = new ContentPane({
title:"Group 3",
content:"Test"
});
aContainer.addChild(aChild1);
aContainer.addChild(aChild2);
aContainer.addChild(aChild3);
aContainer.startup();
});
And my DIV is simply:
<div id="markup" style="width: 250px; height: 300px">
This ContentPane should work as left toolbar with rollable panes. In first one I'd like to add date pickers or button or anything else. Above code works until I try to add subChild. I tried to create var with button and make it child of a content pane like:
var btn as new Button([...]);
and place it here:
aContainer.addChild(aChild1);
aChild1.addChild(btn);
aContainer.addChild(aChild2);
aContainer.addChild(aChild3);
aContainer.startup();
but it not works. How can I build my layout in this case? Thanks in advance for help.
Problem solved. I applied declarative instead of programatic creation:
In script, I simply added this line:
require(["dojo/parser", "dijit/layout/ContentPane"]);
Then I wrote some divs like:
<div data-dojo-type="dijit/layout/ContentPane">
Some text
</div>
I found a tip (inside the code of demos) that:
content pane has no children so just use dojo's builtin after advice
dojo.connect(dijit.layout.ContentPane.prototype, "resize",
function(mb)
... so all I had to do was:
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props='selected:true, title:"Calendar"'>
<!-- calendar widget pane -->
<input id="calendar1" data-dojo-type="dijit.Calendar">
</div>
If you would like to see, how to place any of layout items in one place, see Dojo Theme Tester (view source):
https://download.dojotoolkit.org/release-1.7.0/dojo-release-1.7.0/dijit/themes/themeTester.html?theme=tundra
You will find every fragment well described. For me, it is more useful than documentation.
I hope that by solving my problem, this solution will be helpful to someone.
In my VueJS application, I have a component to copy the base URL to the clipboard on a link click
<a #click="copyURL" ref="mylink">
<img class="social_icon" src="/images/game/copy-fr.png" alt="Copy icon"
/></a>
<input type="text" class="copyurl_txt" v-model="base" ref="text" />
<div v-if="flash" v-text="flash"></div>
And I have following method inside my script,
copyURL() {
this.$refs.text.select();
document.execCommand("copy");
this.flash = "lien copié dans le presse-papiers";
},
This works well on my Firefox browser, but on my Chrome this not copying the link to the clipboard...
<a #click="copyURL" ref="mylink">
<img class="social_icon" src="/images/game/copy-fr.png" alt="Copy icon"
/></a>
And your method should like follows,
copyURL() {
const el = document.createElement('textarea');
el.value = window.location.origin;
el.setAttribute('readonly', '');
el.style.position = 'absolute';
el.style.left = '-9999px';
document.body.appendChild(el);
const selected = document.getSelection().rangeCount > 0 ? document.getSelection().getRangeAt(0) : false;
el.select();
document.execCommand('copy');
document.body.removeChild(el);
if (selected) {
document.getSelection().removeAllRanges();
document.getSelection().addRange(selected);
}
this.flash = "lien copié dans le presse-papiers";
},
If you want to use different value instead of base url then simple change
el.value = window.location.origin;
to
el.value = this.link_url;
or
el.value = "www.yourlink.com";
That's because the input value isn't selectable in the same manner. This is probably one of those quirks that is handled differently by each browser. That happens. My advice is to not try and re-invent the wheel here. I've built a custom JS class just for copying text that works with all major browsers, including IE11, but it was a terrible job to do. I can't even share it due to copyright issues.
So just use a package like https://github.com/Inndy/vue-clipboard2 and be done with it.
If that's not an option, you have to look into creating a virtual DOM at runtime with an invisible table that you can then select and copy automatically.
I have a strange behavior of TestCafe on my site. I have two checkboxes on a site and a button that brings me to the next step as soon as I click on it. When the page load, de button is visible and does not get manipulated at any time.
Here is the markup of the button:
<button id="confirmation-submit" type="submit" class="btn btn-success pull-right hidden-xs">
<span class="glyphicon glyphicon-flag"></span>
order now
</button>
Here is what my code looks like (the relevant part for this problem):
const submitOrderBtn = Selector('button[type="submit"].btn-success');
//const submitOrderBtn = Selector('#confirmation-submit');
test('complete order', async t =>{
await t
.click(submitOrderBtn)
In chrome it shows me this picture:
The output of the command line is this:
The button is visible the whole time and even when I look over the site with the developer tools, the button is there and it has the id (confirmation-submit) that I want to be clicked.
How can I get around this problem? On other pages, I can use the .click function without any problems.
As #Andrey Belym mentioned in his comment, TestCafe will consider element visibile if its width or height have a non-zero value and it is not hided using CSS properties like display: hidden and visibility: none.
You can check it in Computed CSS Properties in DevTools. In your case, #confirmation-button might be an invisible button hidden somewhere in an actual visible element.
Also, you can try to resize browser window using resizeWindow action. It may help if your layout is adaptive or it is a scrolling issue.
As a workaround you could try to click on the button parent container:
const submitOrderBtn = Selector('#confirmation-submit');
const confirmSelector = submitOrderBtn.parent();
test('complete order', async t =>{
await t
.click(confirmSelector)
if this does not work for the immediate parent, you could try to fetch the first parent div like this:
const submitOrderBtn = Selector('#confirmation-submit');
const confirmSelector = submitOrderBtn.parent('div');
test('complete order', async t =>{
await t
.click(confirmSelector)
<button data-se-id="confirmation-submit" type="submit" class="btn btn-success pull-right hidden-xs">
order now
</button
and in test add like this : for click specified element :
const submitOrderBtn =Selector('[data-se-id="confirmation-submit"]')
test('complete order', async t =>{
await t
.click(submitOrderBtn)
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>
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.