Response title
This is preview!
Move this topic
Plunker steals the show from jsfiddle!
in jQuery Mobile
•
6 years ago
http://plnkr.co/users/JQM-Forum is
the new home for JQM demos/templates written by the members of the forum.
If you have demos or templates to add, please respond here.
If you have a question about one of the plunks, make a new
question in the mobile forum.
JΛ̊KE
Our combined plunks are located atJQM-forum Homepage - Plunker
2
Replies(44)
Leave a comment on Omar's reply
Re: Plunker steals the show from jsfiddle!
6 years ago
Anybody know how to "save" a Plunk?
I've put considerable effort into
setting-up an iscrollview demo, but one false move and the whole thing
seems to disappear and is not found in "my plunks".
(It's also easy to lose a file - if you accidentally go into
file-renaming mode, and cancel, the file disappears! Or - there's
something easy to hit accidentally at that point that will delete file.
As well, any way to easily save/load to Gist(s) or is that work-in-progress?
Leave a comment on watusiware's reply
Re: Plunker steals the show from jsfiddle!
6 years ago
^ I guess you have to fork and then there
is a "Save" button. Otherwise, you are apparently working in
a sandbox that does NOT get saved!
But then I get "Save Failed" when I try to save.
Now I get "fork failed" as well.
Re: Re: Plunker steals the show from jsfiddle!
6 years ago
I’ve seen a few problems there too.
I only fork when I go from my account to the JQM-Forum account.
JΛ̊KE
Leave a comment on watusiware's reply
Re: Plunker steals the show from jsfiddle!
6 years ago
That big blue Save button works for me. It appears as soon as you make a change.
I see a download to a zip file, but no upload.
JΛ̊KE
Leave a comment on jakecigar's reply
Re: Plunker steals the show from jsfiddle!
6 years ago
maybe this:
Plunks with tag names containing dots can't be saved
I added a tag jquery.mobile.iscrollview
Leave a comment on watusiware's reply
Re: Plunker steals the show from jsfiddle!
6 years ago
Click "Edit this Plunk" button, and then "Fork" it.
Another option is to copy/paste to a new template.
Leave a comment on Omar's reply
Re: Plunker steals the show from jsfiddle!
6 years ago
Careful with file rename! Cancel deletes the file!
Leave a comment on watusiware's reply
Re: Plunker steals the show from jsfiddle!
6 years ago
Do not use
https://raw.githubusercontent.com....
links. They do not work correctly. (Browser issues mixing
http:/https?) Use http:
It's handy to open a
demo in it's own window or tab. Just context-click on the
playback window and "Open Frame in new window/tab". Much
easier than using jsFiddle when debugging with Web
Inspector, Chrome Dev Tools, etc.
jquery.mobile.iscrollview
demo in Plunker:
Re: Re: Plunker steals the show from jsfiddle!
6 years ago
That is a great demo, so many variations. Are all the scripts and CSS
necessary for a simple iscrollview?
JΛ̊KE
Leave a comment on watusiware's reply
Re: Plunker steals the show from jsfiddle!
6 years ago
FYI, they apparently handle:
- sass
- scss
- coffee
-styl
- less
"other preprocessors". (Not sure which).
Re: Re: Plunker steals the show from jsfiddle!
6 years ago
Let’s stay away from them in the demos.
JΛ̊KE
Leave a comment on watusiware's reply
Leave a comment on Omar's reply
Re: Plunker steals the show from jsfiddle!
6 years ago
That is a great demo, so many variations. Are all the scripts and CSS necessary for a simple iscrollview?
That's the standard demo that's
packaged in repo, minus the files for JQM 1.1, 2.x, 1.3.x.
No, there are several files to support
pull-to-refresh demo, and of course the multiple pages. I should
create the simplest possible page as well to help people get started
with a minimum of confusion.
Re: Re: Plunker steals the show from jsfiddle!
6 years ago
Thanks
Jon.
I do recommend a simple one to show others how to initialize iScrollview on both MPM and SPM. And btw, on Chrome the demo doesn't work due to strict MIME type checking.I should create the simplest possible page as well to help people get started with a minimum of confusion.
Leave a comment on watusiware's reply
Re: Plunker steals the show from jsfiddle!
6 years ago
Chrome the demo doesn't work due to strict MIME type checking
On
what file(s)?
Re: Re: Plunker steals the show from jsfiddle!
6 years ago
The ones from github. They don’t set proper mime types, and chrome won’t
load them.
JΛ̊KE
Leave a comment on watusiware's reply
Re: Plunker steals the show from jsfiddle!
6 years ago
The ones from github. They don’t set proper mime types, and chrome won’t load them.
Fixed.
Caution on the CDN URLs. They are cached
permanently, and so you should only use them with a specific tag or
revision! (Not head!)
This looks useful too:
Leave a comment on watusiware's reply
Re: Plunker steals the show from jsfiddle!
6 years ago
How do we get new templates into the JQM-forum account? Is it just a
manual process at this time? (I get the idea that giving permission to
access GitHub gists for for "future" features.) We have a
github organization, but actually no way to (automatically) pull into
Plunker from GitHub yet, right?
I've updated my jquery.mobile.iscrollview demo to use JQM
1.4.5 and I've also created a pared-down simple template.
I don't think Plunker has any kind of "perma
links" for the latest version of a Plunk, so see below for the
latest jquery.mobile.iscrollview templates:
Leave a comment on watusiware's reply
Re: Plunker steals the show from jsfiddle!
6 years ago
It is a manual process. As far as I can tell, our group buys us nothing.
I’ve moved plunks into the JQM-forum
account. Some were Omar
’s and some were mine.
Rather than me looking around in
your account, you can share the ones you want moved.
I don’t see any way to make
a pretty "home" page for the plunks, so we
should probably do it here in a sticky post.
JΛ̊KE
Leave a comment on jakecigar's reply
Re: Plunker steals the show from jsfiddle!
6 years ago
I have noticed another issue that plunker can't handle a SPM with more than two files, index and another page. It parses an empty page div of any other external files.
Re: Re: Plunker steals the show from jsfiddle!
6 years ago
Ouch! I just tried a few pages with html links from one to the other. It worked.
Try making it from scratch, it may be another one of their bugs,
Did you search the bug database?
JΛ̊KE
Leave a comment on Omar's reply
Re: Plunker steals the show from jsfiddle!
6 years ago
I have noticed another issue that plunker can't handle a SPM with more than two files
I
have 5 pages, and haven't noticed any problem.
Can
you make an example? ;)
We could use github pages. The plunks are meant to be embeddable. We can see what options there are for linking/embedding the description page. That will give us some use for the GitHub account!I don’t see any way to make a pretty "home" page for the plunks, so we should probably do it here in a sticky post.
I think, then, it makes more
sense for each template to stay in the Plunker account of
whoever wrote it. An index page (or pages) on GitHub can
organize the plunks. If one of us updates a plunk, we can then
also update the index.
Leave a comment on watusiware's reply
Re: Plunker steals the show from jsfiddle!
6 years ago
I see how I can make an "empty" project with a README file, Is
that what you suggest?
JΛ̊KE
Leave a comment on jakecigar's reply
Re: Plunker steals the show from jsfiddle!
6 years ago
No, just suggesting we make some index page (or pages) that links to the plunks, or maybe embed them using iFrames.I see how I can make an "empty" project with a README file, Is that what you suggest?
The plunks have
various presentation styles. They seem to just be different
visual styles. One is called "overlay", another is
called "embedded". You can also form a URL to a page
with just the documentation.
So, the idea is to use GitHub
Pages to create a "micro-site" with the
templates. Since we are all part of the GitHub project, we can
all maintain the micro-site when we update our templates.
A "would be nice"
would be to be able to pull the plunks themselves from GitHub,
which, I gather, is an eventual goal for Plunker.
But they do have an API, and so
it would be possible to "push" to Plunker from GitHub
rather than have them "pull".
I'd expect these templates
to remain fairly static, though, So, I think something fairly
simple and not so automated will do the
job.
Leave a comment on watusiware's reply
Re: Plunker steals the show from jsfiddle!
6 years ago
Where do you see different view styles for plunk "home" pages?
JΛ̊KE
Leave a comment on jakecigar's reply
Re: Plunker steals the show from jsfiddle!
6 years ago
Where do you see different view styles for plunk "home" pages?
Not
sure what you are calling "home" pages. Not for a user
"home page" but for a Plunk.
On
the user home page, you will see a "panel" for each
Plunk. It has an image showing page content, name, tags, and (if
supplied) documentation (with "read more...")
Hover
on the image of the page content. There are various buttons. The
icons are not necessarily intuitive.
-
Edit this Plunk (pen icon)
-
View is Plunk in an Overlay ("run" arrow icon)
-
View Detailed Information about this Plunk ("i" icon)
shows documentation page
-
Open the Embedded View of this Plunk ("upload" icon)
- Delete
- Star
"overlay"
shows the document to the left with documentation to the right and
some more buttons. One of those is "fullscreen".
This
"Fullscreen" actually reveals yet another
"view", which is the "run view", which is JUST
the runnable content NOT in an iFrame without ANY enclosing
chrome, etc.
"View
Details" gets us yet another alternative view with tabs at
the top, name, buttons and a view of the running site similar to the
"overlay" view.
Then there's the
"embedded view". It puts the runnable content in an
iFrame with a subtle bar at the top with name, and
"flat" Code, Edit, and Preview buttons.
More ways of viewing a plunk than
you can shake a stick at. Not all accessible fem
the same place. Pick one, follow the URL construction scheme,
make some sort of index.
Embedded View seems meant for
embedding in a blog, etc. using an iFrame. Code button will give
you the familiar editor view. Code button will give you a file
explorer panel that slides-in from the righty, and allows to
to explore the code without fear of accidentally editing.
Preview is the default view you get when you first enter the
embedded view.
Leave a comment on watusiware's reply
Re: Plunker steals the show from jsfiddle!
6 years ago
By home page, I meant http://plnkr.co/users/JQM-Forum
. I’ve seen the different ways to show a plunk.
JΛ̊KE
Leave a comment on jakecigar's reply
Re: Plunker steals the show from jsfiddle!
6 years ago
A h. No, I haven't discovered any alternatives there.
I had hoped that the "panels" were frames, but they are not.
But perhaps the API docs will provide something useful. Presuming
one could use the API to populate a page dynamically.
Worst case, though, is an old-fashioned index page. One line
description, link to the plunk.
Leave a comment on watusiware's reply
Re: Plunker steals the show from jsfiddle!
6 years ago
Plunker - JQM-forum Homepage
can be used like a home page, It lists the public plunks from
JQM-Forum
and our personal public plunks.
Do you want to make it pretty?
JΛ̊KE
Re: Re: Plunker steals the show from jsfiddle!
6 years ago
I liked the home page idea. Well done Jake :)
Leave a comment on jakecigar's reply
Re: Plunker steals the show from jsfiddle!
6 years ago
I think it might be a good idea to re-crete the sticky and lock it. This
meta-discussion belongs either in a separate post or as an Issue or
Issues on the Github group.
(I think it should stay here for greater community involvement.)
Leave a comment on watusiware's reply
Re: Plunker steals the show from jsfiddle!
6 years ago
This will be sticky until we wipe up all the details. Then I can make
the next one sticky!
JΛ̊KE
Leave a comment on jakecigar's reply
Re: Plunker steals the show from jsfiddle!
6 years ago
I was bored, so I updated all the demos to JQM 1.4.5.
JΛ̊KE
Leave a comment on jakecigar's reply
Re: Plunker steals the show from jsfiddle!
6 years ago
What do you think of jQuery Mobile Single Page
demo using XSLT to serve the pages
?
It’s an easy way to make many "templated" pages without a
server program.
JΛ̊KE
Leave a comment on jakecigar's reply
Re: Plunker steals the show from jsfiddle!
6 years ago
Here's a hint: Plunker's preview window seems broken (at least
for me, on Safari and Chrome) and has been for some time. :(
But you can still use Plunkr, and it's a better way, anyway.
Click on the toolbar button to "Open the embedded view".
It's at the top-right, just to the left of the optional log-in.
It's the right-most button shown below:
This will open the preview in a separate window, which is much
more convenient, because it gives you a more realistic window that you
can resize independent of the editor.
Leave a comment on watusiware's reply
Re: Plunker steals the show from jsfiddle!
6 years ago
Click on the toolbar button to "Open the embedded view". It's at the top-right, just to the left of the optional log-in. It's the right-most button shown below:
Re: Re: Plunker steals the show from jsfiddle!
6 years ago
Do you code on your mobile phone? I just want to see the resultant
iframe unframed on my mobiles.
JΛ̊KE
Leave a comment on Omar's reply
Re: Plunker steals the show from jsfiddle!
6 years ago
jsFiddle isn't very mobile friendly either. Impossible to drag the
dividers, for example. Haven't tried jsBin on mobile.
I sometimes look at them on an iPad. But I haven't tried to
code in any of these things on an iPad!
Leave a comment on watusiware's reply
Re: Plunker steals the show from jsfiddle!
6 years ago
No, of course not, I code on my laptop and then check them on mobile.Do you code on your mobile phone? I just want to see the resultant iframe unframed on my mobiles.
jsfiddle used to be mobile-friendly, unfortunately, the new modification ruined it.jsFiddle isn't very mobile friendly either. Impossible to drag the dividers, for example. Haven't tried jsBin on mobile.
jsbin.com
is lighter and can be used for SPM (
http://jsbin.com/solilo to edit it http://jsbin.com/solilo/edit
).
Most importantly, it's mobile friendly as you can test code in
full-screen and see url changes.
Leave a comment on Omar's reply
Re: Plunker steals the show from jsfiddle!
6 years ago
It seems only plunker can have multiple html/xml files or do ajax(static).
JΛ̊KE
Re: Re: Plunker steals the show from jsfiddle!
6 years ago
It seems only plunker can have multiple html/xml files or do ajax(static).
http://jsbin.com/solilo/edit?html,output retrieves
http://jsbin.com/lawoma/ via Ajax.
Leave a comment on jakecigar's reply
Re: Plunker steals the show from jsfiddle!
6 years ago
Sounds sketchy not being able to make up your own page names.
JΛ̊KE
Leave a comment on jakecigar's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to jakecigar's discussion
{"z25973791":[14737000005800235,14737000005800243,14737000005800269,14737000005800273,14737000005803618,14737000005816683,14737000006064665,14737000006066773,14737000006075005],"z7664639":[14737000005800237,14737000005800239,14737000005800241,14737000005800251,14737000005800265,14737000005800267,14737000005800271,14737000005800277,14737000005800309,14737000005800667,14737000005807071,14737000005807135,14737000005807137,14737000005807173,14737000005807489,14737000006067844,14737000006068283],"z2950240":[14737000005804188,14737000005804203,14737000005804201,14737000005804215,14737000005804213,14737000005804219,14737000005804231,14737000005804779,14737000005804947,14737000005806135,14737000005806155,14737000005806217,14737000005806221,14737000005806546,14737000005818650,14737000005817901,14737000006068223,14737000006068297,14737000006077017]}