Fading in text via text button - javascript

I am currently working in WordPress and I want to fade in a bit of text by clicking on another text line.
I just want purely text (For example text as a button) and have a nice fade-in effect.
I have already tried this but it does not work in wordpress.
I got this from somewhere online:
http://jsfiddle.net/zcWJ6/11/
html:
<span class="button">Text button</span>
<span class="fadein">You just clicked on "Text button"</span>
css:
.button { cursor: pointer; }
Jquery:
$('.fadein').hide();
$('.button').on('click', function(){
$('.fadein').fadeIn(2000);
});

#Satpal is right on this one, you need to use jQuery rather than $ when working in wordpress. The new code would look like this:
jQuery('.fadein').hide();
jQuery('.button').on('click', function(){
jQuery('.fadein').fadeIn(2000);
});
the code above should work just fine in wordpress for what you want to do, assuming you have the jQuery library already called and you're putting the code in the right place. As #Giancarlo mentioned you should also wrap it in a document ready script, but it also needs to be in jQuery form like so:
jQuery(document).ready(function(){
jQuery('.fadein').hide();
jQuery('.button').on('click', function(){
jQuery('.fadein').fadeIn(2000);
});
});
put this code into a separate .js file and call it in your theme's functions.php file using wp_enqueue_script
it should work just fine

Try executing your jQuery code after the jQuery JavaScript library has loaded. Additionally, wrap your jQuery code around an on document ready scope.
// Shorthand for $(document).ready()
$(function(){
// Your jQuery code goes here
});

Related

Is it feasible to run inline jQuery script inside a WordPress page?

Is it not possible to run jQuery in the middle of a page (inline)?
I tried to run this code inside a custom WordPress template....
<script type="text/javascript">
jQuery(document).ready( function() {
jQuery(".upb_row_bg").css("filter","blur(30px)");
});
</script>
However it seems to have no affect on the element in question. In fact if cannot even select the element -
console.log('jQuery(".upb_row_bg).length; shows 0.
If I put the same code right before the closing tag after the wordpress wp_footer() function, it works. If I place it before wp_footer, then it does not.
Any ideas? I have another script on another page where I was able to use a simple inline script that is generated by a wordpress filter...
<script>jQuery( "figure" ).replaceWith( "<div class=\”new-class\”>” + jQuery( "figure" ).html() + "</div>" );</script>
This works as expected even though with this snippet there is no event to trigger it, it just runs and replaced the preceding element. So inline scripts must work.
I am a bit confused.
Your syntax looks strange.
<script type="text/javascript">
$(document).ready(function() {
$('.upb_row_bg').css('filter', 'blur(30px)');
});
</script>
'figure' does not look like a valid selector, use a class or ID.
As far as what you're trying to accomplish with your second code snippet just do:
<script>$('#figure').addClass('new-class')</script>
Or, if you really need figure to be out of the question
<script>$('.figure').addClass('new-class'); $('.new-class').removeClass('figure')</script>

Javascript File Not Functioning in Wordpress w/ Proper Enqueueing in Functions.php

My JS file is being properly called in my functions.php file because there is no error in the console when I inspect element. Why is this js code not running? Do I need to wrap the function? Everything I tired did not work. I am no js expert, but I think this code should work... It worked in my codepen.
Note: I am calling the script in the footer. Should I be calling it in my header since it is for my mobile header menu?
// Mobile Menu
$('.hamburger').on('click', function () {
$('.main-navigation').toggleClass('open');
});
It should work fine via the footer. You could try wrapping it in a
$( document ).ready(function() {
$('.hamburger').on('click', function () {
$('.main-navigation').toggleClass('open');
});
});
How are you calling the jQuery? Are you placing it in a shortcode to a function in your functions.php, or directly in a tag inside the footer?
Last question (sorry, i'm new - and thorough): Have you checked your console? Any other Java errors?
sorry this is a mess, I am trying to figure out the formatting for answers/comments

jQuery .attr() not working with WordPress theme

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() {
});

jQuery slow reveal on page load

I am trying to do a slow reveal on a particular div with an id of 'contentblock' on page load. This is my first time trying to code something in jQuery and I continue to fail. The following is my latest attempt, but I'm a complete newbie to this and surprisingly google hasn't been a whole lot of help.
<script type='text/javascript'>
$(window).onload(function(){
$('#contentblock').slideDown('slow');
return false;
});
</script>
before that I also had the following instead of the window onload line above:
$(document).ready(function(){
But that didn't have any success either. Can someone help a jQuery newbie out?
First, you'll need to make sure the element is hidden (or it won't be shown, since it's already visible). You can do this in either CSS or JavaScript/jQuery:
#contentblock {
display: none;
}
Or:
$('#contentblock').hide();
If you use CSS to hide the element you need to be aware that the element will remain hidden in the event of JavaScript being disabled in the user's browser. If you use JavaScript there's the problem that the element will likely flicker as it's first shown and then hidden.
And then call:
$(window).load(function(){
$('#contentblock').slideDown('slow');
});
I've made two amendments to your jQuery, first I've changed onload to load and I've also removed the return false, since the load() method doesn't expect any value to be returned it serves no purpose herein.
For the above jQuery you can use instead:
$(document).ready(function(){
$('#contentblock').slideDown('slow');
});
$(document).ready(function(){
if($('#contentblock').is(':hidden'))
{
$('#contentblock').slideDown('slow');
}
});
if you have jquery added to your project and your div is display none ... something like this should work.

jQuery inside Media Wiki pages (not just in the Monobook.js or extensions)

I'm trying to do some simple jQuery stuff 'dynamically' from within a MediaWiki content page. Its really just to 'beauty up' some different features.
I've done the following:
http://www.mediawiki.org/wiki/JQuery
http://www.mediawiki.org/wiki/Manual:$wgRawHtml (mainly for Paypal buttons initially)
The below code does not work. This is put in a blank content page.
<html>
<script>
$j(document).ready(function(){
$j('#test').hover(
function(){
$j('#test').attr('background-color','red');
},
function(){
$j('#test').removeAttr('background-color');
}
);
});
</script>
<div id="test">Howdy</div>
</html>
Nothing happens...
Any ideas?
Update:
I have attempted this simple solution with no result.
example.com/wiki/index.php?title=MediaWiki:Common.js
$j('#jTest-Howdy').hover(
function(){
$j('#jTest-Howdy').addClass('jTest-red');
},
function(){
$j('#jTest-Howdy').removeClass('jTest-red');
}
);
example.com/wiki/index.php?title=MediaWiki:Common.css
.jTest-red { background-color: red; }
example.com/wiki/index.php?title=jQueryTest
<html>
<div id="jTest-Howdy">Howdy</div>
</html>
as you can see here, this code should work IF jQuery was being loaded properly...
http://jsfiddle.net/5qFhv/
but it is not working for me... any help?
If you're using the jQuery that's loaded by MediaWiki 1.17, be aware that most JavaScript is loaded after page content. An inline <script> element is executed immediately when it's reached, so $j would not be defined at this time -- you'll probably see some errors in your JavaScript error console to this effect.
(Offhand I'm not sure about the jQuery that's included with 1.16; versions of MediaWiki prior to that as far as I know did not include jQuery.)
Generally what you want to do here is to either put JavaScript code modules into the 'MediaWiki:Common.js' page and let that hook up to your HTML markup, or create a MediaWiki extension -- which you can then invoke from your pages, and which will let you create any fun HTML and JavaScript output you like.
http://www.mediawiki.org/wiki/Manual:Interface/JavaScript
http://www.mediawiki.org/wiki/Manual:Developing_extensions
Code you put in your 'MediaWiki:Common.js' page will be loaded after other UI initialization, ensuring that code and variables are present so you can call into jQuery etc.
I don't know much about MediaWiki, but to me it looks like some simple javascript mistakes.
In the first sample you are trying to set an attribute on the element,
when you need to set the css or style attribute.
$j('#test').css('background-color', 'red');
In both samples you are binding an event to an element that doesn't exist yet in the DOM, so it will fail. You could use the live method, which will work for existing and future elements introduced in the DOM.
$j.('#test').live('mouseover', function(){
$j(this).addClass('hover-class');
}).live('mouseout', function(){
$j(this).removeClass('hover-class');
});
Hope that helps.
Try putting all your custom jQuery code in its own file, then load it as a module with ResourceLoader, after jQuery.
http://www.mediawiki.org/wiki/ResourceLoader/Migration_guide_for_extension_developers
Also, as a debugging method: completely load your site in Firefox, then enter your custom jQuery code in the console. If it works, your problem is a race condition. If it doesn't, jQuery isn't loading for some reason.

Categories

Resources