Accessing a css file with jQuery (or other library) - javascript

I've already searched for how to get the css file and found that you can use $.get('file path', callback) to actually get the file.
First question. I can get the content of the file, but it is a long string. Is there a method to search that file? For example, if there was a particular selector in the CSS file, can I use jQuery or some other library to retrieve the styles in a convenient form.
Second question. The reason why I want this is because I'd like to do some animations with data gotten out of the CSS file. First of all, is this possible? Second, is this recommended?

Once you retrieve the file, you need to parse it. I'm not sure if there are any CSS parsing engines out there, but if there are, they're all based off of regex expressions. If you're looking for something in particular, it might be wise to just write your own regex pattern for it.
As for doing animations... yes? I don't know exactly what you need to the data for or what you plan to do with it, but yes, you can always animate something. I can't make any recommendations because I don't know exactly what you're trying to do.

Related

How can I parse a JSON file with comments in client-side Javascript? (Don't need to preserve comments.)

First, I know that JSON doesn't support comments. I'm using them anyway because I need to write little notes to make it easy for people who aren't tech-savvy to edit this file.
I'm using double-slash comments, but I can switch to slash-star if needed.
"campaignID": "230109-stock-shop", // this is the method I want
I know the technique of creating extra comment fields like this, but it doesn't fit my needs.
"__comment": "this ISN'T the method I want"
I'm working entirely in client-side Javascript/jQuery. When I import a file with comments, it - of course - doesn't work.
$.getJSON('file.json', function (json) {//do things})
Is it possible to strip out the comments when importing the JSON file somehow? I tried to find a JS library or something that would do that, but everything I found is server-side, and I need everything to run client-side.
I'm also not super great with Javascript, so it's possible I'm missing something obvious.
I really appreciate any help you can give!
You can remove all the comments before trying to parse it.
You won't be able to use $.getJSON(), since that tries to parse the JSON itself. Use $.get(), remove the comment and parse it.
$.get('file.json', function(commented_json) {
json = JSON.parse(commented_json.replace(/\/\/.*/g, ''));
// do things
}, "text");
Note that this won't work properly if any of the strings in the JSON contain //. That would require using a real JavaScript parser so it can distinguish the context.

Duplicate an HTML file (and its content) with a different name in Javascript

I have an HTML file with some Javascript and css applied on.
I would like to duplicate that file, make like file1.html, file2.html, file3.html,...
All of that using Javascript, Jquery or something like that !
The idea is to create a different page (from that kind of template) that will be printed afterwards with different data in it (from a XML file).
I hope it is possible !
Feel free to ask more precision if you want !
Thank you all by advance
Note: I do not want to copy the content only but the entire file.
Edit: I Know I should use server-side language, I just don't have the option ):
There are a couple ways you could go about implementing something similar to what you are describing. Which implementation you should use would depend on exactly what your goals are.
First of all, I would recommend some sort of template system such as VueJS, AngularJS or React. However, given that you say you don't have the option of using a server side language, I suspect you won't have the option to implement one of these systems.
My next suggestion, would be to build your own 'templating system'. A simple implementation that may suit your needs could be something mirroring the following:
In your primary file (root file) which you want to route or copy the other files through to, you could use JS to include the correct HTML files. For example, you could have JS conditionally load a file depending on certain circumstances by putting something like the following after a conditional statement:
Note that while doing this could optimize your server's data usage (as it would only serve required files and not everything all the time), it would also probably increase loading times. Your site would need to wait for the additional HTTP request to come through and for whatever requested content to load & render on the client. While this sounds very slow it has the potential of not being that bad if you don't have too many discrete requests, and none of your code is unusually large or computationally expensive.
If using vanilla JS, the following snippet will illustrate the above:
In a script that comes loaded with your routing file:
function read(text) {
var xhr=new XMLHttpRequest;
xhr.open('GET',text);
xhr.onload=show;
xhr.send();
}
function show() {
var text = this.response;
document.body.innerHTML = text;//you can replace document.body with whatever element you want to wrap your imported HTML
}
read(path/to/file/on/server);
Note a couple of things about the above code. If you are testing on your computer (ie opening your html file on a browser, with a path like file://__) without a local server, you will get some sort of cross origin request error when trying to make an XML request. To bypass this error, either test your code on an actual server (not ideal constantly pushing code, I know) or, preferably, set up a local testing server. If this is something you would want to explore, its not that difficult to do, let me know and I'd be happy to walk you through the process.
Alternately, you could implement the above loading system with jQuery and the .load() function. http://api.jquery.com/load/
If none of the above solutions work for you, let me know more specifically what it is that you need, and I'll be happy to give a more useful/ relevant answer!

use multiple files with same code or only one file and distinguish?

The first thing, I have already searched the site for a long time now, but found no solution for me.
I have a homepage where the user can look at some pictures. Each picture will displayed separately and has different informations like tags, a description, a name and so on. Also the picture has comments, which contain replies. For that I have some code that consisting of several segments. Everything works with ajax.
If the user want to get more comments or would like to edit the informations of the picture or would like to see more pictures, I always have to use a view segments of the code (also ajax).
The question I have is, whether it's better to use multiple php and javascript files for and require them, like:
get more comments
get more replies
edit informations
and so on
or only that one file and differentiate what code i need? In the second solution, javascript would send a variable, so that I can distinguish.
My worry is that when I use multiple files, I also have several times the same code. And isn't this bad for the performance?
Thanks for helping!
Try to keep everything DRY (don't repeat yourself), but also split things into files so that each one has their own responsibility. If some code is shared by multiple things, then put that into a different file and include it before the other code is executed.
Like you would with a class. You have your class Job for example and then your classes Doctor, Programmer etc extend that class. That way you can share code across different classes without having duplicate code.
Try to apply the same idea to your files.
I would suggest that every time you have code that needs to be used more than once, don't rewrite it. Instead write it as a function or method of a class and use parameters to make it do "slightly different things"

What does 'x' mean as the last letter in `src` attribute

In some projects I noticed that javascripts included into HTML like this:
<script type="text/javascript" src="./js/score.js?x"></script>
What's mean last 'x' symbol?
It is a query string which may be used to pass variables to the script.
It will help to overcome cache problems as well.
If I had to guess, I would say the X is being used as a querystring fragment. Unless the server is depending on the fragment being there, it could possibly be used as a cache buster.
Essentially, by changing that X to a Y we could make the browser fetch a fresh copy. This is useful if you need to make sure users get a new copy of a file.
Of course, without talking to the author we are just guessing. Perhaps the server needs it there to properly build the file in the first place. Or maybe the javascript itself is using it.
It is not a symbol. It is a piece of query string like on web scripts it would be something like test.php?reload=true
Such techniques might be helpful to overcome the caching problem as mentioned by SLaks on the comments.
You can pass parameters to your javascript.
It can be used to initiliaze variable or be used somewhere.
Take a look at this link http://feather.elektrum.org/book/src.html

How/when/where to include external javascript

I'm looking for some advice on the best way to hold my JavaScript (jQuery) functions.
I am developing in MVC/razor and therefore have a layout page. I include my jQuery library and an external JavaScript file in here so it's available in every single page.
This is working well, but I am now becoming very aware of the fact that I am adding almost 300 lines of JS to EVERY page, where maybe half of that is used in any one of these pages.
One function is not in the external file and instead sits inside the HTML because I need to use variables set in my razor code.
I have a couple of questions around this arrangement:
Is placing JS inside the HTML generally acceptable when variables set using razor are used? There does not appear to be a clean way of passing a variable into an external js file
Should I split my functions down in to individual JS files and just include what is needed for each page in the site?
If I were to split them into multiple files, how would that work with jQuery's (document).ready ? Do I need to use that if all the JavaScript I am including is to be used?
I'm sure this will more a matter of opinion than a black and white answer, but I want to consider all my options before moving on. Even though it works fine as is, I can't help but feel there is a better/cleaner way.
Remember once a user lands on your homepage and loads the javascript file it will be cached in their browser so subsequent pages will not download the Javascript again.
I would definitely keep the js separate, you could have a snippet on each page that initialise the JS that that particurlar view needs. Put something like the below in the views that need to run JS
$(document).ready(function() {
mysite.mypage();
});
Then the function mysite.mypage() can be defined in the external JS file.
300 lines isnt the end of the world, I would say its probably too early to be worryign about optimisation.
You could always look at minifying that JS file to decrease the size. A quick and easy way to do this is here:
http://www.minifyjavascript.com/
Have you ever heard of require.js? http://requirejs.org/ I find it really useful.
It's a module loader so you are able to split all of your JS code into individual files and load only the ones you need on each page.
I don't know about passing a variable to an external JS file, I don't think its possible / the 'right' way.
You can make each external JS file into a function that accepts and returns parameters. Then in the page you need to use it:
- include the file dependancy
- call the function
Thats what I do, seems like your 2nd suggestion.
for the $(document.ready) question its really up to you. You don't have to use it but its useful for some things , check out this overview:
http://docs.jquery.com/Tutorials:Introducing_$(document).ready()

Categories

Resources