jQuery effect expression engine - javascript

I have searched for a source which describes the steps for implementing jQuery into an expression engine site and have yet to find a good one.
I am trying to initiate a simple slider effect for some images, using sliderPro. sliderPro has number of assets which I have uploaded into my expression js directory. Using the documented method on EE, this is how I'm calling those files:
{exp:jquery:script_tag ui='core'}
{exp:jquery:script_tag effect='sliderPro'}
{exp:jquery:script_tag file='src/js/'}
{exp:jquery:script_tag file='src/css/'}
{exp:jquery:script_tag file='lib/sliderPro'}
{exp:jquery:script_tag file='lib/fancybox/'}
I used all the html markup from silderPro: classes and ids for my images. When inspect Element, I do not see the passing of any of the jQuery functions? If someone could either identify what I'm missing, problem(s), or direct me to a resource which walks through the steps for implementing jQuery into an EE site, I would appreciate it. Thanks.

Call me old fashioned, but what's the point of using ExpressionEngine tags for this? Far better performance (no extra database calls, no server side file lookups, utilise mutliple remote library synchronous in browser), better control and far less grief to just insert the html tags yourself - far outweights the benefit of hiding the URL to the JS resource.
According to the docs, your second line looks wrong and should be:
{exp:jquery:script_tag plugin='sliderPro'}
The effect parameter would be requesting part of the JQuery UI library, not a third-party library. Also you specify 3 folders in the script tags, the documentation states specific files without extension - not folders. I can only assume it's not working for you because all the required JS lines are not being inserted into the page. If the above changes still don't work, what does the html output result in? Are there any JS errors in the console?
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="/assets/fancybox/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="/assets/fancybox/jquery.fancybox.pack.js?v=2.1.5"></script>
<link rel="stylesheet" type="text/css" href="css/slider-pro.min.css" media="screen">
<script type="text/javascript" src="js/jquery.sliderPro.min.js"></script>

Related

Angular custom scripts loader

I have an Angular 7 CLI app which is served by ASP.NET MVC.
In Index.cshtml file I have these lines:
<script type="text/javascript" src="~/app/runtime.js"></script>
<script type="text/javascript" src="~/app/polyfills.js"></script>
<script type="text/javascript" src="~/app/scripts.js"></script>
<script type="text/javascript" src="~/app/vendor.js"></script>
<script type="text/javascript" src="~/app/main.js"></script>
Everything works fine.
However sometimes during development these files are not generated due to compilation errors etc.
I'm wondering is there a way to write a custom manual loader that will try to fetch these files and if any of these are not found will pop up a nice message to the developer.
Basically a really simple pre-loader to the application.
Any input is greatly appreciated.
In my case, what I do when it comes to altering the index.html is having a controller, which I call SpaController with an Index (default) action. Then, I load the index.html file (which is really small) and patch it with all the changes I want to apply. After being patched and downloaded on the browser, the rest of the communication is done through API REST, so it's just a small patch.
In your case, I would use that action of that controller I mentioned above and check if all the tag scripts are included. If not, you have flexibility to alter index.html and do what you want, like showing an error, or even stop the application.

How can I use bootstrap javascript library without accessing Internet and local file system?

I am developing a web page with the javascript bootstrap library for UI and layout design. It will run off an Android tablet.
It may work in an offiline environment and it cannot access the local file system. It means <script src='{Url to js file}'></script> won't work.
How can it access the bootstrap css and js files? Can then be included as inline codes in the html?
CSS can be included in following ways in an HTML
Using CDN (Internet)
Using local file system(external stylesheets)
using internal stylesheets (<style>)
Placing Inline styles
Considering the above, you have only one case left, i.e. include all styles in tag and make it work. You may apply checks that internal stylesheets should work only when it's offline mode.
You can use local file:
you have tow ways to do it:
download the files and put them in your project folder and creat links/script to those files:
<script src="folderInProject/bootstrap.js"></script>
the links below contain the code :
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
simply go to the url and copy the code inside to your local js/css files:
for example go to this link and copy the code:
https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css

How sets location of HTML,Javascript and CSS files for create a table?

http://jsfiddle.net/davidThomas/dYnqv/
I use that code. I create a folder which names tableEx. Then I put (table.html) and others(folder). In others folder I put (table.js) and (table.css).
Then I opened html file with notepad++ and referenced like that =>
<script src = "others//table.js"> </script>
<link rel="stylesheet" href="others//table.css"/>
table.css is work but table.js is not. why?
You need to combine answers of these two guys. jeff's telling you to replace // for just / and what the other guy is saying is, that the jsfiddle link you took the code from has built-in javascript library called jQuery, in what your javascript code is written in (see the dollar symbol ? it's one of the jquery-specific identifier)
So for your code to work on your computer, you also need to call for this library jQuery, you don't have to download it (but can), simply use some online ones (CDN) by inserting this external js call in html tags, preferably before your js file so it already knows what language it is written in:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

HTML if statement to load local JS/CSS upon CDN failure

When loading a CSS/JS file from CDN or any external server, it is possible (even with low probability) to miss the file due to external failure. In this case, the html page will be corrupted in the lack of appropriate CSS and JS.
Is there a practical approach to load a local version upon CDN failure?
<link rel="stylesheet" href="http://cdn.com/style.css" type="text/css" />
IF (not loaded style.css){
<link rel="stylesheet" href="/css/style.css" type="text/css" media="screen" />
}
It would be easier to do this for JS, as we can test a JS function (provided in the JS file); then, loading the local file upon failure. For example, testing, if jQuery library is available.
However, I am curious to know if there is a practical method for this!
I would do it this way.
Create a class within your stylesheet ui-helper-hidden and then add a div as the first element on your page;
<body><div class="ui-helper-hidden"></div><!-- rest of html --></body>
After you have checked to make sure your CDN javascript file has been loaded, then use this bit of code note i am using jquery
<script>
// CSS Fallback
$(function () {
if ($('.ui-helper-hidden:first').is(':visible') === true) {
$('<link rel="stylesheet" type="text/css" href="/pathtocss/nameofstylesheet.css" />').appendTo('head');
}
});
</script>
This will check to see if the element which should be hidden is or not. If it isnt hidden, then you know your css file has not loaded from the CDN.
I use this method for jQuery and jQuery UI via a CDN
For Javascript, you can listen for the onload and onerror events when building a dynamic script. However, in those same pages, it shows otherwise for CSS.
The only reliable way to dynamically load CSS is to do it via AJAX. You could load the styles via dynamic link tags but without those events, you won't know if they have been loaded at all. You could poll for the styles, but it's hackish IMO.
Another way to do it is make the server read those CDN files. If they're good, print the urls for the links. But if those links are dead, make it print the local urls instead. This would be more reliable, and offloads your logic to the server. This assumes that you have access to the server.
Or better, use the local versions in the first place! With good caching, bandwidth won't be an issue

How can I create dynamic sources (src) for link and script tags using jsp and javascript

I have a jsp file that passes a parameter to another jsp file. This parameter is of type string and takes the value of a folder name in the web server path (i.e. http://myserver.com/Page/Folder_Name).
In the second jsp file, I have quite a few js and css files I'm attaching using script and link tags, respectively. I need to make their paths relative to the parameter passed. My thought-process is construct dynamic source (src) paths using jsp tags and javascript.
<head>
<link rel="stylesheet" type="text/css" href="Folder_Name/css/style.css" />
<script type="text/javascript" src="Folder_Name/js/script.js"></script>
</head>
Except Folder_Name will be dynamic, utilizing JSP somehow. At least, that's my mindset.
The question is how may I accomplish this? I'm open to other suggestions, with the initial condition of said parameter is passed to the second jsp page.
Thank you.
Why do this with JavaScript? If it's already a JSP page, you're already doing server-side processing, so it seems like you'd want to use Java. E.g., once you have the folder name in a variable (say, folderName), just do this to output the links:
<head>
<link rel="stylesheet" type="text/css" href="<%=folderName%>/css/style.css" />
<script type="text/javascript" src="<%=folderName%>/js/script.js"></script>
</head>
(Note the <%=folderName%> bit, which runs on the server and outputs the value of the server-side folderName variable.) Or if you're using a container that supports the JSP expression language, use ${folderName} instead:
<head>
<link rel="stylesheet" type="text/css" href="${folderName}/css/style.css" />
<script type="text/javascript" src="${folderName}/js/script.js"></script>
</head>
You certainly could use JavaScript for the task, if you want, but I'm not sure it makes sense. You could use Rhino (JavaScript for the JVM) on the server, of course. If you're talking client-side, you'd basically have to echo the folder name into a place where the client-side JavaScript can find it (so, output it to a dynamically-generated global variable — <script>var folderName = '<%=folderName%>';</script> for example — or to a hidden input, or whatever), and then have your JavaScript add the necessary script tags via document.createElement, set their src, and append them to the head or body (doesn't matter where), but it seems a very round-about way to do it if you're already doing server-side processing.

Categories