The following code will only let me drag and drop ONE clone onto a droppable area. When I try and drop another clone on the droppable area it disappears. I am able to drag it however.
$(".shape").draggable({
helper: 'clone',
});
$("#wrapper").droppable({
accept: '.shape',
drop: function(event, ui)
{
$(this).append($(ui.helper).clone());
$("#wrapper .shape").addClass("item");
$(".item").removeClass("ui-draggable shape");
$(".item").draggable();
}
});
Following the comments from people and the jfiddle provided below, it appears as though this snippet of code is working in a typical setup, however, I am using this in combination with Phonegap and more specifically on an Android device.
I know this is more specific and harder to replicate for other people, but for some reason it will not allow me to drag another clone onto the wrapper still.
Here is my entire code, if someone can spot something, i'd really appreciate it!
<!DOCTYPE HTML>
<html>
<head>
<title>Title</title>
<script type="text/javascript" charset="utf-8" src="phonegap-1.1.0.js"></script>
<script src="jquery-1.7.min.js"></script>
<script src="jquery-ui-1.8.16.custom.min.js"></script>
<link rel="stylesheet" type="text/css" href="ff.css" />
<script type="text/javascript" charset="utf-8">
// Wait for PhoneGap to load
document.addEventListener("deviceready", onDeviceReady, false);
// PhoneGap is ready
function onDeviceReady() {
var mouseEventTypes = {
touchstart : "mousedown",
touchmove : "mousemove",
touchend : "mouseup"
};
for (originalType in mouseEventTypes) {
document.addEventListener(originalType, function(originalEvent) {
event = document.createEvent("MouseEvents");
touch = originalEvent.changedTouches[0];
event.initMouseEvent(mouseEventTypes[originalEvent.type], true, true,
window, 0, touch.screenX, touch.screenY, touch.clientX,
touch.clientY, touch.ctrlKey, touch.altKey, touch.shiftKey,
touch.metaKey, 0, null);
originalEvent.target.dispatchEvent(event);
originalEvent.preventDefault();
});
}
$(".shape").draggable({
helper: 'clone',
});
$("#wrapper").droppable({
accept: '.shape',
drop: function(event, ui)
{
$(this).append($(ui.helper).clone());
$("#wrapper .shape").addClass("item");
$(".item").removeClass("ui-draggable shape");
$(".item").draggable();
}
});
$(".show").live('touchstart', function() {
if ($("#openCloseIdentifier").is(":hidden")) {
$("#slider").animate({
marginLeft: "-150px"
}, 500 );
$("#openCloseIdentifier").show();
} else {
$("#slider").animate({
marginLeft: "0px"
}, 1000 );
$("#openCloseIdentifier").hide();
}
});
}//onDeviceReady
</script>
</head>
<body>
<div id="wrapper">
<div id="navWrap">
<div id="openCloseIdentifier"></div>
<div id="slider">
<div id="sliderContent">
<img class="shape" src="images/150x150.gif" />
</div>
<div id="openCloseWrap">
<a href="#" class="topMenuAction" id="topMenuImage">
<img src="images/show.gif" class="show" />
</a>
</div>
</div>
</div>
</div>
</body>
</html>
Figured it out.
I had the shape being cloned nester in the wrapper div. That won't work.
Took it out and it works!
Related
I'm trying to use the sharrre social media share buttons.
however, I don't understand why this code doesn't work locally OR on my server but it works perfectly fine on jsfiddle!
This is the jsfiddle:
http://jsfiddle.net/f7yobj60/
and this is my exact code:
<html>
<head>
<meta charset="UTF-8">
<title>Sharrre.com</title>
<meta name="description" content="Sharrre" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="http://sharrre.com/js/jquery.sharrre-1.3.4.min.js"></script>
<script>
$('.share-buttons').each(function() {
$(this).sharrre({
share: {
twitter: true,
facebook: true
},
template: '<div class="share-icon-holder"><img src="http://png-2.findicons.com/files/icons/2052/social_network/32/facebook.png" /><img src="http://png.findicons.com/files/icons/2052/social_network/32/twitter.png" /></div><div class="share-text">Share</div>',
enableHover: false,
enableTracking: false,
render: function(api, options){
$(api.element).on('click', '.twitter', function(event) {
event.preventDefault();
api.openPopup('twitter');
});
$(api.element).on('click', '.facebook', function(event) {
event.preventDefault();
api.openPopup('facebook');
});
}
});
});
</script>
</head>
<body>
<div class="share-buttons" data-url="http://www.google.com" data-text="Google test"></div>
<div class="share-buttons" data-url="http://www.stackoverflow.com" data-text="Stackoverflow test"></div>
<div class="share-buttons" data-url="http://www.google.com" data-text="Google test 2 - long text"></div>
<div class="share-buttons" data-url="http://www.stackoverflow.com" data-text="Stackoverflow test 245345"></div>
</body>
</html>
is there anything that I am missing in my HTML page?
I even downloaded the files from the github and even those files don't work for me locally or on my server!
this is the strangest thing I've ever encountered.
any help would be appreciated.
The buttons don't exist when your code runs, wrap the code in a ready handler so they exist when it does run.
JSfiddle does this automatically for you ... see the option onload selected in dropdown at top left
$(function(){
/* your code here */
});
Having a bit of trouble getting a Jquery event to work. When the slider moves it should update the referenced field with the value of the slider.
This doesn't currently work
Code can be found below and while it works at the jsfiddle link, it does not work at the second link, you can move the slider but the value of it does not display.
http://jsfiddle.net/j08691/2N4Y8/
Please ignore the double initiation of #slider.
I have tried to reproduce the code in jsfiddle as such:
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<link href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css' rel='stylesheet' type='text/css'>
<script>
$(function () {
$('#slider').slider({
value: 50,
min: 10,
max: 100,
step: 10
});
$(document).on("click", "#show-slider", function () {
$('#slide').toggle("slow");
});
});
$("#slider").slider({
slide: function (event, ui) {
$("#slider-value").html(ui.value);
},
change: function (event, data) {
alert(data.value)
}
});
$("#slider-value").html($('#slider').slider('value'));</script>
<body>
<h5>You can alter the reading ease of the page using the slider below.<span id="show- slider"> To toggle it click here.</span></h5>
<h5>The current Flesch reading ease score is at : <span id="slider-value"></span> </h5>
</div>
<div id="slide">
<br />
<div id="slider"></div>
<br />
<br />
</div>
</body>
</html>
The results of which can be found at :
http://shavid.webfactional.com/
As you can see, as per hosted here it doesn't appear to work, any suggestions?
I checked your website and it worked lol.
The code:
$(function () {
$('#slider').slider({
value: 50,
min: 10,
max: 100,
step: 10,
slide: function (event, ui) {
$("#slider-value").html(ui.value);
},
change: function (event, data) {
alert(data.value)
$("#slider-value").html($('#slider').slider('value'));
}
});
$("#show-slider").click(function()
{
$('#slide').toggle("slow");
});
});
Here's the Fiddle. I just removed the one of the sliders initialization
The difference between the fiddle and your site is that JSFiddle is wrapping the code inside of $(window).load(function(){ /*code here*/ });
I am first time JQuery user today. I have managed to figure out how to work it enough to do what I want, which is change the color of the background onhover of button.
Only problem is that there is no fadein effect. I have looked up the fadein function but am not sure how to implement it into what I have done so far because the syntax is very different from what I am used to. Can anyone help me figure out how to add the fadein function to my code?
Thanks! Looking forward to replies! :)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>index.html</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="bgcolor.js"></script>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<div class='splash'>
<div id='logoblock'>
<img src='images/logo.png'>
</div>
<div id='menublock'>
<a href='#' id='jabout'><div id='about'></div></a>
<a href='#' id='jphoto'><div id='photo'></div></a>
<a href='#' id='jinfo' ><div id='info'></div></a>
</div>
<div id='quoteblock'
<p class=quote>"blah blah blah!"</p>
<p class=author>- John Doe</p>
</div>
</div>
</body>
</html>
bgcolor.js
// JavaScript Document
$(document).ready(function(){
$( "#jphoto" ).hover(
function() {
$('body').css('background', '#9dd5fc');
},
function() {
$('body').css('background', '#d4e88f');
}
);
$( "#jabout" ).hover(
function() {
$('body').css('background', '#ffaf3c');
},
function() {
$('body').css('background', '#d4e88f');
}
);
$( "#jinfo" ).hover(
function() {
$('body').css('background', '#ff3c3c');
},
function() {
$('body').css('background', '#d4e88f');
}
);
});
You need to use animate() to have animation effect, also need to have jquery UI/color library for background color animation to work
$("#jinfo").hover(function () {
$('body').animate({
'background-color': '#ff3c3c'
});
}, function () {
$('body').animate({
'background-color': '#d4e88f'
});
});
Demo: Fiddle
I want to have a popup in Jquery mobile that would not stop users from interacting with a page and data-dismissible="false" that is the popup would not disappear when another part of the page is interacted with and stays visible.
I have tried this
$('#popupNew').popup({ dismissible: false });
$('#popupNew').popup('open');
But this creates a modal popup that prevents users from interacting with rest of the page.
Intro
I hope this is everything you need.
Popup can not be closed if surface outside of it is clicked
Elements below popup are now accessible
Popup is draggable (tested on Firefox, Chrome, Android Chrome)
Few more notes. Some of a javascript code used here is not mine, I am talking about a fix used to make it draggable on mobile devices. Unfortunately I can't remember whose solution it is.
CSS is used to make page clickable when popup is opened. Overlay div name is combination of popup id and suffix -screen, in this case it is #popupBasic-screen.
Working example
Working example: http://jsfiddle.net/Gajotres/tMpf7/
Code used
HTML :
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<!--<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>-->
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
<div data-role="page" id="index">
<div data-theme="b" data-role="header">
<h1>Index page</h1>
</div>
<div data-role="content">
<a href="#popupBasic" data-rel="popup" data-role="button" data-inline="true" data-transition="pop" >Basic Popup</a>
<a data-role="button" id="test">click me</a>
<div data-role="popup" id="popupBasic" data-dismissible="false">
Close
<p>This is a completely basic popup, no options set.</p>
</div>
</div>
</div>
</body>
</html>
Javascript :
$(document).on('pagebeforeshow', '#index', function(){
$('#popupBasic').draggable({
cursor: 'move'
});
$(document).on('click', '#test', function(){
alert('Successful click!');
});
});
// This is a fix for mobile devices,, rest of the code is not mine
/iPad|iPhone|Android/.test( navigator.userAgent ) && (function( $ ) {
var proto = $.ui.mouse.prototype,
_mouseInit = proto._mouseInit;
$.extend( proto, {
_mouseInit: function() {
this.element
.bind( "touchstart." + this.widgetName, $.proxy( this, "_touchStart" ) );
_mouseInit.apply( this, arguments );
},
_touchStart: function( event ) {
this.element
.bind( "touchmove." + this.widgetName, $.proxy( this, "_touchMove" ) )
.bind( "touchend." + this.widgetName, $.proxy( this, "_touchEnd" ) );
this._modifyEvent( event );
$( document ).trigger($.Event("mouseup")); //reset mouseHandled flag in ui.mouse
this._mouseDown( event );
//return false;
},
_touchMove: function( event ) {
this._modifyEvent( event );
this._mouseMove( event );
},
_touchEnd: function( event ) {
this.element
.unbind( "touchmove." + this.widgetName )
.unbind( "touchend." + this.widgetName );
this._mouseUp( event );
},
_modifyEvent: function( event ) {
event.which = 1;
var target = event.originalEvent.targetTouches[0];
event.pageX = target.clientX;
event.pageY = target.clientY;
}
});
})( jQuery );
CSS:
#popupBasic-screen {
display: none;
}
here's the deal:
I'm trying to make a colorpicker act much like in Photoshop, so I have a background image of a color picker (rainbow-like image 200x200 px) and a circle trigger inside of it.
So, if i attach a draggable UI to a circle:
$('#rainbow-color-picker .circle').draggable({containment: 'parent'});
Works great. But here's another issue.. I want the drag to start when I click the parent block of the circle (i.e. the color picker image).
Here's the HTML markup:
<div class='rainbow-color-picker' id='rainbow-color-picker'><div class='inner1'><div class='inner2'>
<div class='circle'><div class='circle-inner'></div></div>
</div></div></div>
So when I click on .inner2, I want .circle to start dragging.
I've tried
$("#rainbow-color-picker .inner2").bind( "mousedown", function(event) {
$("#rainbow-color-picker .circle").trigger('dragstart');
});
But that doesn't work :( did anyone happen to meet this problem?
Thanks
Here it is, just figured it out.
$("#rainbow-color-picker .circle").trigger( event );
Here was my ticket:
Can click on jquery draggable parent start drag?
This is just a draft, feel free to try it out. Included google jQuery and UI for quick draft. Btw, getting the positions from the events should be enough for converting it into colors.
Happy coding :)
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
<script>
$(document).ready(function() {
var pos = $('#color-pos');
$('#color-field-circle').draggable({
containment: 'parent',
start: function(e) {
pos.html("start: "+e.pageX+" "+e.pageY);
},
drag: function(e) {
pos.html("drag: "+e.pageX+" "+e.pageY);
},
stop: function(e) {
pos.html("stop: "+e.pageX+" "+e.pageY);
}
});
});
</script>
<style type="text/css" media="screen">
#color-picker{width:200px;height:250px;background:#ddd;padding:10px;}
#color-field{width:180px;height:230px;background:#ccc;}
#color-field-circle{cursor:pointer;width:16px;height:16px;background:#f30;}
</style>
</head>
<body>
<div id="color-picker">
<div id="color-field">
<div id="color-field-circle"></div>
</div>
<div id="color-pos"></div>
</div>
</body>
</html>