We Keep Coding

Electron: Prevent <style> tags in DOM from loading

Is there a way to remove all styling from an Electron webview before the page is shown?
So far, I can inject JS to remove all styling after the document is loaded:
document.addEventListener("DOMContentLoaded", function(){
document.querySelectorAll('link[rel="stylesheet"], style').forEach(elem => elem.disabled = true);
});
The problem here is that the styles will show for a brief moment (~1 second) before styling is removed.
I can also use the following in my Main class to remove all .css files prior to page load:
session.webRequest.onBeforeRequest({urls: ['https://*/*.css', 'http://*/*.css']}, function(details, callback) {
callback({cancel: true});
});
This, however, does not remove tags embedded in the DOM. For a better idea of what I'm trying to do, you can check out Firefox's "No Style" feature (View -> Page Style -> No Style).
Thanks in advance.

There are two ways I can think of to prevent this:
Give the webview a visibility:hidden style, and make it visible later.
Point to a forwarding proxy who will strip out inline as well as linked CSS
Number 1 sounds to me a quicker and more reliable solution, but I haven’t tried it out.
Let me know how it goes.

How to scroll a <object> element?

I'm building a simple web-page to use as an info-screen. I would like it to load two external websites into one page. So far I've succeeded using jquery and the html object-tag:
$('#news').html('<object data="http://www.news.com"/>');
$('#weather').html('<object data="http://www.weather.com"/>');
Additionally I'd like the object-tags to scroll to a specific position automatically after they've finished loading.
I tried to use the .scrollTop function of jquery but no luck:
$('div#news > object').scrollTop(300);
$('div#weather > object').scrollTop(300);
I guessed it's because the content of the object tag is not yet loaded when the function is called so I tried to delay it by using
sleep(10000);
but no luck either.
How can I do this?
Thx a lot in advance for any hints!

you should use .load() event.
$('div#news > object').load(function() {
});

JQuery Mobile Custom Flipbox set initialization value

I have a custom flipbox which is described in the accepted answer here: JQuery Mobile Custom Flipbox get selected value.
I'm struggling to set the initial value after the page is rendered my 'change-page' function is something like this:
changePage:function (page) {
page.$el.attr('data-role', 'page');
page.render();
$('body').append(page.$el).trigger('create');
$.mobile.changePage(page.$el, {changeHash:false});
}
As I use Backbone.js to manage the views and then I delegate the navigation to jQM.
I basically need to set the initial value of this input text field ( maybe there's a workaround)

Ok I figured this out myself and I'm willing to share the solution:
first of all the change page function is slightly different:
changePage:function (page) {
page.$el.attr('data-role', 'page');
//get rid of everything in the old page.
page.remove();
//render the page again
page.render();
$('body').append(page.$el).trigger('create');
$.mobile.changePage(page.$el, {changeHash:false});
}
the remove call is necessary to get rid of every event listener you had in the old rendered HTML.
In every page that needs init parameters you can specify in the render function this:
render: function(){
....
this.$el.on('pageshow',this.initFields);
....
}
initFields: function(){
// put your jQuery code here (e.g. this.$el.find('foo').val('initValue');
}
please note that this solution as of the jQM documentation is valid up to the 1.5.0 version of jQM, after that the pageshow event will not be triggered anymore.

jQuery Mobile rendering problems with content being added after the page is initialized

I'm using jQuery Mobile and Backbone JS for a project. It's mostly working, using jQuery Mobile's event 'pagebeforeshow' to trigger the correct Backbone View. In the Backbone View for that particular jQuery Mobile page, that's where it's doing all the dynamic things needed. Some of the things the views do is pull in certain bits using Underscore's templating system.
This is all great until where I pulling in form bits using the templating system. For example, a set of dynamic radio buttons (which are generated from a Backbone Collection). These radio buttons I want to style up using what jQuery Mobile has to offer. At the moment, jQuery Mobile is not picking up these dynamically injected radio buttons. I solved this issue previously when doing sliders by just calling the jQuery Mobile widget "slider()" method again and it seemed to refresh them... This doesn't seem to be the case with these radio buttons.
In the Backbone View, I tried calling the widget methods again:
$(this.el).find("input[type='radio']").checkboxradio();
$(this.el).find(":jqmData(role='controlgroup')").controlgroup();
I tried them the other way around too, but it seemed I need to do it this way for the grouping styling to work etc. But this just doesn't seem right! ...doing this also caused errors when I clicked on the radio buttons, saying: "cannot call methods on checkboxradio prior to initialization; attempted to call method 'refresh'"?
It seems there should be a way in jQuery Mobile to re-initialize the page or something?! I noticed there is a 'page' widget in the source code.
How does jQuery Mobile handle forms/elements being injected into the DOM after the page is made? Is there a clean way of handling how it makes up the forms? There must be a clean way of calling on the forms to render 'the jQuery Mobile way' without it just relying on data attribute tags in the base HTML?
Any help or insight into this problem would be greatly appreciated... I'm very much on this quest of trying to get Backbone JS and jQuery Mobile to work nicely together.
Many thanks, James

update
Since jQueryMobile beta2 there is an event to do this. .trigger('create') on an element to cause everything inside it to be painted correctly.
Another question that is not a duplicate, but requires an answet I posted over 10 times :)
[old answer]
try .page()
More details in my faq:
http://jquerymobiledictionary.pl/faq.html

Refreshing the whole page worked for me:
$('#pageId').page('destroy').page();

I'm not sure if this helps but when adding dynamic elements I was using .page() in the sucess ajax call itself (example here and here) but I found that it was not working as expected. I found that in the ajax call it's better to refresh the element (if it's a form element) to use these documented methods:
Checkboxes:
$("input[type='checkbox']").attr("checked",true).checkboxradio("refresh");
Radios:
$("input[type='radio']").attr("checked",true).checkboxradio("refresh");
Selects:
var myselect = $("select#foo");
myselect[0].selectedIndex = 3;
myselect.selectmenu("refresh");
Sliders:
$("input[type=range]").val(60).slider("refresh");
Flip switches (they use slider):
var myswitch = $("select#bar");
myswitch[0].selectedIndex = 1;
myswitch .slider("refresh");
and for adding a non-form element use .page()

JQuery Mobile now supports .trigger("create"); which will resolve this for you

Try calling .trigger("create") on the element with the new content.

I needed a way to dynamically refresh a JQM page after it had been initialized. I found that if I removed the data attribute "page" during the "pagehide" event, the next time the JQM page was displayed it was re-initialzed.
$('#testing').live('pagehide', function (e) {
$.removeData(e.target, 'page');
});

$('#pageId').page('destroy').page();
works for entire control groups that are generated, let alone radio input children.
-Mike

It worked for me when I called .trigger('create') on the enclosing div element. See example below:
In .html file:
<div id="status-list" data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Choose as many snacks as you'd like:</legend>
<input type="checkbox" name="checkbox-1a" id="checkbox-1a"/>
<label for="checkbox-1a">Cheetos</label>
</fieldset>
</div>
in .js file:
$("#status-list").trigger('create');

For me only .page() worked (without the .page('destroy')).
E.g.:
$('my-control-group-id').page();
Amnon

I little bit off topic. I wanted to be able to stop jqm from creating first default page div on init as backbone wraps elements in divs anyway. I wanted to dynamically insert pages to the DOM and then call jqm to create its classes and widgets. I finally did this like this:
<head>
<script src="jquery-1.8.3.js"></script>
<script type='javascript'>
$(document).on("mobileinit", function () {
$.mobile.autoInitializePage = false;
}
</script>
<script src="jquery.mobile-1.3.0-beta.1.min.js"></script>
</head>
<body>
....... dynamically add your content ..........
<script type='javascript'>
$.mobile.initializePage()
</script>
</body>
and my hole jqm config (which you put before jqm.js)
$(document).on("mobileinit", function () {
$.mobile.ajaxEnabled = false;
$.mobile.hashListeningEnabled = false;
$.mobile.pushStateEnabled = false;
$.mobile.linkBindingEnabled = false; // delegating all the events to chaplin
$.mobile.changePage.defaults.changeHash = false;
$.mobile.defaultDialogTransition = "none";
$.mobile.defaultPageTransition = "slidedown";
$.mobile.page.prototype.options.degradeInputs.date = true;
$.mobile.page.prototype.options.domCache = false;
$.mobile.autoInitializePage = false;
$.mobile.ignoreContentEnabled=true;
});
So far Backbone and JQM been working fine.

Try use enhanceWithin() method. This should be method of any jQuery object while using jQuery Mobile.

How do I programatically scroll down the page?

When the page loads, I want to use Javascript/Jquery to automatically take the user to the 500px downwards. But it has to seem natural.
How can that be done?

Just Javascript: window.scrollBy(0,500);

You can use the jquery scrollto plugin. It's very easy.
http://plugins.jquery.com/scrollTo/

Is there a lighter version? Just using javascript?
You could consider calling window.location.hash during onload. Have an element with an ID at about 500px down and just do
window.onload = function() {
window.location.hash = '#foo';
}
Oh, the # is mandatory for IE compatibility ;)

use the jquery one Jourkey suggested. Cross platform easy to use etc. There is pure JavaScript one you can try, though YMMV on browsers other than IE
"scrollTo Method
Scrolls the window to the specified x- and y-offset. "
http://msdn.microsoft.com/en-us/library/ms536731(VS.85).aspx

$().scrollTop(500);

What about navigating to some predefined link inside the page. Foe example see URL pointing to the location inside the page http://en.wikipedia.org/wiki/Uniform_Resource_Locator#cite_note-0