I am building an app using jquerymobile in phonegap. I am using he following code to achieve fixed header, footer, scrollable content using iscroll.js. The problem is that I am unable to scroll the content div. Pls help me.
enter code here<body onload="loaded()">
<div data-role="page" id="detail">
<div class="fixedHeader">
</div>
<div id="wrapper" >
<div id="scroll-content">
<div data-role="content">
<!-- dynamic content goes here -->
dynamic content goes here
</div>
</div>
</div>
<div class="fixedFooter" ></div>
</div>
#wrapper {
position:absolute; z-index:1;
top:45px; bottom:48px; left:0;
width:100%;
overflow:auto;
}
#scroller {
position:relative;
/* -webkit-touch-callout:none;*/
float:left;
width:100%;
padding:0;
}
Javascript code
var myScroll;
function loaded() {
myScroll = new iScroll('wrapper', {
onBeforeScrollStart: function (e) {
var target = e.target;
while (target.nodeType != 1) target = target.parentNode;
if (target.tagName != 'SELECT' && target.tagName != 'INPUT' && target.tagName != 'TEXTAREA')
e.preventDefault();
}
});
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', loaded, false);
i got iscroll working in jquerymobile by editing js as
var myScroll = [];
$(document).delegate('[data-role="page"]', 'pageshow', function () {
var $page = $(this);
// setup iScroll
$($page.find('#wrapper')).each(function(index) {
var scroller_id = $(this).get(0);
myScroll.push(
new iScroll(scroller_id, {
useTransform: false,
onBeforeScrollStart: function (e) {
var target = e.target;
while (target.nodeType != 1) target = target.parentNode;
if (target.tagName != 'SELECT'&& target.tagName !='option'&& target.tagName !='option' && target.tagName != 'INPUT' && target.tagName != 'TEXTAREA')
e.preventDefault();
e.stopPropagation();
}
}));
});
});
$(document).delegate('[data-role="page"]', 'pagehide', function () {
// unset and delete iScroll
for (x in myScroll)
{
myScroll[x].destroy();
myScroll[x] = null;
myScroll.splice(x, 1);
}
});
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
Related
I am trying to make it so that my draggable element is only cloned when I press the Control button and drag it. My options for the draggable() function are:
var pressedKeys = {};
window.onkeyup = function(e) { pressedKeys[e.keyCode] = false; }
window.onkeydown = function(e) { pressedKeys[e.keyCode] = true; }
var draggable_options = {
snap: '.slot',
snapMode: 'inner',
scroll: false,
start: function(event,ui){
if (pressedKeys[17]){
$(ui.helper).draggable('option','helper','clone');
}
},
}
Is this even possible? I've tried ui.element and also this and neither have worked. I'm not sure if you can change options at runtime for the jquery functions.
Consider the following.
$(function() {
var pressedKeys = {
17: false
};
$(window).on({
keyup: function(e) {
pressedKeys[e.keyCode] = false;
$("#draggable").draggable("option", "helper", "original");
},
keydown: function(e) {
console.log("Key Pressed: " + e.keyCode);
pressedKeys[e.keyCode] = true;
$("#draggable").draggable("option", "helper", "clone");
}
})
$("#draggable").draggable({
snap: '.slot',
snapMode: 'inner',
scroll: false
});
});
#draggable {
width: 150px;
height: 150px;
padding: 0.5em;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<div id="draggable" class="ui-widget-content">
<p>Drag me around</p>
</div>
An alternative solution. I would advise this solution personally.
$(function() {
var pressedKeys = {
17: false
};
$(window).on({
keyup: function(e) {
pressedKeys[e.keyCode] = false;
},
keydown: function(e) {
console.log("Key Pressed: " + e.keyCode);
pressedKeys[e.keyCode] = true;
}
})
$("#draggable").draggable({
snap: '.slot',
snapMode: 'inner',
scroll: false,
helper: function() {
return (pressedKeys[17] ? $(this).clone().removeAttr("id") : $(this));
}
});
});
#draggable, .ui-draggable {
width: 150px;
height: 150px;
padding: 0.5em;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<div id="draggable" class="ui-widget-content">
<p>Drag me around</p>
</div>
See more: https://api.jqueryui.com/draggable/#option-helper
The start callback is triggered too late to generate a Clone. This is why helper option offers a Function to dynamically create the the helper as needed.
Here is the _createHelper code from the library:
var o = this.options,
helperIsFunction = typeof o.helper === "function",
helper = helperIsFunction ? $( o.helper.apply( this.element[ 0 ], [ event ] ) ) : ( o.helper === "clone" ? this.element.clone().removeAttr( "id" ) : this.element );
Simply perform a similar activity to replicate the code. Conditionally, it will return the original or a clone.
Does anybody know how can I make jQuery UI tooltip to stay visible on hover. That is- I want it to stay visible when I move mouse from p element to tooltip.
Have tried on fiddle, but it seems there's a problem with :hover.
$("p").tooltip({
hide: {
effect: 'explode'
}
}).mouseleave(function () {
if ($('p').is(':hover')) {
ui.tooltip.preventDefault();
$('p').tooltip('open');
}
}).focusout(function () {
$('p').tooltip('close');
});
jsFiddle
That was a little tricky...
This script extends the standard jQuery UI 1.12.1, so that you get two extra options, allowing you to keep the tooltip open, while hover (the mouse stays on) it.
(function($) {
var uiTooltipTmp = {
options: {
hoverTimeout: 200,
tooltipHover: false // to have a regular behaviour by default. Use true to keep the tooltip while hovering it
},
// This function will check every "hoverTimeout" if the original object or it's tooltip is hovered. If not, it will continue the standard tooltip closure procedure.
timeoutHover: function (event,target,tooltipData,obj){
var TO;
var hov=false, hov2=false;
if(target !== undefined) {
if(target.is(":hover")){
hov=true;}
}
if(tooltipData !== undefined) {
if($(tooltipData.tooltip).is(":hover")){
hov=true;}
}
if(target !== undefined || tooltipData !== undefined) {hov2=true;}
if(hov) {
TO = setTimeout(obj.timeoutHover,obj.options.hoverTimeout,event,target,tooltipData,obj);
}else{
target.data('hoverFinished',1);
clearTimeout(TO);
if(hov2){
obj.closing = false;
obj.close(event,true);}
}
},
// Changed standard procedure
close: function(event) {
var tooltip,
that = this,
target = $( event ? event.currentTarget : this.element ),
tooltipData = this._find( target );
if(that.options.tooltipHover && (target.data('hoverFinished')===undefined || target.data('hoverFinished') === 0)){
target.data('hoverFinished',0);
setTimeout(that.timeoutHover, that.options.hoverTimeout,event, target, tooltipData, that);
}
else
{
if(that.options.tooltipHover){
target.data('hoverFinished',0);}
// The rest part of standard code is unchanged
if ( !tooltipData ) {
target.removeData( "ui-tooltip-open" );
return;
}
tooltip = tooltipData.tooltip;
if ( tooltipData.closing ) {
return;
}
clearInterval( this.delayedShow );
if ( target.data( "ui-tooltip-title" ) && !target.attr( "title" ) ) {
target.attr( "title", target.data( "ui-tooltip-title" ) );
}
this._removeDescribedBy( target );
tooltipData.hiding = true;
tooltip.stop( true );
this._hide( tooltip, this.options.hide, function() {
that._removeTooltip( $( this ) );
} );
target.removeData( "ui-tooltip-open" );
this._off( target, "mouseleave focusout keyup" );
if ( target[ 0 ] !== this.element[ 0 ] ) {
this._off( target, "remove" );
}
this._off( this.document, "mousemove" );
if ( event && event.type === "mouseleave" ) {
$.each( this.parents, function( id, parent ) {
$( parent.element ).attr( "title", parent.title );
delete that.parents[ id ];
} );
}
tooltipData.closing = true;
this._trigger( "close", event, { tooltip: tooltip } );
if ( !tooltipData.hiding ) {
tooltipData.closing = false;
}
}
}
};
// Extending ui.tooltip. Changing "close" function and adding two new parameters.
$.widget( "ui.tooltip", $.ui.tooltip, uiTooltipTmp);
})(jQuery);
jQuery(document).ready(function($) {
$("h3").tooltip({hoverTimeout: 250, tooltipHover: true});
});
body {
background-color: #f3f3f3;
}
h3 {
display: inline-block;
margin: 1em 0 0 1em;
padding: 1em;
background-color: #FF7E6B;
color: #fff;
}
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<div>
<h3 title="I'll be here while you are hovering me or my creator.">
Hover me</h3>
</div>
$('[data-toggle="popover"]').popover({ trigger: "manual" }).on(
{
mouseenter: function () {
var $this = $(this);
$this.popover("show");
$(".popover").on("mouseleave", function () {
$this.popover('hide');
});
},
mouseleave: function () {
var $this = $(this);
setTimeout(function () {
if (!$(".popover:hover").length) {
$this.popover("hide");
}
}, 350);
}
});
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span type="button" role="button" class="glyphicon glyphicon-question-sign" data-toggle="popover" data-trigger="hover" data-placement="auto" data-html="true" data-content="For instance enter a link here <a href='https://google.com' target='_blank'>Almost know everything</a>"></span>
I have a jquery ui accordion in my asp.net mvc4 view. I have followed what explained here:
http://jqueryui.com/accordion/#sortable
I get below weird behaviour (see picture in following link)
http://snag.gy/lcEen.jpg
as you can see i have two header titles, Filter and Add Component. The weird behaviour is for example in case Filter, the content is being painted within the title "Filter", why? the same happens for "Add components" title.
HTML Code (below is within a jQuery ui tab):
<style>
/* IE has layout issues when sorting (see #5413) */
.group { zoom: 1 }
</style>
(...)
<div id="accordion1" style= "width: 790px;">
<div class="group">
<h3>Filters</h3>
<div>
<!-- some stuff here -->
</div>
</div> <!--end group -->
<div class="group">
<h3>Add component</h3>
<div>
<!-- some stuff here -->
</div>
</div> <!--end group -->
</div> <!-- end accordion -->
<div id="accordion2" style= "width: 790px;">
<div class="group">
<h3>Filters</h3>
<div>
<!-- some stuff here -->
</div>
</div> <!--end group -->
<div class="group">
<h3>Add others</h3>
<div>
<!-- some stuff here -->
</div>
</div> <!--end group -->
</div> <!-- end accordion -->
in my script section i have below:
$(function () {
function subscribe_accordion_to_hoverintent_event(accordionId) {
$(accordionId).accordion({
event: "click hoverintent"
});
}
subscribe_accordion_to_hoverintent_event("#accordion1");
subscribe_accordion_to_hoverintent_event("#accordion2");
});
// Collapse content
$(function () {
function set_accordion_as_collapsible(accordionId) {
$(accordionId).accordion({
collapsible: true
});
}
set_accordion_as_collapsible("#accordion1");
set_accordion_as_collapsible("#accordion2");
});
// Sortable functionality
$(function () {
function set_accordion_as_sortable(accordionId) {
$(accordionId).accordion({
header: "> div > h3"
}).sortable({
axis: "y",
handle: "h3",
stop: function (event, ui) {
// IE doesn't register the blur when sorting
// so trigger focusout handlers to remove .ui-state-focus
ui.item.children("h3").triggerHandler("focusout");
}
});
}
set_accordion_as_sortable("#accordion1");
set_accordion_as_sortable("#accordion2");
});
/*
* hoverIntent | Copyright 2011 Brian Cherne
* http://cherne.net/brian/resources/jquery.hoverIntent.html
* modified by the jQuery UI team
*/
$.event.special.hoverintent = {
setup: function () {
$(this).bind("mouseover", jQuery.event.special.hoverintent.handler);
},
teardown: function () {
$(this).unbind("mouseover", jQuery.event.special.hoverintent.handler);
},
handler: function (event) {
var currentX, currentY, timeout,
args = arguments,
target = $(event.target),
previousX = event.pageX,
previousY = event.pageY;
function track(event) {
currentX = event.pageX;
currentY = event.pageY;
};
function clear() {
target
.unbind("mousemove", track)
.unbind("mouseout", clear);
clearTimeout(timeout);
}
function handler() {
var prop,
orig = event;
if ((Math.abs(previousX - currentX) +
Math.abs(previousY - currentY)) < 7) {
clear();
event = $.Event("hoverintent");
for (prop in orig) {
if (!(prop in event)) {
event[prop] = orig[prop];
}
}
// Prevent accessing the original event since the new event
// is fired asynchronously and the old event is no longer
// usable (#6028)
delete event.originalEvent;
target.trigger(event);
} else {
previousX = currentX;
previousY = currentY;
timeout = setTimeout(handler, 100);
}
}
timeout = setTimeout(handler, 100);
target.bind({
mousemove: track,
mouseout: clear
});
}
};
The problem is that you set up the accordion without the header property and try to add it later when setting the sortable. You must set it when you're building the accordion widget, like this:
function subscribe_accordion_to_hoverintent_event(accordionId) {
$(accordionId).accordion({
header: "> div > h3",
event: "click hoverintent"
});
}
And you can remove it from the sortable function:
function set_accordion_as_sortable(accordionId) {
$(accordionId).sortable({
axis: "y",
handle: "h3",
stop: function (event, ui) {
// IE doesn't register the blur when sorting
// so trigger focusout handlers to remove .ui-state-focus
ui.item.children("h3").triggerHandler("focusout");
}
});
}
JSFiddle result: http://jsfiddle.net/hNp2z/1/
Also, the id's in your question don't match, be sure to check those too.
I want to develop an ajax pipeline such that whenever there is any ajax request made through ajax.beginform or ajax.actionLink it should start with my ajax.start function in which i can be able to read the targetupdateid so that i can shoew blockui and any developer should not bother about this ajax.start.I was trying to use this piece of code but itis not working
$(document).ajaxStart(function (xhr, setting) {
console.log(this.activeElement);
if (this.activeElement.type == 'submit') {
activeElement = this.activeElement.form.attributes["data-ajax-update"].value;
} else {
/ activeElement = this.activeElement.attributes["data-ajax-update"].value;
}
if (activeElement != null) {
$(activeElement).blockUI();
}
});
Any help would highly be appreciated.
try this
<div id="mainbody">
</div>
<div id="SomeId" style="display:none">
// put you style to block the UI here
// or put loader image
<img src="#Url.Content("~/Content/themes/base/images/ajax_loader_big.gif")" alt="" />
</div>
#Ajax.BeginForm("Index", "Search", new AjaxOptions { UpdateTargetId = "mainbody", HttpMethod = "Post", LoadingElementId = "SomeId" })
you can use Ajax-Loader or some css style with loader image which will block the UI. you need to paas that div Id in LoadingElementId which block the UI until ajax functionality is not completed.
Thanks for the solution but i want to block the UpdateTargetId which i resolve by adding a listener to the click .
var activeElement,
targetElement,
callbackfunc = function (event) {
activeElement = event.target || event.srcElement;
};
window.addEventListener('click', callbackfunc, true);
$(document).ajaxStart(function () {if (activeElement !== null && activeElement !== undefined) {
if (activeElement.type == 'submit') {
targetElement = activeElement.form.attributes["data-ajax-update"].value;
}
if (activeElement.tagName == 'A') {
targetElement = activeElement.attributes["data-ajax-update"].value;
}
}
if (targetElement !== undefined || targetElement !== null) {
$(targetElement).block({
showOverlay: false,
css: { border: '0px', width: '40px', height: '40px' },
message: '<div class="progress"><div>'
});
}
});
I use jquery-ui-auto-complete-with-multi-values. My textbox is downstream of page, But autocomplete-menu is opened above the page. I cant understand this bug. I used example that is on jquery site. Its is same examle.
I add jquery and css at the page.What could be the problem?
UPDATE
Script
<style>
.ui-autocomplete-loading {
background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat;
}
</style>
<script>
$(function () {
var availableTags;
$.ajax({
url: '#Url.Action("GetTags", "Question")',
type: 'GET',
cache: false,
beforeSend: function () {
// Show your spinner
},
complete: function () {
// Hide your spinner
},
success: function (result) {
availableTags = result;
}
});
function split(val) {
return val.split(/,\s*/);
}
function extractLast(term) {
return split(term).pop();
}
$("#tags")
// don't navigate away from the field on tab when selecting an item
.bind("keydown", function (event) {
if (event.keyCode === $.ui.keyCode.TAB &&
$(this).data("autocomplete").menu.active) {
event.preventDefault();
}
})
.autocomplete({
minLength: 0,
source: function (request, response) {
// delegate back to autocomplete, but extract the last term
response($.ui.autocomplete.filter(
availableTags, extractLast(request.term)));
},
focus: function () {
// prevent value inserted on focus
return false;
},
select: function (event, ui) {
var terms = split(this.value);
// remove the current input
terms.pop();
// add the selected item
terms.push(ui.item.value);
// add placeholder to get the comma-and-space at the end
terms.push("");
this.value = terms.join(", ");
return false;
}
});
});
</script>
Controller
[HttpGet]
public JsonResult GetTags()
{
var data = entity.Tags.Select(x => new { label = x.TagName, value = x.TagName });
return Json(data, JsonRequestBehavior.AllowGet);
}
Razor
<div class="demo">
<div class="ui-widget">
#Html.TextBoxFor(x => x.Title, new { #class = "my_text_box", id = "tags" })
</div>
</div>
<!-- End demo -->
<div class="demo-description">
<p>
Usage: Enter at least two characters to get bird name suggestions. Select a value
to continue adding more names.
</p>
<p>
This is an example showing how to use the source-option along with some events to
enable autocompleting multiple values into a single field.
</p>
</div>
Css
.ui-autocomplete {
position: absolute;
cursor: default;
}
ul, menu, dir {
display: block;
list-style-type: disc;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 40px;
}
Thanks.
I found the problem. Its about CurCss in jquery-ui version that I have. In older version of jquery-ui has not this method. I got script refrence from google-apis. Problem is fixed now.
Thanks.