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.

You can check out the link : How Can I Bypass the X-Frame-Options: SAMEORIGIN HTTP Header?

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:

Chrome Developers

High performance video with hardware decoding - HTML5 Rocks

Hardware video support brings efficient decoding to plugins as well as HTML5 video. Flash users should switch from the old style Video to the StageVideo object.

View on web

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

http://www.css3tricks.com/rt-himinimalthemes-two-attractive-jquery-sliders-wordpre-3/

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

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

Read more about HTML5 ruby support

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);
});

Read more about the BroadcastChannel API

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:

But Wait

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

Enjoy!

Cutting Edge JavaScript, CSS, CSS3 and HTML5