FF 11 Support

[hahmed]

Is it just me or does FF not support setting the font colour?

Looking at the HTML Chrome (18.0.1025.162 m) gives me:

 <span style="background-color:#FFFF99">browsers</span>

and FF gives me:

 <font color="rgb(51, 0, 153)" _moz_dirty="">browsers</font>

Firstly why font? and secondly why rgb?

Something is not right...

The issue: The colour is not set in FF, Chrome works fine

[hahmed]

Basically Jquery/ the browser is returning the background colour in rgb, I have altered the dialogHandlers.foreColor function to :

                color = jQuery(event.target).css('background-color');

                Mercury.log("background colour", color.toHex());

                _this.button.css({
                backgroundColor: color.toHex()
                });
                return Mercury.trigger('action', {
                    action: 'foreColor',
                    value: color.toHex()
                });

This sets the font color as expected...

[hahmed]

In Firefox the background is also not setting properly, for some reason I am getting some nested style elements...

[jejacks0n]

Ok, I did some research on this:

<font color='rgb(255, 0, 0)'><span>simple</span></font> <b>content</b>

Is what actually appears in the tests (running on FF 12).. yeah, something should be done about that. But the font tag is FF doing it how it's been told. Mercury's specifically configured to not use styles if it can avoid it.

[jejacks0n]

Thanks for your code, it made the fix super easy. I just added the toHex call in the dialog handler and updated some tests. I also gave you credit for the commit.

[hahmed]

Thanks, glad I could help :)

FYI: I managed an asp.net mvc integration quite easily in the end, we are only comfortable using chrome for the front end editor, not too happy with Firefox at the moment, will be testing out FF more later in the year - noticed too many things that were not right e.g. nested elements were appearing.

What I am doing is using Mercury as a front end editor and creating a word like PDF on the backend, so all my markup has to be spot on, only Chrome did the job extremely well. The templates look amazing, I even managed to do some col re-sizing for tables, some reports look real nice, my boss was well happy with your library. We tried Aloha for a while and it simply was over complicated doing too many things.So thanks big time.

[pseudoname]

I'm trying to integrate with asp.net MVC 3 and followed the guidelines in the wiki about using mercury without rails but I'm not able to edit the content. Can you please give some guidance on how to integrate with asp.net mvc?

Thanks

[gvarela]

Never used asp.net mvc. So without additional info about how you have it setup and what mercury is attempting to do I can't help you.

Gabe Varela
303-638-6576

On Sep 24, 2012, at 4:01 AM, pseudoname notifications@github.com wrote:

I'm trying to integrate with asp.net MVC 3 and followed the guidelines in the wiki about using mercury without rails but I'm not able to edit the content. Can you please give some guidance on how to integrate with asp.net mvc?

Thanks

—
Reply to this email directly or view it on GitHub.

[pseudoname]

Hi Gabe,

I put the mercury_loader.js file in a Scripts folder. I created a mercury
folder under Scripts and put 2 folders, namely js and css under mercury
folder.
js folder contains jquery-1.8.2.min.js, mercury_dialogs.js and
mercury.min.js, css folder contains mercury.bundle.css and mercury.css

I load a page inside an iframe. The page in the iframe needs to have
editable regions. I've attached the mercury_loader.js file I use and the
HTML of the page loaded in the iframe is pasted below: Don't worry about
the @ symbols. They are ASP.NET MVC syntax. I tried binding to
window.mercuryLoaded, Mercury.bind('ready') and
jQuery(window).on('mercury:ready')

Any help is greatly appreciated.

Thanks

Palak Chokshi

@model Collective_li.Models.ItemViewModel
@{
Layout = null;
}

<title>Full Item</title> <script type="text/javascript" src=" http://code.jquery.com/jquery-latest.min.js"></script> <script src="../../Scripts/mercury_loader.js" type="text/javascript"></script>

          <script type="text/javascript">


              function showTitleEditor(event, currentTitle) {
                  var $target = $('#ItemTitle');

                  //alert(currentTitle);
                  $target.empty();
                  $('<input type="text" style="width:90%;" value="' +

currentTitle + '" />').bind('blur', function (e) {
var $parent = $(e.target).parent();
if ($(this).val() != '')
$parent.text($(this).val());
else
$parent.text('Click here to edit Title');
$parent.unbind('click');
$parent.bind('click', function (event) {
showTitleEditor(event, $(this).text());
});
}).bind('click', function(event){
event.stopPropagation();}).appendTo($target).focus();
}
function ResizeFullImage($image, $imageTitle, animate) {

                  if ($image) {
                      var width = $image.width();
                      var height = $image.height();
                      var wToHRatio = width / height;
                      if (animate) {
                          $image.css({
                              'min-width': '',
                              'width': '',
                              'height': '',
                              'margin-left':'auto',
                              'margin-right':'auto'
                          });
                      }

                      var computedHeight = 0;

                      computedHeight = $(window).height() -

$imageTitle.height() - 12;

                      var widthRatio = width /

$('#ItemContent').parent().width();
var heightRatio = height / computedHeight;
var heightStr = (computedHeight).toString() +
"px";

                      if (widthRatio > heightRatio) {
                          if (animate)
                              $image.animate({ width: '100%' }, 300);
                          else
                              $image.css('width', '100%');
                      }
                      else {
                          if (animate)
                              $image.animate({ height: computedHeight

}, 300);
else
$image.css('height', heightStr);
}

                  }
                  else {
                      //alert("Couldn't find image");
                  }
              }
              $(document).ready(function () {
                  $('#EditItem').click(function (event) {

                      showTitleEditor(event, $('#ItemTitle').text());
                      $(this).children('span').text('Click title or

content to edit');
jQuery(parent).trigger('initialize:frame');
});

                  $('#ItemContent:first-child').css('margin-top',

'80px');

                  $('img.fullimage').each(function () {
                      //alert('resizing after image load');
                      $(this).load(function () {

ResizeFullImage($('img.fullimage'), $('.titleAndToolbar'), false); });
});
$(window).resize(function () {
ResizeFullImage($('img.fullimage'),
$('.titleAndToolbar'), false);
});
window.mercuryLoaded = function () {
alert('mercury ready');
//Mercury.saveUrl = '/content';
};
//
});

          </script>

    <div class="titleAndToolbar" style="position: fixed; top:0;

left:0;background-color:#FFFFFF;width:100%;z-index:1;">

@Model.Title

@

Lights
off

Edit
Item

Delete Item

@
@{
var sourceURLText = "";
if (String.IsNullOrEmpty(Model.SourceURL) ||
Model.SourceURL.Contains("collective.li"))
{
sourceURLText = "Created by " + Model.AuthorFirstName;
}
else
{

                sourceURLText = new Uri(Model.SourceURL).Authority;
            }
        }
        <div class="sourceUrlLink">Source: <a href="@Model.SourceURL"

target="_blank">@sourceURLText

Edit
Item

  <div style="margin: 0 auto; width:100%;">
    <div id="ItemContent" data-itemid="@Model.ItemID"

data-authorid="@Model.AuthorID">

Fancy content here

Some more fancy
content

On Mon, Sep 24, 2012 at 6:08 AM, Gabe Varela notifications@github.comwrote:

Never used asp.net mvc. So without additional info about how you have it
setup and what mercury is attempting to do I can't help you.

Gabe Varela
303-638-6576

On Sep 24, 2012, at 4:01 AM, pseudoname notifications@github.com wrote:

I'm trying to integrate with asp.net MVC 3 and followed the guidelines
in the wiki about using mercury without rails but I'm not able to edit the
content. Can you please give some guidance on how to integrate with
asp.net mvc?

Thanks

�
Reply to this email directly or view it on GitHub.

�
Reply to this email directly or view it on GitHubhttps://github.com//issues/218#issuecomment-8818095.