Hi sorry every one my English is not good! I am using an iframe for a video. Above the iframe there is a dropdown menu, it is working well in firefox but in ie8 dropdown goes to underneath the iframe. If I replace the iframe with an image it is working good. I have play with position and z-index properties a long day but there is no use. Please help me if there any solution for avoiding this issue!!
Assuming your video is being played by Flash....
If you're embedding Flash you should explicitely set the wmode parameter to opaque to avoid dropdowns diving behind the flash object. You could also use a library to deal with the nasty details of embedding flash in different browsers.
EDIT: instead of including an iframe try this - took your movie and used the embedding link youtube presents at the end of the movie:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Embedded YT Movie with DIV element on top</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<object style="height: 390px; width: 640px">
<param name="movie" value="http://www.youtube.com/v/zFJfbDETIIk?version=3">
<param name="allowFullScreen" value="true">
<param name="allowScriptAccess" value="always">
<param name="wmode" value="opaque"> <!-- I added this one wrt youtube's proposed URL -->
<embed src="http://www.youtube.com/v/zFJfbDETIIk?version=3" type="application/x-shockwave-flash"
allowfullscreen="true" allowScriptAccess="always" width="640" height="390"
wmode="opaque" <!-- I added this one wrt youtube's proposed URL -->
>
</object>
<div style="position:absolute;width:300px;height:300px;top:10px;left:10px;background-color: red;">
This one should be on top.
</div>
</body>
</html>
Related
In a presentation, I would like to create a Twitter Timeline with a few selected tweets. In the best case it should look as natural as if someone went to Twitter on his own computer or saw it on his smartphone.
I am using LateX Beamer for the rest of the slides, but I am flexible if it is another software that allows to export a PDF/Image that I could include in LateX.
(There are a lot of tools on how to integrate live Tweets in PowerPoint / Keynote , but I want to do it for historical tweets and will be offline during the presentation.)
I was trying the following:
- Simply take screenshots of the tweet and arrange them within LateX or PowerPoint. Looks ok but not super nice, and quite cumbersome to do.
Since it is possible to extract an html of a tweet to embed on a homepage, I thought of doing this for the presentation. Unfortunately, I don't know much of html / reveal.js presentations.
Has anybody found a good solution for a similar problem?
EDIT:
I started reveal.js and found the following plugin: https://github.com/rajgoel/reveal.js-plugins/tree/master/embed-tweet
I was then trying to apply it and followed the intros to reveal.js and also saved the source code of the plugin into my plugin folder for reveal.js. However, it does not work (=Returning a blank page in the html). Can anybody point me to my error? (I am completely new to reveal.js / html so sorry if it is basic?)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Reveal.js 3 Slide Demo</title>
<link rel="stylesheet" href="css/reveal.min.css">
<link rel="stylesheet" href="css/theme/default.css" id="theme">
<!--Add support for earlier versions of Internet Explorer -->
<!--[if lt IE 9]>
<script src="lib/js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<!-- Wrap the entire slide show in a div using the "reveal" class. -->
<div class="reveal">
<!-- Wrap all slides in a single "slides" class -->
<div class="slides">
<!-- ALL SLIDES GO HERE -->
<!-- Each section element contains an individual slide -->
<section>
<div class="tweet" data-src="https://twitter.com/marcfbellemare/status/972558957645631488"></div>
</section>
</div>
</div>
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.min.js"></script>
<script>
// Required, even if empty.
Reveal.initialize({
// ...
dependencies: [
// ...
{ src: 'plugin/embed-tweet/embed-tweet.js' },
// ...
]
});
</script>
</body>
</html>
I want the hyperlink to apply to the image only but do not know how to end the linking.
It continues to link the header and other text blocks below my hyperlink line. I'm not sure what I'm doing wrong. How do I isolate the hyper link to just the image? I am using google chrome as my browser
Here is my code:
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"
<title>Example Document</title>
</head>
<body>
<h1>This is Craig's Favorite Dog.</h1>
<p>Click on image for more information.
<article>
<dd><a href="https://en.wikipedia.org/wiki/Newfoundland_(dog)">
<img src="https://media.mnn.com/assets/images/2016/04/newfoundland- dog.jpg" height="240" width="360"
</a></dd>
</article>
</p>
</body>
<br>
<br>
<h2>This is the fart of the dog<h2>
<audio controls>
<source src="fart.mp3" type="audio/mpeg">
<source src="fart.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
</html>`
The image tag is not terminated - finish it with a greater than character (i.e. >).
<img src="https://media.mnn.com/assets/images/2016/04/newfoundland-dog.jpg" height="240" width="360" />
Also note that I added a slash (/) before the end of the tag. That is because image tags have no permitted Content - from MDN:
Permitted content None, it is an empty element.
Other suggestions:
Don't add the closing body tag (</body>) before the rest of the contents are added (e.g. the h2 tag, the audio tag, etc).
Permitted content for the paragraph tag (<p>) is Phrasing content but the article tag is flow content so just move the article tag after the paragraph tag.
The closing tag for the heading 2 towards the end is missing the closing character: </h2>
See this plunker example with the updates applied
I have multiple forms with tinyMCE textareas that saves content to the database in order to generate a PDF with the content from the database. The user can input text or images to the textarea.
Whenever the user center-align the image with TinyMCE, it doesn't show in the PDF. It doesn't give me any errors, it simply doesn't show. If I go back to the form and right-align the image, it shows again, but the users of the system required full control of the interface.
does anyone knows what could be causing this?
Notes:
I'm aware of this bug however none of the suggestions I found there fixes my issue.
I'm using Laravel-dompdf
This is a sample of the view that is being used by DOMPDF, the image is contained within product description.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>{{Lang::choice('page_elements/general.proposal', 2)}}</title>
<style type="text/css">
</style>
</head>
<body>
<div class="product_section">
<div class="text-block">{{($proposalProduct->description)}}</div>
</div>
</body>
</html>
This is a sample of what the product description (formatted by TinyMCE) is returning.
<p>This is a sample product, using images and tinyMCE.</p>
<p><img style="-webkit-user-select: none; margin-left: auto; margin-right: auto;" src="http://mywebsite.com/products/images/product1.png" alt="" /></p>
Thanks for the help.
I have a single page website which lists a collection of HTML5 audio players. The problem is the site has become slow because the following browsers start predownloading the content (mp3 and ogg)
Internet Explorer
Google Chrome
Firefox
Safari
(probably Opera)
I use the basic code to implement the players. Is there a way I can prevent the browsers from predownloading the audio files and only work when they click play?
<audio controls="controls" height="32" width="300" tabindex="0">
<source type="audio/mpeg" src="http://cdn.com/track.mp3"></source>
<source type="audio/ogg" src="http://cdn.com/track.ogg"></source>
</audio>
<audio controls="controls" preload="none">
<source src="song.ogg" type="audio/ogg" />
<source src="song.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
Note - preload="none" - can be used with VIDEO HTML5 and AUDIO HTML5.
The preload attribute is supported in all major browsers, except Internet Explorer and Opera.
MSIE still accounts for some 30% of all web traffic, so preload="none" is only a part solution. In a few pages where I had this problem, I add a small script to my page headers:
<script type="text/javascript">
function addAudio(t) {
var l=t.innerHTML.length;
var audioName=t.parentElement.id;
if( t.children.length==0) {
t.innerHTML=t.innerHTML+' <audio controls="controls"><source src="'+
audioName+'.ogg" type="audio/ogg" /><source src="'+
audioName+'.mp3" type="audio/mp3" /> No audio tag support</audio>';
}
}
</script>
and then use DHMTL to dynamically add the audio tag, for example:
<li id="2_Lesson_1_Hello"><span onclick="addAudio(this)">Γεια σας</span></li>
What this does is to define a list item containing a text span. When the person browsing clicks on the spanned text, the javascript fires and appends the <audio> tag. You could alternatively use the onmouseover attribute so that the audio tag is added on hover.
Add the preload attribute to the generated code if you wish. This is the simple approach, but if you are already using jQuery on your webpage, I note that this offers elegant alternatives.
i have in google+ snippet in my website, to sharing my website on google+, my code look like this
<head>
<meta property="og:title" content="title of website" />
<meta property="og:url" content="my website url" />
<meta property="og:image" content="url image" />
<meta property="og:description" content="description of my website" />
</head>
<bod>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall"></g:plusone></td>
</body>
i have also included facebook like, which rendering all meta tags (title,image,description). But, in case of google+, thumbnail image is not showing.
Need help !!
What are the dimensions of your image? I standardised my thumbnails at 100x67 as they look right on Facebook, but Google+ wasn't showing them. I found that larger images will work with the same code, so I can only assume Google+ ignores little images for some reason.
from google+ docs: https://developers.google.com/+/web/snippet/
Images that are too small or not square enough are not included in the
+Snippet, even if the images are explicitly referenced by schema.org microdata or Open Graph markup. Specifically, the height must be at
least 120px, and if the width is less than 100px, then the aspect
ratio must be no greater than 3.0.
However i've been experimenting and this does not seem to be exactly right. Does anyone know the correct algorithm?