Sunday 28 June 2015


Question :  I'm using check box in form. but when one check box is checked, show the detail div. and when multi check not show the div with jquery.

HTML code:
<input type="checkbox" name="cb1" id="cb1" />
<input type="checkbox" name="cb2" id="cb2" />
<input type="checkbox" name="cb3" id="cb3" />
<input type="checkbox" name="cb4" id="cb4" />
<div id="detail" style="display:none"></div>
Answer :
---------------------------------------------------------------------------------
<html>
<head>
<title>Demo</title>
<script src="js/jquery.min.js"></script>
<script>
    function checkIt(sender) {
        if ($(".checkme:checked").length == 1) {
            $("#detail").css({
                display:"block"
            });
        }
        else {
            $("#detail").css({
                display: "none"
            });
        }
    }
</script>
</head>
<body>
<input type="checkbox" name="cb1" id="cb1" class="checkme" onchange="checkIt(this);"/>
<input type="checkbox" name="cb2" id="cb2" class="checkme"  onchange="checkIt(this);" />
<input type="checkbox" name="cb3" id="cb3" class="checkme"  onchange="checkIt(this);" />
<input type="checkbox" name="cb4" id="cb4" class="checkme"  onchange="checkIt(this);"/>
<div id="detail" style="display: none">I am Here</div>
</body>
</html>

Question : I want to load external link in iframe. But it doesn't work.


Ans :
--------------------------------------------------------------------------------------------------------------------------
You have a problem of "X-Frame-Options' to 'SAMEORIGIN".
Now, What does it(X-Frame-Options' to 'SAMEORIGIN) mean?
Ans: It means that the site owner do not want anybody to open his/her site in iframe because for security point of view it is poor to have a site to be opened in iframe.

Question : How to hide border on the right when you hover on any item?



Ans : 
             HTML
----------------------------------------------------------------------------------------------------------------------------------
<div style="background-color: #ffffff; padding: 10px; border-bottom: 1px solid #ccc">
    <ul class="monitoring-tabs">
        <li>Item 1</li>
        <li>item 2</li>
        <li class="active">Item 3</li>
        <li>Item 4</li>
    </ul>
</div>
CSS
------------------------------------------------------------------------------------------
<style type="text/css">
    .monitoring-tabs {
        list-style-type: none;
        padding: 0;
        margin: 0;
        clear: both;
        overflow: hidden;
        line-height: 25px;
    }

        .monitoring-tabs li {
            float: left;
            font-size: 13px;
            border-right: 1px solid #ccc;
            padding: 0 17px;
            color: #4e5665;
            line-height: 30px;
        }
            .monitoring-tabs li:hover {
                background-color: #e9eaed;
                border-right: none;
            }

        .monitoring-tabs .active {
            font-weight: bold;
            color: black;
        }
</style>

Saturday 16 May 2015

High Performance Video with Hardware Decoding in Chrome:

getUserMedia / Media Capture API is now supported in Microsoft Edge.

In the latest Windows 10 preview release, we added support for media capture APIs in Microsoft Edge for the first time. This feature is based on the Media Capture and Streams specification, developed jointly at the W3C by the Web Real-Time Communications Working Group and the Device APIs Working Group. It is known by some web developers simply asgetUserMedia, which is the main interface that allows webpages to access media capture devices such as webcams and microphones. This feature can be toggled under the experimental features interface in Microsoft Edge, which can be found by navigating to about:flags.  To allow for early feedback from the web development community, we’ve set this feature to be “on” by default in the latest Windows Insider preview.
Link : http://blogs.windows.com/msedgedev/2015/05/13/announcing-media-capture-functionality-in-microsoft-edge/

Friday 15 May 2015

Two Attractive jQuery Sliders

Firefox now supports , srcset, and sizes.

Responsive Image Support

Support for both the <picture> element and <img srcset> are now in a stable Firefox! There are lots of great articles available to get you familiar with the new techniques, and a polyfill available so you can take advantage of them today! There is one caveat for Firefox 38 – responsive images will load using the correct media queries, but presently do not respond to viewport resizing. This bug is being actively worked on and tracked here, and will be fixed in a near-future version of Firefox.

You got WebSockets in my Web Worker!

Firefox 38 now allows code running in a Web Worker to open up a WebSocketconnection. This is great for games or other collaborative applications, which can now do their multiplayer/realtime logic in a separate thread from the UI.

HTML5 <ruby> markup support

Ruby Annotation
Better typography for Japanese and Chinese language sites is now possible without clunky libraries or extensions by using <ruby> markup.

BroadcastChannel- postMessage All the Windows!

If you’re building a webapp with multiple tabs or windows, keeping them all in sync, apprised of events and state changes can be a pain. BroadcastChannel is a fully client-side message passing API that lets any scripts running on the same origin broadcast messages to their peers.
// one tab
var ch = new BroadcastChannel('test');
ch.postMessage('this is a test');

// another tab
ch.addEventListener('message', function (e) {
    alert('I got a message!', e.data);
});

// yet another tab
ch.addEventListener('message', function (e) {
    alert('Avast! a message!' e.data);
});

Developer Tools

Network requests coming from XMLHttpRequest are now marked in the Web Console:
XMLHttpRequest requests marked in the Web Console
Need to grab a value from your page? The special copy method available in the Web Console has you covered:
consolecopy

But Wait

There are tons more improvements and bug fixes in Firefox 38 I haven’t covered here – check out the Firefox 38 release notesDeveloper Release Notes, or even the list of bugs fixed in this release for more information.
Enjoy!

How do you judge a Javascript programmer by only 5 questions?

1. Can you explain the difference between call and apply to me?
The answer to this question is a bit of a factoid, so that someone can answer it doesn’t give you any information, but if they cannot, it gives a truckload. Any JavaScript programmer that has written a library or two, not used libraries built by others, will know the answer to this.
Addendum: Several people are calling #1 into question. I must be very clear here that I stand firm on this one. If you haven’t used apply, you are most likely missing out on the most powerful and overlooked aspects of the language. It’s also an indicator that you haven’t tried your hand at building a library yet, because when building libraries, apply and call are very commonly used.
2. Can you explain map to me?
  1. Map is a an extremely useful functional programming concept that any compsci person will know. If someone doesn’t know this, it’s a sign that they lack an understanding of computer science and/or lack an understanding of the language. In addition, the explanation itself will give you a sense of how much the person knows about the language just in the way they talk. If the person does well on this question, ask aboutreduce as a followup. If you do not know what map is, it means that you have done zero functional programming and you’re missing out — start your journey here: A dirt simple introduction to higher order functions in JavaScript.
  2. 3. Can you explain bind to me?
  3. This is a really great question, because it delves into the concept of this. You can basically drill the interviewee for quite some time on this, as it is a very large subject. You’ll get a good sense of a programmer by having this discussion. If the interviewee responds well to the question, ask them to explain prototype.
  4. 4. Can you explain how closures work to me?
    This is a great question to ask programmers that claim to be experienced in general, but not with JavaScript. Closures are a general programming concept that is extraordinarily important in JavaScript. If they understand closures well, they will learn JavaScript pretty quickly.
  5. 5. Can you please tell me a story about a JavaScript performance problem that you’ve encountered and how you approached solving it?
    This will tell you a lot about how much programming a person has actually done, in their own words. A big one to keep an eye out for is that they should be praising the Google Developer tools, and not rely too much on theoretical time complexity.
If you don’t know the answers to these questions, please don’t feel discouraged. Instead, get excited that the language that you’re coding has much more depth than you thought, and that you have some really cool stuff to learn.

JavaScript techniques for rapid page load.

Speed has always been one of Chrome's primary missions, ever since it was included as one of the founding principles in 2008. But speed is about more than just traditional Javascript benchmarks. Ideally every part of a user's interaction with a browser is fast, starting with loading web pages. Chrome is introducing two techniques called script streaming and code caching designed to reduce that painful waiting time spent staring at a white screen, especially on mobile devices.
More...
http://blog.chromium.org/2015/03/new-javascript-techniques-for-rapid.html?utm_content=buffer6bd2a&utm_medium=social&utm_source=twitter.com&utm_campaign=buffer

Node v0.12.3 (Stable)

Thu, 14 May 2015 02:34:02 UTC
2015.05.13, Version 0.12.3 (Stable)
  • V8: update to 3.28.71.19
  • uv: upgrade to 1.5.0
  • npm: upgrade to 2.9.1
  • V8: don't busy loop in v8 cpu profiler thread (Mike Tunnicliffe)
  • V8: fix issue with let bindings in for loops (adamk)
  • debugger: don't spawn child process in remote mode (Jackson Tian)
  • net: do not set V4MAPPED on FreeBSD (Julien Gilli)
  • repl: make 'Unexpected token' errors recoverable (Julien Gilli)
  • src: backport ignore ENOTCONN on shutdown race (Ben Noordhuis)
  • src: fix backport of SIGINT crash fix on FreeBSD (Julien Gilli)

Building a simple command line tool with npm

Performance Showdown: Node.js vs. io.js v2.0.0

Fake IndexedDB

This is a pure JS in-memory implementation of the IndexedDB API.
It passes the W3C IndexedDB test suite (a feat that all browsers except Chrome fail) plus a couple hundred more tests just to be sure. It also works well enough to run fairly complex IndexedDB-based software.