jQuery code not working from internal stylesheet - javascript

I am trying to add a small script made by me in Wordpress. While entering it in Google Chrome console everything seems fine, the code is working, but when I call it via <script src="filepath.js"> it doesn't work at all.
I already tried to insert the script using wp_enqueue_script, but I'm not good at PHP. The script and the code are the following:
if ($('body.single-product').length || $('body.product-template-default').length) {
jQuery(document).ready(function ($) {
$('.trx-stretch-width-wrap').prepend('<section class="vc_cta3-container alert-acquisto"><div class="vc_general vc_cta3 vc_cta3-style-classic vc_cta3-shape-rounded vc_cta3-align-left vc_cta3-color-classic vc_cta3-icon-size-md"><div class="vc_cta3_content-container"><div class="vc_cta3-content"><p>Per acquistare i prodotti, contattare attraverso la pagina Contatti o telefonare lo 333333333</p></div></div></div></section>');
})
};
<script type='text/javascript' src='https://mywebsite.com/wp-content/themes/child-theme/prova.js'></script>
Between the || there are the classes of the pages I want it to display, then with jQuery I'm trying to put it before the trx-stretch-etc class.
Actually, analyzing the waterfall it calls the script, but it seems that the script does nothing at all, don't know if I wrote something wrong, any syntax error, or somewhat. Hope anyone can help me.

Related

Jquery conflict in Wordpress after move into another hosting

i was looking for some solution it but i didnt find anything.
I think its jquery conflict. I have installed smart-slider, and after move my Wordpress into another hosting its just stopped working. My browser shows me: "undefined its not a function", and my code (generated by plugin ofc):
<script>
njQuery(document).ready(function () {
njQuery('#nextend-smart-slider-1').smartslider({parameters});
});
</script>
I was trying to change it into $.('#next.. or jQuery('#next, but it still broke.
Any ideas?
You can change the code to be a simple jQuery. And not the njQuery.
<script>
jQuery(document).ready(function () {
jQuery('#nextend-smart-slider-1').smartslider({parameters});
});
</script>
Otherwise it won't work. Or else, just make sure that the server has a variable or a script file to handle the njQuery too.

Add javascript file from wordpress admin page

I'm working on a wordpress blog and I want to add simple JS script to one of my pages. But when you go to edit->text and I add my script in <scirpt> tags it's not working. So I want to know how to insert the script or a .js file with the script in it? I have access only to the wp-admin and I don't have access to the files. Can someone suggest some ways to solve this?
Thank you in advance
I'm not too sure I understand your question 100%, but I'm gonna try to answer the best I can.
If you're adding the JavaScript via Wordpress's Page/Post text editor, you have to make sure you're using the HTML editor (not visual).
That would be step 1.
Step 2 would be adding the script itself. Make sure you don't have any line breaks in between your code, or it will break (learned that from experience)
For example, this will work:
<script type="text/javascript">
var mySpecialFunction = function() {
return 'oh yeaaa';
};
mySpecialFunction();
</script>
This will not:
<script type="text/javascript">
var mySpecialFunction = function() {
return 'oh yeaaa';
};
mySpecialFunction();
</script>
At least, that's what I found with the versions of Wordpress that I'm using (dunno about their latest release)
Hope this helps!
Good luck.

Fixing a JavaScript conflict in Wordpress, help using wp_enqueue_script

I think (not 100% sure) that I am suffering from a javascript conflict. I am using a pluggin to generate a countdown clock on my WordPress page, and I am using some simple custom made javascript with jQuery to make a div appear and dissapear on the page at certain points of scrolling.
To make the appearing / dissapearing div work correctly I added two javascript calls into my header:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/test1.js"></script>
The first being the jquery library and the second being my custom script. After adding these lines of code to the header, the countdown clock stopped working on my website. Through a little debugging I have realized that it is the Google hosted script that is causing the clock not too work.
When I have the code for the Google hosted jquery library in my header I receive the following error: Error = Object [object Object] has no method 'jCountdown'
I believe the solution to this is using the wp_enqueue_script and wp_register_script in the functions.php file to add the two .js files I need, and removing the code from the header. However, I am un familiar with how these bits of code work and can not seem to figure it out. Below is the code I believe needs to be used in the functions.php file, but I have been unsuccessful in making it work.
function notSureWhatGoesHere() {
wp_register_script(notSureWhatGoesHere);
wp_enqueue_script(notSureWhatGoesHere);
}
add_action(notSureWhatGoesHere);
And here is a link to my test webpage: http://jltest.biz/test-1
Thank you so much for your help and time.
You have a Error = Object [object Object] has no method 'jCountdown'
Maybe your plugin hasn't loaded properly...
Remove the jQuery you added jQuery.1.10.2 so i am not supprised that it doesn't work..
PLUS - WordPress has already added a version of jQuery.1.8.3
Now, in your test file you have this
var startY = 840;
var stopY = 1900;
$(window).scroll(function(){
checkY();
});
function checkY()
{
console.log($(window).scrollTop());
if($(window).scrollTop() > startY && $(window).scrollTop() <= stopY)
{
console.log("Show");
$('.fixedDiv').fadeIn("slow");
}
else
{
console.log("Hide");
$('.fixedDiv').fadeOut();
}
}
checkY();
Wordpress uses jQuery.noConflict(); by default so you need to make sure you wrap your code in something like the following
(function( $ ) {
// Code Here....
}( jQuery ));

pretty print not working in twitter bootstrap

I was looking to see how to make this work and what I came up with is This question and answer.
So I included the css and js and I put the onload in the body tag as the answer states, I then created the pre tage and in the end created this:
<pre class="prettyprint linenums languague-css">
function(){
echo "test"
}
</pre>
So then I went to the browser to see my out put, it partially worked.
There are NO console errors, both the css and the js scripts ARE loaded properly, that is I can go into the source, click on the link and NOT get a "I can't find you" error.
So with that information...
What's going on?
This happens when you include the prettify stylesheet, but forget to include the prettify Javascript code. Or if the Javascript code doesn't run.
Try running the prettify code in the document ready, instead of the onload:
! function ($) {
$(function () {
window.prettyPrint && prettyPrint()
})
}(window.jQuery)
That worked for me, see here.
It was a caching issue that caused the javascript to not work.

jQuery not working in IE - simplacart implementation

I'm relatively new to jQuery so apologies if the answer is obvious.
I have a shopping cart using simpleCart js, when adding an item to the cart in FF and Chrome everything runs smoothly but IE(9) doesn't seem to manage it.
http://www.peaknature.co.uk/cart/
The main piece of script is:
UPDATED
$(document).ready(function() {
$(".simpleCart_shelfItem").hover(function(event) {
$(this).find('.tooltip').stop(true,true).show();
});
$(".simpleCart_shelfItem").mouseleave(function(event) {
$(this).find('.tooltip').stop(true,true).fadeOut(500);
});
//Cart info (all items in cart)
$(".cartInfo").toggle(function(){
$("#cartPopover").show();
$(".cartInfo").addClass('open');
}, function(){
$("#cartPopover").hide();
$(".cartInfo").removeClass('open');
});
$(".shelf .simpleCart_shelfItem:eq(0)").css('left', '20px');
$(".shelf .simpleCart_shelfItem:eq(1)").css('left', '250px');
$(".shelf .simpleCart_shelfItem:eq(2)").css('left', '480px');
$(".shelf .simpleCart_shelfItem:eq(3)").css('left', '710px');
$(".shelf .simpleCart_shelfItem:eq(4)").css('left', '20px').css('top', '170px');
});
I know IE can be funny with selectors etc but I'm not sure what's wrong.
Any help is much appreciated.
Chris
I believe what is happening is the simplecart logic is running before its ready, add this round all your code (and remove the script tags).
$(document).ready(function() {
//All your code here.
});
This will sure everything is loaded before attempting to use it.
UPDATE
After looking at ie9 console it shows the following error
SEC7112: Script from https://raw.github.com/
wojodesign/simplecart-js/master/simpleCart.js was blocked due to mime type mismatch
This is likely due to the fact that raw.github provides a raw text file to your without telling you it is a js file.
Try setting the type="text/javascript" on the <script></script> tags to rectify
On a side note I am unsure if you are infact the owner of wojodesigns or not however it could be better to use a local version (local to your server) to ensure it not changed without you knowing (even more important if it anything to do with ecommerce).
Hope this helps

Categories

Resources