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)
Related
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.
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.
I am using smootdivscroll for displaying products on a website. Products all load into a large div which then scrolls left and right using the smootdivscroll script. I have setup arrows on left and right that scroll when hovered or clicked.
I want to disable the mouseover scrolling and only allow scrolling when arrows clicked.
Actual page
Smoothdiv scroll demo page
Regards.
I don't think it has that feature built-in. However you could probably make use of this public method : http://www.smoothdivscroll.com/publicMethods.html#move
Disable hotSpotScrolling in the options and bind some click event listeners to those arrows that will trigger the move() method.
After reading the documentation on this, its not going to be possible without hacking the plugin. The hotspots listen for hover and click, and you cannot disable one without the other.
The place to hack away, should you choose to (not advised) is here https://github.com/tkahn/Smooth-Div-Scroll/blob/master/js/jquery.smoothDivScroll-1.3.js#L195
you will need to remove all but the mousedown and mouseup listeners.
Thanks for the help and ideas, below was my solution.
Firstly disable hotspots and hotspotscrolling:
visibleHotSpotBackgrounds: "",
hotSpotScrolling: false
I created two links, late updated to arrow images that control the scrolling:
<a title="Scroll Left" href="#" onclick="MoveLeft();return false;">LEFT</a>
<a title="Scroll Right" href="#" onclick="MoveRight();return false;">RIGHT</a>
Use two simple functions to advance scrolling by +- 200px
<script type="text/javascript">
function MoveRight() {
$("#makeMeScrollable").smoothDivScroll("move", 200);
}
function MoveLeft() {
$("#makeMeScrollable").smoothDivScroll("move", -200);
}
</script>
To smooth the scrolling effect set:
easingAfterMouseWheelScrolling: true
i'm trying to slide a div element from outside the page to within the page. However as soon as the element is shown outside the page, horizontal scrollbars appear!
How can I achieve this without the scrollbars appearing?
Any help appreciated very muchly, thanks :)
Briefly, using overflow-x:
function moveStuff() {
$('body').css('overflow-x', 'hidden');
$('#iteminmotion').show().animate(..., function() {
$('body').css('overflow-x', 'auto');
});
}
move the element off the page to the left, moving it off to the right increases the width of the page
You could temporarily turn off side scrolling by applying this css to the body:
body {overflow-x:hidden;}
http://jsfiddle.net/pxfunc/YYUZJ/
Do you really need to construct the element off page, or just make it look like it slides onto the screen? Ive done similar things in the past to emulate a graphic that slides across a page, but instead of starting outside the view area I've created it as far to the side as possible and then animated the slide to the middle. The user experience at that point can be a graphic that slides onto a page from outside the view area.
I have a div with scrollbars. How can I detect if someone mousedowns on the scrollbar?
You can use the jQuery scroll function .scroll() and pass it a function to be called when scrolling occurs. See here for more info.
Example:
$('#targetdiv').scroll(function(event) {
//Stuff to do when scrolled
});
You then might be able to use the event data to see if a mouse button is pressed.
You can use the scroll event. jQuery also has a scroll convenience function.
I'm not sure if you can detect the scroll direction.
I dont think you can. But I believe you can bind something to the scroll event of the div that will trigger when the div actually has it's content's scroll position changed.