Develop Reference

addClass doesn't work, removeClass does - modifying WP admin divs [duplicate]

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.

Tippyjs shows content of html tippies for a brief time on page load

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.

Issue getting basic slider to display using jQuery Revolution Slider

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
}
}
});
});

Bootstrap with Masonry

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');
});

How to Toggle post content within a "post" title in a page?

I'm trying to give all "posts" title in a specific page. So If someone clicks on that posts, it's content must be toggle below the title and if some clicks the title again then the content must hide.
I solved half of the problem with the help of WP-Archives Plugin. And my page is looking like this Check this image here.. So these are
"Archives" titles links. And if someone clicks on it, it will take to the that.. I want the content in the particular posts to be in the same page in the form of toggle (in abvoe image..). Is it possible?

It sounds like you're describing an accordion function. Wordpress offers a bunch of accordion plugins. Here are a few:
http://wordpress.org/plugins/tags/accordion
If you're looking for something with a little more control you might want to look straight into the jquery accordion widget. See information here: http://jqueryui.com/accordion/
EDIT
To add the accordion plugin to your list, you'll need to apply the following changes. Add the following to your head tag:
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
In your wp-archives plugin modify the following line:
echo "<div class='list'><ul>\n";
to this:
echo "<div class='list'><ul id=\"unique_id_of_your_choice\">\n";
As for the content that should follow each post title, You will need to update the plugin once again to include the archive post content(either the entire post or a snippet, whichever you choose). It should look something like this if the database field holding the content were named "post_content".
$arcresults2 = $wpdb->get_results("SELECT ID, post_date, post_title, post_content, comment_status FROM " . $wpdb-> posts . " WHERE post_date LIKE '$thisyear-$thismonth-%' AND $current_posts AND post_status='publish' AND post_password='' ORDER BY post_date DESC");
...
...
$arc_title = $arcresult2->post_title;
$arc_content = $arcresult2->post_content;
...
...
echo "<li class='list'>" . wptexturize($text) . "\n";
echo"<ul><li>".$arc_content."</li></ul></li>\n";

This is possible with an accordion script like jQueryUI Accordion, but if you want to apply this to your posts page, you will also have to edit your page template.
Here is one simple method (see source):
1) Add the following to your theme's functions.php
function add_accordion_script() {
wp_enqueue_script('acc', get_template_directory_uri() . '/acc.js', array('jquery-ui-accordion'));
}
add_action('wp_enqueue_scripts', 'add_accordion_script');
2) Create acc.js in your themes directory thus:
jQuery(document).ready(function($) {
$( "#accordion" ).accordion({
header: "div.accordion-header",
collapsible: true,
active:false });
});
3) Finally modify your theme page to something like this:
<?php if (have_posts()): ?>
<div id="accordion">
<?php while (have_posts()) : the_post();?>
<div class="accordion-header">
<h1><?php the_title();?></h1>
<?php the_excerpt();?>
</div>
<div><?php the_content();?></div>
<?php endwhile; ?>
</div>
<?php else:?>
<p><?php _e('No posts'); ?></p>
<?php endif;?>
Depending on your wordpress template this may be more complicated to implement than is outlined above... in which case you'd have to provide more information.
Another alternative would be to use some sort of plugin specifically designed for this purpose. I found three that might work for you, but they do not seem to be well supported/maintained... so the above method may still be your best option:
Wordpress jQuery Accordion Plugin
WP Post Accordion
Read More Right Here Plugin

Collapse-O-Matic Plugin for wordpress is another alternative for this which is working like a charm for my website but only if I'm changing it to default theme of Wordpress :(. Seems like there is any glitch in my theme. Anyways, thanks for all the responses posted above.