SOCIALIZE IT

Tuesday, 20 August 2013

Audio Play/Stop and up-down - HTML

<style>
.play,
.pause,
.up,
.down { background:#999999; float:left; margin:0px; padding:0px;
        border:2px solid #333333; color:#fff; padding:3px; cursor:pointer; }
</style>

<body>
 <audio autoplay id="player" src="sound/audio.wav"></audio>
<div>
    <button onclick="document.getElementById('player').play()" class="play">Play</button>
    <button onclick="document.getElementById('player').pause()" class="pause">Pause</button>
    <button onclick="document.getElementById('player').volume+=0.1" class="up">Volume Up</button>
    <button onclick="document.getElementById('player').volume-=0.1" class="down">Volume Down</button>
</div>
</body>
Posted by at No comments:

Thursday, 15 August 2013

Create a simple CSS Dropdown Menu..

<style>
ul {
    font-family: Arial, Verdana;
    font-size: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}
ul li {
    display: block;
    position: relative;
    float: left;
}
li ul {
    display: none;
}
ul li a {
    display: block;
    text-decoration: none;
    color: #ffffff;
    border-top: 1px solid #ffffff;
    padding: 5px 15px 5px 15px;
    background: #1e7c9a;
    margin-left: 1px;
    white-space: nowrap;
}
ul li a:hover {
background: #3b3b3b;
}
li:hover ul {
    display: block;
    position: absolute;
}
li:hover li {
    float: none;
    font-size: 11px;
}
li:hover a { background: #3b3b3b; }
li:hover li a:hover {
    background: #1e7c9a;
}
</style>

</head>
<body>
<ul id="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">About Us</a>
        <ul>
            <li><a href="#">The Team</a></li>
            <li><a href="#">History</a></li>
            <li><a href="#">Vision</a></li>
        </ul>
    </li>
    <li><a href="#">Products</a>
        <ul>
            <li><a href="#">Cozy Couch</a></li>
            <li><a href="#">Great Table</a></li>
            <li><a href="#">Small Chair</a></li>
            <li><a href="#">Shiny Shelf</a></li>
            <li><a href="#">Invisible Nothing</a></li>
        </ul>
    </li>
    <li><a href="#">Contact</a>
        <ul>
            <li><a href="#">Online</a></li>
            <li><a href="#">Right Here</a></li>
            <li><a href="#">Somewhere Else</a></li>
        </ul>
    </li>
</ul>

</body>
</html>
----------------------------------------------------------------------------------------------------
You can see a LIVE PREVIEW here
You can see a LIVE PREVIEW here
http://www.handy-html.com/wp-content/uploads/2012/02/create-a-simple-css-dropdown-menu.html
----------------------------------------------------------------------------------------------------
Posted by at No comments:

Wednesday, 31 July 2013

(< footer> ) - Tag IE issue.

If you're using <footer> (a fancy schmancy HTML5 tag) sometimes IE does not like it. This is how I've fixed issues like this. Add this to your <head>:

<script>document.createElement('footer');</script>

It may not be what's causing your issue, but I've notice when trying to use HTML5 tags, IE pretty much ignores them or renders them strangely.
Posted by at No comments:

Thursday, 25 July 2013

PIE.htc - First chaild JS - html5 - css3 ( Spoted in IE 7,8,9 )

<!-------------PIE.htc and   First_chaild Spoted JS for IE 7,8,9 ---------------->
 
 
.class { behavior: url(/pie/PIE.htc); }


<!--[if IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE7.js"></script>
<![endif]-->

<!--[if IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE8.js"></script>
<![endif]-->

<!--[if IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->


<!-----------------------------------   END  ----------------------------------->

<!------------- HTML5 and css3 Spoted JS for IE 7,8,9  ---------------->


<!--[if lt IE 9]>
    <script src="http://css3-mediaqueries-js.googlecode.com/files/css3-mediaqueries.js"></script>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->


<!-----------------------------------   END  ----------------------------------->
Posted by at No comments:

Read More HTML ( Dynamically shortened Text with Show More link using jQuery )

<HTML>
<HEAD>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<TITLE>Dynamically shortened Text with Show More link using jQuery</TITLE>
<STYLE>
body, input{
font-family: Calibri, Arial;
margin: 0px;
padding: 0px;
}
a {
color: #0254EB
}
a:visited {
color: #0254EB
}
#header h2 {
color: white;
background-color: #00A1E6;
margin:0px;
padding: 5px;
}
.comment {
width: 400px;
background-color: #f0f0f0;
margin: 10px;
}
a.morelink {
text-decoration:none;
outline: none;
}
.morecontent span {
display: none;

}
</STYLE>
</HEAD>
<BODY>


<div class="comment more">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vestibulum laoreet, nunc eget laoreet sagittis,
quam ligula sodales orci, congue imperdiet eros tortor ac lectus.
Duis eget nisl orci. Aliquam mattis purus non mauris
blandit id luctus felis convallis.
Integer varius egestas vestibulum.
Nullam a dolor arcu, ac tempor elit. Donec.
</div>

</BODY>
<SCRIPT>
$(document).ready(function() {
var showChar = 100;
var ellipsestext = "...";
var moretext = "more";
var lesstext = "less";
$('.more').each(function() {
var content = $(this).html();

if(content.length > showChar) {

var c = content.substr(0, showChar);
var h = content.substr(showChar-1, content.length - showChar);

var html = c + '<span class="moreelipses">'+ellipsestext+'</span>&nbsp;<span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">'+moretext+'</a></span>';

$(this).html(html);
}

});

$(".morelink").click(function(){
if($(this).hasClass("less")) {
$(this).removeClass("less");
$(this).html(moretext);
} else {
$(this).addClass("less");
$(this).html(lesstext);
}
$(this).parent().prev().toggle();
$(this).prev().toggle();
return false;
});
});
</SCRIPT>
</HTML>
Posted by at No comments:

Wednesday, 24 July 2013

My Photos


Posted by at 1 comment:

Popup HTML

<style>
.jeup-btn, input.jeup-btn { color:red!important;}
</style>
<script type="text/javascript" src="js/jquery-1.js"></script>
<script type="text/javascript" src="js/jquery_002.js"></script>
<script type="text/javascript" charset="utf-8">
jQuery(function() {
function launch() {
$('#je-popuplogin').lightbox_me({centered: true, onLoad: function() { $('#je-popuplogin').find('input:first').focus()}});
}
$('#jepopup').click(function(e) {
$("#je-popuplogin").lightbox_me({centered: true, onLoad: function() {
$("#je-popuplogin").find("input:first").focus();
}});
e.preventDefault();
});
});
</script>


<div class="menu">

  <a href="#" id="jepopup" class="jeup-btn">Click</a>


   <div style="left: 50%; margin-left: -210px; z-index: 1002; position: fixed; top: 50%; margin-top: -167px; display: none;" id="je-popuplogin">
      <div style="background:#fff; float:left; width:250px; height:200px; border:1px solid #666666;">
         <div>
           <a id="close-x" href="#">Close</a>
         </div>
         <div style=" padding:20px; ">
            Remember Me
         </div>          
      </div>                  
    </div>

</div>
Posted by at No comments:
Subscribe to: Posts (Atom)