Let's use a classing example: in a file, let's call it _example.scss, I have the following variables:
$color1
$color2
I was wondering if it is possible to create an html-form or some html-gui from which I can change (or set) the value assigned to those variables in that file?
Like using a color picker which will set those variables to a given value.
the short answer is no, scss is a pre-processor. both server(back-end) and browser(front-end) don't read scss at all.
so what you can do is use javascript/jquery to manipulate the value.
var style = $('input').value();
$('div').css({'color': style });
You can use a Sass parser in JavaScript which offers a API running a Web Worker. sass.js is a js library that offers these bindings.
Generally I wouldn't consider this good practice although do not have knowledge or you use case.
Related
I'm working on a website where I want to add the settings of my Slick Slider trough the data-attribute. This is possible with the 'data-slick' attribute. The format for this looks like this: data-slick='{"slidesToShow": 4, "slidesToScroll": 4}'.
In my WordPress CMS I'm using the plugin 'Data Attributes' to add data attributes to a Gutenberg Block. Trough this plugin all double and single quotes are converted to and therefor changes on the frontend to data-slick="{"slidesToShow": 4, "slidesToScroll": 4}"
This is not working. The Slick Slider doesn't use these settings.
Is there another way to add a JSON object into a data-attribute so it will work with the Slick Slider?
Thanks already for your help!
Kind Regards,
Nick
I think storing a JSON value in HTML is a bad idea. There are too many conditions which you have to take into consideration - backend returning page, WEB server encoding (it can add a custom encoding header), and browser compatibility. For this task, I'd prefer 2 ways: bitwise mask or simple function-for example, define a few data attributes -data-s1, data-s2, data-sn. In the JS code, add an array [ data-s1, data-s2, data-sn]. And finally, add a loop with an in-condition (if data.contains(element of array) - read and then parse the data inside of the attribute). I never worked with wordpress but for JS it is a easy task. If you need example write comment below. I can update my answer
I frequently use PhpStorm's Extract variable & method refactorings. Is there a way to add/extend functionality that could create a new template file from the selected code, prompt for desired template path, and create an include/require statement for that template?
I'm asking either for an entry point into coding this functionality, or extending existing functionality. Or maybe it's already available and I missed it.
As #Ástþór mentioned, there is no such way to change the refactoring templates.
You can use surround with live templates to emulate this behavior. This will not find duplicates and will not replace them as well, but may be it's close enough what you want.
Add a surround live template like this one. Open the editor with Ctrl+Alt+S:
Edit the variables in order to get a nicer UX:
Select the variable you want to extract and select Code > Surround with Live Templates from the menu or press Ctrl+Alt+J.
Adjust the templates to your needs.
Live template variables
HTH
No, there isn't. You can ask this question at https://intellij-support.jetbrains.com/hc/en-us/community/topics/200366979-IntelliJ-IDEA-Open-API-and-Plugin-Development
Other useful sources: https://www.jetbrains.org/intellij/sdk/docs/basics/getting_started.html & https://confluence.jetbrains.com/display/PhpStorm/Setting-up+environment+for+PhpStorm+plugin+development
I know that there is a planned feature upgrade to create a custom amp-filter tag
https://github.com/ampproject/amphtml/issues/9113
I was wondering if there was any workaround to doing client-side filtering of json using amp html?
The only option you have at the moment is combining amp-list and amp-bind. Use amp-bind to dynamically change the amp-list src attribute based on the selected filter. The actual filtering still needs to happen server-side. Here is a sample implementation: https://ampbyexample.com/samples_templates/product_browse_page/preview/.
i created a site, And added pages to my site, since page size exceeds i need to create pagination in html i have created this method
123
in this way i created
Problem is when i add new page i need to replace all code again like this
1234
ever time when i add new page i need to replace all code is ther a way to do this without PHP
Can sombody help me any idea to do this in html
Do not re-invent the wheel. Use datatables, they provide sorting, pagination (client side and server side), export and a number of additional features.
http://datatables.net/
Include the files and just add this.
$(document).ready(function() {
$('#example').dataTable();
} );
This is a very basic and good example, you should go for it.
http://datatables.net/examples/data_sources/dom.html
This cannot be done purely in HTML. You must use something like PHP, or you could use Javascript.
You can make just one HTML file called "Pagination.html" include all your links there and then include that Pagination on every page using one of the following methods.
You can use Javascript: javascript
Or you can use html5: html5
Or there are also, others solutions to solve your problem like this: other
You better use some Javascript oriented solution, html5 support for including files still very poor.
unfortunately, this won't be possible without using some other technology that is not HTML. You can dynamically generate pages using javascript (JS), PHP or other technology, but not just raw HTML.
You can name your pages something like:
page_1.html
page_2.html
and then whichever editor you are using probably has a search & replace function, so you could use that to speed up things. I hope this helps.
is there a way that you can write a full CSS line using a LESS variable?
For example, if I declare a variable:
#dir: test;
and then want that variable to be used within another variable:
#bg-img: url(http://example.com/#dir/img/bg.png;
When I try to use #bg-img in my CSS, it compiles like this:
body{background-image:url(http://example.com/#dir/img/bg.png);
How do I get #dir to echo out as test?
I know that I can just replace #dir but since I have various different microsites, it'll be quicker to change the one instance of #dir rather than go through and change every instance of the microsite name.
This is possible by interpolation, but not certain if this would work in your particular situation without seeing more code. However, give this a try:
body{background-image:url(http://example.com/#{dir}/img/bg.png);
Found it in the docs, down the page under String interpolation. Hope this helps.
EDIT: and escape, just as #Rob W mentions in the comments. Also in the doc, just below interpolation.