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
Related
I am trying to write a bit of code to read a sensor and, with my ESP32 make a webpage that will display the value.
But on a gauge with a "needle" ( think speedometer type of thing ) like output, I can make variables in CSS and I can make the gauge in CSS and display in HTML fine.
I can change the value of the gauge by changing the CSS variable BUT I want to be able to pass this varibale to CSS from my HTML file.
This is so I can process the HTML page on my ESP32, updating the value of the sensor and display it, I can't seem to get an option of updating CSS varible through HTML.
I would like to rather stay away from JavaScript to be hoest, I'm already learning CSS and HTML to make this work, but if need be I will do it.
Or could I do this in PHP perhaps ?
Any advice ?
If you want to make this dynamic, you have no other option rather than to recur to JavaScript in combination with what you are using. From what I understand it's something like either a percentage value or a rotation degree value you are toying around with.
What I can recommend for your specific case is to use an inline style to change the position of your indicator.
Something like:
<div style="width: 99%;"></div>
It would help if you share with us what you have as code till now.
Also, from what I understand you are still new to this sort of coding, but something that would probably work really well for you could be Socket.io you just assign a port that receives information and configure it, and you could configure your ESP32 to send info to that port I suppose, not really familiar with that part though.
If you want really real time value refreshing with esp32 on its own web you have to use websockets.
I don't know what server library you using, but there are a couple of websocket libaries out there.
I recommend ESP32_AsyncWebserver from Me_no_Dev. This is a fully async webserver implementation, and it is containing the async websocket too.
If you succesfully implemented that to your project, and loaded your static html file with the gauge you mentioned, on runtime of the esp32 you can send websocket text messages to the front-end javascript code. Once you received the messages on the javascript side you can easily update anything from there.
If you interested in this more, i will write some code for you in here. Just let me know.
What is the minimum example, if any, using the Polymer PWA (https://polymer.github.io/pwa-starter-kit/), to show correctly a vaadin-grid?
I tried many different combinations, but never a working one, with, often, this warning:
property-accessors.js:275 Polymer::Attributes: couldn't decode Array as JSON
Am I doing anything totally wrong?
Thanks
Andrea
Starting from the v5.2.0-beta1 we recommend using following Grid features:
column helper elements (vaadin-grid-filter-column, vaadin-grid-sort-column)
column convenience properties (path, header and text-align)
renderers for more complex cases where you previously used templates
See the example here: https://glitch.com/edit/#!/lying-blanket?path=app.js:29:42
https://lying-blanket.glitch.me/
Note: I'm using fetch API here for simplicity only, you can use XHR if necessary.
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 am using html-pdf for pdf creation on my project. i can generate all the details into the pdf. but the thing is i can not be able to create List of items in array in html(which will be used for pdf conversion).
Since i cannot use javascript to get the array of items, i am unable to get it. if there is a tweak to use javascript in html template,please post it here. Since the array of items is known, i can use it easily.
Suppose if the array length is 3 . i can use like array[0].name ,array[1].name, array[2].name but here i don't know the length of the array which consists of how many items. Can anyone please help me here to generate the table of items which is generating dynamically.
You cannot use Javascript in template, but you can use Javascript on it.
The idea is to make a parser which will :
read your template
replace a keywork (for example : <customTable arrayName="myCustomArray" fields="['name']" />) with a generated HTML array in Node.js.
use this template with html-parser.
I write an example of parser in VanillaJS here : https://jsfiddle.net/rbuuzcre/5/
what the best sample for two language phonegap app?
i want to set default language (index-en.html or index-fa.html) and theme by user in first used and save selected user settings. What is the best possible way to do this?
For client side internationalization I can recommend i18next.
You can just create two resourcefiles with JSON objects and use them for your static text. That way you don't have to maintain two html files, which I can imagine would be very frustrating.
Using i18next is pretty simple.
You just place a data-i18n attribute to the element like this:
<span class="my-class" data-i18n="my.key"></span>
And make it do its magic like this:
$(".my-class").i18n();
If you are using Handlebars as a template engine it is even better, you just need to:
{{t "my.key" }}.
You can of course use it programmatically like this:
var myKey = t("my.key");
If you have a large project with a lot of static content, you may want to maintain the translations in other format like Excel and then use some kind of tool to convert it to JSON.