How can I use Javascript to play media on clicking an object? - javascript

I apologize for the basic question but I am new to programming and I cannot find the answer to my question in the tutorials I have. I have developed a HTML/CSS page for a project due in two days. I would like users to click an object on the page to access a presentation (which will play full screen). At the end of the presentation the user should be returned to my HTML page.
Can this be done using Javascript with HTML? If so, how?
Will I need to convert the presentations into mp4s?
Thanks, Amit.

You can do 2 things,
1.- you can convert the pptx to a mp4 an playit in fullscreen or
2.- you can use a presentation js framework to help you with that (you will not use a fullscreen)
http://lab.hakim.se/reveal-js/#/13 here is the link to a presentation js framework =)
(this is the first one i click in google results but i guess you can get anothers, there are few of it)

I can not gess your code, but I think, what you are looking for is here:
http://jplayer.org/latest/developer-guide/#jPlayer-event-type
http://jplayer.org/

Related

Is it possible to download a picture of specified HTML dom on mobile with JavaScript? [duplicate]

Is there any way to programmatically create (client or server side (PHP)) a image from a specific DIV or a complete (web) page? I'm currently creating a web-site for free coupons and the idea is when the end-user clicks on the "Print" button, the app opens a new tab/window with all the selected coupons as a single image (JPG, PNG or etc..) in A4 format ready for printing. Each coupons has it's own data (Article name, price, description etc..) so I need it to be done programmatically over a coupon-template I designed.
I do not ask you to write code for me, just to suggest a solution I could use/develop. If not already exist, I will upload/publish it for free :)
Update: I did it with the PHP GD library :) Still not satisfied with the idea to use Images instead of PDF, because each printing results with different Coupon sizes (images) on different PC's. That's why PDF may would be a better solution. You can see/test it on demo.svikuponi.ba - Just select a few Coupons and click the PRINTAJ button above.
You cannot create image from div for sure but yes you can create dynamic images in php using its gd library.
Following links will help:
http://php.net/manual/en/function.imagecreate.php
http://phptutorial.info/learn/create_images/
Here is a great way for you to create images on the client side: http://smus.com/screen-capture-for-chrome-os
You can take this and create a web app that will work nicely on webkit (for other browsers - I'll look at JS polyfills).
Did anyone mention html2canvas and/or jsfeedback ?
It create a page screenshot completely in javascript, then you can send to the server via ajax..
Obviously, CSS support lack some things.
In php, there is many image related functions like imagettftext() in GD library
for details, check this out http://php.net/manual/en/book.image.php
if GD is not enough, you can try imagick as well
for the template, you can try creating a true color handle in php from your file(image) and add the text part or something else with all kinds of effects and bar codes etc.
but in your case, i would suggest dynamic PDF creation since it would better with formatting instead of plain image, the pdf lib :
http://www.fpdf.org/
you could easily have a background image of your token/voucher and overlay the text using some php variables.
i believe it is possible to create a unique bar-code with php imaging too.
It is possible to get a screenshot from a webpage, but this is quite a hassle. You need to start a webbrowser to render the page and get a screenshot from that.
You are probably better of by parsing some specification and feeding it to a couple of GD or Imagick functions. This is less versatile, but easier to manage.

Adding HTML,CSS and Javascript to Joomla frontpage

I need to insert a custom search box in the middle of joomla frontpage.
The searchbox would contain html, css and java script.I tried using mod html and moduleanywhere. still no luck.
I would appreciate if any pros out there could advise me on this.
This should do the trick for you - http://extensions.joomla.org/extensions/core-enhancements/coding-a-scripts-integration/custom-code-in-modules/16359
If that one doesn't work for you, there are a whole bunch of modules that do basically the same thing here - http://extensions.joomla.org/extensions/core-enhancements/coding-a-scripts-integration/custom-code-in-modules
As a last resort (actually this is the best way to do it) you can also create a custom module for your search box. It's really not that hard to do and it's much better to do it this way since you are not using an extension to add more code.
You can get info on module dev here - http://docs.joomla.org/Module_Development
And here is a quick video tutorial to get you started - http://www.youtube.com/watch?v=Qd93be8YRNY

Photo gallieries that have support for multiple albums and for comments?

I'm looking for a photo gallery(jquery/JavaScript probably?) that supports having multiple albums, and for comments. Just needs to display the comments and have a box to enter the comment, and i can handle storing them in db easy enough.
Any that are similar to facebook would be great since everyone uses it and it would be intuitive to them.
edit: This will be for a web app using asp.net mssql server 2008 r2 but i could use any platform as long as i can communicate with the mssql db
I know this is a little late- but I think this may be what you were looking for:
http://www.jqueryrain.com/?t2bpYeU2
EDIT-
In an effort to keep this question current- this just came out recently and may be better than original plugin: http://codecanyon.net/item/jquery-facebook-gallery/full_screen_preview/3879813?ref=jqueryrain
EDIT [Sept. 7th 2013] - Albumize recently came out. Another option for anyone reading. http://palerdot.github.io/albumize/
At the time of this writing minishowcase and qGallery seem to be the more popular multi-album jquery/javascript libraries. I believe they both have some php running somewhere inside as well.
If you are averse to php for any reason and want straight javascript, css, and html try checking out JonDesign's Smooth Gallery. It too is open source and allows for multiple albums (albeit not as aesthetically pleasing as the first two and does not have native comment plug-in, it is very straight forward code and can easily integrate with a jquery comment plug in's such as Easy Comment).
Edit: Also check out TN3. They apparently support multiple albums but I have never used it as it is kind of expensive for a jQuery license.
I do know that it is an older post but I would like to add a pure javascript solution for any following visitors of this post.
The gambarize plugin is running solely with client side javascript and there is no need for any backend language being used. (Therefore it is not possible to support comments)
Basically it is possible to create a div structure as the following:
<div class="gmbz" data-title="Album1">
<div class="gmbz" data-title="Nested">
<div class="gmbz" data-title="Inner">
</div>
</div>
<div class="gmbz" data-title="Empty" data-cover="data/Black-287.png"></div>
</div>
It will end up in:
Explanation
Every "div" represents an album (including nested album support).
Every "a" represents a picture link, which will be the image itself: The attribute "href" is the image wich will be shown when you click on the thumbnail inside the gallery. Whereas the thumbnail image can be specified through the "data-img-thumb" tag
Visit the example described: generate image gallery with albums using javascript
Link to the plugin home page

Adding Uploading/Scanning screen to website

i am currently trying to add a uploading/scanning screen to my file upload site, (just to be clear i need the 'design' part of it, like actually displaying the box not anything to do with the scanners, or implementing the scanners, just a box that says scanning with a scanning gif next to it). Pretty much my site allows people to upload files which scans them and then displays the result. All the scanners are up and working but i am trying to add this scanning page. I want it to look a bit like this when you upload a file - www.virustotal.com
How would I be able to do this? You don't have to be very specific just like what programming languages, or any examples of code, to help me, i don't really know where to start.
Sounds like you are looking for a modal overlay or dialog.
There are tons of libraries out there that can do this, including YUI and JQuery UI/Plugins.
See my question.

How to convert a PowerPoint slide into HTML?

I am trying to insert PowerPoint slides into HTML preserving links in the PowerPoint slide. I was just wondering if any of you knew a good method to maybe exporting a PowerPoint slide to an HTML and then displaying it in a div on your page, with a link to say do a JavaScript function on that same page.
I've never used it, but PPT2HTML might help. There's also this blog that describes how to save your presentation for the web then modify it.
This isn't exactly what you're after, but there are some html-based presentation tools like S5, DOMSlides you might want to consider as they wouldn't suffer from being translated.
You can use the jQuery plugin called PPTXjs.
This plugin convert pptx to html using javascript only (no server side code needed).
It is based on PPTX2HTML but support a lot more shapes, media (audio, video) and more.
Using:
$("#result").pptxToHtml({
pptxFileUrl: "path/to/slide.pptx"
});
For more details : https://github.com/meshesha/PPTXjs.
1)u can convert it to flash swf
2)convert all slides to an image file and then add 2 buttons(Back,Next) with calling the next and previous images based on an integer variable and this buttons will show u the previous and next slides :)
sorry but u cant embed it without copying all the Powerpoint-exported HTML code in your div tag
Though not quite what you asked, Google Docs or Slideshare both let you embed Powerpoint as flash - perhaps that would be a more elegant way to do this. That is, if embedding is the aim!
I remember there was a function in PowerPoint to export it to an HTML, I would do that and then have it in the page using an <iframe> and then put that inside a <div>

Categories

Resources