Forums

Board index » YUI 2.x: » Using YUI 2.x Components

Page 1 of 1   [ 2 posts ]
New Topic | Post Reply | Print view

Yosef Yosef

  • Username: yosef
  • Joined: Sun Nov 07, 2010 9:46 am
  • Posts: 10
  • IRC: yosef
  • Offline
  • Profile
Tags:

yui editor draggable image bug in firefox only

Post Posted: Wed Oct 26, 2011 3:45 am
+0-
Hello Dav Glass,

I find bug in yui editor when image drag from yui carausel inside editor area in firefox(chrome working well) - its generate ordered list with numbers around the image.

Edit:
Can play with example here
http://jsfiddle.net/djwas/1/

the code that i took from yui official example (just drag 1 of the images inside editor area and it will generate ol li around image):

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>


    <meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Editor &mdash; Basic Buttons</title>

<style type="text/css">

    #container {
        margin: 0 auto;
    }

    /* Style the spotlight container */
    #spotlight {
        border: 1px solid #ccc;
        height: 180px;
        margin: 10px auto;
        padding: 1px;
        width: 240px;
    }

    /* Always be sure to give your carousel items a width and a height */
    .yui-carousel-element li {
        height: 75px;
        opacity: 0.6;
        width: 75px;
        opacity: 0.6;
    }

    .yui-carousel-element .yui-carousel-item-selected {
        opacity: 1;
    }


/*margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments. */
body {
   margin:0;
   padding:0;
}
</style>

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/menu/assets/skins/sam/menu.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/button/assets/skins/sam/button.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/container/assets/skins/sam/container.css" />

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/editor/assets/skins/sam/editor.css" />
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/element/element-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/container/container-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/menu/menu-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/button/button-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/editor/editor-min.js"></script>

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/carousel/assets/skins/sam/carousel.css" />
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>

<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/element/element-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.9.0/build/carousel/carousel-min.js"></script>




<!--there is no custom header content for this example-->

</head>

<body class="yui-skin-sam">


<h1>Editor &mdash; Basic Buttons</h1>

<div class="exampleIntro">
   <p>This example demonstrates how to use the Editor Control with Basic Buttons.</p>

</div>

<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->

<form method="post" action="#" id="form1">
<textarea id="editor" name="editor" rows="20" cols="75">
This is some more test text.<br>This is some more test text.<br>This is some more test text.<br>This is some more test text.<br>This is some more test text.<br>This is some more test text.<br>This is some more test text.<br>
</textarea>
</form>

<script>

(function() {
    var Dom = YAHOO.util.Dom,
        Event = YAHOO.util.Event;

    var myConfig = {
        height: '300px',
        width: '600px',
        dompath: true,
        focusAtStart: true
    };

    YAHOO.log('Create the Editor..', 'info', 'example');
    var myEditor = new YAHOO.widget.Editor('editor', myConfig);
    myEditor._defaultToolbar.buttonType = 'basic';
    myEditor.render();

})();
</script>




<h1>Spotlight example</h1>

<div class="exampleIntro">
   <p>
    This example uses the <a href="http://developer.yahoo.com/yui/carousel/">YUI Carousel Control</a> to showcase a simple spotlight
    example using its <code>itemSelected</code> event.  In this example, you can use arrow
    keys to select items as well as click on an item to select it.
</p>
<p>
    Though this functionality looks a little complicated, it is very easy to
    implement.  This is because the YUI Carousel Control handles the keyboard
    event and the mouse click event for setting the selection.  When an item is
    selected, the YUI Carousel Control triggers an <code>itemSelected</code> event.  This
    example subscribes to the <code>itemSelected</code> event to display the selected
    image in the spotlight.

</p>

</div>

<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->

<!-- The Carousel container -->
<div id="container">
    <ol id="carousel">
        <li>
            <img src="http://farm1.static.flickr.com/135/342099636_7b05b7cde5_s.jpg">
        </li>
        <li>

            <img src="http://farm1.static.flickr.com/136/342099938_fdef3ca3b5_s.jpg">
        </li>
        <li>
            <img src="http://farm1.static.flickr.com/147/342099522_3827eaa929_s.jpg">
        </li>
        <li>
            <img src="http://farm1.static.flickr.com/143/342100011_ec4d338c71_s.jpg">
        </li>
        <li>

            <img src="http://farm1.static.flickr.com/161/342100080_0fe4f9ccb0_s.jpg">
        </li>
        <li>
            <img src="http://farm1.static.flickr.com/153/342100324_82589c0ebe_s.jpg">
        </li>
        <li>
            <img src="http://farm1.static.flickr.com/147/342100376_d0336252a7_s.jpg">
        </li>
        <li>

            <img src="http://farm1.static.flickr.com/156/342100472_b9bc985fa4_s.jpg">
        </li>
        <li>
            <img src="http://farm1.static.flickr.com/133/342100566_39dae4698f_s.jpg">
        </li>
    </ol>
</div>
<!-- The spotlight container -->
<div id="spotlight"></div>
<script>
    (function () {
        // Get the image link from within its (parent) container.
        function getImage(parent) {
            var el = parent.firstChild;

            while (el) { // walk through till as long as there's an element
                if (el.nodeName.toUpperCase() == "IMG") { // found an image
                    // flickr uses "_s" suffix for small, and "_m" for big
                    // images respectively
                    return el.src.replace(/_s\.jpg$/, "_m.jpg");
                }
                el = el.nextSibling;
            }

            return "";
        }

        YAHOO.util.Event.onDOMReady(function (ev) {
            var spotlight   = YAHOO.util.Dom.get("spotlight"),
                carousel    = new YAHOO.widget.Carousel("container");

            carousel.on("itemSelected", function (index) {
                // item has the reference to the Carousel's item
                var item = carousel.getElementForItem(index);

                if (item) {
                    spotlight.innerHTML = "<img src=\""+getImage(item)+"\">";
                }
            });

            carousel.render(); // get ready for rendering the widget
            carousel.show();   // display the widget
        });
    })();
</script>

</body>
</html>




How the bug can be solved.

Thanks in advance,
Yosef

Dav Glass

  • Username: davglass
  • Joined: Thu Aug 28, 2008 9:28 am
  • Posts: 2088
  • Location: Marion, IL, US
  • Twitter: davglass
  • GitHub: davglass
  • Gists: davglass
  • IRC: davglass
  • Offline
  • Profile
Tags:

Re: yui editor draggable image bug in firefox only

Post Posted: Fri Nov 04, 2011 6:56 am
+0-
This is not a bug, when FF is dragging the "image" it's actually dragging the LI. There is nothing I can do about that since Editor has no control over what data you are dragging into it.
Page 1 of 1   [ 2 posts ]
New Topic | Post Reply | Print view
Display posts from previous:  Sort by  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
cron

Recent Forums Posts

Recent YUI Blog Posts

Online Users

© 2006-2013 Yahoo! Inc. All rights reserved.
All code on this site is licensed under the BSD License unless stated otherwise.
About This Site · Security Contact Info

Powered by phpBB® Forum Software © phpBB Group