Tutorials and Tips

Re: Example: JQuery UI

Amnesia Group — Wed, 21 Jan 2009 23:05:07 GMT

viphak@myspace:
<script type="text/javascript" src="http://www.viphaklay.com/jquery/plugins/dimensions_1.2/jquery.dimensions.min.js"></script>

I just got told that my app can not be approved because it is referencing js from external sites. If I include this will my app be denied? Or is there a location on api.msappspace.com that has dimensions on it?

Re: Example: JQuery UI

Carolina — Tue, 15 Jul 2008 12:53:08 GMT

Has anyone tested this JQuery example in IE7?

Please, take a look at http://developer.myspace.com/Community/forums/t/3277.aspx

Thanks!

Carolina

Re: Example: JQuery UI

ayn — Thu, 06 Mar 2008 04:52:13 GMT

It's great that it seems like you guys will support jQuery, but doesn't look like Caja likes it right now, I put just one line in my app:

Caja did not like a lot of stuff in jquery.min.js.

So how are we gonna test our js to make sure it will be Caja-friendly?

Re: Example: JQuery UI

Michael — Wed, 27 Feb 2008 09:05:44 GMT

Please excuse me if this has already been mentioned elsewhere but I haven't been able to find it and this thread seems like a good place to ask. In trying to design an app that will work across many open social containers it's very helpful to understand exactly what the rules of enngagement are. I understand that referencing external javascript is going to be a no-no but that for now it works.

What is the story for how to get javascript into your myspace app? It can't be pasting it all into a textarea. That's not a sustainable model. With regards to the specific eval example in this thread, Orkut has support for gadget.json.parse and stringify for the purpose of going to and from JSON. Will MySpace have that support as well? Am I missing where in the API this currently exists?

As far as caja goes I've downloaded the spec but haven't dove into it yet. Will you guys put out a simplified set of rules for the javascript that will pass through the "cajoler"?

I know you're figuring all this stuff out but if you have any insight into some of the expected architecture we can bank on going forward it makes it a little easier to work on creating apps that will be ready to go when you guys are. At the very least I hope my questions will help you guys know what knowledge is needed out here in developer land.

Thanks and hope to see some of you at the upcoming SF event.

-Michael

Re: Example: JQuery UI

Steven — Sun, 24 Feb 2008 00:30:12 GMT

will jquery always be supported in this way?

Are there any other libraries or other extras that we can use?

Re: Example: JQuery UI

Roger — Tue, 12 Feb 2008 13:27:14 GMT

What will be the future restrictions of eval?

Currently I can do a makeRequest, to get back some JSON, the defines functions.. I can eval that ot an object to call them. This allows me to dynamically change the behavior of my app without having to come login here and edit in the 10pixel editor window hehe.

I guess the bigger question.. is what is the timeline for the "regulations" to be in place, and what is a good definition of them. I am, as most are, very excited about developing on this platform and seeing what cool things can be done. But right now it really is a huge mystery... at least to me.

Re: Example: JQuery UI

viphak@myspace — Tue, 12 Feb 2008 01:14:16 GMT

Once we add caja. All scripts will go through the validation and processing of caja. The external js references will be restricted.
This hasn't been fully finalized yet.

-V

Re: Example: JQuery UI

phong — Tue, 12 Feb 2008 00:07:51 GMT

viphak@myspace:

<script type="text/javascript" src="http://www.viphaklay.com/jquery/plugins/dimensions_1.2/jquery.dimensions.min.js"></script>

Are we allowed to import script like that? I have an app that needs to import some js for jquery's plugins and currently everything is working fine. However, I'm afraid that such behavior might be restricted later and my code will no longer work.

Re: Example: JQuery UI

Roger — Sun, 10 Feb 2008 17:41:36 GMT

Lack of coffee FTW.

Got it :)

Re: Example: JQuery UI

Roger — Sun, 10 Feb 2008 17:09:24 GMT

Question...

If I point my browser at the flora css you are using.. it then imports a number of other CSS files.

If I then point my browser to each of those.. and download all that CSS.. and then combine that CSS into 1 file....

It seems that if I then point the URL for the CSS to my new "combined .CSS".. the above example doesn't work. The tabs never show up.

How does that make sense :)?

Re: Example: JQuery UI

• ® • — Tue, 05 Feb 2008 10:48:47 GMT

excellent!!! includes jquery support!

Example: JQuery UI

viphak@myspace — Sat, 12 Jan 2008 00:06:23 GMT

<script type="text/javascript" src="http://api.msappspace.com/AppRendering/js/jquery-1.2.1.min.js"></script>
<script type="text/javascript" src="http://api.msappspace.com/AppRendering/js/jquery.ui-1.0/ui.tabs.js"></script>
<script type="text/javascript" src="http://api.msappspace.com/AppRendering/js/jquery.ui-1.0/ui.dialog.js"></script>
<script type="text/javascript" src="http://api.msappspace.com/AppRendering/js/jquery.ui-1.0/ui.resizable.js"></script>
<script type="text/javascript" src="http://api.msappspace.com/AppRendering/js/jquery.ui-1.0/ui.mouse.js"></script>
<script type="text/javascript" src="http://api.msappspace.com/AppRendering/js/jquery.ui-1.0/ui.draggable.js"></script>
<script type="text/javascript" src="http://www.viphaklay.com/jquery/plugins/dimensions_1.2/jquery.dimensions.min.js"></script>

<style type="text/css">
                @import url("http://api.msappspace.com/AppRendering/js/jquery.ui-1.0/themes/flora/flora.all.css");
</style>

<!--[if IE 6]>
<style type="text/css">
                #my-tabs {
                padding-bottom: 20px;
                }

</style>
<![endif]-->

<!--[if IE 7]>
<style type="text/css">
                #my-tabs {
                padding-bottom: 24px;
                }
</style>
<![endif]-->



                <div id="my-tabs" class="flora">
            <ul id="tabList">
                <li><a href="#my-tab1"><span>Tab1</span></a></li>
                <li><a href="#my-tab2"><span>Tab2</span></a></li>
                <li><a href="#my-tab3"><span>Tab3</span></a></li>
            </ul>

            <div id="my-tab1">
                                ahhhhhhhhhhh
            </div>
            <div id="my-tab2">
                                yay!
            </div>
            <div id="my-tab3">
                                wahoooo!
            </div>
                </div>
        

<input id="showLink" type="button" value="show me" />

<span id="divSurprise" style="display:none; border:1px solid black">
Surprise!
<img src="http://www.viphaklay.com/jquery/spinner.gif"/>
<img src="http://www.viphaklay.com/jquery/spinner.gif"/>
<img src="http://www.viphaklay.com/jquery/spinner.gif"/>
<img src="http://www.viphaklay.com/jquery/spinner.gif"/>
<img src="http://www.viphaklay.com/jquery/spinner.gif"/>
</span>

<div id="my-dialog" class="flora" title="vipy rules">Drag me somwhere!</div>


<script type='text/javascript'>

  $(document).ready(function(){

    $("#my-tabs > ul").tabs();

    $("#my-dialog").dialog({ height: 100, width: 100});

    $("#showLink").click(function () {
                if ($("#showLink").val() == "show me") {
                                $("#showLink").val("hide me");
                } else {
                                $("#showLink").val("show me");
                }

        $("#divSurprise").toggle("slow");
    });
    
  });

</script>