in js.cytoscape limit the mouse scroll function - javascript

I am using in js.cytoscape library and the diagram is generated statically for a demo.
Now I am facing an issue with the mouse scroll, which Zooms in and out so much.
Is there a way to control this? I have seen the same happens in the provided demos. But it is not acceptable. Any work around.
Appreciate the help.
Thank you

The property wheelSensitivity changes that fast scroll behaviour, when you give it a value between 0 and 1, so just put this in your code:
var cy = cytoscape({
container: yourContainer,
elements: yourElements,
style: yourStyle,
layout: yourLayout,
wheelSensitivity: 0.5
});
If you have more questions like this, consider looking at the documentation of cytoscape, where you can find the answer most of the time. If you can't find the solution, feel free to ask on stackoverflow :)
Another thing, please show us what you already tried via code. Thank you

Related

What does $(window).stellar do?

I currently have this code (it's not written by me):
$(window).stellar({
horizontalScrolling: false,
responsive: true
});
Now, I'm curious about what it actually does. I did comment it but I didn't see any changes, but before I ruin something, I'd like to know what it does so I can decide whether to keep it in or not.
It seems to be activating this plugin:
http://markdalgleish.com/projects/stellar.js/
Its documentation says what those options do:
Configuring Offsets
Stellar.js' most powerful feature is the way it aligns elements.
All elements will return to their original positioning when their offset parent meets the edge of the screen—plus or minus your own optional offset. This allows you to create intricate parallax patterns very easily.
Confused? See how offsets are used on the Stellar.js home page.
To modify the offsets for all elements at once, pass in the options:
$.stellar({
horizontalOffset: 40,
verticalOffset: 150
});
Maybe this helps provide you with the informations you need ^^ http://markdalgleish.com/projects/stellar.js/docs/
Hello It is use for parallax scrolling effect and also you can refereed below link for more information.
http://markdalgleish.com/projects/stellar.js/docs/

TinyMCE windowManager - modal with scrollbars

I am trying to create a modal window with windowManager.open({...}) that will have a (probably long) list of items. Only way to ensure that it will display properly is to set fixed height to modal and make it's content scrollable.
Documentation on windowManager.open isn't really helping me here. I was able to find some examples describing scrollbars option:
editor.windowManager.open({
scrollbars: true,
height: 300,
...
});
But it is not working for me. If only someone could give me a hint on this, maybe I need to use some kind of Panel for my modal's body?
I will really appreciate if someone could update my Fiddle.
Hah, I've spent all of yesterday trying to figure this out but as soon I've posted my question I've found the answer myself.
I was trying to repaint the dialog after setting overflow: auto manually by calling win._bindings.repaint[0]() and it gave me an error:
Cannot read property 'autoScroll' of undefined
And it turned out that autoScroll is what I was looking for:
editor.windowManager.open({
autoScroll: true,
height: 300,
...
});

Is there a way to figure out what the widest element inside another element is?

I have the following issue: I'm working on an old website which uses a table layout. It's a huge, messy table with up to a hundred elements inside it. I'm not posting the code deliberately - it's enormous and I doubt anyone would have the patience or the will to go through it.
The problem I'm facing is the following: something is stretching the table, making it wider than it's supposed to be. I've tried going through the whole code to figure out what's going on, but no luck. I tried setting the width of the table to a fixed value, but no result.
So, my question is, is there a way to figure out (maybe using Javascript/jQuery) what the widest element in the table is? That would probably help me figure out what's stretching it, because going through this stuff line by line is going to take hours.
I would do something like this:
$('table').each(function() {
$(this).find('*').each(function() {
var oldWidth = $('body').data('width');
if(oldWidth != 'undefined' && $(this).width() > oldWidth)
$('body').data('width', $(this).width());
});
});
Haven't tested. Hope it will help!

jQuery scroller plugin amendment

I am currently using Max Vergelli's scroller plugin (http://www.maxvergelli.com/jquery-scroller/) and it is fantastic apart from the fact I need a slight amendment to it. However, I can't see a way to do it with the variables given.
Here is a jsFiddle of what I have so far: http://jsfiddle.net/X6DwY/6/
I am looking to set the text to be at the top of the #.vertical_scroller Div (so some of the text is already visible) not pre-hidden underneath it, then begins to scroll on-hover.
I think the plugin needs to be slightly altered for this to be achieved but can't get hold of the creator to ask, so I have come to S.O.
Anyone have any ideas on this? This is a bit beyond me :(
change this line:
var sh = parseInt(ob.parent().height());
to
var sh = 0;
sh = starting height, I assume. And it was set to the parent's height aka the bottom. 0 starts at the top then.
see this fiddle

Mootools: height of hidden elements

Morning all,
I'm trying to create a Mootools effect to show and hide replies to a comment on a discussion board. When the user clicks the "replies" link in the comment I want to increase the height of the comment container and then fade in the replies content. If the replies content is already visible, clicking on the link would reverse the effect.
I've got it sort of working, but I'm having trouble getting the correct height of my hidden elements (repliesH in my JS). I've tried getDimensions(), measure() and getComputedSize(), but they all give the same result: when elements are set to display:none I get a height that is too small; when I set them to display:block the height is correct. Can any kind person spot where I'm going wrong?
http://jsfiddle.net/andfinally/tVBCa/
Cheers
Fred
=======================
A BIT LATER
Just noticed - the width of the .comments-list container seems to have something to do with this problem. When I remove that width the effect works OK. This probably means that getDimensions gets the height of an element when it's not nested in anything. Can anyone suggest how I can work out what the height'll be when it is nested?
Cheers
Fred
you could use Fx.Reveal, it's very useful when u encounter these kind of problems, and it simplifies A LOT your code, i.e. (I've forked your example) => http://jsfiddle.net/steweb/DH27F/
A simple way to workaround it:
replies.show();
var repliesH = replies.getDimensions().y;
replies.hide();
Just show it, get dimensions and hides it again. This runs so fast that neither is visible to the user.
Your updated Fiddle here.

Categories

Resources