Display live HTML/Javascript demo in web page embedded - javascript

I have a blog hosted freely on blogger. I want to show some html live demo, as my tutorial is about javascript and html. Can anyone suggest, how it can be done, i have to display sample javascipt page based on Extjs.
It should be embedded inside the post, like how we paste the code using code syntax highlighter.
Something similar to this demo: http://docs.sencha.com/touch/2-0/#!/api/Ext.form.Panel
Edit-1
As per #Circadian, i have used jsFiddle.net but it is giving entire code too, as shown in the image attached. But I don't want to share my entire code. Any other better suggestions? .
Thanks in advance.

jsfiddle offers iframe embedding and supports Extjs
edit:
then have a look at using github gists

Related

Relationship between html and js tabs in codepen when showing code for sample react project?

I am going through this tutorial: https://reactjs.org/tutorial/tutorial.html
A link is provided in this tutorial to codepen where the code already exists.
An option to using codepen is to write and run the code locally. At no point in the tutorial are you instructed to write html code. My question is, is the html code "generated" from the js code? Where does this html come from? What is its purpose?
Yes, CodePen handles the linking between JS, HTML, and CSS for you, so you don't have to include boilerplate such as script, style, head, body, and so on in your HTML.
If you want to see the actual underlying code, right click on an element within the display area and click "Inspect". Everything sandboxed within the parent iframe of that element is your HTML.

How can i hide my html source code from getting copied?

How can i hide my page source from getting copied just like https://www.google.com
Please help me with any solution.
Is there any plugin need to add,please suggest me.
Hiding html sourcecode is not possible. The browser has to understand what you want to show and therefore needs to know your code.
Google does not encrypt the sourcecode. It is hard to read because a lot is going on but if you copy the sourcecode and paste it in notepad. You will have the same html markup.

'Click to accept' checkbox to enable link

I need to have a 'Click to Accept Terms' checkbox on my site (http://www.formulafast.co.uk/book-now.html), that enables a link to another page when checked.
So far I have adapted a script and html that has worked successfully (elsewhere on the internet) and works fine in JS fiddle (see http://jsfiddle.net/pjs53/hQJXW/104/) but as soon as I paste onto my page fails to work.
HTML is:
<input type="checkbox" id="check"/><label for="check">I have read and accept the Terms & Conditions</label></br></br>
The Javascript is in the jsfiddle above.
Worth mentioning that I'm using Weebly...and the html part is currently embedded as a snippet halfway down the page. The javascript is in the header section of this particular page. If anyone has a better suggestion please don't be shy.
I have a feeling it may be the placement of the code that may be causing it not to work, or I am missing a tag to link the two together...any ideas?
Reading the comments above, you actually forgot to include jQuery in your html, like this :
<script src="path_to_jquery_file"></script>
Your JSFiddle is using jQuery as a framework (look on the left), that's why it works but not your web page.

facebook auto-expanding like box

can anyone provide me any ideas about how to import a facebook like box, in my site. I would it to seem like the one in the folowing site "http://www.babyspace.gr/". Does any of the existing javascript frameworks afford such a functionality?
Thank you in advance
It is simple Facebook social plugin called Like Box and you can get it here: http://developers.facebook.com/plugins?footer=1
You can install it on any webpage quite easily - If you follow the instructions on the page linked above.
About the slider - It can be achieved quite easily with jQuery. Put the Like Box on some div and use jQuery animate to show it by click.

How to create a small widget with JavaScript

I really don't know how to describe it, but if you understood it and had experience on that field, may be you can help me with something 'Open Source' and 'Ready-made'.
I want to create something like a box 'or widget', where you can change its content by hitting some buttons on the top of the box. (Hey the box is on a web page and this should use Ajax and Javascript).
I have tried some ready scritps, but I found them limited and they drive me crazy, JS frameworks also don't seems to offer such solution.
Any body have any idea on that field?
Just because the box is on a Web page doesn't mean it should use AJAX, Omar. Have you thought about using a third-party solution like ClearSpring or WidgetBox? If you need to put your widget onto Myspace, you'll want one of these.
That said, I've taken a couple of JavaScript-only runs at this problem; see Twitterati and Put Your Digg In A Box for examples, and my Global Widget Summit presentation for explanations.
Have you tried Jquery?
Visit www.jquery.com
Some example can be found at
http://www.openjs.com/scripts/events/keyboard_shortcuts/
Also please check the In-place editing example at
http://www.appelsiini.net/projects/jeditable
http://docs.jquery.com/Tutorials:Edit_in_Place_with_Ajax

Categories

Resources