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.
Related
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.
I've been trying to create a set of tabs in Magento using the following plugin:
http://os.alfajango.com/easytabs/
After setting it all up, adding the HTML, CSS & javascript the tabs seem to not work correctly instead they sort of act like anchor points on the page.
I've added this to the header of the site:
<script type="text/javascript" src="/javascripts/jquery.hashchange.min.js"></script>
<script type="text/javascript" src="/javascripts/jquery.easytabs.min.js"></script>
And I believe all the files are in the correct place / linked to in the right way.
The jQuery isn't in the above because when I added it to the header there were loads of conflicts as I believe Magento already includes the jQuery library.
Here's an example of the tab so far:
http://bit.ly/1hT1Xa0
Thanks for any help :)
You have to invoke easytabs by adding
$('#tab-container').easytabs();
// try with no conflict if not working
jQuery.noConflict();
jQuery('#tab-container').easytabs();
see more details tab at demo site.
I'm still learning jQuery (1.6 min) and Javascript, but have been quite pleased with what I have been able to achieve, so far, but this problem has me fooled - i've been looking at it for four hours!
I have the following link on a page contained within a (for which the id value is 'NorthWest'):-
<figure><img src="http://localhost:8888/98394.jpg" alt="" border="0"></figure>
which when clicked on, correctly loads content in to a makes the visible. It does not reload the page, simply makes the DIV visible on top of the current content. The Javascript for doing this uses standard jQuery Fancybox.
All works fine, the DIV can be shown and hidden several times, loading different information on each occasion. Now there is a IMG button which allows the user to reload the 'NorthWest' DIV with the latest content - when clicked it executes this code:
$(".RefreshThumb").find("a").click(function(){
$(".RefreshLoader").show();
$("#NorthWest").load("/refreshdata");
setTimeout(RefreshHide,1000);
});
The setTimeout line refers to a small graphic (refreshloader) which is momentarily displayed to advise the user that a refresh of the data is taking place.
Now, take out the $("#NorthWest").load etc.. line and all works fine. Add that line back in, and the popUpSimple link works fine until the IMG button is clicked to refresh the NorthWest DIV, after which the popUpSimple content is loaded as a new page and no longer overlaid - before clicking that the popup overlay works fine no matter how many times you click it.
EDIT: I should point out that after clicking on the IMG button to reload the NorthWest DIV it does so successfully, its only when you then click the popUpSimple link that things go wrong!
What have I done wrong? I'm using Safari and a look at the Web Inspector window after the page has been reloaded rather than loaded into the DIV shows:
<script type="text/javascript">
$(document).ready(function() {
With a message saying Reference Error: Can't find variable $.
Can anyone point me in the right direction .... please!
It sounds like an eventlistener issue, Try using .on('click',function(){} instead of .click(function(){}
Maybe the jquery '$' is being overridden by another JS framework.
Just replace your '$' with 'jQuery' without the single quotes of course.
You may even try using http://api.jquery.com/jQuery.noConflict/
you can add this right after you load the jQuery library for example:
<script type="text/javascript" src="other_lib.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$.noConflict();
// Code that uses other library's $ can follow here.
</script>
I'm trying to make a mobile version of a web page. My problem is that I have to manipulate a accordion menu to use jQuery mobile linked list. To do this I manipulate the menu with jQuery ex:
$(document).ready(function() {
$('#globalMenu').attr("data-role", "listview");
.. .. . . ..
});
It works great if I load the page first time, but when I navigate in the jQuery mobile list and push one of the link the script do not run, but if I refresh the page (f5) it works! I've read that I have to use init instead of document ready but I can't manage it to work.
Please write some examples.
jQueryMobile event page
Supposing your page div is like this:
<div id="my-page" data-role="page">
Try with:
$('#my-page').live('pageinit', function(event){
$('#globalMenu').attr("data-role", "listview");
});
How can I add
<a href="javascript:function foo(){alert('hi');}" title="alert">
Drag to your bookmarks bar
</a>
to my WordPress post?
I built a bookmarklet and I want to pass it through my blog, but WordPress is stripping out the javascript from my post when I save it.
Javascript in WordPress Single Pages and Posts
<script type="text/javascript">
<!--
// your code
//--></script>
Source:
https://codex.wordpress.org/Using_Javascript
I have no issues embedding that code in the HTML editor on my wordpress site. There is a problem with your javascript code- that defines a function, but never calls it. I have
Drag to your bookmarks bar
in a post, and I get the alert when click, as well as the bookmarklet.
The issue is likely to be caused at the browser end. Chrome's XSS was the problem for me and I solved it by adding the line header ("X-XSS-Protection: 0"); to wp-blog-header.php in the root folder of my installation. This may not be ideal as it applies across the whole site. It would probably be better to add it where it would only apply to the post/page which needs to render the bookmarklet.
This is old, but still relevant with Version 4.9.5 for wordpress, so I answer with my solution for this:
Wordpress filters out any Javascript you use in your Posts or pages, that is why your code gets lost. I did the following steps to add a "javascript:" Link:
Add the Link you want to your post, use "#" as the href and add a id to the tag (in Text-Mode of the Editor):
This is my JS Link
Install a Custom Javascript Plugin. I used Simple Custom CSS and JS
Add the Javascript you want with help from the plugin:
jQuery(document).ready(function( $ ){
function yourFunction() {
alert("It works");
}
jQuery('#idOfYourLink').on("click", yourFunction);
});
The important part is adding the on-Handler to the Link you want to use. Now the Javascript is loaded right after the page got loaded. And a click on the link will call the function yourFunction
I guess that wordpress editor is used to work with textual data/content. So, to add your js you can find plugin for adding custom js. Also you can add a Custom field to the posts.
Let it be "custom_js" - the name of a field that would contain js code. And then edit theme post temlate, adding "echo" of custom_js.
<?php
//single.php
echo get_post_meta( get_the_ID(), 'custom_js');
?>