I customized the indext.html file and I've added a loading and an image inside it, After loading the app, My MaterialApp comes up and covers the indext.html file (looks fine), but if I use a transparent Widget for my page, I can see the loading and image on indext.html below my material app!
As they are consuming resources, how can I stop my loading state on indext.html when app is loaded?
Thanks to #Yadu, I've achieved the solution:
First set id to divs that are going to hide (remove):
<div id="div1">
...
</div>
Then at the bottom of index.html file, modify the script that is provided by flutter like this:
<script>
if ("serviceWorker" in navigator) {
window.addEventListener("load", function () {
navigator.serviceWorker.register("flutter_service_worker.js");
var div1 = document.getElementById("div1");
setTimeout(function() {
div1.remove();
}, 7000); // remove div by delay to make sure flutter module is completely loaded
});
}
</script>
Related
As Flutter web boots up, it may take a few seconds to boot and start to render home page. hence I add an spinner in index.html to indicate to the user everything is normal.
in index.html (I have simplified)
<body>
<div class="spinner"></div>
.
.
.
</body>
then I need to listen to an event when main.dart.js is completely loaded, to remove the spinner element.
does anyone knows what event I should listen? (I'm talking about javascript events that I can benefit in index.html)
I can't listen to windows.onload because it fires before flutter boot up.
Use the js package to call a js function from Flutter that removes the spinner:
#JS()
library loading;
import 'package:js/js.dart';
#JS("stopLoading")
external void stopLoading();
And in your index.html:
<script>
function stopLoading() {
...
}
</script>
The event name is flutter-first-frame. add below script in index.html which removes and element with id: spinner (the loading indicator) when flutter framework completely loaded.
<script>
window.addEventListener('flutter-first-frame', function () {
var el = document.getElementsByClassName('spinner')[0];
el.remove();
});
</script>
read more:
https://haashem.medium.com/add-loading-indicator-toflutter-web-653579fe939a
I have a bunch of inputs on my HTML page, plus a textarea which is replaced by a TinyMCE editor. There are various scenarios where this page is loaded and every time one of the inputs must get the focus. But when the TinyMCE is initialized, it just steals the focus. I narrowed down the problem to an execCommand call which sets the default font size in TinyMCE.
The issue can be reproduced in this simplified code:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
<script>
tinymce.init({
selector: 'textarea',
setup: function(editor) {
editor.on('init', function() {
this.execCommand("fontSize", false, "14pt"); // <<---- This line causes the TinyMCE editor to steal the focus!
});
}
});
</script>
</head>
<body>
<input id="inp" />
<textarea>Hello, World!</textarea>
<script>
document.getElementById("inp").focus();
</script>
</body>
</html>
I have tested this in Firefox, Chrome, and Edge, and the same issue happened in all of them. Any idea how I can prevent this? I do not want to set the focus again once the TinyMCE is done initializing, since at that point the page has scrolled to the wrong spot.
I know I said I did not want to set the focus "again" once the TinyMCE is done initialization, but I ended up doing something similar to that. Instead of setting the focus at the bottom of the page, I moved the code inside the tinymce.init and also called $(document).scrollTop(0);. Here is the code:
tinymce.init({
selector: 'textarea',
setup: function(editor) {
editor.on('init', function() {
this.execCommand("fontSize", false, "14pt"); // <<---- This line causes the TinyMCE editor to steal the focus!
// Scroll to the top of the page.
$(document).scrollTop(0);
// Now set the focus.
document.getElementById("inp").focus();
});
}
});
I believe there is a bug in TinyMCE and I hope it gets fixed in one of the future revs. I also hope this workaround helps someone down the road.
While you are issuing the command to change the font size, you aren't actually setting a default font in the TinyMCE editor. You are firing those commands, but if there is any content to be loaded into the editor, it won't have this font information applied.
To set default font information in TinyMCE use CSS, either via the content_css or content_style configuration options:
https://www.tiny.cloud/docs/configure/content-appearance/#content_style
https://www.tiny.cloud/docs/configure/content-appearance/#content_css
Here are examples that show the differences between the two approaches.
In this example: https://fiddle.tiny.cloud/oAhaab
...commands to set the default font family and size are issued, but they aren't applied to the content that is then loaded into the editor. They are fired, but don't end up applying to content loaded into the editor.
Whereas,in this example: https://fiddle.tiny.cloud/nAhaab
...the default font information is applied to loaded content via CSS as expected.
The theme I use lets photoset images pop up to the grey gallery slide show.
If I post only a single photo nothing happens, even when I insert a clickthrough URL.
I'd like to have the grey slide show gallery for all images.
On the dashboard it works, but not in the theme.
I think there's some code missing, but I don't know it.
Could somebody have a look on it, please?
I use this theme http://mindspalace.tumblr.com
There's no official way for doing this, but you could 'piggyback' tumblr's Lightbox function Tumblr.Lightbox.init() since it's already loaded on your blog for photosets.
It accepts an array containing the urls of all the photoset images, but in this case there is only one image so you can just pass that.
A quick edit of the javascript tumblr appends to every photoset, to allow single photos:
<script class="inline_embed" type="text/javascript">
var domain = document.domain,
photo_{PostID} = [{
"width": "{PhotoWidth-HighRes}",
"height": "{PhotoHeight-HighRes}",
"low_res": "{PhotoURL-250}",
"high_res": "{PhotoURL-HighRes}"
}];
function event_is_alt_key(e) {
return ((!e && window.event && (window.event.metaKey || window.event.altKey)) || (e && (e.metaKey || e.altKey)));
};
document.getElementById('photo_{PostID}').onclick = function (e) {
if (event_is_alt_key(e)) return true;
window.parent.Tumblr.Lightbox.init(photo_{PostID});
return false;
}
</script>
In the Edit HTML screen of your theme's Customize, search for the {Block:Photo} and inside, look for the <img or {PhotoURL tag. You'll need to add an id="{PostID} to the <img /> so it will resemble something like this:
<img id="photo_{PostID}" src="{PhotoURL-500}" />
Once you've done that, copy the modified javascript code block at the top and paste it after the image code, and save. When you click an image post, it should bring up the Lightbox that tumblr uses for photosets and show the vignette background.
Creating a custom HTML theme
I'm trying to use FancyBox for a gallery of 36 images, but whenever I click on the image to trigger FancyBox, the thumbnail helper does 2 really odd things:
1) loads an extra thumbnail of the image I clicked at the END of the gallery thumbnails
2) the thumbnail helper does not go to clicked image's corresponding thumbnail. instead, it goes to the new thumbnail of that image I made at the end of the gallery.
here is a link to what I have so far: http://lalalichan.com/temp/process_test6.html
At the bottom, you'll see the thumbnails that trigger the images into a display area. the images that appear in that display area are links that then trigger FancyBox.
everything else is working like it's supposed to; i can navigate between my images, i can close out of FancyBox, and when I click on the thumbnail that I want the correct corresponding image appears.
it's just this nuisance that's making an otherwise smooth functionality go to heck.
any kind of help would be appreciated, thanks so much in advance!
Fancybox will generate a thumbnail for each link with the class bound to it so if you have this script
$('.fancybox').fancybox({});
and 6 links with the same class as the selector bound to fancybox like
<a class="fancybox" href="{target}" .... etc
then fancybox will generate 6 thumbnails ... so far so good.
What is happening in your case, when you load your (demo) page, there are 6 (hidden) links with class="fancybox". Also there is an empty container (id="content") where you display your bigger thumbnails
<div style="width: 820px; height: 546px;" id="content"></div>
but when you click on any of the (non-fancybox) thumbnails at the bottom of your page, the container with id="content" is populated with a 7th link with class="fancybox", duplicating one of your original links, depending on which thumbnail you clicked ... so 7 thumbnails will be generated in fancybox after this action.
Since this link is appended at the end of the pile, it will be placed at the end of the gallery too.
Your are using another plugin (thumbnailScroller), which I believe is adding the extra element to the DOM.
EDIT : New questions asked:
I still don't fully understand how clicking on the scrolling thumbnails would populate the #content div with a seventh link. How could I stop it from doing that while still retaining all the functionality of the scroller?
Your code needs a bit of tweaks: first, you are duplicating your fancybox custom script ... you just need it once. Second, you just need to load either jquery.fancybox.js or jquery.fancybox.pack.js but not both.
Regarding the functionality you ask, what I would do is:
1: Move the hidden links from the DIV id="load" to DIV id="content"
2: change the css to
#content a {
position:absolute;
visibility: hidden;
}
3: change this script
$(function(){
$('.image').live('click',function(){
var href = $(this).attr('href');
if ($('#content').is(':visible')) {
$('#content').css('visibility','hidden');
}
$('#content').load('#load #'+href,function(){
$('#content').css('visibility','visible').hide().fadeIn('3000');
});
});
return true;
})
into this
$(function(){
$('.image').each(function(i){
$(this).bind('click', function(){
$("#content a").css('visibility','hidden').eq(i).css('visibility','visible').hide().fadeIn('3000');
}); // bind
}); // each
return false;
});
assuming that the thumbnails are in the same order as the links inside the DIV with id="content".
I haven't tested the code but it's pretty much what would do the trick
EDIT 2: code improved Some changes to the css and js
New css:
#content a {
position:absolute;
display: none; /* was visibility: hidden; */
}
new js: displays the first big thumbnail on page load
$(function(){
$("#content a").eq(0).show();
$('.image').each(function(i){
$(this).bind('click', function(){
$("#content a").hide().eq(i).fadeIn('3000');
}); // bind
}); // each
return false;
});
BTW, I wouldn't add inline styles (using the style attribute), I would use style sheets instead.
In jQTouch I am fetching a page dynamically from the server per the jQT demos per
The Page
It loads the HTML snippet into
<div id="page">
Normally I'd be able to do
$('#page').bind("pageAnimationEnd", ...)
to know when the page had finished loading, but it doesn't seem to work with dynamically loaded content. I've been trying to find a workaround but haven't been able to. I think that this question on SO is asking the same thing, but there didn't seem to be any conclusive answer.
If you have access to the "page", just put the javascript on that page and it will be executed when it is done loading. So in the page html you could just add ...
<script>
$(function() {
do something when im finished
});
</script>
$('#myid').live('pageAnimationStart', function(e, info){
//do something
}).bind('pageAnimationEnd', function(e, info){
if (info.direction == 'in'){
//do something
}
});