I have a WordPress site located at http://test.bcminiwarehouses.com
I am trying to add 2 attributes to the Make a Payment link in the menu so that it functions like clicking on the + on the top right.
When I inspect the element in Chrome and manually add the attributes, the link works as desired. However the jquery command appears not to be functioning to automatically add these attributes.
The code that can be viewed in the source code is:
$(".menu-item-6654").attr('data-target', '.x-widgetbar');
$(".menu-item-6654").attr('data-toggle', 'collapse');
Maybe there's a conflict between jQuery and Wordpress,try to do:
jQuery(document).ready(function($) {
$(".menu-item-6654").attr('data-target', '.x-widgetbar');
$(".menu-item-6654").attr('data-toggle', 'collapse');
});
put your code in
$(function() {
});
Related
I have created a Homepage using the shopping world and its element. Now I am trying to apply some jQuery codes on some elements, but it is not working. Could it be because the page is loading with AJAX?
My Custom Javascript is added to the theme so I can see it, but it's not having any effect on the page. How can I make it work?
I have created the js file in:
/src/js/myJsFile.js
And included this file in Theme.php of my active theme as follows:
protected $javascript = ['src/js/custom-scripts.js'];
Shopware actually has an event that is triggered when an emotion element (e.g. shopping world is shown):
$.subscribe('plugin/swEmotion/onShow', function () {
// your code goes here
});
Just Wrap Your JS Custom Code in the follow function it will work all fine for you.
jQuery (document) .ajaxComplete (function () { //you code here ... });
My jquery function works fine on local, but once I add it to my WP footer and upload, nothing.
There are a lot of scripts on this page, the but the script I'm trying to make work is this:
jQuery(document).ready(function($){
$("li.accordion").on('click',function() {
$('.mega-sub-menu', this).slideToggle("fast", function() {});
});
});
Jquery is loaded and working, but this script won't function.
Any ideas?
EDIT: Thanks, but it wasn't the stray '
I seemed to be having a cache issue on the site, which has been updated now. Still having the problem.
EDIT2: Removed a link
Your site has a syntax error on it. There is a quote at the end of your JavaScript which may well be causing it to not execute.
jQuery(document).ready(function(){
jquery("li.accordion").click(function() {
jquery('.mega-sub-menu', this).slideToggle("fast", function() {});
});
});' <--- quote here
Ok, you've fixed that now, and all the JavaScript is working, but I can see the next issue that prevents the menu from showing is a CSS rule with !important. (It's overriding the style="display:block" attribute on the mega-sub-menu that is added via JQuery).
So after doing a little more googling, I came up with this answer:
jQuery(function($){
$('li.accordion').click(function() {
$('.mega-sub-menu', this).slideToggle('fast', function() {});
}).click();
});
Here we simulate the click so that the accordion starts out closed and I don't need to add any more CSS to anything.
I added important to the CSS earlier to overcome the inline style — like an idiot, not realizing that the jquery was adding the inline style (I think that's what I did anyway, it was inappropriately late.)
I have a problem with the wordpress and with Jquery.
I have this code to show and hide a responsive navigation on the left :
$('.menu').on('click', function(){ if ($('.responsive__menu').hasClass('is-open')) {
$('.responsive__menu').removeClass('is-open');
$('.menu').removeClass('is-active');} else {
$('.responsive__menu').addClass('is-open');
$('.menu').addClass('is-active');}});
It works with my website without Wordpress, but once in Wordpress, it seems that half of the code works : the creation of the cross to close the menu except that the menu does not appear.
Can you enlighten me on some points?
The script is loaded, are there a faster and easier way to transform the code with jquery and toogle () ?
It can only be a trouble about code but why it does not work anymore once on Wordpress ?
Thanks a lot for your help, before asking the question I tried many things. ^^
If it works with any of your websites means the code is good, just you might have conflicts in your css, so include your css which is menu related last, and if it doesn't work either, post your css code, so we could see better what's going on, and there is not need for so much code. Initialize your menu without class .open , in your html and use JQUERY:
$('.menu').on('click', function(){
$(".responsive_menu).toggleClass('open');
});
jQuery comes with wordpress in non-conflict mode , to make sure everything works you should use jQuery variable instead of the $ variable.
you can alternatively do the following
jQuery(document).ready(function($) {
// $ variable can be used here
$('.menu').on('click', function() {
if ($('.responsive__menu').hasClass('is-open')) {
$('.respons__menu').removeClass('is-open');
$('.menu').removeClass('is-active');
} else {
$('.responsive__menu').addClass('is-open');
$('.menu').addClass('is-active');
}
});
});
I am trying to create a overlay dialog box using CSS . I wrote the css but I am not able to display the overlay dialog box. Any help would be greatly appreciated.
Check out my attempt here. Also this should work in IE9 and firefox.
http://jsfiddle.net/tGDKT
why not just use jQuery UI's dialog:
http://jsfiddle.net/maniator/tGDKT/15/
$(function() {
$('.clickme').click(function() {
$('iframe').dialog();
});
});
You could also attach the method in the javascript, unobtrusive style. Give the <a> an id or:
$('a').click(calculateEmbeddedWindowSize);
... would call the function for every link on the page.
I keep getting "calculateEmbeddedWindowSize is not defined" in the console. Your javascript does not seem to be there at all on the page.
Edit - Try this: http://jsfiddle.net/tGDKT/7/
I'm using the jQuery Masked Input Plugin from here: Digital Bush
I'm also using the jQuery FancyBox plugin.
As far as I can tell, they don't play nice together.
My masked inputs do not work if in the FancyBox, though they work outside (same id #phone). FancyBox displays fine.
The fancy box is on the page, display: none at page load....so I attempted to use the callbackOnShow setting, but id does not want to work.
JAVASCRIPT:The alert function won't fire
$(document).ready(function() {
loadScroll();
$("a.inline").fancybox({
'callbackOnShow' : function(){alert('shown');}
});
});
Found it, callbackOnShow should be onComplete.
$(document).ready(function() {
loadScroll();
$("a.inline").fancybox({
'onComplete' : function(){alert('shown');}
});
})
Found here: fanbcyBox/Blog