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.
Related
I want to modify the CSS file using data that I get from the database. So, after the login, I am getting all the necessary data from DB and update styleSheet using insertRule/deleteRule methods then, redirect to the main page.
Login -> Theme engine page (modify css) -> home page
Theme engine page (theme.html) is an empty HTML page with one JS file (themeEngine.js) which modifies CSS file.
I checked the stylesheet in theme.html it is same as the expected result but, when it redirects to home page the CSS file goes back to its default version. The methods insertRule/deleteRule is not altering an actual file!
I tried importing themeEngine.js to every existing HTML file but in that case, default style appears (for a little amount of time, depending on the internet speed) before the theme engine starts to work and importing js file to every page is quite inconvenient.
I would like to know how can I solve this problem: having a custom style for every user. Is it possible to edit an actual CSS file using JavaScript?
Browsers can't change data on a server without explicit support from it by the server. (Imagine how long the Google homepage would survive otherwise!)
Typically you would need to pick a server-side programming language, use it to write an API, and then interact with it using Ajax.
I'm trying to find a code in Javascript to make one header for multiple pages in HTML put i culdn't find can you please advise ?
Javascript is a client-side language, executed in a single-page-environment by the client (normally a browser).
If you want your site to take advantage of templating across multiple pages
eg. including the same header on multiple pages
then you are better off using a server-side language executed by the server.
Server-side languages include:
PHP
ASP
Ruby on Rails
Node.js
and others.
You could use a html preprocessor (for example Jade). There's something called mixins. Mixins allow you to create reusable blocks of code.
Create the common header and place in its own file. Then in all other pages, create an empty element with an id of something like "header". Then have each page make an AJAX call upon page load to fetch that file and place the result of the AJAX call in the empty div.
You could also do this with an iframe and just set its source to the header file.
I have a website and want to have links to a page which has a filter function. I would like to create a link in such a way that when followed I do not simply get the destination page, but rather the page with a filter already applied.
To be more specific I am looking at the website for NetCDF CF standard names. From my page I would like to have link that would already filter e.g. for 'longitude' on the destination page.
The destination page is using javascript to apply the filter function.
Any ideas how to achieve that?
It's impossible to control a JS on a site from an external URL.
But you can do a something else: Download the data from the external site to your server via a server-side script (like php), and recreate the filters on your site in JS. But this way you should care about copyrights and you have to maintain your script if they changed the table structure they used.
Im using a array to display some images in a website:
var paintingImages;
paintingImages =
[
{
url: 'images/objects/ron.jpg',
alt: 'ron'
}
];
This js code is written in paintings.js and my main js code is written in the file main.js
I have made this website for a artist and I want to give him the opportunity to login and add pictures to his website. I'm not that good with php, but adding images to a ftp in a folder is no problem.
Because I'm using a array for retrieving the images, I need to be able to add items to the array.
This is the part where I'm stuck. I don't know how to edit a existing js file, so the next time I open the website, the items (images) will been shown.
Activexobject is not a option because it's only possible in IE.
In summary:
I need to add a item to a array
I need to save this into the file, so the next time the website opens, it will be shown
I'm not verry good with php, I prefer javascript
Can't use Activexobject because of the use of multiple browsers
You can not simply modify a javascript file sitting on the server from browser side javascript.
You need to implement some server side logic.
If you don't like PHP, but like JavaScript, check out NodeJS for example.
With Node you should be able to build some lightweight serverside logic to modify your json array file with additional images.
You would need to change your logic .. You need to send this data to server anyhow . and when you load your next time take it back from server and update your webpage accordingly. I would suggest use any javascript MVC framework like backbone, angular.js. it will help you.
Use a database.
Save it to a database server (You figure this out, could be via forms, xhr, websockets, etc.).
On page load, load the correct data for the current user.
Create the $userPaintings array (call it what you want) from the user data in PHP.
Then simply output a JS object in the page with PHP:
<script>
var paintingImages = <?php json_encode($userPaintings); ?>
</script>
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.