I am currently trying to implement a jquery slider into a joomla website.
I already implemented NoConflict(); so that it doesn't step into joomla. And it works, BUT for another reason wich I do not understand it enters another jquery file called jsloader.js of a plugin I use for picture gallery display.
I suppose all the module jquery files get preloaded before the one im calling inside the template.
it enters the function() in the jsloader.js instead of the one in my jquery file.
How Can I force it to enter my jquery file instead of other
The first problem is that you've got the jquery.js file coming after the jsloader.js file. You need to make sure that jquery.js is included before any plugins - the order is important.
The second problem is that this:
<script type="text/javascript" src="//templates/template/js/jquery-1.2.6.min.js"></script>
Doesn't do what you think. When there are two slashes at the beginning of the URL, the browser interprets the first entry after the double-slash as the hostname, not a directory. What you actually want is:
<script type="text/javascript" src="/templates/template/js/jquery-1.2.6.min.js"></script>
With only one slash.
In case you're wondering, the reason for this is so that you can specify a file on a different host, but using the same scheme. So if you have a page that works in HTTP and HTTPS, then you can specify files on a different site, using the same scheme (HTTP vs. HTTPS) by using the src="//example.com/script/whatever.js" format.
Related
I have a JavaScript file called newsletter_init.js and it makes an Ajax request.
I add this JS file to every .php on my project and the issue here.
For example I use newsletter_init.js in my index.php and a URL for the ajax request will be res/ajax/request_newsletter.php.
Ok, that's working but when I add the same JS file on another directory for example adding newsletter_init.js on a index.php but placed on blog folder the URL will be invalid as it will search for ../res/ajax/request_newsletter.php instead of res/ajax/request_newsletter.php.
File structure about the scope:
index.php
blog > index.php
I have another way to do this:
Add content of newsletter_init.js on every file and change url but this is not a good way to approach this.
I have tried to use __DIR___ in PHP but i don't understand how to use it in this situation.
I have tried $(location).attr(pathname); in jQuery but it return the fild name also for example localhost/homepage/index
I can't use a direct url as i will change from localhost to my site so, i need a dynamic way.
Just ensure your path is relative to the root directory.
/res/ajax/request_newsletter.php
Not:
res/ajax/request_newsletter.php
If you don't add the first slash, it will try to find that path starting in the directory where you are making the call (i.e. wherever your current PHP script is running).
I am trying to use the following library https://github.com/davidjbradshaw/iframe-resizer/ to resize an iFrame which is positioned inside an other iFrame.
What I tried is to:
copy the minified files of the library in a /assets/lib folder of my app.
add a link to the minified files of the library in the header of the first iFrame:
<script src="/assets/lib/iframeResizer.min.js"></script>
<script src="/assets/lib/iframeResizer.content.min.js"></script>
<script src="/assets/lib/index.js">
This last index.js file only exports the 2 previous files (using export and require). -> This creates an error export is not defined, and require is not defined.
Then, when I add an iFrame that needs to be resized, I use jQuery to insert the script that uses the library:
var script = '<script class="iframe-resizer">iFrameResize({checkOrigin: false}, ".content-card")</script>';
$('.fr-iframe').contents().find("body").append(script);
If I don't add the index.js file, I get the following message "iFrameResize is not defined"
Does anyone have an idea how I could find a workaround?
In fact, the library supports nested iframes.
Requesting the iFrameResizer using jQuery was the best solution I found.
Thanks to this I don't have to install the library manually in the header of the iframe, which simplifies the solution.
I went to the jQuery download page and tried to download the uncompressed version of jQuery, when I left clicked the bottom left download button it seemed to start to download.
Then a dial appeared, which asked for permission to download the file, after accepting, it comes up with the following error:
Error: 'document' is null or is not an object
Code: 800A138F
Origin: Error at the time of running Microsoft JScript
Then tried right clicking the link and using the save as option to save it to the desktop under the filename jquery.js.
However, this failed to load jQuery as well and the same error appears when I try to link it to my website.
This is the filepath I'm using:
C:\Users\Mafe Cardozo\Desktop\jquery.js
And the actual jQuery file that I'm writing the code in to the html file as well is also in the same directory, assuming both links be written in the <head /> element(?)
Just use the CDN which you link to your html file by this line of html in your head tags.
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
This will give you the latest version of the minified jquery. You can choose uncompressed or versions here.
There are many choices for CDNs such as Google. CDNs are from the web and are not local.
Alternatively, download the source here and then save it in the same folder of your html file. This will save the file locally. Then link it like so:
<script src="jquery-file-name"></script>
If you will have access to the internet when you are needing to use Jquery, then just use a JQuery CDN. That way you don't have to worry about downloading the whole library to your computer and making sure it is in the right spot.
Go to a site like this, click on the "copy" tag on the right, and copy the whole script element. Then paste that into your head/end of your body. For more information, look at the following posts about accessing the Jquery library.
Microsoft CDN for jQuery or Google CDN?
Benefits vs. Pitfalls of hosting jQuery locally
Just to add to the other answers, you are trying to access the js files with the https protocol, and apparently, it doesn't work. Just remove the https from the url or change it to http (https://code.jquery.com/jquery-2.2.4.js -> http://code.jquery.com/jquery-2.2.4.js) and it should work.
I have a javascript file that other people use on their site. It creates a button and loads a css file that is hosted on our server:
style.setAttribute('href', 'http://mysite.com/assets/some.css');
The user can call it in their site like so:
<script type="text/javascript" src="http://mysite.com/global.js"></script>
I want to give the user the ability to upload their own CSS file on my web app that will replace the one that I am setting in global.js.
Currently, I added a custom_css:binary column in the Users table that will hold the CSS file, but this requires the user to stay signed in on the site. I'm not sure if this is the right way to approach this or if there is a better way to do it. Also, what are some security risks to this approach?
I'm using RoR for the backend.
Any help would be great!
UPDATE 1
I'm able to store the uploaded JS file and load the custom CSS, but it's currently checking the current_user - this means the stylesheet will not be rendered for the users. How can I work around this?
I was able to find the solution myself.
There are several ways to approach this:
Add a query string to the JS src
Scrape the page for a certain element that gets generated by your script
I opted for option 1. When I detect a dynamically generated query string, I send that over to the controller in the params hash and load the css file accordingly.
I have the following problem which I'm trying to solve with javascript. I have a div with a background image specified in a css file, and I want my javascript to change that image periodically (let`s say every 5 secs).
I know how to do that, the problem is that I have a folder of images to choose from for the back image. I need to be able to read the filenames (from the image folder) into an array, change the background image of the div, delay for 5 seconds and change again.
in your javascript, use an array like
var images = [ "image1.jpg", "image2.jpg", "image3.jpg" ];
function changeImage() {
var image = document.getElementById("yourimage");
image.src=$images[changeImage.imageNumber];
changeImage.imageNumber = ++changeImage.imageNumber % images.length;
}
changeImage.imageNumber=0;
setInterval(changeImage,5000);
The values in the array should be generated by your php
You're still going to need php or asp to query the folder for files. Javascript will not be able to "remotely" inspect the file system.
You can do something like the following in jQuery:
$.ajax({
url: 'getFolderAsArrayOfNames.php',
dataType: 'json',
success: function(data) {
for(var i=0;i<data.length;i++) {
// do what you need to do
}
});
});
And in your getFolderAsArrayOfNames.php, something like this:
echo "function "
.$_GET['callback']
."() {return "
.json_encode(scandir('somepath/*.jpg'))
."}";
If you are using Apache as your
web server, and
if you can configure
it to provide a default directory
listing for your images folder (use
the appropriate options in
httpd.conf and/or .htaccess), and
if you don't care that the list of
images is available to everyone who
visits your web site,
then you don't need PHP or any other server-side processing.
You can use XMLHttpRequest (or the jQuery ajax function, which is a nice wrapper) to get the listing for the folder. The response will be HTML and it will look something like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<html>
<head>
<title>Index of /demo1/images</title>
</head>
<body>
<h1>Index of /demo1/images</h1>
<pre><img src="/icons/blank.gif" alt="Icon "> Name Last modified Size Description<hr><img src="/icons/back.gif" alt="[DIR]"> Parent Directory -
<img src="/icons/image2.gif" alt="[IMG]"> tree.gif 17-Mar-2009 12:58 6.2K
<img src="/icons/image2.gif" alt="[IMG]"> house.gif 17-Mar-2009 12:58 6.5K
<img src="/icons/image2.gif" alt="[IMG]"> car.gif 02-Mar-2009 15:37 8.4K
<img src="/icons/image2.gif" alt="[IMG]"> elephant.jpg 02-Mar-2009 15:37 3.4K
<hr></pre>
<address>Apache/2.0.63 (Unix) Server at zeppo Port 80</address>
</body></html>
Since this output is pretty predictable, you might try parsing out the filenames using a JavaScript regular expression, but it's probably just as easy and more robust to create a hidden DIV on your page, put the HTML response into that DIV, and then use DOM methods to find <a href>s that are after <img> tags with an alt="[IMG]" attribute. Once again, using jQuery Selectors or similar helper methods available in other toolkits will make this DOM parsing pretty easy.
Once you have the URL of the new image (parsed from the href), you can set the new CSS background for your div with the .style.backgroundImage property.
You cannot do any file IO using JavaScript mainly because of security reason, so anyway you have to create some back end service which will update you with an list of available files in your folder. You don't have to do it in a hard way, you can use AJAX to it smoothly and nicely
You can't read a folder's contents, neither on the server nor on the clientside.
What you can do is to read the folder's contents with the help of a serverside script, and load it to a JavaScript array while processing the page.
This would not be ideal but in the absence of server-side processing (which you really should be doing--either PHP or Rails or Perl or whatever your host supports), you could allow directory listing on your images folder. This has security implications.
Then loading e.g., http://mysite.com/rotatingImages should respond with a list of files. You could do this with AJAX, parse out the relevant hrefs, push them onto an array and render your rotating images in JS.
You must send the list of names along with the JavaScript and then iterate through it.
A noted above, you can not access server's system from a client's browser (which is where JavaScript runs).
You have 3 possible solutions:
Create the JavaScript file via some dynamic back-end (php or perl scripts are best for that).
The main JavaScript function could still be static but the initialization of the array used by it (either as a snippet on the main HTML page or a separate .js imported file) would be a php/perl generated URL.
A recent StackOverflow discussion of the topic is at link text
Make an XMLHttpRequest (AJAX) call from your JavaScript to a separate service (basically a URL backed by - again - php/perl backend script) returning XML/JSON/your_data_format_of_choice list of files.
This is probably a better solution if you expect/want/need to refresh a frequently-changing list of images, whereas a pre-built list of files in solution #1 is better suited when you don't care about list of files changing while the web page is loaded into the browser.
An un-orthodox solution - if browsers you care about support animated background images (gif/png), just compile your set of images, especially if they are small sized, into an animated gif/png and use that as background.