Following is my code snippet where I am showing list of YouTube videos in ul-li element inside the iframe.
<div data-role="content" id="contentVideosId" class="contentVideosClass">
<!-- Below div required for tinyscrollbar to work -->
<div class="video-wrapper">
<ul data-role="listview" id="video-list" data-theme="d">
<li style="display:inline"><iframe title="YouTube video player" src="http://www.youtube.com/embed/4Vq4s8n8vxw" ></iframe>
<div data-role="controlgroup" data-type="horizontal">Add to my playlist
Add to Favourite</div>
</li>
<li><iframe title="YouTube video player" src="http://www.youtube.com/embed/4Vq4s8n8vxw" ></iframe></li>
<li><iframe title="YouTube video player" src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent" ></iframe></li>
<li><iframe title="YouTube video player" src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent" ></iframe></li>
<li><iframe title="YouTube video player" src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent" ></iframe></li>
<li><iframe title="YouTube video player" src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent" seamless></iframe></li>
<li><iframe title="YouTube video player" src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent" seamless></iframe></li>
<li><iframe title="YouTube video player" src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent" seamless></iframe></li>
<li><iframe title="YouTube video player" src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent" seamless></iframe></li>
<li><iframe title="YouTube video player" src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent" seamless></iframe></li>
<li><iframe title="YouTube video player" src="http://www.youtube.com/embed/lzQgAR_J1PI?wmode=transparent" seamless></iframe></li>
</ul>
</div><!-- /video=wrapper -->
</div><!-- /content -->
If you see in the above code for first Li element I have added two buttons 1. plus and star
My requirement is that this 2 buttons should appear on the same line as the video but it is appearing on the next line i.e. below the video.
I have also tried the following CSS but it did not work for me.
ul li {
display: inline ;
padding: 0px 3px 0px 3px ;
}
Note: I would be adding videos and this 2 button runtime based on JSON data.
Like I said above some very basic CSS can solve this (jsfiddle):
ul li > * {
display: inline-block;
vertical-align: middle;
}
Try using table as follows:
<li style="display:inline">
<table>
<tr>
<td><iframe title="YouTube video player" src="http://www.youtube.com/embed/4Vq4s8n8vxw" ></iframe></td>
<td><div data-role="controlgroup" data-type="horizontal">Add to my playlistAdd to Favourite</div></td>
</tr>
</table>
</li>
Related
I upload files (PDF's only) using paperclip and now want to display these as a PDF in a view.
This gives me an empty frame <iframe src="<% #document.file %>"></iframe>
This results in an image <%= image_tag #document.file(:large) %>
the files are stored in postgress.
You have an syntax "issue":
<iframe src="<% #document.file %>"></iframe>
Should be
<iframe src="<%= #document.file %>"></iframe>
<!-- notice the equals symbol (=) -->
<!-- which prints something into erb file. -->
Also, I believe you need to use it's url, so I'd be something like this:
<iframe src="<%= #document.file.url(:large) %>"></iframe>
More info - What is the difference between <%, <%=, <%# and -%> in ERB in Rails?
<iframe src= <%= #document.url.html_safe %> width="595" height="485" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;" allowfullscreen> </iframe>
https://scalified.com/2018/01/16/injecting-pdf-html-page/
I have the following popup.
<div data-role="popup" id="popup-settings" data-transition="slideup" data-theme="c" data-corners="true" data-shadow="true" style="width: 500px; border: 1px solid #A5A5A5;">
<div data-role="header" class="ui-corner-top" style="border-bottom: 1px solid #A5A5A5;">
<h1>Settings</h1>
Done
</div>
<div data-role="content" style="background-color: #f2f2f2; border: 1px solid #f2f2f2;">
<ul data-role="listview" data-inset="true">
<li style="background-color: #f2f2f2">
<img src="icons/settingsMapping.png" /><h2>Mapping</h2><p>Set mapping framework to use.</p>
<ul>
<li><h2>Slappy</h2></li>
<li><h2>Tappy</h2></li>
</ul>
</li>
<li><img src="icons/settingsConnect.png" /><h2>Connection</h2><p>Connect to your Storm V4.0+ Server.</p></li>
<li><img src="icons/settingsPasscode.png" /><h2>Passcode</h2><p>Enter your user name and password.</p></li>
<li><img src="icons/settingsDeveloper.png" /><h2>Developer</h2><p>Developer settings.</p></li>
</ul>
</div>
</div>
When it displays, the nested ul is visible all the time.
What I'm looking at doing is when you select a list item from the first list, it's replaced by a second list, all within a popup.
Is this even possible?
I am able to insert an image inside the header of the jQuery mobile data role, but when I change my browser size the jpg does not change with it. Can someone tell me a quick fix for this please?
Here is my code
<div data-role="page">
<div data-role="header" class="page_header" >
<img src="header_bg.jpg" >
</div><!-- /header -->
<div data-role="content">
<ul data-role="listview" data-inset="true">
<li>Products</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div><!-- /content -->
</div><!-- /page -->
If you just want to fill the background of the header with your image, try this:
<div data-role="header" class="page_header" >
<h1>Header</h1>
</div>
Use CSS for your page_header class to set the background image sized by percentage:
.page_header {
background-image: url("http://lorempixel.com/1400/50/abstract/");
background-repeat:no-repeat;
background-size: 100% 100%;
}
Here is a DEMO
If you really want to use an image tag like in your example, set the width of the image to 100%:
.page_header img {
width: 100%;
}
I want to create links to pages in my website when a user clicks on a slideshow picture generated with bxSlider (which is excellent in every other way)
Can this be done? How? Thanks
I use something like this:
<li>
<div class="item-img2">
<a style="background-image: url('picture.jpg');" href="http://www.google.com"></a>
</div>
</li>
And in CSS
.item-img2 {
width:980px;
height:500px;
}
.item-img2 a {
display:block;
overflow:hidden;
width:980px;
height:500px;
background-position:center center;
background-repeat:no-repeat;
}
Just add an a href... for exemple:
<ul class="bxslider">
<li><img src="images/slide001.jpg"/></li>
<li><img src="images/slide002.jpg"/></li>
</ul>
I have a site that will have several Youtube videos embedded using the standard Youtube iframe code.
I would like for these to be triggered via text link such as:
<p>Click Here to watch a puppy do something.</p>
<iframe width="420" height="315" src="http://www.youtube.com/embed/1AH9VEM_qC0?rel=0" frameborder="0" allowfullscreen></iframe>
Where the iframe is hidden by default but when the link is clicked the video shows in a jQuery UI modal window.
There will be multiple videos on a page.
Any direction is appreciated.
jsFiddle: http://jsfiddle.net/2Ur9M/38/
<div id="vid1" class="play">vid1</div>
<div id="vid2" class="play">vid2</div>
<div id="vid3" class="play">vid3</div>
<div id="ifvid1" style="display:none">1<iframe width="420" height="315" src="" frameborder="0" allowfullscreen></iframe></div>
<div id="ifvid2" style="display:none">2<iframe width="420" height="315" src="" frameborder="0" allowfullscreen></iframe></div>
<div id="ifvid3" style="display:none">3<iframe width="420" height="315" src="" frameborder="0" allowfullscreen></iframe></div>
<script>
$(function()
{
$(".play").each( function( index )
{
$(this).click( function()
{
$("#if"+$(this).attr("id")).dialog(
{
modal: true
});
});
});
});
</script>