jQuery snippets - små enkle jQuery koder
Simple små jQuery kode stumper som benyttes meget.
Link og jQuery
Af og til har man brug for, at ændre hvordan link opfører sig på hjemmesiden.
Åben link i NYT via target="_blank"
indsat ved hjælp af jQuery
$(' a ').attr('target', '_blank');
Åben eksterne link i nyt vindue
$(" a[href^='http://'] ").attr(" target","_blank ");
Skifte link til en ny URL via:
$("a").attr("href", 'http://www.ny-side.dk/')
Her FRAVÆLGES link med class "IKKE-MIG-CLASS". (Link med denne class åbner altså ikke i et nyt vindue!)
$(" a:not(.IKKE-MIG-CLASS) ").attr('target', '_blank');
Du kan helt stoppe link i at opfører sig som normalt via:
$(' .VIRKER-IKKE-CLASS' ).click(function(e) {
e.preventDefault();
});
Klon link
Tilføj eksempelvis et Facebook link flere steder på siden, ved at dupliker et eksisterende link til ny placering.
Du har indsat det i selve kildekoden, men vil godt vise det flere steder på hjemmesiden.
Ved at tjekke for link der indeholder ordet facebook og derefter klone og tilføje det et nyt sted.
$(".MIN-DIV-HVOR-LINK-ER [href*='facebook']").clone().appendTo( ".MIN-NYE-PLACERING" );
Vis samme tekst flere steder i HTML koden
Her kopiers teksten fra <h1>...</h1>
og vises også i en class med navnet: "DATA-navn".
Nu vises teksten fra <h1>...</h1>
altså 2 steder!
$(".DATA-navn").text($("h1").text());
Findes det eller findes det ikke!
Hvis div findes:
if ($('#DIV-DER-FINDES').length > 0) {
... gør noget
}
... og den modsatte - hvis div ikke findes på siden
if ($('#JEG-FINDES-IKKE').length == 0) {
... gør noget
}
active top menu item -> aside menu title
$(".aside__menu").prepend('<h3>' + $(".main__menu .active").html() + '</h3>');
scroll to top
Scroll til toppen af siden - vises først når der er scrollet på siden!
jQuery:
/* Top */
$(window).scroll(function(){
if( $(document).scrollTop() > 0 ) {
$('#top').show();
} else {
$('#top').hide();
}
});
$('#top').click(function(){
$('html, body').animate({scrollTop:0}, 'slow');
});
CSS:
#top{
position: fixed;
display: none;
cursor: pointer;
right: 0;
top: 300px;
background: rgba(255, 0, 42, 0.83);
font-weight: bold;
padding: .5em;
color: #fff;
border-radius: 5px 0 0 5px;
&:hover {
background: rgba(2, 115, 13, 0.8);
}
}
HTML:
<div id="top">⇪</div>
Tag højde fra en div og tilføj den til en anden
/*global jQuery*/
(function ($) {
"use strict";
$(document).ready(function () {
var divHeight = $('.XXX').height();
$('.YYY').css('height', divHeight+'px');
});
}(jQuery));
Onload efter Ajax
$( document ).ajaxComplete(function() {
....
});
URL indholder
Gør noget hvis URL indeholder: XXXX
$(document).ready(function () {
if(window.location.href.indexOf('XXXX') > -1) {
...
}
});
Hvis checkbox er checket af
if ($('input#XXX').is(':checked')) {
...
}
Læs mere / Læs mindre
Skift teksten ved klik + slideToggle element YYY
$(".XXX").click(function () {
$(".YYY").slideToggle(500, function () {});
$(this).text(function(i, text){
return text === "Læs mere ..." ? "Læs mindre ..." : "Læs mere ...";});
});
Placeholder
$('input#edit-query').attr("placeholder", "Søg");
Hvis selected text er lige med ...
Hvis tekst i selected options i class = xxx , så skift farve på class= yyy til rød
$('.xxx option:selected').each(function () {
if ($(this).text() == 'Vælg materiale') {
$('.yyy').css('color', 'red');
}
});
Browser class på HTML tag
<script>
jQuery(document).ready(function ($) {
var deviceAgent = navigator.userAgent.toLowerCase();
if (deviceAgent.match(/(iphone|ipod|ipad)/)) {
$("html").addClass("ios");
$("html").addClass("mobile");
}
if (navigator.userAgent.search("MSIE") >= 0) {
$("html").addClass("ie");
}
else if (navigator.userAgent.search("Chrome") >= 0) {
$("html").addClass("chrome");
}
else if (navigator.userAgent.search("Firefox") >= 0) {
$("html").addClass("firefox");
}
else if (navigator.userAgent.search("Safari") >= 0 && navigator.userAgent.search("Chrome") < 0) {
$("html").addClass("safari");
}
else if (navigator.userAgent.search("Opera") >= 0) {
$("html").addClass("opera");
}
});
</script>