I'm playing around with animating different elements at the moment. Specifically, an off-screen navigation bar that appears when a button is pressed. I originally wrote it in jQuery, as that was what I was learning at the time and it worked perfectly, but now wish to rewrite it in vanilla JS and can't seem to get it to work.
This is the jQuery code:
$(document).ready(function(){
$('#hambBtn').click(function(){
$('#hambBtn span').toggleClass('active')
$('#menuWrapper').toggleClass('active')
})
})
So far the vanilla JS looks like this:
const hamb-btn = document.querySelector("#hambBtn");
hamb-btn.addEventListener("click", animateHamb);
function animateHamb(){
const hambSpan = document.querySelector(".hamb-btn");
const menuWrap = document.querySelector("#menuWrapper");
hambSpan.classList.toggle("active");
menuWrap.classList.toggle("active");
}
Can anyone explain if there is anything that the jQuery code is doing that the vanilla JS isn't so that I can correct it?
You've converted some of the code correctly, however you've just created a function, while the JQuery sets up a function to automatically be called when the DOM is loaded. A more precise line for line conversion would be:
document.addEventListener("DOMContentLoaded", function(){
document.getElementById('hambBtn').addEventListener("click", function(){
document.querySelector('#hambBtn span').classList.toggle('active');
document.getElementById('menuWrapper').classList.toggle('active');
});
});
Related
So I've been trying to do the following bit of code without jQuery:
$(".parent-class").contents().find(".child-class").css("color", "red");
I'm trying to edit the styles of an embedded Twitter feed and I could only do that by getting the module's child nodes using this snippet: $(".twitter-timeline").find(".timeline-Tweet-text").css("margin-bottom", "-10px"); for whatever reason. It is necessary that the pure JS code mimics this functionality.
My full js function is:
// Change the style of the tweets after the module loads.
window.addEventListener('load', function () {
$(".twitter-timeline").contents().find(".timeline-Tweet-text").css("margin-bottom", "-10px");
});
Thanks for taking the time to read.
You can try the following way:
document.querySelectorAll(".twitter-timeline .timeline-Tweet-text").forEach(function(el){
el.style.marginBottom = "-10px";
});
I am trying to get this codepen http://codepen.io/eternalminerals/pen/qdGvMo working on my wordpress page at http://eternalminerals.com/test/
I know that since Wordpress is in no-conflict mode, I have to change the $ to jQuery, but I did that and made sure the script was in the header as well (using this JS adder plugin css-javascript-toolbox) but it still isn't working like the codepen. I tested the codepen without the javascript and it behaves like the wordpress page, so I know the issue must be in the javascript.
<script type='text/javascript'>
StarWars = (function() {
/*
* Constructor
*/
function StarWars(args) {
// Context wrapper
this.el = jQuery(args.el);
// Audio to play the opening crawl
this.audio = this.el.find('audio').get(0);
// Start the animation
this.start = this.el.find('.start');
// The animation wrapper
this.animation = this.el.find('.animation');
// Remove animation and shows the start screen
this.reset();
// Start the animation on click
this.start.bind('click', jQuery.proxy(function() {
this.start.hide();
this.audio.play();
this.el.append(this.animation);
}, this));
// Reset the animation and shows the start screen
jQuery(this.audio).bind('ended', jQuery.proxy(function() {
this.audio.currentTime = 0;
this.reset();
}, this));
}
/*
* Resets the animation and shows the start screen.
*/
StarWars.prototype.reset = function() {
this.start.show();
this.cloned = this.animation.clone(true);
this.animation.remove();
this.animation = this.cloned;
};
return StarWars;
})();
new StarWars({
el : '.starwars'
});
</script>
There are no javascript console errors on my website page but it behaves as if there is no javascript controlling the html like in the codepen. Any help would be greatly appreciated. Thank you!
If you want to quickly update your jQuery call and pass in jQuery to it's own function then you can do so as shown below:
jQuery(document).ready(function( $ ) {
// $ Works! You can test it with next line if you like
// console.log($);
});
Additionally, and I've executed this methodology myself below, you can pass jQuery in as the dollar sign. NOTE: All jQuery code that uses "$.apis()" instead of "jQuery.apis()" must be within this code snippet which you may also load from an external script if necessary.
(function($) {
// $ Works! You can test it with next line if you like
// console.log($);
})( jQuery );
You can find the link to examples with more detail here: (https://digwp.com/2011/09/using-instead-of-jquery-in-wordpress/)
This solution is designed for wordpress, but I was using in a CMS-serving engine that rendered all the JS files on the backend and only sent out a view. In that scenario I could never use the dollar sign declaration in a typical document.ready function as you are trying so our issue is identical, just with a different engine behind it. This should help, cheers and happy coding!
Ok, thanks to Wordpress embedded javascript on page doesn't work it seems like all I had to do was surround the script with a jQuery ready function:
jQuery(function() {
/* your code here */
)};
http://eternalminerals.com/test/ works now woohoo!
I'm looking to use this code in JS Fiddle http://jsfiddle.net/syE7s/ to load some content into a div.
It's exactly what I need but I want link A to auto load when the page loads. My knowledge of Javascript is fairly minimal so if someone could get it working in jsfiddle I would be very greatful.
I've tried googling everything but I just can't seem to make it work.
It is essential I use the HTML as the links I use parse tokens that use {} to identify them as tokens but it obviously gets confused with Javascript when they are sat together.
enter code here
thanks
Here is a working JS Fiddle, I added a function to load the first link :
function launch() {
var link = $('#A').attr("href");
$('#target').load(link);
}
launch();
http://jsfiddle.net/dhmLjme6/
You can add just one line to your javascript.
It will look like this (line 3):
$(document).ready(function(){
$('#target').load($('.trigger').attr("href"));
$('.trigger').click(function(e){
e.preventDefault();
var link = $(this).attr("href");
$('#target').load(link);
});
});
I have been working with jquery tools overlays. I got the below code online and have been able to make it work. However I now need the overlay setup with another link on the same page and need a different size on that overlay.
I tried copying and pasting the code and changing the rel to look for an id. My plan was the get a second function set to different div's, then setup the size in css. I'm rather new to jquery and although I thought it would be easy I cannot figure this out.
If anyone has any better solutions please let me know.
$(function () {
$("a[rel]").overlay({
mask: 'lightgrey',
effect: 'apple',
onBeforeLoad: function () {
var wrap = this.getOverlay().find(".contentWrap");
wrap.load(this.getTrigger().attr("href"));
}
});
});
I have tried changing $("a[rel]") to $("a.testclass") and $("#test"), but no other identifier seems to work.
Make sure that you include jQuery Tools in your HTML, like so:
<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
That should make it work.
This is an official jQuery homepage. The API documentation is well organized. Search something about jQuery in this site.
overlay() doens't seem to be jQuery's default function. The function may be added like
$=jQuery;
$.fn.overlay=function(a, b, c){do something};
JavaScript eval("text") function also do the job you want (maybe).
I am trying to understand the difference between JQuery and JavaScript.
And apologies if this is a silly question.
This is my attempt at JQuery. On pressing the button the text in <p> should change as requested. I cannot get this to work.
http://jsfiddle.net/QaHda/7/
this is my JavaScript attempt. I cannot get this to work either
http://jsfiddle.net/aLhb8/1/
Can someone please help me with
my jQuery above to get it working.
my jscript above to get it working.
I was trying to get to a point where I could write my JQuery in such a way that it could be written in javascript. Can anyone help me do this?
Thanks
EDIT
Thanks for all the answers/corrections: what I was looking for part 3 was this enter link description here which basically does part 1 using javaScript,I think. In future I should be careful,using left hand pane, to include Jquery library and to make sure jsript is wrapped in head/body
jQuery
You need to include jQuery library to your page by selecting a jQuery version in the first dropdown in the left panel
Demo: Fiddle
JS Sample
The problem is since your function is defined within the onload callback, it was not available in the global scope causing an error saying
Uncaught ReferenceError: myFunction is not defined
The solution is to add the script to the body elements, instead of inside the onload callback by selecting No Wrap - in <body> in the second dropdown in the left panel
function myFunction()
{
alert("Hello World!");
}
Demo: Fiddle
jQuery is library of javascript function and you need to add jquery file in html file that y jquery function was not working and for javacript function you need to change the setting in jfiddele left to no-wrap in head
http://jsfiddle.net/aLhb8/1/
http://jsfiddle.net/hushme/QaHda/10/
here is code
$("button").on("click", function () {
$("p").text("this text will now appear!!")
});
If you have internet connection, This should work
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
$(document).ready(function() {
$('button').click(function() {
alert("This is a simple alert message");
});
});
But if don't then just download the jquery framework and include into your page
Hope it helps and anyway jquery is a framework of javascript, so they are both or they are the same. Don't confuse yourself.
Here is a JavaScript version - http://jsfiddle.net/aLhb8/4/
JavaScript
var myButton = document.getElementById('myButton');
myButton.addEventListener('click', function(){
alert(myButton.textContent);
});
Check this link out if you want to start learning more about JavaScript - http://javascriptissexy.com/how-to-learn-javascript-properly/
For the pure JS code, on the top left panel, select 'No wrap - in body'. This will make your code run without a problem.
In the jQuery code, make sure you've selected the jQuery library, as opposed to pure JS. You hadn't selected this before, so your code was invalid.