How to update a css file when using the Browser widget

classic Classic list List threaded Threaded
8 messages Options
Reply | Threaded
Open this post in threaded view
|

How to update a css file when using the Browser widget

Geoff Canyon via use-livecode
Recently I have been exploring modifying a css file so as to change the appearance of an html file being displayed in the browser widget.

Simply, I thought.

Load a page that uses a css file.

Modify the css file and rewrite it to disk.

Re-load the page from before, assuming it would use the newly modified css settings.

It doesn't work.
The html page continues to use the css from before.
This is even after closing and removing the stack from memory and reopening it.

I even tried deleting and re-creating the widget to see if this "refreshed" the css.

No. Finally I quit and relaunched LC.

On reopening the stack and reloading the page the new CSS was being read.

It would appear the css is being cached by LC and not the widget.

Has anyone else come across this before and if so, did you find a solution/workaround?

Context: I want to be able to change the font-size displayed in the browser. The pages being displayed all use the same external css. I thought that by changing the font-size definition with the css and saving it back to disk, a reload of the page would use the new setting. This works with desktop browsers.


James







_______________________________________________
use-livecode mailing list
[hidden email]
Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode
Reply | Threaded
Open this post in threaded view
|

Re: How to update a css file when using the Browser widget

Geoff Canyon via use-livecode
Is this on Mac?  I've seen it when working on the LC Dictionary (where I
was messing with the CSS).  I don't think it is LC, but rather Safari
(WebKit).  I think that I recall that reloads were easier on Windows.  I
did not find a solution other than restarting the IDE that I can recall,
but would also be interested in a way around it.

On Sat, Nov 3, 2018 at 11:32 PM James Hale via use-livecode <
[hidden email]> wrote:

> Recently I have been exploring modifying a css file so as to change the
> appearance of an html file being displayed in the browser widget.
>
> Simply, I thought.
>
> Load a page that uses a css file.
>
> Modify the css file and rewrite it to disk.
>
> Re-load the page from before, assuming it would use the newly modified css
> settings.
>
> It doesn't work.
> The html page continues to use the css from before.
> This is even after closing and removing the stack from memory and
> reopening it.
>
> I even tried deleting and re-creating the widget to see if this
> "refreshed" the css.
>
> No. Finally I quit and relaunched LC.
>
> On reopening the stack and reloading the page the new CSS was being read.
>
> It would appear the css is being cached by LC and not the widget.
>
> Has anyone else come across this before and if so, did you find a
> solution/workaround?
>
> Context: I want to be able to change the font-size displayed in the
> browser. The pages being displayed all use the same external css. I thought
> that by changing the font-size definition with the css and saving it back
> to disk, a reload of the page would use the new setting. This works with
> desktop browsers.
>
>
> James
>
>
>
>
>
>
>
> _______________________________________________
> use-livecode mailing list
> [hidden email]
> Please visit this url to subscribe, unsubscribe and manage your
> subscription preferences:
> http://lists.runrev.com/mailman/listinfo/use-livecode
>
_______________________________________________
use-livecode mailing list
[hidden email]
Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode
Reply | Threaded
Open this post in threaded view
|

Re: How to update a css file when using the Browser widget

Geoff Canyon via use-livecode
In reply to this post by Geoff Canyon via use-livecode
Further exploring from my previous post.
Making a standalone of the stack.
Simply reloading the html page still does not use the modified css (as was the case in the IDE)
But, deleting the browser widget and recreating it before loading the page and the modified css is recognised.

So the deletion/creation will work but can only be seen in a standalone which is a pain, but not a deal breaker.

Still, it would be nice to know what's going on.

James




_______________________________________________
use-livecode mailing list
[hidden email]
Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode
Reply | Threaded
Open this post in threaded view
|

Re: How to update a css file when using the Browser widget

Geoff Canyon via use-livecode
Hi James,

Maybe putting a parameter after the URL for the reload would make the
widget think it's worthy of a complete reload.

like so:
https://my.big.site.com?12345

Haven't tried it, just thought of it.

Phil Davis


On 11/3/18 9:55 PM, James Hale via use-livecode wrote:

> Further exploring from my previous post.
> Making a standalone of the stack.
> Simply reloading the html page still does not use the modified css (as was the case in the IDE)
> But, deleting the browser widget and recreating it before loading the page and the modified css is recognised.
>
> So the deletion/creation will work but can only be seen in a standalone which is a pain, but not a deal breaker.
>
> Still, it would be nice to know what's going on.
>
> James
>
>
>
>
> _______________________________________________
> use-livecode mailing list
> [hidden email]
> Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
> http://lists.runrev.com/mailman/listinfo/use-livecode
>
>

--
Phil Davis


_______________________________________________
use-livecode mailing list
[hidden email]
Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode
Reply | Threaded
Open this post in threaded view
|

Re: How to update a css file when using the Browser widget

Geoff Canyon via use-livecode
In reply to this post by Geoff Canyon via use-livecode
@brian - yes I am on a Mac. I wondered if it was webkit too. However Safari performs as expected.
I load the page in Safari, then change the css and then reload the page in Safari (using the reload button in the address field) and the page reloads using the modified css.

@Phil - no joy with the extra argument either. I went one step further and made a second different page and differently called css.
I then loaded my first page. Changed the css. Loaded the second page (which called a third, differently named css) and then reloaded my original page.
It loaded but still used the original (but no longer present) css. And I tried this with both normal load and widget deletion/recreation too.

This is one sticky css!

James



_______________________________________________
use-livecode mailing list
[hidden email]
Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode
Reply | Threaded
Open this post in threaded view
|

Re: How to update a css file when using the Browser widget

Geoff Canyon via use-livecode
In reply to this post by Geoff Canyon via use-livecode
To disable caching of an input css file (or js script file) this
works with every browser:

Either change the file name of the input file
or add a counter value (or timestamp) to the filename,
for example
<link rel="stylesheet" type="text/css" href="/mystyle.css?01234567">

_______________________________________________
use-livecode mailing list
[hidden email]
Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode
Reply | Threaded
Open this post in threaded view
|

Re: How to update a css file when using the Browser widget

Geoff Canyon via use-livecode
In reply to this post by Geoff Canyon via use-livecode
> James H. wrote:
> Context: I want to be able to change the font-size displayed
> in the browser. The pages being displayed all use the same
> external css. I thought that by changing the font-size
> definition with the css and saving it back to disk, a reload
> of the page would use the new setting. This works with
> desktop browsers.

Say you have the font-size declaration in the css for body.

Then script, for example:
do "document.body.style.fontSize = '110%';" in widget "Browser"

I use this technique (essentially) in hhTextEditBasic, see
http://livecodeshare.runrev.com/stack/860

_______________________________________________
use-livecode mailing list
[hidden email]
Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode
Reply | Threaded
Open this post in threaded view
|

Re: How to update a css file when using the Browser widget

Geoff Canyon via use-livecode
In reply to this post by Geoff Canyon via use-livecode
hh wrote:
> Say you have the font-size declaration in the css for body.
>
> Then script, for example:
> do "document.body.style.fontSize = '110%';" in widget "Browser"

Brilliant!
Thank you so much Hermann.

Putting the script in a button worked like a charm

Putting it in the handler that loads the page sort of works.

putting in an "on browserDocumentLoadComplete" handler works, full stop.


James





_______________________________________________
use-livecode mailing list
[hidden email]
Please visit this url to subscribe, unsubscribe and manage your subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode