jQuery Ribbon

New Post: How to add a button with dropdown in Jquery Ribbon

VikiMohan — Sat, 03 Dec 2011 06:43:02 GMT

Hi ,

First of all thanks for the Jquery based implementation of Ribbon Layout

Do this current implementation have a "button with dropDown" as a single component ?

Will that be added in Future ?

As of now i was able to see Drop downs , Lists and buttons , Please let me know if there is any implementation of "Button With DropDown" (Just like the paste button in MS office toolbar )

Please guide me

Thanks in advance

Viki

New Post: ribbon alignment with sharepoint webpart

luqmaan — Thu, 09 Jun 2011 07:10:48 GMT

Hi,
I have developed a webpart using the jquery ribbon , i am facing alignment/positioning issue with the ribbon on IE8/9( On Windows server 2008 ).There is no issue with Firefox. I have embedded the jquery scripts in the project and modified them to work for the events required.I have also modified the css files.

Ribbon is aligning to left as it works in IE6.

Please help me get the ribbon displayed properly.
Thanks in advance.

Shabana.

Created Issue: ribbon alignment with sharepoint webpart [30797]

luqmaan — Mon, 06 Jun 2011 07:03:41 GMT

Hi,
I have developed a webpart using the jquery ribbon , i am facing alignment/positioning issue with the ribbon on IE8/9( On Windows server 2008 ).There is no issue with Firefox. I have embedded the jquery scripts in the project and modified them to work for the events required.I have also modified the css files.

Please find the screenshots and modified script/css files.

Please help me get the ribbon displayed properly.
Thanks in advance.

Shabana.

New Post: Any samples like Microsoft WebMatrix using Jquery

coderobotics — Thu, 26 May 2011 10:08:55 GMT

I am looking as it is Microsoft WebMatrix look and feel of editor on the web using Jquery or Silverlight, if anyone done the similar project/work, If yes, please share with me at sasi@coderobotics.com

New Post: How To add Link into Ribbon

lovedota21 — Tue, 21 Dec 2010 04:55:22 GMT

<a href="DanhSachKhachHang.htm"><img src="ribbon/images/dot.png" alt="Find" />Danh sách khách hàng</a>

I try this but the layout is corrupt,how can i fix it.Thanks !

Created Issue: Toogle button [29637]

Progi1984 — Fri, 03 Dec 2010 15:37:22 GMT

How is it possible to have a toogle button ?

A button can have two states : toogled or not.

Commented Issue: Opera 11 (maybe & 10) [29394]

SowingSadness — Wed, 10 Nov 2010 13:48:15 GMT

Top margin is changed if i click on page then mouse over on ribbon
Comments: ** Comment from web user: SowingSadness **

u can see it on demo page

Created Issue: Opera 11 (maybe & 10) [29394]

SowingSadness — Wed, 10 Nov 2010 13:47:33 GMT

Top margin is changed if i click on page then mouse over on ribbon

Commented Issue: jQuery 1.4.2 [26828]

Nishi3000 — Thu, 28 Oct 2010 09:27:30 GMT

Using jQuery 1.4.2 i get this error

$(".ribbon-list div ul:visible").parent().offset() is null
[Break on this error] var outsideX = e.pageX...t div ul:visible').parent().width();

Any thoughts?
Comments: ** Comment from web user: Nishi3000 **

Your fixes introduce another bug. You can notice it if you use your version of JS on the demo - click "Copy", "Paste"... they are highlighted forever...
To fix it, another change is necessary:

*** replace ***

$('.ribbon-list div').click(function(e) {
var elwidth = $(this).parent().width();
var insideX = e.pageX > $(this).offset().left && e.pageX < $(this).offset().left + $(this).width();
var insideY = e.pageY > $(this).offset().top && e.pageY < $(this).offset().top + $(this).height();

$('.ribbon-list div ul').fadeOut('fast');

if (insideX && insideY) {
$(this).attr('style', 'background-image: ' + $(this).css('background-image'));

$(this).parent().width(elwidth);

$(this).children('ul').width(elwidth - 4);
$(this).children('ul').fadeIn('fast');
}
});

*** with ***

$('.ribbon-list div').click(function(e) {
$('.ribbon-list div ul').fadeOut('fast');

var t = $(this);
if(t.children('ul').length) {
var elwidth = t.parent().width();
var insideX = e.pageX > t.offset().left && e.pageX < t.offset().left + t.width();
var insideY = e.pageY > t.offset().top && e.pageY < t.offset().top + t.height();

if(insideX && insideY) {
t.attr('style', 'background-image: ' + t.css('background-image'));

t.parent().width(elwidth);

t.children('ul').width(elwidth - 4);
t.children('ul').fadeIn('fast');
}
}
});

Created Issue: images/accessbg.png missing [29272]

Nishi3000 — Wed, 27 Oct 2010 12:25:08 GMT

Google Chrome says "images/accessbg.png Failed to load resource" in the JS console.

Commented Issue: jQuery 1.4.2 [26828]

dTardif — Fri, 22 Oct 2010 12:20:45 GMT

Thank you again Coolhand84 for coming back with an answer so rapidly.

I did implement the meta tag for IE8 and the ribbon renders perfectly. However, my web application uses the HTML5 canvas element which no longer works. I guess that's the web development dilemma, you fix something for one browser and you break something on the other.

At least there is a glimmer of hope; I'm not the only one with the problem. You or someone else will eventually find a solution.

Commented Issue: jQuery 1.4.2 [26828]

Coolhand84 — Fri, 22 Oct 2010 01:38:38 GMT

I tested in IE9 with jQuery 1.4.2 and 1.4.3. I noticed it does still fail to render if IE9 is using "IE9 Standards" mode. I haven't taken the time to look into why. The work around is to force IE9 to use "IE8 Standards" mode. Simply place the following tag in your html head section.
<meta http-equiv="X-UA-Compatible" content="IE=8"/>
If you already have that in your document, check to see that the path in the css link that the script is adding for the theme is indeed pointing to the css file. (Use the F12 developer tools, you may need to hit the refresh button on the html tab to capture the changes that the script has made to the html.)

Another possibility is that the browser has cached a version of the ribbon script that doesn't have the corrections. I am assuming this is not the case because you are seeing your alerts.

Attached a screen shot so you can see that it is working for me.

Commented Issue: jQuery 1.4.2 [26828]

dTardif — Thu, 21 Oct 2010 13:30:51 GMT

Thank you for the rapid response.

I sincerely hopped that your suggestions would correct my issues but they unfortunately don’t. I applied both of your code snippets and the result remains the same in IE9 (didn’t try it in IE8). The ribbon still works very well in Firefox and Chrome with your suggested changes.

I added alerts in a few strategic places in the jQuery.ribbon code to see if it executed until the end and it does, even with the extra />" at line 22.

Would you have any other suggestions?

Commented Issue: jQuery 1.4.2 [26828]

Coolhand84 — Wed, 20 Oct 2010 23:33:20 GMT

To fix the rendering problem change this line(22):
$('head').append('<link href="ribbon/themes/' + settings.theme + '/ribbon.css" rel="stylesheet" type="text/css" />" />');
to:
$('head').append('<link href="ribbon/themes/' + settings.theme + '/ribbon.css" rel="stylesheet" type="text/css" />');

There is an extra " /> causing the script to fail to create the link to the css file for the theme.

Also here is how I fixed the $(".ribbon-list div ul:visible").parent().offset() is null error:
$('.ribbon-list div').parents().click(function(e) {
var $ulParent = $('.ribbon-list div ul:visible').parent();
if($ulParent.length) {
var outsideX = e.pageX < $ulParent.offset().left || e.pageX > $ulParent.offset().left + $ulParent.width(),
outsideY = e.pageY < $ulParent.offset().top || e.pageY > $ulParent.offset().top + $ulParent.height();

if (outsideX || outsideY) {
$('.ribbon-list div ul:visible').each(function() {
$(this).fadeOut('fast');
});
$('.ribbon-list div').css('background-image', '');
}
}
});

Commented Issue: jQuery 1.4.2 [26828]

dTardif — Wed, 20 Oct 2010 12:17:12 GMT

I’ve been trying to integrate jQuery 1.4.2 with Internet Explorer (8 or 9) with no success. Simply put, the ribbon simply does not render, it remains in list form on the screen. However it work perfectly in Firefox and Chrome. I initially thought that perhaps my HTML code for the list was at fault so I copied the code from the demo page and pasted it locally and it works fine with jQuery 1.3.2, however, when I use the 1.4.2 framework, it does not render.

Has anyone else experience the same thing?

Thanks,

Dan

Commented Issue: jQuery 1.4.2 [26828]

dTardif — Tue, 19 Oct 2010 20:51:58 GMT

I'm trying to get the robbon working with JQ 1.4.2 and IE. It works fine with Chrome and Firefox, however I've tried it with IE 8 and IE 9 and I get the same behavior. It does not render at top of page. It remains displayed as a vertical list in the web page with no errors being generated. I initially though that I may be doing something in the code that IE didn't like so I copied locally the online demo and used JQ 1.3.2 and it renders exactly as online. However, if I specify JQ 1.4.2 instead of 1.3.2 in the HTML Header (and provide framework 1.4.2), the above described behaviour manfiests itself.

New Post: Enabled property not working?

matthiasmax — Sat, 09 Oct 2010 10:36:44 GMT

Hi, when I set the Enabled property false either in code-behind or in the aspx directly the buttons still stay enabled and postback. It tried with LargeItem.

Anyone else has this?

Thanks!

Commented Issue: jQuery 1.4.2 [26828]

fzeidan — Sat, 04 Sep 2010 20:38:41 GMT

Replace the following:

$('.ribbon-list div').parents().click(function(e) {
var outsideX = e.pageX < $('.ribbon-list div ul:visible').parent().offset().left || e.pageX > $('.ribbon-list div ul:visible').parent().offset().left + $('.ribbon-list div ul:visible').parent().width();
var outsideY = e.pageY < $('.ribbon-list div ul:visible').parent().offset().top || e.pageY > $('.ribbon-list div ul:visible').parent().offset().top + $('.ribbon-list div ul:visible').parent().height();

if (outsideX || outsideY) {
$('.ribbon-list div ul:visible').each(function() {
$(this).fadeOut('fast');
});
$('.ribbon-list div').css('background-image', '');
}
});

with

$('.ribbon-list div').parents().click(function(e) {
var inX = true;
if ($('.ribbon-list div ul').has(':visible').length > 0) {
var p = $('.ribbon-list div ul').has(':visible').parent();
var outsideX = e.pageX < p.offset().left || e.pageX > p.offset().left + p.width();
var outsideY = e.pageY < p.offset().top || e.pageY > p.offset().top + p.height();

if (outsideX || outsideY)
inX = true;
else
inX = false;

}
if (inX) {
$('.ribbon-list div ul:visible').each(function() {
$(this).fadeOut('fast');
});
$('.ribbon-list div').css('background-image', '');
}
});

Commented Issue: jQuery 1.4.2 [26828]

gryg — Sat, 28 Aug 2010 13:59:03 GMT

Have the same problem, If someone need no-error fix, this is my simple solution, but I need to check what was changed in jQuery 1.4.2 so we get error.
$('.ribbon-list div').parents().click(function(e) {
if($('.ribbon-list div ul:visible').parent().offset() != null){
var outsideX = e.pageX < $('.ribbon-list div ul:visible').parent().offset().left || e.pageX > $('.ribbon-list div ul:visible').parent().offset().left + $('.ribbon-list div ul:visible').parent().width();
var outsideY = e.pageY < $('.ribbon-list div ul:visible').parent().offset().top || e.pageY > $('.ribbon-list div ul:visible').parent().offset().top + $('.ribbon-list div ul:visible').parent().height();

if (outsideX || outsideY) {
$('.ribbon-list div ul:visible').each(function() {
$(this).fadeOut('fast');
});
$('.ribbon-list div').css('background-image', '');
}
}
});

Created Issue: Toolbar Open/ Close [28653]

haraldkhn — Tue, 24 Aug 2010 15:55:12 GMT

If it opens on Double click then it should close on a double click.
otherwise its confusing.