So I have a simple upload file form and I want to use essence-progress as a loading spinner while the file is being uploaded. I use XMLHttpRequest2 so I can track my progress and I get in real time the percent left.
Can essence-progress display that percentage number?
I'm thinking something like this:
<FileUpload>
<Progress progress={'progress'} type={'circle'} />
</FileUpload>
Thanks in advance!
Looking into the source code of essence-progress I don't think there is a direct way of doing this. However, you could maybe build a new component, something like this:
<FileUpload>
<Progress type={'circle'} />
<Percentage value={'progress'} />
</FileUpload>
as a quick way to solve this issue. And with CSS you position it on top of the progress bar.
I hope this helps. Keep me posted :)
Related
to display and style my tweets on my website I use somethiong like this code:
<a
class="twitter-timeline"
href="https://twitter.com/YourNickname"
data-widget-id="xxxxxxxxxxxxxxxxxxx" <!--you will haveyour own number http://stackoverflow.com/questions/16375116/what-is-data-widget-id-in-twitter-api-how-i-can-get-the-data-widget-id-->
data-chrome="noheader nofooter noborders noscrollbar transparent" <!--tweak these for the looks-->
data-tweet-limit="5"
data-link-color="#FFFFFF"
data-border-color="#FFFFFF"
lang="EN" data-theme="light" <!--light or dark-->
height="447"
width="255"
data-screen-name="yourName"
data-show-replies="false"
data-aria-polite="assertive">
Tweets by #YourName
</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
I'm looking for a way to remove images in case they are twitted.
Looking for a solution I've found this:
https://dev.twitter.com/discussions/19073
They suggest to add a line
data-src-2x="false"
to my code.
This solution, sadly, doesn't seem to work for me.
If any of you have solved this problem, a hint would be much appreciated!
Cheers!
The following answer is no longer relevant due to recent changes by twitter!
In the configuration options when creating the widget there is a checkbox labeled 'auto expand photos'. Uncheck this, but be aware it takes
I am trying to learn EmberJs, in conjuction with Laravel 4, to create a blog. Things have been going great, stuff hasn't been too difficult yet. But I got into a snag when trying to have a <img/> tag in one of my handlebar templates.
From my understanding to use info from a model in a template you use {{attribute_name}} and like magic, it's there! And so for my tag I was trying something like:
<img src="{{URL::asset('images/posts/')}}#{{id}}.#{{image_extension}}" }}" alt=""/>
Adding the url to images with Laravel and Blade, then on the template, just adding in those last little pieces to make the it all work. But I get this instead:
<img src="http://localhost/blog/images/posts<script id='metamorph-11-start' type='text/x-placeholder'></script>26<script id='metamorph-11-end' type='text/x-placeholder'></script>.<script id='metamorph-12-start' type='text/x-placeholder'></script>jpg<script id='metamorph-12-end' type='text/x-placeholder'></script>" alt="">
Obviously theres script tags in my src tag and this is causing some issues.
Now then, upon much research I discovered {{unbound attribute_name}} and came up with:
<img src="{{URL::asset('images/posts')}}/#{{unbound id}}.#{{unbound image_extension}}" alt=""/>
and while this works on the first blog post I click, it doesn't switch images when I switch posts. So is there a way to make this guy work? I'm running out of ideas! Any information you could shed on this would be great! I really like ember so far and want to get even better! IF there's any more info you need, let em know and I will edit this question! Thanks so much!
EDIT:
Based on the advise from #buruzaemon, I tried
<img src="{{URL::asset('images/posts')}}/#{{bind-attr src=id}}.#{{bind-attr src=image_extension}}" alt="Post image"/>
and it feels like it's on the right path, but not quite there. Any more advice?
Perhaps you should have a look at bind_attr in Ember.js. It will allow you to set the src attribute properly with value that can be set in your controller.
How would I go about doing this? Putting the following code into the
Markdown generator
gives me the desired output
<div style="float: left"><img src="http://ompldr.org/vaDU5NQ/scrotter.png"/>
</div>
I'm trying not to, kid. Don't act so surprised, Your Highness. You weren't
on any mercy mission this time. Several transmissions were beamed to this
ship by Rebel spies. I want to know what happened to the plans they sent
you. Kid, I've flown from one side of this galaxy to the other.
I've seen a lot of strange stuff, but I've never seen anything to make me
believe there's one all-powerful Force controlling everything.
However, adding this code to my README.md file makes it an inline image instead
of floating.
How could I work around this? Is it a Github bug?
I know this thread's old, but for anyone interested, you can use <img align="left" src="img.jpg"> and <img align="right" src="img.jpg"> to float images on GitHub.
I believe it is a security issue with GitHub. My understanding is they strip all HTML attributes such as style with the execption of perhaps href.
How to automate Uploading a file using selenium.
How to give file Path ??
My TextBox is Readonly. I cant type the file path directly in the textbox.
Also, how to stop the selinum server until that file completely uploaded.??
My File upload field is a invisible field. And i found its code using firebug add on.
Before adding a file code is like this.
<input id="ctl00_ContentPlaceHolder1_AsyncfileUpload_ClientState" type="hidden" name="ctl00_ContentPlaceHolder1_AsyncfileUpload_ClientState" autocomplete="off" value="{'isEnabled':'true','uploadedFiles':[]}">
And after adding a file(doc file). The code changed to
<input id="ctl00_ContentPlaceHolder1_AsyncfileUpload_ClientState" type="hidden" name="ctl00_ContentPlaceHolder1_AsyncfileUpload_ClientState" autocomplete="off" value="{'isEnabled':'true','uploadedFiles':[{"fileInfo":{"FileName":"scope.docx","ContentType":"application/vnd.openxmlformats-officedocument.wordprocessingml.document","ContentLength":12887},"metaData":"/wEFsAF7IlRlbXBGaWxlTmFtZSI6ImZyeWd1NGNqLmt1YSIsIkFzeW5jVXBsb2FkVHlwZU5hbWUiOiJUZWxlcmlrLldlYi5VSS5VcGxvYWRlZEZpbGVJbmZvLCBUZWxlcmlrLldlYi5VSSwgVmVyc2lvbj0yMDExLjEuNTE5LjM1LCBDdWx0dXJlPW5ldXRyYWwsIFB1YmxpY0tleVRva2VuPTEyMWZhZTc4MTY1YmEzZDQiffOraDjiYXPavAAMYOUAVVhGEKk8"}]}">
What is the Xpath here?
I tried with xpath id="ctl00_ContentPlaceHolder1_AsyncfileUpload_ClientState". The code which i used is
selenium.type("id="ctl00_ContentPlaceHolder1_AsyncfileUpload_ClientState","c:\\docfile1.doc");
But its not working.
Help Me..
The XPath expression for this input would be //input[#id='ctl00_ContentPlaceHolder1_AsyncfileUpload_ClientState'].
However, I fear this won't work since Selenium usually refuses to work with invisible elements. Also, hidden <inputs> are usually just containers for pre-filled data or containers for script-validated-and-edited data.
You should be looking for a <input type='file' /> if there's some, or maybe a javascript handling the click on the enclosing element (but, frankly, that's usually not the case - the scripts tend to act on edit of the input, not on the click on them).
If you can't find it, post some more code. The best thing would be a SSCCE, so take the source of the page and make it naked, strip everything unnecessary for us from it. We love code. And we love anything that's naked.
And about the wait for the upload to be complete: There's no such default thing. If the file is sent during a usual form upload (by clicking the Submit button), then the browser will wait. If it is uploaded immediately, you'll have to wait smartly. Realize what changes after a successful upload, then wait for that element/message to appear. With Selenium 2 (WebDriver), this can be done very easily.
You can use
selenium.type("xpath of text box","path of your file")
OR for IDE
command=type
target=xpath_of_text_box
value=Path_of_your_file
example:
selenium.type("id=cvfile", "D:\\Automation\\resume.doc");
My brand new job is full of wonderful and awful surprises. one of the most interesting part of this job is the will to enhance, accelerate, make everything scale.
And today, first real problem.
Here's the deal : we get up to 20 list elements, each one of them displaying its own Facebook share, Twitter share, and Facebook Like button.
As you can imagine, 60 iframes opening is just a pain for user experience.
My question : anybody has already been facing such problems, and what would you recommend to upscale these performance issues ?
While I'm thinking of an AddThis implementation, I hope there are other solutions I could consider.
Best way to improve performance is not to copy paste the code from facebook plugins.
Facebook 'Like Button' code looks like:
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#appId=127702313984818&xfbml=1"></script>
<fb:like href="example.com" send="true" width="450" show_faces="true" font=""></fb:like>
Issue with this is, if you have 20 like buttons, then 20 Divs are created with id="fb-root" and 20 times the script for all.js is called. Best way is to move the
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#appId=127702313984818&xfbml=1"></script>
to header of page and whenever you want a like button, only use
<fb:like href="example.com" send="true" width="450" show_faces="true" font=""></fb:like>
Same goes for facebook comments & other plugins.
Also, foir some plugins facebook provides option to either use xfmbl or iframe code. Always pick the iframe code because facebook's js has to parse all xfbml code and convert to iframe. It causes a lot of DOM insertions and slows down the page.
Hope this helps!