I want to show HTML5 videos with subtitles.
If i have a html file (for Chrome, with Playr), with this for example
...
<video class="playr_video" preload="metadata" width="1000" height="700" poster="poster1.jpg" style="border:1px solid gray;padding: 0% 0;" controls>
<source src="trailer.webm" type="video/webm" />
<track src="trailer-en.vtt" label="English subtitles" kind="subtitles" srclang="en">
<track src="trailer-el.vtt" label="Greek subtitles" kind="subtitles" srclang="el">
Your browser does not support the video tag, please update mime type.
</video>
...
it works.
But i have many videos to show, so i want one PHP file to control consistently as video showing page.
So in Joomla articles i do this (example, to illustrate)
<form action="video.php" method="post" target="_blank">
<input style="display: none;" id="video" name="video" value="trailer.webm" type="text" />
<input style="display: none;" id="poster" name="poster" value="video1poster.jpg" type="text" />
<input style="display: none;" id="subsen" name="subsen" value="video1subsen.jpg" type="text" />
<input style="display: none;" id="subsel" name="subsel" value="video1subsel.jpg" type="text" />
<input src="showvideo.jpg" type="image" />
</form>
and a php file just receives POST variables (like $video, $suben, $subel) and gives the same html like the code written in the beginning.
So in the page's source in Chrome, everything comes as intended, all code is correct, all files are properly refered. But subtitles do not show up.
Please note that in the Playr packet, there is a json file which i do not use because i cound not find instructions, i just use the two files playr.css and playr.js, but i don't think this hurts, i really have no idea why. Any help appreciated, thanks.
Solved: ALL files MUST reside in the same domain.-
Related
I have been trying the documentation of dijit textbox, but there seem to be no proper documentation on how to do text-align: right css style settings.
<input type="text" name="firstname" value="testing testing"
data-dojo-type="dijit/form/TextBox"
data-dojo-props="trim:true, propercase:true" id="firstname" />
If I add the "align: right" the parse fails. I also tried via CSS but the text-align seem to not be reflected.
<input type="text" name="firstname" value="testing testing"
data-dojo-type="dijit/form/TextBox"
data-dojo-props="trim:true, propercase:true, align: right" id="firstname" />
I also tried text align via css style but it does not parse well.
<input type="text" name="firstname" value="testing testing"
data-dojo-type="dijit/form/TextBox"
data-dojo-props="style: { width: '150px'; text-align: right}" id="firstname" />
I don't know if it is possible to set text alignments using data-dojo-props attribute. However you can solve your problem using CSS selectors:
HTML:
<input type="text" name="firstname" value="testing testing"
data-dojo-type="dijit/form/TextBox"
data-dojo-props="trim:true, propercase:true, align: right" id="firstname" />
CSS (examples):
input[name="firstname"] {
text-align: right;
}
or
#firstname {
text-align: right;
}
another elegant approach would be, to create an attribute selector querying the align: right value of your data-dojo-props attribute. With this selector you can reach all of your input items once.
input[data-dojo-props*="align: right"] {
text-align: right;
}
Here you can find an jsfiddle example.
UPDATE:
I have done some further investigations and I came to the conclusion that it is a syntax problem why the dojo parsing fails.
The following piece of code works without parsing errors:
<input type="text" name="firstname" value="testing testing"
data-dojo-type="dijit/form/TextBox"
data-dojo-props="trim:true, propercase:true, style:'text-align: right'" id="firstname" />
but the result is not as expected:
<div class="dijit dijitReset dijitInline dijitLeft dijitTextBox"
id="widget_firstname" role="presentation" widgetid="firstname" style="text-
align: right;"><div class="dijitReset dijitInputField dijitInputContainer">
<input class="dijitReset dijitInputInner" data-dojo-attach-
point="textbox,focusNode" autocomplete="off" name="firstname" type="text"
tabindex="0" id="firstname" value="Testing Testing"></div></div>
because the styling will applied to the wrapper div.
I my opinion the best way to handle your requirements is to work only with CSS stylings without using the data-dojo-props attribute.
Dojo supports right aligned text inputs natively through bi-directional text support https://dojotoolkit.org/reference-guide/1.10/quickstart/internationalization/bi-directional-text.html
This is intended to reverse the text direction of a portion or the entire page (including inputs) by setting the dir tag on an element:
<body dir="rtl">
<!-- Widgets Here -->
</body>
However, that probably isn't what you want. Try this CSS:
.dijitInputContainer .dijitInputInner {
text-align: right;
}
I want to show different images in different devices (not background image). Is it possible to do using bootstrap 3.x like the following?
For large screen
<img src="large-image.jpg" />
for medium device
<img src="medium-image.jpg" />
for small device
<img src="small-image.jpg" />
and so on.
Thanks in advance.
N.B. Finally I have found a good solution by myself. See the accepted answer below.
Try this:
<div class="row">
<div class="col-xs-12 hidden-sm hidden-md hidden-lg">
<img class="img-responsive" src="layouts/layouts.PNG" /> <!--Mobile-->
</div>
<div class="hidden-xs col-sm-12 hidden-md hidden-lg">
<img class="img-responsive" src="layouts/05.png" /> <!--Tab-->
</div>
<div class="hidden-xs hidden-sm col-md-12 hidden-lg">
<img class="img-responsive" src="layouts/06.png" /> <!--Desktop-->
</div>
<div class="hidden-xs hidden-sm hidden-md col-lg-12">
<img class="img-responsive" src="layouts/Layout_100.png" /> <!--Large-->
</div>
</div>
Use the <img> tag and provide other images in the srcset attribute
<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="yah">
It is described in detail here:
https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/
After #EIChapo's comment on this 2 years back question, I have search and read a lot of articles for this solution. As all modern browser except IE supports <picture> tag when I'm posting this answer. There is a bulletproof solution based on Dave Newton's article.
What we need to do is as following:
<picture alt="fancy pants">
<!-- loaded by browsers that support picture and that support one of the sources -->
<source srcset="big.jpg 1x, big-2x.jpg 2x, big-3x.jpg" type="image/jpeg" media="(min-width: 40em)" />
<source srcset="med.jpg 1x, med-2x.jpg 2x, big-3x.jpg" type="image/jpeg" />
<!-- loaded by IE 8+, non-IE browsers that don’t support picture, and browsers that support picture but cannot find an appropriate source -->
<![if gte IE 8]>
<object data="fallback.jpg" type="image/jpeg"></object>
<span class="fake-alt">fancy pants</span>
<![endif]>
<!-- loaded by IE 6 and 7 -->
<!--[if lt IE 8]>
<img src="fallback.jpg" alt="fancy pants" />
<![endif]-->
</picture>
.fake-alt {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
If you want to load only the image relevant to the screen-size, I think the best way is with javascript. Create versions of your photos, and in this case the script looks for an img with "600x400" in the filename, and replaces it with "1200x800" when the screensize is bigger than 767px.
DEMO: http://www.bootply.com/Y8XECJpGjS#
Javascript
if ($(window).width() > 767) {
$("img[src$='600x400']").each(function() {
var new_src = $(this).attr("src").replace('600x400', '1200x800');
$(this).attr("src", new_src);
});
}
HTML
<div class="thumbnail">
<img src="//placehold.it/600x400">
</div>
NOTE: this example uses placehold.it images, but obviously you will create your own image versions, include something to identify them in the filename (i.e. 600px, small, v1, etc), and then use that unique string as the find/replace strings in the script. i.e. If your filenames are photo-small.jpg, photo-mediumd.jpg, photo-large.jpg, then the script looks for "small" and replaces with "medium" or "large" where appropriate.
NOTE: once the image loads, that's it - it does not dynamically change image out as you change the screensize. There is surely a solution that does that, but overkill if not needed.
Bootstrap 5.XX version have the new approach.
please try the code bellow if you are using bootstrap version greater than 5.
<!--Visible only on mobile -->
<div class="d-block d-sm-none d-lg-none">
<img src="small-image.jpg" />
</div>
<!-- Hidden only on mobile-->
<div class="d-none d-sm-block">
<img src="large-image.jpg" />
</div>
Refrence https://getbootstrap.com/docs/5.0/utilities/display/
I set up in backoffice the default sort type to : in stock. this works for all pages except SearchController template file : search.tpl.
What can be the causes behind such dysfunctionning? I really don't know what part of code to deal with. Thanks everyone who already met such issue for advices.
Edit:
I discovered that the link in the adress bar after click on search button is:
website/index.phpcontroller=search&orderby=position&orderway=desc&search_query=design+40&submit_search=Rechercher
When I remove orderby=position&orderway=desc, the default behaviour works. I just need to remove this action from controller but still don't know how.
In template file, I found:
<form method="get" action="{$link->getPageLink('search')|escape:'html'}" id="searchbox">
<p>
<label for="search_query_top"><!-- image on background --></label>
<input type="hidden" name="controller" value="search" />
<input type="hidden" name="orderby" value="quantity" />
<input type="hidden" name="orderway" value="desc" />
<input class="search_query" type="text" id="search_query_top" name="search_query" value="{$search_query|escape:'html':'UTF-8'|stripslashes}" />
<input type="submit" name="submit_search" value="{l s='Search' mod='blocksearch'}" class="button" />
</p>
</form>
As you see, I have already changed the value of the hidden input to quantity. Hope it helps.
I'm having trouble getting Cucumber to "choose" a radio button and hoping someone can give me a sanity check. Without quoting a huge mass of HTML junk, here's the relevant portion (which I collected from print.html). It's within a modal div that is activated by a button. I can "click" that button and see the modal window appear (I'm running it as a #javascript scenario in Selenium).
<div class="modal-body pagination-centered">
<img src="/assets/payment.png" alt="Payment" />
<form novalidate="novalidate" method="post" id="edit_cart_1" class="simple_form edit_cart" action="/carts/complete" accept-charset="UTF-8">
<div style="margin:0;padding:0;display:inline">
<input type="hidden" value="✓" name="utf8" />
<input type="hidden" value="put" name="_method" />
</div>
<div class="control-group hidden cart_property_id">
<div class="controls">
<input type="hidden" name="cart[property_id]" id="cart_property_id" class="hidden" />
</div>
</div>
<div id="payment_fat_buttons" class="fat-buttons">
<div class="vertical-button-wrapper">
<input type="radio" value="cash" name="cart[payment_type]" id="cart_payment_type_cash_pay" data-property-id="1" />
<label for="cart_payment_type_cash_pay">Cash</label>
</div>
<div class="vertical-button-wrapper">
<input type="radio" value="credit" name="cart[payment_type]" id="cart_payment_type_credit_pay" data-property-id="1" />
<label for="cart_payment_type_credit_pay">Credit</label>
</div>
</div>
<div style="display: none;" id="cart_room_number_area_pay">
<div class="control-group string optional cart_room_number">
<label for="cart_room_number_pay" class="string optional control-label">Room number</label>
<div class="controls">
<input type="text" value="" size="50" name="cart[room_number]" id="cart_room_number_pay" class="string optional" />
</div>
</div>
</div>
<input type="checkbox" value="1" style="display: none;" name="receipt" id="receipt" />
<div class="sell-modal-footer">
<input type="submit" value="Complete With Receipt" name="commit" id="cart_complete_with_receipt" data_disable_with="Processing..." class="btn btn-danger" />
<input type="submit" value="Complete Sale" name="commit" data_disable_with="Processing..." class="btn btn-danger" />
</div>
</form>
</div>
I've tried as many different equivalent ways of getting at it that I can think of. Most obviously just by the label, or the ID, like:
choose 'cart_payment_type_cash_pay'
choose 'Cash'
which just gives me the error:
Unable to find radio button "cart_payment_type_cash_pay" (Capybara::ElementNotFound)
I thought it might have something to do with the modal dialog, visibility, etc. but I introduced the ID #payment_fat_buttons just for testing, and when I look for it like this:
find('#payment_fat_buttons').choose('Cash')
it finds that DIV OK, but still not the radio button. I also tried getting at it with :xpath on the whole page, and within a scope like:
within(:xpath, "//div[#id='payment_methods']") do
find(:xpath, ".//input[#id='cart_payment_type_cash_pay']").choose
end
which acts like it can also find the outer DIV, but not the radio button - I get the error:
Unable to find xpath ".//input[#id='cart_payment_type_cash_pay']" (Capybara::ElementNotFound)
Generally, it seems like I can find any arbitrary element around the radio buttons with :xpath or CSS expressions, just not the radio buttons. I can also push the submit buttons on the form without any problem. I tried dropping the data attributes as a test - no difference. Any help would be greatly appreciated. This is driving me nuts because it seems so simple, and yet I'm getting nowhere. I need to choose that for a big segment of Scenarios, so if I can't figure it out, I'll have to resort to something hokey and horrible. Many thanks in advance...
Relevant versions from Gemfile.lock:
rails (3.2.13)
cucumber (1.3.8)
gherkin (2.12.2)
cucumber-rails (1.4.0)
capybara (2.1.0)
selenium-webdriver (2.35.1)
I finally figured this one out. Capybara wasn't finding the radio button because buried deep in my styles was some CSS that hid it in order to change the appearance. Once I realized that, I figured out that I could side-step the whole issue of finding the radio button by just doing a click on the label instead:
find(:xpath, "//label[#for='the_radio_button_id']").click
I didn't realize it was possible to get at radio buttons that way - but in any case, it solves the issue of how to click a radio button that Capybara won't find due to styling or other issues. Hope that helps someone else.
HI im trying to integrate zoho into my website and open a document in browser
Im using Wamp server.
This the code im trying to work with:
<html>
<head>
</head>
<body>
<form method="POST" action="http(s)://export.writer.zoho.com/remotedoc.im" target="_self"
accept-charset="UTF-8">
<input type="hidden" name="url" value="http://localhost/paper.doc">
<input type="hidden" name="apikey" value="here goes api key">
<input type="hidden" name="output" value="url">
<input type="hidden" name="mode" value="normaledit">
<input type="hidden" name="filename" value="paper.doc">
<input type="hidden" name="lang" value="en">
<input type="hidden" name="skey" value="here goes secret value">
<input type="hidden" name="id" value="12345678">
<input type="hidden" name="format" value="doc">
<input type="hidden" name="saveurl" value="http://localhost/save.php">
<input type="submit" name="submit" value="Open/Edit">
</form>
</body>
</html>
I dont know i get this error:
Forbidden
You don't have permission to access /http(s)://export.writer.zoho.com/remotedoc.im on this server.
I have entered the api key correctly and the secret key
Im just confused and stuck here.Im blocked
Here is the documentation : http://apihelp.wiki.zoho.com/Open-Document.html
You have taken the (s) out of the url right? I know it might seem like a silly question but I thought I should check in case you had overlooked it. The url resolves for me and gives an 'api key is invalid' warning.
The error given would seem to indicate the browser thinks its a relative instead of absolute url.
I dont know much more about ZOHO but i also want to implement this in my project in future. As i read in https://apihelp.wiki.zoho.com/Open-Document.html#mfs it says that saveurl must be publicly accessible and if it not accessible publicly it gives an error and localhost is not publicly accessible so it gives an error.