js not working when page not on same folder with masterpage - javascript

Im using a responsive menu code which uses document.getElementById to trigger the menu.
It works for pages that are on the same folder as the masterpage. However for pages on a seperate folder, the menu isn't popping up.
Sample of the code:
<body>
<div class="mp-pusher" id="mp-pusher">
<nav id="mp-menu" class="mp-menu">
</nav>
</div>
<a class="codrops-icon codrops-icon-prev" href="#" id="trigger"><span>Menu</span></a>
<script src="/CodeTest/js/classie.js"></script>
<script src="/CodeTest/js/mlpushmenu.js"></script>
<script>
new mlPushMenu(document.getElementById('mp-menu'), document.getElementById('trigger'));
</script>
</body>
The script has to be in the body of the html for some reason as when I moved it up into the it doesn't work.

Try this,
<script type='text/javascript' src='js/classie.js'></script>
<script type='text/javascript' src='js/mlpushmenu.js'></script>

You need to show to the browser where to look for the JS file on the file you want to call the JS file.
If your JS file is in a folder called JS that is inside a folder called CodeTest, and you want to call this file in an html inside a folder called (for example) somethingFolder.. you should go back one level (. .) and then search for CodeTest -> js -> file.js, example:
src="../CodeTest/js/file.js"
Now if you want to call the JS file in a file that is on the same level of CodeTest folder, you must link without the dots (..), example:
src="CodeTest/js/file.js"

Related

Running a JavaScript as an external script in Laravel

I have a blade code like this:
<input type='text' id="input1">
<div >
<h3 id="showData"> Data will be shown here </h3>
</div>
<script>
var input=document.getElementById('input1').value;
document.getElementById('showData').innerHTML=input;
</script>
What I want is to write the script part in a separate file (say called externalScript.js) and call it here in the blade file.
Also, I have a doubt about it. If I do that, since the script is run from an external file, how will it fetch the id values like input1 or showData ?
Write a new file called: externalScript1.js
Add the script tag, best in the head or foot part of your code.
<script src="{{ asset('externalScript1.js') }}" defer></script>
(the asset helper gets the path to the public folder, https://laravel.com/docs/8.x/helpers#method-asset)
In the end everything will load from one page, ergo the elements are found, so you won't have a problem.
Just add js file in laravel resources directory, link to webpack and compile more info.
when it comes to executing the script, attach it at the end of the page (before </body>) or wait for the page to be loaded document.addEventListener('DOMContentLoaded', function() {})
Attach the js file in the main wrapper, not in the nested blade element

call js file from php

I have a js file called menu.js in the following path on my webhost
public_html/oc-content/themes/bender_black/js
$(document).ready(function(){
$("#nav-mobile").html($("#nav-main").html());
$("#nav-trigger span").click(function(){
if ($("nav#nav-mobile ul").hasClass("expanded")) {
$("nav#nav-mobile ul.expanded").removeClass("expanded").slideUp(250);
$(this).removeClass("open");
} else {
$("nav#nav-mobile ul").addClass("expanded").slideDown(250);
$(this).addClass("open");
}
});
This code is a responsive menu, I want it to be reciprocated on all my pages. I therefore tried to call it from my header.php file which is located in
public_html/oc-content/themes/bender_black
Here is part of what I put in header.php
<head>
<script type="text/javascript" src="js/menu.js"></script>
</head>
The menu is supposed to release a drop-down on smaller screens however nothing happens. Am I calling the js properly?
How can I fix this?
Script tags placed in the browser are loaded by the browser. You therefore need to provide a DocumentRoot relative path to the js file
<script type="text/javascript" src="oc-content/themes/bender_black/js/menu.js"></script>
It needs absolute path like:
<script type="text/javascript" src="http://mywebsite.com/oc-content/themes/bender_black/js/menu.js"></script>
But in Osclass case, you can register javascripts by internal PHP functions, which look like this:
Register the script:
osc_register_script('menu', osc_current_web_theme_url('js/menu.js'), 'jquery');
Enqueue:
osc_enqueue_script('menu');
If it uses jQuery, make sure you call the file after jQuery has been called.

Include another HTML file in a HTML file - with script execution

I have a part of html code which is repeating on every of my page and i want to reuse it.
There is already a very nice link:
Include another HTML file in a HTML file
I have used jQuery to load the html file (separate html file which i call template).
If that html file is static everything is working fine.
But if my template file includes the elements which are using class (CSS) which is using java script to load - then it's not being loaded. Even if in original html file i am referencing correct css/java scripts in head section.
Any ideas ?
Thanks,
If you wanna include page1.html into an Div with id insert-into-me . page2.html.
Then using Jquery this will work!
<html>
<head>
<script src="jquery.js"></script>
<script>
$(function(){
$("#insert-into-me").load("page1.html");
});
</script>
</head>
<body>
<div id="insert-into-me"></div>
</body>
</html>
Using JSP:
<%#include file="page2.jsp" %>
or
<jsp:include page="..." />
where you want to include in page1

Prepare jquery before jquery and page load

I have recently discovered the new trend of including all .js script at the end of the page.
From what i have read so far seems pretty ok and doable with an exception.
The way I am working is using a template like:
<html>
<head>
<!-- tags, css's -->
</head>
<body>
<!-- header -->
<div id="wrapper">
<?php
include('pages/'.$page.'.php');
?>
</div>
<!-- footer -->
<!-- include all .js -->
</body>
</html>
Now, if I want to use this example on my page http://www.bootply.com/71401 , I would have to add the folowing code under my jquery inclusion.
$('.thumbnail').click(function(){
$('.modal-body').empty();
var title = $(this).parent('a').attr("title");
$('.modal-title').html(title);
$($(this).parents('div').html()).appendTo('.modal-body');
$('#myModal').modal({show:true});
});
But that would mean I either use that in every page - even if I do not have use for it, either generate it with php in the $page.'php' file and echoing it in the template file, after the js inclusion.
I am sure though, better methods exist and I don't want to start off by using a maybe compromised one.
Thanks!
Please avoid using inline scripts as they are not good maintainable and prevent the browser from caching them. Swap your inline scripts in external files.
Fore example you could put all your JavaScript in one file an check the presence of a specific element before initialize the whole code. E.g.:
$(document).ready(function(){
if($('.thumbnail').length) {
// your thumbnail code
}
});
A better way to execute "page specific" JavaScript is to work with a modular library like requirejs. You can modularize your scripts depending on their functionality (like thumbnails.js, gallery.js etc.) and then load the necessary script(s) depending e.g. on the existence of an element:
if($('.thumbnail').length) {
require(['ThumbnailScript'], function(ThumbnailScript){
ThumbnailScript.init();
});
}
The best way you can go is create a separate file for this code.
Let's name it app.js. Now you can include it under the jQuery inclusion.
<script type="text/javascript" src="app.js"></script>
This will prevent code repeat.
One more thing, pull all the code in $(document).ready(). Here is an example. So your app.js file will look like this:
$(document).ready(function(){
$('.thumbnail').click(function(){
$('.modal-body').empty();
var title = $(this).parent('a').attr("title");
$('.modal-title').html(title);
$($(this).parents('div').html()).appendTo('.modal-body');
$('#myModal').modal({show:true});
});
})

conditional change of script tag based on url routing mvc 3

I am using requireJS for my hybrid app . Now I need to change the script tag located into my layout page with conditions on url . The script tag looks something like this
<script data-main="#Url.Content("~/Scripts/main")" src="#Url.Content("~/Scripts/Libs/Requirejs/require.min.js")" type="text/javascript"></script>
Now when the page loads the /Home/Login the script tag above should be changed to
<script data-main="#Url.Content("~/Scripts/login")" src="#Url.Content("~/Scripts/Libs/Requirejs/require.min.js")" type="text/javascript"></script>
Again when I load the page /Mail/Index The script tag above should change to
<script data-main="#Url.Content("~/Scripts/mail")" src="#Url.Content("~/Scripts/Libs/Requirejs/require.min.js")" type="text/javascript"></script>
Now Note that All of the three pages uses the same **_Layout.cshtml** page . And the above script tag is located in **_Layout.cshtml** page only .Now how do I track this scripts to change the script tag on change of the Url routing as mentioned above ?
I'd simply use a section for this. In the layout page:
#RenderSection("RequireScripts")
And put the script in each page:
#section RequireScripts {
<script data-main="#Url.Content("~/Scripts/main")" src="#Url.Content("~/Scripts/Libs/Requirejs/require.min.js")" type="text/javascript"></script>
}
If you're after a way to avoid re-writing the whole thing (only requiring the relative path), then I suppose you could make use of the dynamic Page variable:
#if (Page.RequireScript != null)
{
<script src='~/Scripts/#Page.RequireScript'></script>
}
Then the script block would get output to pages that define RequireScript.
#{
Page.RequireScript = "Libs/Requirejs/require.min.js";
}

Categories

Resources