I am using this library for swiping, it's working fine as expected but i have this issue of text selection, so how to enable select text in <div class="swiper-slide>some text </div>
By default the click event acts as a touch event and the slide follow the mouse movement when you hold it. I have two solutions to select text inside a slide.
Option 1
You can wrap your text with a span element with class swiper-no-swiping to disable swiping only on the text.
<div class="swiper-slide"><span class="swiper-no-swiping">some text</span></div>
Option 2
You can use the simulateTouch parameter to disable the click event as touch event in the whole area of the slides.
new Swiper('.swiper-container', { simulateTouch: false });
Related
I am using a select2 dropdown within a modal pop up window.
On mobile, when I select the select2 input, and attempt to scroll, the window does not scroll down. This means that, on mobile, if I click on the select2 box when it is in the bottom half of the screen, the keyboard sits over the input which cannot be seen.
This is my form, on desktop. The first textarea is a select2 input.
In this example I have clicked on my select2 box that is just below the radio buttons, the keyboard shows, and it is impossible to scroll down to see the input box.
Here I have added the below code, which has allowed scrolling as desired, but shows how the "Please enter 2 or more characters" tooltip does not scroll, as it is absolutely positioned.
$('.js-example-basic-multiple').on('select2:open', function (e) {
const evt = "scroll.select2";
$(e.target).parents().off(evt);
$(window).off(evt);
});
Is there a way to have scrolling that doesn't have the tooltip element floating? Is there a better alternative? I'm just trying to have a nicely formatted dropdown from a small dataset that I have on page in code.
I am using https://ng-bootstrap.github.io/#/components/tooltip/ and required to open tooltip on mouse over and also on click.
Basically, on mouse hover text1 appears and on click tooltip text changes to text2. In examples I see only on one event ( either on click or hover).
best example is - https://pypi.org/project/nltk/ - same functionality I needed using https://ng-bootstrap.github.io/#/components/tooltip/.
Angular 7 is being used in my project.
You can use the context and manual triggers functionality of ngb-tooltip to achieve this.
In your HTML, define the tooltip:
<ng-template #tipContent let-greeting="greeting">{{greeting}}</ng-template>
The above HTML will display the value of the variable greeting as the text in the tooltip.
Also define the button (or other HTML) element that you want the tooltip to appear on
<button
type="button"
class="btn btn-outline-secondary mr-2"
[ngbTooltip]="tipContent"
triggers="manual"
#t1="ngbTooltip"
(mouseover)="openTooltip(t1, 'text 1')"
(mouseout)="closeTooltip(t1)"
(click)="openTooltip(t1, 'text 2')">
Tooltip on top
</button>
This uses manual triggers, and you can bind to the mouseover and mouseout events to display the tooltip text 1 on hovering over the button. The click binding will display the tooltip text 2 when clicking on the button.
The openTooltip function is defined in the TypeScript file opens the tooltip passing in the text that was passed in as an argument to the method. The line tooltip.close() is required otherwise the clicking on the button to display the text 2 tooltip will not work:
openTooltip(tooltip, greeting: string) {
tooltip.close();
tooltip.open({ greeting });
}
There's a working StackBlitz demo here.
The closeTooltip function simply closes the tooltip:
closeTooltip(tooltip) {
tooltip.close();
}
I'm using the code for this vertical tab https://www.w3schools.com/howto/howto_js_vertical_tabs.asp but I don't want the top item (in this case "London") to be open by default when loading the page. I need the content in the other div to only appear when I hover over each item, not stay in place once clicked. I've tried removing the "OpenBydefault" code in the html and the javascript but it doesn't change anything, only the hover effect.
Anyone know how I can amend the code to achieve this?
Thank you!
You could remove the styles for hoover and replace them with event listeners: mouseover and mouseout. Then you could add functions to these event listeners to show and then hide again the related content. Here you can check how to add mouseover and mouse out event listeners: Add 3 event listenres
I have a normal Div with title-header ['Resize and Move Me! , Combobox'] and body part as mention below in link.
When I applied move and resize functionality using javascript, ComboBox on header part is not working. It would not drop list. If I put Combobox outside of that DIVs then its working properly,But inside it would not. See example,
JSFIDDLE DEMO
I have few questions
Can anyone tell me the reason that why its not working?
What should be the solution to make it work properly.
Because, in one the mouse click events, you are trying to block the default behavior of the select box.
function onMouseDown(e) {
onDown(e);
e.preventDefault();
}
Here e.preventDefault, is blocking the select box from showing the options when you click the mouse.
Please comment/delete it out to get the normal behavior of the select box.
I trying to close any open jQuery tooltips which are open.
When I use $(".selector").tooltip("close"), nothing happens.
When I use $(".selector").tooltip().remove(), it removes the tooltip but the textbox also disappears.
Is there a way to just remove only the tooltip dialog?
NOTE: If a user select the text in a textbox and drags the mouse, the tooltip window remains open, that is why I am trying to force-close it.
My believe is that you are removing the element. I will suggest to hide the tooltip with its option hide.
$('#element').tooltip('hide');
https://api.jqueryui.com/tooltip/#option-hide
Can also use the option close if you actually wants to hide/close the tooltip instead of removing it.
$('#element').tooltip( "close" );
https://api.jqueryui.com/tooltip/#option-close