MMENU jquery plugin doubles all JS scripts - javascript

When I'm using mmenu jquery plugin, it doubles all js events and script call, except scripts in head section. What would be the possible solution for this? Any help would be greatly appreciated.
Sorry, but I can't show you full code, it's on working site. Mmenu starts that way in body section:
<script type="text/javascript">
$(document).ready(function() {
$("#my-menu").mmenu();
$("#my-menu").find( ".mm-subopen" ).addClass( "mm-fullsubopen" );
});
</script>

i tried mmenu in my production app and at first it gave me some headaches, but understanding how it works helped me to use it correctly.
Wrap your whole layout in a div without styles (so the website's style remains the same).
Place your menu markup outside your layout (inmediately bellow the body tag).
Add the the plugin at the end of your markup along with the initialization code.
Don't manipulate the inner content of the menu to do actions. Use it's API instead.
After you follow these tips, you should have a structure like this:
<html>
<head> ... </head>
<body>
<nav id="mymenu"> ... </nav>
<div> <!-- whole website in here --> </div>
<script src="js/mmenu.min.js"></script>
<script>
$(document).ready(function() {
var mmenu = $("#mymenu").mmenu();
// do not use code bellow, use the API instead.
// $("#my-menu").find( ".mm-subopen" ).addClass( "mm-fullsubopen" );
var api = mmenu.API(); // exposes methods to open() and close() the menu
});
</script>
</body>
</html>
Hope these setup works for you. It worked for me perfectly in my Meteor app.

Related

Magnific Popup install/initialization

I'm very new to all this and having trouble installing it to my my backend code. Where does it go? Below my footer with all my JS?
Like, what does it mean by:
Popup initialization code should be executed after document ready?
Could someone please let me know if this is correct:
$(document).ready(function() {
$('.image-link').magnificPopup({
type:'image'
});
});
I've put this inside a script tag.
Which lies underneath my closing footer but just doesn't seem to work.
yes, put all necessary css and js files first. js files can be included in header or footer. It doesn't matter (footer is preferred location for loading js nowadays). However, don't call the magnificPopup() function before loading necessary js files. After all are loaded you can use your code in docready like you mentioned.
<!-- jQuery 1.7.2+ or Zepto.js 1.0+ -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- Magnific Popup core JS file -->
<script src="FOLDER_WHERE_YOU_KEPT_THIS_JS_FILE/jquery.magnific-popup.js"></script>
<script>
$(document).ready(function() {
$('.image-link').magnificPopup({
type:'image'
});
});
</script>
This should work if there no other js conflict and you created the html correctly like mentioned in the doc. Let me know if there is more confusion or if still you could not make it work...

Includes taking a long time to load and you can see them loading

I’m including one HTML file in another, as a way to reuse my header and navigation generation logic.
The trouble is that when I browse to pages on my site, I can see the HTML that isn’t included in the include files load first. Only then you can see the menus and banners load afterwards. I’d like everything to appear to load at the same time.
Here's the rendered HTML.
And here’s a code snippet showing you how I generate these pages:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="assets/js/jquery-2.1.3.min.js"></script>
<script>
$(function(){
$("#includeHeader").load("includes/templates/header.html");
$("#includeNavigation").load("includes/templates/navigation.html");
});
</script>
<div id="includeHeader"></div>
</head>
<body>
<div id="wrapper">
<!-- Navigation -->
<div id="includeNavigation"></div>
I’m currently working with the code to try to move any external libraries / CSS to the bottom of the page vs. in the header. But so far, that hasn’t really changed or improved anything.
You should use one of the templating languages.
If your includes are simple HTML files then you could use Handlebars or Dust - you could just copy your code and that's it, then in Javascript you would need just render these templates - see the documentation.
You could use Jade/Pug instead, but its syntax is different from the HTML, so that's not just question of copy-paste.
You are using $(handler) to load them, which is a form for $.ready(). So it waits for the document to load everything before loading your header.html and navigation.html.
Try
<head>
<script src="assets/js/jquery-2.1.3.min.js"></script>
</head>
<body>
<div id="includeHeader"></div>
<script>
$("#includeHeader").load("includes/templates/header.html");
$("#includeNavigation").load("includes/templates/navigation.html");
</script>
</body>
Your problem is that the load function does not run until the document.ready event has fired. Which is probably after your page has started rendering. To get everything to appear at the same time you could use the callback from .load to show everything. So everything is hidden,
$( "#result" ).load( "ajax/test.html", function() {
/// show your stuff
});
You will of course need to know both has loaded.
I would recommend not using javascript to render HTML from a static path and would use a server side lang instead for speed.
I think it make some level fast its not waiting for load all dom element, I am considering #includeNavigation element is under #includeHeader element
<head>
<script src="assets/js/jquery-2.1.3.min.js"></script>
</head>
<body>
<div id="includeHeader"></div>
<script>
$("#includeHeader").load("includes/templates/header.html", function(data){
console.log("header loaded");
$("#includeNavigation").load("includes/templates/navigation.html", function(data){
console.log("navigation loaded");
});
});
</script>
</body>

js code is not working in an external file, but works file when placed in the same html page

I have this code in the footer of my html page
<script type="text/javascript">
// using jQuery
$('video,audio').mediaelementplayer();
</script>
the above code is adding video player on the html page.
Now I have created a separate js file in which I have already have some line of code which is creating owl sliders, tooltips, number counters etc.
When I add the above code into that separate js file it does not work, instead when I keep it in the footer of the html page it works fine.
Try placing your code within $(function(){ ... }. This will execute when the DOM is loaded (currently your code is being executed before jQuery is loaded, if you check the JavaScript console, you will see an error something like $ is not defined)
$(function(){
$('video,audio').mediaelementplayer();
});
or
$( document ).ready(function() {
$('video,audio').mediaelementplayer();
});
You can read about what that is doing here. $(function() is the same as $( document ).ready()
your html(basically) should look like this:
<html>
<head>
</head>
<body>
<!-- html code here -->
<!-- add jquery lib -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- your script -->
<script src="you/file/path.js"></script>
</body>
</html>
and your jquery file:
jQuery(function($) {
// your functions here
$('video,audio').mediaelementplayer();
});
Do you have a proper link to the separate js file in your page, generally at the bottom of the body? It should look something like this:
<script type="text/javascript" src="/joyride_odoo_models/static/js/scripts.js"/>
If you've done that properly, have you tried clearing your browser cache? You may need to do that to detect new javascript files.
How do you call your external js file ?
You must add your references js before your external js file.
you must add your function on document.ready.
You may wait until jQuery is full loaded or ready.
Ex.
$(document).ready(function($) {
// Your code goes here
$('video,audio').mediaelementplayer();
});
This code goes in external js file, then you need to include the file in the HTML
<script type="text/javascript" src="path/to/your/js/file"></script>

Uncaught TypeError: undefined is not a function while using jQuery UI

I haven't used jQuery before, and I wanted to use DateTimePicker plugin on my web page.
I downloaded the plugin file and placed them in the same directory as the HTML files.
I directly applied the code at How to use it? in http://xdsoft.net/jqplugins/datetimepicker/.
It threw the following error.
Uncaught TypeError: undefined is not a function pixelcrawler:61 (anonymous function)
My code follows.
<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="file:///jquery.datetimepicker.css"/ >
<script src="file:///jquery.datetimepicker.js"></script>
<script>
jQuery('#datetimepicker').datetimepicker();
</script>
<div class="container">
<div class="text-center">
<div class="page-header">
<h1>${conf['title']} <small>${conf['description']}</small></h1>
</div>
</div>
<div class="text">
<input id="datetimepicker" type="text" >
.
.
.
.
.
I could not figure out what the problem was. I have tried many other seemingly likely options, but it just did not work either.
(The ${} tags are used for the Mako template language. I am using Cherrypy.)
UPDATE:
I figured out the source of the problem.
It's from jQuery('#datetimepicker').datetimepicker();.
When tested, the datetimepicker() function was undefined. Maybe the way I imported the library was wrong?
jQuery(document).ready(function(){
jQuery('#datetimepicker').datepicker();
})
I don't know your file-structure. I never include local files like this as I use relative URLs from the start rather than having to change everytime I'm ready to use the code, but it's likely one of the files isn't being loaded in. I've included the standard datepicker below using Google CDN's jQuery UI. Does your console log any resources not found?
I think your jQuery is loaded OK, because it's not telling you jQuery is not defined so it's one of your files.
BTW, PHP gets the home URL:
$home="http://" . $_SERVER['HTTP_HOST'].'/';
Demo code datepicker, jQuery UI:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#datetimepicker').datepicker();
})
</script>
<input id="datetimepicker" type="text">
This is about the HTML parse mechanism.
The HTML parser will parse the HTML content from top to bottom. In your script logic,
jQuery('#datetimepicker')
will return an empty instance because the element has not loaded yet.
You can use
$(function(){ your code here });
or
$(document).ready(function(){ your code here });
to parse HTML element firstly, and then do your own script logics.
use jQuery.noConflict()
var j = jQuery.noConflict();
j(document).ready(function(){
j('#datetimepicker').datepicker();
})
For my situation, it was a naming conflict problem. Adding $J solves it.
//Old code:
function () {
var extractionDialog;
extractionDialog = $j("#extractWindowDialog").dialog({
autoOpen: false,
appendTo: "form",
height: "100",
width: "250",
modal: true
});
$("extractBomInfoBtn").button().on("click", function () {
extractionDialog.dialog("open");
}
And the following is new code.
$j(function () {
var extractionDialog;
extractionDialog = $j("#extractWindowDialog").dialog({
autoOpen: false,
appendTo: "form",
height: "100",
width: "250",
modal: true
});
$j("extractBomInfoBtn").button().on("click", function () {
extractionDialog.dialog("open");
});
});
Hope it could help someone.
Usually when you get this problem, it happens because a script is trying to reference an element that doesn't exist yet while the page is loading.
As richie mentioned: "The HTML parser will parse the HTML content from top to bottom..."
So you can add your JavaScript references to the bottom of the HTML file. This will not only improve performance; it will also ensure that all elements referenced in your script files have already been loaded by the HTML parser.
So you could have something like this:
<html>
<head>
<!-- Style sheet references and CSS definitions -->
</head>
<body>
<!-- HTML markup and other page content -->
<!-- JavaScript references. You could include jQuery here as well and do all your scripting here. -->
</body>
</html>
You may see if you are not loading jQuery twice somehow. Especially after your plugin JavaScript file loaded.
I has the same error and found that one of my external PHP files was loading jQuery again.
The issue because of not loading jquery ui library.
https://code.jquery.com/ui/1.11.4/jquery-ui.js - CDN source file
Call above path in your file.
And if you have this problem in slider or slideshow you must use jquery.easing.1.3:
<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
I had trouble getting selectable to work with ASP.NET. It turns out I wasn't properly including everything, but this gentleman made it foolproof: Three steps to use jQuery UI in ASP.NET MVC 5.
I don't think jQuery itself includes datetimepicker. You must use jQuery UI instead (src="jquery.ui").

Certain js File Not Working in Drupal

I'm trying to render one div before another.
I've tested the js on my local machine to make sure it works by creating a simple page. The code is as follows:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="QWERTY">
<div class="content">
<div class="field-name-field-image-one">IMAGE</div>
<div class="body">BODY</div>
</div>
</div>
<script>$('.content .body').insertBefore('.content .field-name-field-image-one'); // check before() examples</script>
</body>
</html>
I've added the following code to a js file on my Drupal site:
(function ($, Drupal, window, document, undefined) {
$('.content .body').insertBefore('.content .field-name-field-image-one'); // check before() examples
})(jQuery, Drupal, this, this.document);
My .info file links to the js and it is loading. Other elements that require javascript are working too. I've even tried adding the script in the html.tpl file, but that did not work either.
The divs I am trying to affect are nested deep within the html markup, and have several classes applied to them, compared to the simple version I have made. Could that be the reason? Am I not being specific enough?
Thanks to some help, I've updated it to the following, and it works:
(function ($, Drupal, window, document, undefined) {
$(function() {
$('.content .body').insertBefore('.content .field-name-field-image-one'); // check before() examples
});
})(jQuery, Drupal, this, this.document);
You don't need to use Javascript to change the order of fields in a content type.
If you're using Drupal 7, go to Home » Administration » Structure (/admin/structure/types) and click "manage display" next to the content type you want to change. You can now drag and drop the fields to change their display order for each view mode (e.g., Default, Teaser).
If you really want to use Javascript to do this, Drupal 7 uses a special syntax.
(function ($) {
Drupal.behaviors.custom_moveimage = {
attach: function (context, settings) {
$('.content .body').insertBefore('.content .field-name-field-image-one');
}
};
}(jQuery));
The Drupal documentation has more information about this.

Categories