How to position spry meny?

When I create a horizontal spry menu, it's placed
automatically at a certain place and I can't get it to move. How
can I get it to be displayed in center or to the right instead of
to the left?
Regards Kine

Spry is not controlled like a normal HTML element on a page
like a table because it is done using CSS. There is a .CSS file in
the SpryAssets folder where you will have to edit the Spry Menu. I
am going to link a few documents for you to take a look.
http://www.w3schools.com/css/default.asp
- This is a good tutorial to look over which explains CSS.
http://labs.adobe.com/technologies/spry/samples/menubar/CenteringHorizontalMenuBarSample.h tml
- This page tells you how to modify the alignment of a Spry Menu.
http://labs.adobe.com/technologies/spry/articles/menu_bar/index.html
- This is the documentation for Spry Menus with a lot of
explanations of the CSS code
http://labs.adobe.com/technologies/spry/samples/menubar/MenuBarSample.html
- This is a more advanced example if you want to look at using
images or different styles down the road.
http://labs.adobe.com/technologies/spry/home.html
- This is the link to the official Adobe Spry homepage. Here you
will find updates to the Spry software in addition to links to the
official Adobe Spry forums.
Hope this all helps you out.

Similar Messages

  • How to position spry submenu items ABOVE main horizontal menu

    I am building a site for a new client. (Using DW CS4) I have
    inserted a navigation bar using the spry nav widget, which I am
    familiar with. However, what I am NOT familiar with is the
    positioning of the submenu items. Normally, the default is fine.
    However, where the bar is located - the client wants the
    submenus to display above the main menu bar.
    How do I accomplish this? I understand it will be in the CSS
    somewhere, but unsure of as to where (and what) changes.
    At the risk of jumbling up the post here, - here is the CSS:
    @charset "UTF-8";
    /* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release
    1.6.1 */
    /* Copyright (c) 2006. Adobe Systems Incorporated. All rights
    reserved. */
    LAYOUT INFORMATION: describes box model, positioning, z-order
    /* The outermost container of the Menu Bar, an auto width box
    with no margin or padding */
    ul.MenuBarHorizontal
    list-style-type: none;
    font-size: 100%;
    cursor: default;
    width: auto;
    padding: 0;
    margin: 0;
    /* Set the active Menu Bar with this class, currently setting
    z-index to accomodate IE rendering bug:
    http://therealcrisp.xs4all.nl/meuk/IE-zi...
    ul.MenuBarActive
    z-index: 1000;
    /* Menu item containers, position children relative to this
    container and are a fixed width */
    ul.MenuBarHorizontal li
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: center;
    cursor: pointer;
    width: 132px;
    float: left;
    /* Submenus should appear below their parent (top: 0) with a
    higher z-index, but they are initially off the left side of the
    screen (-1000em) */
    ul.MenuBarHorizontal ul
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    z-index: 1020;
    cursor: default;
    width: 8.2em;
    position: absolute;
    left: -1000em;
    /* Submenu that is showing with class designation
    MenuBarSubmenuVisible, we set left to auto so it comes onto the
    screen below its parent menu item */
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
    left: auto;
    /* Menu item containers are same fixed width as parent */
    ul.MenuBarHorizontal ul li
    width: 8.2em;
    /* Submenus should appear slightly overlapping to the right
    (95%) and up (-5%) */
    ul.MenuBarHorizontal ul ul
    position: absolute;
    margin: -5% 0 0 95%;
    /* Submenu that is showing with class designation
    MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
    ul.MenuBarSubmenuVisible
    left: auto;
    top: 0;
    DESIGN INFORMATION: describes color scheme, borders, fonts
    /* Submenu containers have borders on all sides */
    ul.MenuBarHorizontal ul
    border: 1px solid #CCC;
    /* Menu items are a light gray block with padding and no text
    decoration */
    ul.MenuBarHorizontal a
    display: block;
    cursor: pointer;
    background-color: #7D8BAE;
    padding: 0.5em 0.75em;
    color: #FFFFF5;
    text-decoration: none;
    border-right-width: 2.5px;
    border-left-width: 2.5px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #536186;
    border-right-color: #536186;
    border-bottom-color: #536186;
    border-left-color: #536186;
    /* Menu items that have mouse over or focus have a blue
    background and white text */
    ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
    background-color: #DFE2EC;
    color: #7D8BAE;
    /* Menu items that are open with submenus are set to
    MenuBarItemHover with a blue background and white text */
    ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal
    a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal
    a.MenuBarSubmenuVisible
    background-color: #DFE2EC;
    color: #7D8BAE;
    SUBMENU INDICATION: styles if there is a submenu under a
    given menu item
    /* Menu items that have a submenu have the class designation
    MenuBarItemSubmenu and are set to use a background image positioned
    on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal a.MenuBarItemSubmenu
    background-image: url(SpryMenuBarDown.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
    /* Menu items that have a submenu have the class designation
    MenuBarItemSubmenu and are set to use a background image positioned
    on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
    background-image: url(SpryMenuBarRight.gif);
    background-repeat: no-rep
    Thanks
    Mike

    libertymike wrote:
    > However, where the bar is located - the client wants the
    submenus to display
    > above the main menu bar.
    >
    > How do I accomplish this?
    I answered the same question in the Dreamweaver online help
    page
    "Customize the Menu Bar widget".
    http://help.adobe.com/en_US/Dreamweaver/10.0_Using/WSEE4C0148-A6F4-4bf5-9DEF-CE06AB026214a .html
    Scroll down to the comments section, and look for my answer
    to Alve
    Henricson's question dated February 8, 2009.
    David Powers
    Adobe Community Expert, Dreamweaver
    http://foundationphp.com

  • How to Position the 3D Rendering Viewport (not using "BasicScene")

    Hi,
    I wrote a custom scene manager which directly manipulating the scenegraph (Instance3D) - I just need some more direct access to it. The 3D view is part of a bigger sourrounding AIR/Flex-based Application, which displays some graphics using convential displaylist. Now I would need to position the 3D rendering area at certain coordinates in relation to the outer main applicaiton window (stage) and application state.
    I was able to replicate most of the internals of "BasicScene" based on the example "Tutorial05_SpriteBased", but I am struggled on how to positioning the 3D rendering area managed by proscenium:
    - BasicScene exposes a "viewport" property that takes a reference to a DisplayObject. It seems like it internally adjusts dimension and position of the stage3D-based rendering area based on that "viewport" x,y,width, and height.
    - I did figure out how to set dimensions of the area (sg is the Instance3D reference):
                                  sg.configureBackBuffer(viewPort.width, viewPort.height, 2, true );
                                  sg.scene.activeCamera.aspect = viewPort.width / viewPort.height;
    - I could not find any way to define a x/y position.
    Any help would be greatly appreciated - probably its just a small thing, but I do not have the source from BasicScene - otherwise I could look it up myself.
    THanks,
    Philipp

    Figured this out how to set the viewport. The Camera exposes a method "setViewport". There is a Demo "TestViewport". The calculation for the viewports top, left, bottom, right values gets more complicated in my case because I have stage scale mode set to StageScaleMode.SHOW_ALL.
    sg.configureBackBuffer(viewPort.stage.fullScreenWidth, viewPort.stage.fullScreenHeight, 2, true );
    sg.scene.activeCamera.aspect = viewPort.stage.fullScreenWidth / viewPort.stage.fullScreenHeight;
    sg.scene.activeCamera.setViewport(true, -0.5, 0.5, -0.5, 0.5 );

  • How to position sub-titles??

    I'm running QuickTime 7.2 on Windows XP-Pro. I'm trying to subtitle a 1280 x 720 movie using the following QTtext file:
    {QTtext} {language:0} {timestamps:absolute} {timescale:30}
    {height:80} {width:1280}
    {textBox:640,0,720,1280}
    {font:Arial} {size:30} {plain} {anti-alias:on}
    [00:00:00.00]
    {justify:center}
    Listen - [{italic}dog barking{plain}]
    [00:00:05.11]
    Second caption
    [00:00:10.00]
    My main problem is in positioning - no matter what I do, the subtitles appear at the top of the screen, even if I try manually moving the text track by changing the visual settings in the Movie Properties page. What do I need to do to perform positioning??
    A second problem is with the line "Listen - [{italic}dog barking{plain}]"; everything up to the closing ] is italicized. How come?

    I tried that, but it didn't seem to make any difference. When I changed the values, nothing happened to the text bar position. And when I went back to check, the values had returned to 0,0.
    I've been using WebAim's tutorial to learn about this stuff (www.webaim.org/techniques/captions/quicktime), and their description of how to position the text track bears little relation to the version of QuickTime I'm using.

  • How to position a select list in the create region

    Hello,
    I would like to position a select list item in the create region, I think we can do that somehow using javascript but I don't have an idea how to make it.
    Thanks in advance!

    In this example you can see how to position the elements:
    http://apex.oracle.com/pls/apex/f?p=31517:242
    You don't need javascript for that. The element attributes are enough for that.
    Denes Kubicek
    http://deneskubicek.blogspot.com/
    http://www.apress.com/9781430235125
    http://apex.oracle.com/pls/apex/f?p=31517:1
    http://www.amazon.de/Oracle-APEX-XE-Praxis/dp/3826655494
    -------------------------------------------------------------------

  • How to store spry data in php array

    I am trying to store spry data in php array like this:
    <? $foo= array();?>
      <div spry:region="dsCALC">
        <div spry:repeat="dsCALC">
          <?php
    $foo[]='{dsCALC::DataPrice}';
    ?>
          </div>
      </div>
    <?var_dump($foo);?>
    Outputs:
    Array (     [0] => {dsCALC::DataPrice} )
    If I tried a variable, it works ok... The array, not... Any ideas?

    Outputs:
    Array (     [0] => {dsCALC::DataPrice} )
    And so it should, because that is what you told the PHP-script to do in the following line of code.
    $foo[]='{dsCALC::DataPrice}';
    Please remember that PHP code is handled on the server, whereas JavaScript (Spry) is handeld on the client (browser) end. JavaScript cannot be handeld by PHP nor can JavaScript handel PHP.
    My question to you is, why do you want to store the data in a PHP-array and how is the Spry data obtained?
    Ben

  • New at Java Swing, How to position cursor?

    I'm new at this, but I would like to know how to position a cursor in either a JTextField or JTextArea?
    Any help here would be appreciated.
    Tks Ran

    JTextField.setCaretPosition(newPosition);See also:
    http://java.sun.com/j2se/1.4/docs/api/javax/swing/text/JTextComponent.html#setCaretPosition(int)
    (sorry that the link doesn't work, but it's the forum, not the link... just browse downwards for setCaretPosition(int) )
    Cheers!

  • How to use spry on DreamWeaver Mac?

    ive been searching the web on how to use spry on the mac but i am unable to use it for some reason. HELP?!

    Hello,
    I quote from different contributions of the forum:
    "Spry has been deprecated and is no longer officially supported by Adobe", “Adobe abandoned Spry late last year after CS6 came out. Future products will probably not contain any Spry so learning to use jQuery is a valuable skill to have for the future.” “The news was released in August last year:
    http://blogs.adobe.com/dreamweaver/2012/08/update-on-adobe-spry-framework-availability.htm l”
    and: "All Spry framework related examples available here: http://adobe.github.com/Spry/samples/
    You may want to take a look at it. I'd recommend you switch to a jQuery library for your further requirements.
    Examples
    http://users.tpg.com.au/j_birch/plugins/superfish/examples/
    http://www.egrappler.com/a-stylo-modern-jquery-accordion-akordeon/
    http://craigsworks.com/projects/simpletip/
    http://calebjacob.com/tooltipster/
    http://www.solutions4website.com/Extensions/nova_dropdown_menu.aspx
    Tutorials:
    http://speckyboy.com/2012/08/29/10-responsive-navigation-solutions-and-tutorials/
    http://try.jquery.com/
    http://learn.jquery.com/
    https://tutsplus.com/course/30-days-to-learn-jquery/
    http://www.w3schools.com/jquery/
    If you have a budget to work with, get PVII's Pop-Menu Magic2.
    http://www.projectseven.com/products/menusystems/pmm2/
    Hans-Günter

  • How to Use Spry to Validate Radio button

    How to use Spry Validation for radio button?
    The samples only have checkbox, text, select and textarea.
    Thanks

    I needed to add radio buttons to the live (non-destructive)
    filter so users could choose which column they wanted to search
    data from. Its been modified from the "contains CB" but works
    nicely. It also had to rebuild table when another button was
    selected. I'll post some code if anyone would like to use it....
    The Form area -
    <form name="filterform">
    Data Filter: <input type="text" id="filterTF"
    onkeyup="StartFilterTimer();" />
    <input type="radio" id="containsCB" name="radio"
    value="module" onclick="resetfilter();" checked /> by Module
    <input type="radio" id="containsCB" name="radio"
    value="oper" onclick="resetfilter();" /> by Oper
    <input type="radio" id="containsCB" name="radio"
    value="phone" onclick="resetfilter();" /> by Phone
    <div id="radiovalue"></div>
    </form>
    The JS area -
    function FilterData()
    var tf = document.getElementById("filterTF");
    for (var c=0; c < document.filterform.length; c++)
    if (document.filterform[c].checked)
    var choice = document.filterform[c].value;
    if (!tf.value)
    // If the text field is empty, remove any filter
    // that is set on the data set.
    dsRows.filter(null);
    return;
    // Set a filter on the data set that matches any row
    // that begins with the string in the text field.
    var regExpStr = tf.value;
    regExpStr = "^" + regExpStr;
    var regExp = new RegExp(regExpStr, "i");
    var filterFunc = function(ds, row, rowNumber)
    var str = row[choice];
    if (str && str.search(regExp) != -1)
    return row;
    return null;
    dsRows.filter(filterFunc);
    function StartFilterTimer()
    if (StartFilterTimer.timerID)
    clearTimeout(StartFilterTimer.timerID);
    StartFilterTimer.timerID = setTimeout(function() {
    StartFilterTimer.timerID = null; FilterData(); }, 400);
    function resetfilter() {
    // var tf = document.getElementById("filterTF");
    // var tfval = tf.value;
    document.getElementById("filterTF").value = "";
    StartFilterTimer();

  • Satellite L655-11Z (PSK1JE) - How to position external fan coolers?

    Hi,
    I am going to buy notebook cooler and I would like to know, how to position fan to get best reasults. I read manual up and down, but the only pic showing bottom of this notebook is only for "this is batery". I would like to know, where (from the bottom) is the position of HDD, GPU and CPU and if the coolers are sucking air into or blowing air out.
    Any pictures would be appreciated.
    This is the pic i found in the manual:
    Click:[http://img543.imageshack.us/img543/5746/zadnistrana.jpg]
    (you can download and mark positions if you like, that will help a lot)
    Thanks for any advice!

    Feedback with my Cooler master U2 notebook pad cooler.
    I am very happy with this one, cause of multiple reasons.
    Cooling: It's nice, my temparature is lower by 10C with cooler positioned in the middle of my notebook. I don't position them on the left side, cause there is no ventilating-hole to push the air in. My CPU temperature won't go over 65C while playing WoW, and it's about 55C while in windows.
    Other reasons:
    It's really cool to have notebook screen 5 cm upper then normal. I can see the screen nice without bending my neck. Typing is easier too. I can hide my notebook in this cooling pad with no extra space needed in my bag -> easy transport.
    Coolers aren't loud at all, you will notice them, if you are completly silent, but as long as you play with sounds or with music playing, you won't hear any difference.

  • How To Get Spry Slide Function To Remember Position?

    Hello,
    I'm building a site with a horizontal bar that has dynamically loaded thumbnails of images, and the user can click on the left arrow or right arrow to "slide" the images left and right (a bit like the most recent Netflix interface, if you've seen that). In an effort to do it quick 'n' easy, I employed the Spry Effects (SpryEffects.js)--specifically, the slide function ( MM_effectSlide(), or Spry.Effect.DoSlide() ).
    I would like the user to click on the right arrow and see the next, say, 10 images, and then the next 10 and so on. To achieve this, I created a long DIV inside another "masking" DIV and told Spry to slide the inside DIV. This all works well.
    However, I'm having trouble getting the Spry to start from the CURRENT position and slide to a new position. If I leave the "from" option as null, it still starts from a position other than the current position.
    Does anyone have any tips/pointers/suggestions? I'd rather not recreate the entire Javascript functionality, but rather hack the existing Spry functions.
    Thanks in advance!
    JP

    It sounds to me as though you're using the wrong Spry feature. To do what you want, you need Spry Sliding Panels.
    Unfortunately, Spry Sliding Panels are not incorporated into Dreamweaver, you need to code everything yourself. The documentation is here:
    http://labs.adobe.com/technologies/spry/samples/slidingpanels/SlidingPanelsSample.html. You'll also need to download the Spry framework from Adobe Labs to get the relevant external JavaScript files.

  • How to use spry in the dreamweaver with the php/mysql

    hello,
    Iam new to the spry framework
    and i want to know can we use the spry in the dreamweaver
    along with php / mysql code
    if so please tell how to do this
    thanks in advance

    swetha123 wrote:
    > but when i complie this page it is not showing the
    preiew or any thing in the
    > browser i saved this page with the extension .php if i
    run the same page with
    > .html then i can see the design but it is not being
    executed
    The reason you get nothing when you save the page with a .php
    extension
    is because you have display_errors turned off, so you can't
    see the
    error message telling you there's a syntax error. The
    semicolon is
    missing at the end of this line:
    > echo "<font color='white'>Hello
    Swetha</font>"
    The reason it doesn't work with an .html extension is
    probably because
    you haven't uploaded SpryAssets/SpryTabbedPanels.js. I have
    copied your
    page and tested it locally with the correct JavaScript file,
    and the
    tabbed panels work as expected.
    There are lots of other mistakes in your page. You can't use
    float and
    position:absolute on the same element. In at least one place,
    you have
    used </br> instead of <br />. You have also got
    an closing paragraph tag
    after the paragraph that contains abc.jpg.
    Getting Spry or any other JavaScript library to work
    correctly relies on
    good, clean code. Your mixture of inline styles and font tags
    is going
    to make it difficult to incorporate Spry into your pages. I
    suggest you
    improve your HTML and CSS before bringing Spry into the mix.
    David Powers, Adobe Community Expert
    Author, "The Essential Guide to Dreamweaver CS3" (friends of
    ED)
    Author, "PHP Solutions" (friends of ED)
    http://foundationphp.com/

  • How to Change Spry Menu Links

    I have a Spry Horizontal Menu on my page, and have a few
    questions on creating customized Links:
    - I know how to add a Link to my Reports, Pages, etc using
    the Link Properties box
    - I also know how to open the Link in a _blank page using the
    Target property box
    But
    - How do I change the Menu Link in code to open my new page
    in a smaller, new window?
    (Right now, the TicketSummaryAcct.cfm page opens up fine, in
    a new "full-sized" window)
    Here is the code currently listed under that Menu button:
    <li><a href ="reports/TicketSummaryAcct.cfm"
    title="Click here to print the report by Account Number to PDF"
    target=>_blank">by Acct# Prompt</a></li>
    Thanks,
    jlig

    In the header of the webpage:
    <script type="text/javascript">
    function popUp(URL) {
    day = new Date();
    id = day.getTime();
    eval("page" + id + " = window.open(URL, '" + id + "',
    'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=350,height=300 ');");
    </script>
    in the link section:
    javascript:popUp('reports/TicketSummaryAcct.cfm')
    don't use a target attribute, as it will break the javascript
    in my experience. If you are using the pop-ups in more than 1
    webpage, or even for good programming practices, make a function
    page.
    Webpage name: newWindow.js
    function popUp(URL) {
    day = new Date();
    id = day.getTime();
    eval("page" + id + " = window.open(URL, '" + id + "',
    'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=350,height=300 ');");
    And then in the header of the webpage(s) that you need the
    popup for, add this:
    <script src="newWindow.js"
    type="text/javascript"></script>

  • How to make Spry Collapsible Panels open one at a time?

    Hello,
    I am using CS5 and want to use the spry collapsible panels. What I notice (and I think this wasn't the case in cs3) is that all panels can be open at the same time. I don't want that happen. I only want one panel to be open at a time. If someone clicks on a panel that is closed, I want the current panel to close and the one they clicked on to open. I don't want multiple panels to be opne at once. How can I do this? I am not a web developer by any means, so please be easy on me with code. I think in CS3 it used to work this way. Any help would be appreciated! Thank you in advance!

    GRAMPS!! That's it!! It was the accordian panel I had used in the past!!!! Oh, thank you, I was driving myself crazy as to why it wasn't working the way I had remembered!!!!!!!! THANK YOU!!
    I was told you would probably help me find the right answer by Hans-g!
    Thanks again!

  • How To Position Two Regions Side-By-Side

    Hello.
    I am using Apex 4.2.1 with Oracle 11R3 and mod_plsql. The Apex app I created is using Theme 21.
    I've created a classical report one of whose fields is an HTML link.  When this link is clicked, an HTML region appears (it appears only when the link is clicked).  This HTML region contains several form fields users will populate.
    I am trying to get the HTML form region to appear to the immediate right of the report region (with, say, an inch of intervening space between the two regions) but am not having success.  Instead, the HTML form region appears immediately underneath the report.
    I searched this Forum for ideas and saw recommendations about creating a "container" type HTML region which serves as the "parent" for both my report and HTML form regions.  And so, I did this.  My report region has the sequence 10 while my HTML form region has sequence 20.
    I've tried playing with the options within the "Grid Layout" section of the page:
      Start New Grid = "Yes"
      Start New Row = "No"
      New Column    = "Yes"
    I've set the report to "No Template" and did the same for my HTML form region.  Still no help.
    The Display Point for all my regions (the containing HTML region, the report, and the HTML form region) is position "01".
    All to no available.  The HTML form region stubbornly displays under the report region.
    At this point, I want you to know that, though I like building web/database applications using Apex (indeed, I've been using it more than eight years now), there are days (like today) when I wish Apex would act more like FrontPage or DreamWeaver.  I would like to use my mouse to drag a region to a point on the page and have Apex automagically write the appropriate positioning CSS code.  Sigh!
    In any case, would anyone know how to get my HTML form region to appear to the right side of my report region (with an inch or so of intervening space)?
    Any help/tips would be appreciated.
    Thank you.
    Elie

    Hi, Check this
    User Interface
    Template
    Sequence
    Parent Region
    Display Point
    Column
       2
    [Body][Pos.1][Pos.2][Pos.3][Pos.4]
    Change column to 2 in the form region section as above

Maybe you are looking for