Using the "Header and Footer Scripts" Wordpress Plugin - javascript

So I'm working on a Wordpress site for a client, and he wants a div to be clickable. Elementor is making that a pain, so I'm trying to use Javascript to make that happen. The issue is I can't get the click event listener to work, and I can't figure out why. Code is posted. Here's the page I'm working on. The plugin that I'm using is Header and Footer Scripts.
The oddest thing to me is that alert functions still work, but nothing else.
<script type="text/javascript">
document.getElementById("academicsbox").addEventListener("click", function(){
window.location.href = "https://buildinguppeople.net/academics/";
});
</script>
I'm sure I'm overlooking something obvious, but I appreciate the help. Thanks!

Use window.open instead and make sure your academicsbox identifier is in the correct div.
document.getElementById("academicsbox").addEventListener("click", function(){
window.open('https://buildinguppeople.net/academics/', "_self");
console.log("working");
});
Working example: https://codepen.io/fraggley/pen/VwvXpQg

Related

JQuery code stops working after page loads when navigating indirectly

I'm facing the following issue:
All code works properly unless I navigate to a page by copy-pasting the url, clicking on the mouse scroll wheel etc. If I use the site menu to navigate to a page by left-clicking on it, it works fine.
So, when a page is loaded indirectly, some of my JQuery code stops working after the page has finished loading - so it actually works for a second or so, and then stops. If, e.g. a click on a button before the page has finished loading, the code will run. If I wait until the page has finished loading, it doesn't.
Also, this doesn't happen to all code, just parts of it. I've tried to figure out why some of it works, and it might be (or not) that the code that stops working is the one directly using methods from plugins I've included, which isn't inside a click event (or maybe inside another function?).
Example of working code:
$(".pr-gallery img").click(function(){
var gallery = $(this).attr("data-num");
$(gallery.toString()).magnificPopup('open');
});
Here, even though there is the magnificPopup method, it works fine.
Example of non-working code:
$('#ctr-fixed-menu').drawer({
align: 'right'
});
I load all code inside:
(function($) {
$(document).ready(function() {
...code...
});
})(jQuery);
and have also tried $(function(window), jQuery(window).load, as well as encasing all code inside a function like so:
jQuery(window).load(function(){
function TestCall() {
...all code here...
}
window.onload=TestCall;
});
})(jQuery)
none of which have worked. It might be something really simple but I've tried to solve it for a couple of weeks now and it's driving me crazy. Also, there are no error messages in the console.
Just to note that this is for a WordPress website, so I don't know whether there might be some type of conflict with the original theme code (lazy loading for example?).
Any help would be greatly appreciated.

Open a lightbox link with simple jQuery

I have read a lot of answers and different questions but I can't find a clear answer to my problem.
I have this link in my html dom:
Title
I have these two files in the head function:
<script src="script/js/jquery-1.11.0.min.js"></script>
<script src="script/js/lightbox.js"></script>
When the page is loaded it needs to open the link inside the lightbox and people should navigate in the lightbox through the image group that is defined with the data-lightbox.
I tried using this at the end of the body:
<script>
$(".logo").click();
</script>
</body>
But no result :(.
Nothing happens. Page loads but the auto click doesn't do anything.
I had it working but then Lightbox didn't open up. Instead the image of the link was loaded.
All other codes in jQuery work between the script tags.
Am I missing something here?
Please help or ask if things are not clear enough. I am a newbie here and try to play by the rules of the forum.
Thanks in advance!
There are a couple of problems. The link you posted has the class MyClass and you probably need a document ready handler -
<script>
$(document).ready(function() {
$('.MyClass').click();
});
</script>
Which lightbox are you using? There may be additional requirements that you need to implement.

JQuery remove link target attribute code not working

We have a WP site that uses a 3D Cart Plugin - when you click on "Add to Cart" it opens a new window. This is because *'target='_NEW''* is built into the plugin link code. See the following page and click on any Product Description or Add to Cart button.
http://tipsybir.nextmp.net/freestyle-hummingbird-feeders-375ml/
To override this, I use this code:
<script type="text/javascript">
jQuery(document).ready(function() {
$("a[target='_new']").removeAttr("target");
});
</script>
which I got from a previous question here. We have another WP site using the same plugin, and the above code works perfect, but it is not working on this site. It is the same exact code, placed in the header, but a new window is still opened.
Can anyone help on this? We do not want a new window to open.
You are probably not using jQuery noConflict, so use jQuery instead of $
jQuery(document).ready(function() {
jQuery("a[target='_new']").removeAttr("target");
});
It was indeed that I did not have the JQuery Library loaded.

jquery lightbox working on one page, but not another on same site

A programmer installed jquery lightbox and everything was working fine on
http://www.ozhiphopshop.com.au/sub_photos.php?id=11
I wanted to use the exact same effect for the one image on
http://www.ozhiphopshop.com.au/product_detail.php?pro_id=69
In the included header file I've changed the changed the following script (which is working fine on the first page):
<script type="text/javascript">
$(function() {
$('#gallery a').lightBox();
$('#gallery1 a').lightBox();
});
</script>
to:
<script type="text/javascript">
$(function() {
$('a.pro_img').lightbox();
});
</script>
but that doesn't seem to work. And the linked file is opening in a new window.
The div class for the file I want the lightbox to work with is 'pro_img' which is why I made the change the way I did.
I've made no changes to the css or the js files, which may be where I'm going wrong.
I'm not a programmer, so I've just been trying to reverse engineer what was done on the first page. I'm really interested in learning more about programming, hence the reason I'm doing it myself.
I've noticed the same question on here, but none of the answers seemed to relate to exactly what I'm dealing with.
Any help would be appreciated.
All the best,
Michael
change
$('a.pro_img').lightbox();
to
$('div.pro_img a').lightbox();

Running JQuery or Javascript on Facebook

I am trying to execute a simple bit of jQuery or JavaScript once logged in to my Facebook account. The end goal at this moment is to click on my custom feed once the element is visible, rather than having it default to the entire Facebook friend feed.
On trying to code this using my Developer's Console in Chrome no JavaScript/jQuery seems to work at all. Even just a simple $('div'); returns null. Is it possible to run code on Facebook's page? What are they doing differently?
I guess the end goal would be to click a div if the .val('give a waffle'); but just understanding why it has not worked until now would also be interesting.
Any hints, tips or suggestions are more than welcome.
Facebook doesn't use jQuery, if you want to play with their page using jQuery commands you'll need to load it. Just copy the contents of http://code.jquery.com/jquery-1.7.1.min.js and paste it into your console first. Then proceed as usual.
Additionally you could let Google host your jQuery :
<script type="text/javascript"
src="//code.jquery.com/jquery-2.2.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// This is more like it!
});
</script>
Many sites do this so the chances of your user already having the library cached is relatively high.

Categories

Resources