samedi 9 mai 2015

register js for more than one predefined by id pages in script-calls.php

I have this js code (saved as shomz.js file)

var shown = true;
var parent = document.querySelector('.parent');
var child = document.querySelector('.child');

parent.addEventListener('mouseenter', function(){
  child.style.opacity = shown ? 0 : 1;
  shown = !shown;
});

The js is related to the following css

* {
  margin: 0;
  padding: 0;
}

.parent {
  width: 100%;
  margin: 10px auto;
  position: relative;
}

.child {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
  transition: opacity 0.5s linear;
}


p {
  padding: 1em;
}

and html:

<div class="parent">
<img src="http://ift.tt/1aOoXsp" alt="" width="500px" height="auto" />

<div class="child">
<img src="http://ift.tt/1HWhQs8" alt="" width="500px" height="auto" />

Starting from the below js register procedure (made by Robin) in script-calls.php for a single page by ID, I was wondering what is the best way to tweak the code, in order to define more than one page (2,3,N) also by ID, applying the above shomz.js code. I am not interested to find a global rule that will affect the whole site pages, but only the defined by ID pages;

// Main Scripts
function register_js() {

    if (!is_admin()) {
        $url_prefix = is_ssl() ? 'https:' : 'http:';

        /* Get id of current page*/
        $page_id     = get_queried_object_id();
        /* Compare the desired page's id with the current page's id, if       they match, enqueue shomz*/
        if(YOUR_ID == $page_id){
            wp_register_script('shomz', THB_THEME_ROOT . '/assets/js/plugins/shomz.js', 'jquery', null, TRUE);
            wp_enqueue_script('shomz');
        }
        wp_localize_script( 'app', 'themeajax', array( 'url' => admin_url( 'admin-ajax.php' ) ) );
    }
}  

Aucun commentaire:

Enregistrer un commentaire