I've been pulling my hair out trying to get a facebook pixel firing from a Divi theme button on wordpress at https://www.hannahhumphries.com
I've followed the steps outlined on https://stonypeaksdigital.com/triggering_facebook_pixel_events_inline_action/ and set everything up as outlined within that tutorial but when I load pixel helper I still get a ! error (see screenshot)
I'm hoping this is just because it's hidden behind an onclick and that someone can verify that it's actually working for me as the client thinks it's still not functional.
If it isn't working any help would be appreciated, I am 'new' to facebook pixels so just worried I'm overlooking something...
I've pasted the code below and it's hooked into the button which has the id 'fb_pixel_initiatecheckout'
<script>
jQuery(function ($) {
$(document).ready(function() {
$(".fb_pixel_initiatecheckout").click(function(){
fbq('track', 'InitiateCheckout');
});
});
});
</script>
Related
Using LinkedIn's site that creates the scripts for plugins, I created the plugin with the following script:
<script src="https://platform.linkedin.com/in.js" type="text/javascript"> lang: en_US</script>
<script type="IN/FollowCompany" data-id="2922419" data-counter="top"></script>
I tried different things; with the https, without it (as they posted), but whenever I click on the button, it just opens up a blank window. What am I doing wrong?
it is not a big issue if LinkedIn Script is not working fine then just add your own onclick redirect url.i-e onclick="window.open('https://www.linkedin.com/company/{companyID}/');" and then add style="pointer-events:none;" css to its child(i.e LinkedIN scripts) to make its default behavior overridden.
Have you tried including the URL with your button? E.g:
<script type="IN/FollowCompany" data-id="2922419" data-counter="top" data-url="www.yourdomain.com/path/to/your/page"></script>
Replace the link with the page you want to share.
On my website (which is under construction) I'm using "Before-After MultiX Slider". It's working fine, but I'm trying to have all the separators "collapsed" on the right (or left).
For example here
I've tried to use css to change width of some classes as follows:
.wmg-image.wmg-image-3.first.ui-resizable {
width: 91.6379%!important;
}
.wmg-image.wmg-image-2.ui-resizable {
width: 95%!important;
}
.wmg-image.wmg-image-1.ui-resizable {
width: 98.3621%!important;
}
If I don't use !important nothing happens. If I use it, I get what I want
but the slider stops working and the images don't resize by scrolling separators.
Any idea on how to achieve this?
I can't find any failure there and digged a little deeper into the problem... Therefore I post a second answer, because the nature of the problem is somehow different after all, the code is working but not as expected for the following reason:
If you load scripts async the page will continue to render while the scripts are still loading, so it is possible that other none async scripts comming afterwards will start to load earlier than some async ones still in query...
Here we don't have async ones, BUT it seems to be like even if the async keyword is not present though the scripts will come in the query one after an other depending on their order nevertheless the server will load round about 3 or 4 scripts parallel!
-> So it happens that shorter scripts may be finished to load before longer ones allthough they've started to load later...
On my research I could not find a definite solution for that problem, because it simply seems to be quite hard to control that loading process in detail! (You i.e. can find some topics about that phenomena here on the board...)
I will present some different approaches, you will have to test them yourself, because I don't have that slider PlugIn so I could try:
Solution 1:
Try to use the "defer" keyword, this should be so to say the opposite of "async" and cause scripts to be not loaded before the page is parsed completly, but sadly I'm not sure if that works, never used it before and it sounds like it is the same as using "document.ready" which is not working in this case...
Important thing is that you must insert the script externally otherwise the keyword won't do anything, i.e:
<script src="demo_defer.js" defer></script>
Solution 2:
A surely working solution would be to add our script as a callback to the call of the slider script, but I guess that this is no suitable solution here because you'll have to change the PlugIn code which is not update safe!
Solution 3:
Maybe you can play with a timeout to make sure that the execution will start later, but the problem is that you cannot really know how long this timeout must be! (i.e. have a look here: https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout)
WORKAROUND:
I thought up a way to get around that problem, but as said before the code is untested, maybe try that and give me a notice when you have included this script, so I can have a look how it works...
In this way it is supposed that a class which does the positioning with the !important-statement is added and then removed on the first click, just then the elements are positioned again without !important and of course after that on every further click the positioning won't be manipulated again!
function sr_custom_width_for_slides()
{ ?>
<style type="text/css">
.notClicked .wmg-image.wmg-image-3.first.ui-resizable {
width: 91.6379% !important;
}
.notClicked .wmg-image.wmg-image-2 {
width: 95% !important;
}
.notClicked .wmg-image.wmg-image-3 {
width: 98.3621% !important;
}
</style>
<script type="text/javascript">
jQuery( document ).ready(function() {
var firstClicked = false;
jQuery(".wmg-before-after").addClass("notClicked");
jQuery(".wmg-before-after").click(function() {
if ( !firstClicked ) {
jQuery(".wmg-image.wmg-image-3.first.ui-resizable").css("width","91.6379%");
jQuery(".wmg-image.wmg-image-2.ui-resizable").css("width","95%");
jQuery(".wmg-image.wmg-image-1.ui-resizable").css("width","98.3621%");
jQuery(".wmg-before-after").removeClass("notClicked");
firstClicked = true;
}
});
});
</script>
<?php }
add_action( 'wp_footer', 'sr_custom_width_for_slides', 1000 );
EDIT REGARDING YOUR LAST COMMENT:
I checked the site again and in my case it sadly does not work at all, because the click event is never fired! I guess that the JS code of the PlugIn binds some events which maybe stop our script from working... (See the function "stopPropagation()" for more infos.) So my final clue is to simply bind another event which hopefully is not manipulated by the PlugIN in that way! As far as I can see this could be "mouseenter" or "mouseover"...
So just change
jQuery(".wmg-before-after").click(function() {
...
});
to
jQuery(".wmg-before-after").mouseover(function() {
...
});
the problem is quite simple... The width is set inline via js, so this will override any changes you made in your css file!
If you set the styles with an !important-statement it will work, but the sliders script cannot set the new width anymore...
So after all the most easy way to achieve what you want is to insert a small script which sets the styles AFTER the slider scripts have been loaded, so maybe at the very bottom of the footer of the page after the "wp_footer" call, because most plug ins enter their js over this hook, somehow like this:
<script>
jQuery(function() {
jQuery(".wmg-image.wmg-image-3.first.ui-resizable").css("width","91.6379%");
jQuery(".wmg-image.wmg-image-2.ui-resizable").css("width","95%");
jQuery(".wmg-image.wmg-image-1.ui-resizable").css("width","98.3621%");
});
</script>
I can't test it, but I'm quite sure that this will work, if the script is inserted at the correct position! :)
EDIT: I made a quick test via the console of the FF inspector and it works as expected, but as mentioned above, if the slider script will load later than this script it won't work at all!
Grateful for your help.
I'm experience a conflict (for lack of a better word) between nivo Slider and Camera slide show. (nivo Slider is native to the wordpress theme we use--and is our main navigational feature on the sites landing page. Camera is of course a plugin and gets inserted via shortcode [camera slideshow="my-slideshow"])
This thread seems to have a promising answer. But I'm novice enough to be at a loss as to where to place this script--or if the script is the right solution.
The script:
<script type="text/javascript">
var j = jQuery.noConflict();
j(window).load(function() {
j('#slider').nivoSlider({
Again, grateful for your help.
Check the js console in browser for errors or add a link to your site.
Possible reason: doubled call for jQuery. You may check in page source for (or similar)
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
I'm using the new Mediaelement.js in the WP 3.6.1 core to embed H.264 video.
Now I'd like to add a redirect after the video has played.
I know there's this option (EventListener "played") in Mediaelement but don't know how to apply it.
I've done some research about the de-registration and re-registration of the .js-File but am stuck at this point.
Maybe someone can help me?
Thanks!
We did have the same problem. On our case the video started automatically. So we knew when the video ended. We therefore went over to do it like this:
<script type="text/javascript">
$( window ).load(function() {
window.setTimeout(function() {window.location = "/about-us";}, 6000);
});
</script>
In our case the video was 6 seconds long. Afterwards we redirect to /about-us. Maybe this solution would work in your case too. Even thou it is not the exact answer to your question.
Out of no where, the navigation on site down started acting crazy when viewed in Internet Explorer while not logged in. However, when you log in... everything works perfectly...
I know it must be a stylesheet ordering issue, but I'm not having any luck finding a fix.
You can log in here with the username: bobo and password: bobo to see what I'm talking about.
Thanks in advance for taking a look
--
EDIT
this is the jQuery for the nav:
<script type='text/javascript'>
jQuery(document).ready(function ($) {
$('#access li').each(function(){
$(this).hover(function(){
$('> ul',this).show();
}, function(){
$('> ul',this).hide();
});
});
});
</script>
Figured it out!
I guess wordpress caught a bug when adding a new page to the menu, because after combing through the source code, I noticed one of the links closing li tag was out of place.
Removed that link from the nav. BAM! working perfectly now...
Hope this is able to help someone like me who feels that wordpress is out to get them.