Here I have a code:
<script>
$(function() {
$( "#photo" ).resizable();
$( "#photo" ).draggable({revert: 'invalid'});
$( "#left" ).droppable({
accept: '#photo',
drop: function( event, ui ) {
$( this )
.find( "p" )
.html( "Dropped!" );
}
});
});
</script>
and this code I must run after full loading google maps, so I need to "hook up" tilesloaded event for this code.
http://jsbin.com/ayugun/7/edit
But how to do that?
Here is the code
google.maps.event.addListener(map, 'tilesloaded', function() {
doWhatYouWant();
});
Related
I have a page with a side panel that swipes open. I would like the scroll position to remain in the same place, when this panel is swiped open. Currently, it snaps to the top. My below code is not working. Any advice?
var storePosition = {
topCoordinate : null
}
$(document).ready(function(){
/////////////////////// JQUERY MOBILE SWIPING (Scroll position) //////////////////////
$( "#B" ).panel({
beforeopen: function( event ) {
storePosition.topCoordinate = $(this).offset().top;
$( "body [data-role=page]" ).css("position","fixed");
}
});
$( "#B" ).panel({
beforeclose: function( event ) {
$( "body [data-role=page]" ).css("position","");
if($.mobile.activePage.attr("id") == "page" && storePosition.topCoordinate !== 0){
$('html, body').animate({
scrollTop: $("#A").position().top += storePosition.topCoordinate - 60}, 10);
}
}
});
////////////////////// SIDE PANEL //////////////////////
$('#open').click(function(){
if($('#B').width() > 0){
$('#B').animate({width: '0px'}),
$( ".container" ).removeClass( "no-scroll" ).animate({right: '200px'});
}
else{
$('#B').animate({width: '200px'}),
$( ".container" ).addClass( "no-scroll" ).animate({right: '200px'});
}
});
$('#close').click(function(){
$('#B').animate({width:"0px"}),
$( ".container" ).removeClass( "no-scroll" ).animate({right: '0px'});
});
$("body").on("swipeleft",function(){
$('#B').animate({width:"200px"}),
$( ".container" ).addClass( "no-scroll" ).animate({right: '200px'});
});
$("#B").on("swiperight",function(){
$(this).animate({width:"0px"}),
$( ".container" ).removeClass( "no-scroll" ).animate({right: '0px'});
});
Here's the fiddle.
Note: The function of the panel is to push the content of the page to the left, when opened. It should be scrollable, but the content of the page should not be. This panel can also be opened/closed with a toggle button on the page.
It turns out, the answer was pretty simple.
Adding height:100vh to the wrapper is what made the page jump, upon opening the panel. I added that to prevent to content from being scrollable. But, I discovered that if I put overflow:hidden on the body instead of the wrapper, it would prevent scrolling. So, I could eliminate height:100vh and all that "scroll position" jargon all together.
Here is the fix.
/////////////////////// SEARCH TOGGLE //////////////////////
$('#open').click(function(){
if($('#B').width() > 0){
$('#B').animate({width: '0px'}),
$( ".container" ).animate({right: '200px'});
$( "body" ).removeClass( "no-scroll" );
}
else{
$('#B').animate({width: '200px'}),
$( ".container" ).animate({right: '200px'});
$( "body" ).addClass( "no-scroll" );
}
});
$('#close').click(function(){
$('#B').animate({width:"0px"}),
$( ".container" ).animate({right: '0px'});
$( "body" ).removeClass( "no-scroll" );
});
$("body").on("swipeleft",function(){
$('#B').animate({width:"200px"}),
$( ".container" ).animate({right: '200px'});
$( "body" ).addClass( "no-scroll" );
});
$("#B").on("swiperight",function(){
$(this).animate({width:"0px"}),
$( ".container" ).animate({right: '0px'});
$( "body" ).removeClass( "no-scroll" );
});
I'm trying to create a situation where it is possible to drag and clone a div inside another div multiple times, this div in the specific container has tot be sortable with the other ones.
$(function() {
$( ".drag" ).each(function(){
$(this).draggable({
helper: "clone"
});
});
$( ".day " ).droppable({
drop: function( event, ui ) {
var targetElem = $(this).attr("id");
$( this ).addClass( "" );
if($(ui.draggable).hasClass('draggable-source'))
$( ui.draggable ).clone().appendTo( this ).removeClass('draggable-source');
else
$( ui.draggable ).appendTo( this );
console.log(this.id)
}
}).sortable({
items: "div",
sort: function() {
$( this ).removeClass( "ui-state-default" );
}
});
});
This is working in this fiddle:
http://jsfiddle.net/mfUCe/
This is where i got stuck:
I want to be able to drag the 2 divs in to the divs that are already inside of the droppable containers.
it would be great if anybody could help me
Im using a jQuery UI button and I want to point it to specific url.
How is that possible?
<button>Button</button>
<script>
$(function() {
$( "input[type=submit], button" )
.button()
.click(function( event ) {
event.preventDefault();
});
});
</script>
Html:
<button id="btYourButton">Button</button>
Javascript:
<script>
$(function() {
$( "#btYourButton" ).button().click(function( event ) {
window.location = "http://google.com"
});
});
</script>
I'm beginer to js and jquery and I need a little help if someone can help me...
What I want to do?
I want to drag div from sidebar to table. In sidebar div must be only draggable to table. When I drag div to table, there in table, div must be resizable and draggable again.
Photo:
I was try with this code but dont work well:
$(function() {
$( ".draggable" ).resizable();
$( ".draggable" ).draggable({revert: 'invalid', helper:'clone', snap: "#drop_here td", opacity: 0.7});
$( "#drop_here td" ).droppable({
accept: '.draggable',
drop: function( event, ui ) {
$( this )
.find( "p" )
.html( "Dropped!" );
}
});
});
DEMO and SOURCE code: http://jsbin.com/erofot/17/edit | http://jsbin.com/erofot/17
Here is how you could do it then: (replace what you have in jsbin with this code)
jsbin
$(function() {
//$( ".draggable" ).resizable();
$( ".draggable" ).draggable({
revert: 'invalid',
helper:"clone",
snap: "#drop_here td",
opacity: 0.7
});
$( "#drop_here td" ).droppable({
// accept only from left div,
// this is necessary to prevent clones duplicating inside droppable
accept: '#left .draggable',
drop: function( event, ui ) {
// 4 append clone to droppable
$( this ).append(
// 1 clone draggable helper
$(ui.helper).clone()
// 2 make the clone draggable
.draggable({containment:"parent"})
// 3 make the clone resizable
.resizable());
}
});
});
I've just started using jQuery UI to drag divs into a columns in a table. I have a couple different draggable divs with different background-colors and text inside them, and I need them to be able to dragged up to the drop area as a clone. This worked fine by using jQuery UI's example shopping cart code, but I've edited it so the whole object is dragged instead of just the text, but this then eliminates the clone functionality for some reason, even though I have helper:clone.
Here is my code:
<script>
$(function() {
$( "ul li" ).draggable({
appendTo: "body",
helper: "clone"});
$( ".day #drag" ).draggable({
appendTo: "body"});
$( ".day" ).droppable({
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
accept: ":not(.ui-sortable-helper)",
drop: function( event, ui ) {
var targetElem = $(this).attr("id");
$( this ).addClass( "ui-state-highlight" );
$( ui.draggable ).appendTo( this );
}
}).sortable({
items: "li:not(.placeholder)",
sort: function() {
$( this ).removeClass( "ui-state-default" );
}
});
});
</script>
Example column:
<td>
<div id="monday" class="day monday ui-widget-content"></div>
</td>
Draggable element:
<li><div style="background-color:#<?=$bgColor?>;color:<?=$textColor?>;" id="drag" class="<?=$subject?>"><?=$row['name']?></div></li>
It's essentially a timetable setup tool. Thank you for the help
Here is a jsFiddle for reference: http://jsfiddle.net/x5T4h/
Not sure that it is exactly what you want, but here is a good start for your : http://jsfiddle.net/x5T4h/2/
Basically, I removed the second draggable object declaration, and I added clone function to duplicate your element inside drop event $( ui.draggable ).clone().appendTo( this );
$(function() {
$( "ul li" ).each(function(){
$(this).draggable({
helper: "clone"
});
});
$( ".day" ).droppable({
activeClass: "ui-state-hover",
hoverClass: "ui-state-active",
accept: ":not(.ui-sortable-helper)",
drop: function( event, ui ) {
var targetElem = $(this).attr("id");
$( ui.draggable ).clone().appendTo( this );
}
}).sortable({
items: "li:not(.placeholder)",
sort: function() {
$( this ).removeClass( "ui-state-default" );
}
});
});