I'm attempting to use the jQuery version of Revolution Slider following this tutorial without the visual interface: https://www.themepunch.com/revsliderjquery-doc/anatomy-basic-slider/. I'm not getting any errors in the Developer tools console other than from an unrelated script that I broke on purpose that's activating on 'a.arrow'. For some reason, the slider is simply not appearing.
The tutorial was rather straightforward and I'm at a loss for what's wrong. I've included the pertinent code below to see if there's something obvious I'm missing. I'll also include a link to the page in question:
https://restaurantex1.wpengine.com/about/
To see it: UN: demo PW: password
I am aware that there is a WordPress specific plugin for this, but it has a visual editor that I'd prefer not include with the website we're building... which is why I was attempting to use the simpler jQuery only plugin instead.
Code to display Revolution slider:
<div class="rev_slider_wrapper" style="overflow: visible;height: 600px;display: block;position: relative;">
<!-- the ID here will be used in the JavaScript below to initialize the slider -->
<div id="rev_slider_1" class="rev_slider" style="">
<ul>
<!-- MINIMUM SLIDE STRUCTURE -->
<li data-transition="fade">
<!-- SLIDE'S MAIN BACKGROUND IMAGE -->
<img src="https://restaurantex1.wpengine.com/wp-content/uploads/2017/07/notgeneric_bg3.jpg" alt="Sky" class="rev-slidebg">
</li>
<!-- MINIMUM SLIDE STRUCTURE -->
<li data-transition="fade">
<!-- SLIDE'S MAIN BACKGROUND IMAGE -->
<img src="https://restaurantex1.wpengine.com/wp-content/uploads/2017/07/notgeneric_bg5.jpg" alt="Ocean" class="rev-slidebg">
</li>
</ul>
</div>
Enqueuing scripts in WordPress, which is working and not returning any errors in the console:
wp_enqueue_style( 'revolution_settings', get_stylesheet_directory_uri() . '/js/revolution/css/settings.css' );
wp_enqueue_style( 'revolution_layers', get_stylesheet_directory_uri() . '/js/revolution/css/layers.css' );
wp_enqueue_style( 'revolution_navigation', get_stylesheet_directory_uri() . '/js/revolution/css/navigation.css' );
wp_enqueue_script( 'revolutiontools_js', get_template_directory_uri() . '/js/revolution/js/jquery.themepunch.tools.min.js', array('jquery'), '1.11.1', false);
wp_enqueue_script( 'revolution_js', get_template_directory_uri() . '/js/revolution/js/jquery.themepunch.revolution.min.js', array('jquery'), '1.11.1', false);
Script in footer of site above closing tag to activate slider:
<script>
jQuery(document).ready(function() {
jQuery('#rev_slider_1').show().revolution({
/* options are 'auto', 'fullwidth' or 'fullscreen' */
sliderLayout: 'auto',
/* basic navigation arrows and bullets */
navigation: {
arrows: {
enable: true,
style: 'hesperiden',
hide_onleave: false
},
bullets: {
enable: true,
style: 'hesperiden',
hide_onleave: false,
h_align: 'center',
v_align: 'bottom',
h_offset: 0,
v_offset: 20,
space: 5
}
}
});
});
Related
I've been looking at these questions such as these below.
How do I add a simple jQuery script to WordPress?
jQuery addClass not working
Yet I cannot seem to get this to work in wordpress.
I create a myscript.js and add this code.
jQuery(document).ready(function() {
$('#addhere').addClass('well');
})
Then I en queued it in my functions.
wp_enqueue_script( 'myscript_js', get_template_directory_uri() . '/js/myscript.js', array('jquery'), '', true );
I also did the add_action ( 'wp_enqueue_scripts', 'theme_js' );, I know that works as I have included bootstrap.min.js which works correctly.
I am trying to add it here,
<nav id="addhere" class="navbar navbar-inverse navbar-fixed-top" role="navigation">
Just to test so i can see if it worked.
My question is what am I doing wrong? Why will it not add the class?
You mixed up jQuery(..) and $(..).
Im not sure if that would actually work, so try this instead:
jQuery(document).ready(function() {
jQuery('#addhere').addClass('well');
});
It seems that if you load jQuery imlicitly over wordpress, it is beeing loaded in no conflict-mode (see http://api.jquery.com/jquery.noconflict/) as this blog post states.
I am using TippyJS to add some tooltips to my website. They have HTML content which works fine, except on page load you can for a short time see the content before it dissapears. How can I fix that? My site jumps now because some HTML of a tippy is in my menu structure.
I simply have these files in my footer:
<!-- Popper JS -->
<script src="assets/js/popper.min.js"></script>
<!-- Tippy JS -->
<script src="https://unpkg.com/tippy.js#6"></script>
Example of a tooltip that I have:
<span class="tooltippy_nostyle">
<img class="infosvg" src="assets/images/custom/icon_info.svg">
<div class="tooltipcontent darktext">
Test
</div>
</span>
And the JS:
$( ".tooltippy_nostyle" ).each(function( i ) {
tippy(this, {
trigger: 'click',
allowHTML: true,
animation: 'scale-subtle',
interactive: true,
content: function (reference) {
return reference.querySelector('.tooltipcontent');
}
});
});
It does not matter what the content is, alot of html or simply 1 word. The content is shown first before the TippyJS code removes it and puts it inside the tooltip. What can I do to fix this? I tried moving the files in my footer to my header but this changed nothing.
Implementing Tooltipster with our WordPress site, but hit a roadblock. The tooltips open correctly, but the content within the tooltip is empty. This code works outside of WordPress. Please help?
Here's how it's all being setup.
1) Within functions.php:
wp_enqueue_style( 'ttcss', '/ours/tt/dist/css/tooltipster.bundle.min.css' );
wp_enqueue_style( 'ttcss-noir', '/ours/tt/dist/css/plugins/tooltipster/sideTip/themes/tooltipster-sideTip-noir.min.css' );
wp_enqueue_script( 'ttjs', '/ours/tt/dist/js/tooltipster.bundle.min.js', array('jquery'), null, true );
2) Within header.php before closing </head>:
<script> jQuery(document).ready(function() {
jQuery('.ourtip').tooltipster({
theme: 'tooltipster-noir',
contentCloing: true,
contentAsHTML: true
});
});
</script>
3) Within the theme, where the tooltip is desired:
<span class="ourtip" data-tooltip-content="#ourtip_content">Tool</span>
4) Lower down within the theme, what should be displayed (but isn't):
<?php
function ours_publisher_popup()
{
?>
<style>.ourtip_templates {display: none;} </style>
<div class="ourtip_templates">
<div id="ourtip_content">
<strong>This text should display but is missing.<br></strong>
</div>
</div>
<?php
}
ours_publisher_popup(); ?>
Ended up being a conflicting plugin. Disabled WP plugins one at a time until it started working, and then found one that was also trying to use Tooltipster. Deactivated that and functionality returned.
Creating a slideshow using Galleria.io APIs.
Galleria's DIV tag in my HTML page looks like :
<div class="content">
<div id="galleria">
<!-- I have used Javascript to input values in this DIV tag -->
</div>
<div id="full" style="float: right">
<!-- DIV tag for fullscreen and auto slideshow play-->
<button>full screen</button>
<button>play slideshow</button>
</div>
</div>
I have used the classic theme provided in the downloads of Galleria.io, and which has below script to call the contents in the DIV tag ("id = galleria").
<script>
$(function () {
Galleria.run('#galleria');
});
</script>
I have referrer the official documentation of Galleria for enabling fullscreen and auto slideshow.
But these documents only provide the method names, and not the example of implementing those methods. Can someone please guide how to implement these methods in script tag ?
Also, I have gone through the discussion about auto-resize in galleria
and tried to implement but having issues.
So I found the answers, and posting it as a reference in Galleria.io customization.
Everything will be the same, Galleria has parameters for different functionalities, that we have to call. For the functionality of auto slideshow, i edited the same script in the question this way.
<script>
$(function () {
Galleria.run('#galleria', {
autoplay: 3000,
transition: 'flash',
transitionSpeed: 600,
});
});
</script>
The scenario
The site is built with Bootstrap, and has several div's (or columns) with a variation in height.
My HTML basically looks like this:
<div class="container">
<div id="masonry-container" class="row">
<div class="item col-lg-3 col-md-4 col-sm-3 col-xs-12">
<!-- Text and so on -->
</div>
</div>
</div>
The problem
The problem is that Bootstrap does not work very well with columns when they have different heights. This is a common problem, please see example below, or visit my page.
What I am working on
I am trying to include Masonry with Bootstrap so that the columns are correctly aligned when the heights are different. The columns from the example above would then look like this:
However, I can't get it to work correctly. I am not sure if I am doing something wrong, or if I have missed something.
I am using the Masonry min (here)
I have tried loading it with functions.php by the following:
//Isotope and masonry
function add_isotope() {
wp_register_script( 'isotope', get_template_directory_uri().'/js/isotope.pkgd.min.js', array('jquery'), true );
wp_register_script( 'isotope-init', get_template_directory_uri().'/js/isotope.js', array('jquery', 'isotope'), true );
wp_enqueue_script( 'masonry_js', 'http://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.0/masonry.pkgd.min.js', array('jquery'), true );
wp_enqueue_script('isotope-init');
}
add_action( 'wp_enqueue_scripts', 'add_isotope' );
I have also tried to include it the regular way in header.php:
<script src="<?php bloginfo('stylesheet_directory'); ?>/js/masonry.pkgd.min.js"></script>
However, nothing seems to work.
Could you please provide a working solution?
The page can be found here.
I don't think you're calling $.masonry(). I looked up the source code, nothing seemed to bind #masonry-container. So, add this snippet to your pages' footer.
$('#masonry-container').masonry({
itemSelector: '.item' // div.item
});
And because you're working with a responsive layout here, you should use reload method like below
$('#masonry-container').masonry({
itemSelector: '.item',
isAnimated: true // the animated makes the process smooth
});
$(window).resize(function() {
$('#masonry-container').masonry({
itemSelector: '.item',
isAnimated: true
}, 'reload');
});