Archive for the ‘Java Scripts’ Category

Cufont Fonts Javascripts

Posted: July 3, 2013 in Java Scripts

$(document).ready(function(){
Cufon.replace(‘.heading h1’, {
fontFamily: ‘HelveticaNeue’
});

Cufon.replace(‘.heading h2’, {
fontFamily: ‘HelveticaNeue’,
fontStyle:’italic’
});

Cufon.replace(‘.heading h3’, {
fontFamily: ‘HelveticaNeue’,
fontWeight:’regular’
});
});

MAC FireFox & Chrome CSS hack

Posted: June 19, 2013 in Java Scripts

For Firefox :
<pre><script language=”javascript” type=”text/javascript”>

if(navigator.userAgent.indexOf(‘Mac’) > 0 && navigator.userAgent.indexOf(‘Firefox’) > 0)

{document.write (‘<style type=”text/css”>section#slider{position:relative; right:1px;}</style>’);}

</script></pre>

 

 

For Chrome :
<pre><script language=”javascript” type=”text/javascript”>

if(navigator.userAgent.indexOf(‘Mac’) > 0 && navigator.userAgent.indexOf(‘Chrome’) > 0)

{document.write (‘<style type=”text/css”>section#slider{position:relative; right:1px;}</style>’);}

</script></pre>

Read More and Read Less

Posted: June 10, 2013 in Java Scripts

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js”></script&gt;
<style>
div.demo p { margin:0 0 1.5em }
</style>
</head>

<body>
<div class=’demo’>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at urna ac
leo vulputate egestas a ut odio. In hac habitasse platea dictumst. Donec
in erat velit, eu ultricies diam. </p>
<p class=’fulltext’>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at urna ac
leo vulputate egestas a ut odio. In hac habitasse platea dictumst.</p>
<a class=’readmore’ href=”#”>Read more…</a> </div>
<div class=’demo’>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at urna ac
leo vulputate egestas a ut odio. In hac habitasse platea dictumst. Donec
in erat velit, eu ultricies diam. </p>
<p class=’fulltext’>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at urna ac
leo vulputate egestas a ut odio. In hac habitasse platea dictumst.</p>
<a class=’readmore’ href=”#”>Read more…</a> </div>
<script>
$(document).ready(function () {
$(‘.fulltext’).hide();

$(‘.demo .readmore’).click(function (event) {
event.preventDefault();
$(this).parent().find(‘.fulltext’).slideToggle(‘slow’);
$(this).text($(this).text() == ‘Read less…’ ? ‘Read more…’ : ‘Read less…’);
});
});
</script>
</body>
</html>

Smooth Scrolling Navigation

Posted: April 20, 2013 in Java Scripts

<script type=”text/javascript“>
$(document).ready(function() {
$(‘a[href^=”#”]’).click(function(event) {
var id = $(this).attr(“href”);
var offset = 60;
var target = $(id).offset().top – offset;

$(‘html, body’).animate({scrollTop:target}, 500);
event.preventDefault();
});
});
</script>

windows height view slider

Posted: April 15, 2013 in Java Scripts

<script type="text/javascript">

$(document).ready(function()
{
var windowheight = $(window).height()
$('.container').height (windowheight)
}
);

$(window).resize(function()
{
var windowheight = $(window).height()
$('.container').height(windowheight)
});

</script>

<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Untitled 1</title>
<style>
.gallery {float:left;
    border: solid 1px red;
    padding: 20px 0;
}
/* Below Grayscale Method found at:
http://www.karlhorky.com/2012/06/cross-browser-image-grayscale-with-css.html
*/
 img.grayscale {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'>
<filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 
0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    /* Firefox 10+ */
    filter: gray;
    /* IE6-9 */
    -webkit-filter: grayscale(100%);
    /* Chrome 19+ & Safari 6+ */
    -webkit-transition: all .6s ease; transition: all .6s ease;

    /* Fade to color for Chrome and Safari */
    -webkit-backface-visibility: hidden;
    /* Fix for transition flickering */
}
img.grayscale.on {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter 
id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 
0 0 0 1 0\'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(0%);

}
</style>

</head>
<body>
<div class="gallery">
    <img class="grayscale" src="Image path"/>
</div>

<script src="http://code.jquery.com/jquery-latest.js"></script> <script>     
$(document).ready(function () {     
$(".gallery").mouseenter(function () {         
$(this).children('img').addClass('on');     
}).mouseleave(function () {         
$(this).children('img').removeClass('on');    
 }); }); 
</script> 
</body> 
</html> 

<<!DOCTYPE html>
<html>

<head>
<script src=”http://code.jquery.com/jquery-latest.js”></script&gt;
</head>

<body>
<ul class =”menu”>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>About Us</a></li>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>About Us</a></li>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>About Us</a></li>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>About Us</a></li>
</ul>
</body>
</html>

============================================================================
Script:

<script>
$(“ul.menu li”).last().addClass(‘menu-last’);
$(“ul.menu li a”).last().addClass(‘menu-lasta’);
</script>

============================================================================
CSS:

ul.menu {width:auto;}
ul.menu li {list-style:none; float:left; padding:0 30px 0 30px;}
ul.menu li a{font-size:13px; font-family:Arial, Helvetica, sans-serif; color:#666; font-weight:bold; }
.menu-last {padding-right:0px !important; }
.menu-lasta {color:red !important;}

============================================================================

USE SECOND STYLE

============================================================================
Script:

$(“div span:first-child”)
.css({margin:”0″})

HTML :

John, Karl, Brandon, Sam
Glen, Tane, Ralph, David

CSS :
span.solast { text-decoration:line-through; cursor:pointer}
div span {margin-right:20px;}

============================================================================
$(“ul li:nth-child(4n)”).append(“ – 1nd!“);

Node Options :
tr:nth-child(2n+1) /* represents every odd row of an HTML table */
tr:nth-child(odd) /* same */
tr:nth-child(2n+0) /* represents every even row of an HTML table */
tr:nth-child(even) /* same */

/* Alternate paragraph colours in CSS */
p:nth-child(4n+1)
p:nth-child(4n+2)
p:nth-child(4n+3)
p:nth-child(4n+4)

When the value b is preceded by a negative sign, the “+” character in the expression must be removed (it is effectively replaced by the “-” character indicating the negative value of b).

Examples:

:nth-child(10n-1) /* represents the 9th, 19th, 29th, etc, element */
:nth-child(10n+9) /* Same */
:nth-child(10n+-1) /* Syntactically invalid, and would be ignored */

for More Option plz check below URL :
http://www.w3.org/TR/css3-selectors/#nth-child-pseudo