Back to YAP Forum
0

YML Lite Small View

If Small View is the most important and the very first integration of application that user is going to interact with the app and expose to branding, then YML Lite should give more flexibility for developer to dress up the window on Small View.

Now my prototype Small View is VERY UGLY, image and text are not align to get the BEST layout

1) Not showing link as hyperlink
yml:a doesn't support a tag style text-decoration: none
a {text-decoration:none;}

2) Link color is default blue, purple for visited
yml:a doesn't support color
a {color:#06556c;}
a:hover {color:#E57D00;}
a:visited {color:#06556c;}

3) Link and Image not supporting vertical-align
<div> won't help with aligning image and text on the same plane
yml:image yml:a won't vertical-align

Note: Move to proper category from thread http://developer.yahoo.net/forum/index.php?showtopic=395

by
Report Abuse
14 Replies
  • Updated. Able to add vertical-align and float on <div> to style yml.
    Report Abuse
    0
  • How can you developer mini navigation within Small View?

    Can you use Replace and Insert to add multiple view within Small View?
    Report Abuse
    0
  • QUOTE (vivaty.menlopark @ Nov 26 2008, 01:27 PM) <{POST_SNAPBACK}>
    How can you developer mini navigation within Small View?

    Can you use Replace and Insert to add multiple view within Small View?

    Re Navigation: yes you can use yml:a with insert/replace and params to create ajaxy type behaviors, we're working on having a technote on this but hopfully the following sample code should get you started:

    hth,
    CODE
    <style>
    div#tabGroup{ position:relative; border-bottom:0; }
    div#tabGroup div{ background-color:#fff; float:left; width:80; border:1px solid #795089; border-bottom:0; padding:5px 10px; text-align:center; font:bold 12px arial,helvetica,sans-serif; color:#795089; cursor:pointer; }
    div#tabGroup div.selected{ background-color:#795089; color:#fff; }
    div#tabGroup div:hover{ background-color:#e2ceea; }
    div#tabGroup div.selected:hover{ background-color:#795089; }
    div#tabContent{ border:1px solid #795089; border-top:10px solid #795089; padding:5px 10px; }
    </style>

    <div class="pad5" id="tabs">
        <div id="tabGroup">
            <div class="selected"> <yml:a params="tabs/smallTab1.php"  replace="tabs">About You</yml:a></div>
            <div><yml:a params="tabs/smallTab2.php"  insert="tabs">Your Friends</yml:a></div>
            <div><yml:a params="tabs/smallTab3.php"  insert="tabs">Top Episodes</yml:a></div>
            <br style="clear:both">
        </div>
        <div id="tabContent"><br>Hi <yml:name uid="viewer" linked="true" capitalize="true" useyou="false"/>! <br>
    <yml:a>Rate some cool movies now!!</yml:a></div>
    </div>

    X
    Report Abuse
    0
  • QUOTE (vivaty.menlopark @ Nov 24 2008, 11:44 AM) <{POST_SNAPBACK}>
    1) Not showing link as hyperlink
    yml:a doesn't support a tag style text-decoration: none
    a {text-decoration:none;}

    2) Link color is default blue, purple for visited
    yml:a doesn't support color
    a {color:#06556c;}
    a:hover {color:#E57D00;}
    a:visited {color:#06556c;}


    fyi, I just filed a bug in our system to see how we can support this in yml:a - thanks for the feedback.

    X
    Report Abuse
    0
  • Problems with your Small View navigation sample:

    <div class="selected"><yml:a params="tab1.php" replace="tabs">Tab1</yml:a></div>
    <div><yml:a params="tab2.php" insert="tabs">Tab2</yml:a></div>
    <div><yml:a params="tab3.php" insert="tabs">Tab3</yml:a></div>

    1) I learn if you don't specific the view="YahooFullView", any yml:a on Small View will go to Yahoo Full View
    2) I discover <yml:a params="tabs/smallTab2.php" insert="tabs">Tab2</yml:a> go to /YahooFullViews/tabs/smallTab2.php
    But if I do this
    <yml:a params="tab2.php" insert="tabs">Tab2</yml:a>
    Then
    go to /YahooFullViews/tab2.php

    Logic is correct but it won't work because Small View couldn't figure out the full url path.
    Even developer is given the Application URL on Canvas View. It wouldn't look up the correct directory
    http://gibson.mediamachines.com/yahoo/xyz.php

    Questions:
    Where do you place additional Small View smallTab1.php, smallTab2.php, smallTab3.php on your sample? in directory structure?
    Where do you place additional Full View other than the Canvas View URL? in directory structure?
    Report Abuse
    0
  • YAP > YML > yml:form
    http://developer.yahoo.com/yap/yml/form.html

    <yml:a><yml:form view="http://apps.vivaty.com/vivaty/player.php" params="hostId=1">Vivaty Player</yml:form></yml:a>
    <yml:a><yml:form view="http://www.vivaty.com">Vivaty Site</yml:form></yml:a>

    Problems:
    I couldn't get yml:a to work like your documentation description. It doesn't allow you to go to external link, add parameter.

    Question:
    What if I have multiple parameters? How do I add those into a single params="name1=value1"?
    <yml:form view="http://www.yahoo.com" params="name1=value1 name2=value2 name3=value3">Test</yml:form>?
    Report Abuse
    0
  • QUOTE (vivaty.menlopark @ Nov 26 2008, 04:54 PM) <{POST_SNAPBACK}>
    1) I learn if you don't specific the view="YahooFullView", any yml:a on Small View will go to Yahoo Full View

    You should not have to specific the view name when doing a replace and if you dont use a replace/insert you should be directly directly to the full view

    QUOTE (vivaty.menlopark @ Nov 26 2008, 04:54 PM) <{POST_SNAPBACK}>
    2) I discover <yml:a params="tabs/smallTab2.php" insert="tabs">Tab2</yml:a> go to /YahooFullViews/tabs/smallTab2.php
    But if I do this
    <yml:a params="tab2.php" insert="tabs">Tab2</yml:a>
    Then
    go to /YahooFullViews/tab2.php

    Logic is correct but it won't work because Small View couldn't figure out the full url path.
    Even developer is given the Application URL on Canvas View. It wouldn't look up the correct directory
    http://gibson.mediamachines.com/yahoo/xyz.php

    if you want to go to fullview just dont pass the insert.

    QUOTE (vivaty.menlopark @ Nov 26 2008, 04:54 PM) <{POST_SNAPBACK}>
    Questions:
    Where do you place additional Small View smallTab1.php, smallTab2.php, smallTab3.php on your sample? in directory structure?
    Where do you place additional Full View other than the Canvas View URL? in directory structure?

    your php files are relative to the full view base URL you enter in the dev tool
    for instance, say your base url is:
    myapps.server.com/yap/
    Your tabs in the example would be in teh yap folder
    if you wanted to group your tabs in a tab folder, you would use yml:a with params="tabs/tab1.php"

    hht,

    Xavier
    Report Abuse
    0
  • It didn't work...

    I did exactly what you suggested. Can you please check? To see if this are errors on Application Editor rendering? errors on YML?

    First I place your code into Small View
    CODE
    <style>
    div#tabGroup{ position:relative; border-bottom:0; }
    div#tabGroup div{ background-color:#fff; float:left; width:80; border:1px solid #795089; border-bottom:0; padding:5px 10px; text-align:center; font:bold 12px arial,helvetica,sans-serif; color:#795089; cursor:pointer; }
    div#tabGroup div.selected{ background-color:#795089; color:#fff; }
    div#tabGroup div:hover{ background-color:#e2ceea; }
    div#tabGroup div.selected:hover{ background-color:#795089; }
    div#tabContent{ border:1px solid #795089; border-top:10px solid #795089; padding:5px 10px; }
    </style>

    <div class="pad5" id="tabs">
    <div id="tabGroup">
    <div class="selected"><yml:a params="tabs/smallTab1.php" replace="tabs">About You</yml:a></div>
    <div><yml:a params="tabs/smallTab2.php" insert="tabs">Your Friends</yml:a></div>
    <div><yml:a params="tabs/smallTab3.php" insert="tabs">Top Episodes</yml:a></div>
    <br style="clear:both">
    </div>
    <div id="tabContent"><br>Hi <yml:name uid="viewer" linked="true" capitalize="true" useyou="false"/>! <br>
    <yml:a>Rate some cool movies now!!</yml:a></div>
    </div>


    Then I create a new folder at the root www.xzy.com/tabs. I create 3 php files. I code these 3 files with acceptable YML Lite in Small View.
    www.xzy.com/tabs/smallTab1.php
    www.xzy.com/tabs/smallTab2.php
    www.xzy.com/tabs/smallTab3.php

    If you mouseover the tab links, this is NOT pointing to Yahoo Small View; even it is not specific on the view parameter.
    http://apps.yahoo.com/dev-preview/FCmnfK44...s/smallTab1.php
    http://apps.yahoo.com/dev-preview/FCmnfK44...s/smallTab2.php
    http://apps.yahoo.com/dev-preview/FCmnfK44...s/smallTab3.php
    Report Abuse
    0
  • Can you give us examples on smallTab1.php, smallTab2.php, smallTab3.php?

    I have been trying different way to code these 3 php files smallTab1.php, smallTab2.php, smallTab3.php. None of them can insert or replace the content...

    Is there any errors in your Application Editor? Configuration?
    Report Abuse
    0
  • I appreciate if you would be able to response within shorter period of time. We are in time crunch to get these links on Small View for possible publishing!
    Report Abuse
    0
  • Will post the php code for the tabs tonight, meanwhile you can use the following css for overwritting the style of yml:a:

    CODE
    <style type="text/css">
    a { text-decoration:none; color:blue; }
    a:visited { color:purple; }
    a:hover { color:red; }
    a.yml-a { font-size:200%; }
    </style>
    <yml:a params="yap-box-test.html" insert="foo">blarg</yml:a>
    <a href="http://foohack.com/">Just a regular link</a>
    <div id="foo">blargoeshere</div>
    Report Abuse
    0
  • Hey vivaty,

    I built a PHP code block for the tabs that I'm currently making some last bug fixes for so that it production ready. Once we get everything running well and tested for cross-browser functionality the process will be documented and the code posted here. There is also a hack fix in place within the code to bypass the "CSS not rendering in IE" issue.

    Jonathan LeBlanc
    Senior Software Engineer
    Yahoo! Developer Network
    Report Abuse
    0
  • Thanks Xav and Jon.

    I'll test the code outside Yahoo as confirmation. Report any findings :l
    Report Abuse
    0
  • CSS color style on Small View is Perfect! My Small View is getting pretty.

    Curious: I don't quite understand the code a.yml-a because yml support yml:a and your code is yml-a. yml:a is not the same as yml-a.

    CODE
    <yml:a params="yap-box-test.html" insert="foo">blarg</yml:a>
    <a href="http://foohack.com/">Just a regular link</a>
    <div id="foo">blargoeshere</div>


    This part is still a mystery. I couldn't see the functionality on insert="foo". I see blarg link and Just a regular link as hyperlink. You don't have to click on blarg link to see the <div> that contain blargoeshere.

    I tried using the insert and replace many times in various way. I still couldn't figure out what this is for. Same codes won't work at.

    QUOTE (Xav @ Dec 2 2008, 03:51 PM) <{POST_SNAPBACK}>
    Will post the php code for the tabs tonight, meanwhile you can use the following css for overwritting the style of yml:a:

    CODE
    <style type="text/css">
    a { text-decoration:none; color:blue; }
    a:visited { color:purple; }
    a:hover { color:red; }
    a.yml-a { font-size:200%; }
    </style>
    <yml:a params="yap-box-test.html" insert="foo">blarg</yml:a>
    <a href="http://foohack.com/">Just a regular link</a>
    <div id="foo">blargoeshere</div>
    Report Abuse
    0
Ask a Question

Recent Posts

in YAP