I have a slickgrid with 50+ rows which shows a right hand side vertical slider correctly in browsers like Firefox, Safari and Chrome.
On the iPad which uses Safari, the slider is not visible.
Is there a work around to solve this problem ?
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>SlickGrid example 1: Basic grid</title>
<link rel="stylesheet" href="../slick.grid.css" type="text/css" media="screen" charset="utf-8" />
<link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.5.custom.css" type="text/css" media="screen" charset="utf-8" />
<link rel="stylesheet" href="examples.css" type="text/css" media="screen" charset="utf-8" />
</head>
<body>
<table width="100%">
<tr>
<td valign="top" width="50%">
<div id="myGrid" style="width:600px;height:500px;"></div>
</td>
<td valign="top">
<h2>Demonstrates:</h2>
<ul>
<li>basic grid with minimal configuration</li>
</ul>
</td>
</tr>
</table>
<script language="JavaScript" src="../lib/jquery-1.4.3.min.js"></script>
<script language="JavaScript" src="../lib/jquery.event.drag-2.0.min.js"></script>
<script language="JavaScript" src="../slick.grid.js"></script>
<script>
var grid;
var columns = [
{id:"title", name:"Title", field:"title"},
{id:"duration", name:"Duration", field:"duration"}
];
var options = {
enableCellNavigation: false,
enableColumnReorder: false
};
$(function() {
var data1 = [];
for (var i = 0; i < 50; i++) {
data1[i] = {
title: "Task " + i,
duration: "5 days"
};
}
grid = new Slick.Grid($("#myGrid"), data1, columns, options);
})
</script>
</body>
I'm not familiar with Slickgrid so can only advise as to what may be causing this. It's entirely possible that under the hood it's using a fixed height div, hence the lack of scollbar. I gather some of the fixed height div / scrolling scenarios are fixed in iOS5, but in the meantime you might want to read this post from Matteo Spinelli for some pointers:
What you can really do with native position:fixed
Related
I am trying to use Xtext (2.14.0) together with the Orion web editor, but even with a simple example the Content Assist is not triggered by CTRL+SPACE inside the Orion editor.
From what I know, CTRL+SPACE is used by default to trigger the Content Assist inside the Orion editor.
I also want to mention that if I add a character to the "contentAssistCharTriggers" option (as described in the Xtext documentation), than the specified character triggers the Content Assist, but CTRL+SPACE still doesn't work.
Does anyone know what could be the problem?
Update:
I am using the basic xtext state machine example.
Below is the html file used to embed the Orion Editor:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="en-us">
<title>Example Web Editor</title>
<link rel="stylesheet" type="text/css" href="dependencies/orion/code_edit/built-codeEdit.css"/>
<link rel="stylesheet" type="text/css" href="xtext/2.14.0/xtext-orion.css"/>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script src="webjars/requirejs/2.3.2/require.min.js"></script>
<script type="text/javascript">
var baseUrl = window.location.pathname;
var fileIndex = baseUrl.indexOf("index.html");
if (fileIndex > 0)
baseUrl = baseUrl.slice(0, fileIndex);
require.config({
baseUrl: baseUrl,
paths: {
"text": "webjars/requirejs-text/2.0.15/text",
"jquery": "webjars/jquery/2.2.4/jquery.min",
"xtext/xtext-orion": "xtext/2.14.0/xtext-orion"
}
});
require(["dependencies/orion/code_edit/built-codeEdit-amd"], function() {
require(["xtext/xtext-orion"], function(xtext) {
xtext.createEditor({
baseUrl: baseUrl,
syntaxDefinition: "xtext-resources/generated/mylang-syntax",
contentAssistCharTriggers: " "
});
});
});
</script>
</head>
<body>
<div class="container">
<div class="header">
<h1>Demo</h1>
</div>
<div class="content">
<div id="xtext-editor" data-editor-xtext-lang="mylang"></div>
</div>
</div>
</body>
</html>
here is the index html that works fine for me (content assist with crtl+space)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Language" content="en-us">
<title>Example Web Editor</title>
<link rel="stylesheet" type="text/css" href="orion/code_edit/built-codeEdit.css"/>
<link rel="stylesheet" type="text/css" href="xtext/2.14.0/xtext-orion.css"/>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script src="webjars/requirejs/2.3.2/require.min.js"></script>
<script type="text/javascript">
var baseUrl = window.location.pathname;
var fileIndex = baseUrl.indexOf("index.html");
if (fileIndex > 0)
baseUrl = baseUrl.slice(0, fileIndex);
require.config({
baseUrl: baseUrl,
paths: {
"text": "webjars/requirejs-text/2.0.15/text",
"jquery": "webjars/jquery/2.2.4/jquery.min",
"xtext/xtext-orion": "xtext/2.14.0/xtext-orion"
}
});
require(["orion/code_edit/built-codeEdit-amd"], function() {
require(["xtext/xtext-orion"], function(xtext) {
xtext.createEditor({
baseUrl: baseUrl,
syntaxDefinition: "xtext-resources/generated/mydsl-syntax"
});
});
});
</script>
</head>
<body>
<div class="container">
<div class="header">
<h1>Example MyDsl Web Editor</h1>
</div>
<div class="content">
<div id="xtext-editor" data-editor-xtext-lang="mydsl">
</div>
</div>
</div>
</body>
</html>
and here is how your stuff looks like
Updating requirejs to 2.3.6 and jquery to 3.3.1-1 make codeEdit with you version work.
We updated everything in Xtext 2.17 that will come in spring 2019.
I am new to using PhoneGap on iOS and was stuck at cropping an image using imgAreaSelect JS plugin. The code works well in the web browsers while doesn't show any change in the iOS simulator. The image is being imported from a local folder.The code used is as below:
$('#testimg').imgAreaSelect({
handles: true,
aspectRatio: '16:9'
});
Please let me know if there any other way to crop an image using PhoneGap? This is how it looks in the web browser and the same does not happen in the iOS simulator.
The plugin imgAreaSelect probably wouldn't work. I have tried JCrop-http://deepliquid.com/content/Jcrop.html and it works perfectly fine. They explicitly mention that they have Touch support for iOS, Android, etc. Just follow the demo on the link.
Jcrop Does'nt support touch event in phone gap so there is no need to use I have spend 3 hour on it. I just want to crop after upload image from camera or salary in phonegap. I use following it is working fine.
https://github.com/acornejo/jquery-cropbox
<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
$targ_w = 640;
$targ_h=280;
$jpeg_quality = 90;
$save=dirname(__FILE__).'/files/abcd.jpg';
$src = dirname(__FILE__).'/img/img.jpg';
$img_r = imagecreatefromjpeg($src);
$dst_r = ImageCreateTrueColor( $targ_w, $targ_h );
imagecopyresampled($dst_r,$img_r,0,0,$_POST['x'],$_POST['y'],$targ_w,$targ_h,$_POST['w'],$_POST['h']);
header('Content-Type: image/jpeg');
imagejpeg($dst_r,null ,$jpeg_quality);
exit;
}
?>
<!DOCTYPE html>
<!-- saved from url=(0041)http://acornejo.github.io/jquery-cropbox/ -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery-cropbox</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
<link type="text/css" media="screen" rel="stylesheet" href="js/jquery.cropbox.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/hammer.js"></script>
<script type="text/javascript" src="js/jquery.cropbox.js"></script>
<script type="text/javascript" defer="">
$( function () {
$(function () {
var r = $('#results'),
x = $('.cropX', r),
y = $('.cropY', r),
w = $('.cropW', r),
h = $('.cropH', r);
$('#cropimage').cropbox({
width: 500,
height: 240
}).on('cropbox', function (event, results, img) { console.log("on crop");
x.text(results.cropX);
y.text(results.cropY);
w.text(results.cropW);
h.text(results.cropH);
$("#x").val(results.cropX);
$("#y").val(results.cropY);
$("#w").val(results.cropW);
$("#h").val(results.cropH);
});
});
});
</script>
</head>
<body>
<form action="index.php" method="post" onsubmit="return checkCoords();">
<div style="width:100%;">
<img id="cropimage" alt="" src="img/img.jpg" />
</div>
<div id="results"> <b>X</b>:
<span class="cropX"></span>
<b>Y</b>: <span class="cropY"></span>
<b>W</b>: <span class="cropW"></span>
<b>H</b>: <span class="cropH"></span>
<input type="text" name="x" id="x" size="4" />
<input type="text" name="y" id="y" size="4" />
<input type="text" name="w" id="w" size="4" />
<input type="text" name="h" id="h" size="4" />
</div>
<input type="submit" />
</form>
</body></html>
At first thanks to all that read my question.
I'm quite new to jquery JQM and knockoutJS and have some problems with a dynamic generated html code.
So I have the following example: I start my app with startPage.html where i load all the scripts(jquery, jqm, knockout) and with a link i go to secondPage.html where i want to load a dynamically generated array of checkboxes.
Now the problem is that i get the checkboxes but i don't have the jqm style for them.
My Code looks like this:
startPage.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" `"http://www.w3.org/TR/html4/loose.dtd">`
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>start Page</title>
<link href="jquery.mobile-1.3.0.css" rel="stylesheet" type="text/css" />
<link href="jquery.mobile.structure-1.3.0.css" rel="stylesheet" type="text/css" />
<link href="jquery.mobile.theme-1.3.0.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" charset="utf-8" src="jquery.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery.mobile-1.3.0.js"></script>
<script type="text/javascript" charset="utf-8" src="knockout.js"></script>
<script type="text/javascript" charset="utf-8" src="app/VM/WelcomeVM.js"></script>
<script type="text/javascript" charset="utf-8" src="app/VM/CheckboxVM.js"></script>
<script type="text/javascript">
//javascript code
var master = null;
var masterVM = function(){
var startVM = new welcomeVM();
var checkBoxHandler = new checkBoxVM();
return{
startVM:startVM,
checkBoxHandler:checkBoxHandler
}
}
$(document).ready(function(){
master = new masterVM();
ko.applyBindings(master);
});
$(document).bind("pageload",function(event,data){
ko.applyBindings(master);
});
</script>
</head>
<body>
<div data-role="page" id="home" data-theme="c">
<div data-role="content" id="content">
<div>
<a href="secondPage.html" data-role="button" >
</div>
</div>
</div>
</body>
</html>
My View Model for Knockout looks like this, here i generate the HTML code and fill the array of checkboxes:
var checkBoxVM = function() {
var cbArray = [ "One", "Two", "Three", "Four", "Five"];
var htmlexampleCB = ko.observable();
init();
function init() {
$.each(cbArray, function(index, item) {
var htmlCB = "<input type=\"checkbox\" name=\"exampleCB\" id=\""
+ item + "\" value=\"" + item + "\"> ";
var htmlLabel = "<label for=\""+item+"\">"+item+"</label>";
var html = htmlCB + htmlLabel + "<br />";
var all = "";
if (htmlCompanyCB() != null) {
all = htmlCompanyCB();
}
all = all + html;
htmlCompanyCB(all);
});
alert(htmlexampleCB());
};
return {
htmlexampleCB:htmlexampleCB
};
};
secondPage.html looks like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<div data-role="page" id="gasPage">
<div data-role="content">
<!-- <div data-bind="html:companiesHandler.htmlexampleCB"> </div> -->
<script type="text/javascript">
$(document).ready(function(){
var newSet = '<fieldset data-role="controlgroup" class="cbGroup"></fieldset>';
$('.cbDiv').append(newSet);
var newBox = '<div data-bind="html:checkBoxHandler.htmlexampleCB">';
$(".cbGroup").append(newBox);
});
</script>
<div data-role ="fieldcontain" class="cbDiv">
<fieldset data-role="controlgroup" class="cbGroup">
</fieldset>
</div>
</div>
</div>
</body>
</html>
I tried several other solutions that i saw here but unfortunately non of them worked for me.
Could someone please give me a hint or tell me what i should do, i don't have any other ideas.
Thanks in advance and i hope that someone can help me.
This code after creating the checkboxes dynamically should do it,
$("input[type='checkbox']").checkboxradio("refresh");
Please check the following link to a similar question.
Dynamic controlgroup and checkboxes unstyled
I am trying to set click handler for an anchor tag in jQuery mobile with via reference to the handler function inside the anchor tag (I need to do it this way for reasons that are cumbersome to get into). As illustrated in the code below when I pass a variable to the handler function that is an integer it works but when I pass it a string it does not. Can anyone explain whey this is?
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css"
/>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
</head>
<body>
<script>
$(document).ready(function () {
//The Line Below works
$("#main").html('click test');
/*
//The Lines Below Do not work
//$("#main").html('click test');
var test = 'hello world';
//$("#main").html('click test');
*/
$("#main").trigger('create')
});
function test(e) {
alert(e);
}
</script>
<div data-role="page" class="type-interior">
<div id="main" data-role="content"></div>
</div>
</body>
try this ::
var testParam = "'hello world'";
$("#main").html('click test');
I'm trying to create a slide out panel for my navigation for an ios app using phonegap. The problems occur when I get to the page below and the JSON starts loading. First of all I get this error in the console of xcode:
ImageIO: <ERROR> JPEG Corrupt JPEG data: premature end of data segment
After all the images load, my css3 transition is really choppy, even though it runs smoothly on every other page. What I'm wondering is if the AJAX script is constantly going out and trying to retrieve those images that have errors. Therefore I have an unending script that is causing ios to run choppy. Is there a way to close the script after it retrieves the images or do you have another idea on how to fix this? Here is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link type="text/css" rel="stylesheet" href="styles/iphone.css" />
<link href="styles/slideshow.css" type="text/css" rel="stylesheet" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<script type="text/javascript" charset="utf-8" src="scripts/jquery.js"></script>
<script src="scripts/retina.js" type="text/javascript"></script>
<script type="text/javascript" src="scripts/phonegap.js"></script>
<link rel="stylesheet" media="all and (orientation:landscape)" href="styles/iphone-lan.css">
</head>
<body>
<div id="overlay"></div>
<div class="wrapper">
<img src="img/events.png" width="280" height="57" class="retina welcome" />
<div id="events">
</div>
</div>
<div id="nav-wrapper">
<ul>
<li class="home"><div><img src="img/home-icon-white.png" /></div>Home</li>
<li class="where"><div><img src="img/where-icon-gray.png" /></div>Where</li>
<li class="series"><div><img src="img/watch-icon-gray.png" /></div>Series</li>
<li class="events"><a class="active" href="events.html"><div><img src="img/events-icon-gray.png" /></div>Events</a></li>
<li class="more" ><a href="javascript:void(0)" id="more-toggle" ><div><img src="img/more-icon.png" /></div>More</a></li>
<li id="more-panel">
<a class="more-link" href="" style="border-top: none">READ 2012</a>
<a class="more-link" href="">Blog</a>
<a class="more-link" href="">Facebook</a>
<a class="more-link" href="">Twitter</a>
</li>
</ul>
</div>
<script>
$('#more-toggle').click(function() {
$('#overlay').toggleClass("activated");
$('#nav-wrapper').toggleClass("expanded");
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$('img').retina();
});
$.ajax({
url: "http://www.lcbcchurch.com/mobileJSON/events",
dataType: "json",
success:function(data){
results(data);
}
});
function results(data) {
for(var i = 0; i<data.length;i++){
// this will log all of the images url
console.log(data[i].slideshow_image); // just access the part you want by it's name.
$("#events").append("<img src='"+data[i]["event-image"]+"'></a>");
}
picsReady();
}
</script>
<script type="text/javascript" src="scripts/klass.min.js"></script>
<script type="text/javascript" src="scripts/code.photoswipe-3.0.4.min.js"></script>
<script type="text/javascript">
function picsReady() {
(function(window, Util, PhotoSwipe){
$(document).ready(function(e){
var instance;
instance = PhotoSwipe.attach(
window.document.querySelectorAll('#slider a'),
{
target: window.document.querySelectorAll('#PhotoSwipeTarget')[0],
loop: true,
preventHide: true,
autoStartSlideshow: true,
captionAndToolbarHide: true,
margin: 0,
}
);
instance.show(0);
}, false);
}(window, window.Code.Util, window.Code.PhotoSwipe));
}
</script>
</body>
</html>