when I click a box, i can drag it around the screen. You can click the folder icon to open up information view, and a scroll bar will appear because there are a lot of text.
Problem: when i use my mouse to scroll the scrollbar, it also drags the boxes as well. How do I make it not move the box when I click the scroll bar to move the bar?
I am using jsPlumb.draggable() to enable dragging.
jsfiddle: http://jsfiddle.net/7PuN3/2/
I would stop/start dragging:
$(function(){
$('#1 .button_wrap').on('click', function(e){
e.stopPropagation();
$(".info").html(newHtml).show();
jsPlumb.setDraggable("1", false)
});});
$(function(){
$("#1").on("click", ".info .ui-icon-close", function(){
$(".info").hide();
jsPlumb.setDraggable("1", true)
});
});
then in your css add this class, not to let the div fade when dragging is disabled:
.ui-state-disabled{opacity: 1;}
Quick look suggests to me, use relative or absolute positioning not fixed on button wrap. On my mobile it seems to work fine though.
Related
I have a slideshow that’s using jQuery cycle2. I’ve included a jsfiddle with a mockup of how it needs to function in my project: https://jsfiddle.net/b1tfx58o/2/
It has navigational links on the side and it has a red small box on the edge that’s supposed to move to align with the nav link. For example if I click “slide 2” than the red box will slide down and stay there like it does for slide 1. If I click either slide 1 or slide 3 than it will move to be in the middle of the border line for that link. You should also be able to click on the red box to make it go to the next slide. I have that part working but not moving it when I click the links. Any help on this would be much appreciated!
The script so far(checking the JSfiddle will make more sense):
var icon = $('.icon');
var slideshow = $('.cycle-slideshow');
icon.on('click', function(e){
e.preventDefault();
slideshow.cycle('next', function(){
});
});
You need to add click listeners to each list link, to run a function that .getBoundingClientRect() of 'this', referring to the link clicked, then use the 'top' value from getBCR to change the top position of your icon element. You'll likely have to combine it with window.scrollY for your project.
See here https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect & good luck
I'm newbie to JavaScript. I used the search to find solution for my problem, but I couldn't find what I was looking for.
I am using this jquery.balloon.js, which transforms the default browser rendering of the tooltip to customized one (with adding some CSS to it – background, border, etc.).
This is the JavaScript code:
$(document).ready(function(){
$('a').balloon({
position: "bottom",
tipSize: "0"
});
});
Everything works just fine: when I hover the mouse on a link with included title attribute, the tooltip shows up customized. When I hover out the mouse the tooltip hides.
The problem comes when browsing on touch screen devices.
There is no mouse for hovering, so I tap once on the link and the balloon tooltip shows up (the link does not activate, the link is activated only when I tap twice), but then the tooltip does not hide. I tap somewhere on the body, but the tooltip remains on the screen.
I know how to hide elements in JavaScript by clicking/tapping outside them (in the html or body) with $('html').click(function() { //code });, but here the problem is that the tooltip is not an element, but attribute...
How to hide only the tooltip with tapping somewhere in the body?
You can test this behavior on the jquery.balloon.js site here with any touch screen device to see that once activated by tapping the tooltip can't hide.
Thanks for the only answer, but I figured it out.
I have created a class with the following code:
$.balloon.defaults.classname = ".balloon";
$.balloon.defaults.css = null;
This way I created .balloon class which allowed me to customize the tooltip by myself. I used this code to hide the tooltip by hiding the .balloon (which hides the newly customized jQuery tooltip):
$(document).ready( function(){
$('body').click( function(event){
event.stopPropagation();
$('.balloon').hide();
});
});
You can call the hideBalloon function.
So i want to disable the window scrolling on mousedown+mousemove, i searched everywhere, but i can't find anything.
body { overflow: hidden } doesn't work, you can still scroll if you press the mouse, and you go down.
The problem i have, is that on clicking on an image thumb, it opens a positioned absolute div (100% height & width and a 50% black transparent .png) that shows the original image, and when i press the left mouse button and i move down, all the items behind the absolute div, start to scroll down.
Here is an example of what is happening. http://jsfiddle.net/T2qBw/1/
(Click the black div, a position fixed div opens, press left click, and move down).
Thanks in advance.
PS: I apologize if i made any grammar or spelling mistake. (English isn't my native language)
$(".open-overlay").click(function(){
$(".overlay").css("display","block");
$("body").css({overflow:'hidden'});
$(window).on('mousedown', function(e) {
e.preventDefault();
})
});
Don't forget unbind mouse event
$(window).off('mousedown')
I'm using simple modal. Is there any way to keep the background (behind the overlay) from scrolling when you roll the mouse wheel while outside the boundaries of the modal?
Thanks!
While creating the modal, set overflow:hidden for body. Then you will not be able to scroll the background and when hiding the modal, set overflow:auto for body.
I think you can do this:
$(document).on('mousewheel', '.simplemodal-overlay, .simplemodal-data', function(event) {
event.preventDefault();
});
I'm not sure if mousewheel has full cross-browser support, though.
Edit: I verified this works, but you need the mousewheel plugin: https://github.com/brandonaaron/jquery-mousewheel/downloads
Example: http://jsfiddle.net/jtbowden/AhpLc/
(I pasted jquery.mousewheel.min.js into the script area... Don't do that)
i have a overlay box that is fixed and centered on the screen. The page itself is rather long and has a vertical scrollbar.
I'd like to disable scrolling of the page itself once the overlay is shown. However I can't disable scroll completely because some overlays do have overflow-y:scroll for themselves. So the content in the overlay should be scrolled but the page itself should be stuck.
Any idea how to solve that with jquery or css?
The quickest and dirtiest way I can think of is to attach an event listener to the window for scroll events, and preventDefault() if your overlay is visible.
like so (using jquery).
window.addEventListener('scroll', function(e){
var el = $('.overlay.active');
if( el.length > 0 ){
e.preventDefault();
}
});
Hope this is what your looking for.
You can set the body to overflow: hidden. This will prevent scrolling. Child's overflow declarations stay unaffected. I have done a little fiddle.
Just an adjustment to Marc's jQuery solution. My code disables the body scroll as the overlay appears, then when the body or overlay close button is clicked, the body scroll is re-enabled.
/*We disable the scroll*/
$(function() {
/*This is where we specify what button is being clicked to open the
overlay, change at will.*/
$('#overlay1').click(function() {
/*This is where we specify what part of the page is gonna disable the
scroll, in this case the body.*/
$('body')
.css('overflow', 'hidden');
});
/*Now we re-enable the scroll*/
/*This is where we specify the the part of the overlay that is being
clicked to close it, in this case, the body and the .close, change at will.*/
$('body, .close').click(function() {
/*This is where we specify the part of the page we are re-enabling
the scroll, in this case the body.*/
$('body')
.css('overflow', 'visible');
});
});
Here's a little JSFiddle of my script in action.
You can position your overlay as a {position: fixed;}. That will keep your overlay in your screen even if your page scrolls.
You could create an full width and full height container, with position: fixed. And inside this container create your actual overlay with info. The container basically blinds the user from scrolling or interacting with the page.