I've been building a little jQuery accordion this afternoon based off a codepen I found, it works fine unless I put it in Wordpress where i need it. I know it's probably something obvious but i've spent too many hours looking at it now and i feel like i'm going in circles.
Here's my wordpress code using some custom fields from ACF:
<aside class="accordion">
<div>
<span class="col-2 showitem"><?php the_field('show_date'); ?></span>
<span class="col-4 showitem"><?php the_title(); ?></span>
<span class="col-4 showitem"><?php the_field('show_city'); ?></span>
<span class="col-2 showitem">?php the_field('ticket_status'); ?></span>
</div>
<?php the_field('show_information'); ?>
</aside>
And my script on the page.php:
<script type="text/javascript">
var headers = ["H2"];
$(".accordion").click(function(e) {
var target = e.target,
name = target.nodeName.toUpperCase();
if ($.inArray(name, headers) > -1) {
var subItem = $(target).next();
//slideUp all elements (except target) at current depth or greater
var depth = $(subItem).parents().length;
var allAtDepth = $(".accordion p, .accordion div").filter(function() {
if ($(this).parents().length >= depth && this !== subItem.get(0)) {
return true;
}
});
$(allAtDepth).slideUp("fast");
//slideToggle target content
subItem.slideToggle("fast", function() {});
}
});
</script>
I should also mention I am using this Ajax Load More extension on the site and when i remove anything to do with that from the page and just keep things simple, it works. so i'm 99% sure it has to do with the interactivity of both things. But jQuery is not my bag so I'm hoping someone smarter than me know where i went wrong.
I also have the P as display:none; because otherwise it shows up all the time.
Thanks for looking at my question!
JD :)
p.s, the original codepen is here http://codepen.io/rbobrowski/pen/likvA/
Update:
I tried changing all $ to jQuery, then jquery. I also tried both of #jai's suggestions with no luck. I also tried the solution #freedomn-m linked to as well as checking and testing methods from multiple links in the search results with no luck.
In wordpress $ sign is not available, instead you could change it to jQuery or put the code in an IIFE and you need to put the event bindings in doc ready block:
(function($){ // get it with '$'
$(function(){ // <---doc ready block
// put all the code in here
});
})(jQuery); // <---pass jQuery here
Actually you need to put your code inside doc ready block but use jQuery as a wrapper and use $ in the args:
jQuery(function($){ // use jQuery and pass `$` for a reference to jQuery.
// code here.
});
You should either replace all $ by jQuery
or
jQuery(function($){
// do all code here
});
The accordion code was too convoluted for my purpose, I ended up stripping it way back and solved the jQuery issue with
jQuery(document).ready(function($) {
my code in here
});
Thanks everyone for trying to help, it's much appreciated.
Related
I was looking to find out what version of jquery do i used based on the following script that my friend wrote for me, unfortunately he is on holiday so I can't get in touch with him.
I have added the following code within my body tag and then calling it below that:
$(document).ready(function() {
$('.top_cols_hide_arrow').click(function() {
$('.finishing_top_cols_hide').toggle("top");
});
$('.top_cols_hide_arrow').click(function(){
$(this).toggleClass('active');
});
});
and the HTML part:
<div class="finishing_top_cols_hide_arrow_mn">
<span class="finishing_top_cols_hide_arrow">open</span>
</div>
I am trying to run this on my localhost but whenever I click the arrow nothing happens and then I realised that I dont really have a script source for this to function and I'm not sure what I need to link to, in order to get this to work.
If somebody could please advise.
You can use this:
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
The code that your friend wrote for you is simple so most of Jquery versions will support it.
Can someone explain to me what i am doing wrong in this code?
http://jsfiddle.net/14njfqef/
var isLoggedIn = function(state){
if(state == true) {
$("#content-container").show();
$("#account2").show();
$("#account").hide();
}
else(state == false){
$("#content-container").hide();
$("#account2").hide();
$("#account").show();
}
}
onload=function() {
isLoggedIn(false);
}
On load i want the divs to hide but then when i click the button i want the divs to show?
Is the boolean function set out in the correct way?
Piece below tries to re-arrange piece at OP. onload not appear clearly defined , not addressed , though could be attached to an event , i.e.g., window.onload = onload . Wrapped blocks in jquery .ready() event . Removed js onclick markup from html , included at script element , or loaded from file at jquery .on("click") event . Added strict comparison operator === (an added =) to if / else if statements. Changed input type to button. Added if to else portion of composition (see link posted at comments by Felix Kling).
Try
$(function() {
var isLoggedIn = function(state){
if(state === true) {
$("#content-container").show();
$("#account2").show();
$("#account").hide();
}
else if(state === false){
$("#content-container").hide();
$("#account2").hide();
$("#account").show();
}
};
isLoggedIn(false);
$("input[type=button]").click(function() {
isLoggedIn(true)
})
});
jsfiddle http://jsfiddle.net/guest271314/14njfqef/3/
changed your html to
<input type="submit" value="Boolean" id="toggle"/>
rewrote your js as
// JQuery run at start effectivly
$(document).ready(function() {
function isLoggedIn(state) {
if(state == true) {
$("#content-container").show();
$("#account2").show();
$("#account").hide();
}
else {
$("#content-container").hide();
$("#account2").hide();
$("#account").show();
}
}
// JQuery attaching a click event using an anonymous function
// and hard coding your isLoggedIn to true, passing variables is a bit more complicated.
$('#toggle').click(function() {isLoggedIn(true)});
isLoggedIn(false);
})
Well there's a few things I am not sure if you are aware of so I feel there's some responsibility on my end to make sure they are mentioned. They are a number of syntactical errors in your post that are stopping this from working so instead of addressing them I feel its necessary to update your view on what JQuery you are using as well as your selector choice.
First I would add a class structure to all of the div's to target them all at once so you can save on some lines of code. In production it's always better to have less code for all of your visitors to download because even a little bit of code can get out of control after enough hits on a webpage. Having to serve it kills speed and so does having to process three separate jquery selections as opposed to one.
I would change the HTML to...
<body>
<div id='content-container' class='boxes'>
Content Container
</div>
<div id='account' class='boxes'>
account
</div>
<div id='account2' class='boxes'>
account2
</div>
<input id="validateButton" type="submit" value="Boolean">
</body>
This way you can simply target all divs with $(".boxes"); ... I wouldn't recommend getting into the habbit of using $("div");
Next I would change the JQuery to being more JQuery friendly code. Its not always useful to use an onload event from pure Javascript to handle JQuery driven functions in correct time to the loading of DOM objects. Therefore you should use $( document ).ready( handler ) to handle this load event properly just in case it causes you problems down the road. The more common shorthand of this ready event is a simple $(function() { }); wrapper.
The rest of the code can be re-arranged to this....
var isLoggedIn = false; //<--Instantiate to false, make global to window level scope
//Load event Corrected For JQuery
$(function() {
$(".boxes").hide(); //<--Hide on load
//Add A Proper Updated Click Event To Button
$("#validateButton").click(function() {
isLoggedIn = true; //<--Should include real functionality not hand coded to true
checkLoginAndRespond(); //<--Validate Login Status
});
});
function checkLoginAndRespond() {
//If Logged, Show
if(isLoggedIn) {
$(".boxes").show();
//Else Don't
} else { $(".boxes").hide(); }
} //end function
Lastly, the version. New versions of JQuery have not been released for some time and seem to not be in the making so its a safe bet to use their most recent versions as it has thousands of pages of help for its syntax and it's very stable. I would recommend anything in the 2.0 or higher series JQuery.
I am assuming you have JQuery library loaded. Try
if (state) {
$("#content-container").show();
$("#account2").show();
$("#account").hide();
}
else{
$("#content-container").hide();
$("#account2").hide();
$("#account").show();
}
to solve your problem.
If you look at my website link to website, you will find an ID for the content (#content) and one for the sidebar (#sidebar).
(It's located in "#wrapper > #main > .avada-row > #content/#sidebar")
I have tried to switch order/place so #sidebar comes before #content. I tried with this code:
<script type="text/javascript">//<![CDATA[
$(function(){
$('#sidebar').each(function () {
$(this).insertBefore($(this).prev('#content'));
});
});//]]>
</script>
Here is a JSFiddle example (it works in JSFiddle but not on my website):
JSFiddle
I really hope someone can help me!
NOTE!:
This line of javascript works too in JSFiddle but not on my website:
$('#sidebar').insertBefore($('#content'));
I guess there is no need to use each function?
And sorry - I forgot to say that I know nothing about javascript programming. I just try my best with no luck I guess :/
Best Regards
I can't comment my own question, so I will do it here:
Karl-André - Yeah, I am aware of the error "Uncaught TypeError: undefined is not a function" but i don't know how to fix it.
Arjun - I tried that too but $ is being overriding and therefore is does not work :/
Zessx - Can you help me find out what is overriding $ ?
The code:
jQuery('#sidebar').each(function () {
jQuery(this).insertBefore(jQuery(this).prev('#content'));
});
Did not work when I insert it in head.
Thank you so much! I really appreciate it !!!!!!!!!!!!
Something is overriding the jQuery $ :
> $
undefined
> jQuery
function (a,b){return new n.fn.init(a,b)}
If you change your script by this one, you'll see it works :
jQuery('#sidebar').each(function () {
jQuery(this).insertBefore(jQuery(this).prev('#content'));
});
Now, we need to define what is overriding $.
As a workaround, you still can use this code in your <head>, as mentioned in jQuery doc (search for "Aliasing the jQuery namespace") :
jQuery(function($) {
$('#sidebar').each(function () {
$(this).insertBefore($(this).prev('#content'));
});
});
if you just want to add the content above the selected div just use
$('#sidebar').insertBefore('#content');
-Thanks.
I am trying to implement http://jsfiddle.net/NKgG9/6/ into my website.
It's supposed to fade out a div when the user starts scrolling down. Instead the div just sits there, comlpetely visible and unchanging. I'm a massive newbie to java so figure it's something really basic and fundamental I'm missing.
Here's what I'm doing:
Inside the head tag:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
var targets = $(".scroll_note, .social");
if($(window).scrollTop() > 10){
targets.hide();
}
$(window).scroll(function(){
var pos = $(window).scrollTop();
if(pos > 10){
targets.stop(true, true).fadeOut("fast" );
} else {
targets.stop(true, true).fadeIn("fast");
}
});
});?
</script>
And then inside the body tag:
<div class="scroll_note">Scroll down to see our amazing specials!</div>
Please help me!
Thanks, Alex :)
The other script you include, fadeslideshow.js, calls jQuery.noConflict which removes the global assignment of jQuery to the $ variable. You have a few ways around this:
Remove the call to jQuery.noConflict in fadeslideshow.js. This may break that slideshow script, however.
Use jQuery instead of $ in your JavaScript code above.
Wrap your code in a self-invoking function that remaps the global jQuery to $:
(function($) { /* your code here */ })(jQuery);
You have a ? at the end of your code that is going to throw an error and kill the script. Remove it and you should be all set.
Edit:
I see you posted your site. Your script tag pointing to the google API is malformed. It doesn't start with http:, just starts with //. Fix that, then see where you are
Edit2: Wyatt pointed out this is not true. See his answer.
Note: This question was marked as solved once, but it figured out that upgrading to the latest jQuery was fixed only one issue. Please see the updated question below for the remaining issue.
Hi all,
I have just run into a weird issue with jQuery.Tipsy.
Here's a simplified demo fiddle: http://jsfiddle.net/6nWtx/7/
As you can see, the lastly added a.tipsy2 element does not get tipsyfied. The .tipsy2 elements are being tipsyfied within a jQuery.each() function and at this point I have the problem. Without the each() it works. Unfortunately, I need .each() to iterate through the elements to do some other stuff before I call tipsy().
Any suggestion?
Here's the source code of Tipsy: https://github.com/jaz303/tipsy/blob/master/src/javascripts/jquery.tipsy.js
IMHO the problem is using the combination of jQuery.each() and Tipsy option live:true
Update:
The other stuff I want to do before calling .tipsy() is checking for some optional configuration.
For example: Help"
In this example I will add the following option to Tipsy: delayIn:1000 If there is no delayed class associated to the element this parameter will be delayIn:0.
Using the same logic, I want to specify the following classes as well: show-top, show-left, show-right, show-bottom for the Tipsy option called gravity.
Example: Help"
The full code:
$(".tipsyfy").each(function () {
var a = "s",
b = 0;
if ($(this).hasClass("show-left")) a = "w";
else if ($(this).hasClass("show-down")) a = "n";
else if ($(this).hasClass("show-right")) a = "e";
if ($(this).hasClass("delayed") && $(this).attr("data-delayIn") != null) b = $(this).attr("data-delayIn");
$(this).tipsy({
gravity: a,
fade: true,
live: true,
delayIn: b
})
})
And here is a full jsFiddle demo with all the stuffs I want to do: http://jsfiddle.net/xmLBG/1/
If you use jQuery 1.7.1 instead of 1.6.4 it will work. Maybe that live feature is relying on something buggy with the older versions, or some not-yet-implemented feature.
Update: from what I understood, you want the tipsy plugin to be called to every element with the .tipsyfy class, present now or added in the future. You don't want to (or can't) call it explicitly before insertion. You're trying to accomplish that using the live option of the plugin. Is that right?
If that's the case I can offer a workaround. I tried to use on (since jQuery's live is deprecated) to bind some code to the load event, but it didn't work, so I bound it to mouseenter and checked whether or not the plugin was already built for that element. If not, it builds it and re-triggers the event.
$(document).on("mouseenter", ".tipsyfy", function(e) {
if ( !$(this).data("tipsy") ) {
e.preventDefault();
var a = "s",
b = 0;
if ($(this).hasClass("show-left")) a = "e";
else if ($(this).hasClass("show-down")) a = "n";
else if ($(this).hasClass("show-right")) a = "w";
if ($(this).hasClass("delayed") && $(this).attr("data-delayIn") != null) b = $(this).attr("data-delayIn");
$(this).tipsy({
gravity: a,
fade: true,
live: true,
delayIn: b
}).trigger("mouseenter");
return false;
}
});
Live example at jsFiddle.
For a small optimization, if the sole purpose of the .tispsyfy class is to instruct the plugin creation, and you don't need it afterwards, you can remove it prior to re-triggering the mouseenter. This way the checking code won't be called over and over again:
$(this).tipsy({...}).removeClass("tipsyfy").trigger("mouseenter");
As far as I can see, you don't need to iterate the nodelist. It looks like tipsy does that for you (see this jsfiddle, where in the first list every element gets its own tooltip (1,2,3).
KooiInc is right,
<a class="tipsy1" href="#" title="Tipsy">TipsyLink</a>
<a class="tipsy1" href="#" title="Tipsy">TipsyLink</a>
<a class="tipsy1" href="#" title="Tipsy">TipsyLink</a>
<br />
<div id="container"></div>
<input id="add" type="button" value="ok">
And
$(".tipsy1").tipsy({live:true,fade:true});
$(".tipsy2").tipsy({live:true});
$("#add").click(function() {
$("#container").append('<a class="tipsy2" href="#" title="Tipsy">TipsyLink</a>');
});
That will work fine
My guess is that Tipsy are uses some kind of direct mapping to the result, not using the live (in 1.6) or on in newer versions of jQuery.
So when your trying to apply the plugin to the links with the class tipsy2 it cant find any (cause your adding it to the DOM at a later stage in your code). The easiest fix to this is just to run the tipsy function at a later stage, perhaps on document.ready.
// this works
$(".tipsy1").tipsy({live:true,fade:true});
// add new tipsy element (ok)
$(document.body).append('<a class="tipsy1" href="#" title="TipsyAjax">AjaxTipsy1</a><br/>');
// add new tipsy element (not ok)
$(document.body).append('<a class="tipsy2" href="#" title="Tipsy">TipsyLink</a>');
$(document).ready(function () {
$(".tipsy2").each(function(){
// I'm doing some other logic here before I call .tipsy()
$(this).tipsy({live:true,fade:true});
})
});
(http://jsfiddle.net/8dg6S/7/)
Can't you do this instead? It is what you are asking.
$(".tipsy1,.tipsy2").tipsy({live:true,fade:true});
$(".tipsy2").each(function() {
//do your stuff
});