I am working a drag and drop project using jquery UI. In this project I have used two div.In the first div there are some element.I want to drag them so that I can drop them in the 2nd div.Besides I want to use the draggable element as droppable element so that I can drop another draggable elemen here.
Here the demo of the project...
Here the element are draggable.I want to drag Element-1 and drop it in the right side div so that Element-2 can also be dropped in the Element-1.
Here HTML body section ...
<div class="left-div">
<div class="dragElemnt" id=" draggable1">
<p>Element-1</p>
</div>
<div class="dragElemnt" id=" draggable2">
<p>Elemnet-2</p>
</div>
<div class="dragElemnt" id=" draggable3">
<p>Element-3</p>
</div>
</div>
<div id="droppable" class="right-div">
<p>Drop here</p>
</div>
Here script section...
$(function () {
$("#draggable1").draggable({
helper: "clone",
});
$("#draggable2").draggable({
helper: "clone",
});
$("#column").draggable({
helper: "clone",
});
$("#droppable").droppable({
drop: function (event, ui) {
var droppedItem = $(ui.draggable).clone();
$(this).append(droppedItem);
$("#draggable1").droppable({
drop: function (event, ui) {
var columnItem = $(ui.draggable).clone();
$(this).append(columnItem);
},
});
},
});
});
How can I solve it?
According to this Question: How to know the dragging element is over which element?
$('#droppableid').droppable({
over: function(event, ui) {
log('You are over item with id ' + this.id);
}
});
Related
I'm using PayPal JS SDK payment buttons where all you do is copy the code into your HTML site and the PayPal buttons appear to initiate a checkout.
This works for only one button on the page, but I have 3 subscriptions a user can choose from (daily, weekly, monthly)
If I copy the code into my daily div area it works correctly, but then if I copy the code into the weekly div it wont appear and only the daily div PayPal button appears. But if I remove the code from the daily div the button will appear under the weekly div.
It seems I can only use button code once?
I tried modifying the code by changing the id name and function names but still no luck.
Is there a way to have multiple PayPal on my page?
Here is the generated code from PayPal:
<div id="smart-button-container">
<div style="text-align: center;">
<div id="paypal-button-container"></div>
</div>
</div>
<script src="https://www.paypal.com/sdk/js?client-id=test¤cy=AUD" data-sdk-integration-source="button-factory"></script>
<script>
function initPayPalButton() {
paypal.Buttons({
style: {
shape: 'rect',
color: 'gold',
layout: 'vertical',
label: 'paypal',
},
createOrder: function(data, actions) {
return actions.order.create({
purchase_units: [{"description":"daily","amount":{"currency_code":"AUD","value":1}}]
});
},
onApprove: function(data, actions) {
return actions.order.capture().then(function(details) {
alert('Transaction completed by ' + details.payer.name.given_name + '!');
});
},
onError: function(err) {
console.log(err);
}
}).render('#paypal-button-container');
}
initPayPalButton();
</script>
<br><br><br>
<p> gefwdsa</p>
<div id="smart-button-container">
<div style="text-align: center;">
<div id="paypal-button-container"></div>
</div>
</div>
<script src="https://www.paypal.com/sdk/js?client-id=sb¤cy=AUD" data-sdk-integration-source="button-factory"></script>
<script>
function initPayPalButton() {
paypal.Buttons({
style: {
shape: 'rect',
color: 'gold',
layout: 'vertical',
label: 'paypal',
},
createOrder: function(data, actions) {
return actions.order.create({
purchase_units: [{"description":"weekly sub","amount":{"currency_code":"AUD","value":5}}]
});
},
onApprove: function(data, actions) {
return actions.order.capture().then(function(details) {
alert('Transaction completed by ' + details.payer.name.given_name + '!');
});
},
onError: function(err) {
console.log(err);
}
}).render('#paypal-button-container');
}
initPayPalButton();
</script>
This only makes the first button appear
The SDK script,
<script src="https://www.paypal.com/sdk/js?client-id=sb¤cy=AUD" data-sdk-integration-source="button-factory"></script>
Should only be loaded exactly once per page, above all the buttons.
Additionally, each button must render to a div with a unique HTML id, so this line:
<div id="paypal-button-container"></div>
And this line:
}).render('#paypal-button-container');
Both need some corresponding different/additional string suffix for each button, e.g. paypal-button-container-1 , -2 for the next buttons' etc.
Also client-id of test or sb is sandbox mode, you need a live client-id from the 'Live' section of an app in https://www.paypal.com/signin?intent=developer&returnUri=https%3A%2F%2Fdeveloper.paypal.com%2Fdeveloper%2Fapplications
When using Vue2Leaflet and the "l-map" component, is there a way to move the zoom-in/zoom-out buttons to another place than upper-left corner?
https://vue-leaflet.github.io/Vue2Leaflet/#/components/l-map/?id=props
https://i.stack.imgur.com/ITRFr.png
You need disable the default zoom controls first. Then add LControlZoom component with your preferred position. like-
<l-control-zoom position="bottomleft"></l-control-zoom>
HTML:
<template>
<l-map style="height: 350px" :zoom="zoom" :center="center" :options="{zoomControl: false}">
<l-tile-layer :url="url"></l-tile-layer>
<l-control-zoom position="bottomleft"></l-control-zoom>
</l-map>
in javaScript
<script>
import {LMap, LTileLayer, LControlZoom} from 'vue2-leaflet';
export default {
components: {
LMap,
LTileLayer,
LControlZoom
},
data () {
return {
url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
zoom: 8,
center: [47.313220, -1.319482],
};
}
}
</script>
Hope this helps. Read here vue2-leaflet documentation : https://vue2-leaflet.netlify.com/components/LControlZoom.html
i have developed aspx page
on it i have image galley using owl-carousel
now when i added magnific-popup plugin and used gallery option
then i noticed when i click on image on carousel it get popup successfully but images get duplicated (inside popup)
Owl-Carousel gallery
First popup
Duplicated Image
my aspx code :
<div class="owl-carousel">
<asp:ListView runat="server" ID="lvDesrtProgramGallery" ItemType="SharedKernel.Core.Model.ProgramPhoto" SelectMethod="lvDesrtProgramGallery_GetData">
<ItemTemplate>
<div class="item">
<a class="desert-safari-gallery" href="<%# Item.PhotoPath %>">
<img src="<%# Item.MediumPhotoPath %>" alt="" />
<div class="overlay">
<i class="fa fa-search-plus"></i>
</div>
</a>
</div>
</ItemTemplate>
</asp:ListView>
</div>
Js code
$('.desert-safari .owl-carousel').owlCarousel({
items: 3,
dots: false,
nav: true,
loop: true,
margin: 10,
autoplay: true,
navText: ['<i class="fa fa-angle-left fa-4x"></i>', '<i class="fa fa-angle-right fa-4x"></i>'],
onInitialized: callback,
responsiveClass: true,
responsive: {
0: {
items: 1,
nav: false,
margin: 80
},
570: {
items: 1,
nav: false
},
768: {
items: 2,
nav: false
},
992: {
items: 3,
nav: false,
},
1200: {
items: 3,
nav: true,
loop: false
}
}
});
function callback(event) {
$(".desert-safari-gallery").magnificPopup({
type: "image",
removalDelay: 160,
loop: false,
preloader: false,
fixedContentPos: true,
showCloseBtn: false,
gallery: {
enabled: true
}
})
}
I just ran into this problem so I thought I'd give you my answer/solution.
The Reason:
Since your using owl carousel to loop, owl carousel is cloning items. Because your cloning the items within your carousel you're now feeding duplicates into the popup gallery. What a hassle right? There are two seemingly obvious solutions.
Solution 1: Don't use owl-carousel's loop.
This may not be the preferred solution if you want the looping feature of your carousel but this will no longer cause the popup to receive duplicate entries.
Solution 2: Create an array of objects based on the resulting elements, remove the duplicates, then use magnific's items property to set the gallery items.
Here is a working script I had to create based off a similar scenario I'm sure you can dissect what the process is:
(function( $ ) {
'use strict';
$( window ).load(function(){
var GalleryItems = [];
$('.gallery img').each(function(i){
var src = $(this).attr('href');
var theSrc = {
src: src,
type: 'image'
};
GalleryItems.push(theSrc);
});
var GalleryItems = GalleryItems.reduce(function(previous, current) {
var object = previous.filter(object => object.src === current.src);
if (object.length == 0) {
previous.push(current);
}
return previous;
}, []);
theGallery();
function theGallery(){
$('gallery').magnificPopup({
type: 'image',
gallery: {
enabled:true
},
items:GalleryItems,
});
}
});
})( jQuery );
I found that #Chris Stage's answer works perfectly, but for some n00bs who try to use the code verbatim may run into issues. I can't just leave a comment or accept the answer so I am posting my revision in hopes that it provides someone else with the correct code.
The one issue I found was that in the .each() function, that you have to target the wrapping a tag's URL to the larger image, not the image's URL itself due to the fact that the one used in the carousel may be a thumbnail or equivalent, and the larger one to the "larger image" to open in a popup may be a separate URL.
(function( $ ) {
'use strict';
$( window ).load(function(){
var GalleryItems = [];
$('.photo-gallery .item a').each(function(i){ //Target your wrapping a tag
var src = $(this).attr('href');
var theSrc = {
src: src,
type: 'image'
};
GalleryItems.push(theSrc);
});
var GalleryItems = GalleryItems.reduce(function(previous, current) {
var object = previous.filter(object => object.src === current.src);
if (object.length == 0) {
previous.push(current);
}
return previous;
}, []);
theGallery();
function theGallery(){
$('.photo-gallery').magnificPopup({ //Target parent carousel container
type: 'image',
gallery: {
enabled:true
},
items:GalleryItems,
removalDelay: 300,
mainClass: 'mfp-fade' //Adds magnific's fade effect
});
}
});
})( jQuery );
This solution worked perfectly with Owl's issue with "cloned" images and thanks to #Chris Stage for coming up with this. His answer should be the "Accepted Answer" but I'd also love an Upvote for the clarification so I can earn some Rep points :)
For future reference, here is a much simpeler solution:
$('.owl-item:not(.cloned) * .desert-safari-gallery').magnificPopup(..
Change your selector so that it will not be used for children of elements with the 'owl-item cloned' class.
You can use this little fix.
$('.owl-carousel.with-mfp').each(function () {
var $mfp = $(this);
$mfp.on('click', '.owl-item.cloned a', function (event) {
event.preventDefault();
var self = $(this);
// Dependency on image positions in owl and on unique a.href attrs
$mfp.find('.owl-item:not(.cloned) a').each(function (index) {
if ($(this).attr('href') === self.attr('href')) {
$mfp.magnificPopup('open', index);
}
});
});
$mfp.magnificPopup({
type: 'image',
delegate: '.owl-item:not(.cloned) a',
gallery: {
enabled: true
}
});
Let's assume i have a previous loaded bootstrap versione , and that i have an angular directive that load some bunch of css (including another version of bootstrap) that i want to use only in a div, or in other tag at my choiche (mostly the ones in which i use the directive).
.directive('directivename' , ['$ocLazyLoad',function($ocLazyLoad){
return {
restrict : 'A',
controller : function($ocLazyLoad,$scope,$q) {
$ocLazyLoad.load('http://somepath/bootstrap/css/bootstrap.css',{cache: false}).then(function(response) {
$ocLazyLoad.load('http://somepath/bootstrap/js/bootstrap.min.js',{cache: false}).then(function(response) { });
});
}
}
}])
and apply it like this, in the way that those css and js only works for that div :
<div class="row" directivename></div>
How can i handle this in angularJS?
Proof of concept, using the JavaScript library thomaspark/scoper
var app = angular.module('MyApp', [], function() {});
app.controller('MyCtrl', function($scope) {});
app.directive('scopedcss', function($http, $compile) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
// Fetch bootstrap css (you should cache it instead of requesting it everytime)
$http({
method: 'GET',
url: 'https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css'
}).then(function successCallback(response) {
// Create a <style scoped> tag with the CSS content
var cssTag = angular.element('<style scoped>' + response.data + '</style>');
// Insert the tag inside the element
element.prepend(cssTag);
// Call the process() method defined by scoper lib
// It will parse the CSS and prefix it with a unique ID
// It will also add the same ID to the element
window.process();
});
}
}
});
h1 {
color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdn.rawgit.com/thomaspark/scoper/29c01744/scoper.min.js"></script>
<div ng-app="MyApp" ng-controller="MyCtrl">
<div scopedcss>
<h1>Hello bootstrap!</h1>
<button type="button" class="btn btn-default">Button</button>
</div>
<h1>Regular title</h1>
<button type="button" class="btn btn-default">Button</button>
</div>
I have a dashboard in Google Analytics.
I want to only capture a certain part of the dashboard using CasperJS.
No matter what I've tried it captures the entire page.
What I'm I doing wrong here?
This is the HTML hierarchy that I find when I inspect the Google Analytics dashboard:
<div id="ID-view">
<div class="_GAeH" id="ID-dashboard">
<div id="ID-layout">
<div class="_GARW ">
<div class="_GAoA">
<!-- more <div>s with the content -->
</div>
</div>
</div>
</div>
</div>
CasperJS code snippet:
var casper = require('casper').create();
casper.start('https://www.google.com/analytics/web/the/rest/of/the/url/', function() {
this.fill('form#gaia_loginform', { 'Email': 'user', 'Passwd':'pass' }, true);
});
casper.waitForSelector('.ID-row-4-0-0', function() {
casper.page.paperSize = {
height: '11in',
width: '8.5in',
orientation:'portrait',
border: '0.4in'
};
// NONE of these work the way I think they should
// this.captureSelector('ga.pdf','#ID-view');
// this.captureSelector('ga.pdf','#ID-dashboard');
// this.captureSelector('ga.pdf','#ID-layout');
this.captureSelector('ga.pdf','._GAoA');
// this.captureSelector('ga.pdf','._GARW'); // <-- this one fails, capture height is messed up
},
function() {
this.echo("Timeout reached");
});
casper.run();
Try this:
this.captureSelector('ga.pdf','div._GAoA', {quality: 100});
If you cant take the screenshot of the element _GAoA please share the output of your casperjs scrpit.
Good luck.