I am building a webpage which includes a Gridstack grid. I initialise it like this:
<script type="text/javascript">
var grid = GridStack.init({
acceptWidgets: false, // Accept widgets from other grids or from outside.
alwaysShowResizeHandle: true, // Should resize handle be visible at all times or only at hover.
animate: false, // ???
auto: true, // Should Gridstack automaticaly initialize it's items?
cellHeight: "155px", // One cell height.
column: 48, // Number of columns to which to snap to.
disableDrag: false, // Eanble or disable dragging.
disableOneColumnMode: true, // Disable "one-column" mode when width equals minimal width.
disableResize: false, // Enable or disable resizing.
draggable: true, // ???
dragOut: true, // Prevent dragging items outside of their parent element.
float: true, // Enable floating tiles.
handle: '.grid-stack-item-content', // Select draggable handle class.
handleClass: 'grid-stack-item-content', // Select draggable handle class (override).
itemClass: 'grid-stack-item', // Choose class, which will be treated as a tile.
maxRow: 12, // Maximum rows where zero means unlimited.
minRow: 1, // Minimum rows to prevent empty grid from colapsing.
minWidth: 768, // Constant width which determines, when "one-column" mode is triggered.
oneColumnDomSort: false, // ???
placeholderClass: 'grid-stack-placeholder', // Select placeholder class.
placeholderText: '', // Text inside a placeholder.
resizable: { // Should resize handle be visible at all times or only at hover (override).
autoHide: false,
handles: 'n, nw, w, sw, s, se, e, ne'
},
removeable: false, // Enables removing of tiles if they are dragged outside of the grid.
removeTimeout: 2000, // Time in "ms" before tiles dragged out of the grid are removed.
row: 48, // Fixed number of rows where zero means unlimited.
rtl: false, // Right to left mode.
staticGrid: false, // Prevent any kind of resizing or drag & drop functionalities.
verticalMargin: 20, // Vertical gap between tiles.
});
</script>
And then I dynamicaly create a widget i.e. tile, using:
<!-- Gridstack: Example of adding a tile i.e. widget -->
<script>
grid.addWidget(`
<div>
<div class="grid-stack-item-content">
<p>...</p>
</div>
</div>`,
0,0,1,1,true,1,48,1,48,"ID");
</script>
This creates the widget in Chromium, Firefox, Edge. But not in IE11. Does anyone know what could I be doing wrong? It looks like I am doing all by the manual...
This is the console log in IE11:
And if I click on the error I get this line, where there seems to be no weird characters:
Related
I am using JarvisWidget library to create widgets, in which i create a table using handsontable library. but the table exceeds the widhth of the widget. I want to put a scrollbar. I tried in css wdith:100%; and then overflow-x:scroll. but it didn't working.
That how its coming. But i want to put a scrollbar and and show the whole table inside the widget
here is my table code:
<section class="col-md-12">
<div id="table_example" class="handsontable"></div>
</section>
var container = document.getElementById('table_example');
var hot = new Handsontable(container, {
data: handsOnData,
renderAllRows: true,
fixedRowsTop: 0,
colHeaders: true,
rowHeaders: true,
formulas: true,
comments: true,
manualRowResize: true,
manualColumnResize: true
});
Finally got it..
windowWidth = ($("#wid-id-1").width())-100; //retrieve specific div width
windowHeight = $(window).height(); //retrieve current window height
$("#table_example").css('width',windowWidth);
$("#table_example").css('height',windowHeight);
wid-id-1is the id under which the section is written. or the we can say the parent div of the table. And add style="overflow:hidden" to the table
An issue thats been plaguing me for some time now. I cant get spin.js to work on submit buttons.
Heres a fiddle:
http://jsfiddle.net/xSDGx/24/
If you comment out the submit button and instead allow the div then it works fine.
Thanks.
For reference:
<input type="submit" id="spin">
var spinner;
var opts = {
lines: 13, // The number of lines to draw
length: 5, // The length of each line
width: 2, // The line thickness
radius:5, // The radius of the inner circle
corners: 1, // Corner roundness (0..1)
rotate: 58, // The rotation offset
direction: 1, // 1: clockwise, -1: counterclockwise
color: '#fff', // #rgb or #rrggbb or array of colors
speed: 0.9, // Rounds per second
trail: 100, // Afterglow percentage
shadow: false, // Whether to render a shadow
hwaccel: false, // Whether to use hardware acceleration
className: 'spinner', // The CSS class to assign to the spinner
zIndex: 2e9, // The z-index (defaults to 2000000000)
top: '57%', // Top position relative to parent
left: '50%' // Left position relative to parent
};
var target = document.getElementById('spin');
var spinner = new Spinner(opts).spin(target);
$(target).data('spinner', spinner);
As explained in a comment, submit buttons aren't meant to contain other elements.
This poses the issue with the question.
To get around this I have wrapped the submit button in a div with the same width and height.
<div id="wrap">
<input type="submit">
</div>
You can use a <button> element instead, which by default acts as submit button:
http://jsfiddle.net/fgnass/q6ou3dt7/
For example I have two classes A and B, I need that when I hover over the change which is the amount, color, etc. B. I do not know if I can do this using CSS and onmouseover.
I'm putting a piece of code that handle the creation of the table and the definition of the class C.
What I need here is that when the User delecione or hover over the table activate this class C
jQuery(grid_selector).jqGrid({
url:urllst,
datatype: 'json',
height: 'auto',,
ignoreCase: true,
colNames:['UF','NAME','CITY' ],
colModel:[
{name:"uf",index:"uf", width:100, sorttype:'text', viewable: true, frozen: true, focus: true,
stype:'text',
formoptions:{elmprefix:'*', label: 'UF:', rowpos:1, colpos:1},
editable:true,
editrules: {required: true},
edittype: 'custom',
classes: 'c',
editoptions: {style: "text-transform: uppercase",
'custom_element' : macro_uf_element,
'custom_value' : macro_uf_value,
},
I believe you need to use javascript, but I could be wrong.
//grab all of the item images and make sure their popup description shows
var $contentWrapper = $("#contentWrapper");
//and bind the events that allow us to have a popup window follow the cursor
$contentWrapper.on("mouseover", className, function(event) {
var $itemDescription = $(this).parent("").find(".description");
//when the users cursor enters the item ensure that it enables vision of the popup and initialize the coordinates
updatePosition(event.clientX, event.clientY, $itemDescription);
$itemDescription.show();
});
that's a little snippet of code I use for showing a div when a user hovers over an image, I believe this is similar to what you're looking for.
Hy guys, I resolved as follows.
I declared the function mouseenter and mouseleave because only hover was setting the color and not returned to normal.
When you position the mouse over the table row selection will occur in class C.
$("#tabDados").mouseenter(function(){
$(".c").css("background-color","#eff3f8");
});
$("#tabDados").mouseleave(function(){
$(".c").css("background-color","#fff");
});
I have a web page that is loading images and scans across about 600+ images as the user presses next or previous. This is working fine. However, the image load time is slow so the idea is to put a processing while in place of the images until they are fully loaded. I can get the processing wheel to load perfectly fine but I cannot get it to hide once the image or document is loaded. I have tried doing this two different ways:
Attempt 1:
$('#centerImage').ready(function () {
$('.spinner').css('display', 'none');
});
Attempt 2:
$('#centerImage').ready(function () {
$('.spinner').hide();
});
I have also tried replacing the selector #centerImage on the .ready() function with document but still don't see the Processing Wheel get hidden.
What I find strange is that when I try and hide an ID instead of a Class, it works perfectly fine. I tried a 'Try Me' on W3 Schools with a simple example and hiding a class with the .hide() doesn't work there either.
Google isn't returning anything specific to any limitations with jQuery hiding classes. Is this possible or am I approaching this the wrong way?
NOTE: I'm using spin.js for the processing wheel.
All Code:
JavaScript:
EDIT: Added .load instead of .ready
var previousImage = document.getElementById("previousImage");
var centerImage = document.getElementById("centerImage");
var nextImage = document.getElementById("nextImage");
previousImage.setAttribute("src", "../.." + document.getElementById("MainContent_lblPreviousImage").innerHTML);
centerImage.setAttribute("src", "../.." + document.getElementById("MainContent_lblCenterImage").innerHTML);
nextImage.setAttribute("src", "../.." + document.getElementById("MainContent_lblNextImage").innerHTML);
$('#centerImage').load(function () {
$('.spinner').hide();
});
HTML/ASP.NET:
<div id="images">
<img id="previousImage" onload="showProgress()" alt="" src=""/>
<img id="centerImage" onload="showProgress()" alt="" src=""/>
<img id="nextImage" onload="showProgress()" alt="" src=""/>
</div>
Show Progress JavaScript File:
function showProgress () {
var opts = {
lines: 13, // The number of lines to draw
length: 20, // The length of each line
width: 10, // The line thickness
radius: 30, // The radius of the inner circle
corners: 1, // Corner roundness (0..1)
rotate: 0, // The rotation offset
direction: 1, // 1: clockwise, -1: counterclockwise
color: '#000', // #rgb or #rrggbb or array of colors
speed: 1, // Rounds per second
trail: 60, // Afterglow percentage
shadow: false, // Whether to render a shadow
hwaccel: false, // Whether to use hardware acceleration
className: 'spinner', // The CSS class to assign to the spinner
zIndex: 2e9, // The z-index (defaults to 2000000000)
top: '50%', // Top position relative to parent
left: '50%' // Left position relative to parent
};
var target = document.getElementById('images');
var spinner = new Spinner(opts).spin(target);
}
Thanks in advance for any helpful input.
As #Barmar $("#centerimage").ready() is the same as $(document).ready(). There's no separate ready event for each element, it just applies to the whole DOM.
Ready is used to check if the DOM is ready and the load is used to check if the Content is loaded.
Use load instead of ready:
$('#centerImage').load(function () {
Situation:
I have a function that dumps input data into an HTML block element, eg:
function national(){
x=Number($('#nationalBudget').val());
a=x*2;
$('#one').text(a);}
Then it prints the input into any element with the id="one"
<span id="one"></span>
This is fine, but I would like to incorporate a jQuery Bargraph. The bargraph that I am using is fed by an array:
coolnessGraph = new Array(
[100000,'ROI w/ Local Spending'],
[200000,'ROI w/o Local Spending']
$("#ROIchart").jqBarGraph({
data: coolnessGraph, // array of data for your graph
title: false, // title of your graph, accept HTML
barSpace: 10, // this is default space between bars in pixels
width: 400, // default width of your graph
height: 200, //default height of your graph
color: '#F8981D', // if you don't send colors for your data this will be default bars color
colors: false, // array of colors that will be used for your bars and legends
lbl: '', // if there is no label in your array
sort: false, // sort your data before displaying graph, you can sort as 'asc' or 'desc'
position: 'bottom', // position of your bars, can be 'bottom' or 'top'. 'top' doesn't work for multi type
prefix: '', // text that will be shown before every label
postfix: '', // text that will be shown after every label
animate: true, // if you don't need animated appearance change to false
speed: 2, // speed of animation in seconds
legendWidth: 100, // width of your legend box
legend: false, // if you want legend change to true
legends: false, // array for legend. for simple graph type legend will be extracted from labels if you don't set this
type: false, // for multi array data default graph type is stacked, you can change to 'multi' for multi bar type
showValues: true, // you can use this for multi and stacked type and it will show values of every bar part
showValuesColor: '#fff' // color of font for values
});
Problem:
I would like to replace the hard numbers (e.g. 100000 & 200000) in the array with the output that is dumped into my HTML object. I've tried the following:
var TestVariable = <span id="one"></span>;
coolnessGraph = new Array(
[TestVariable,'ROI w/ Local Spending'],
and just about every other iteration of syntax I could think up to make the process work. I also tried waiting to fire the graph after the first calculation has been run.
Is there an error my logic?...syntax?...any help would be greatly be appreciated.
If I'm reading correctly, you only need to pass $('#one').text(), or a variation of that, into the array. Am I missing something?