Bra css/jQuery/js trix

Smooth-scroll till en sektion

Gör smooth-scroll till en sektion.
Lägg till den här koden i din .js-fil. Och ankra sedan länkarna till deras ID. Ex. Koden är copypastad här.

<section id="portfolio-section">
</section>
$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^//,'') == this.pathname.replace(/^//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});

Fade in från vänster eller höger när man skrollar ner

Här finns filerna och dokumentationen.

Lägga in javascript-script i WordPress parentheme

Leta efter sektionen i functions.php där script läggs till. Det kan se ut såhär.

function resonate_scripts() {
	wp_enqueue_style( 'resonate-style', get_stylesheet_uri() );

	wp_enqueue_script( 'resonate-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20120206', true );

	wp_enqueue_script( 'resonate-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20130115', true );

/* Här är mitt eget script so jag har lagt till. Det är baserat på jQuery det är därför som jquery finns i arrayen */
	wp_enqueue_script(
		'animations',
		get_stylesheet_directory_uri() . '/js/script.js',
		array( 'jquery' )
	);


	if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
		wp_enqueue_script( 'comment-reply' );
	}
}
add_action( 'wp_enqueue_scripts', 'resonate_scripts' );

Hur man lägger till javascript-fil in en wordpress child

WordPress har redan jQuery inbyggt, så du behöver bara lägga till ditt script.

1. Gå till child-temat och gå in i filen functions.php.
Lägg där till följande kod.

function add_my_script() {
wp_enqueue_script(
'myscript', // namnge ditt script.
get_stylesheet_directory_uri() . '/js/myscript.js', // lagg till korrekt adress och namn pa skriptet
array('jquery') // this array lists the scripts upon which your script depends
);
}
add_action( 'wp_enqueue_scripts', 'add_my_script' );

Anledningen till att det är get_stylesheet_directory_uri() och inte get_template_directory_uri() är för att detta är ett child-tema. Om det inte hade varit då, då skulle du använt get_template_directory_uri().

2. Lägg nu till namnet och korrekt adress till. I det här fallet heter skriptet myscript.js och ligger i mappen js, därför är det korrekt att skriva “/js/myscript.js”.

3. Notera att i ditt script så kan du inte använda $, istället bör du använda ordet “jQuery”. Här är ett exempel på ett skript och hur det bör se ut om det används i wordpress.


jQuery(document).ready(function(){
jQuery("img").click(function(){
jQuery("img").fadeOut("fast");
});

});

JQuery på lokal dator

JQuery är, som jag förstått det, ett javascripsbibliotek. För att en hemsida ska kunna använda sig av biblioteket måste det laddas ner. Ett sätt är att ladda ner det till datorn eller till servern. Det andra sättet är att låta biblioteket laddas ner från google.

Att låta biblioteket laddas ner från google medför flera fördelar, här är de två främsta:

1. Eftersom google har ett nätverk av servrar runt om i hela världen så kommer nedladdningen av biblioteket sannolikt gå fortare om det sker via dom, istället för min server. Om en chilenare vill gå in på min hemsida måste de ladda ner biblioteket från min server i Sverige, men om jag använt mig av googles hosting så skulle de ladda ner informationen från en server som antagligen står närmare Chile.

2. Den andra fördelen har å göra med caching. Sidbesökaren har kanske redan cachat biblioteket vid besök av en annan sida. I så fall behöver hen inte ens ladda ner biblioteket, vilket gör att sidan laddas ännu snabbare.

I html-koden skall ordningen vara följande: först länk till CSS, sedan http-länk till jQuery-biblioteket, och därefter länk till det lokala scriptet. Biblioteket måste först hämtas innan det lokala scriptet kan förstås. Om det är motsatta så kommer inte skriptet känna till funktionerna.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script src="script.js" type="text/javascript"></script>