How to change the cursor on the roll on the function

I make it a point and click game in AS3 with flash.

I changed my slider skin by creating a new class of '' mouse. '' It works very well. Now, I'm trying to change the skin of the cursor when it is over an object on the stage.

I read that the MouseEvent.ROLL_OVER is the correct method, but I can't understand how do...

I have my mouse class like this:

public class Souris extends MovieClip
    {
 private var engine:Engine;
        private var stageRef:Stage;
        private var p:Point = new Point(); 

        public function Souris(stageRef:Stage)
        {
            Mouse.hide(); //make the mouse disappear
            mouseEnabled = false; //don't let our cursor block anything
mouseChildren = false;

            this.stageRef = stageRef;
            x = stageRef.mouseX;
            y = stageRef.mouseY;

            stageRef.addEventListener(MouseEvent.MOUSE_MOVE, updateMouse, false, 0, true);
            stageRef.addEventListener(Event.MOUSE_LEAVE, mouseLeaveHandler, false, 0, true);
            stageRef.addEventListener(Event.ADDED, updateStack, false, 0, true);
            stageRef.addEventListener(MouseEvent.ROLL_OVER,hover);

        }

        private function updateStack(e:Event) : void
        {
            stageRef.addChild(this);
        }
        private function hover(e:MouseEvent):void {
souris.visible = false;
}

        private function mouseLeaveHandler(e:Event) : void
        {
            visible = false;
            Mouse.show(); //in case of right click
            stageRef.addEventListener(MouseEvent.MOUSE_MOVE, mouseReturnHandler, false, 0, true);
        }

        private function mouseReturnHandler(e:Event) : void
        {
            visible = true;
            Mouse.hide(); //in case of right click
            removeEventListener(MouseEvent.MOUSE_MOVE, mouseReturnHandler);
        }

        private function updateMouse(e:MouseEvent) : void
        {
            x = stageRef.mouseX;
            y = stageRef.mouseY;

            e.updateAfterEvent();
        }

    }

}
}

I have in my main class (class engine):


private var souris:Souris;

public function Engine(){



                        souris = new Souris(stage);
            stage.addChild(souris);

        }
private function startGame(e:Event):void{
....
..

I tried to put in the class of '' mouse. ''


stageRef.addEventListener(MouseEvent.ROLL_OVER,hover);

private function hover(e:MouseEvent):void {
Engine.souris.visible = false; 
handCursor.visible = true ;
}

But it seems wrong... I don't know what to put in my score function... (I got the "handCursor' in my library).

Thank you very much for your help!

Thx for your answers, I found a solution to my problem. It was MouseEvent.MOUSE_OVER. and not to the overthrow. But thanks for the links, I read it and it helps me with some codes.

Thanks for your time!

Tags: Adobe Animate

Similar Questions

  • Satellite L305 - how to change the function of the media player keys?

    How can I change the function of my buttons in Media Player on top of my laptop?
    I know that if you go to Toshiba Assist, optimize, Support Button, you can change the function of certain keys, but the only options I have are the keys Mute and the CD/DVD.
    [http://img52.imageshack.us/img52/4572/toshibabuttonsupport.jpg]
    I am trying to make the button media player opens iTunes, not WMP and even for play/pause, stop, fast forward and rewind.

    Even if I'm here, I have a problem with my Ctrl + 1 never work. I can't spend the first tab of firefox or aim. I can't do a group control 1 when you play. Anyone know why/how can I fix it?

    Hey,.

    If you press the button on the media player, only Windows Media Player or DVD Toshiba player can be started and not iTunes. This configuration is not possible. As you can read in the user's manual, only these programs can be started.
    Then the other multimedia keys work correctly, and you can use it with media player?

    Concerning your other question:
    I would try to clean the cooling system using a jet of compressed air. This can blow the dust cooling fans and, therefore, it of not necessary to disassemble the laptop.

  • Pavilion 15-P290NO: how to change the function of the buttons behavior in Windows 10

    I just received my new laptop (a Pavilion 15-P290NO) the other day and installed Windows 10 top immediately. Now I can't figure out how to change the behavior of the function keys so that I won't have to press the fn key if I want for example to use f2 for other functions that turn down the brightness of the screen. Instead, I want him out if I for some reason any really want to turn down the brightness, I hold the fn and f2. At this point, I am open to almost any suggestions.

    Hello

    Shut down the laptop.  Tap away at the esc you key start Notepad to open the Start Menu.  Select the Bios ( f10 ) option, and then change the figure in the document at the following link.

    http://support.HP.com/us-en/document/c02035108

    Kind regards

    DP - K

  • Pavilion x 2 10-n101nv: how to change the function keys

    Hello I have the hp pavilion x 2 10-n101nv, the F function keys selection key works it is light slight increase use and on but if I press the fn becomes F1 F2 F3 f4, how can I change

    Hello

    You can change the default action as follows.

    Shut down the laptop.  Tap away at the esc you key start Notepad to open the Start Menu.  Select the Bios ( f10 ) option, and then change the figure in the document at the following link.

    http://h20564.www2.HP.com/hpsc/doc/public/display?docid=emr_na-c02035108 & DocLang = in & docLocale = en_US &...

    Kind regards

    DP - K

  • How to change the function FN + ALT ALT only keys

    Hello!

    IM wondering how to disable function key with a simple press of the contraption.
    For example, if I want to close a program I have to press FN + ALT + F4 keys.
    I hope that it is just ALT + F4.

    Hello

    I think that the Toshiba Accessibility utility should be useful.
    The tool allows you to use the Fn key to create a key combination with one of the function keys without press both at the same time as we usually required.
    Using allows it access bring you the Fn key down a sticky key, which means that you can press it once, release her and then press a function key to activate the hotkey feature.

    To use the Toshiba accessibility click Start, Toshiba Accessibility (accessibility type search)
    Check the box use the key sticking FN
    Put a checkmark next to the desired option
    Click OK

  • Satellite L40 - 14G: how to change the function of "closing the lid.

    Hello

    If I close my laptop Toshiba Satellite L40 - 14G, PC went to the sleep mode.
    But I want that if I close the PC went to the sleep mode but it should function normally and show swtich off the coast.

    How can I do?

    Thanks for the reply!

    You have Vista?
    If Yes, then follow these steps:

    -Go to control panel
    -Energy options
    -To the left, click on the option called something like select what should happen when the lid is closed

    Greetings

  • HP 1000-1412TX: how to change the function key on the keyboard that activates / deactivates him wireless on HP 1000-1412TX

    I want change or disable the key function of the keyboard that activates / deactivates him wireless on HP 1000-1412TX

    HP 1412TX 1000 laptop

    Model #: F0C09PA
    Serial No.: (deleted content)

    Here:

    http://support.HP.com/us-en/document/c02035108

  • How to change the functionality of media hotleys

    Hello

    I just got a new keyboard (logitech K200) with media hotkey, and I'd like to exchange the "multimedia" keys to the "mail" to "next track" and "previous track"

    After some research, I found that we can change these access keys through the registry here:

    HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Explorer\AppKey

    and the different available keys are:

    APPCOMMAND_BROWSER_BACKWARD = 1
    APPCOMMAND_BROWSER_FORWARD = 2
    APPCOMMAND_BROWSER_REFRESH = 3
    APPCOMMAND_BROWSER_STOP = 4
    APPCOMMAND_BROWSER_SEARCH = 5
    APPCOMMAND_BROWSER_FAVORITES = 6
    APPCOMMAND_BROWSER_HOME = 7
    APPCOMMAND_VOLUME_MUTE = 8
    APPCOMMAND_VOLUME_DOWN = 9
    APPCOMMAND_VOLUME_UP = 10
    APPCOMMAND_MEDIA_NEXTTRACK = 11
    APPCOMMAND_MEDIA_PREVIOUSTRACK = 12
    APPCOMMAND_MEDIA_STOP = 13
    APPCOMMAND_MEDIA_PLAY_PAUSE = 14
    APPCOMMAND_LAUNCH_MAIL = 15
    APPCOMMAND_LAUNCH_MEDIA_SELECT = 16
    APPCOMMAND_LAUNCH_APP1 = 17
    APPCOMMAND_LAUNCH_APP2 = 18
    APPCOMMAND_BASS_DOWN = 19
    APPCOMMAND_BASS_BOOST = 20
    APPCOMMAND_BASS_UP = 21
    APPCOMMAND_TREBLE_DOWN = 22
    APPCOMMAND_TREBLE_UP = 23
    APPCOMMAND_MICROPHONE_VOLUME_MUTE = 24
    APPCOMMAND_MICROPHONE_VOLUME_DOWN = 25
    APPCOMMAND_MICROPHONE_VOLUME_UP = 26
    APPCOMMAND_HELP = 27
    APPCOMMAND_FIND = 28
    APPCOMMAND_NEW = 29
    APPCOMMAND_OPEN = 30
    APPCOMMAND_CLOSE = 31
    APPCOMMAND_SAVE = 32
    APPCOMMAND_PRINT = 33
    APPCOMMAND_UNDO = 34
    APPCOMMAND_REDO = 35
    APPCOMMAND_COPY = 36
    APPCOMMAND_CUT = 37
    APPCOMMAND_PASTE = 38
    APPCOMMAND_REPLY_TO_MAIL = 39
    APPCOMMAND_FORWARD_MAIL = 40
    APPCOMMAND_SEND_MAIL = 41
    APPCOMMAND_SPELL_CHECK = 42
    APPCOMMAND_DICTATE_OR_COMMAND_CONTROL_TOGGLE = 43
    APPCOMMAND_MIC_ON_OFF_TOGGLE = 44
    APPCOMMAND_CORRECTION_LIST = 45

    In my case, only the keys 7,15,16,17 and 18 are present.
    I would like to the previous track button 7 and key 15 to the next track, but I couldn't find what argument I should use.

    Hello

    Thanks for posting your query in the Microsoft Community Forums.

    The question you posted would be better suited in the TechNet Forums. I would recommend posting your query in the TechNet Forums.

    http://social.technet.Microsoft.com/forums/en-us/category/w7itpro

  • Oracle is how to change the functionality of a data entry form.

    Hi guys,.

    I'd like know if theres a way to retrieve and enter records in a form that is based on a single table, with this kind of functionality:
    -Enter the primary key (enter or tab), if the record exists then poster for edit and register.
    -If this is not the case exists, and then accept data in the fields and then save.

    This is because recently a customer migrate a small application of advanced forms of oracle revelation, and the people who use this registration form complains because they say that you need to type more keys to retrieve information.

    I know what it means to ignore the native functions to a form of oracle, but it's a question that I was invited.

    I apologize for my English.

    Jorge

    Good afternoon Jorge.

    Yes, you can do what you described. You can use a trigger when-validate-item to search for the key value the user has entered and then, if found, complete the rest of the screen. If the value is NOT found, you can just go to the next input value to allow the user to continue to enter the folder.

    Good luck
    Don.

    AWARDS: Don't forget to mark correct or useful posts on the forum, not only for my answers, but for everyone! :)

  • How to change the settings of Windows 8 trackpad

    I have an Asus S400C with Windows 8 is installed and pain with my trackpad.

    I'm used to be able to scroll with two fingers on the trackpad, but this function seems to have completely abandoned.

    When I got my phone a few months ago, that this would work sporadically, but now nothing. I tried to hunt around in settings, etc. to see if it needs to be enabled/disabled, however I can not even find the trackpad settings! I searched touchpad/trackpad etc. and looked through the settings of the mouse, but none seem to control the current laptop keyboard. Instead, it maintains direct me to the tactile features on the current screen.

    I'm so use to scroll with one finger on my screen while using the mouse trackpad for other features...

    I tried to have some Google around for this online but everyone seems to have slightly different questions and no not to Asus - some answers have to give on the brand of computer - but wouldn't it be bound to the windows software and where touchpad info are stored?

    If anyone knows how to change the functions of the trackpad, or at least where to find who would be most appreciated!

    Thank you

    Hello

    There are several different manufacturers of the Trackpads. The computer manufacturer decides what trackpad to install based on compatibility with other hardware and software on the system.

    The computer manufacturer will include a utility for the trackpad, which is designed for this particular model options. It is usually a utility that adds a Trackpad tab in the Control Panel/mouse component, or it may be a separate control panel item.

    You must contact the Asus support for a solution.

    ASUSTeK Computer Inc. - Support - Knowledge S400CA:
    http://support.ASUS.com/knowledge.aspx?SLanguage=en&m=S400CA&p=3&s=481#troubleshooting

    ASUSTeK Computer Inc. - Support - Troubleshooting:

    http://support.ASUS.com/download/options.aspx?SLanguage=en&type=9

    This will have information on the hardware devices installed on this specific model and download the latest drivers.

    You can also discuss this issue with others who have this model.

    ASUSTeK Computer Inc. - Support Forums:

    http://VIP.ASUS.com/forum/default.aspx?SLanguage=en-us

    Concerning

  • Animate dashboard. How to change the cursor of the animated symbol (no picture)?

    Hi, could you tell me please how to change the cursor in internship at the animation symbol and label goto inside when click on and release.

    For example, I want to create hammer striking the rock, my cursor should change when I'm on the stage and the hit, when I am pressing the button of the mouse and goto the first position when released.

    Thanks for the help =)

    Hello

    This demo file can help you: can I use a symbol animated acting as a mouse cursor?

  • On Apple Watch, how to change the time when traveling to a different country, like London or Singapore?

    For Apple Watch, can someone please show me how to change the time on my watch when I travel to another country, like London or Singapore? Thank you.

    Hello

    When traveling to a different time zone, it is not necessary to manually change the time on Apple Watch.

    After turning off the flight on each of your iPhone and Apple Watch, the time on your watch can be updated automatically to reflect the local time.

    If it is not the case, try restarting your watch:

    -To switch off your watch: press and hold the button side until you see the cursor off the power; slide it to turn off.

    -To reactivate: press and hold the side button until you see the Apple logo.

  • How to change the tab order of an array of clusters?

    How to change the tab order of an array of clusters?  I have the cluster arranged into a table in the front panel.   The element of the cluster passes horizontal and array element passes vertically.   When I press the tab key, the cursor will move to the item next to the table instead of the next item in the cluster (down to the place overall).

    so you have an array of clusters or cluster and the separate table?

  • How to change the configuration of keyboard U.S. / UK?

    Hello

    I just bought a Lenovo G550 and very nice it is too.  It is of course set up with a US keyboard and I'm in the United Kingdom.  This means that on the keys of my @ is a "and the sign of my Sterling is a #."  Yes I know that I can use the "make a @"

    and I can't 0163 alt to create a symbol of the book, although it doesn't let me do in this post?  Is there a way I can change the settings of the keyboard in the UK please.

    When I type the cursor often also begins in another part of my document which means what I'm typing needs a constant correction.  I thought at first it was just in the open office b

    UT it does on th

    is the forum see!  It also does in my emails which is hotmail.  Can someone help me please?

    Moderator edit: matched subject to question.

    I do not know if I understand, but you are looking for how to change the keyboard from US to UK in Windows? If this is the case, go into the control panel and the locale. There, you should be able to add any other keyboard layouts or remove them as well as set a default value. Under regional settings, there are other parameters that you can change if you are in the United Kingdom.

    -gan

  • How to change the icon of the application where the application focus?

    Hello guys

    I want to know how to change the application icon focus when the application.

    I know how to create the icon of the Application, such as insert icon-> properties-> use as the application icon.

    Do you know how to insert the second icon to the project?

    Please help me guys

    TNX'

    Hello

    Ago may messages on roll on icon.

    This is the KB article for the overview icon.

    http://www.BlackBerry.com/knowledgecenterpublic/livelink.exe/fetch/2000/348583/800332/800505/800608/...

    KB article for icon creation.

    http://www.BlackBerry.com/knowledgecenterpublic/livelink.exe/fetch/2000/348583/800332/800505/800608/...

    TNX.

  • How to change the Spry CSS tab

    I like to use these old screens provided with the former DW Spry tab.  I just looked in DW CC and it looks like they aren't there and more.  But anyway, I made one for my client.  Now, they want to get one of the tabs on the far right of the margin.  See the image below:

    tabs.jpg

    I don't know yet if it's possible to do and if someone has done this before, can you tell me what code I need to change in the CSS?  I would have joined the CSS file, but it seems that you cannot attach files in this forum, so I've copied below.

    Please offer any means to change the color of the tabs, etc. - I just need to know how - or at all - this tab can be moved to the right.

    Thanks, Guy deaf

    PS I'm sorry that the CSS code does not correctly appear in this forum.  When I type this message, looks like it will display line-by-line, but it's not.  I'm sorry.

    ---------------------------------------------

    @charset "UTF-8";
    
    
    /* SpryTabbedPanels.css - version 0.6 - Spry Pre-Release 1.6.1 */
    
    
    /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
    
    
    /* Horizontal Tabbed Panels
     *
     * The default style for a TabbedPanels widget places all tab buttons
     * (left aligned) above the content panel.
     */
    
    
    /* This is the selector for the main TabbedPanels container. For our
     * default style, this container does not contribute anything visually,
     * but it is floated left to make sure that any floating or clearing done
     * with any of its child elements are contained completely within the
     * TabbedPanels container, to minimize any impact or undesireable
     * interaction with other floated elements on the page that may be used
     * for layout.
     *
     * If you want to constrain the width of the TabbedPanels widget, set a
     * width on the TabbedPanels container. By default, the TabbedPanels widget
     * expands horizontally to fill up available space.
     *
     * The name of the class ("TabbedPanels") used in this selector is not
     * necessary to make the widget function. You can use any class name you
     * want to style the TabbedPanels container.
     */
    .TabbedPanels {
      overflow: hidden;
      margin: 0px;
      padding: 0px;
      clear: none;
      width: 100%; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
    }
    
    
    /* This is the selector for the TabGroup. The TabGroup container houses
     * all of the tab buttons for each tabbed panel in the widget. This container
     * does not contribute anything visually to the look of the widget for our
     * default style.
     *
     * The name of the class ("TabbedPanelsTabGroup") used in this selector is not
     * necessary to make the widget function. You can use any class name you
     * want to style the TabGroup container.
     */
    .TabbedPanelsTabGroup {
      margin: 0px;
      padding: 0px;
    }
    
    
    /* This is the selector for the TabbedPanelsTab. This container houses
     * the title for the panel. This is also the tab "button" that the user clicks
     * on to activate the corresponding content panel so that it appears on top
     * of the other tabbed panels contained in the widget.
     *
     * For our default style, each tab is positioned relatively 1 pixel down from
     * where it wold normally render. This allows each tab to overlap the content
     * panel that renders below it. Each tab is rendered with a 1 pixel bottom
     * border that has a color that matches the top border of the current content
     * panel. This gives the appearance that the tab is being drawn behind the
     * content panel.
     *
     * The name of the class ("TabbedPanelsTab") used in this selector is not
     * necessary to make the widget function. You can use any class name you want
     * to style this tab container.
     */
    .TabbedPanelsTab {
      position: relative;
      top: 1px;
      float: left;
      padding: 5px 20px;
      margin: 0px 1px 0px 0px;
      font: bold 12px sans-serif;
      background-color: #f1c185;
      list-style: none;
      border-left: solid 1px #CCC;
      border-bottom: solid 1px #999;
      border-top: solid 1px #999;
      border-right: solid 1px #999;
      border-radius: 5px 5px 0px 0px;
      -moz-user-select: none;
      -khtml-user-select: none;
      cursor: pointer;
    }
    
    
    /* This selector is an example of how to change the appearnce of a tab button
     * container as the mouse enters it. The class "TabbedPanelsTabHover" is
     * programatically added and removed from the tab element as the mouse enters
     * and exits the container.
     */
    .TabbedPanelsTabHover {
      background-color: #ffd197;
    }
    
    
    /* This selector is an example of how to change the appearance of a tab button
     * container after the user has clicked on it to activate a content panel.
     * The class "TabbedPanelsTabSelected" is programatically added and removed
     * from the tab element as the user clicks on the tab button containers in
     * the widget.
     *
     * As mentioned above, for our default style, tab buttons are positioned
     * 1 pixel down from where it would normally render. When the tab button is
     * selected, we change its bottom border to match the background color of the
     * content panel so that it looks like the tab is part of the content panel.
     */
    .TabbedPanelsTabSelected {
      background-color: #ffe9cd;
      border-bottom: 1px solid #EEE;
    }
    
    
    /* This selector is an example of how to make a link inside of a tab button
     * look like normal text. Users may want to use links inside of a tab button
     * so that when it gets focus, the text *inside* the tab button gets a focus
     * ring around it, instead of the focus ring around the entire tab.
     */
    .TabbedPanelsTab a {
      color: black;
      text-decoration: none;
    }
    
    
    /* This is the selector for the ContentGroup. The ContentGroup container houses
     * all of the content panels for each tabbed panel in the widget. For our
     * default style, this container provides the background color and borders that
     * surround the content.
     *
     * The name of the class ("TabbedPanelsContentGroup") used in this selector is
     * not necessary to make the widget function. You can use any class name you
     * want to style the ContentGroup container.
     */
    .TabbedPanelsContentGroup {
      clear: both;
      border-top: solid 1px #999;
      background-color: #FFF;
    }
    
    
    /* This is the selector for the Content panel. The Content panel holds the
     * content for a single tabbed panel. For our default style, this container
     * provides some padding, so that the content is not pushed up against the
     * widget borders.
     *
     * The name of the class ("TabbedPanelsContent") used in this selector is
     * not necessary to make the widget function. You can use any class name you
     * want to style the Content container.
     */
    .TabbedPanelsContent {
      overflow: hidden;
      padding: 4px;
    }
    
    
    /* This selector is an example of how to change the appearnce of the currently
     * active container panel. The class "TabbedPanelsContentVisible" is
     * programatically added and removed from the content element as the panel
     * is activated/deactivated.
     */
    .TabbedPanelsContentVisible {
    }
    
    
    /* Vertical Tabbed Panels
     *
     * The following rules override some of the default rules above so that the
     * TabbedPanels widget renders with its tab buttons along the left side of
     * the currently active content panel.
     *
     * With the rules defined below, the only change that will have to be made
     * to switch a horizontal tabbed panels widget to a vertical tabbed panels
     * widget, is to use the "VTabbedPanels" class on the top-level widget
     * container element, instead of "TabbedPanels".
     */
    
    
    .VTabbedPanels {
      overflow: hidden;
      zoom: 1;
    }
    
    
    /* This selector floats the TabGroup so that the tab buttons it contains
     * render to the left of the active content panel. A border is drawn around
     * the group container to make it look like a list container.
     */
    .VTabbedPanels .TabbedPanelsTabGroup {
      float: left;
      width: 10em;
      height: 20em;
      background-color: #EEE;
      position: relative;
      border-top: solid 1px #999;
      border-right: solid 1px #999;
      border-left: solid 1px #CCC;
      border-bottom: solid 1px #CCC;
    }
    
    
    /* This selector disables the float property that is placed on each tab button
     * by the default TabbedPanelsTab selector rule above. It also draws a bottom
     * border for the tab. The tab button will get its left and right border from
     * the TabGroup, and its top border from the TabGroup or tab button above it.
     */
    .VTabbedPanels .TabbedPanelsTab {
      float: none;
      margin: 0px;
      border-top: none;
      border-left: none;
      border-right: none;
    }
    
    
    /* This selector disables the float property that is placed on each tab button
     * by the default TabbedPanelsTab selector rule above. It also draws a bottom
     * border for the tab. The tab button will get its left and right border from
     * the TabGroup, and its top border from the TabGroup or tab button above it.
     */
    .VTabbedPanels .TabbedPanelsTabSelected {
      background-color: #EEE;
      border-bottom: solid 1px #999;
    }
    
    
    /* This selector floats the content panels for the widget so that they
     * render to the right of the tabbed buttons.
     */
    .VTabbedPanels .TabbedPanelsContentGroup {
      clear: none;
      float: left;
      padding: 0px;
      width: 30em;
      height: 20em;
    }
    
    
    /* Styles for Printing */
    @media print {
    .TabbedPanels {
      overflow: visible !important;
    }
    .TabbedPanelsContentGroup {
      display: block !important;
      overflow: visible !important;
      height: auto !important;
    }
    .TabbedPanelsContent {
      overflow: visible !important;
      display: block !important;
      clear:both !important;
    }
    .TabbedPanelsTab {
      overflow: visible !important;
      display: block !important;
      clear:both !important;
    }
    }
    

    !-[CodeBlockStart:dffe5525-a787-4a98-a87f-f24554b12141]-->@charset 'UTF-8'; / * SpryTabbedPanels.css - 0.6 - pre-release Spry 1.6.1 version * / / * Copyright (c) 2006] Adobe Systems Incorporated. All rights reserved. * / / * Horizontal tabbed panels * the default style for a TabbedPanels widget puts all the tab buttons * (stalled left) above the content panel. * / / * This is the selector for the main container of TabbedPanels. For our * style by default, this container does not contribute anything visually, * but it is floated to the left to ensure that all floating or compensation done * with any which of her children the elements lie entirely within the limits the * TabbedPanels container, in order to minimize any impact or unwanted * interaction with other floating elements on the page which may be used * for page layout. * If you want to limit the width of the widget TabbedPanels, define a * width of the container TabbedPanels. By default, the widget TabbedPanels * extends horizontally to fill the available space. * The name of the class ("TabbedPanels") used in this selector is not * necessary to make the widget service. You can use a class name, you * want to style the TabbedPanels container. */ . TabbedPanels {overflow: hidden;}   margin: 0px;   padding: 0px;   Clear: none;   Width: 100%; / * Hack IE to force the layout correct when preceded by a paragraph. (hasLayout bug) * /} / * this is the selector for the TabGroup. The container of TabGroup houses * all buttons on the tab for each tabs in the widget panel. This container * does not contribute to what both visually in the appearance of the widget for our * default style. * The name of the class ("TabbedPanelsTabGroup") used in this selector is not * necessary to make the widget service. You can use a class name, you * want to style the TabGroup container. */ . TabbedPanelsTabGroup {margin: 0px;}   padding: 0px; } / * This is the selector for the TabbedPanelsTab. This container houses * the title of the Panel. It is also tab 'button' that the user clicks on * to activate the corresponding content panel so that it appears on top * of the other tabs in the widget panels. * For our style by default, each tab is positioned relatively 1 pixel down from * where it would normally. This allows each tab overlap content * panel that renders underneath. Each tab is rendered with a background of 1 pixel * border which has a color that corresponds to the upper edge of the current content * panel. This gives the appearance that the tab is drawn behind the * content panel. * The name of the class ("TabbedPanelsTab") used in this selector is not * necessary to make the widget service. You can use any class name you want * to style the tab container. */ . TabbedPanelsTab {position: relative;}   Top: 1px;   float: left;   padding: 5px 20px;   margin: 0px 1px 0px 0px;   Police: bold 12px without serif.   background-color: #f1c185;   list-style: none;   border-left: 1px solid #CCC;   border-bottom: 1px solid #999;   border-top: 1px solid #999;   border-right: 1px solid #999;   border-radius: 5px 0px 5px 0px;   -moz-user-select: none;   -khtml-user-select: none;   cursor: pointer; } / * This selector is an example how to change the appearance of a button in the tab * container as the mouse enters in the it. The class is "TabbedPanelsTabHover" * programatically add and remove the element tab as the mouse between in * in and out of the container. */ . TabbedPanelsTabHover {background-color: #ffd197 ;} / * this selector is an example how to do to change the appearance of a button in the tab * container after the user has clicked on it to activate a content panel.} * The 'TabbedPanelsTabSelected' class is programmatically added and removed * the tab element as long as the user clicks button tab containers in * the widget. * As mentioned above, for our style by default, the tab buttons are positioned * 1 pixel down where he would normally. What is the tab key * selected, we change its bottom border to match the background color of the * content panel so that it looks like the tab is the content panel. */ . TabbedPanelsTabSelected {background-color: #ffe9cd;}   border-bottom: 1px solid #EEE; } / * This selector is an example of how to make a link inside a tab button * look like normal text. Users may want to use the links within a tab button * so that when it gets the focus, the text * inside * the tab button gets a focus * ring around it, instead of the ring around the whole tab. * /. TabbedPanelsTab a {color: black;}   text-decoration: none; } / * This is the selector for the ContentGroup. The ContentGroup container houses * all panels of content for each tabs in the widget panel. For our * style by default, this container provides the background color and borders that * surround content. * The name of the class ("TabbedPanelsContentGroup") used in this selector is * not necessary to make the widget function. You can use a class name, you * want to style the ContentGroup container. */ . TabbedPanelsContentGroup {clear: both;}   border-top: 1px solid #999;   background-color: #FFF; } / * This is the selector for the content panel. The content panel contains the * content for a single panel tabs. For our default style, this container * provides some padding, so that content is not pushed upward against the * widget borders. * The name of the class ("TabbedPanelsContent") used in this selector is * not necessary to make the widget function. You can use a class name, you * want to style the content container. */ . TabbedPanelsContent {overflow: hidden;}   padding: 4px; } / * This selector is an example of how to change the appearance of the currently * active panel container. The class is "TabbedPanelsContentVisible" * programatically added and removed from the content as the Panel item * is enabled/disabled. */ . TabbedPanelsContentVisible {} / * vertical tabbed panels * following rules override some of the default rules above so that the * TabbedPanels widget is rendered with its buttons on the tab on the left of * the active content panel. * With the rules defined below, the only change that will be made * to move a widget panels to horizontal tabs to vertical tabbed panels * widget, is to use the 'VTabbedPanels' class on the top-level widget * element container, instead of "TabbedPanels. */ . VTabbedPanels {overflow: hidden;}   Zoom: 1; } / * This selector floats the TabGroup so that the tab buttons it contains * make left of active content panel. A border is drawn around * the group container to make it look like a container from the list. */ . VTabbedPanels. TabbedPanelsTabGroup {float: left;}   Width: 10em;   height: 20em;   background-color: #EEE;   position: relative;   border-top: 1px solid #999;   border-right: 1px solid #999;   border-left: 1px solid #CCC;   border-bottom: 1px solid #CCC; } / * This selector disables the float property that is placed on each button of the tab * by the rule above TabbedPanelsTab default selector. He also draws a background * border for the tab. The tab button will get his left and right border of * the TabGroup and its superior border of the tab above it or button TabGroup. */ . VTabbedPanels. TabbedPanelsTab {float: none;}   margin: 0px;   border-top: none;   border-left: none;   border-right: none; } / * This selector disables the float property that is placed on each button of the tab * by the rule above TabbedPanelsTab default selector. He also draws a background * border for the tab. The tab button will get his left and right border of * the TabGroup and its superior border of the tab above it or button TabGroup. */ . VTabbedPanels. TabbedPanelsTabSelected {background-color: #EEE;}   border-bottom: 1px solid #999; } / * This selector fleet contained signs of the widget while they * make it to the right of the tabs buttons. */ . VTabbedPanels. TabbedPanelsContentGroup {clear: none;}   float: left;   padding: 0px;   Width: 30em;   height: 20em; } / * Printing styles * / @media print {.} TabbedPanels {overflow: visible! important;}. TabbedPanelsContentGroup {display: block! important;}   overflow: visible! important;   height: auto! important; } . TabbedPanelsContent {overflow: visible! important;}   display: block! important;   clear: both! important; } . TabbedPanelsTab {overflow: visible! important;}   display: block! important;   clear: both! important; } }

    Add the class like below:

  • Open Ocean
  • Delete the following in your css spry as file its in the ' query print media "and has no effect on the screen - have added you it to the wrong place."

    {.alignRight}

    position: relative;

    Top: 1px;

    float: right! important;

    padding: 5px 20px;

    margin: 0px 1px 0px 0px;

    Police: bold 12px without serif.

    background-color: #f1c185;

    list-style: none;

    border-left: 1px solid #CCC;

    border-bottom: 1px solid #999;

    border-top: 1px solid #999;

    border-right: 1px solid #999;

    border-radius: 5px 0px 5px 0px;

    -moz-user-select: none;

    -khtml-user-select: none;

    cursor: pointer;

    }

    Add the below css just above the press query written:

    {.alignRight}

    float: right! important;

    }

    / * Print styles * /.

    @media print {}

Maybe you are looking for