$(document).ready(function() {
$('.backtotop').click(function(){
$('html, body').animate({scrollTop:0}, 'slow');
});
});
Tag Archive for jquery
jQuery Animated Scroll To Top
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");
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>
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()
});
});
};
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 -->
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") );
}
});
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);
Scroll Past Toolbar in iPhone Safari
$(document).ready(function() {
setTimeout(function(){window.scrollTo(0, 1);}, 100);
});
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");
Category: Uncategorized |
Tags: jquery, validation
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);
});