I'm trying to make a button that the content of it can be editable and at the same time the button can be draggable. I would also like to make it resizable.
This is what I've done. As of now, the button is draggable but it's content can't be edited. When I erase the draggable part, the content can now be edited.
JS:
$(function() {
$('#bt1').on('click', function() {
$(this).attr('contentEditable', true);
});
$('#bt1').on('blur', function() {
$(this).attr('contentEditable', false);
});
$('#bt1').draggable({cancel:false});
});
HTML:
<button id='bt1'>edit</button>
JFiddle:
http://jsfiddle.net/wuYY8/
Try the delay option
Time in milliseconds after mousedown until dragging should start. This option can be used to prevent unwanted drags when clicking on an element.
$('#bt1').draggable({
cancel:false,
delay:300
});
http://api.jqueryui.com/draggable/#option-delay
I hope this helps you
JSFIDDLE
$("#content").draggable().click(function() {
$(this).draggable( {disabled: false});
}).dblclick(function() {
$(this).draggable({ disabled: true });
});
Related
Here is what I am trying to do. I have a button (#facebook-button) that when clicked will show the contents of a div (#facebook). Now I want it so when the mouse is not on top (hover) of the div #facebook that it then hides the div #facebook.
Here is what I have so far:
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#facebook').hide();
jQuery('#facebook-button').click(function() {
jQuery('#facebook').show();
});
});
</script>
Any suggestions?
You can use jQuery's on mouseleave event, that event is fired when the mouse leaves the area.
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#facebook').hide().on('mouseleave', function() {
jQuery('#facebook').hide();
});
jQuery('#facebook-button').click(function() {
jQuery('#facebook').show();
});
});
</script>
You can try some thing like this.
CSS
div { display: none; }
HTML
<a id="hover" href="#">Show</a>
<div id="div">Contents</div>
JS
$('#hover')
.mouseleave(function() {
$('#div').hide();
})
.click(function(e) {
e.preventDefault();
$('#div').show();
});
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#facebook').hide();
jQuery('#facebook-button').click(function() {
jQuery('#facebook').show();
$('#facebook').on('mouseenter', function() {
// do something or remove that part to just leave mouseleave
}).on('mouseleave', function(){
$('#facebook').hide();
});
});
});
</script>
Basically after showing the div, we will just spot when his mouse is leaving the #facebook div to hide it.
You could also optimize the code and put $('#facebook') in a variable considering the amount of time you re use it. Saves you calling jquery more times than actually needed.
Try this Demo.
$('.fbContent').hide();
$('button').hover(
function() {
$('.fbContent').show();
},
function() {
$('.fbContent').hide();
}
)
I am trying to hide a div whenever I will hover over it and show another one in the same place.. And when I take the mouse out of that.. the previous div will be shown and this div will be hidden...
$(document).ready(function(){
$('#hover_tutor').hover(
function () {
$('#hover_tutor').hide();
$('#hover_tutor_hidden').show();
},
function () {
$('#hover_tutor').show();
$('#hover_tutor_hidden').hide();
}
);
});
<div id="hover_tutor">Blah</div>
<div id="hover_tutor_hidden" style="display:none;">Bleh</div>
But on hovering the hover_tutor... something is happening.. It's jumping up and down.. I don't know what's wrong...
You need to use .mouseenter event for #hover_tutor div and .mouseleave for #hover_tutor_hidden div:
$('#hover_tutor').mouseenter(function () {
$(this).hide();
$('#hover_tutor_hidden').show();
});
$('#hover_tutor_hidden').mouseleave(function () {
$('#hover_tutor').show();
$(this).hide();
}
).mouseleave();//trigger mouseleave to hide second div in beginning
Working Demo
You can also use toggle method instent of hide/show on hover event
<div id="hover_tutor" style="display: block;">Blah</div>
<div id="hover_tutor_hidden" style="display: none;">Bleh</div>
$('#hover_tutor').hover(
function () {
$('#hover_tutor').toggle();
$('#hover_tutor_hidden').toggle();
});
Working demo
http://jsfiddle.net/ivyansh9897/8jgjvkqk/
try this,
$('#hover_tutor').hover(function () {
$(this).hide();
$('#hover_tutor_hidden').show();
});
$('#hover_tutor_hidden').hover(function () {
$('#hover_tutor').show();
$(this).hide();
}
));
If you do have the flexibility to modify your html little bit using class attribute there's a better way. Use .toggle() to alter the state of your element on both mouseover and mouseleave.
HTML :
<div id="hover_tutor" class="hello">Blah</div>
<div id="hover_tutor_hidden" class="hello" style="display:none;">Bleh</div>
jQuery :
$(".hello").on("mouseover mouseleave", function(){
$("#hover_tutor").toggle();
$("#hover_tutor_hidden").toggle();
});
jsFiddle
I have a contenteditable div for use as a rich text editor. Usually, the div should be draggable. But when the div is focused, I need to turn off the draggable function so I can select text by clicking and dragging.
So, I'm trying to use an if statement like so
if (!$('.elemText').is(':focus')) {
$('.elemContainer').draggable();
};
This is not taking effect though, when I focus the contenteditable div.
Similarly, if I reverse it so the div is only draggable when focused. This doesn't take effect either.
if ($('.elemText').is(':focus')) {
$('.elemContainer').draggable();
};
I'm also using some other javascript for handling focus and blur events.
$('.elemText').on({
focus: function() {
if (!$(this).data('disabled')) this.blur()
},
dblclick: function() {
$(this).data('disabled', true);
this.focus()
},
blur: function() {
$(this).data('disabled', false);
}
});
JSFiddle demo
You have to assign the Draggable function every time you're focusing or blurring on the element. I have updated your JSFiddle as can be seen here:
$(document).ready(function() {
$('.elemContainer').draggable();
});
$(".elemText").on({
focus: function() {
$('.elemContainer').draggable("destroy");
if (!$(this).data('disabled'))
this.blur();
}, dblclick: function() {
$(this).data('disabled', true);
this.focus()
}, blur: function() {
$('.elemContainer').draggable();
$(this).data('disabled', false);
}
});
Every time you take focus out of the textbox, the item is being made draggable, and when you focus on it, the .draggable("destroy"); removes the dragging feature.
Use destroy method.
This method removes the draggable functionality completely. This will return the element back to its pre-init state.
So you can do it like this : jsFiddle LIVE DEMO
$('.elemContainer').draggable();
$('.elemText').on({
focus: function() {
if (!$(this).data('disabled')) this.blur();
},
dblclick: function() {
$('.elemContainer').draggable('destroy');
$(this).data('disabled', true);
this.focus();
},
blur: function() {
$('.elemContainer').draggable();
$(this).data('disabled', false);
}
});
For more info read the API Documentation
DONT use destroy! Get on with event.Propagation due to draggable or other events. If you guy enable event propgation on draggable for the given "editable"-div this solution will work fine. without destroying anything! The Problem is about draggable... draggable will prevent your click focus event in your editable div ... thats why its not working. Btw... you just need that smart code:
$('.elemContainer').draggable();
$('.elemText').on({
click: function() {
$(this).focus();
},
focus: function() {
$('.elemContainer').draggable({ disabled: true });
},
blur: function() {
$('.elemContainer').draggable({ disabled: false });
}
});
http://jsfiddle.net/9jdT6/14/
I have an image (question mark image) inside a div like so
HTML
<div id="other">
<img id="clickQues" class="quesMark" src="ques" />
</div>
I want this ques mark image to be replaced by two new clickable images (a tick, and a cross) when I click on it. I am using jQuery to achieve this. I am able to replace the images successfully. However, I am unable to click on the new tick, cross icons.
My jQuery
$('#clickQues').click(function(){
$('.quesMark').hide();
$('#other').append("<img src='tick.png' id='tickIcon'>");
$('#other').append("<img src='cross.png' id='crossIcon'>");
});
$('#tickIcon').click(function(){
//hide the other cross icon
//do something
});
$('#crossIcon').click(function(){
//hide the other tick icon
//do something
});
Heres the fiddle
What am I doing wrong?
Since the elements are added dynamically, you need to use event delegation
$('#other').on('click', '#tickIcon', function(){
//hide the other cross icon
//do something
});
$('#other').on('click', '#crossIcon', function(){
//hide the other tick icon
//do something
});
Demo: Fiddle
Try this : Event Delegation
$('body').on('click','#tickIcon',function(){
//hide the other cross icon
//do something
});
$('body').on('click','#crossIcon',function(){
//hide the other tick icon
//do something
});
$('#clickQues').click(function () {
$('.quesMark').hide();
$('#other').append("<img id='tickIcon' src='http://www.pcdr.gr/moodle/theme/themza_moo_05/pix/i/tick_green_big.gif'>");
$('#other').append("<img id='crossIcon' src='http://www.iconshock.com/img_jpg/VECTORNIGHT/general/jpg/16/cross_icon.jpg'>");
});
$('#other').on("click",'#tickIcon',function () {
$('#crossIcon').hide();
});
$('#other').on("click",'#crossIcon',function () {
//hide the other tick icon
//do something
$('#tickIcon').hide();
});
see demo
$('#clickQues').click(function(){
$('.quesMark').hide();
$('#other').append("<img class='right' src='tick.png' id='tickIcon'>");
$('#other').append("<img class='close' src='cross.png' id='crossIcon'>");
});
$('.right').click(function () {
$('.close').hide();
});
$('.close').click(function () {
$('.right').hide();
});
Not tested but i think this will help you certainly regards....:)
I have a sidebar that is acting fine until i click on body.
Happening in sidebar
On click sidebar comes out and on mouseout it goes hidden.
when input box inside sidebar is focused then it is should not hide.
when input is not focused it follows step 1 nicely.
What i want-
When input is focused inside sidebar and at the same time when it is focused out because of body's input box focus then this sidebar should hide or on body click it should be hidden on action.
jQuery-
$(function(){
$('.sidebar-alert').on('click',function(){
$(this).animate({left:0},200);
event.stopPropagation();
});
$('.sidebar-alert').on('mouseleave ',function(){
if($(".focused-input").is(":focus"))
{
$('.sidebar-alert').show();
}
else
{
$('.sidebar-alert').animate({left:-295},200);
}
});
});
I am not able to bind mouseover and click for hiding sidebar.
JS fiddle
Updated fiddle
You can add the blur event for the input. That will take care of the issue that you have
$(".focused-input").on('blur', function() {
$('.sidebar-alert').animate({
left: -295
}, 200);
});
Check Fiddle
You can add one more event and selector in this part of code snippet like this:
$('.sidebar-alert, .focused-input').on('mouseleave focusout', function () {
if ($(".focused-input").is(":focus")) {
$('.sidebar-alert').show();
} else {
$('.sidebar-alert').animate({
left: -295
}, 200);
}
});