jquery ui - undefined is not a function on dialog - javascript

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

Related

My responsive menu gets gliched

I am working on my responsive menu that will be on desktop view a normal horizontal menu, but when the screen is smaller than 992px a hamburger style button will appear which will toggle a push-in side menu.
The problem i am facing is that the menu glitches when resizing the window aka switching between desktop and mobile view.
Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Menu</title>
<meta charset="utf-8">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
my css:
#media screen and (min-width: 992px) {
}
and my js:
$(document).ready(function(){
$('#mobile-icon').click(function(){
$(this).toggleClass('closed');
});
$('.expander-icon').click(function(){
$(this).parent().toggleClass('active-menu');
});
});
$(window).on('load resize', function () {
var screenWidth = $( window ).width();
if(screenWidth < 992){
$('.u').addClass('isMobile');
$('#icon').click(function(){
$(this).toggleClass("open closed");
if($( "#con" ).hasClass( "open" )){
$('.gation').css('margin-left',"0");
}
else{
$('.asdn').css('margin-left',"-70%");
}
});
}
});
Simplify your JS, move everything you can to CSS. Instead of modifying margin left in JS do it in CSS, and whenever you toggle class open on mr-mobile-icon, toggle it also on mr-navigation. Your $(window).on('load resize', ... ); is unnecessary. Just remove it, let CSS do everything for you.
CSS:
#media screen and (max-width: 991px) {
.mr-navigation {
// style
margin-left: -70%;
}
.mr-navigation.opened {
margin-left: 0;
}
}
JS:
$('#mr-mobile-icon').click(function(){
$(this).toggleClass('open');
$('.mr-navigation').toggleClass('open');
});
I don't know if I fully understand what you're trying to do here but the first issue I see is that you're adding a click event to mr-mobile-icon constantly while while the window is resized. These click events don't erase existing click events, they stack. After the window has resized, you might have hundreds of click events on mr-mobile-icon, all telling the browser to change css attributes.
You'll want to remove the click event assignment from the window resize and load event and just use the one you've already got in the document.ready. If you scope the screenWidth variable to be globally-accessible, you can use it inside your click function.
Here's a basic example of what I'm suggesting, with your other code removed:
var screenWidth = $( window ).width();
$(document).ready(function(){
$('#mr-mobile-icon').click(function(){
if(screenWidth < 992) {
// do whatever needs to happen for mobile
} else {
// do whatever needs to happen for desktop
}
});
});
$(window).on('resize', function () {
screenWidth = $( window ).width();
});

Simple javascript change image not working

I want to change an image's src on click of a link. I got a javascript snippet and tried to integrate it but it doesn't work.Im
Here's my HTML:
<html>
<head>
<meta charset="utf-8">
<link href="styles/main.css" rel="stylesheet" type="text/css">
</head>
<body>
<script src="styles/script.js"></script>
<img id="bgimage" src="images/1.jpg"/>
<nav id="nav">A | B |
</nav>
</body>
</html>
Here is my script.js:
var imageId = document.getElementById("bgimage");
function changeImage() {
if (imageId.src == "images/1.jpg")
{
imageId.setAttribute("src","images/2.jpg");
}
else
{
imageId.setAttribute("Src","images/1.jpg");
}
}
This issue is occurring because the script appears in the html before the <img> element. Therefore, the code tries to find the img element, but it can't because the js code executes before the rest of the html is parsed. Correct it by putting the js include tag just before </body>:
<html>
<head>
<meta charset="utf-8">
<link href="styles/main.css" rel="stylesheet" type="text/css">
</head>
<body>
<img id="bgimage" src="images/1.jpg"/>
<nav id="nav">A | B |
</nav>
<script src="styles/script.js"></script>
</body>
</html>
Or, you might want to use DOMContentLoaded to wait until the html has been parsed. Change the js to this, in that case:
var changeImage;
document.addEventListener('DOMContentLoaded',function(){
var imageId = document.getElementById("bgimage");
changeImage=function() {
if (imageId.src == "images/1.jpg")
{
imageId.setAttribute("src","images/2.jpg");
}
else
{
imageId.setAttribute("Src","images/1.jpg");
}
}
},false);
Or you could call document.getElementById() every time changeImage is called
You must place your script just before </body>, or run it at onload.
If not, you run
var imageId = document.getElementById("bgimage");
before loading the image to the DOM, so imageId is null.
Anyway, you could improve your function to
var images = ["images/1.jpg", "images/2.jpg" /*, ... */];
function changeImage() {
imageId.src = images[(images.indexOf(imageId.src)+1) % images.length];
}

jQuery context is null + IE bug not showing contact/bio boxes

I found an open-source code that was perfect for my husbands website. I changed it to our liking, but it keeps giving an annoying error in the console:
Unable to get property "ownerDocument" of undefined of null reference.
In Firefox it says simply: TypeError: context is null
the error is supposedly here: jquery-1.10.2.js, line 1822 character 2
Sizzle.contains = function( context, elem ) {
// Set document vars if needed
if ( ( context.ownerDocument || context ) !== document ) {
setDocument( context );
}
return contains( context, elem );
};
I think I am doing something wrong in my code, but I can't seem to say where.
Also there is a weird IE error: The contact and bio page dissappear, when I open the menu, it is there, but it only comes foreward when I select that part of the page, and then it dissappears. I don't know if it is anything to do with the above error.
It works fine on Safari, Firefox, Chrome, but most of the visitors use IE.
HTML CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Franklin Cando - Photographe</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="description" content="Franklin Cando - Photographe" />
<meta name="keywords" content=""/>
<!--I added this as a test, since I saw somewhere that this could help-->
<meta http-equiv="X-UA-Compatible" content="IE=10" />
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<meta http-equiv="X-UA-Compatible" content="IE=6" />
<link rel="shortcut icon" href="/images/icons/favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<script src="js/jquery-1.10.2.js" type="text/javascript"></script>
<script src="js/cufon-yui.js" type="text/javascript"></script>
<script src="js/Quicksand_Book_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('span,p,h1',{
textShadow: '0px 0px 1px #ffffff'
});
</script>
<script type="text/javascript">
(function(i,s,o,g,r,a,m)
{
i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},
i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)0];
a.async=1;
a.src=g;
m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-
analytics.com/analytics.js','ga');
ga('create', 'UA-44223947-1', 'franklincando.com');
ga('send', 'pageview');
</script>
</head>
<body>
<div id="st_main" class="st_main">
<img src="images/album/AK9A4519.jpg" alt="" class="st_preview" id="bigImage"
style="display:none;"/>
<div class="st_overlay"></div>
<h1>
<a class="titelLink" href="http://www.franklincando.com/">Franklin Cando</a>
</h1>
<div id="st_loading" class="st_loading"><span>Loading...</span></div>
<ul id="st_nav" class="st_navigation">
<li>
<span class="st_link">Biographie<span class="st_arrow_down"></span></span>
<div class="st_about st_thumbs_wrapper">
<div class="st_subcontent">
<table>
<!--CONTENT-->
</table>
</div>
</div>
</li>
<li>
<span class="st_link">Contact<span class="st_arrow_down"></span></span>
<div class="st_about st_thumbs_wrapper" id="form_div_parent">
<div class="st_subcontent" id="form_div_child">
<div class="contactinfo" id="contactinfo_div">
<h3>Contact</h3><br/>
<!--CONTENT-->
<form id="contactForm" method="post" action="php/send_form.php" >
<!--CONTENT-->
<input class="button" type="button" onclick="validateForm()"
value="Envoyer"/>
<input class="button" type="reset" onclick="resetForm()"
value="Effacer"/>
</form>
</div>
</div>
</li>
<li class="album">
<span class="st_link">Photos<span class="st_arrow_down"></span></span>
<div class="st_wrapper st_thumbs_wrapper" id="wrapper">
<div class="st_thumbs" id="thumbs">
<!--IMAGES-->
</div>
</div>
</li>
</ul>
</div>
</body>
</html>
JQUERY-JS
<script type="text/javascript">
$(document).ready(function() {
//the loading image
var $loader = $('#st_loading');
//the ul element
var $list = $('#st_nav');
//the current image being shown
var $currImage = $('#st_main').children('img:first');
//the facebook button - iris
var $fb = $('#fb');
$fb.hide();
//let's load the current image and just then display the navigation menu
$('<img>').load(function(){
$loader.hide();
if ($currImage.width() > $currImage.height()){
$currImage.css({"width":"100%"});
}
$currImage.fadeIn(3000);
//slide out the menu
setTimeout(function(){
$list.animate({'left':'0px'},500);
$fb.show();
},1000);
}).attr('src',$currImage.attr('src'));
//calculates the width of the div element where the thumbs are going to be
displayed
buildThumbs();
function buildThumbs(){
$list.children('li.album').each(function(){
var $elem = $(this);
var $thumbs_wrapper = $elem.find('.st_thumbs_wrapper');
var $thumbs = $thumbs_wrapper.children(':first');
//each thumb has 180px and we add 3 of margin
var finalW = $thumbs.find('img').length * 183;
$thumbs.css('width',finalW + 'px');
//make this element scrollable
makeScrollable($thumbs_wrapper,$thumbs);
});
}
//clicking on the menu items (up and down arrow)
//makes the thumbs div appear, and hides the current opened menu (if any)
$(document).on('click','.st_arrow_down',function(){
var $this = $(this);
hideThumbs();
$this.addClass('st_arrow_up').removeClass('st_arrow_down');
var $elem = $this.closest('li');
$elem.addClass('current').animate({'height':'170px'},200);
var $thumbs_wrapper = $this.parent().next();
$thumbs_wrapper.show();
});
$(document).on('click','.st_arrow_up',function(){
var $this = $(this);
$this.addClass('st_arrow_down').removeClass('st_arrow_up');
hideThumbs();
});
//clicking on a thumb, replaces the large image
$(document).on('click','.st_thumbs img',function(){
var $this = $(this);
$loader.show();
$('<img class="st_preview"/>').load(function(){
var $this = $(this);
var $currImage = $('#st_main').children('img:first');
$this.insertBefore($currImage);
if ($this.width() > $this.height()){
$this.css({"width":"100%"});
}
$loader.hide();
$currImage.fadeOut(2000,function(){
$(this).remove();
});
}).attr('src',$this.attr('alt'));
}).bind('mouseenter',function(){
$(this).stop().animate({'opacity':'1'});
}).bind('mouseleave',function(){
$(this).stop().animate({'opacity':'0.7'});
});
//hide image menu upon mouse out - iris
$list.find('.st_thumbs').bind('mouseleave',function(){
hideThumbs();
});
//function to hide the current opened menu //.css({"display":"none"}) // to hide
the bigger text boxes - iris
function hideThumbs(){
$list.find('li.current').animate({'height':'50px'},400,
function(){
$(this).removeClass('current');
})
.find('.st_thumbs_wrapper')
.hide()
.andSelf()
.find('.st_link span')
.addClass('st_arrow_down')
.removeClass('st_arrow_up');
}
//makes the thumbs div scrollable on mouse move the div scrolls automatically
function makeScrollable($outer, $inner){
var extra = 800;
//Get menu width
var divWidth = $outer.width();
//Remove scrollbars
$outer.css({overflow:'hidden'});
//Find last image in container
var lastElem = $inner.find('img:last');
$outer.scrollLeft(0);
//When user move mouse over menu
$outer.unbind('mousemove').bind('mousemove',function(e){
var containerWidth = lastElem[0].offsetLeft
+ lastElem.outerWidth() + 2*extra;
var left = (e.pageX - $outer.offset().left)
* (containerWidth-divWidth) / divWidth -
extra;
$outer.scrollLeft(left);
});
}
});
</script>
The website: www.franklincando.com
PS: really sorry about indentation. I spent a lot of time making it right in this post, and upon posting it still doesn't look like it is supposed to. I hope it is still clear.
The issue is here:
$(document)
/* ... */
.bind('mouseenter',function(){
$(this).stop().animate({'opacity':'1'});
}).bind('mouseleave',function(){
$(this).stop().animate({'opacity':'0.7'});
});
In this case, this is the document. You can't animate the opacity of the document. Change it to body instead and it should be fine.
$("body").bind('mouseenter',function(){
$(this).stop().animate({'opacity':'1'});
}).bind('mouseleave',function(){
$(this).stop().animate({'opacity':'0.7'});
});
I ended up rebuilding the project. The base code I was using was for an older version of jQuery and I added the newest libraries. I think the code clashed on that. Working fine now.

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