I have a jquery mobile page that contains a button that when tapped should show/hide a div. I seem to be missing something. I've worked through similar questions on SO with no success, can anyone suggest where I'm going wrong?
HTML:
View more filters
<div id="filters"> Blah </div>
CSS:
div#filters {
display: none;
}
JQ:
$('#myPage').live('pageinit', function(event) {
$("#moreFilters").bind('tap',function(event, ui){
$('#filters').toggle('fast', function() {});
})
});
I've also tried:
$('#moreFilters').live('tap',function(event) {
$("#filters").toggle(); // toggles the visibility/display of the element.
});
Could anyone point me in the right direction?
Many thanks in advance
can you do something like this,
<script>
var isMenuVisible = true
function showHideMenu() {
isMenuVisible = !isMenuVisible;
var menuPrin= document.getElementById("divMenu");
if(isMenuVisible) {
menuPrin.style.visibility = "visible";
menuPrin.style.width = "30%";
} else {
menuPrin.style.visibility = "hidden";
menuPrin.style.width = "0%";
}
}
</script>
This script could you put it at end of your page.
Now, point you id="divMenu" to your div that want hide, ok, and onclick="showHideMenu();" function on element that fire event.
All this simulate it tap and toggle events.
I hope this helps. :)
Related
In iOS safari, OverlayTrigger with trigger="focus" isn't able to dismiss when tapping outside. Here is my code:
<OverlayTrigger
trigger="focus"
placement="right"
overlay={ <Popover id="popoverID" title="Popover Title">
What a popover...
</Popover> } >
<a bsStyle="default" className="btn btn-default btn-circle" role="Button" tabIndex={18}>
<div className="btn-circle-text">?</div>
</a>
</OverlayTrigger>
I know that this is a known bug for Bootstrap cuz this doesn't even work on their own website in iOS, but does anyone know any method to go around it? It would be the best if it is something that doesn't require jQuery, but jQuery solution is welcome. Thanks.
OK, since no one else gives me a work around, I worked on this problem with my co-worker together for 3 days, and we came up with this heavy solution:
THE PROBLEM:
With trigger="focus", Bootstrap Popover/Tooltip can be dismissed when CLICKING outside the Popover/Tooltip, but not TOUCHING. Android browsers apparently changes touches to clicks automatically, so things are fine on Android. But iOS safari and browsers that is based on iOS safari (iOS chrome, iOS firefox, etc...) don't do that.
THE FIX:
We found out that in React Bootstrap, the Overlay component actually lets you customize when to show the Popover/Tooltip, so we built this component InfoOverlay based on Overlay. And to handle clicking outside the component, we need to add event listeners for both the Popover/Tooltip and window to handle both 'mousedown' and 'touchstart'. Also, this method would make the Popover have its smallest width all the time because of the padding-right of the component is initially 0px, and we make based on the width of some parent component so that it is responsive based on the parent component. And the code looks like this:
import React, { Component, PropTypes as PT } from 'react';
import {Popover, Overlay} from 'react-bootstrap';
export default class InfoOverlay extends Component {
static propTypes = {
PopoverId: PT.string,
PopoverTitle: PT.string,
PopoverContent: PT.node,
// You need to add this prop and pass it some numbers
// if you need to customize the arrowOffsetTop, it's sketchy...
arrowOffsetTop: PT.number,
// This is to be able to select the parent component
componentId: PT.string
}
constructor(props) {
super(props);
this.state = {
showPopover: false,
popoverClicked: false
};
}
componentDidMount() {
// Here are the event listeners and an algorithm
// so that clicking popover would not dismiss itself
const popover = document.getElementById('popoverTrigger');
if (popover) {
popover.addEventListener('mousedown', () => {
this.setState({
popoverClicked: true
});
});
popover.addEventListener('touchstart', () => {
this.setState({
popoverClicked: true
});
});
}
window.addEventListener('mousedown', () => {
if (!this.state.popoverClicked) {
this.setState({
showPopover: false
});
} else {
this.setState({
popoverClicked: false
});
}
});
window.addEventListener('touchstart', () => {
if (!this.state.popoverClicked) {
this.setState({
showPopover: false
});
} else {
this.setState({
popoverClicked: false
});
}
});
// this is to resize padding-right when window resizes
window.onresize = ()=>{
this.setState({});
};
}
// This function sets the style and more importantly, padding-right
getStyle() {
if (document.getElementById(this.props.componentId) && document.getElementById('popoverTrigger')) {
const offsetRight = document.getElementById(this.props.componentId).offsetWidth - document.getElementById('popoverTrigger').offsetLeft - 15;
return (
{display: 'inline-block', position: 'absolute', 'paddingRight': offsetRight + 'px'}
);
}
return (
{display: 'inline-block', position: 'absolute'}
);
}
overlayOnClick() {
this.setState({
showPopover: !(this.state.showPopover)
});
}
render() {
const customPopover = (props) => {
return (
{/* The reason why Popover is wrapped by another
invisible Popover is so that we can customize
the arrowOffsetTop, it's sketchy... */}
<div id="customPopover">
<Popover style={{'visibility': 'hidden', 'width': '100%'}}>
<Popover {...props} arrowOffsetTop={props.arrowOffsetTop + 30} id={this.props.PopoverId} title={this.props.PopoverTitle} style={{'marginLeft': '25px', 'marginTop': '-25px', 'visibility': 'visible'}}>
{this.props.PopoverContent}
</Popover>
</Popover>
</div>
);
};
return (
<div id="popoverTrigger" style={this.getStyle()}>
<a bsStyle="default" className="btn btn-default btn-circle" onClick={this.overlayOnClick.bind(this)} role="Button" tabIndex={13}>
<div id="info-button" className="btn-circle-text">?</div>
</a>
<Overlay
show={this.state.showPopover}
placement="right"
onHide={()=>{this.setState({showPopover: false});}}
container={this}>
{customPopover(this.props)}
</Overlay>
</div>
);
}
}
In the end, this is a heavy work around because it is a big amount of code for a fix, and you can probably feel your site is slowed down by a tiny bit because of the 4 event listeners. And the best solution is just tell Bootstrap to fix this problem...
I have this HTML:
<div id="measureControl" data-role="controlgroup" data-type="vertical">
</div>
When anchor clicked I need to get data-icon attribute and to set another data-icon (for example eye).
I try this:
$("#measureButton").click(function () {
var el = $(".ui-icon", this);
var output = document.getElementById('output');
if (el.hasClass("home")) {
el.removeClass("home");
el.addClass("eye");
output.style.display = "block";
} else {
measureControls.line.deactivate();
el.removeClass("eye");
el.addClass("home");
output.style.display = "none";
}
});
But it doesn't work.
Any idea how can I implement it using jQuery or JavaScript?
just use jquery .data function
$("#measureButton").click(function () {
var currentIcon = $(this).data('icon');
alert(currentIcon);
$(this).data('icon','eye');
var currentIcon = $(this).data('icon');
alert(currentIcon);
});
https://jsfiddle.net/qs9zwwo0/
user jquery attr function to get the attributes value.
$("#measureButton").click(function () {
//to get the data icon.
alert($(this).attr('data-icon'));
// to set data icon
$(this).attr('data-icon','eye');
});
Is very simple with pure JavaScript.
var iconData = measureButton.dataset.icon;
Like Tushar indicated:
$(document).on("click", "#measureButton", function(){
$(this).attr("data-icon", "eye").button( "refresh" );
});
I want to show a context menu on right click of the series plotted in High charts. I am not able to find any option in High charts to do this. Can any one suggest a way to achieve this requirement.
Well it is 2019 and there still isn't a solution for this that comes with the base HighCharts download. I have found a way to manipulate the LEFT click, in order to show a menu of sorts. Now I understand this may not be the best case scenario, but you still have full access to all of the data from the click, and will still be able to do normal drill down functionality etc. You just might have to rework it. This is a TypeScript example, but can easily be replicated to JavaScript with a few edits.
Please excuse the lack of CSS for the menu.
Your functions initialized before the chart. The variable is used to keep the menu from disappearing and is NOT mandatory here.
let callDrillDown = () => {
alert('drill1');
}
let callDrillDown2 = () => {
alert('drill2');
}
let mouseIn: boolean;
This is the bread and butter, during the click, you're pulling the <div> from the HTML and adding an onclick action to it.
plotOptions: {
column: {
events: {
click: (event: any) => {
let contextMenu = document.getElementById('contextMenu');
let contextMenuItem1 = document.getElementById('contextMenuItem1');
let contextMenuItem2 = document.getElementById('contextMenuItem2');
contextMenuItem1.onclick = callDrillDown;
contextMenuItem2.onclick = callDrillDown2;
contextMenu.onmouseenter = () => {
mouseIn = true;
};
contextMenu.onmouseleave = () => {
mouseIn = false;
setTimeout(() => {
if (!mouseIn) {
contextMenu.setAttribute('style', 'display: none');
}
}, 1000);
};
contextMenu.setAttribute('style', 'top: '
+ event.pageY + 'px; left:'
+ event.pageX + 'px;');
}
}
}
}
Inside of the body add the HTML
<div id="contextMenu" style="display: none" class="contextMenu">
<div id="contextMenuItem1">Data</div>
<div id="contextMenuItem2">Data2</div>
</div>
Here is the jsFiddle. Hope this helped.
I did the solution below. Hope it helps.
plotOptions: {
series: {
point: {
events: {
contextmenu: function (e) {
$('#constext-menu-div').css({top: e.chartY, left: e.chartX});
$('#constext-menu-div').show();
console.log(e);
},
click: function(){
$('#constext-menu-div').hide();
}
}
}
}
},
"http://jsfiddle.net/c42Ms/45/"
It is not built-in functionality, but you can use custom-events extention and then catch right click. Last step will be show/hide any div with menu.
How the new jQueryUI's tooltip widget can be modified to open the tooltip on click event on certain element's on document, while the others are still showing their tootip on mouseover event. In click-open case the tooltip should be closed by clicking somewhere else on the document.
Is this possible at all?
Using jqueryui:
HTML:
<div id="tt" >Test</div>
JS:
$('#tt').on({
"click": function() {
$(this).tooltip({ items: "#tt", content: "Displaying on click"});
$(this).tooltip("open");
},
"mouseout": function() {
$(this).tooltip("disable");
}
});
You can check it using
http://jsfiddle.net/adamovic/A44EB/
Thanks Piradian for helping improve the code.
This code creates a tooltip that stays open until you click outside the tooltip. It works even after you dismiss the tooltip. It's an elaboration of Mladen Adamovic's answer.
Fiddle: http://jsfiddle.net/c6wa4un8/57/
Code:
var id = "#tt";
var $elem = $(id);
$elem.on("mouseenter", function (e) {
e.stopImmediatePropagation();
});
$elem.tooltip({ items: id, content: "Displaying on click"});
$elem.on("click", function (e) {
$elem.tooltip("open");
});
$elem.on("mouseleave", function (e) {
e.stopImmediatePropagation();
});
$(document).mouseup(function (e) {
var container = $(".ui-tooltip");
if (! container.is(e.target) &&
container.has(e.target).length === 0)
{
$elem.tooltip("close");
}
});
This answer is based on working with different classes. When the click event takes place on an element with class 'trigger' the class is changed to 'trigger on' and the mouseenter event is triggered in order to pass it on to jquery ui.
The Mouseout is cancelled in this example to make everything based on click events.
HTML
<p>
<input id="input_box1" />
<button id="trigger1" class="trigger" data-tooltip-id="1" title="bla bla 1">
?</button>
</p>
<p>
<input id="input_box2" />
<button id="trigger2" class="trigger" data-tooltip-id="2" title="bla bla 2">
?</button>
</p>
jQuery
$(document).ready(function(){
$(function () {
//show
$(document).on('click', '.trigger', function () {
$(this).addClass("on");
$(this).tooltip({
items: '.trigger.on',
position: {
my: "left+15 center",
at: "right center",
collision: "flip"
}
});
$(this).trigger('mouseenter');
});
//hide
$(document).on('click', '.trigger.on', function () {
$(this).tooltip('close');
$(this).removeClass("on")
});
//prevent mouseout and other related events from firing their handlers
$(".trigger").on('mouseout', function (e) {
e.stopImmediatePropagation();
});
})
})
http://jsfiddle.net/AK7pv/111/
I have been playing with this issue today, I figured I would share my results...
Using the example from jQueryUI tooltip, custom styling and custom content
I wanted to have a hybrid of these two. I wanted to be able to have a popover and not a tooltip, and the content needed to be custom HTML. So no hover state, but instead a click state.
My JS is like this:
$(function() {
$( document ).tooltip({
items: "input",
content: function() {
return $('.myPopover').html();
},
position: {
my: "center bottom-20",
at: "center top",
using: function( position, feedback ) {
$( this ).css( position );
$( "<div>" )
.addClass( "arrow" )
.addClass( feedback.vertical )
.addClass( feedback.horizontal )
.appendTo( this );
}
}
});
$('.fireTip').click(function () {
if(!$(this).hasClass('open')) {
$('#age').trigger('mouseover');
$(this).addClass('open');
} else {
$('#age').trigger('mouseout');
$(this).removeClass('open');
}
})
});
The first part is more or less a direct copy of the code example from UI site with the addition of items and content in the tooltip block.
My HTML:
<p>
<input class='hidden' id="age" />
Click me ya bastard
</p>
<div class="myPopover hidden">
<h3>Hi Sten this is the div</h3>
</div>
Bacially we trick the hover state when we click the anchor tag (fireTip class), the input tag that holds the tooltip has a mouseover state invoked, thus firing the tooltip and keeping it up as long as we wish... The CSS is on the fiddle...
Anyways, here is a fiddle to see the interaction a bit better:
http://jsfiddle.net/AK7pv/
This version ensures the tooltip stays visible long enough for user to move mouse over tooltip and stays visible until mouseout. Handy for allowing the user to select some text from tooltip.
$(document).on("click", ".tooltip", function() {
$(this).tooltip(
{
items: ".tooltip",
content: function(){
return $(this).data('description');
},
close: function( event, ui ) {
var me = this;
ui.tooltip.hover(
function () {
$(this).stop(true).fadeTo(400, 1);
},
function () {
$(this).fadeOut("400", function(){
$(this).remove();
});
}
);
ui.tooltip.on("remove", function(){
$(me).tooltip("destroy");
});
},
}
);
$(this).tooltip("open");
});
HTML
Test
Sample: http://jsfiddle.net/A44EB/123/
Update Mladen Adamovic answer has one drawback. It work only once. Then tooltip is disabled. To make it work each time the code should be supplement with enabling tool tip on click.
$('#tt').on({
"click": function() {
$(this).tooltip({ items: "#tt", content: "Displaying on click"});
$(this).tooltip("enable"); // this line added
$(this).tooltip("open");
},
"mouseout": function() {
$(this).tooltip("disable");
}
});
jsfiddle
http://jsfiddle.net/bh4ctmuj/225/
This may help.
<!-- HTML -->
Click me to see Tooltip
<!-- Jquery code-->
$('a').tooltip({
disabled: true,
close: function( event, ui ) { $(this).tooltip('disable'); }
});
$('a').on('click', function () {
$(this).tooltip('enable').tooltip('open');
});
I'm looking to create a nice effect when appending multiple paragraphs to a div. When I append I want to fadeIn the paragraphs one at a time so one shows after the other. At the moment they all fade in at the same time.
example html;
<div class="wrapper">
<p class="para">paragraph 1</p>
<p class="para">paragraph 2</p>
<p class="para">paragraph 3</p>
</div>
Here is the code used to append to the div
$(results).prependTo(".wrapper").hide().fadeIn('slow');
(Results) is simply the multiple paragraphs.
Thanks in advance for your help and advice.
You could try something like this:
$(results).bind('appear', function(){ // bind a custom event
$(this).fadeIn('slow', function(){
$(this).next('p.para').trigger('appear'); // recurse
});
})
.prependTo('wrapper')
.end() // back to "results"
.hide() // not necessary if already hidden by style rule
.first().trigger('appear'); // start the cascade
Here's an example: http://jsfiddle.net/redler/CDbEn/
You could use queue() for this:
$('p').prependTo("#wrapper").hide().each(function() {
var element = $(this);
$('#wrapper').queue(function() {
setTimeout(function() {
element.fadeIn('slow');
$('#wrapper').dequeue();
}, 700);
});
});
Example.
//assuming resuls is an array of strings containing your p's
var appear = function(index) {
if (results[index])
$(results[index]).prepend('.wrapeer').hide().fadeIn('slow', function(){ appear(index+1); });
}
What about
$('.para').each(function(index){
$(this).hide().prependTo('.wrapper').delay(500 * index).fadeIn('slow');
});