I'm using Crossrider, I want to add a draggable div to the page's DOM.
The following code works well on Chrome and Firefox, and the dragstop handler function is fired for both Chrome and Firefox without any problems.
But for IE, the div is draggable once ! i.e. Once the div is dropped, it cannot be dragged again, and more strange is that the dragstop event handler is not fired at all in IE !?
How to fix this in IE !?
Here is the code:
extension.js file
appAPI.ready(function(jQuery) {
appAPI.resources.jQueryUI('1.10.1');
appAPI.resources.includeCSS('styles.css');
var $div = jQuery('<div class="square" ></div>').appendTo('body');
$div.draggable( {containment: "window", scroll: false} );
$div.bind('dragstop', function() {
console.log("drag stopped ...");
});
});
styles.css file
.square {
display:block;
z-index: 1000001;
background-color: #000000;
height: 100px;
width: 100px;
top: 0px;
left: 0px;
position: fixed;
}
Kindly note, that I tried the code without crossrider and I run it on IE, it works well. You can try it by using this link: http://jsfiddle.net/GHaMV/
I ran into the same problem using Crossrider and managed to fix the issue by declaring a handler function that returns the draggable element, so your code should look as follows:
$div.draggable({
containment: window,
helper: function() {
return $div;
}
});
Hope it helps...
There is no dragstop event, just the stop hook (see the docs):
Use it like this:
$div.draggable({
containment: "window",
scroll: false,
stop: function() {
console.log("drag stopped ...");
}
});
Related
I am trying to combine select2(4.0.2) and mCustomScrollbar(3.1.13) libraries to have custom dropdown list with custom scrollbar.
Here is the code sample .
$(document).on("select2:open", "select", function() {
$('.select2-results').mCustomScrollbar({
mouseWheel: true,
advanced: {
updateOnContentResize: true
}
});
});
The main issue is mousewheel scrolling. It works only if you hold the cursor over the scrollbar itself.
mousewheel.js(3.1.3) included, but it seems not working properly. There is no event firing while scrolling over the dropdown list body.
Any ideas, how to fix it? Thanks in advance.
I had the same problem. I have fix it by this way:
$(".select2").on('select2:open', function (evt) {
$('.select2-results').mCustomScrollbar({
scrollButtons: {
enable: true
},
theme: "my-theme",
mouseWheel: true
});
$('#mCSB_1_scrollbar_vertical').css("pointer-events", "auto");
$('#mCSB_1_scrollbar_vertical').on("mousedown", function () { //cross-domain iframe mousewheel hack
$(this).css("pointer-events", "none");
})
})
and plus css
.select2-results .mCSB_scrollTools .mCSB_dragger{
margin-left: 96% !important;
width: 5px!important;
}
.select2-results #mCSB_1_scrollbar_vertical{
width: 100%!important;
}
.select2-results .mCSB_scrollTools .mCSB_draggerRail{
margin-left: 96%!important;
}
The other answer that was given is a bit of a hack, so I went a bit further into this and found out that select2 actually binds the mousewheel event to the result list and therefore the mousewheel event is fired on the ul element inside the .select2-results.
To fix it simply unbind the mousewheel on the ul element first:
$(".select2").on('select2:open', function (evt) {
// Unbind mousewheel event from select2 result lists
$(".select2-results ul.select2-results__options").unbind("mousewheel");
$('.select2-results').mCustomScrollbar();
});
I use jQuery UI's new Tooltip and having trouble with figuring out how to set a maximum width of the tooltip. I guess it should be done with position, but how?
Based on Senni's reply, I added following to a separate CSS-file:
div.ui-tooltip {
max-width: 400px;
}
A sidenote: Make sure your separate CSS follows after the ui-css, otherwise there will be no effect. Otherwise you also could use the !important - marker.
If you subscribe to Tooltip's open event, you can update the style in code:
$(".selector").tooltip({
open: function (event, ui) {
ui.tooltip.css("max-width", "400px");
}
});
in script:
$(elm).tooltip({tooltipClass: "my-tooltip-styling" });
in css:
.my-tooltip-styling {
max-width: 600px;
}
Instead of modifying or overriding the jQuery UI CSS classes directly, you can specify an additional CSS class using the tooltipClass parameter:
Tooltip initialization
$(function() {
$( document ).tooltip({
items: "tr.dataRow",
tooltipClass: "toolTipDetails", //This param here is used to define the extra style class
content: function() {
var element = $( this );
var details = j$("#test").clone();
return details.html();
}
});
});
Then you would create that style class. You will want to import this CSS file after the jQuery UI CSS file.
Example CSS style
This class here would make the modal 1200px in width by default and add a horizontal scroll if there is any more content beyond that.
<style>
.toolTipDetails {
width: 1200px;
max-width: 1200px;
overflow:auto;
}
</style>
Sidenote: It is generally not recommended to use the !important tag but it could be used in this case to ensure that the intended CSS is rendered.
As pointed out by the jQuery UI api, the best you can do is override the classes ui-tooltip and ui-tooltip-content this way:
.ui-tooltip
{
/* tooltip container box */
max-width: your value !important;
}
.ui-tooltip-content
{
/* tooltip content */
max-width: your value !important;
}
Hope this helps!
Maybe you can set the width like this in the js
$("#IDOfToolTip").attr("style", "max-width:30px");
or
$("#IDOfToolTip").css("max-width", "30px");
.ui-tooltip{
max-width: 800px !important;
width: auto !important;
overflow:auto !important;
}
.ui-tooltip-content{
background-color: #fdf8ef;
}
div.ui-tooltip{
width: 210px; //if fit-content not worked in specifics browsers
width: fit-content;
}
i am using jquery ui draggable do drag a div around. whats the best way to smoothly ease out the drag after the drag stopped?
assuming the drag stopped abruptly.
thank you
Implementing draggables with easing might work for you. This is a simplified solution from my answer to a previous thread, which was more specific:
JQuery draggable with ease
HTML:
<div id="draggable">
</div>
CSS:
#draggable {
position: relative;
width: 100px;
height: 100px;
background-color: whitesmoke;
border: 2px solid silver;
}
Javascript:
$(function() {
$("#draggable").draggable({
helper: function(){
// Create an invisible div as the helper. It will move and
// follow the cursor as usual.
return $('<div></div>').css('opacity',0);
},
drag: function(event, ui){
// During dragging, animate the original object to
// follow the invisible helper with custom easing.
var p = ui.helper.position();
$(this).stop().animate({
top: p.top,
left: p.left
},1000,'easeOutCirc');
}
});
});
jsFiddle demo: http://jsfiddle.net/NJwER/26/
Hi folks
I use $.ajax functionality to send data to server and with this method I removed most of postback pages it works but I need some progress bar to show visitors there are some progress now it shows nothing after some second it shows result but i think a message or small picture is need in my web site. How I can implement it with simple jquery code ? something popup and shows the page is in the progress.
And also I need to add some other jquery to prevent other click during the progress is it possible ?
You can do something like
$("elemnt").click(function(){
$("loader-img").show();
$.ajax({
url : "your url",
complete: function(){
$("loader-img").hide();
}
});
});
The loader image can be an page blocking div, to block the user from doing anything with a image at the center of the viewport.
Here the complete event is used since this event is called in case of a successful/failed ajax request.
EDITED
You can do something like
<style type="text/css">
.blocker{
z-index: 99999;
opacity: .5;
height: 100px;
position: fixed;
background: none repeat scroll 0 0 lightgrey;
width: 100%;
}
.blocker .img{
position: fixed;
color: red;
}
</style>
<body>
<div class="blocker" style="display: none">
<div class="img">img</div>
</div>
.............
.............
.............
Then In Script
function showBlocker(){
$(".blocker .img").css({
top: $(window).height() / 2,
left: $(window).width() / 2
});
$(".blocker").show().css({
height: $(document).height()
});
}
Then call the showBlocker() method to show the blocker.
You can tweak the answer to fit into your need. This is just a sample how it can be achieved
You can show a loading image before the AJAX call starts and then hide it in the callback function.
Something like
// handler for ajax trigger
$("#yourelement").click(function(){
// your loading image object
$("#yourimage").show();
$.ajax({
url: 'ajax/test.html',
success: function(data) {
$("#yourimage").hide();
}
});
});
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/