So I'm trying to use a Bootstrap Modal, and I want it to appear after a click (onclick method).
Right now I have this
$(document).ready(function(){
$("#cancelPObtn").on("click", function(){ $("#error-dialog").modal();});
});
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap-combined.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/js/bootstrap.min.js"></script>
<!-- BELOW ON MY WORDPRESS POST -->
Yes, cancel it
<div class="modal hide fade" id="error-dialog">
<div class="modal-header">
<a class="close" data-dismiss="modal">x</a>
<h3>Cancel Purchase Order?</h3>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
Yes, cancel it
Nevermind
</div>
</div>
<!-- I HAVE THE JAVASCRIPT ON MY POST TOO, USING <script type="text/javascript"> -->
So, it appears to be working, everywhere, but on my Wordpress post I can't make it work! I've added the JS + CSS Files from Bootstrap on my header.php
What could be the issue here?
Thank you!
You should read up on enqueuing scripts and styles in WordPress. WordPress has it's own way of including the script files and the stylesheets that you should familiarize yourself with. A lot of times, what ends up happening is either the files aren't included correctly, or in the wrong order, or without the dependencies they might need. Adding the links directly to header.php is strongly discouraged.
In addition to using wp_enqueue_script as recommended above, I would ensure you're writing non-conflicting jQuery, as WordPress plugins sometimes come bundled with their own JavaScript libraries, which can cause issues.
See below:
<script type="text/javascript">
jQuery(function($) {
$('#cancelPObtn').click(function() {
$('#error-dialog').modal();
});
}
</script>
Also, WordPress is probably calling its own instance of jQuery, so you can use window.jQuery to test before including your own, like this:
<script type="text/javascript">
window.jQuery || document.write('<script src="https://code.jquery.com/jquery-1.7.2.min.js"><\/script>');
</script>
Resources:
jQuery.noConflict()
HTML5 Boilerplate
Related
I am struggling with any task requiring the smallest bit of brain function. The task I'm currently struggling with is adding the AOS library to my site on Wordpress.
I added the following code to my full-width-page.php template in the Wordpress Editor:
<script> AOS.init(); </script>
In addition, I added the following code under Appearance > Theme Settings > Style > External JS field & External CSS field
<script src="uploads/aos-master/dist/aos.js"></script>
<link rel="stylesheet" type="text/css" href="uploads/aos-master/dist/aos.css">
After all of that, I put the data-aos attribute to html element that I want to animate, like so:
<div data-aos="fade-up";>
<h2>TEST TEST TEST</h2>
</div>
But then... nothing happens ;(
Please, if it's possible to set up, share with me what I'm doing wrong.
Are you sure aos stylesheet and javascript file loaded correctly? You can use Chrome's or Firefox's debugger on page (Chrome's Shortcut is Ctrl(or CMD)+Shift+i)
also you can change stylesheet and javascript file codes with code below;
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.2.0/aos.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.2.0/aos.js"></script>
Okay, I have a pretty basic site I'm working on that I'm now modifying to use a MEAN stack and thus I'm getting started with Angular. I'm using Scotch.io's MEAN starter App as a base to get started. So far, it's been pretty easy, I've got key components in templates and added them using ng-include.
HTML
<title>First Angular Page</title>
<!-- CSS -->
<link rel="stylesheet" href="libs/font-awesome/css/font-awesome.min.css"> <!-- Font Awesome -->
<link href='http://fonts.googleapis.com/css?family=Quicksand:700|Montserrat:700|Open+Sans|Sniglet:400,800' rel='stylesheet' type='text/css'> <!-- Google Fonts -->
<link rel="stylesheet" href="css/mainStyles.css"> <!-- Stephie's styles -->
<!-- JS -->
<script src="libs/angular/angular.min.js"></script>
<script src="libs/angular-route/angular-route.min.js"></script>
<!-- ANGULAR CUSTOM -->
<script src="js/controllers/MainCtrl.js"></script>
<script src="js/controllers/NerdCtrl.js"></script>
<script src="js/services/NerdService.js"></script>
<script src="js/appRoutes.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-app="sampleApp" ng-controller="NerdController">
<!-- NAVAGATION -->
<div ng-include='"templates/navagation.html"'></div>
<div id="site-canvas">
<!-- HEADER -->
<div ng-include='"templates/header.html"'></div>
<div id="page-content">
<!-- ANGULAR DYNAMIC CONTENT / UNIQUE PAGE FRAGMENT -->
<div ng-view></div>
</div> <!-- #page-content -->
<!-- FOOTER -->
<div ng-include='"templates/footer.html"'></div>
</div><!-- #site-canvas -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/menu.js"></script>
</body>
</html>
But now I've got problems, my menu.js file isn't working. It consists pretty much entirely of add/removeClass methods using jQuery.
Here's an old Code Pen of the site I'm working on in basic HTML to demostrate how it's supposed to work.
http://codepen.io/StuffieStephie/pen/BNqJVX
function toggleNav() {
if ($('#drawer').hasClass('show-nav')) {
$('#drawer').removeClass('show-nav');
$('#nav-icon').removeClass('open');
$("nav li.gotsMenus").removeClass("showSub");
} else {
$('#drawer').addClass('show-nav');
$('#nav-icon').addClass('open');
$("nav li.gotsMenus").removeClass("showSub");
}
}
$('#closeButton, #site-canvas, nav li li').click(function() {
$('#drawer').removeClass('show-nav');
$('#nav-icon').removeClass('open');
$("nav li.gotsMenus").removeClass("showSub");
});
But this doesn't work with my Angular templates. (Or at least, the click and hover functions don't. The scroll function that auto hides the header still works mysteriously ...? So it's kinda working)
So.. where to begin? I'm sorry if this is a really dumb question but I'm new to Angular and I've been spinning my wheels for a couple of hours now. Do I put this in a directive or controller or module or what? Do I have to rewrite this in vanilla js? And even if I did, I have other jQuery dependencies (I have an image gallery powered by Tumblr's JSON API that uses a jQuery-dependent lightbox, among other things).
If someone can just point me in the right direction I would be so grateful ;_;
Sounds like a race condition, when the script executes, there might not a #menuHeader in the DOM. You may need to add the code to the load callback using a delegate. So like:
$("#menuHeader").on('load', function () {
// Put menu.js code here
});
I would put a break point and figure out what's actually in the DOM when this executes. And basically figure out what it takes to load up the DOM first, then run the script.
I have this code:
<body class='homepage'>
<div id='wrapper'>
<header id='header'></header>
<div id='main' role='main'>
...
Because there are many HTML pages, I decided to include the header in each page by putting the html inside header.html and using this jQuery:
<script src="assets/javascripts/jquery/jquery.min.js" type="text/javascript"></script>
<script src="assets/javascripts/jquery/jquery.mobile.custom.min.js" type="text/javascript"></script>
<script>
$(function(){
// Include header and footer
$("#header").load("header.html");
$("#footer").load("footer.html");
});
</script>
<script src="assets/javascripts/bootstrap/bootstrap.min.js" type="text/javascript"></script>
<script src="assets/javascripts/plugins/modernizr/modernizr.custom.min.js" type="text/javascript"></script>
<script src="assets/javascripts/plugins/hover_dropdown/twitter-bootstrap-hover-dropdown.min.js" type="text/javascript"></script>
<script src="assets/javascripts/plugins/retina/retina.min.js" type="text/javascript"></script>
// etc... there are about a dozen js scripts
At a glance, it looks fine. However, the problem I am finding is that the effects I have in the header (for example hovering over a nav link SHOULD show the nav menu) don't work when I use this jQuery include approach. If I copy and paste the full header and put it back into #header then it works fine again.
So I think it must be a timing issue, perhaps the header is loading before the appropriate jQuery scripts are included perhaps (just a guess? I have tried moving the load() to under the other scripts but that did not work).
What should I do to fix this?
You are basically calling ready() function which means, put the header files when the DOM is ready. So most of the events were bound to non-existent elements.
If you have a backend code, you could render the imports beforehand in a template view file or something.
Or, you could also use event delegation for the events that you need.
I want to use Foundation 5 Reveal modal in magento product page.
I added jquery and foundation.js in footer and call Foundation from footer.phtml
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
and added modernizr and css files in head.phtml
<link rel="stylesheet" href="css/foundation.css" />
<script src="js/vendor/modernizr.js"></script>
Then i added markup on product page and its working very well. But it is conflicting with magento prototype.
Then i just done jQuery.noConflict(); and then reveal model stopped working. I thought i is becacuse i am loading two versions at same time so i removed build in jquery lib and then again prototype stopped working.
I also juggled jquery call from head to local.xml , page.xml but no luck!
ERROR CODE: Uncaught TypeError: Cannot read property 'config' of undefined prototype.js:828
Does anyone know what is the problem or mistake i am doing?
Huge thanks in advance!
Two things that may help:
It's important where you put the noConflict call. If the rest of your site uses PrototypeJS, then here's where I'd do it:
<script src="js/vendor/jquery.js"></script>
<script>jQuery.noConflict();</script>
<script src="js/foundation.min.js"></script>
Having done noConflict, you have to use jQuery* instead of $ when you want to use jQuery:
<script>
jQuery(document).foundation();
</script>
(* You don't have to, you can use the return value of noConflict to create an alias. For instance, var $j = jQuery.noConflict(); will let you use $j instead of jQuery.)
I'm working on a modeling website for my girlfriend and she wants a large slideshow as background on the website. I used the JonDesign Gallery for that, which works nicely for this purpose and is relatively light-weight.
Now, for the contact form I'd like to use something Lightbox/Slimbox style. Slimbox works with Mootools, which is also used by JD Gallery. Unfortunately, Slimbox seems to conflict with JD Gallery and I can't figure out why. I checked the CSS for conflicts, but there are no elements ID'd or class'd twice. I looked at the code and couldn't immediately spot a conflict. I'm sure I missed something. I can't figure it out because I don't have much experience with JavaScript let alone Mootools or Slimbox.
Here's my (relevant) code.
Head
<link rel="stylesheet" href="css/layout.css" type="text/css" media="screen" charset="utf-8" />
<link rel="stylesheet" href="css/jd.gallery.css" type="text/css" media="screen" charset="utf-8" />
<link rel="stylesheet" href="css/slimbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="scripts/mootools.js"></script>
<script src="scripts/mootools-1.2.1-core-yc.js" type="text/javascript"></script>
<script src="scripts/mootools-1.2-more.js" type="text/javascript"></script>
<script src="scripts/jd.gallery.js" type="text/javascript"></script>
<script src="scripts/jd.gallery.transitions.js" type="text/javascript"></script>
<script type="text/javascript" src="scripts/slimbox.js"></script>
Body
<script type="text/javascript">
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: true,
showArrows: false,
showCarousel: false,
delay: 6000,
embedLinks: false,
showInfopane: false,
});
}
window.addEvent('domready', startGallery);
</script>
<div id="myGalleryBox">
Contact her
</p>
</div>
<div class="content" style="z-index:1;">
<div id="myGallery">
<div class="imageElement">
<h3>Item 2 Title</h3>
<p>Item 2 Description</p>
<img src="images/pic1.jpg" class="full" />
</div>
</div>
</div>`
As far as I can tell, the conflict is between these lines:
<script type="text/javascript" src="scripts/mootools.js"></script>
and
<script src="scripts/mootools-1.2.1-core-yc.js" type="text/javascript"></script>
<script src="scripts/mootools-1.2-more.js" type="text/javascript"></script>
in the head.
I'm using unmodified code from JD Gallery and SlimBox. Any help would be much appreciated!
The only problem I can see is an extra comma at the end of the gallery options:
var myGallery = new gallery($('myGallery'), {
...
showInfopane: false, <--- Right Here
});
At least Firefox and Chrome ignore the trailing comma, but it's a syntax error in Internet Explorer. After I fixed that, your code worked fine for me in Chrome, Firefox, and IE.
Like Anurag mentioned in the comments, you are including MooTools twice. It didn't cause any problems for me, but you can remove the scripts/mootools.js script, and it should still work.
In JQuery you can choose a new name for the JQuery function to avoid conflicts with other libraries, e.g. Prototype. Mootools might support something similar.
Alright, it's working now. Here's what's going on: I removed the extra comma as per Matthew Crumley's suggestion (+1). Per Anurag, I checked Chrome's developer tool (I completely forgot about that - working late = bad.) It didn't show any errors. Then I redownloaded the SlimBox files and tried the demo, which didn't work. Then I noticed that SlimBox had two folders with its SlimBox JS files: js and src. js is the correct folder with the correct library, src doesn't work for whatever reason. I changed the website to use the file from the js folder and it's now working.
Bottom line: No script conflict after all, SlimBox was just distributed in a weird way. Thank you everybody for your help!
I faced the same issue when I had to use two versions of jquery in the same page.
<script type='text/javascript'>
// This script prevent the conflict between older and newer versions of jquery
var $jq = jQuery.noConflict(true);
</script>
And then you can reference your different version of jquery by using something like this :
var $noborders = $jq('.noborders');
I hope something like this will solve your issue too.