check if less file exists or not - javascript

I'm wondering if it is possible to check if a particular less file has called in the header section.
If it is there, I'd like to perform some js action.
Do you know any solution how could I check this?
Thank you in advance!

if ($('head link[href$="yourFileName"]').length) {
// ... (do your thing)
}
But as #LeoJavier suggests, you'd be looking for a .css file, not .less.

The browser doesn't read less files... it reads the css file generated by the less file.

You can use normal jQuery or javascript selectors to access the link element and then do your logic based on if the href is the path to the file you are referencing.
For example javascript to select the link element and href:
var linkElement = document.getElementsByTagName("link");
var linkHref = linkElement.getAttribute("href");
Note: I assume you mean CSS file rather than LESS file?

Related

Is there a way to use javascript to change the css of multiple html files?

Im using this code, it only affects the file (my settings.html file) where i change the value of the background color:
function background() {
`var x = document.getElementById('color').value;
document.body.style.backgroundColor = x;
}
color is the id of the input.
But how can i affect multiple html files with this?
Every time you navigate to another page, your HTML and JS script will be refreshed, and therefore you will lose your changes.
A possible solution is to use a cookie or the browser's localStorage in order to save the value of the desired color. Then, it can be reused when navigating pages.
Example of setting a cookie using JS:
https://www.w3schools.com/js/js_cookies.asp
Example for localStorage:
https://www.w3schools.com/jsref/prop_win_localstorage.asp
Hope this helps!
You can import the JavaScript file into multiple HTML files:
<script src="filename.js">
Then run the function in said HTML Files.
Also make sure there is one "color" Id in each HTML File.

How to pass parameters to jquery via script tag

What my code does:
It switches out the class of a div when i push a button. So i can push a button and the class changes from "Class" to "SwitchToThisClass" which has a different set of properties.
<script src="JS/SideNav-ShowOrHide.js"></script>
Here is my code, how do i change it so i can put parameters in and i also want to use the same JS file to change multiple classes:
(function() {
var bodyEl = $('body'),
navToggleBtn = bodyEl.find('Class');
navToggleBtn.on('click', function(e) {
bodyEl.toggleClass('SwitchToThisClass');
e.preventDefault();
});
})();
For example like this code that takes parameters and is clean, i want to be able to use the same JS file with different parameters. I want to switch out 'Class' and 'SwitchToThisClass', and take parameters instead.
HTML:
<script src="http://path.to/widget.js" data-width="200" data-height="200">
</script>
Outside JS file:
<script>
function getSyncScriptParams() {
var scripts = document.getElementsByTagName('script');
var lastScript = scripts[scripts.length-1];
var scriptName = lastScript;
return {
width : scriptName.getAttribute('data-width'),
height : scriptName.getAttribute('data-height')
};
}
</script>
Hope this makes sense, thanks for the help in advance.
In your purpose what you propose does not make much sense since there are better ways and more accessible and that will also allow you to modularize functions and pass parameters. However you have the possibility to add custom attributes to HTML tags if it is your final decision.
As you continue editing your question I continue editing my answer so.
Solution using data HTML attribute. and data HTML attribute documentation.
I personally do not like use it for script tag and I can not recommend it way.
Why? Because your source is a file not a function. A file have not parameters (said in some way). 'Visual' HTML tags/elements or stuff that is structure of the page is more related with this data binding. Unless your intention is to manipulate the tag itself in the first instance. What I think is never.
I would never use it to pass parameters to a contained function in the file.
Of course I am here giving my opinion. The solution exist.
Also you are facing old browsers support in your case.
What I understand you want have some static values in specific html file used to pass throught to a JS function contained in a JS file.
What you can do is first import your JS file that contains your JS function:
<script src="JS/SideNav-ShowOrHide.js"></script>
We suppose you have a function I have call 'changeFunction' in this file. Your function need to have some input parameters and then you can do from your HTML inmediatly after your file import.
<script>
var classFrom = "class1";
var classTo = "class2";
changeFunction(classFrom, classTo);
</script>
or directly:
<script>
changeFunction("class1","class2");
</script>
By other hand if what you need is manage classes of specific items give a look to how to add/remove classes from raw JS

Alfresco: Add a tag based on the location of the document

I've been struggling with a little script that should be easy to implement:
I've added a rule on a folder that runs a script.
The script should get the folderlocation of the uploaded or incoming document and add the location as a tag:
var url = document.properties.locale.nodeRef;
document.addTag(url);
It should be something like this, but this doesn't work.
how should I do it?
Your code should be as follow.First try with my code then just replace logic to add path.
if (!document.hasAspect("cm:taggable"))
document.addAspect("cm:taggable");
document.addTag("test");
You can replace "test" with accessed path of your document.
As #gagravarr says you should save changes. But I think the correct statement is
document.save();

Drupal - special css file if JS is turned off?

I'm building a Drupal theme up and want to know if there is a Drupalish way to add a css file only if the user has js turned off.
This would ideally go in the theme.info file to keep it neat!
Something like this would be ideal:
conditional-stylesheets[if no javascript][all][] = nojs.css
If this isn't possible then I'm going to keep all the css that needs JS out of the css files, and add it dynamically using JS but this seems a bit messy...
Any ideas?
You don't need conditional comments or noscript-tags for that. By default, Drupal adds a 'js' class to the html element and sets a cookie if javascript is enabled:
// Global Killswitch on the <html> element
if (Drupal.jsEnabled) {
// Global Killswitch on the <html> element
$(document.documentElement).addClass('js');
// 'js enabled' cookie
document.cookie = 'has_js=1; path=/';
// Attach all behaviors.
$(document).ready(function() {
Drupal.attachBehaviors(this);
});
}
(That's on line 296 in /misc/drupal.js.)
All css selectors that should only apply when js is enabled, can be prefixed with .js. If you want, you can put those css rules in a separate file, but you don't have to.
I don't know drupal that well, but it's a good question either way. According to W3Schools, the <noscript> tag is allowed only within the body element, so that is out.
Have you considered doing it the other way round? i.e. adding a script-specific CSS stylesheet using JavaScript? See starting points for that here.

Implementing different CSS on page

I want to implement different CSS style sheet using javascript or code behind on aspx page so that for different web browser my page look better. Can anyone have some solution about this problem? I try a lot to implement that but failed.
Generally you don't want to go down the route of dynamically generating CSS with Javascript. The best approach to CSS is to:
Use a reset CSS;
Declare a DOCTYPE on every page; and
If necessary, include IE-specific additions (because, let's face it, it's always IE that causes the problems).
To add to Ravia:
You can use Request.Browser to get browser versions:
HttpBrowserCapabilities bc = Request.Browser;
if (bc.Browser == "IE" && bc.Version == "6.0")
{
HtmlLink link = new HtmlLink();
link.Href = ResolveClientUrl("~/CSSFile.css");
link.Attributes.Add("rel", "stylesheet");
link.Attributes.Add("type", "text/css");
Page.Header.Controls.Add(link);
}
I'd go with the server side option (aspx in your case).
check the 'user_agent' request header to determine the user's browser type
logically include a different css file based on this variable
HtmlLink styleSheet = new HtmlLink();
styleSheet.Attributes.Add("rel","stylesheet");
styleSheet.Attributes.Add("type","text/css");
styleSheet.Attributes.Add("href",ResolveClientUrl("MyStyleSheet.css"));
this.Page.Header.Controls.Add(styleSheet);
Check this out.
You can even set the style by adding a literal to your head tag and add the css style as text to this literal.
Happy coding.

Categories

Resources