I'm trying to use toastr js library.
I included toastr.js, toastr.css and toastr-responsive.css
This works:
toastr.info("Hello world");
But this doesn't work. And I don't get any error in browser console:
toastr.options.positionClass = "toast-top-full-width";
toastr.info("Hello world");
What would be the cause?
Create a fiddle and show me what you are doing.
UPDATE:
You should not link to the raw css and javascript in github. Those are not CDNs, so they are not set up to serve the code. You should pull the code down for your project or use NuGet in Visual Studio.
For example, this works fine if you copy the CSS into the JsFiddle CSS window like this:
http://jsfiddle.net/7Ucj9/10/
And to be complete, here is the minor code change I made ... but it had nothing to do with it
$(function () {
toastr.info("Are you the 6 fingered man?");
$("#foo1").click(function () {
alert("test");
});
$("#foo2").click(function () {
toastr.info("Are you the 6 fingered man?");
console.log("hello");
});
});
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'm new to Polymer and as far as I've read about it, it isn't compatible with Mozilla and Safari or it has issues. I've read in StackOverflow that adding
addEventListener('WebComponentsReady', function() {
});
would help the browsers cope up with the code. Now, I've tried it on my code it works. The content is displaying properly in Mozilla, however, it messes up the Javascript that I wrote along with Polymer. I tried two options, the first one
addEventListener('WebComponentsReady', function() {
Polymer({
is: "main-header"
}); });
I did this and there are still error logs on the console while if I wrap the whole script, it wouldn't work as well. Example:
addEventListener('WebComponentsReady', function() {
Polymer({
is: "main-header"
});
// extra code here
});
I think wrapping addEventListener to the whole code is also causing the problem. Any ideas how to fix or are there any other viable options than adding an event listener to the code?
Try using Polymer-CLI
It comes with some polyfills out of the box.
I'm not sure whitch ones but it does include the one your inquiring about.
https://www.polymer-project.org/1.0/docs/tools/polymer-cli
It looks like using
addEventListener('WebComponentsReady', function() {
});
is messing up my Javascript because it has a conflict with
addEventListener('HTMLImportsReady', function() {
});
I had to remove it in order for the script to work properly.
I'm trying to run a block of jQuery code that shows and hides a form, but can't find a way to get Meteor to run the code on the client side. Here's the code I'm attempting to use at the moment:
if (Meteor.isClient) {
Template.post.onRendered(function(){
$(document).ready(function(){
$('.replybtn').click(function(){
if( $(this).parent().next().css('display') === 'none' ){
$(this).parent().next().css('display', 'block');
} else {
$(this).parent().next().css('display', 'none');
}
});
});
});
}
I've also tried putting the code in a script tag, which did not work. Strangely, the jQuery portion of the code alone works fine when pasted into the browser console - meaning the bug is likely in how I'm running the code in Meteor, not the jQuery itself. Also, I've confirmed that the template name is correct and can't think of any other issues that could be causing this. Any ideas on why the jQuery code may not be running?
This is probably not the best solution, but it appears that this issue can be fixed by defining a function that creates the event listener and then setting a 2 second timeout to run the function with setTimeout().
You're trying to apply a traditional jQuery pattern when Meteor provides a simple facility to attach event handlers to templates. Here would be the meteoric way:
if (Meteor.isClient) {
Template.post.events({
'.replybtn click'(e){
const selector = e.target.parentElement.nextSibling;
selector.css('display', selector.css('display') === 'none'? 'block' : 'none');
}
});
});
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!
Please look at the following jsfiddle. It is a simple attempt at getting the jQuery.appear plugin to work. What am I doing wrong?
http://jsfiddle.net/P7v8v/1/
The html is:
<div class = 'bar'>foo</div>
Here is the relevant code:
alert('foo bar');
$('.bar').appear();
$('.bar').on('appear', AlertMe);
function AlertMe() {
alert("alert me");
}
The plugin can be downloaded at https://github.com/morr/jquery.appear#jqueryappear
1) Appear triggers the event on scroll or resize (referencing your javascript fiddle on line 79)
$(window).scroll(on_check).resize(on_check);
2) for the code to work properly enclose it like this:
$(function(){
... your code goes here
});
so it doesn't get executed before the libraries are loaded.
Hope this helps