have a small problem in my function below .
i constantly getting this error : Uncaught ReferenceError: t is not defined .
trying to add this piece of code in my project that is related to wordpress menu.
here it is
t(function() {
var e = t("#categories_navigation"),
i = "click" == e.data("action") ? "click" : "mouseenter mouseleave",
a = t("#categories_navigation_toggle");
"click" == i && e.find("> ul > li:first-child").addClass("active"), a.on(i, function(a) {
"click" == i && a.preventDefault(), t(this).toggleClass("opened"), e.toggleClass("opened")
}), "click" == i && t(document).mouseup(function(t) {
a.is(t.target) || e.is(t.target) || 0 !== e.has(t.target).length || !e.hasClass("opened") || (e.removeClass("opened"), a.removeClass("opened"))
}), e.find(" > ul > li > a").on(i, function(a) {
"click" == i && a.preventDefault();
var n = t(this).parent(),
s = n.find(" > ul");
t(" > ul > li > ul", e).css({
visibility: "hidden",
opacity: "0"
}), s.css({
visibility: "visible",
opacity: "1"
}), "click" == i && (t(" > ul > li", e).removeClass("active"), n.addClass("active"))
});
});
and this is my html codes
<div class="top-nav col">
<?php _e(' Categories Menu '); ?>
<nav class="categories-menu-navigation" id="categories_navigation" data-action="click" role="navigation">
<ul></ul>
</nav>
</div>
i should add that jquery file is attached to the page above all other js files .
thanks in advance .
Based on the functions that you are calling with t I would guess that you are copy-pasting code from somewhere else. In the snippet you gave us, you are referencing a variable called t. The error message you are getting is because in your code you did not define what t is.
From looking at what you posted, my best guess is that t is supposed to be the jQuery variable, but that's traditionally this symbol: $.
There is another issue as well. The code after a = t("#categories_navigation_toggle"); seems to be related to operating a menu like you said, but the syntax is quite wrong for a number of reasons. I think it'd be easier to help you phrase your question better than to try and fix your code without any additional context.
Improving your question
If you did copy-paste code from somewhere, could you link to it so we can see the whole thing? I don't think you have the entire snippet posted in your question.
Also, please explain what you are trying to do with this code. Giving us details about what you're trying to do will be more helpful to us than just saying it doesn't work :)
Related
I read Jquery: How to check if the element has certain css class/style and have got this working -
if ($(".box").css('display') == 'block')
{
console.log("message 2 - Div with box class exists and css Block exists")
}
I read how to create jquery slide left and right toggle and got this working -
$(".box").animate({width: "toggle"});
I can't seem to combine the two above together though. These two attempts failed -
// ($(".box").css('display') == 'block').animate({width: "toggle"});
// ($(".box").css('display') == 'block').animate({width: "toggle"});
var datebox = ($(".box").css('display') == 'block')
datebox.animate({width: "toggle"})
datebox.animate({width: "toggle"})
Update 1
I tried Cucunber's suggestion and got this error -
Uncaught TypeError: ".box".each is not a function
Update 2
I solved the problem highlighted in Update 1 by adding $ to ('.box'), Cucunber updated his answer below based on the issue I faced.
Update 3
I tinkered with Cucunber's solution and eventually solved my problem with this code.
$(".box" ).each(function( index ) {
if ($(this).css('display') == 'block' ) {
console.log( index + ": " + $( this ) );
}
})
The sentence '$('.box').css('display') == 'block' returns boolean statement. If you know, .animate method should be used with the html element (selector). Try to use something like this:
'$('.box').css('display') == 'block' && $('.box').animate({width: 'toggle'})
combine it with '.each()' and the final result will be:
$('.box').each(function(){ $(this).css('display') == 'block' && $(this).animate({width: 'toggle'}) })
I am stuck with node-html-parser (https://www.npmjs.com/package/node-html-parser). I read HTML into local variable and I am trying to get to the following node (JS path that is copied from Chrome):
#container > section > div > div.profile__main > div.item.item__profile > div.item__profile__info.cf > div.item__profile__info__data > p
Unfortuantely I get stuck at div.profile__main .
(profile__main is a class within div and the tag looks like <div class="profile__main" ...></div>
How do I query for this stuff. So far I got only here:
var root = this.HTMLParser.parse(this.data)
root.querySelectorAll("#container")
.querySelectorAll("section")
.querySelectorAll("div")
.querySelector("div.profile__main") // Cant get this one. returns null
Thanks
const root = this.HTMLParser.parse(this.data)
const itemProfileInfoData = root.getElementsByTagName("div").find(div => div.attributes.class === "item__profile__info__data")
itemProfileInfoData.childNodes.filter(child => child.tagName === "p")
Did you try something like
var root = this.HTMLParser.parse(this.data)
root.querySelectorAll(".item__profile__info__data")
.querySelectorAll("p")
Maybe last element, tag <p>, is loading async.
Please, check the "view source" of site that you parsing.
In my Wordpress theme, I have a Theme Options page which is using jQuery UI tabs.
These tabs perfectly works in Wordpress versions below 4.4. But they don't seem to work in the versions later than 4.4
It just don't give any error or anything. The other jQuery functions (such as jQuery color-picker, slider..etc.) in the options page are working fine. It's just the tabs which are broken.
In the console I get this message
Uncaught Error: jQuery UI Tabs: Mismatching fragment identifier.
It's from the jQuery.js file which is included in wp-include/js/jQuery folder
This is my code...
<div class="ui-tabs">
<ul class="ui-tabs-nav">
foreach ( $this->sections as $section_slug => $section )
echo '<li>' . $section . '</li>';
</ul>
</div>
<script type="text/javascript">
jQuery(document).ready(function(jQuery) {
var sections = [];';
foreach ( $this->sections as $section_slug => $section )
echo "sections['$section'] = '$section_slug';";
echo 'var wrapped = jQuery(".wrap h3").wrap("<div class=\"ui-tabs-panel\">");
wrapped.each(function() {
jQuery(this).parent().append(jQuery(this).parent().nextUntil("div.ui-tabs-panel"));
});
jQuery(".ui-tabs-panel").each(function(index) {
jQuery(this).attr("id", sections[jQuery(this).children("h3").text()]);
if (index > 0)
jQuery(this).addClass("ui-tabs-hide");
});
jQuery(".ui-tabs").tabs({
fx: { opacity: "toggle", duration: "fast" }
});
jQuery("input[type=text], textarea").each(function() {
if (jQuery(this).val() == jQuery(this).attr("placeholder") || jQuery(this).val() == "")
jQuery(this).css("color", "#999");
});
jQuery("input[type=text], textarea").focus(function() {
if (jQuery(this).val() == jQuery(this).attr("placeholder") || jQuery(this).val() == "") {
jQuery(this).val("");
jQuery(this).css("color", "#000");
}
}).blur(function() {
if (jQuery(this).val() == "" || jQuery(this).val() == jQuery(this).attr("placeholder")) {
jQuery(this).val(jQuery(this).attr("placeholder"));
jQuery(this).css("color", "#999");
}
});
jQuery(".wrap h3, .wrap table").show();
// This will make the "warning" checkbox class really stand out when checked.
// I use it here for the Reset checkbox.
jQuery(".warning").change(function() {
if (jQuery(this).is(":checked"))
jQuery(this).parent().css("background", "#c00").css("color", "#fff").css("fontWeight", "bold");
else
jQuery(this).parent().css("background", "none").css("color", "inherit").css("fontWeight", "normal");
});
// Browser compatibility
if (jQuery.browser.mozilla)
jQuery("form").attr("autocomplete", "off");
});
</script>
What's the reason for this odd behavior ? Is it something in my code ? But it works fine in older versions of WP. Any clue ?
Finally I figured the answer for my own question...
Actually, this error was because of WP's some core changes in the backend interface. They've changed the Backend headings structure So, your <h3> tag in WordPress 4.3, is no longer <h3> anymore in 4.4 and higher.
So, in the custom options page, in WP 4.3, the titles were rendered as <h2> tags. And, that titles were binded to my javascript code as .h2. So, that's where the error occurred.
That small error caused the entire JavaScript block to malfunction. So, jQuery tabs didn't work.
You can explore this with inspector. See the image below.
As you can see the Titles in Wordpress 4.3 were rendered as <h3> but in Wordpress 4.4, they're <h2>
So, what I did was just adjusting my JavaScript code to bind the Title as both .h2 and .h3
From this...
jQuery(this).children("h2").text();
To like this...
jQuery(this).children("h2, h3").text();
This did work for me. Your code may be different than mine. But, the cause for the problem can be it...
Hope this helps!
I'm using Bootstrap 3 on Wordpress, and trying to squeeze in an extra dropdown level. I think I read that it only supports two levels by default. I have it working on the desktop and on IOS devices, but on Android devices you can't get to the last drop down items because it opens their parent page instead.
This is the site...
http://cslc2012.ca/
I've tried using something like this, but I don't really know javascript that well:
<script>
$('.navbar-nav .open .dropdown-menu > li > a').click(function(e) {
e.preventDefault();
window.location.href = $(this).attr('href');
})
</script>
I'm using the bootstrap navwalker for wordpress: https://github.com/twittem/wp-bootstrap-navwalker/blob/master/wp_bootstrap_navwalker.php
in the navwalker, it says:
// If item has_children add atts to a.
if ( $args->has_children && $depth === 0 ) {
$atts['href'] = '#';
$atts['data-toggle'] = 'dropdown';
$atts['class'] = 'dropdown-toggle';
$atts['aria-haspopup'] = 'true';
} else {
$atts['href'] = ! empty( $item->url ) ? $item->url : '';
}
You'd think this would do it... the depth isn't 0... and it's resetting the other links to #
Thanks
Hi i have been having trouble all day with this, it almost works but not quite, i need the corresponding p (#p-1 etc) to stay highlighted once the thumb nail is clicked. I have used a Plug in for an image slider which i have customized slightly and the mouseover and mouseleave events are working fine but the click event doesn't appear to add the class to the target paragraph.
Example on jsfiddle http://jsfiddle.net/RVYnb/7/
The relevant jQuery is written inline on the example.
this is driving me crazy, please help!
The error is in the image slider plugin. It also binds to the click event in the code.
Here's the relevant code part in the plugin:
jQuery("div#thumbSlider" + j + " a").each(function(z) {
jQuery(this).bind("click", function(){
jQuery(this).find("p.tmbrdr").css({borderColor: settings.thumbsActiveBorderColor, opacity: settings.thumbsActiveBorderOpacity});
jQuery(this).parent().parent().find("p.tmbrdr").not(jQuery(this).find("p.tmbrdr")).css({borderColor: settings.thumbsBorderColor, opacity: settings.thumbsBorderOpacity});
var cnt = -(pictWidth*z);
(cnt != container.find("ul").css("left").replace(/px/, "")) ? container.find("span.typo").animate({"opacity": 0}, 250) : null ;
container.find("ul").animate({ left: cnt}, settings.easeTime, settings.easeFunc, function(){container.find("span.typo").animate({"opacity": settings.typoFullOpacity}, 250)});
return false;
});
});
The problem is the "return false" at the end. It stopps the propagation to other click events.
Change the code to the following:
Query(this).bind("click", function(e){
jQuery(this).find("p.tmbrdr").css({borderColor: settings.thumbsActiveBorderColor, opacity: settings.thumbsActiveBorderOpacity});
jQuery(this).parent().parent().find("p.tmbrdr").not(jQuery(this).find("p.tmbrdr")).css({borderColor: settings.thumbsBorderColor, opacity: settings.thumbsBorderOpacity});
var cnt = -(pictWidth*z);
(cnt != container.find("ul").css("left").replace(/px/, "")) ? container.find("span.typo").animate({"opacity": 0}, 250) : null ;
container.find("ul").animate({ left: cnt}, settings.easeTime, settings.easeFunc, function(){container.find("span.typo").animate({"opacity": settings.typoFullOpacity}, 250)});
e.preventDefault();
});
});
and it should work.
It looks to me, according to the "fiddle", that your "click" event isn't working on your thumbnails. It's never adding the "clicked" class to your .
I threw an "alert" into this:
$("#t1").live("click", function() {
alert('clicking');
$("#p-1").addClass("clicked").addClass("highlighted");
});
and the alert never popped.