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
I have N rows of content that user should match using drag and drop (user moves items on the right to the corresponding item on the left). Here is an example:
All blocks should have the same height - the height of the largest item. (In this example the larges item is on the left, #2). Is it possible to do using pure CSS? I can't use flexbox due to browser support. I have managed to implement this using JS, but I don't like that solution :)
Maybe someone could point me to the technique or a similar example?
Thanks in advance.
Try this jquery code it detects the biggest element and sets all of them to that height.
var height = 0;
$(".table").find(".table-cell").each(function() {
height = Math.max(height, $(this).height());
});
$(".table").find(".table-cell").css("height", height);
Here is a JSfiddle example.
You need jquery for this so make sure adding the jquery library to your code.
I am trying to build a 2 column grid layout with masonry, but when I try using masonry they layout turns into this one column grid.
I think I may be using it wrong. I have been reading through the documentation, but don't know what else to do? To me, it seems like this code should cause they layout I am trying to achieve.
Here is the layout I am trying to achieve:
Here is my page with masonry: https://googledrive.com/host/0BwJVaMrY8QdcVDBweWk2UXlfTVE/KE%20copy.html
And here is the page without masonry: https://googledrive.com/host/0BwJVaMrY8QdcVDBweWk2UXlfTVE/KE.html
All I am trying to do is bring that first column up.
I would greatly appreciate any and all help!
Ok I download the html and tested it.
Please remove the margin-left of the items.
.dataCard { margin-left:3.2%; } /*Without this*/
And start the mansonary like so:
$('#main').masonry({
itemSelector: '.dataCard',
gutter: 20
});
This were the only changes done.
Here is an image of the result.
I have a table in which the even rows have a colspan spanning the width of the table and will contain details about the preceeding row. I'm trying to write a script that will resize the height of the row when the user clicks it to display it's contents. I am using a mixture of javascript and jQuery to do this and it works perfectly in IE9, however it doesn't work in anyother browser.
here is my test case...
http://www.duncangravill.com/Home/RevealResultsTest
it breaks the same way in all other browsers.
Is this a common problem with the jQuery Size effect? Does anybody know if there is a fix for this?
Thanks,
Try changing:
$(idToSelect).effect("size", { to: {height: 300} }, 500);
To:
$(idToSelect).animate({height:'300px'},500);
I have a html table and I want to freeze the header row th tag for scrolling the data. How I can do that? Does I need to use the Dom?
Thanks !!
My solution is to use two tables and fix the column widths. The lower table is in a scrollable div and has no header.
If you take Accessibility seriously, two tables is not the way to go since it breaks rules.
There are ways to do it in pure CSS, but it is a headache to get it to work in all browsers. There are a few examples out on the net, but they do not all work 100% with IE without tweaks.
I am currently working on a CSS only version, this is getting pretty close: http://www.coderanch.com/t/431995/HTML-JavaScript/Table-with-fixed-header-scolling#1918825
Does not work in IE8rc1 yet, IE6/7 has a border issue and you have to live with the scrollbar looking different in FF vs IE.
With FireFox, you can put style="height: 200px; overflow-y: auto" But to have a pure CSS version compatible with all major browsers, I've use this example since IE doesn't support syles in tbody or thead.
I have come up with a solution that sort of combines two previously mentioned ones. It uses jQuery and two tables , one for the header and one for the content. The header table is set to a width of 100% with no column widths set. At the bottom of the content table there is a row defined to match the header table with the column widths set. This row is hidden so that it is not shown, but retains the column widths.
For this example I gave my header row an ID of 'Header1' and the bottom row and ID of 'Header2'. Also I wrapped the content table inside a div with an ID of 'scrollTable'.
I set styles in my CSS file for the scrollTable ID, see below:
#scrollTable {
height:250px;
overflow-x:hidden;
overflow-y:scroll;
}
Now for the jQuery part. Basically what I'm doing here is taking the widths of the bottom row columns and setting the header columns to match. I stretch the width of the last column of the header so that it fits over the top of the scroll bar. See code below:
$(document).ready(function(){
var maxWidth = $('#Header1').width(); // Get max row Width
$('#Header2 th').each(function(i) { // Set col headers widths to to match col widths
var width = $(this).width();
$('#Header1 th').eq(i).width(width);
});
var blankSpace = maxWidth - $('#Header1').width(); // Calculate extra space
$('#Header1 th:last').width( $('#Header1 th:last').width() + blankSpace ); // Stretch last header column to fill remaining space
});
I have tested this successfully on IE 6, 7 & 8, Firefox 3.0.1.4, Chrome 3.0.195.25, Opera 10, and Safari 3.2.2 on Windows XP.
I've done it in the past using CSS by defining a height for the <TBODY> tag on my table, and using overflow:auto. This was a while ago, and I think there were some compatability problems. I don't remember precisely what they were, but this solution may work for your problem.
the best solution (the one that scales with lots of data) is to use 2 tables like aaron said, the top table has the headers, and the bottom table should have the headers as the last row (or the footer), but with opacity of 0, so that you cannot see them.
This the headers at the bottom make the bottom table have the same column widths as the top table, making things line up. make sure you style both header and footer the same.
you will also have to create a seperate scroll bar for vertical scrolling to the right of the table, because otherwise the scroll bar will mess up your widths. add a scroll event listener to set the scrolltop of the table to the scrolltop of the scrollbar, and resize the scroll bar to be the same height as the table.
its pretty easy, actually =)
Create a single table as you normally would to meet accessibility concerns. Dynamically create a new table based on the thead using jQuery (copy the thead) and inject it into the page above the first table and give it the fixed position. It should stay in place while the rest of the table scrolls, but it will still remain accessible and work with JavaScript disabled.
Have you tried this plugin from JQuery ? http://plugins.jquery.com/project/floatobject
I believe this does what you want. Check out the demo # http://amirharel.com/labs/fo/float_demo.html
Cheers!