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