The problem is very elemental.
If you go to http://flexigrid.info/ with IE9, and explore the 'example 2' section, and the columns resize over the visible place, that it will activate the horizontal scrollbar. And you hover the rows, you experience growing up the Flexigrid size. I don't experience IE7 and IE8, only IE9. This problem has by height: auto configurate. I didn't find solution yet. Please help me!
Actually, the solution that #Szenti posted will only work for 1 flexigrid on the page, if there are multiple, it will only takes the height value of the 1st bDiv it founds and apply the fix to all.
My revised version I think will apply to situations where there are many flexigrids on the page at one time.
ie9Fix: function() {
var bDivH = $(this.bDiv).height();
var bDivTH = $('table', this.bDiv).height();
if(bDivH != bDivTH && p.height=='auto') {
$(".bDiv").css({height: bDivTH + 18});
}
},
I had this same issue. Thanks #Szenti for the Answer, however, once this was in place I then had flexigrid resize issue when the results in the table where regenerated via AJAX. This occured in latest Chrome, Firefox and IE7/8.
So I added a (some would say dirty) browser sniff into the mix.
Global var:
var ie9 = false;
if ($.browser.msie && parseInt($.browser.version, 10) == 9) {
ie9 = true;
}
Then where #Szanti's method is called I just wrap it in:
if (ie9) {
this.ie9Fix();
}
Now works a treat in all browsers.
The solution:
You have to edit the flexigrid js. Append the g object with this:
ie9Fix: function() {
if($(".bDiv").height() != $(".bDiv table").height() && p.height=='auto') {
$(".bDiv").css({height: $(".bDiv table").height() + 18});
}
},
You have to call ie9Fix function in 2 places
In the g.dragEnd() function last row (this.ie9Fix();)
In the g.addRowProp() you have to write a new event:
.mouseleave(function(){
g.ie9Fix();
})
That's it!
Related
How to fix the problem of having the navbar as position: fixed in Sitecore 9.3. I saw some solutions on the blogs, but it only fixes the issue on the Sitecore 8 versions.
Basically when I open the partial design in Sitecore Experience Editor, I have set my navbar as position fixed in theme css file, and it shows the navbar below the scWebEditRibbon. I also saw that scWebEditRibbon is now position fixed, still it does not fix my issue since I also have position fixed on my element.
I fixed the issue by using the script provided Richard Szalay, I just changed the variable as you can see here:
Here is the script:
// Repositions a position-fixed header so that it always appears under the SC experience editor ribbon
define(["sitecore"], function (Sitecore) {
return {
priority: 50,
execute: function (context) {
// TODO: Change this CSS selector to suit your application
var FIXED_NAV_SELECTOR = '#navbar';
// the 'cross piece' is a blank div that is sized to match the iframe content (where the actual ribbon is)
var scWebEditRibbon = window.parent.document.getElementById('scWebEditRibbon');
var nav = window.parent.document.querySelector(FIXED_NAV_SELECTOR);
if (scWebEditRibbon && 'MutationObserver' in window) {
var observer = new MutationObserver(function (mutations) {
nav.style.top = scWebEditRibbon.style.height;
});
observer.observe(scWebEditRibbon, { attributes: true, attributeFilter: ['style'] });
}
}
};
});
My App does the following things:
Refreshes the model
Applies filters
Gets the items of a table using the .getItems()
Loops at the items and applies CSS
Upon testing CSS, noticed that something wasn't right, correct CSS attributes were applies on the 2nd time when I pressing the button with the same filters. Started debugging and as soon as I reached the loop, I found out that the .getItems() seems to return the previous contents of the table.
Noticed also while having the debugger open and proceeding step by step that right before the actual contents appear on the screen, a previous list corresponding to the previous data and with correct CSS attributes flashing on the screen for a moment. Thought that the method is asynchronous and I have to implement the loop within the success function but when I visited the documentation List getItems() I noticed that the method accepts no such parameters.
In case the above are correct and I'm not missing anything, how can I retrieve the actual contents of the table?
Code (4 lines actually, remaining part is the loop) embedded below, thanks in advance.
oView.getModel("Report").refresh(true, true);
this.byId("statusReportTable").getBinding("items").filter(oTableSearchState);
this.getModel("Global").setProperty("/statusTableVisible", true);
this.oStsTable = this.getView().byId("statusReportTable");
var aItems = this.oStsTable.getItems();
if (aItems && aItems.length > 0) {
for (var i = 0; i < aItems.length; i++) {
if (i === aItems.length - 1) {
aItems[i].addStyleClass("pinkBackground");
} else {
var even = i % 2;
if (even !== 0 && i < aItems.length) {
aItems[i].addStyleClass("cyanBackground");
}
}
}
}
Should be more patient before posting. Found the answer, it's just a matter of attaching an updateFinished event on the table and putting the getItems() in there.
Hello,
I wonder how do I change my mouse event
because I would like to X.Caption activates only when I right-clicked on it.
thank you very much
If I'm correct ( other contributors, don't be afraid to correct me ), you might have to edit the internals of XTK for your needs. XTK has the "controls" defined in X.event.js for it's event such as HoverEvent and PanEvent which are acquired from the Google Closure Library. You can look into the Google Closure Library more as I haven't completely reviewed it, but X.caption is mostly derived from Goog.ui.Tooltip which can be used with the events from Goog.ui.Popup, Goog.ui.PopupBase, and Goog.events. You can try to include Goog.events into your Javascript and define your own click event or something related to that and look through the Google Closure Library some more.
If what I just wrote in the small paragraph above is not completely correct or anything like that, there are of course basic Javascript DOM Events for clicking. I'm not quite sure how those would work with XTK because XTK uses WebGL for rendering. You can review the basic events at http://www.w3schools.com/jsref/dom_obj_event.asp. If you find any solution for yourself, you are more than welcome to contribute it to XTK.
I think there are too ways no ? Change the xtk source code and compile your own version or something like this :
window.onload = function() {
myrenderer.config.HOVERING_ENABLED = false; // disabling show caption on mousehover
var mouse_x, mouse_y;
myrenderer.interactor.onMouseMove = function(event) {
mouse_x = event.offsetX;
mouse_y = event.offsetY;
}
myrenderer.interactor.onMouseDown = function(left,middle, right) {
if (right) {
var picked_id = myrenderer.pick(mouse_x, mouse_y);
if (picked_id==-1) throw new Error("No object");
var picked_object = myrenderer.get(picked_id);
var mycontainer = myrenderer.container;
var caption = new X.caption(mycontainer,mycontainer.offsetLeft + mouse_x + 10, mycontainer.offsetTop + mouse_y + 10,myrenderer.interactor);
caption.setHtml(picked_object.caption);
// use settimeout or something else to destroy the caption
}
}
}
The following JSFiddle shows how to do that. To actually display a tooltip etc. you can use any JS Library like jQuery UI.
http://jsfiddle.net/haehn/ZpX34/
I am creating a custom item editor, and am using the following blog post as a reference for responding to the "save" event in the Content Editor, so that I do not need to create a second, confusing Save button for my users.
http://www.markvanaalst.com/sitecore/creating-a-item-editor/
I am able to save my values to the item, but the values in the normal Content tab are also being saved, overriding my values. I have confirmed this via Firebug. Is there a way to prevent this, or to ensure my save is always after the default save?
I have this in as a support ticket and on SDN as well, but wondering what the SO community can come up with.
Thanks!
Took a shot at an iframe-based solution, which uses an IFrame field to read and save the values being entered in my item editor. It needs to be cleaned up a bit, and feels like an interface hack, but it seems to be working at the moment.
In my item editor:
jQuery(function () {
var parentScForm = window.parent.scForm;
parentScForm.myItemEditor = window;
});
function myGetValue(field) {
var values = [];
jQuery('#myForm input[#name="' + field + '"]:checked').each(function () {
values.push(jQuery(this).val());
});
var value = values.join('|');
return value;
}
In my Iframe field:
function scGetFrameValue() {
var parentScForm = window.parent.scForm;
if (typeof (parentScForm.myItemEditor) != "undefined") {
if (typeof (parentScForm.myItemEditor.myGetValue) != "undefined") {
return parentScForm.myItemEditor.myGetValue("myLists");
}
}
return null;
}
In theory, I could have multiple fields on the item which are "delegated" to the item editor in this way -- working with the content editor save rather than trying to fight against it. I'm a little uneasy about "hitchhiking" onto the scForm to communicate between my pages -- might consult with our resident Javascript hacker on a better method.
Any comments on the solution?
EDIT: Blogged more about this solution
When you insert a flash object into the CKeditor the editor window will show this symbol:
I was wondering. Is it possible to do something similar when users inserts this tag into the editor (using regex {formbuilder=(\d+)}/ ):
{formbuilder=2}
If so, could someone please explain how to? :)
UPDATE:
I've been looking at the PageBreak plugin to try and understand what the hell is going on. The big difference between this plugin and mine is the way the HTML is inserted into the editor.
CKEDITOR.plugins.add('formbuilder',
{
init: function(editor)
{
var pluginName = 'formbuilder';
var windowObjectReference = null;
editor.ui.addButton('Formbuilder',
{
label : editor.lang.common.form,
command: pluginName,
icon: 'http://' + top.location.host + '/publish/ckeditor/images/formbuilder.png',
click: function (editor)
{
if (windowObjectReference == null || windowObjectReference.closed){
var siteid = $('#siteid').val();
windowObjectReference = window.open('/publish/formbuilder/index.php?siteid='+siteid,'Formbuilder','scrollbars=0,width=974,height=650');
} else {
windowObjectReference.focus();
}
}
});
}
});
As you can see, my plugin opens a new window and the tag is inserted with:
function InsertForm(form_id)
{
// Get the editor instance that we want to interact with.
var oEditor = CKEDITOR.instances.page_content;
// Check the active editing mode.
if ( oEditor.mode == 'wysiwyg' )
{
// Insert the desired HTML.
oEditor.insertHtml( '{formbuilder='+form_id+'}' );
}
else
alert( 'You must be on WYSIWYG mode!' );
}
The PageBreak plugin does everything when you click on the toolbar icon. This makes it possible to make the fakeImage inside the plugin file. For me on ther other hand, I don't see how this is possible :\
I'm looking to solve a similar issue, except that all my stuff looks like XML. So like, <cms:include page="whatever" />. In your case, you would be able to copy the placeholder plugin and change the placeholder regex to match your tags. In my case, looks like I'll be modifying the iframe plugin or something, and hopefully figuring out how to add each of my tags as self-closing...