I think it's easy but I don't find the answer. I want to pass some data to a colorbox window and use them it. I did like that to open the colorbox:
$.colorbox({
href:my_target,
iframe: false,
open: true,
width: "830px",
height: "560px",
speed: "0",
transition: "none",
opacity:0.5,
escKey: true,
overlayClose:true,
data: {"test":"123456"}});
The colorbox is opened but I can't acces to the data "test".
How can I do that? Is it possible?
If this is not the right method, what is the good?
Remember the general page model; when you are not using ColorBox's iframe option, the plugin and the content are just ordinary members of the DOM. You can reference any variable from "inside" it just as you would with any javascript loaded by the page.
You would probably use ColorBox's event hooks to run functions that acted on the data.
Related
I'm using swiper 8.4.4.
I'm looking to disable the "click" functionality, but keep the "drag" events enabled.
The parameter "simulateTouch" enables both the click and drag functionality. So turning it to false is not an option.
I see this post which plays with swiperjs parameters to achieve the opposite of what I'm looking to do: remove the drag effect while keeping the click: Swiper Touch Events - Enable click but disable drag
Would you folks have a suggestion I might try?
I tried specifying the following parameters from swiperjs, but they did not help me achieve the goal of disabling click while allowing drag event.
allowTouchMove: true, simulateTouch: false, slideToClickedSlide: false, touchReleaseOnEdges: false, a11y: false, watchSlidesProgress: true,
Add pointer-envets CSS property.
.swiper-slide {
pointer-events: none;
}
Here is working example: https://codesandbox.io/s/swiper-slides-per-view-forked-r0ociq?file=/index.html:1428-1469
In the past I have incorporated some images that exist on the Rally server into my Apps-- for example I made a more generic "picker" menu that displays checkboxes, which of course rely on images for the checks and boxes.
Of course I would expect to have to check if any images I am using persist when the SDK version changes, but it never-the-less allows for some additional functionality and style you could not have without the images that exist on the server.
My question is: since there is no way to put our own images into Rally*, is there a way to find all the images possible that might be at our disposal on the server? I've used the "resources" tab in chrome and can find what is used by particular pages, but it is not complete, only what is used.
My specific need is that I'm trying to make a grid that shows metric, and I want a column that shows a green up/down arrow if the trend is good, and a red up/down arrow if the trend is bad.
*: Second answer below shows this is incorrect: you can put attachments into rally and then refer to them in apps
When I attach an image to a Rally artifact in my workspace it gives me a unique URL that I can use as follows:
var myPanel = Ext.create('Ext.panel.Panel',{
layout: 'hbox',
itemId: 'p',
items:[{
xtype: 'image',
autoRender: true,
src: 'https://rally1.rallydev.com/slm/attachment/12345678/pic.png',
width: 1000,
height: 200
}
]
});
An easy way to incorporate icons is to use the icon classes:
<span class="icon-NAME"></span>
You could customize the colors by changing the font color in the CSS:
<span class="icon-arrow-down" style="color:red"></span>
Here are the available icons I've been able to find:
icon-add
icon-add-column
icon-addTag
icon-admin
icon-archive
icon-arrow-down
icon-arrow-left
icon-arrow-right
icon-arrow-up
icon-attachment
icon-back
icon-bars
icon-bell
icon-blocked
icon-board
icon-box
icon-calendar
icon-cancel
icon-change-set
icon-chat
icon-chevron-down
icon-chevron-left
icon-chevron-right
icon-chevron-up
icon-children
icon-circle
icon-close
icon-collapse
icon-color
icon-comment
icon-cone
icon-cross
icon-dashboard
icon-defect
icon-defectSuite
icon-delete
icon-deploy
icon-donut
icon-dots
icon-down
icon-down_full
icon-down_hollow
icon-download
icon-drag
icon-dropdown
icon-edit
icon-embed
icon-empty
icon-enlarge
icon-expand
icon-export
icon-favorite
icon-feedback
icon-file
icon-filter
icon-fiveDots
icon-flag
icon-folder
icon-full-arrow-down
icon-full-arrow-left
icon-full-arrow-right
icon-full-arrow-up
icon-gear
icon-graph
icon-grid
icon-help
icon-hierarchy
icon-history
icon-home
icon-hourglass
icon-idea
icon-images
icon-infinity
icon-info
icon-info-circle
icon-leaf
icon-leave
icon-left
icon-line
icon-link
icon-lock
icon-lock-open
icon-mail
icon-minus
icon-more
icon-next
icon-none
icon-not-favorite
icon-ok
icon-partial
icon-pie
icon-plus
icon-popup
icon-portfolio
icon-post
icon-predecessor
icon-previous
icon-print
icon-program
icon-progress
icon-question
icon-ready
icon-recycle
icon-refresh
icon-reply-all
icon-right
icon-right_full
icon-right_hollow
icon-rss
icon-save
icon-scope-down
icon-scope-up
icon-scope-up-down
icon-search
icon-setup
icon-share
icon-shrink
icon-small-chevron-down
icon-small-chevron-left
icon-small-chevron-right
icon-small-chevron-up
icon-snapshot
icon-split
icon-square
icon-story
icon-successor
icon-tag
icon-task
icon-test
icon-test-run
icon-testCase
icon-testSet
icon-threeDots
icon-thumbs-down
icon-thumbs-up
icon-to-do
icon-triangle
icon-up
icon-upload
icon-user
icon-user-add
icon-users
icon-visible
icon-warning
icon-workspace
I have the following code for adding tooltip for onclick of a span id as shown below:
new dijit.Tooltip({
connectId: ['gridEditHelp'],
label: 'Double click on an item in the below table to perform inline editing of attributes',
position: ['above']
});
The problem is that I want the tooltip to be visible always on the web page.
Any ideas or existing API available for the same?
Use TooltipDialog instead - or else you will have to mess with the _MasterTooltip manager (there's more or less only one global, reusable tooltip). Then call dijit.popup.open - and never call .close
dijit.popup.open({
popup: new TooltipDialog({
id: 'myTooltipDialog',
style: "width: 300px;",
content: "<p>I have a mouse leave event handler that will close the dialog."
});,
around: dojo.byId('thenode')
});
I have an dojo enhanced grid inside a title pane which inturn in Tabcontainer. I am creating a tab container dynamically and painting the title pane which contains grid. For the first time the grid is painted properly but if i close the tab and again try it to open a tabcontainer title pane is painted but grid inside the titlepane is not painted (or rather its not visible) until i do a browser resize.
So anybody have faced similar kind of issue? Please let me know the solution for this.
I tried resize(), update() & startup() methods on grid nothing worked out.
I am kind of stuck please share your thoughts on this.
Thanks,
Vikram
I had the same problem and found a workaround by doing a dojo connect like:
dojo.connect(Datagrid,"_onFetchComplete",DataGrid,"_resize");
So it should automatically be resized, when DataGrid finished loading data.
Hope I could help.
Greeting, Simon
Have you tried setting an absolute height on the Grid?
Which browsers did you try? (I experienced various problems with DataGrid in TabCointainer using IE)
You must call the TabContainer.layout() each time its container is changing size. For doing this, you could 1) monitor DOMEvents onunderflow and onoverflow on containing DOMNode or 2) when container becomes visible (once-n-forall).
Reason why a window.onresize event fixes it is, that the TabContainer hooks on said event and calls its own layout.
In your situation, where the TabController fiddles with TabContainer's panes, there may be missing a 'layoutChildren' somewhere. Optimally, you should place the grid as the first on only child to tab.
After the grid is deployed, it will take an absolute, calculated height - 'inherited' from the TabContainer. This is fired once the TabContainer chooses to resize or instructed to do so.
Manually, you should be able to implement these lines - after re-opening a tab. The script is taken from _Grid.js to illustrate
var grid = dijit.byId('MYGRIDID');
require(["dijit/layout/utils"], function(layerUtils) {
layoutUtils.layoutChildren(grid.domNode,
grid._contentBox,
[grid.tablist, {
domNode: grid.tablistSpacer,
layoutAlign: titleAlign
}, {
domNode: grid.containerNode,
layoutAlign: "client"
}]);
grid._containerContentBox = layoutUtils.marginBox2contentBox(grid.containerNode,
{
domNode: grid.containerNode,
layoutAlign: "client"
});
// note this line in particular
grid.selectedChildWidget.resize(grid._containerContentBox);
}
My issue
I had a similar situation as yours:
Grid is in a titlepane (closed by default).
Grid can be destroyed and re-created on the fly.
Issue appears when user:
opens the pane.
closes the pane.
re-creates the grid.
re-opens the pane.
grid is not visible, until browser window is resized!
My solution
My approach was to force a resize() on my grid whenever the title pane was being opened.
I used code like this, in a place where I had access to both the grid and the panes:
var titlePane = registry.byId("title-pane-id");
var handle = aspect.after(titlePane, "toggle", function(deferred) {
if (titlePane.open) {
grid.resize();
}
});
The dojo/aspect doc
Don't forget to remove the aspect from your grid if you destroy it.
I did this on dojo v1.8.1
My solution is too easy: define on declaration of grid the bold parameter write here:
grid = new EnhancedGrid({id: 'MyIDgrid',
store: dataStore = new ObjectStore({objectStore: myStore}),
structure: structureGrid,
plugins: pluginGrid,
style : 'width: 725px; height: 350px',
autoWidth : true,
**autoHeight : false,height:'200px',**
elasticView : '2'
}, document.createElement('div'));
this resolve all!
Enjoy!
style="height: auto;" will fit the purpose.
I have a requirement where I need to create a dojox.layout.ContentPane programmatically.
function constructContentPane(methodToBeCalled){
var testCntPane=new dojox.layout.ContentPane({
href: "some url",
executeScripts: true,
cleanContent: true,
onDownloadEnd: methodToBeCalled
}).placeAt("testContentPaneId");
testCntPane.startup();
}
This places the content pane inside testContentPaneId and calls methodToBeCalled method once the content pane is created.
I have two questions.
How do I check if the content pane is already created or not? I tried to check using the code below
if(dijit.byId("testContentPaneId") == undefined) {
//then don't create again
}
But this did not work. Each time it creates the content pane with the id dojox_layout_ContentPane_0. The last digit gets incremented each time.
Is this the right way to pass the onComplete method as argument? This is how I invoke this
constructContentPane(thisMethodWillBeCalled);
Is there any better way to do this? How do I invoke that method? I tried using eval(methodToBeCalled), but that did not work.
When you use the placeAt() method then the widget will be placed as a child to the specified dom node. I think in your case you should pass the dom directly to the constructor of the content pane.
Try doing like this instead:
var testCntPane=new dojox.layout.ContentPane({
href:"some url",
executeScripts:true,
cleanContent:true,
onDownloadEnd:methodToBeCalled
}, "testContentPaneId");
This will also make sure that the id of the content pane is testContentPaneId