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

Træt af at laver underlige CSS hack til IE og andre underlige browsere. Her er en elegant løsning hvor der med jQuery sættes en 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>