Tag Archive for jquery

jQuery Animated Scroll To Top

$(document).ready(function() {
$('.backtotop').click(function(){
$('html, body').animate({scrollTop:0}, 'slow');
});
});

source

jQuery open external link in new window

//Grab the href, open it in a window and cancel the click action
$("a[href^='http']").click(function(){window.open(this.href); return false;});
//Add target = blant to the external link
$("a[href^='http']").attr('target','_blank');
//Similar to the first, only using your domain name
$("a:not([href*='yourdomainnamehere.com'])").click(function(){
window.open(this.href);
return false;
}).attr("title", "Opens in a new window");

source

JavaScript Hello Workd

<html>
<head>
<title>Titel der Webseite</title>
<!-- Evtl. weitere Kopfinformationen -->
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
function doSomething(){
alert(document.getElementById("foo").value);
alert($("#foo").val());
}
</script>
</head>
<body onload="doSomething()">

Inhalt der Webseite
<input type="text" id="foo" />
<input type="button" name="Text 1" value="Text 1 anzeigen" onclick="doSomething()">
</body>
</html>

source

Ntz Modal Box

var IE6 = false /*@cc_on || @_jscript_version < 5.7 @*/;
function modalBox(content, width, callback) {
if(!content){
$('#ntz_modal').remove();
$('#ntz_overlay').fadeOut(function(){$(this).remove();});
try{if(IE6){$('body').find('select').visibility('visible');}}catch(err){};
return false;
}
try{if(IE6){$('body').find('select').visibility('hidden');}}catch(err){};
$('body').append('<div id="ntz_overlay"></div>');
$('#ntz_overlay').css({
width			:		'100%',
height		:		$(document).height(),
position	:		'absolute',
left			:		0,
top				:		0,
backgroundColor	:	'#FFFFFF',
zIndex		:	9990,
opacity		:		0
}).fadeTo(200, 0.5);
$('body').append('<div id="ntz_modal"></div>');
$('#ntz_modal').css({
border		:		'1px solid #2d7abb',
width			:		width ? width : 350,
backgroundColor	:	'#FFFFFF',
position	:	'absolute',
left			:	'50%',
top				:	$(document).scrollTop(),
zIndex		:	9995,
marginLeft:	-(Math.ceil((width ? width : 800)/2))
}).append(content);
try{
callback.call();
}catch(err){};
$(document).bind('scroll', function(){
$('#ntz_modal').css({
top:$(document).scrollTop()
});
});
};

source

Placeholder text on fields (html, css, jquery)

============
= The CSS  =
============
#stikkord{
width: 300px;
margin-bottom: 10px;
}
.placeholder {
color:#999999;
}
.tag{
background-color: yellow;
font-size: 200%;
margin:2px;
line-height:1.2;
}

===================
= The jQuery code =
===================

$(document).ready(function() {
var searchLabel = $('#tagsform form label').remove().text();
$('#stikkord').addClass('placeholder').val(searchLabel).focus(function() {
if (this.value == searchLabel) {
$(this).removeClass('placeholder').val('');
};
}).blur(function() {
if (this.value == '') {
$(this).addClass('placeholder').val(searchLabel);
};
});
$('#tagsform form').submit(function() {
if ($('#stikkord').val() == searchLabel) {
$('#stikkord').val('');
}
});
});

=================
= The HTML form =
=================
<div id="tagsform">
<form>
<label for="stikkord">Skriv inn beskrivende stikkord</label>
<input type="text" name="stikkord" id="stikkord" />
<input type="submit" value="Ok" name="inputTagsButton" id="inputTagsButton" />
</form>
</div><!-- end tagsform -->

source

jQuery Form Validation

//contact-form validation
$("form#contact-form").validate({
errorPlacement: function(error, element) {
//appends error message to the p tag of the form field
error.appendTo( element.parent("p") );
}
});

source

come costruire un’estensione Plugin

/**
* sketch jQuery Plugin
*
*/
(function($){
$.fn.extend( {
mymethod: function(options){
var defaults = {};
var options = $.extend(defaults, options);
return this.each(function(){
var __e = $(this);
// todo
// default options in "options"
});
}
});
})(jQuery);

source

Scroll Past Toolbar in iPhone Safari

$(document).ready(function() {
setTimeout(function(){window.scrollTo(0, 1);}, 100);
});

source

Ensure that at least one checkbox is selected

function setHiddenAction(element) {
var okToSubmit = false;
//A. Make sure that the user selects at least one item before they Request an Action
if( $("input:checkbox:checked").length > 0 ) okToSubmit = true;
//B. Set the Hidden Value to the Users Requested Action
$("#action").attr("value", element.value)
//C. Either Submit or give an Error Message
if( okToSubmit ) {
$("form").submit();
} else {
alert( "Please select at least one item" );
}
}

setHiddenAction("email");

source

Stop animations on multiple hovering

$('a.coollink').hover(function(){

$(this).stop().animate({	// magic here, stop THIS object to animate
// and do animate from begin
backgroundColor: '#21545A', //animate what you want
color: '#FFF'
}, 500);

}, function(){

$(this).stop().animate({	// magic here, stop THIS object to animate
// and do animate from begin
backgroundColor: '#FFF',    //animate what you want
color: '#797979'
}, 500);

});

source