How to push less variable changes to an html iframe?

Question

Question: How can I push less variable changes to an iframe?

Example: http://bootstrap-live-customizer.com/

More details: When a bootstrap less variable is changed, it automatically refreshes the changes onto the embedded iframe?

I saved the webpage above but could not get it to work. I am trying to exactly what bootstrap-live-customizer.com does but will implement it for a CMS theme. Thanks

score 1 · Answer 1 · edited May 23 '17 at 11:49

1

You have not really given any examples on any solutions you have tried, the technology you are using or given the code and markup you are using. That may help us give you more accurate help.

What you need to do is compile the less content into css and then refresh the iframe. This may help you if you mind server-side nodejs code http://lesscss.org/

To refresh an iframe in HTML document.getElementById(#idOfIFrame).contentDocument.location.reload(true);

What you can then do is add the less file stylesheet into the head of the iframe. The answer was found here: less-css-file-include-in-head-section

Another answer which is similar: how-can-i-compile-less-files-within-browser

edited May 23 '17 at 11:49

Community

1
1

answered Feb 07 '15 at 21:20

TRex22

47
7

By examples I mean some code you have tried that is not working. Giving a website that is not yours and that works as an example is not at all helpful. There are many different JavaScript libraries and technologies like NodeJs you could be using. Is this server-side or front-end development? Your question was not at all specific. An iframe acts as an individual browser within your webpage, any help in the stackoverflow link I provided would also help (with some changes) here. – TRex22 Feb 07 '15 at 23:10
And every question is not about CODE. Some answers could be for example - 1) Use livereload.js to refresh the page to detect css changes 2) You need a less compiler to detect the less changes and convert to css on the fly 3) livereload.js can detect changes and show changes - This is a good example but will not answer your question fully - https://www.youtube.com/watch?v=MhODHoaats0 – Kal Feb 07 '15 at 23:25
As you see - Its not all about CODE - I am a developer and asking for a code for something like this would take 10 stackoverflow questions. – Kal Feb 07 '15 at 23:25
I am just trying to help you get on the right track. I can't program something from scratch for you. I don't really know what kind of problem you are solving, or how you intend to solve it. I added some more stuff to my answer which may help. Also saving that webpage probably won't work since they have a server compiling things which is not included when you save the webpage. – TRex22 Feb 07 '15 at 23:42
From what I gather, you will probably need a server side application to do a lot of the heavy less to css compile work. I believe that lesscss will work in browsers without a server application although it is not recommended. [link](http://lesscss.org/#client-side-usage) – TRex22 Feb 07 '15 at 23:44
Thanks - I am building a bootstrap website with an admin panel that will let users customize the them using the customizer. They will be able to change the colors etc and the just click apply to make changes to the theme. The theme will be a Joomla based template. The customizer will be available onto to admins for development work so it is ok to do some lifting and when less is compiled to css, only the css will be read by the forntend. – Kal Feb 07 '15 at 23:54
less-css-file-include-in-head-section - That was a good link - I just need to find a way to push the changes to the iframe which is my question. The reason I need irame is because I joomla pages are generated on the fly. Thanks again. – Kal Feb 07 '15 at 23:58
A project I worked on allowed the user to define styles like selecting colour, which was sent to the server, added to the relevant less and then compiled when a button was clicked. the button also refreshed the page. You could do something similar. This removes the need for an iframe which is not a clean solution. Also if you want live changes to the website you could do DOM changes to the relevant items -- that is if only small things like colour is being changed. – TRex22 Feb 08 '15 at 00:00
A website the user sees is usually static and forced to refresh the whole DOM or just some part of it like a data-feed at an arbitrary time limit. To push the changes to the iframe means you would have to refresh the iframe in some way. [link](http://stackoverflow.com/questions/7946746/using-jquery-to-update-content-within-an-iframe-live-on-the-fly) is probably what you want – TRex22 Feb 08 '15 at 00:06
I see. Everyone does it with iframe because joomla creates the page on load. Its not a good practice to load unwanted files to a front end page which is why an iframe would keep the main front end independent. Here is an example - http://getuikit.com/docs/customizer.html – Kal Feb 08 '15 at 00:07
The way that example site works is to recreate the iframe and force a reload when I select a new theme. – TRex22 Feb 08 '15 at 00:12
Ok. How do they show the changes when a less variable on the left is changed? I dont think that refreshed the iframe. Thanks – Kal Feb 08 '15 at 00:19
Is it normal to start to write an app w/o even knowing how the very core of this app is supposed to work? Either way I voted to close the Q as "too broad". There're several possible ways to do this and every method will require a large blog-post-like answer with zillion details etc. – seven-phases-max Feb 08 '15 at 00:30
@ seven-phases-max - Very encouraging !!!! Thanks. - And yes - I know how my app works okay - This is a small piece of a Joomla based theme and the only thing I am stuck with is like my question says "push less variable changes to an html iframe?" - if I find the answer - Its solved. If you know a zillion ways- Suggest ONE – Kal Feb 08 '15 at 00:44
@user3717114 - Sightly reworded quote from above answer: "compile your variable changes into css and apply that new css to the iframe" - Happy? That's it. W/o providing more details about your use-case (server or client-side less compiler, per-session or global site changes etc. etc.) you won't get a more detailed answer. – seven-phases-max Feb 08 '15 at 04:57
(it looks like you think there's some magic tool or library or function that will watch some HTML form field values and when they change it will convert all these things to less variabels, recompile your CSS theme with all those changes and reapply the CSS to an iframe you just need to point it to... Do you?) Hence when asked to provide a few more details don't waste your energy on complaining you don't need to do this, instead put this energy into providing such details. – seven-phases-max Feb 08 '15 at 05:00
@ seven-phases-max - Anyone who knows the answer to the question will know exactly when I ask "push less variable to iframe". If you dont know the answer - just move one - Dont discourage people. What do you think ? Just ask yourself ? I know some things more than you do and you know somethings more than I. Thats the way the world works and thats why people HELP each other instead of a few like you who try to discourage but hey - That does not work !!!! – Kal Feb 08 '15 at 17:09
OK, Now I see why you did not get even a single answer for any of your Q here at SO. – seven-phases-max Feb 09 '15 at 00:10
Yea - I sometimes I get unlucky with people like you commenting on my questions without having a clue of what they need to write. Anyways - I have posted my own answer - Its quite simple. Hope it will be useful for someone. – Kal Feb 09 '15 at 14:39
@user3717114 You just need to learn how to ask questions. For instance here's *critical* parts of your answer that you should include in your question above: 1. PHP ("I use a PHP CMS so I preferably need a solution using server-side PHP Less compiler"). 2. Since a server-side compiler is assumed, the changes are supposed to be transferred to the sever using POST or GET methods. 3. and so on and so on. So no, it's not "people like me commenting on your questions without having a clue" but *always* your total inability to ask an answerable question (and your aggressive denial of this). – seven-phases-max Feb 10 '15 at 03:18
1) I did add a comment that I use php but not sure where it went. I accept that as my mistake – Kal Feb 10 '15 at 13:13
seven-phases-max 2) What are you trying to do? Look at your answers? NOT ONE is aimed at answering the question. It does not matter what technology is used because this is possible using plain html and js which is the solution to most of these type of questions. I never thought I would end up using php compiler but I dont know hpw to get node.js to work thus ended up using php. – Kal Feb 10 '15 at 13:18
The logic would be the same - Update the css file and create a button to refresh it. @seven-phases-max - You should not be a part of SE because you dont know how to answer a question - (and your aggressive denial of this). I came here to get answer to my question and not to debate with someone like you. – Kal Feb 10 '15 at 13:18

score 0 · Accepted Answer · answered Feb 09 '15 at 14:37

I finally got this to work :)

Step 1 - Download Less Php compile from github. https://github.com/oyejorge/less.php
Step 2 - You just need one file Less.php from the package.
Step 3 - Now to set up your iframe, use bootstrap grid to write php/html for the left sidebar and right iframe.
Step 4 - To start, on the left side, which is the main page just add a select box with font options - Arial, Open Sans .... Place the select box in a form. This select box will be used as our first less variable selector just for example.

Step 5 - Back to your iframe, the code below is an example

$parser = new Less_Parser();
$parser->parse( '@fontfam: <Post Your PHP variable here from Select using POST>; #header { font: @fontfam; } h2 { color: @color; }' );
$css = $parser->getCss();
<Write $css  to a css file for example theme.css>

Step 6 - Create an apply button that will just refresh the iframe - Notice the iframe now picks up the new theme.css.

Viola - I tested this and is working. This is how you push less variable to an iframe.

Another way to do this is to use node.js (search it on github). The logic is almost the same and the use of node.js is that it does not need a broswer to run java scripts - the server can do it.

How to push less variable changes to an html iframe?

2 Answers2