Need to design a HTML Page with following specification [closed] - javascript

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I have the following specification that I need to build, however I do not know where to start.
Here is the spec:
Create an HTML + javascript page that can be opened in any of the browsers (desktop only is what I expect)
The page should have a timer control that allows the user to set up some timeout, say, 10 minutes (or 2 days!).
When the timer fires, the page fetches some content from a webpage of your choice and displays it (do NOT redirect or open a random webpage. fetch the content and display it on the current page or even a messagebox / alert() is fine). Choose any page / content that is on the web. For example, fetch google.com's landing page and display its html code in an alert box.
There should be an on/off slider-like button that enables/disables the timer control. If the timer is ticking and the user turns off the button, the timer should be disabled. When the user turns on the button, the timer continues to count down from where is left off. (Hint: Download and use some javascript button control / timer control from the web. Do NOT use the standard buttons. I'd like you to use a custom control. Shouldn't be too hard to use one of those custom controls).
Use generic images available from the web. Searching online is ok but do not copy some existing project that does this or similar.

I kind of agree with the comments above. My answer would be to hire yourself a web developer. You can put an advert on here, or hire someone through services such as elance. The above is a simple job for a frontend developer, but unfortunately these forums are for questions/answers that form a knowledge base rather then a method to turn requirements into source code.
Having said that, this is how to achieve the above:
1) Any browser is a complex being, and when you say 'opened in any browser' are you refering to the top 5 most used browsers, or every browser. Every browser would include text & voice browsers, and browsers that run on any machine, including browsers such as the original IE and netscape ones.
This changes your code, as the old browsers will not react to html5 code, where as the common top 5 ones will. if you ask a frontend developer to build you a site, they are likely to build it within html5.
As HTML was around before the first commercial browsers, html is generally well supported, css is a different beast, but you haven't asked about that. Javascript tends to be well supported across the browsers, however older browser versions have slight differences in how they response (some different names for functions) and javascript can be disabled in most commonly used browsers.
To get over this latter point, you can use tags that show a message on screen if no javascript is found.
A hello world html page in html5 would look like this:
<!doctype>
<html>
<head></head>
<body>
<h1>Welcome to my HTML5 page</h1>
<p>This is a 'hello world' example</p>
</body>
</html>
2) To create a timeout, it's very simple, in your script, just write this:
<script type="text/javascript">
window.setTimeout(function(){alert('I have been triggered');},1000);
</script>
see this for more details: http://www.w3schools.com/jsref/met_win_settimeout.asp
Now the format of setTimeout is easy (a function, timeout time). The timeout time is in ms, so in the example about, it would fire after 1 second. For 10 minutes, it would need to be 600000 (600k ms) and 2 days would be 172800000 (172.8m ms). Please note that a timeout will only fire if the window is left open on your page.
3) To fetch code from another page is simple and there are multiple options:
you can import it using the html5 method:
http://www.html5rocks.com/en/tutorials/webcomponents/imports/
to hack this into your function you would do this:
function(){
// assume I have been triggered by the timeout
var link = document.createElement('link');
link.rel = 'import';
link.href = 'http://www.google.com'
link.onload = function(e) {...};
link.onerror = function(e) {...};
document.head.appendChild(link);
}
or you could use jquery (you'll need the jquery library to do this): https://jquery.com/
You could have some javascript
$(function(){
window.setTimeout(function(){
$("#publishedContent").load("http://www.google.com");
},1000);
});
and you would need a matching html element on the page like so:
<div id='publishedContent'></div>
There are some other ways of doing it as well, but you'll need to discuss these with your developer.
4) For custom controls you would be best to look at the various jquery plugins/themes (http://jqueryui.com/themeroller/). If you search for jquery UI themes, or look at Twitter bootstrap (http://getbootstrap.com/getting-started/#examples) you should get inspiration on what is achievable. There are plenty of examples out there: http://olance.github.io/jQuery-switchButton/
5) To acquire images, the safest bet to ensure that you have the copy-write is use a service such as getty images(http://www.gettyimages.co.uk/) or shutterstock(http://www.shutterstock.com) and buy the images. They are pretty cheap.

Related

options for implementing a PowerPoint viewer on HTML for a web app (other than embedding with provided i-frame tag)

Here's what I'm trying to accomplish: displaying a PowerPoint presentation on HTML. The user should be able to start and execute the presentation exactly like when you press the "Start Presentation" button in Microsoft PowerPoint: it goes fullscreen, transitions and animations are played, it goes to the next slide if a duration for the slide is set, on click it goes to the next slide, arrow keys are used for navigating slides and so on. Only need to run the presentation, NOT editing.
I've been looking around and came up with these three approaches:
Creating the viewer from scratch and processing/reading the .pptx file using HTML, CSS and JS, btw is this is feasible?
I know it won't be easy, but it seems it would take a lot of time to develop (I'm just one person working in the project).
Also free or paid approaches both are fine, the more options I get to know the better.
WOPI host, the problem with this is I need a paid Office365 membership.
Embedding using a third party such as Office Online, Google Docs, slides.com, the problem I noticed is that the i-frame they provide lacks from functionality and customization.
So my question is, are there other approaches for this? or is this all there is?
Final Edit: I decided to go with iSpring Converter Pro. Seems like the best option overall
Insane amount of work -> not worth it. But you could use a paid library such as Aspose.Slides
MS WOPI is, indeed, a way to do that. WOPI clients such as Office Online and Office Online Server offer an action called present. That's what you're looking for.
What about SlideShare's API and oEmbed?
Another approach:
Convert the PPTX to ODF and use https://viewerjs.org/

Turn Off Youtube Annotations Using JavaScript

There’re currently three ways I know of, to disable annotations in youtube videos:
You can use the YouTube settings. This will not work for me, as I do not have (nor want) an account.
You can use a specialised extension. That might work, but I’d rather not have a full-fledge extension with a ton of options, just for that.
You can use a (ad)blocking extension, and add ||youtube.com/annotations_ to its filters. That suffers from the same issue as the previous point. In addition, it disables them completely, while I simply want them turned off by default (so I have the option to turn them on).
Is it possible to do it using JavaScript? I have a UserScript that already performs some modifications to YouTube’s website, so ideally I’d like to expand it. That’s really the last thing I’m missing.
I ask that answers be constrained to using JS and not browser extensions recommendations. Both because (as mentioned), I already know about those, and because this is as much about the learning process as it is about the result. It’s practice for more UserScripts.
Since youtube sometimes changes the players’s behaviour, I’ll try to keep the code up to date and as robust as possible.
var settings_button = document.querySelector(".ytp-settings-button");
settings_button.click(); settings_button.click(); // open and close settings, so annotations label is created
var all_labels = document.getElementsByClassName("ytp-menuitem-label");
for (var i = 0; i < all_labels.length; i++) {
if ((all_labels[i].innerHTML == "Annotations") && (all_labels[i].parentNode.getAttribute("aria-checked") == "true")) { // find the correct label and see if it is active
all_labels[i].click(); // and in that case, click it
}
}
User's code is correct, settings need to be click & then:
document.querySelectorAll("div[role='menuitemcheckbox']")[1].click()
I added it to my "turn off autoplay & annotations" script: https://gist.github.com/Sytric/4700ee977f427e22c9b0
Previously working JS:
document.querySelectorAll("div[aria-labelledby=\"ytp-menu-iv\"]")[0].click()
I know you don't want to use an extension for this but it is the most flexible and easy way to solve your problem.
Extension gives us the power to use a background script through which we can inject css and javascript to opened web page.
I made one extension on this
https://chrome.google.com/webstore/detail/hide-labels-and-end-cards/jinenhpepbpkepablpjjchejlabbpken
This also has a stop-start button for which I just inject the opposite code as before.
If you need any further help on this, i will be happy to do so.
iv_load_policy (supported players: AS3, AS2, HTML5)
Values: 1 or 3. Default is 1. Setting to 1 will cause video annotations to be shown by default, whereas setting to 3 will cause video annotations to not be shown by default.
Here is a nice solution, just hide the div with annotations
$("div.video-annotations").css("display", "none");

Online WYSIWYG editor using a div [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I'm trying to create a WYSIWYG editor using a div, just like Google Docs works (as far as I know). I am aware there are other, easier solution for editors, but all have one thing in common: they output terrible HTML thanks to the Javascript execCommand() function. I really need it to output clean HTML (and the same HTML across browsers), so therefore I'm thinking about writing my own editor with a regular div and some Javascript (to record click and keypresses etc.) Before I do that though, I have a couple of questions:
Does the editor I'm looking for (one that outputs the same, clean HTML across browsers) already exist?
Am I mistaken that it is possible to write this?
Thanks a lot!
Edit: I think I should have been clearer on this: I don't consider existing WYSIWYG editors (like TinyMCE or CKEditor) an option, because (and please correct me if I'm wrong) they use the Javascript execCommand() function. This (especially in combination with an iFrame in design mode, which they both use), outputs different, illogical HTML in different browsers. For example: a simple enter in Safari causes it to create a div, instead of adding a <br /> tag or create a new paragraph (<p>). Furthermore: making text bold causes Mozilla to add <span style="font-weight: bold">, Internet Explorer and Opera to add <strong> and Safari to add a <b> tag. Not to mention the tricks some browsers pull by adding their name to tags (Safari I'm looking at you, I don't like <span class="Apple-style-span">). Because there's no way to change all these strange behaviors, it's very hard for me to make the site look consistent.
That's the reason I'm thinking about writing my own alternative: cross-browser compatibility and consistency...
Creating an editor from scratch is a massive undertaking because of the sheer number of browser quirks and bugs with in-browser editing. I've done it several times for various niche projects. My advice would be to start with either TinyMCE or CKEditor as a base and extend them. Both have had unbelievable amounts of development time poured into them over several iterations to get them as good as they are now. Try taking a look at their bug trackers to get an idea of what they have to contend with. Both have decent options for extension, so you could write your own formatting commands to replace document.execCommand() and in both you can add buttons/tools to the toolbar and context menus.
Self-promotion alert: Another option for the future is to use the commands module I'm working on for my Rangy library. It's some way off completion but will initially have replacements for inline formatting commands offered by document.execCommand(), and will allow control of the tags/CSS it produces. Rough early demo here: http://rangy.googlecode.com/svn/branches/1point2/demos/commands.html
Don't do this. There are teams of developers behind high profile WYSIWYG editors, and they already have the workflow built into their development to handle cross browser testing.
Look at
TinyMCE
CKeditor
Dojo Toolkit's Dijit.Editor
http://280slides.com/ built for the canvas tag
Everything is possible if you are stubborn enough.
The two we looked at were:
http://tinymce.moxiecode.com/
and
http://ckeditor.com/
Both did exactly what we wanted but in the end we went with the commercial CKeditor.
Did you already try TinyMCE ?
You have full control over the output via different parameters or existing plugins, also possible to write your own plugin..

Disable browser "back" button [duplicate]

This question already has answers here:
Closed 12 years ago.
Possible Duplicate:
Disable browser's back button
How can I disable a browsers back button, in an asp.net mvc project. Can I use java script for this ? or is there any other ways to do this ?
This has often been discussed on countless threads, the most exhaustive article is here and why it always will not work.
A website should not try to cripple the browser, but instead should work inside the browser-page system of the web. There are good reason for not wanting the user to click back (re-POSTing data, especially financial transactions and the like), but rather than forcing them not to, your website should handle these gracefully. Using a good framework like .NET leaves you a lot of great options for keeping your site stateful even amid the stateless web. Write your code to fit the browser, don't make the browser fit your code (like the ridiculous no-right-click javascripts of yesteryear).
That said, thankfully there is no way to do this, and even if there were, it could always be disabled on the client side.
I would have to assume it is impossible. That would be a big security issue on most browsers. I don't even remember in IE4 when the most extreme things were allows, you being able to do it.
I don't think that you can disable the back button, althought there are some "techniques" like those described in this site: http://www.htmlgoodies.com/tutorials/buttons/article.php/3478911/Disabling-the-Back-Button.htm
It is not possible to the disable the BACK button of the browser, but if you don't want the user to go back to a previous page then you can add this javascript function to your page:
<script language="javascript">
function DisableBackButton()
{
history.forward();
}
</script>
And call this function in body only..
Like
<form id="form1" runat="server">
<script language="javascript">DisableBackButton();</script>
---your page design----------
</form>

Is it possible in Flash to launch a JavaScript function (which uses AJAX) in a page that contains the Flash object itself?

Here's our goal: in a website, show a nice menu "à la" iPhone in Flash and when we click on a menu, show a part of the site "under" the Flash menu.
Two options:
create a page with the
Flash menu that has an iFrame and
with Flash, open the menu in that
iFrame;
create one page with a div
on its bottom, with Flash, launch a
JavaScript (if you have any better idea please tell me !) function that downloads via AJAX the desired menu.
My #1 objective is to have only one page. Ideally it would embed the Flash object and launch a JavaScript function.
PS: I hate iFrames. iFrames are evil to me.
Don't hesitate to correct my question to make it proper English !
Thanks,
Olivier
Yes, this is very possible using ExternalInterface in the Flash document. That link explains the whole process.
A bigger question is that it sounds like you are using Flash to duplicate an iPhone animation and I imagine (unless you are doing the "Flip" animation) that it could easily be reproduced with normal JavaScript animation, possibly with a library like jQuery or MooTools to help normalize browser differences. You can even do the 3D animations in Safari 4.
An older method that is sometimes still useful is the getURL method. A good writeup of the differences is here: http://www.psyked.co.uk/actionscript/actionscript-geturl-vs-externalinterface-when-why.htm. In general, ExternalInterface is preferred, but sometimes you want to interact with the page with a function that not defined.
Usage:
getURL("javascript:myFunction(arguments);");
As Doug said, you may be able to use a JS library to recreate the iPhone animations. This would have the added benefit of your menu being navigable for search engines if this is a concern.
An alternative to Doug's suggestion is the old 'fscommand()' function. In your Flash code, you put "fscommand('name', 'value');" replacing name and value with whatever information you want to fire out to the web page.
On the web page, you need to have a JavaScript function which listens to the 'FSCommand' event of the Flash object, like this (IE sample, see docs for other browsers):
function OnFSCommand(name, value)
{
// whatever you need to do with name & value
}
var swf = document.getElementById(name-of-my-Flash-object);
swf.attachEvent("FSCommand", OnFSCommand); // IE-only - see docs for other browsers

Categories

Resources