Make div open with your mouse and not click - javascript

I have make this: This In the right you see a red button. When you click on the red button. The content screen with the text is coming. But i have a question of this. Can i make this with a other animation. If you hold your mouse. Then you can slide open. With your mouse button to left. Then the content box open. Do you understand it? I hope you can help me.
You can see the code on jsfiddle. And you can change it there. I hope you can help me. I am a starting javascripter. And how And have no idea how I can make this.

To implement dragging, you can make use of mousedown/mouseup/mousemove like this: http://jsfiddle.net/pimvdb/25y4K/8/.
$(function () {
"use strict";
var box = $(".what-is-delicious"),
button = $(".what-is-delicious > a");
var mouseDown = false,
grabbed = 0,
start = -303;
button.mousedown(function(e) {
mouseDown = true;
$('*').bind('selectstart', false); // prevent selections when dragging
grabbed = e.pageX; // save where you grabbed
$("body").append('<div class="background-overlay"></div>');
});
$('body').mouseup(function() {
mouseDown = false;
$('*').unbind('selectstart', false); // allow selections again
$(".background-overlay").remove();
start = parseInt(box.css('right'), 10); // save start for next time
// (parseInt to remove 'px')
}).mousemove(function (e) {
if(mouseDown) { // only if you are dragging
// set right to grabbed - pageX (difference) + start 'right' when started
// dragging. And if you drag too far, set it to 0.
box.css("right", Math.min(grabbed - e.pageX + start, 0));
}
});
});

Here is an updated fiddle. Basically I just did a couple of things:
Changed the handler from "click" to "mouseenter"
Added a "mouseleave" handler that does the opposite thing
Put the handlers on the "what-is-delicious" container instead of the <a>
The code:
$(function () {
"use strict"
var box = $(".what-is-delicious"),
button = $(".what-is-delicious > a");
box.mouseenter(function (e) {
e.preventDefault();
if ($(button).hasClass("open")) {
} else {
$("body").append('<div class="background-overlay"></div>');
button.addClass("open");
box.animate({ right: "0"}, 750);
}
}).mouseleave(function (e) {
e.preventDefault();
if ($(button).hasClass("open")) {
$("body").find('div.background-overlay').remove();
button.removeClass("open");
box.animate({ right: -303}, 750);
} else {
}
});
});
The "preventDefault()" calls aren't really necessary anymore but I left them there.

I would assume you are toggling the Style.Display of the DIV currently in an OnClick() event.
The same code can be called from a Hover() or MouseOver()

Related

Event that triggers once an element is made visible

I have multiple bootbox dialog boxes in my project and I want all of them to appear at the center of the screen, I cannot individually go and calculate the height of each box and position it at the center when the modal shows. Is there a common way to do this. Is there a way to trigger an event when the bootbox is made visible, I tried 'DOMNodeInserted', but this gives recursive error also tried livequery but this did not work. Can anyone tell me how to trigger an event when a dialog box is made visible at a common point.
jQuery(document).on('DOMNodeInserted', function(e) {
if(jQuery(e.target).hasClass('modal')) {
setTimeout(function(){
if(jQuery(e.target).height()/2 > 1){
var topPos = ((jQuery(window).height() - 30)/2) - jQuery(e.target).find('.modal-dialog').height()/2;
jQuery('.modal-content').css('top', topPos);
}
},200);
}
});
Regards,
Neha
try this code
.on("shown.bs.modal", function(e) {
alert("bootbox is visible");
});
DEMO
updated
align bootbox at center
.on("shown.bs.modal", function(e) {
$('.modal-content').css({
'transition':'margin-top 1s linear',
'margin-top': function (){
var w = $( window ).height();
var b = $(".modal-dialog").height();
var h = (w-b)/2;
return h+"px";
}
});
});
DEMO

jQuery Scrolling Length

I am working with a script to scroll an element on click. It's working properly, however it either scrolls all the way up, or all the way down. I'm new to jquery, and I'm wondering how to make it scroll a little at at time. For example, clicking to scroll down once will take you down a certain length, clicking again scrolls that length again. Also, sometimes it jitters and bugs out when scrolling back up. Any insight on how to fix this is appreciated as well!
Thanks.
Code below:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script>
$(function() {
var ele = $('#scroll');
var speed = 25, scroll = 5, scrolling;
$('#scroll-up').click(function() {
// Scroll the element up
scrolling = window.setInterval(function() {
ele.scrollTop( ele.scrollTop() - scroll );
}, speed);
});
$('#scroll-down').click(function() {
// Scroll the element down
scrolling = window.setInterval(function() {
ele.scrollTop( ele.scrollTop() + scroll );
}, speed);
});
$('#scroll-up, #scroll-down').bind({
click: function(e) {
// Prevent the default click action
e.preventDefault();
},
mouseleave: function() {
if (scrolling) {
window.clearInterval(scrolling);
scrolling = false;
}
}
});
});
</script>
You're saying you want to scroll little at a time but your code is saying scroll UNTIL mouse leaves. If you want to scroll little at a time why would you write a mouseleave which clearly stating if it's been scrolling stop now!
If you want to scroll up/down a bit on click, you should get rid of setInterval and mouseleave.
$(function() {
var ele = $('#scroll');
var speed = 25, scroll = 5;
$('#scroll-up').click(function() {
// Scroll the element up
ele.scrollTop( ele.scrollTop() - scroll );
});
$('#scroll-down').click(function() {
ele.scrollTop( ele.scrollTop() + scroll );
});
$('#scroll-up, #scroll-down').bind({
click: function(e) {
// Prevent the default click action
e.preventDefault();
}
});
});
jsfiddle

jQuery mouseenter and mouseleave events fire out of control

I'm using this piece of code to populate a div with the contents of a hovered element.
$('.gallery .thumbs a').hover(
function(){
var target = $(this);
$('.hover-box').html(target.clone());
var top = target.offset().top;
var left = target.offset().left;
$('.hover-box').css({'display':'block', 'top':top, 'left':left});
},
function(){
$('.hover-box').hide();
}
);
The problem is - what many seem to have had - that after adding the 'mouseleave' handler both the events start firing uncontrollably.
I know the bubbling issues related with mouseover/out but this seems to behave the same.
Anyone have an idea why this is happening?
EDIT:
Here's the deal on fiddle. Not the prettiest sight but function the same as my problem.
FIDDLE
It's because your function fires and re-fires each hover and at the end of each hover, so any time you move the mouse it fires twice. What you want to do instead is fire it on mouseenter of .thumbs a and mouseleave of .hover-box, like this
jQuery(function () {
jQuery('.thumbs a').hover(
function () {
var target = $(this);
jQuery('.hover-box').html(target.clone());
var top = target.offset().top;
var left = target.offset().left;
jQuery('.hover-box').css({
'display': 'block',
'top': top,
'left': left
});
});
$('.hover-box').mouseleave(function() {
$('.hover-box').hide();
});
});

enabling a button when a button is clicked in jquery

I am working on jQuery and I am rendering a graph. In that I have scrollable arrows on both right and left side of the graph. My requested functionality is:
Whenever the data is more and whenever we click the right arrow automatically the left scrollable arrow must be visible.
If there is not more data, the right button must be invisible.
If there is not enough data for scrolling, the left button must be invisible.
To sum up: buttons should only be available, if they can be used.
here is my code so far:
$(function() {
var $box2 = $('.column'), totalWidth = 900, cursor = 0;
$("#rightarrrowbutton").click(function() {
if (cursor != totalWidth) {
$box2.animate({
marginLeft : "-=15"
}, "fast");
cursor += 100;
}
});
if ($("#rightarrowbutton").click(){
$('#leftarrowbutton').click(function() {
if (cursor != 0) {
$box2.animate({
marginLeft : "+=15"
}, "fast");
cursor -= 100;
}
});
});
}
try like
$("#rightarrrowbutton").click(function() {
$("#leftarrowbutton").show();
});
$("#leftarrowbutton").click(function() {
$("#rightarrrowbutton").show();
});
Rather than trying to attach and remove click handlers, just add them when you page loads and .hide() or .show() your buttons as appropriate.
$('#rightarrowbutton').click() {
// do your stuff
if (/*there's no more stuff to the right*/) {
$('#rightarrowbutton').hide();
}
$('#leftarrowbutton').show();
}
and similar for the left button.
I know your description talks about visibility, but the title of your question mentions enabling. To disable, you can put the attribute "disabled" in the <button> element. If there, it will be disabled, if missing it will be enabled. So you could remove or add the property during the .click() callback.
For example:
$("#leftarrowbutton").click(function ()
{
// if meets ending criteria
if (true)
{
// enable other button
$("#rightarrowbutton").removeAttr("disabled");
// disable current button
$("#leftarrowbutton").attr("disabled", true);
}
});

.show() doesnt work on IE

I am working on this project: http://www.arbamedia.com/test/
if you go to Dyer dhe dritare on the left menu and drag one of the elements (the door or the window) into the right side (the desk) in Chrome and FF the 3 options that I have added for that elements show, so this: $("p", this).show(); works, but in IE9 when I drag an element it doesn't show the the options for dragging, rotating or deleting! I dont know what is wrong.
This is where it happens:
$(".drag").draggable({
revert : 'invalid',
helper : 'clone',
containment : 'desk',
cursorAt : { left:-11,top:-1 },
//When first dragged
stop : function(ev, ui) {
/*========================================================================*/
var pos = $(ui.helper).offset();
var left_ = ev.originalEvent.pageX - $("#desk").position().left;
var top_ = ev.originalEvent.pageY - $("#desk").position().top;
// get widht and height of the container div#desk element
var w_ = $("#desk").width();
var h_ = $("#desk").height();
objName = "#clonediv"+counter++;
objNamex = "clonediv"+counter;
$(objName).css({"left":left_,"top":top_});
var gag = 0;
$(objName).click(function () {
$("p", this).show();
$(this).addClass("selektume");
$('.rotate_handle').unbind('click');
$('.rotate_handle').click(function(){
gag += 45;
$('.selektume').rotate(gag+'deg');
});
$('.delete_handle').click(function() {
$('.selektume').remove();
});
return false;
});
$(document).click(function () {
$("p").hide();
$(".lgutipT").removeClass("selektume");
});
//check if dropped inside the conteiner div#des
if((left_ >= 0) && (left_ <= w_) && (top_ >= 0) && (top_ <= h_))
{
$(objName).css({"left":left_,"top":top_});
// assign a z-index value
zindex = left_ + top_;
$(objName).css({"z-index":zindex});
$(objName).addClass("lgutipT");
//$(objName).addClass("ui-widget-content");
$(objName).removeClass("drag");
$(objName).append('<p><img class="handler" src="images/move_button.png"><img class="rotate_handle" src="images/rotate_button.png"><img class="delete_handle" src="images/delete_button.png"></p>');
$("p", this).show();
}
/*========================================================================*/
//When an existiung object is dragged
$(objName).draggable({
containment : "#desk",
handle : ".handler",
cursor : "move"
});
}
});
Very tricky problem since there's no good documentation on how jQuery UI treats events at a core level. The solution was to unbind and rebind the click event. In IE, the click event is treated differently than other browsers. The solution was simply to rebind the click event after everything is done (1/1000 of a second delay).
My solution was to move the click event, add an unbinding on drag start, and to add a setTimeout() on rebinding the $(document).click() event listener when drag was complete.
View the source below to view the working solution.
http://jsfiddle.net/MattLo/AbF6t/
Copy and Paste the HTML to your dev environment.

Categories