I am trying to add some JavaScript of chamber of commerce logos to a footer and for some reason only one of the logos (javascript code) is showing up. I know these will be changed out every year, so I am decided to use a plugin to add the script to the footer instead of functions.php file. I don't know javascript very well, so I don't know if the code is bad, or what might be causing the issue.
This is the site: http://probitypools.com/
The plugin I am using: AddFunc Head & Footer Code
Here is the code I am trying to add (two different ones for two different locations of chamber of commerce groups):
<div id="mni-membership-635911226845619403"></div>
<script src="http://eocc.chambermaster.com/Content/Script/Member.js" type="text/javascript"></script>
<script type="text/javascript">new MNI.Widgets.Member("mni-membership-635911226845619403",{member:3833,styleTemplate:"##id{text-align:center;position:relative}##id .mn-widget-member-name{font-weight:700}##id .mn-widget-member-logo{max-width:100%}"}).create();
</script>
<div id="mni-membership-635911228349496452"></div>
<script src="http://maitlandchamber.chambermaster.com/Content/Scrip/Member.js" type="text/javascript"></script>
<script type="text/javascript">new MNI.Widgets.Member("mni-membership-635911228349496452",{member:308,styleTemplate:"##id{text-align:center;position:relative}##id .mn-widget-member-name{font-weight:700}##id .mn-widget-member-logo{max-width:100%}"}).create();
</script>
Thanks for any help!
Jules
Related
I have this code, and I cant get it to work in my WordPress, I have used the addons Insert Headers & Footers and also WP Coder... but I am not sure why it will not work, the page is just blank.
How can I get this to work? What should I place where in the WordPress site - plugins etc.?
I have tried to place this in the "WP CODER" under "HTML code":
But it does not work, the page is blank.
1) Add the following code to the <head> section of your website:
<link rel="stylesheet" type="text/css"href=”https://zellr.com/integration/kirpparikalle.css” />
2) Add the following code to the section of your page. Place it inside the element where you wish to see the login and registration forms.
<h1 id="kirpparikalle_title"></h1>
<br/>
<div id="kirpparikalle_container"></div>
<!-- Note: jQuery is requirement for the integration scripts.
If you already have jQuery included in your website, you can remove the next line. -->
<script type="text/javascript" ```src="https://zellr.com/integration/jquery.min.js"></script>
<script type="text/javascript" ```src=”https://zellr.com/integration/kirpparikalle_i18n.js"></script>
<script type="text/javascript">
$(function() {
KK_COMPANY = ' denlillelandsoldat ';
KK_CONFIG['redirect_url'] = 'http://denlillelandsoldat.dk/';
KK_LANGUAGE = 'da';
kk_show_default_login();
});
</script>
It should show some booking module on the page.
Try to copy this exact code and paste it where you want it to appear, you have odd characters in the code you've applied on your website. Also the js code might produce an error to made a little change to the wrapper
<link rel="stylesheet" type="text/css" href="https://zellr.com/integration/kirpparikalle.css" />
<div id="kirpparikalle_container"></div>
<!-- Note: jQuery is requirement for the integration scripts.
If you already have jQuery included in your website, you can remove the next line. -->
<script type="text/javascript" src="https://zellr.com/integration/jquery.min.js"></script>
<script type="text/javascript" src="https://zellr.com/integration/kirpparikalle_i18n.js"></script>
<script type="text/javascript">
(function($) {
$(function() {
KK_COMPANY = ' denlillelandsoldat ';
KK_CONFIG['redirect_url'] = 'http://denlillelandsoldat.dk/';
KK_LANGUAGE = 'da';
kk_show_default_login();
})( jQuery );
</script>
Are you using block editor (gutenberg) or the classic editor?
In classic editor. Paste your codes inside text editor
Same concept in gutenberg tho.
I am trying to set up jquery instant postcode search function (from https://ideal-postcodes.co.uk/documentation), I successfully added the fields on my website http://kyl.ri-web.com however the Postcode field is not showing up.
I am sure this is a jquery conflict issue but just can't get it to work.
The website is a Wordpress website and I have already tried deactivating all plugins to check for any conflicting.
I have installed the script from ideal-postcodes.
I have added the empty div with the ID 'lookup_field' which should be replaced by the postcode lookup but it's not showing.
The other fields should be filled once a relative postcode has been selected.
I've added the script to run in the footer.
Looks like you're calling your script before jQuery is declared. Move your script to just above the closing tag, like so:
</div><!-- #page -->
<script type='text/javascript' src='http://kyl.ri-web.com/wp-content/themes/know-your-location/js/main.min.js?ver=1.0.0'></script>
<script type='text/javascript' src='http://kyl.ri-web.com/wp-content/plugins/js_composer/assets/js/js_composer_front.js?ver=4.5.3'></script>
<script type="text/javascript">
jQuery('#lookup_field').setupPostcodeLookup({
api_key: 'ak_ibm52vjdv8H63MwvUHsdyZpTO2dyb',
output_fields: {
line_1: '#first_line',
line_2: '#second_line',
line_3: '#third_line',
post_town: '#post_town',
postcode: '#postcode'
}
});
</script>
</body>
</html>
As this is a Wordpress site, it may be easier to move your jQuery file into the head section, also call jQuery using 'jQuery' not '$', see updated code
I have this code:
<body class='homepage'>
<div id='wrapper'>
<header id='header'></header>
<div id='main' role='main'>
...
Because there are many HTML pages, I decided to include the header in each page by putting the html inside header.html and using this jQuery:
<script src="assets/javascripts/jquery/jquery.min.js" type="text/javascript"></script>
<script src="assets/javascripts/jquery/jquery.mobile.custom.min.js" type="text/javascript"></script>
<script>
$(function(){
// Include header and footer
$("#header").load("header.html");
$("#footer").load("footer.html");
});
</script>
<script src="assets/javascripts/bootstrap/bootstrap.min.js" type="text/javascript"></script>
<script src="assets/javascripts/plugins/modernizr/modernizr.custom.min.js" type="text/javascript"></script>
<script src="assets/javascripts/plugins/hover_dropdown/twitter-bootstrap-hover-dropdown.min.js" type="text/javascript"></script>
<script src="assets/javascripts/plugins/retina/retina.min.js" type="text/javascript"></script>
// etc... there are about a dozen js scripts
At a glance, it looks fine. However, the problem I am finding is that the effects I have in the header (for example hovering over a nav link SHOULD show the nav menu) don't work when I use this jQuery include approach. If I copy and paste the full header and put it back into #header then it works fine again.
So I think it must be a timing issue, perhaps the header is loading before the appropriate jQuery scripts are included perhaps (just a guess? I have tried moving the load() to under the other scripts but that did not work).
What should I do to fix this?
You are basically calling ready() function which means, put the header files when the DOM is ready. So most of the events were bound to non-existent elements.
If you have a backend code, you could render the imports beforehand in a template view file or something.
Or, you could also use event delegation for the events that you need.
First off, I'm new to JQuery, so sorry if this is something simple and I'm just missing it.
I'm attempting to use the jquery plugin called "tooltipsy" (http://tooltipsy.com/).
The end goal is for this look here: http://screencast.com/t/4AghhAI7dL
This is what currently happens: screencast[dot]com/t/mBAIm67lM6W1 (sorry, couldn't post more than two links)
Inside my code I've copied it nearly identically from the examples, but I can't seem to get it to work. This is running inside a twig template file for a WordPress website, but I don't believe that, that should affect it (of course I could be, and probably am wrong)?
<a class="hastip" title="Phone Here">(ES?)</a>
<script type="text/javascript" src=" {{ wp.get_stylesheet_directory_uri() }}/assets/js/tooltipsy.min.js">
$('.hastip').tooltipsy();
</script>
It links to the CSS file in the header information, and the link works just fine.
My issue is the "tooltip" itself does not appear and I can't figure out why?
Would appreciate any and all help, thanks!
<a class="hastip" title="Phone Here">(ES?)</a>
<script type="text/javascript" src=" {{ wp.get_stylesheet_directory_uri() }}/assets/js/tooltipsy.min.js"></script>
<script>
$(document).ready(function() {
$('.hastip').tooltipsy();
});
</script>
You can't have code inside a script src.
I'm having trouble implementing Pagify in Wordpress.
First I tried this tutorial to register the script in function.php. It worked, the pagify.js is included, and the jQuery too. FYI, I'm using wp-foundation themes, its has built-in jQuery.
and then I put the script to call pagify in the header.php before wp_head() and also i try after wp_head():
$('#page_holder').pagify({
pages: ['home', 'about', 'contact'],
default: 'home' // The name of a page or null for an empty div
});
I created HTML just like in pagify tutorial, and my div container id is also named page_holder. but it doesn't work.
Second I tried to register the script above to function.php, but still didn't work.
Third, I modified pagify.js, add noConflict() but still not work.
I am always facing issues with adding jquery scripts to my WP sites and still don't find a general way to resolve them, so I do like you, I try the different possibilities: nonConflict, register scripts and enqueue them, call them in simple script tags before wp_head or before wp_footer in header.php and footer.php respectively....
The last situation was to try to implement the Tag-it jquery plugin with my wordpress site and I resolved it by calling the script in my footer.php (I tell you beacause you didn't mention you tried this option in your question).
Example with Tag-it plugin:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="<?php echo get_bloginfo('template_directory'); ?>/js/tag-it.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#myTags").tagit(
{
fieldName: "tages[]"
}
);
});
</script>
<?php
/* Always have wp_footer() just before the closing </body>
* tag of your theme, or you will break many plugins, which
* generally use this hook to reference JavaScript files.
*/
wp_footer();
?>