Adding tooltip to mobile with click action using javascript - javascript

I'm pretty new to this so help and possibly patience would be appreciated. I've spent a few hours trying to string together a solution based on other peoples problems but I'm struggling.
I have icons on a website that on desktop hover will show the img title as a tooltip. Unfortunately on tablet/mobile this doesn't work. I assume because we can't hover on those browsers. Example page: http://queenofretreats.com/retreat/strategic-space-burgundy-france/ - you'll see the 8 turquoise icons below the main image. These are the icons in question.
I found a solution that adds the img title on click using javascript. Solution demo here: http://jsfiddle.net/bo28190/s3dg50y4/
I'm not sure why I can't get this to work on my actual wp installation.
I've added the script as a .js file in my theme folder. I've called the script from functions.php using
/**
* Enqueue a script
*/
function myprefix_enqueue_scripts() {
wp_enqueue_script( 'mobile-icon-tooltip', get_template_directory_uri() . '/assets/js/mobile-icon-tooltip.js', array(), true );
}
add_action( 'wp_enqueue_scripts', 'myprefix_enqueue_scripts' );
I've added the jquery UI library , adding:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
But the tooltip doesn't show click on any screen size.

Try to replace this:
wp_enqueue_script( 'mobile-icon-tooltip', get_stylesheet_directory_uri() . '/js/mobile-icon-tooltip.js', array(), true );
with this:
wp_enqueue_script( 'mobile-icon-tooltip', get_template_directory_uri() . '/assets/js/mobile-icon-tooltip.js', array(), true );
get_stylesheet_directory_uri() returns the stylesheet URI, while what you really want is the theme base URI.

Related

How to replace scripts in WordPress with the ones from CDN?

I am newbie of wordpress.
There are always some JS and Css from CDN in Wordpress, theme or plugins, like:
https://ajax.googleapis.com/ajax/libs/webfont/1.5.0/webfont.js
https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/themes/base/jquery-ui.css
Unfortunately, those external CDNs resource are quite slow in our country, and will caused our site serious delay.
Is there anyway to replace it with a local server copy please?
How should I do it please?
Thanks in advance.
One solution you got in comments that how to load jQuery locally and in case you have any other scripts or styles which are not available locally by default from WordPress so you can use wp_enqueue_script.
/**
* Proper way to enqueue scripts and styles.
*/
function wpdocs_theme_name_scripts() {
wp_enqueue_style( 'style-name', get_stylesheet_uri() );
wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'wpdocs_theme_name_scripts' );`
Well you can always override your current themeto enqueue your css and js. Basically go to :
wordpress/wp-content/themes/(the theme your using)/functions.php
You will need to modify the "functions.php" file and add an action in order to enqueue your new scripes and styles.
function mynew_scripts() {
wp_enqueue_script('webfont', 'https://ajax.googleapis.com/ajax/libs/webfont/1.5.0/webfont.js');
wp_enqueue_style('jquery-ui', 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/themes/base/jquery-ui.css');
//And for local file use get_template_directory_uri() to get the path
wp_enqueue_script('yourjsfile',get_template_directory_uri().'/yourthemedir/assets/js/yourjsfile.js');
wp_enqueue_style('yourcssfile',get_template_directory_uri().'/yourthemedir/assets/js/yourcssfile.css');
}
add_action('wp_enqueue_scripts', 'mynew_scripts');
check up these functions wp_enqueue_script , wp_enqueue_style

Remove render-blocking JavaScript:

I am trying to speed up the website and get 100/100 on here:
page speed insights - website www.chrispdesign.com
I have tried moving the coding etc but on my wordpress website i cant seem to quite find the correct place to put it. If I have had it in the right place it wont work.
Also I cannot
find Remove render-blocking JavaScript:
http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js
on any of the wordpress pages only on the view page source?
I have tried a few options on autoptimize plugin etc.
and attempted what the guy on this link did:
https://moz.com/community/q/fixing-render-blocking-javascript-and-css-in-the-above-the-fold-content
Tried a few techniques but no no avail.
Anyone got some ideas?
Many thanks
Shaun
If you want to move javascript files to bottom, you need to deregister it (for jquery), and after register/enqueue it with wp_enqueue_script(set the last parameter at true)
<?php
function move_js_files(){
// Deregister jquery load by default
wp_deregister_script( 'jquery' );
wp_deregister_script( 'jquery-core' );
wp_deregister_script( 'jquery-migrate' );
// Register it by yourself and enqueue with last parameter at true
wp_register_script('jquery', includes_url() . '/js/jquery/jquery.js');
wp_enqueue_script('jquery', includes_url() . '/js/jquery/jquery.js', array(), false, true);
wp_register_script('jquery-migrate', includes_url() . '/js/jquery/jquery-migrate.min.js');
wp_enqueue_script('jquery-migrate', includes_url() . '/js/jquery/jquery-migrate.min.js', array('jquery'), false, true);
// Exemple with a custom script in theme, no need to deregister
wp_enqueue_script( 'custom-script', get_stylesheet_directory_uri() . '/js/custom-min.js', array( 'jquery' ), false, true );
}
// Only load on frontend
if(!is_admin()){
add_action( 'wp_enqueue_scripts', 'move_js_files', 0 );
}
You also need to check that all your javascript files (in theme and plugins) that use jQuery was also moved to bottom.
This works for me, with a few sites on Google Page Speed.
Hope this could help !
You could try to add the defer attribute to the script tags that need to be defered until page has loaded, see:
http://www.w3schools.com/TAgs/att_script_defer.asp

JS file not loading on Wordpress site

Apologies, I have literally no idea when it comes to .js stuff; I'm a designer mostly and so far have never needed to use any js.
I'm soon to build a site for a client in Wordpress, and they have a slide-based calculations function that I need to lift from their old site; only trouble being that I will be constructing the site using a different theme, so the functionality needs re-integrating into the new theme.
Trouble is, in testing this I can get the slides to appear, but they don't really do anything - and it seems that the problem is that the associated .js file isn't loading. It's been placed in THEME/assets/js/ where it seems it should be, and I have added the following to functions.php:
wp_enqueue_script( 'rangeslider-js', get_template_directory_uri() . '/assets/js/rangeslider.js', array( 'theme-js' ), '1.0', false);
Can anyone point me in the direction of what I'm doing wrong please? Sorry for my complete amateurness - I hope the above makes sense...!
It may be that maybe jquery is not loaded or that there is a conflict with something else.
try
function myFunction(){
wp_enqueue_script( 'rangeslider-js', get_template_directory_uri() . '/assets/js/rangeslider.js', array( 'jquery','theme-js' ), '1.0', false);
}
add_action( 'wp_enqueue_scripts', 'myFunction' );
So first check the source code on the page and make sure it is indeed not being sourced in. If it is being sourced in, make sure that the path actually links to the source code file. If its just not there consider your statement:
wp_enqueue_script( 'rangeslider-js', get_template_directory_uri() . '/assets/js/rangeslider.js', array( 'theme-js' ), '1.0', false);
Try replacing array( 'theme-js' ) with NULL - just to see if it that allows it to show up.
wp_enqueue_script( 'rangeslider-js', get_template_directory_uri() . '/assets/js/rangeslider.js', NULL, '1.0', false);
That parameter requires the javascript file with the handle 'theme-js' to be loaded first or your script wont even try to load. Replacing it with NULL will remove the perquisites required and wordpress will load your script if it exists.
If that allows your script to load, check and make sure the prerequisite script is loaded and see if it using the handle 'theme-js'

I can't get javascript to work in my wordpress theme

I've been following some inst given on a previous thread (How do I add a simple jQuery script to WordPress?), but I can't get them to work, and my wordpress theme (self built) doesn't even seem aware that there is any javascript being added.
I'm trying to add a short jQuery script that toggles a responsive navigation menu on and off.
So far, I've created a folder for my javascript files at - (/wp-content/themes/lucie-averill-photography/js/script.js)
In my script.js file, I have:
jQuery(document).ready(function() {
jQuery(".menu-trigger").click(function() {
jQuery(".nav-menu").slideToggle(400, function() {
jQuery(this).toggleClass("nav-expanded").css('display', '');
});
});
});
In my functions file I have added:
add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
wp_enqueue_script(
'script', // name your script so that you can attach other scripts and de-register, etc.
get_template_directory_uri() . '/js/script.js', // this is the location of your script file
array('jquery') // this array lists the scripts upon which your script depends
);
}
None of this has had any effect whatsoever on my theme – can anyone see what might be wrong here?
Thanks.

Sidr not working on WordPress

Well basically I'm trying to implement Sidr which is from here
(http://www.berriart.com/sidr/)
I just want it work, I have added the scripts to function.php and even did alerts to test they were loading and running. Here's how I added them.
add_action( 'wp_enqueue_scripts', 'blankslate_load_scripts' );
function blankslate_load_scripts()
{
wp_enqueue_script( 'jquery' );
wp_enqueue_script( 'Sidr', get_template_directory_uri() . '/js/jquery.sidr.min.js' );
wp_enqueue_script( 'Sidr-run', get_template_directory_uri() . '/js/jquery.run.min.js' );
wp_enqueue_style( 'sidr-css', get_stylesheet_directory_uri() . '/css/jquery.sidr.light.css' );
}
I've check in the inspector on chrome and I have confirmed its loading the scripts, I looked at the console and just saw it blank aside from it showing this
[cycle2] --c2 init--
The div displays, everything is there. The code itself to make the box slide in from the left to right is the only thing not working. I'm using the first basic demo he has on his page where it slides from the left side with the list of links.
At this point I'm beyond frustrated so that's why I'm hoping someone here can find the issue.
the website I'm testing this on is ('http://chocobento.x10.mx/wp/')
You're using
$(document).ready(function() {
$('#simple-menu').sidr();
});
When you should be using
jQuery(document).ready(function() {
jQuery('#simple-menu').sidr();
});
or
(function($) {
$(document).ready(function() {
$('#simple-menu').sidr();
});
}(jQuery));
See https://wordpress.stackexchange.com/questions/2895/not-defined-using-jquery-in-wordpress

Categories