I'm having an interesting problem with an assignment for my class, we're supposed to have a jQuery-UI Modal Dialog box appear when the user clicks on a Google Map.
In my first example I have the jQuery-UI Modal Dialog box working just fine on the same page as the map.
http://ymartino.userworld.com/map-practice3a.html
However in my second example when I try to integrate it into the map itself the Modal div appears but Dialog box does not.
http://ymartino.userworld.com/map-practice3b.html
Edit
I suspect the issue is that something may simply be not in the proper order.
Here's an example to show how it's done.
I've kept some of the elements of your attempt (like onload="initialize()" which I would be inclined to replace with $.ready()) for ease of understanding. I've also stripped out some functionality that you'll likely need for your assignment, but that should be easy to restore if you understand your code.
Hopefully you can grok what's going on and then apply your understanding to your assignment. Good luck!
<body onload="initialize()">
<script type="text/javascript">
function initialize() {
var location = new google.maps.LatLng(37.437412,-122.15641);
var myOptions = {
zoom:13,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: location
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
google.maps.event.addListener(map, 'click', function(event) {
var $dialog = $("#dialog").dialog({
autoOpen: false,
title: 'Dialog Title',
modal: true
});
$dialog.dialog('open');
});
}
</script>
<div id="dialog"></div>
<div id="map_canvas" style="border: 1px solid black; position:absolute; width:398px; height:398px"></div>
</body>
Related
I am using leaflet markers in my ASP.NET MVC 5 application.
I need to drag marker outside application to a div element, where I want to get its id to perform further operations.
marker=new L.marker([latNumber,longNumber], {draggable:'true'});
marker.id = "ABC";
$('#'+ marker.id).draggable(); // draggable jquery UI
marker.on('dragend', function(event){
var marker = event.target;
var position = marker.getLatLng();
console.log(position);
marker.setLatLng(position,{draggable:'true'}).bindPopup(position).update();
});
On the other hand I am using droppable element of jquery UI
$("#navs").droppable({
drop: function (event, ui) {
alert('dropped')
}
});
I do not get dropped event on navs element when I drop it over it. What changes I need to do to make it work.
If someone can further explain this, it would be of great help too.
Actually, there seems to be a workaround. Leaflet markers calls an event "add" after the marker is added to the map, and becomes visible. In that event you can initialize a draggable on the icon corresponding to that marker.
m=L.marker([lat,lng],{
title:title,
draggable:true
});
m.on("add",function(){
$(this._icon).data("marker",this);
$(this._icon).draggable({
appendTo:"body",
helper:"clone",
zIndex:1000
});
});
"appendTo" is required for dragging outside of leaflet panel. zIndex should be higher than leaflet map zIndex (not sure if it's fixed, it's 600 on my page). Probably, you will need a helper function for copying an icon, I've customized my helper (marker is accessible via data "marker").
I've used that with leaflet 1.0.3.
You can't drag a Leaflet marker outside the map.
The draggable option of a marker and the draggable concept of jQuery are completely different.
That beeing said, you can pretend a marker is dragged by using the image of the marker an place it above the map: it is not part of the map, but it looks like (that is what the link you mention is referring to)
<div>
<div id='map'></div>
<img style="position: absolute; left: 300px; top: 200px; z-index: 1000" id="fakeMarker" src="https://unpkg.com/leaflet#1.0.1/dist/images/marker-icon.png"></img>
</div>
<ul id="liste">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
<div id="log"></div>
<script>
$( function() {
$("#fakeMarker").draggable();
$( "#liste li" ).droppable({
accept: "#fakeMarker",
drop: function( event, ui ) {
$( "#log" ).html("dropped on " + $(this).html());
}
});
} );
</script>
Here is an example: https://yafred.github.io/leaflet-tests/20161120-drag-and-drop-outside-map/
I have tried to get a dialog (#dialog) stay inside a container div (#dialogContainer), i.e. I don't want it to be possible to drag the dialog outside the boundaries of the container div in the ui, but no success. I thought that the "appendTo" setting would fix this, but not. Any help is appreciated!
Here is an example that shows that it is indeed possible:
https://jqueryui.com/dialog
Code:
<div id="dialogContainer" style="width:600px;height:500px;border:1px solid blue;"></div>
<div id="dialog" title="Dialog Title">
This is dialog content.
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#dialog").dialog({
position: {
my: 'left top',
at: 'left',
of: $('#dialogContainer')
},
draggable: true,
appendTo: "#dialogContainer",
modal:true
});
});
</script>
You can use the following code to restrict the dialog so it can't be dragged outside a container:
$("#dialog").dialog({
...
})
.parent().draggable({
containment: '#dialogContainer'
});
See here for a Fiddle.
I have 2 div one to load data from an ajax request and another to display Jquery dialog with gif image which says loading.
The jquery dialog is displayed when the page is requested while the ajax function gets the data from the controller. I want to close the dialog when the ajax function completes the request but not sure hot to do it.
here is the code
Page
<style>
.ui-dialog-titlebar-close{
display: none;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
//define config object
var dialogOpts = {
title:"Retreving Donation Details",
modal: true,
autoOpen: true,
height: 200,
width: 250,
closeOnEscape: false,
resizable: false,
};
$("#ajaxload").dialog(dialogOpts); //end dialog
$("#ajaxload").dialog("open");
});
</script>
//jquery dialog
<div id = "ajaxload" style ="display:none; background-color:Green; text-align:center;">
<br />
<img alt="loader" src = "../../Content/loader.gif" id = "loader" height="100" width ="100" style = "margin:auto; text-align:center; vertical-align:middle;" />
</div>
//Div to load data
<div id="dataload"><div>
Thanks in advance
You can close it when the ajax requests stop using the ajaxStop event, like this:
$(document).ajaxStop(function() {
$("#ajaxload").dialog("close");
});
When all concurrent jQuery AJAX requests finish, this event fires, and you can hide the dialog then. Another (same effect) format is to bind the event directly, like this:
$("#ajaxload").ajaxStop(function() {
$(this).dialog("close");
});
On lots of sites now, you can see a Facebook "Like" Button.
- When depressed, it changes background color.
- When mouse-overed, it allows you to write some additional text
I love this interface - lightweight action, but allow for expression of more data if the user wants to.
Anyone has written a similar plugin?
UPDATE:
See: http://www.engadget.com/2010/05/30/htc-evo-4g-gets-hacked-froyo-port-sense-ui-be-damned/ at the bottom of a post, you will see the facebook like button
I don't know of such a plugin for jQuery, but writing the user-interface is quite simple.
(Edit: Actually I just thought of a place where I could use this feature myself. I might just as well write a proper plugin based on this next week if I have the time, and edit it here. For the time being, below is what I originally posted...)
All you need is a couple of divs:
<div id="thebutton">Click me!</div>
<div id="thebox" style="display:none;">Content goes here</div>
And some jQuery:
<script type="text/javascript">
$(function () {
$('#thebutton')
.click(function () {
//Show/hide the box
$(this).toggleClass('activated');
$(this).hasClass('activated') ? $('#thebox').fadeIn() : $('#thebox').fadeOut();
})
.mouseenter(function () {
//If the button is .activated, cancel any delayed hide and display the box
$(this).addClass('hovering');
if ($(this).hasClass('activated')) {
$('#thebox').clearQueue().fadeIn();
}
})
.mouseleave(function () {
//Hide the box after 300 milliseconds (unless someone cancels the action)
$(this).removeClass('hovering');
$('#thebox').delay(300).fadeOut();
});
$('#thebox')
//When hovering onto the box, cancel any delayed hide operations
.mouseenter(function () { $(this).clearQueue(); })
//When hovering off from the box, wait for 300 milliseconds and hide the box (unless cancelled)
.mouseleave(function () { $(this).delay(300).fadeOut(); });
});
</script>
The rest is pretty much just CSS for #thebutton, #thebox, .hovering and .activated.
Here's a spartan look I used while writing this:
<style type="text/css">
#thebutton { width: 100px; background-color: #eee; text-align: center; padding: 10px; cursor: pointer; }
#thebutton.activated { font-weight: bold; }
#thebutton.hovering { color: Blue; }
#thebox { background-color: #eee; position:relative; width: 300px; height: 200px; padding: 10px; top: 5px; display: none;}
</style>
How about this jquery plugin: http://socialmediaautomat.com/jquery-fbjlike-js.php
It's really simple to set up and lets you perform some neat tasks in combination with the jquery cookie plugin (have a look at the demo page).
You can handle the hover, mousedown, and mouseup events and change the button's content or style.
Is not a plugin it uses the Facebook Javascript SDK. You load it by placing this at bottom of your document:
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
Add this attribute to your HTML tag(the actual HTML tag right after the DOCTYPE):
xmlns:fb="http://www.facebook.com/2008/fbml"
And then you can place this snippet wherever you want a Like button:
<fb:like></fb:like>
Using the $('#your-button').button(); function from the jQuery UI library gives this functionality, and a whole lot more.
http://jqueryui.com/themeroller/
I am using Jquery UI tabs, and have it set to toggle the opacity with each slide change. I'm wondering if there's a way to apply the opacity toggle to only a single element within each tab, instead of the entire tab. My understanding of jQuery is pretty basic, so bear with me.
So, If I have something like this:
<div id="tabs">
<ul id="tabs-nav><li></li></ul>
<div id="tab-1">
<img />
<p />
</div>
<div id="tab-2">
<img />
<p />
</div>
...etc
</div>
How could I set it so that only the <img> has an effect applied, and the rest just switches normally?
Here are the basics of the call I have for UI tabs:
var $tabs = $('#slides').tabs({fx: { opacity: 'toggle' } });
$(".ui-tabs-panel").each(function(i){
//stuff to create previous/next links
});
$('.next-tab, .prev-tab').click(function() {
$tabs.tabs('select', $(this).attr("rel"));
return false;
});
UPDATE: So this is what I ended up with based on karim79's suggestions, and it seems to work. I added this after the original code I showed above (and removed {fx: { opacity: 'toggle' } } from my original code):
$( "#slides" ).bind( "tabsselect", function(event, ui) {
$(ui.panel).find("img").fadeOut().fadeIn();
});
I'm going to explain my logic, because like I said, my understanding is basic, so I'd love to know if my rationale is off!
I removed karim79's coniditional statement, because I want this to apply to ALL of the tabs. Am I correct in understanding that an if(ui.index == 2) would only apply to the third tab?
Then, I changed the .css("opacity", 0.6) to .fadeOut().fadeIn() because the .css opacity was only succeeding in making all of the slides semi-transparent, but not fading anything in or out.
Would this be an acceptable way of doing this or is it somehow hackish?
This should do it:
$( ".selector" ).bind( "tabsselect", function(event, ui) {
if(ui.index == 2) { // or whatever index you're interested in
$(ui.panel).find("img").css("opacity", 0.6);
}
});