I want to know how I can embed an entire reveal.js presentation within the limits of a tag so that my presentation looks like presentations on slideshare.net
Thanks in advance.
You can't do that with a div. What you describe sounds exactly like what iframes are useful for.
<iframe width="400" height="400" marginheight="0" marginwidth="0" src="/your/reveal/slideshow.html">
Fallback text here for unsupporting browsers, of which there are scant few.
</iframe>
I've not tried doing that myself, but that's the right tool to use. Try noodling with that a bit and you should get it to do what you want.
Additional resources:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe
I was able to embed a deck.js slide deck within a post on my stand-alone Wordpress site using an iframe as Crell suggested. The html content for the iframe was served from a GitHub repository.
Here's the code (input using the Text [not Visual] editor in Wordpress):
**
<iframe src="https://russmcduff.github.io/festschrift/ignite/deck.js-latest/scott.html" title="deck.js in WP post" width="600" height="300">
<p>Your browser does not support iframes.</p>
</iframe>
**
Here's the resulting post:
Example of deck.js slides autoplaying within a Wordpress post
Perhaps the same approach will work for a reveal.js slide deck?
It is possible via embedded property:
Reveal.initialize({ embedded: true })
Related
I want to manipulate a youtube video to autoplay and loop using js/jquery. It seems my issues stem from the from the fact that my site is on a CMS (Drupal), and it already spits out the iframe. So it's not an empty div that gets replaced as per the documentation.
The first thing I did was to change some settings on my site to ensure that "enablejsapi=1" and an ID was included in the output for whatever spits out the iframe.
I thought that would suffice and I'd only need to reference that ID in the onYouTubeIframeAPIReady(); function. But it wasn't working.
I looked at these solutions as well:
Listening for Youtube Event with this http://jsfiddle.net/YzvXa/197 - It didn't quite work for me. The state change did seem to be working in the fiddle, but when I tried to add parameters it didn't. (I'm assuming parameters only work when applied on load/ready?)
Already embedded iframe not working with api with this http://jsfiddle.net/y89je0k8/ - I feel like this got me closer, as I was able to atleast autoplay and mute using event.target.playVideo().mute(); for the ready event. How ever setting parameters like controls: 0 etc didn't.
What confuses me is in the second solution, it only works when the js is "inline". In the fiddle it's actually written in the html box in a script tag, but if you move the script in the js box, it doesn't.
Still I do feel like the points stated in the second solution might point me in the right direction, but I'm stuck in how to move forward with it.
onPlayerReady will not fire the ready check on localhost.
Also when linking your youtube.js file it has to come after the iframe.
add ?enablejsapi=1
sometimes double linking in both player_api and iframe_api will also help
//< before www. not https://
placment is key.
Here's what I've tried:
I've addressed #1 by actually adding my js in the server
My script is linked just before the closing body tag (so it is after the iframe)
I have adjusted my cms' youtube handler (Media: Youtube for Drupal) to add this parameter on output
I have tried this but it didn't seem to make a difference
I am limited by this as I am bound to using https. Is this the deal breaker?
I do notice that when I add the standard code to load the the iframe api asynchronously in my js, the <script src="https://www.youtube.com/iframe_api"></script> and <script type="text/javascript" id="www-widgetapi-script" src="https://s.ytimg.com/yts/jsbin/www-widgetapi-vflC6bXIS/www-widgetapi.js" async=""></script> appears as the first items in <head>, instead of just directly after the iframe as it normally would. I'm unsure why this is happening, but what can I do to ensure it's in the correct place? Perhaps this is the source of the issue, if placement is the key?
What I want to achieve is this behaviour: https://codepen.io/cee-r/pen/PMaRJR, where the video accepts parameters set in js when the html markup is already:
<iframe id="player" title="YouTube video player" width="640" height="360" src="https://www.youtube.com/embed/ApXoWvfEYVU?enablejsapi=1" frameborder="0" allowfullscreen="1" ></iframe>
instead of:
<div id="player"></div>
I have the following link on my website:
<a href="/pages/getting-started-step-2-of-5" title="Next Step">
<span style="text-decoration: underline;">Next Step</span>
</a>
It works fine, however, would it be possible to change it so that when the link is clicked and the new page is opened it does not automatically scroll to the top of the page? i.e. the new page is in the same position as the previous page was?
Yes, if you read about Internal links.
Yes it is possible using HTML tags.
You should be using anchors.
You can have named anchors to jump to.
<a name ="jumphere">here</a>
You can jump to named anchors by using there names after a #.
http://somedns.com/index.php#jumphere
more info
Named anchors are no longer supported in HTML5 - use id instead in HTML5 pages.
Is there a way to use an iframe, but still have the address bar change when clicking what's inside the iframe to what the page actually is? I want to have a horizontal bar at the top of the page with a music player that allows music to play while browsing the site. But I also want people to easily be able to bookmark the pages as well.
I've searched, but can't find the answer. Many are just looking to change what URL is loaded in the iframe...that's not what I want. I want the actual address bar displayed in the browser to update.
This sentence is here to help me reach the 30 character minimum. Ignore this and read the next sentence for your answer:
No.
UPDATE:
"Changing" and "Redirecting" are two different things. You need to clarify which it is. "Changing" the address bar is impossible.
"Redirecting" IS possible.
Clicking on a standard link from within an iframe will not affect the topmost window on its own. A quick example of a Javascript redirect within an iframe would be something like this:
TOP WINDOW:
<html>
<head></head>
<body>
<iframe src="http://yoursite.com/iframe_test.html" />
</body>
IFRAME TEST:
<html>
<head>
<script>
window.onload = ready;
function ready()
{
document.getElementById("link1").onclick = linkClick;
document.getElementById("link2").onclick = linkClick;
}
function linkClick(e)
{
e.preventDefault();
window.top.location.href = this.href;
}
</script>
</head>
<body>
<a id="link1" href="http://youtube.com">Link1</a>
<a id="link2" href="http://facebook.com">Link2</a>
</body>
EXPLANATION:
Without the Javascript in place, what will happen when you click on a link in an iframe is that you will remain on the original page and the iframe will be redirected to the link you've clicked on. Using Javascript within an iframe in this fashion can force the topmost frame to redirect.
I would highly discourage relying on this in any way. It's sloppy programming in general, and I would stay away from iframes altogether if possible.
Yes, you can, but it's not a straightforward solution and it has some limitations
changing
You can use Web API messages and history API together to get what you want.
Example
Jsfiddle
redirecting
You can use the example above and replace the push history with a window.location.replace
Please consider the snippet as a hint to get what you want. The example above is not well thought for security (i.e. iframe script is sending messages to the parent, irrespective of its origin).
The default Facebook "Like Box" is too big for my site.
I would like to use a very simple like button, without the facebook page picture, name, fan names, etc. When my website's visitors click on it, they should become fans of my Facebook page.
I can't find out how to remove the page name and picture (not sure if it's even possible)... Any idea?
--
update:
here is a very similar question: Facebook Like button for fan page - cannot create simple button with no answer so far. Any workaround I could use?
Is this more like it?
https://developers.facebook.com/docs/reference/plugins/like/
So your code would look something like this:
iFrame:
<iframe src="http://www.facebook.com/plugins/like.php?app_id=212715052108961&href=PAGEURL;send=false&layout=button_count&width=50&show_faces=false&action=like&colorscheme=light&font&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:50px; height:21px;" allowTransparency="true"></iframe>
XFBML:
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=212715052108961&xfbml=1"></script><fb:like href="PAGEURL" send="false" layout="button_count" width="50" show_faces="false" font=""></fb:like>
Why not just use a like button?
I created a website that works quite nice but later went over to a friend's house and the website was disproportioned and almost hideous on his widescreen monitor. Without extensive rewriting of the website, is there perhaps a script that resizes my website for those on widescreen monitors, or other alternatives? Any suggestions besides "redo your website properly" welcome. Thanks!
EDIT:
Here is how my website should look like:
http://img843.imageshack.us/img843/4453/22425853.jpg
Here's how it appears on widescreen:
http://img851.imageshack.us/img851/7494/racism.jpg
It depends on how you did the layout. If you did not use absolute or fixed positiong, the simplest way could be to use a wrapper div around your content and give it a maximum width, like this
<body>
<div id="wrapper">
<!-- all the content goes here -->
</div>
</body>
and the CSS
#wrapper {
max-width: 960px;
margin: 0 auto
}
EDIT: If you do not have access to the HTML you can leave the CSS as shown and use this jQuery line (it should work but I have not tested it)
$('body').wrapInner('<div id="wrapper" />')
EDIT: I see you are not familiar with jQuery. Code that should be run only when the page is ready should be wrapped as follows:
$(function() {
$('body').wrapInner('<div id="wrapper" />');
});
Please let me know if that works for you. You can try
$('#wrapper').attr('id');
in the Firebug console to check that the wrapper div has been created.
Set a max-width in your css on the wrapper of the site.