ImgAreaSelect in jquery - javascript

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.

Related

Adding a click function to a image element

I am trying to add 2 simple click functions to 2 images and make them "active" when clicked, however for some reason the code is not working.
This is the link to the external file:
<head>
<link href="bootstrap.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="jquery.leanModal.min.js"></script>
<script type="text/javascript" src="likeandshare.js"></script>
<link type="text/css" rel="stylesheet" href="blogformat.css" />
<script type="text/javascript" src="likeandshare.js"></script>
</head>
This is the html:
<div class="blog-header">
<h1>This heading should be center aligned and colored</h1>
<p>Italised date and Author entered here</p>
<div id="facebook-like-button">
<img src="images/facebook_like_button_big.jpeg">
</div>
<div id="facebook-share-button">
<img src="images/facebook-share.png">
</div>
</div>
This is the js code:
$(document).ready(main);
var like = function() {
$("#facebook-like-button").click(function() {
$(this).toggleClass("active");
});
};
I'm not sure why the div is not becoming active when clicked but I would also like to attach the function ONLY to the image, rather than the entire div.
Help :D
thanks.
As far as I'm aware, your code should be working. You must be incorrectly calling the ready function.
working example http://jsfiddle.net/2j0s1j8v/3/
All of these events fire back:
share = document.getElementById("facebook-share-button");
share.onclick = function(){
console.log("ONCLICK");
}
share.addEventListener("click", function(){ console.log("CLICK LISTENER"); } );
$("#facebook-share-button").click(function() {
console.log("JQUERY CLICK");
});
Check the console and look at the messages. All of them fire properly. f12 on chrome.
You can simply do this :
$(document).ready(function(){
$("#facebook-like-button").find('img').click(function() {
$(this).toggleClass("active");
});
});
first include jquery
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="likeandshare.js"></script>
</head>
second you create a like function and use main function .. you have a main function also or bad typo or what anyway in your case it should be
$(document).ready(like);
if you want to select an image inside the div just use > a >img
var like = function() {
$("#facebook-like-button > a > img").click(function() {
$(this).toggleClass("active");
});
};
https://jsfiddle.net/2j0s1j8v/4/
Like button
$("#facebook-like-button img").click(function () {
$(this).toggleClass("active");
});
Share button
$("#facebook-share-button img").click(function () {
$(this).toggleClass("active");
});
Here is a working example if I understand correctly what you wanted.
adds active class to the image on click.
EDIT: added share as well

Simple JQuery script animate not working

So i created a simple html page :
index.html file:
<html>
<head>
</head>
<body>
<div class="menu">
hello
</div>
<div class="test">
Menu
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="app.js"></script>
</body>
</html>
here is the app.js file:
var main = function() {
$('.test').click(function(){
$('body').animate({
left: '500px'
},200);
})
}
$(document).ready(main)
I'm trying to understand what i did wrong , it seems like it should work..
was also tried to download jquery-2.1.1.min.js and to work with it , but still while clicking on the menu , the text is not moving ..
You need to set position css property to body in order to work left.
body{
position:relative;
}
REF : http://api.jquery.com/animate/

html code wont show up after loading a html page with jquery

EDIT: How can I extend/edit "appended content" ?
I mean, If I have a div named "website" at "include.html" (the file which I appended using jquerys load) , Can I add text / code to that DIV after appending it?
I have a simple HTML menu page which Im trying to load to every page in my website.
Sorry if its a noob question ;) kinda noob with Jquery/js/html.
Here's one of the files:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="cstyles.css">
<script type='text/javascript' src='jquery-1.9.1.js'></script>
<script type='text/javascript' src='menu2.js'></script>
<script type='text/javascript' src='menu_load.js'></script>
</head>
<body>
<script>
loadContent();
$(document).on('mouseenter', "#menulist", function() {
mainmenu();
});
</script>
<div id="contact_us" style="background:blue;">Something</div>
</body>
</html>
Heres menu2.js:
function mainmenu() {
$(" #menulist li").hover(function () {
$(this).find('ul:first').css({
visibility: "visible",
display: "none"
}).show(300);
}, function () {
$(this).find('ul:first').css({
visibility: "hidden"
});
});
}
$(document).ready(function () {
mainmenu();
});
heres menu_load.js:
function loadContent() {
$("body").load("include.html");
}
Problem is: After loading the menu successfully (the html file named INCLUDE.html), The content on the page "disappears"...
In this case, the word: something wont show up.
To be more clear, it will show up for a second and then will be replaced by the content on the "include.html" file.
Any suggestions?
thanks in advance!
This happens because the way $("#body").load() works. I would suggest changing that with
.prepend()
That's because you're loading the include.html file in the entire document. You should make a element with an id and load it there. For example
<div id="toload"></div>
Then your jquery function would be:
function loadContent() {
$("#toload").load("include.html");
}

Application requires a refresh to initialize

Creating a web mapping application in Javascript/Dojo:
When I load the app in a browser it loads the html elements but then stops processing. I have to refresh the browser to get it to load the rest of the page and the javascript.
I have done testing and debugging all day and figured out I had my external JS files in the wrong spot (I'm a rookie). Fixed that and the app loads great...EXCEPT one of my files isn't getting read correctly, or at all.
When I move the contents of the external JS file in question to the main code in the default, the functionality that they contain, work fine... BUT the map requires the refresh again.
Stumped. Below is the code in the external JS file that is causing my issue. I can't figure out why it is a problem because the functions work as expected when it is not external.
Any help is greatly appreciated.
//Toggles
function basemapToggle() {
basemaptoggler = new dojo.fx.Toggler({
node: "basemaptoggle",
showFunc : dojo.fx.wipeIn,
showDuration: 1000,
hideDuration: 1000,
hideFunc : dojo.fx.wipeOut
})
}
dojo.addOnLoad(basemapToggle);
function layerToggle() {
layertoggler = new dojo.fx.Toggler({
node: "layertoggle",
showFunc : dojo.fx.wipeIn,
showDuration: 750,
hideDuration: 750,
hideFunc : dojo.fx.wipeOut
})
}
dojo.addOnLoad(layerToggle);
function legendToggle() {
legendtoggler = new dojo.fx.Toggler({
node: "legendtoggle",
showFunc : dojo.fx.wipeIn,
hideFunc : dojo.fx.wipeOut
})
}
dojo.addOnLoad(legendToggle);
EDIT
Edited to show additional code. Genuinely stumped by this. Would love to get some feedback. I've tried moving it to the main file, reformatting the functions and all of those things work, except they require the refresh. I'm also losing some information on a refresh. Very odd behavior. Any good way to track this down?
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7, IE=8, IE=9" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<link rel="Stylesheet" href="ZoningClassifications.css" />
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.0/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.0/js/esri/dijit/css/Popup.css">
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.0/js/dojo/dojox/grid/resources/Grid.css">
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.0/js/dojo/dojox/grid/resources/claroGrid.css">
<style type="text/css">
</style>
<script src="JS/layers.js"></script>
<script src="JS/search.js"></script>
<script src="JS/basemapgallery.js"></script>
<script src="JS/toggles.js"></script>
<script src="JS/identify.js"></script>
<script type="text/javascript">
var djConfig = {
parseOnLoad: true
};
</script>
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.0"></script>
<script type="text/javascript">
dojo.require("dijit.dijit"); // optimize: load dijit layer
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("esri.map");
dojo.require("dijit.TitlePane");
dojo.require("esri.dijit.BasemapGallery");
dojo.require("esri.arcgis.utils");
dojo.require("esri.tasks.locator");
dojo.require("esri.dijit.Legend");
dojo.require("esri.dijit.Popup");
dojo.require("dijit.form.Button");
dojo.require("dojo.fx");
dojo.require("dijit.Dialog");
dojo.require("dojo.ready");
dojo.require("dijit.TooltipDialog");
dojo.require("dojox.grid.DataGrid");
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("esri.tasks.find");
var map, locator, layer, visible = [];
var legendLayers = [];
var resizeTimer;
var identifyTask,identifyParams;
var findTask, findParams;
var basemaptoggler = null;
var layertoggler = null;
var legendtoggler = null;
var findTaskParcel, findParamsParcel;
// var gridParcel, storeParcel;
EDIT 2
I've completely rewritten the app placing all the code (except the css) in the main default.html file. I tested piece by piece to make sure it functioned how I want. Adding the toggles code is the only code that throws it and causes the extra refresh.
So for now I am using dijit.TitlePane to hold the drop down elements (basemap gallery, layers, legend). However with this you can not change the look and feel to make them images, which is my end goal.
Can anybody suggest an alternative so I can use 3 different images so that when you click on the image and drop down menu opens holding the basemap gallery, layer list and legend?
EDIT 3
It'll probably help to show the code I use to call the toggle functions: I suspect this might be where my issues are.
<!--Legend-->
<div id="subheader">
<div style="position:absolute; right:60px; top:10px; z-Index:98;">
<div id="legendbutton">
<button dojoType="dijit.form.Button" baseClass="tomButton" title="Show Legend">
<img src="images/Legend.png" />
<script type="dojo/method" event="onClick">
legendtoggler[(dojo.style("legendtoggle","display") == "none") ? 'show':'hide']();
</script>
</button>
<div id="legendtoggle" dojoType="dijit.layout.ContentPane" style="border: 1px solid black; display: none">
<div id="legendDiv"></div>
</div>
</div>
<!--Layer Toggle-->
<div id="layerbutton">
<button dojoType="dijit.form.Button" baseClass="tomButton" border="0" title="Toggle Layers">
<img src="images/layers.png"/>
<script type="dojo/method" event="onClick">
layertoggler[(dojo.style("layertoggle","display") == "none") ? 'show':'hide']();
</script>
</button>
<div id="layertoggle" dojoType="dijit.layout.ContentPane" style="border: 1px solid black; display: none">
<span id="layer_list"><input type='checkbox' class='list_item' id='0' value=0 onclick='updateLayerVisibility();'
</span>
</div>
</div>
<!--Basemap Gallery-->
<div id="basemapbutton">
<button dojoType="dijit.form.Button" baseClass="tomButton" title="Switch Basemap">
<img src="images/imgBaseMap.png"/>
<script type="dojo/method" event="onClick">
</script>
</button>
<div id="basemaptoggle" dojoType="dijit.layout.ContentPane" style="#900;display: none;">
<span id="basemapGallery">
</span>
</div>
</div>
As a Workaround here is something similar I did:
http://www.martindueren.de/paperwriting/
The Icons on the right hand side of the app make dijit.TitlePanes wipe in and out. The effect used for this can be found on this page:
http://dojotoolkit.org/documentation/tutorials/1.8/effects/
The code for this would be something like this:
<button id="slideAwayButton">Slide block away</button>
<button id="slideBackButton">Slide block back</button>
<div id="slideTarget" class="red-block slide">
A red block
</div>
<script>
require(["dojo/fx", "dojo/on", "dojo/dom", "dojo/domReady!"], function(fx, on, dom) {
var slideAwayButton = dom.byId("slideAwayButton"),
slideBackButton = dom.byId("slideBackButton"),
slideTarget = dom.byId("slideTarget");
on(slideAwayButton, "click", function(evt){
fx.slideTo({ node: slideTarget, left: "200", top: "200" }).play();
});
on(slideBackButton, "click", function(evt){
fx.slideTo({ node: slideTarget, left: "0", top: "100" }).play();
});
});
</script>
Feel free to look at my source-code and copy stuff from it! If I understood you correctly this is exactly what you need too.
Quite the story youve put up here, its difficult to pinpoint, excactly what your issue is.. But since youre saying 'map need an extra refresh', then im guessing it could be due to the flow of things you call require for. Problem may very well be, that youre rolling out legacy loader code from a dojo-version which is AMD loader capeable.
Since i really havent run any esri components before, this is kind of a wild guess - but from my pov it could be worth a shot. Im sure google maps has an onload listener - and i suspect esri to follow this behavior.
Try initializing everything in your application before loading any esri modules, like such:
dojo.addOnLoad(function() {
basemapToggle();
layerToggle();
legendToggle();
dojo.require("esri.map");
dojo.require("esri.dijit.BasemapGallery");
dojo.require("esri.arcgis.utils");
dojo.require("esri.tasks.locator");
dojo.require("esri.dijit.Legend");
dojo.require("esri.dijit.Popup");
dojo.require("esri.tasks.find");
});
As goes for the effects youre looking for, personally i'd make use of dojo.animateProperty and combine it with dijit/TooltipDialog.
This http://jsfiddle.net/seeds/a8BBm/2/ shows how to 'hack' the onShow mechanizm, leaving optional effects possible in the opening animation. By default, DropDownButton simply fades in.
See http://livedocs.dojotoolkit.org/dijit/TooltipDialog#programmatic-example for alternate ways to popup the tooltipdialog - i.e. connecting dijit.popup to any click/mouseover event.

Swipe images in phoneap + jquery issue

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.

Categories

Resources