I'm using the parcel with web components and after the application starts, when I change the html of some component it doesn't rebuild, for example I change a div tag to p, in the browser it still remains as a div
Related
I've gone into devtools and deleted a node from the Dom which affects my page's CSS calculations. I want to re-render the page with the element gone to verify that removing it has the desired effect.
Can I instruct Chrome to re-render the page as-is, without reloading it?
I have a news section on a page, when i click on a news a fancybox iframe is opened showing the news page.
The news page contains 3 images on top ad some text on the body of the page, and on page load i create a new Swiper slider with the images.
Unfortunately on iOS Safari, creating the slider with those images make the content of the iframe being incorrectly sized.
This behaviour only happens on iOS Safari because if i test in chrome with device toolbar enabled everything works as expected.
I've attached a video of the issue at this link
First, fancybox works fine. The script attaches load event to iframe element and then (inside that event) reads width/height of body element and uses these values to resize iframe parent element so that iframe dimensions matches page size.
If you (or some 3rd party script) change layout, then, obviously, page dimensions will change, too. In that case, you can execute parent.jQuery.fancybox.getInstance().update(); (from within iframed page) to call update method that will do resizing again.
I am working on an Ionic 3 application. Inside a div, i am loading an external url in an iframe and it is loading perfectly. But it creates problem when focuses out. The iframe reloads every time when it focuses out.
Scenario-01: In the page where i have loaded the iframe, there are other controls outside of the iframe such as a text box to enter some data. So, when i click on the textbox, the keyboard appears but at the same time iframe reloads again.
Scenario-02: I have one menu sliding drawer from left in the application. When i open the sliding drawer to select another page, i could see the iframe of the existing page reloads again.
Scenario-03: The external url that i have loaded in the iframe has some input controls. So, i want to enter something in those input boxes, the keyboard appears but at the same time iframe gets reloaded and i could not provide any data in those input boxes.
From my assumption, iframe is causing problems when it focuses out. So, i tried to capture the blur event of that iframe and try to stop the propagation of the event.
<iframe width="100%" height="100%" [src]="url| safeHtml:'resourceUrl'" (ionBlur)="checkBlur($event)" (ionFocus)="checkFocus($event)"></iframe>
But, both ionFocus and ionBlur events were not triggering.
For now, when i tried with Android application, all the scenarios trigger iframe reload. As keyboard does not appears in browser, when i tried with Browser, only Scenario-02 triggers iframe reload.
Iframe should load at the first time only. Then user can do whatever operations inside the iframe or outside the iframe but the iframe should not load again.
How to stop reloading the iframe if it focuses out by keyboard or sliding drawer or anything?
I figured out the solution. The problem was with the safeHtml:'resourceUrl' pipe. It was sanitizing every time iframe comes in focus and prepared a new ResourceURL. As a result, iframe gets reloaded each time.
So, i sanitized the url beforehand in the ts and set it to the variable. As a result, iframe is not reloading anymore. I have used DomSanitizer to sanitize the resource url.
url: any;
constructor(private domSanitizer: DomSanitizer) {
this.url= this.getSantizedURL();
}
getSantizedURL() {
this.domSanitizer.bypassSecurityTrustResourceUrl(mySampleURL);
}
I am trying to build a carousel where a user can personalize each slide. Out of box carousel does not seem to do it.
The solution I end up doing was to extend the parsys and keep the virtual 3cols. I renamed the 3cols to carousel and added a custom attribute called renderType and set it to "carousel". So when parsys tries to render, knowing it is carousel I render as carousel instead of regular content holder.
It works but then I would like call a javascript when a user clicks "Preview" so that I can render this as carousel and when they unchoose "Preview" by clicking Edit or Target, I would render normally.
I see that you can listen to WCMMode change event but I am not able to get concrete e.g or documentation to perform. Any help?
My Chrome app contains two pages A1.html and A2.html. How can i navigate from A1.html to A2.html without creating a new window?
The page A1.html contains 10 div's and A2.html contains a back link to A1.html. My need is to load directly a specific div of A1.html when the back link in A2.html is pressed.
You can't navigate within a Chrome App window (Content Security Policy), although you can navigate to an external browser if you set the target attribute of the <a> element to "_blank". What you have to do, if you really want links to appear to work normally, is intercept the click on the link by setting an event handler and then changing the DOM from within JavaScript.
One easy way to change the DOM from JavaScript if you have an HTML fragment is to use the insertAdjacentHTML API (Google it for documentation).
While this might seem awkward, even limiting, think of a Chrome App as an app, and not a web page. After all, with a native Mac OS X or Windows app, you wouldn't expect to entirely change the UI in a window by simply clicking on a button, right? You'd expect that the app would do that via the native API. Same the Chrome Apps.
Alternatively, you can position a webview in the Chrome App window, and then HTML within the webview works normally, because that really is a "web view."