I am building a phonegap app using javacsript and jquery.I wrote this piece of code to swipe images.
$('#fullscreen').swipeleft(function () {
//Show next image
showNext();
alert('Left');
});
function showNext() {
$("#fullscreen").attr('src', "images/next.png");
}
But when I swipe, the image doesn't change and I get the error "09-13 14:49:21.188: W/webview(20238): Miss a drag as we are waiting for WebCore's response for touch down."
After browsing through some forums I added the following code.
var fullScr = document.getElementById("fullscreen");
fullScr.addEventListener( "touchstart", function(e){ onStart(e); }, false );
function onStart ( touchEvent ) {
if( navigator.userAgent.match(/Android/i) ) {
touchEvent.preventDefault();
}
}
But it still doesn't work.Although when I change my screen orientation from portrait to landscape, the image changes.
What is it that happens when I change the orientation and how could I get it working in the same orientation (portrait/landscape) please?
Thanks in advance.
Well it worked for me :S... I used version 1.5.0 of Cordova and run the app on Android simulator 4.0.3. Could you try the following example?
HTML content:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<!-- BASIC INCLUDES - TO BE MODIFIED ACCORDING TO YOUR CONVENIENCE -->
<link rel="stylesheet" href="./css/jquery.structure-1.1.0.min.css" />
<link rel="stylesheet" href="./css/jquery.mobile-1.1.0.min.css" />
<script type="text/javascript" charset="utf-8" src="cordova-1.5.0.js"></script>
<script type="text/javascript" src="./js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="./js/jquery.mobile-1.1.0.min.js"></script>
<!-- END - BASIC INCLUDES -->
<script type="text/javascript" charset="utf-8">
$(function() {
$('#fullscreen').swipeleft(function () {
//Show next image
showNext();
});
function showNext() {
$("#fullscreen").attr('src', "./images/next.png");
}
});
</script>
</head>
<body>
<div data-role="page">
<div data-role="content">
<img id="fullscreen" src="./images/previous.png"></img>
</div>
</div>
</body>
</html>
NB: Make sure of the following things:
Modify the source of the "basic includes" of the code to your convenience (source of the CSS / JS files of jQuery / jQuery Mobile)
Change the source of the version of cordova if yours is not 1.5.0
Hope this will work for you too. Anyway, let me know about your result.
Related
I am having an issue where the Screen Reader is not reading the text that changes within aria-live section in FireFox.
This is a simple example for a page where in chrome the Screen Reader reads the changes as they come in and in FireFox it does not:
<div aria-live="assertive" id="moo">
</div>
<script>
let i = 0;
setInterval(() => {
document.getElementById('moo').innerText = 'moo' + i++
}, 2000)
</script>
Am I doing something wrong? Is there another way to announce changes when they come in besides for aria-live that people use with Firefox?
I tested on Mac-Firefox-VoiceOver (it works on Mac-Chrome-VoiceOver)
Current firefox version: 83.0 (64-bit)
Firefox Nightly version：85.0a1 (2020-11-29) (64-bit)
In the latest Nightly version, the combination of aria-live on firefox + voiceOver is fixed! 🎉 Hooray!
Reference:
Firefox/Voiceover: aria-live regions not being announced
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aria-live Demo</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style>
body {
margin: 1em;
}
button {
margin-top: 1em;
display: block;
}
</style>
</head>
<body>
<h1>Aria-live Demo</h1>
<p>Testing <code>aria-live</code><br><button>Add Content</button><button id="add-more" >Add more content</button></p>
<!-- add aria-live="polite" -->
<div class="target" aria-live="polite" ></div>
<script type="text/html" id="test-content">
<h2>Custom Content</h2>
<p>Hello there! I am content that is going to be plunked into a container via javascript</p>
</script>
<input placeholder="messgae somebody"/>
<script>
$("button").on("click", function(){
$(".target").html($("#test-content").html());
});
$("#add-more").on("click", function(){
$(".target").append("<p>Hello World</p>");
});
$(document).on("keydown", function(e){
// press space to add content
if(e.keyCode === 32) {
$(".target").append("<p>Hello World</p>");
}
});
</script>
</body>
</html>
Just recently made this sticky navbar with a little bit of jquery and realised that it doesn't work . When i tried copying my code to jsfiddle everything worked fine
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css\style.css">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open Sans">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js\scripts.js"></script>
</head>
<body>
<header onmouseover="this.style.background='white'" onmouseout="this.style.background='#e6e6e6'">
<img src="Photos\logo.png" width="210px" height="150px">
</header>
<ul class="navbar">
<li>Model</li>
</ul>
<div class="main">lots of words......</div
</body>
</html>
And the scripts.js file :
var n=$(".navbar"),
ns="navbar-scrolled",
head=$('header').height();
$(window).scroll(function() {
if( $(this).scrollTop() > head) {
n.addClass(ns);
}
else {
n.removeClass(ns);
}
});
The css file is the same as in my JSFiddle
By default JSFiddle runs your script on window load, which means it runs after the DOM has been loaded. You need to do this yourself normally. Just a slight change will fix it...
$(function() {
var n=$(".navbar"),
ns="navbar-scrolled",
head=$('header').height();
$(window).scroll(function() {
if( $(this).scrollTop() > head) {
n.addClass(ns);
}
else {
n.removeClass(ns);
}
});
});
You just need to wrap your code like this...
$(function() {
// your code goes here
});
There are other ways to do the same, but that will fix your problem.
I have part of jQuery code that makes my photos bigger. It works perfectly in Firefox, Chrome or Opera, but if I use whichever IE it doesn't work and I can't find which part of this code isn't compatible with IE (I think this is a problem), so I don't know how to find solution (if some solution is possible of course)
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Moje portfolio</title>
<meta content="Ewa, Makowska, strony www, grafika komputerowa" name="keywords">
<link rel="Stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
/*show bigger picture*/
function showit(src){
document.getElementById("picture").innerHTML = "<img src="+src+" id='bigimg' />";
$('#mask').css('display','block');
$('#mask').animate({'width':screen.width,'height':screen.height +100, opacity:'0.5'});
$('#fixed').css('display','block');
var bigimg = document.getElementById("bigimg");
$('#picture').css('display','block');
$('#picture').animate({
width: bigimg.width,
height:bigimg.height});
$('#close').css('display','block');
}
function closeit(){
$('#close').click(function(){
$('#close').css('display','none');
$('#fixed').css('display','none');
$('#picture').css('display','none');
$('#mask').css('display','none');
})
$('#fixed').click(function(){
$(this).css('display','none');
$('#mask').css('display','none');
$('#picture').css('display','none');
$('#close').css('display','none');
})
}
$('.smallimages').hover(function(){
$(this).stop().css({'border':'1px solid #666699'});
},function(){
$(this).stop().css('border', 'none');
});
</script>
</head><body>
<div id ="close" onClick="closeit();"></div>
<div id="mask"></div>
<div id="fixed"><div id="picture"></div></div>
<div id="insidetext">
<?php
function listfile($dir)
{
$tab=array();
$handle=opendir($dir);
while ($file = readdir($handle)){
if($file=='.'||$file=='..' || is_dir($dirname.$file)) continue;
array_push($tab,$file);}
closedir($handle);
return $tab;
}
$tab=listfile('gallery');
foreach($tab as $value)
{
echo '<img src="gallery/'.$value.'"
onClick="showit(`gallery/'.$value.'`)" class="smallimages" />';
}
?>
</div>
</body>
</html>
Thank for all answer very much. Then I removed second version of jquery console showed me where was a problem. IE has problem with this (small tilde?), and work with \'. So than I change
"showit(gallery/'.$value.'`) to "showit(\'gallery/'.$value.'\')"
everything is perfect.
I'm at my wit's end here. I have a link on my page that is designed to load the contents of a PartialView into a <div> on my page as a draggable modal. The Javascript code to load the content into a div works, but my callback to create the modal fails with the following error:
> Uncaught TypeError: undefined is not a function
> jquery-1.8.2.min.js:19p.fn.extend.add
> jquery-1.8.2.min.js:19p.fn.extend.addBack
> jquery-1.8.2.min.js:19a.widget._getHandle
> jquery-ui-1.8.24.min.js:23a.widget._mouseCapture
> jquery-ui-1.8.24.min.js:23a.widget._mouseDown
> jquery-ui-1.8.24.min.js:23(anonymous function)
> jquery-ui-1.8.24.min.js:23p.event.dispatch
> jquery-1.8.2.min.js:19g.handle.h jquery-1.8.2.min.js:19
Code from HTML head as defined in my _Layout.cshtml file:
<head>
<meta charset="utf-8" />
<title></title>
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
<script src="/Scripts/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery-ui-1.8.24.min.js"></script>
<script src="/Scripts/modernizr-2.6.2.js"></script>
<script type="text/javascript" src="/Scripts/jquery.dataTables.min.js"></script>
<link href="/Content/siteV2.css" rel="stylesheet"/>
<link rel="stylesheet" type="text/css" href="/Content/jquery.dataTables.min.css" />
</head>
Javascript code to execute that resides on my ViewPresentationSchedule.cshtml page, which is returned as a View:
<script type="text/javascript">
function showAddForm() {
$('#AddPresenterForm').load('#Url.Action("AddPresenterForm", "Pod", new { podId = pod.PodId })',
function () {
showform();
}
);
}
//fades in our help popup and makes it draggable but not resizable
function showform() {
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var popupHeight = $('#AddPresenterForm').height();
var popupWidth = $('#AddPresenterForm').width();
$('#AddPresenterForm').css('position', 'absolute');
$('#AddPresenterForm').css('top', windowHeight / 2 - popupHeight / 2);
$('#AddPresenterForm').css('left', windowWidth / 2 - popupWidth / 2);
$('#AddPresenterForm').fadeIn('slow',
function () {
$('#AddPresenterForm').draggable();
$('#AddPresenterForm').css('display', 'block');
});
}
</script>
Div on ViewPresentationSchedule.cshtml, which is returned as a View:
<div id="AddPresenterForm">
</div>
Link to make all the magic happen:
Add Presenter
Any ideas what may be happening? I suspect that jQuery UI is not loading/initializing properly as I have .datepicker() commands on other pages that don't work as well.
After further investigation, there was something wrong with my jQuery files. I deleted them and retrieved them from a CDN and now everything works as expected.
Perhaps it has to do with where you are initializing draggable(). You could probably initialize the draggable() prior to loading the content. I assume #AddPresenterForm is hidden until the Add Presenter button is clicked, in which case it wouldn't be a problem if it is already draggable by the time it becomes visible.
If that doesn't seem to work you could use jQuery UI Modal Dialogue box which could make what you are doing a lot easier.
Here is a link to an example that seems to match what you are trying to do: http://jqueryui.com/dialog/#modal-form
I am new in jquery. my task in jquery is "ImgAreaSelect"
I am trying this from morning but not achive the goal. please review my code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/imgareaselect-default.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://odyniec.net/projects/imgareaselect/css/imgareaselect-animated.css"></script>
<script>
$(document).ready(function () {
$('#ladybug_ant').imgAreaSelect({
handles: true,
onSelectEnd: function(img, selection){
if (!selection.width || !selection.height){
return;
}
$('#x1').val(selection.x1);
$('#y1').val(selection.y1);
$('#x2').val(selection.x2);
$('#y2').val(selection.y2);
$('#w').val(selection.width);
$('#h').val(selection.height);
}
});
});
</script>
</head>
<body>
<img src="http://jotform.org/demo/jquery-image-area-select-plugin/images/sweet-dogs.jpg" id="ladybug_ant">
</body>
</html>
You seem to be missing the plugin itself that you have to download from http://odyniec.net/projects/imgareaselect/
jQuery is just the Core and does not include an image area select method
After loading the plugin you will be able to use $('#ladybug_ant').imgAreaSelect({ .. });
This is an example http://jsfiddle.net/8TwRJ/
I also face this problem.I made some changes in Css and Bingo,It is resolved.
Actully the parent div position should be relative to make imagearea scrollable.
You has to define the "parent:"imgParentDivID"" and set position:relative of that div.
It will work perfectly.
Code:
<div id="imgParentDivID" style="position:relative">
<img id="imgID" src="http://jotform.org/demo/jquery-image-area-select- plugin/images/sweet-dogs.jpg" id="ladybug_ant">
</div>
$("#imgID").imgAreaSelect({
parent: "#imgParentDivID",
aspectRatio: '1:1',
handles: true,
fadeSpeed: 200,
selectionOpacity: 1,
onSelectChange: preview
});
I hope this will help you.
you have used script tag for the css link. Use "link" tag instead of "script" tag also i.e use
<link rel="stylesheet" type="text/css" href="http://odyniec.net/projects/imgareaselect/css/imgareaselect-animated.css"/>
instead of
<script src="http://odyniec.net/projects/imgareaselect/css/imgareaselect-animated.css"></script>
this will solve the issue without any further changes.