Bootloader/still learning, - facebook

I was looking at my Facebook message/call log and there's number I don't know, so I was copy and pasting them to look them up, and got the pop up verify it s me question and after I did this code just took over screen.
I also want to add I unlocked my developer option, and I also think my FB, google, accounts my phone. This is the second time it has happened not sure if same code, I still have the first on.
I have been googling and asking other people, I have learned lots, but darn I still can't figure it all at, just bits and pieces and been working on this for 3 months. I need help and I m loosen my mind..can anyone help?
Here is some of the code
<!DOCTYPE html><html><head><title>Uploading and Managing Your Call Logs</title><meta name="viewport" content="user-scalable=no,initial-scale=1,maximum-scale=1" /><link href="https://static.xx.fbcdn.net/rsrc.php/v3/ya/r/O2aKM2iSbOw.png" rel="shortcut icon" sizes="196x196" /><meta name="referrer" content="origin-when-crossorigin" id="meta_referrer" /><meta name="theme-color" content="#3b5998" /><link rel="stylesheet" type="text/css" crossorigin="anonymous" data-bootloader-hash="OEPze" href="https://static.xx.fbcdn.net/rsrc.php/v3/yY/l/0,cross/-RGU43oKxbV.css" /><link rel="stylesheet" type="text/css" crossorigin="anonymous" data-bootloader-hash="xILv8" href="https://static.xx.fbcdn.net/rsrc.php/v3/yH/l/0,cross/MLFY5VudT49.css" /><link rel="stylesheet" type="text/css" crossorigin="anonymous" data-bootloader-hash="cFdJm" href="https://static.xx.fbcdn.net/rsrc.php/v3/y_/l/0,cross/1FUAQskYbo2.css" /><link rel="stylesheet" type="text/css" crossorigin="anonymous" data-bootloader-hash="RoiDK" href="https://static.xx.fbcdn.net/rsrc.php/v3/y1/l/0,cross/hDC0vMrvPIV.css" /><script id="u_0_q">function envFlush(a){function b(b){for(var c in a)b[c]=a[c]}window.requireLazy?window.requireLazy(["Env"],b):(window.Env=window.Env||{},b(window.Env))}envFlush({"stratcom_event_profiler_hook":"1","timeslice_heartbeat_config":{"pollIntervalMs":33,"idleGapThresholdMs":60,"ignoredTimesliceNames":{"requestAnimationFrame":true,"Event listenHandler mousemove":true,"Event listenHandler mouseover":true,"Event listenHandler mouseout":true,"Event listenHandler scroll":true},"isHeartbeatEnabled":true,"isArtilleryOn":false},"shouldLogCounters":true,"timeslice_categories":{"react_render":true,"reflow":true},"sample_continuation_stacktraces":true,"dom_mutation_flag":true});</script><script>document.domain
= 'facebook.com';/^#~?!(?:\/?[\w\.-])+\/?(?:\?|$)/.test(location.hash)&&location.replace(location.hash.substr(location.hash.indexOf("!")+1));</script><script>__DEV__=0;</script><script id="u_0_r" crossorigin="anonymous" src="https://static.xx.fbcdn.net/rsrc.php/v3iczx4/yq/l/en_US/IvlINgvLNJi.js" data-bootloader-hash="Yth2c"></script><script id="u_0_o">CavalryLogger=window.CavalryLogger||function(a){this.lid=a,this.transition=!1,this.metric_collected=!1,this.is_detailed_profiler=!1,this.instrumentation_started=!1,this.pagelet_metrics={},this.events={},this.ongoing_watch={},this.values={t_cstart:window._cstart},this.piggy_values={},this.bootloader_metrics={},this.resource_to_pagelet_mapping={},this.initializeInstrumentation&&this.initializeInstrumentation()},CavalryLogger.prototype.setIsDetailedProfiler=function(a){this.is_detailed_profiler=a;return this},CavalryLogger.prototype.setTTIEvent=function(a){this.tti_event=a;return this},CavalryLogger.prototype.setValue=function(a,b,c,d){d=d?this.piggy_values:this.values;(typeof d[a]==="undefined"||c)&&(d[a]=b);return this},CavalryLogger.prototype.getLastTtiValue=function(){return this.lastTtiValue},CavalryLogger.prototype.setTimeStamp=CavalryLogger.prototype.setTimeStamp||function(a,b,c,d){this.mark(a);var e=this.values.t_cstart||this.values.t_start;e=d?e+d:CavalryLogger.now();this.setValue(a,e,b,c);this.tti_event&&a==this.tti_event&&(this.lastTtiValue=e,this.setTimeStamp("t_tti",b));return this},CavalryLogger.prototype.mark=typeof console==="object"&&console.timeStamp?function(a){console.timeStamp(a)}:function(){},CavalryLogger.prototype.addPiggyback=function(a,b){this.piggy_values[a]=b;return this},CavalryLogger.instances={},CavalryLogger.id=0,CavalryLogger.disableArtilleryOnUntilOffLogging=!1,CavalryLogger.getInstance=function(a){typeof a==="undefined"&&(a=CavalryLogger.id);CavalryLogger.instances[a]||(CavalryLogger.instances[a]=new CavalryLogger(a));return CavalryLogger.instances[a]},CavalryLogger.setPageID=function(a){if(CavalryLogger.id===0){var b=CavalryLogger.getInstance();CavalryLogger.instances[a]=b;CavalryLogger.instances[a].lid=a;delete CavalryLogger.instances[0]}CavalryLogger.id=a},CavalryLogger.now=function(){return window.performance&&performance.timing&&performance.timing.navigationStart&&performance.now?performance.now()+performance.timing.navigationStart:new Date().getTime()},CavalryLogger.prototype.measureResources=function(){},CavalryLogger.prototype.profileEarlyResources=function(){},CavalryLogger.getBootloaderMetricsFromAllLoggers=function(){},CavalryLogger.start_js=function(){},CavalryLogger.done_js=function(){};CavalryLogger.getInstance().setTTIEvent("t_domcontent");CavalryLogger.prototype.measureResources=function(a,b){if(!this.log_resources)return;var c="bootload/"+a.name;if(this.bootloader_metrics[c]!==undefined||this.ongoing_watch[c]!==undefined)return;var d=CavalryLogger.now();this.ongoing_watch[c]=d;"start_"+c in this.bootloader_metrics||(this.bootloader_metrics["start_"+c]=d);b&&!("tag_"+c in this.bootloader_metrics)&&(this.bootloader_metrics["tag_"+c]=b);if(a.type==="js"){c="js_exec/"+a.name;this.ongoing_watch[c]=d}},CavalryLogger.prototype.stopWatch=function(a){if(this.ongoing_watch[a]){var b=CavalryLogger.now(),c=b-this.ongoing_watch[a];this.bootloader_metrics[a]=c;var d=this.piggy_values;a.indexOf("bootload")===0&&(d.t_resource_download||(d.t_resource_download=0),d.resources_downloaded||(d.resources_downloaded=0),d.t_resource_download+=c,d.resources_downloaded+=1,d["tag_"+a]=="_EF_"&&(d.t_pagelet_cssload_early_resources=b));delete this.ongoing_watch[a]}return this},CavalryLogger.getBootloaderMetricsFromAllLoggers=function(){var a={};Object.values(window.CavalryLogger.instances).forEach(function(b){b.bootloader_metrics&&Object.assign(a,b.bootloader_metrics)});return a},CavalryLogger.start_js=function(a){for(var b=0;b<a.length;++b)CavalryLogger.getInstance().stopWatch("js_exec/"+a[b])},CavalryLogger.done_js=function(a){for(var b=0;b<a.length;++b)CavalryLogger.getInstance().stopWatch("bootload/"+a[b])},CavalryLogger.prototype.profileEarlyResources=function(a){for(var b=0;b<a.length;b++)this.measureResources({name:a[b][0],type:a[b][1]?"js":""},"_EF_")};CavalryLogger.getInstance().log_resources=true;CavalryLogger.getInstance().setIsDetailedProfiler(true);window.CavalryLogger&&CavalryLogger.getInstance().setTimeStamp("t_start");</script><script id="u_0_p">(function _(a,b,c,d){function e(a){document.cookie=a+"=;expires=Thu, 01-Jan-1970 00:00:01 GMT;path=/;domain=.facebook.com"}function f(a,b){document.cookie=a+"="+b+";path=/;domain=.facebook.com;secure"}if(!a){e(b);e(c);return}a=null;(navigator.userAgent.indexOf("Firefox")!==-1||!window.devicePixelRatio&&navigator.userAgent.indexOf("Windows Phone")!==-1)&&(document.documentElement!=null&&(a=screen.width/document.documentElement.offsetWidth,a=Math.max(1,Math.floor(a*2)/2)));(!a||a===1)&&navigator.userAgent.indexOf("IEMobile")!==-1&&(a=Math.sqrt(screen.deviceXDPI*screen.deviceYDPI)/96,a=Math.max(1,Math.round(a*2)/2));f(b,(a||window.devicePixelRatio||1).toString());e=window.screen?screen.width:0;b=window.screen?screen.height:0;f(c,e+"x"+b);d&&document.cookie&&window.devicePixelRatio>1&&document.location.reload()})(true, "m_pixel_ratio", "wd", false);</script><meta http-equiv="origin-trial" data-feature="getInstalledRelatedApps" data-expires="2017-12-04" content="AvpndGzuAwLY463N1HvHrsK3WE5yU5g6Fehz7Vl7bomqhPI/nYGOjVg3TI0jq5tQ5dP3kDSd1HXVtKMQyZPRxAAAAABleyJvcmlnaW4iOiJodHRwczovL2ZhY2Vib29rLmNvbTo0NDMiLCJmZWF0dXJlIjoiSW5zdGFsbGVkQXBwIiwiZXhwaXJ5IjoxNTEyNDI3NDA0LCJpc1N1YmRvbWFpbiI6dHJ1ZX0=" /><link rel="manifest" href="/data/manifest/" crossorigin="use-credentials" /></head><body tabindex="0" class="touch x2 android _fzu _50-3 iframe _2v9s"><script id="u_0_n">(function(a){a.__updateOrientation=function(){var b=!!a.orientation&&a.orientation!==180,c=document.body;c&&(c.className=c.className.replace(/(^|\s)(landscape|portrait)(\s|$)/g," ")+" "+(b?"landscape":"portrait"));return b}})(window);</script><div id="viewport" data-kaios-focus-transparent="1"><h1 style="display:block;height:0;overflow:hidden;position:absolute;width:0;padding:0">Facebook</h1><div id="page" class=""><div class="_129_" id="header-notices"></div><div class="_129- _6dr5"><div class="_52z5 _451a _3qet _17gp" id="header" data-sigil="MTopBlueBarHeader"><div class="_4g33 _52we" id="mJewelNav"><div class="_4g34"><div class="_59te jewel _hzb noCount" data-store="{"tab":"feed","tabID":4748854339}" id="feed_jewel" data-sigil="nav-popover feed"><a name="News Feed" accesskey="1" href="/home.php" class="_19no touchable" id="u_0_7" data-sigil="icon"><span style="display:block;height:0;overflow:hidden;position:absolute;width:0;padding:0">News Feed</span><div class="_2ftp _62ta"><div class="_59tf _2ftq"><span class="_59tg" data-sigil="count">0</span></div></div></a></div></div><div class="_4g34"><div class="_59te jewel _hzb noCount" data-store="{"tab":"requests","tabID":122818001061574}" id="requests_jewel" data-sigil="nav-popover requests"><span style="display:block;height:0;overflow:hidden;position:absolute;width:0;padding:0">FRIEND REQUESTS</span><div class="_2ftp _62ta"><div class="_59tf _2ftq"><span class="_59tg" data-sigil="count">0</span></div></div><div class="flyout popover_hidden" role="complementary" id="reqs_flyout" data-sigil="flyout flyout"><div data-sigil="flyout-content context-layer-root"><div id="MFriendRequestsFlyoutContent"><ol class="_7k7 inner" data-sigil="contents requests-flyout-pagelet-placeholder"><li class="acw apl" data-sigil="marea"><div style="text-align:center;"><div class="_2so
_2sq _2ss img _50cg" data-animtype="1" id="u_0_4" data-sigil="m-loading-indicator-animate m-loading-indicator-root"></div></div></li></ol></div></div><div class="_imu"></div></div></div></div><div class="_4g34"><div class="_59te jewel _hzb noCount" data-store="{"tab":"messages&quot

Related

Chalkboard pre-recorded drawing in reveal presentation not loading

I have been using the chalkboard plugin for a reveal presentation. As it is written on the github page (https://github.com/rajgoel/reveal.js-plugins/tree/master/chalkboard), I saved the drawings in a json file by pressing d (as far as I can tell, the data was correctly stored in the json file) and then I added the line src: "prova/cb.json", to the initialization for chalkboard and loaded the presentation with ?print-pdf.
However, when I open the presentation, there is no trace of the drawings that should be loaded.
This is the html of a minimal (non) working example...
Does anyone know what's going on?
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Prova</title>
<link rel="stylesheet" href="dist/reset.css">
<link rel="stylesheet" href="dist/reveal.css">
<link rel="stylesheet" href="dist/theme/night.css" id="theme">
<link rel="stylesheet" href="plugin/highlight/monokai.css" id="highlight-theme">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>
<body>
<div class="reveal">
<div class="slides">
<section >
<h4>Prova</h4>
</section>
</div>
</div>
<script src="dist/reveal.js"></script>
<script src="plugin/notes/notes.js"></script>
<script src="plugin/markdown/markdown.js"></script>
<script src="plugin/highlight/highlight.js"></script>
<script src="plugin/zoom/zoom.js"></script>
<script src="plugin/math/math.js"></script>
<script src="plugin/chalkboard/plugin.js"></script>
<script>
Reveal.initialize({
hash: true,
controls: false,
transition: 'convex',
math: {
mathjax: 'http://cdn.mathjax.org/mathjax/latest/MathJax.js',
config: 'TeX-AMS-MML_HTMLorMML'
},
chalkboard: {
src: "prova/cb.json",
toggleChalkboardButton: { left: "80px" },
toggleNotesButton: { left: "130px" },
},
plugins: [ RevealMarkdown, RevealHighlight, RevealNotes, RevealZoom, RevealMath, RevealChalkboard ],
});
</script>
</body>
</html>

How to add a favicon to a Next.js static site?

I'm trying to add a favicon to a Next.js static site without much luck.
I've tried customising the document with components from 'next/document'
https://nextjs.org/docs/#custom-document
A straight link to the favicon.ico file doesn't work because the file isn't included in the build and the href doesn't update to /_next/static/...
Importing the image and adding to the link's href doesn't work either (see commented out lines).
import React from 'react';
import Document, { Html, Head, Main, NextScript } from 'next/document';
// import favicon from '../data/imageExports';
export default class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx);
return { ...initialProps };
}
render() {
return (
<Html>
<Head>
{/* <link rel="shortcut icon" href={favicon} /> */}
<link rel="shortcut icon" href="../images/icons/favicon.ico" />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
The favicon links get added however it doesn't display. I'd expect it to work when I import the file, but it just adds a <link rel="shortcut icon" href="[object Object]"> link.
Has anyone done this yet?
Create a /static folder in project root. This will be added to the static export folder.
Add favicon file in /static folder.
Add _document.js to /pages/ folder according to documentation (nextjs.org) or documentation (github.com).
Add <link rel="shortcut icon" href="/static/favicon.ico" /> to head.
npm run build && npm run export
P.S. Thanks to the previous answer that was deleted. It works!
Edit: Another way is to do this is to import Head into your root layout and add the link there. Anything added to Head gets inserted into the document head tag.
import Head from 'next/head';
const Page = (props) => (
<div>
<Head>
<link rel="shortcut icon" href="/static/favicon.ico" />
</Head>
// Other layout/components
</div>
);
export default Page;
Update :
The static directory has been deprecated in favor of the public directory. Doc
So, the code would now look like
import Head from 'next/head';
const Page = (props) => (
<div>
<Head>
<link rel="shortcut icon" href="/favicon.ico" />
</Head>
// Other layout/components
</div>
);
Simply add your favicon.ico in public folder,
Next js will automatically take that favicon for all pages.
No need to add any favicon link to any pages or in tag no need to add link for favicon.
https://github.com/zeit/next.js/blob/master/errors/static-dir-deprecated.md
The accepted answer is nice, but might be worth pointing out that you don't have to modify _document.js for adding a favicon (nor for adding any tags to head).
I found out for myself that placing favicon in _app.js makes more sense. This file is most likely to exist already for setting up a layout for the pages or something like this. And you can add Head tag literally anywhere (see the docs)
So I ended up with _app.js
class MyApp extends App {
render() {
const { Component, pageProps } = this.props;
return (
<Layout>
<Head>
<link rel="shortcut icon" href="/favicon.ico" />
</Head>
<Component {...pageProps} />
</Layout>
);
}
}
As of June 2020, you don't have to add/edit the document.js or _head.js files. All you need do to is place the favicon.ico file inside the public directory and that's it.
Only adding .ico file is not enough.
Add link tags to <Head> section in _document.jsx or _document.tsx The question is only about .ico file, but I would recommend to add different dimensions and formats for better support.
import React from 'react';
import Document, { Html, Head, Main, NextScript, DocumentContext, DocumentInitialProps } from 'next/document';
class MyDocument extends Document {
static async getInitialProps(ctx: DocumentContext): Promise<DocumentInitialProps> {
const initialProps = await Document.getInitialProps(ctx);
return { ...initialProps };
}
render(): React.ReactElement {
return (
<Html>
<Head>
<link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicons/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicons/favicon-16x16.png" />
<link rel="manifest" href="/favicons/site.webmanifest" />
<link rel="mask-icon" href="/favicons/safari-pinned-tab.svg" color="#5bbad5" />
<meta name="msapplication-TileColor" content="#ffc40d" />
<meta name="theme-color" content="#ffffff" />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;
You can generate different icons using RealFaviconGenerator and upload results to /public/favicons/ folder. This folder can be referenced by /favicons/ due to nature of public directory.
In my case it DID NOT WORK WITH OUT THE IMPORT:
file: _app.tsx
import { AppContext, AppProps } from "next/app";
import "../styles/common.scss";
import Head from 'next/head';
//For me it didn't work without the following import...
import favico from "../static/favicon.ico";
function MyApp({ Component, pageProps }: AppProps) {
const csrfToken = pageProps["anti-csrftoken-a2z"];
return (
<div>
<Head>
<link rel="shortcut icon" href={favico} type="image/x-icon" />
</Head>
<Component {...pageProps} />
</div>
);
}
MyApp.getInitialProps = async ({ Component, ctx }: AppContext) => {
let pageProps = {};
if (Component.getInitialProps) {
pageProps = await Component.getInitialProps(ctx);
}
return { pageProps };
};
export default MyApp;
I had to do favicon.src to make it work
Doesn't work:
import favicon from '...'
...
<link rel="shortcut icon" href={favicon} />
Works:
import favicon from '...'
...
<link rel="shortcut icon" href={favicon.src} />
To figure this out, I ran console.log(favicon) and it turns out that it was an object that looks something like this:
{
height: 16,
src: "path/to/favicon.603d046c.ico"
width: 16,
}
Next.js can serve static files, like images, under a folder called
public in the root directory. Files inside public can then be
referenced by your code starting from the base URL (/).
For example, if you add an image to public/me.png, the following code
will access the image:
import Image from 'next/image'
function Avatar() {
return <Image src="/me.png" alt="me" width="64" height="64" />
}
export default Avatar
Note: next/image requires Next.js 10 or later.
This folder is also useful for robots.txt, favicon.ico, Google
Site Verification, and any other static files (including .html)!
For your case, if you just replace the favicon.ico it will update accordingly.
For more details visit the official documentation.
I think it would be useful for someone
<Head>
<link rel="apple-touch-icon" sizes="57x57" href="/favicons/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="60x60" href="/favicons/apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/favicons/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="76x76" href="/favicons/apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/favicons/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon" sizes="120x120" href="/favicons/apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon" sizes="144x144" href="/favicons/apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon" sizes="152x152" href="/favicons/apple-touch-icon-152x152.png" />
<link rel="apple-touch-icon" sizes="167x167" href="/favicons/apple-touch-icon-167x167.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon-180x180.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicons/favicon-16x16.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicons/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="96x96" href="/favicons/favicon-96x96.png" />
<link rel="icon" type="image/png" sizes="128x128" href="/favicons/favicon-128x128.png" />
<link rel="icon" type="image/png" sizes="196x196" href="/favicons/favicon-196x196.png" />
<link rel="icon" type="image/png" sizes="192x192" href="/favicons/android-chrome-192x192.png" />
<link rel="icon" type="image/png" sizes="512x512" href="/favicons/android-chrome-512x512.png" />
<link rel="shortcut icon" href="/favicons/favicon.ico" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="msapplication-TileImage" content="/favicons/mstile-144x144.png"/>
<meta name="msapplication-square70x70logo" content="/favicons/mstile-70x70.png"/>
<meta name="msapplication-square150x150logo" content="/favicons/mstile-150x150.png"/>
<meta name="msapplication-square144x144logo" content="/favicons/mstile-144x144.png"/>
<meta name="msapplication-square310x310logo" content="/favicons/mstile-310x310.png"/>
</Head>
For me it was missing in production site but working fine in local because I didn't add the public folder in the artifacts of the production site. I assumed that next.js would put all it needs in .next folder but it's not the case.
cp -R ./.next/ artifacts/
cp -R ./node_modules/ artifacts
cp -R ./public/ artifacts #missing line in my github action code
cp package.json ./artifacts/package.json
I had to put mine under public/images directory with Next.js v18.
Putting under public did not work.

leaflet markers non shown on ios mobile device

I use leaflet to display my geolocated picture on my website (you can see my test site here: http://test.vincentbourganel.fr/pages/map-osm/)
everthing goes fine exept one thing:
when I browse my website from an ios mobile device (ios 11.3.1), no markers are displayed.
I can't figure where is the matter.
I try to have a reduce test case (only html, outside zenphoto, used for my gallery) with only 2 markers but the issue remains the same.
You can see it here:
http://test.vincentbourganel.fr/test_osm_map.html
can you point me to the right direction to solve this issue?
thanks for your help!!
vincent
edit after comment:
there is the code of my page:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
<script type="text/javascript" src="/zp-core/js/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="http://test.vincentbourganel.fr/plugins/zp_openstreetmap/leaflet.css" />
<link rel="stylesheet" type="text/css" href="http://test.vincentbourganel.fr/plugins/zp_openstreetmap/zp_openstreetmap.css" />
<script src="http://test.vincentbourganel.fr/plugins/zp_openstreetmap/leaflet.js"></script>
<script src="http://test.vincentbourganel.fr/plugins/zp_openstreetmap/leaflet-providers.js"></script>
<title>[VB] Photo US | Map OSM</title>
</head>
<body>
<h3>Map OSM</h3>
<div id="osm_map" style="width:100%; height:600px;"></div>
<script>
var map = L.map('osm_map', {
zoom: 4,
zoomControl: false,
minZoom: 2,
maxZoom: 18
});
L.tileLayer.provider('OpenTopoMap').addTo(map);
L.control.zoom({position: 'topleft'}).addTo(map);
L.marker([57.150,-6.100]).addTo(map);
L.marker([57.500,-6.450]).addTo(map);
map.fitBounds([
[57.150,-6.100], [57.500,-6.450]
]);
</script>
</body>
</html>
there is the code of my test case taht you can see here: http://test.vincentbourganel.fr/test_osm_map.html
I am unable to see the 2 markers on my ios mobile device.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
<script type="text/javascript" src="/zp-core/js/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="http://test.vincentbourganel.fr/plugins/zp_openstreetmap/leaflet.css" />
<link rel="stylesheet" type="text/css" href="http://test.vincentbourganel.fr/plugins/zp_openstreetmap/zp_openstreetmap.css" />
<script src="http://test.vincentbourganel.fr/plugins/zp_openstreetmap/leaflet.js"></script>
<script src="http://test.vincentbourganel.fr/plugins/zp_openstreetmap/leaflet-providers.js"></script>
<title>[VB] Photo US | Map OSM</title>
</head>
<body>
<h3>Map OSM</h3>
<div id="osm_map" style="width:100%; height:600px;"></div>
<script>
var map = L.map('osm_map', {
zoom: 4,
zoomControl: false,
minZoom: 2,
maxZoom: 18
});
L.tileLayer.provider('OpenTopoMap').addTo(map);
L.control.zoom({position: 'topleft'}).addTo(map);
L.marker([57.150,-6.100]).addTo(map);
L.marker([57.500,-6.450]).addTo(map);
map.fitBounds([
[57.150,-6.100], [57.500,-6.450]
]);
</script>
</body>
</html>

In CrafterCMS drag and drop configuration is not working properly

In CrafterCMS, I'm trying to setup the drag and drop facility in my current project.
But when I'm in studio I get following error message:
Despite the error, I'm able to add new components to the page with drag and drop, however when I add a new component, all the previous selected components are replaced by the new one.
I.e. if I have:
By adding a new "component6" I get:
Here's the template of page
<#import "/templates/system/common/cstudio-support.ftl" as studio />
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="en"> <!--<![endif]-->
<#assign siteTitle = contentModel.title!"" />
<head>
<meta charset="utf-8">
<title>${siteTitle}</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="/static-assets/images/favicon.ico">
<!--Google Font link-->
<link href="https://fonts.googleapis.com/css?family=Raleway:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Droid+Sans" rel="stylesheet">
<link rel="stylesheet" href="/static-assets/css/animate.css">
<link rel="stylesheet" href="/static-assets/css/iconfont.css">
<link rel="stylesheet" href="/static-assets/css/font-awesome.min.css">
<link rel="stylesheet" href="/static-assets/css/bootstrap.css">
<link rel="stylesheet" href="/static-assets/css/magnific-popup.css">
<link rel="stylesheet" href="/static-assets/css/bootsnav.css">
<!--For Plugins external css-->
<link rel="stylesheet" href="/static-assets/css/plugins.css" />
<!--Theme custom css-->
<link rel="stylesheet" href="/static-assets/css/style.css">
<!--<link rel="stylesheet" href="/static-assets/css/colors/maron.css">-->
<!--Theme Responsive css-->
<link rel="stylesheet" href="/static-assets/css/responsive.css" />
<!-- Scroll Indicator Bullets-->
<link rel="stylesheet" href="static-assets/css/jquery.scrollindicatorbullets.css" />
<script src="/static-assets/js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
</head>
<body data-spy="scroll" data-target="#navbar-menu" data-offset="110">
<!-- Header -->
<#include "/templates/web/page-home-header.ftl" />
<!-- Sections -->
<div <#studio.iceAttr iceGroup="sections"/> >
<div class="sections" <#studio.componentContainerAttr target="sections" objectId=model.objectId/>>
<#list (contentModel.sections.item)![] as aSection >
<#renderComponent component=aSection />
</#list>
</div>
</div>
<!-- Footer -->
<#include "/templates/web/page-home-footer.ftl" />
<!-- JS includes -->
<script src="/static-assets/js/vendor/jquery-1.11.2.min.js"></script>
<script src="/static-assets/js/vendor/bootstrap.min.js"></script>
<script src="/static-assets/js/jquery.magnific-popup.js"></script>
<script src="/static-assets/js/jquery.easing.1.3.js"></script>
<script src="/static-assets/js/bootsnav.js"></script>
<script src="/static-assets/js/plugins.js"></script>
<script src="/static-assets/js/main.js"></script>
<#studio.toolSupport/>
</body>
</html>
This is the template of the component I'm using:
<#import "/templates/system/common/cstudio-support.ftl" as studio/>
<!--Dialogue section-->
<section id="dialogue" class="dialogue bg-white roomy-80" <#studio.componentAttr path=contentModel.storeUrl />>
<#if contentModel.sectionTitle?? ><span class="scrollIndicatorTitle">${contentModel.sectionTitle}</span></#if>
<div class="container">
<div class="row">
<div class="main_dialogue text-center">
<div class="col-md-12">
<h3>${contentModel.text}</h3>
</div>
</div>
</div>
</div>
</section>
When I add the component in the log I see:
INFO : org.craftercms.search.service.impl.SolrSearchService - [spbb] Delete for id:"spbb:/site/components/component6.xml" OR parentId:"spbb:/site/components/component6.xml" successful: {responseHeader={status=0,QTime=3}}
INFO : org.craftercms.search.service.impl.SolrSearchService - [spbb] Update for spbb:/site/components/component6.xml successful: {responseHeader={status=0,QTime=3}}
INFO : org.craftercms.search.service.impl.SolrSearchService - [spbb] Commit successful: {responseHeader={status=0,QTime=24}}
[INFO] 2017-05-09 12:25:44,716 [http-nio-8080-exec-9] [spbb] [rest.SiteCacheRestController] | Content cache and Freemarker cache have been cleared for site 'spbb'
INFO : org.craftercms.search.service.impl.SolrSearchService - [spbb] Delete for id:"spbb:/site/website/products/index.xml" OR parentId:"spbb:/site/website/products/index.xml" successful: {responseHeader={status=0,QTime=7}}
WARN : org.craftercms.search.service.impl.RenameFieldsIfMultiValuePostProcessor - Field 'sections.item.component.createdDate_dt' is declared as single value, but multiple values where provided in spbb:/site/website/products/index.xml. Renaming to multi value field 'sections.item.component.createdDate_dts'
WARN : org.craftercms.search.service.impl.RenameFieldsIfMultiValuePostProcessor - Field 'sections.item.component.lastModifiedDate_dt' is declared as single value, but multiple values where provided in spbb:/site/website/products/index.xml. Renaming to multi value field 'sections.item.component.lastModifiedDate_dts'
INFO : org.craftercms.search.service.impl.SolrSearchService - [spbb] Update for spbb:/site/website/products/index.xml successful: {responseHeader={status=0,QTime=7}}
INFO : org.craftercms.search.service.impl.SolrSearchService - [spbb] Commit successful: {responseHeader={status=0,QTime=29}}
[INFO] 2017-05-09 12:25:45,174 [http-nio-8080-exec-10] [spbb] [rest.SiteCacheRestController] | Content cache and Freemarker cache have been cleared for site 'spbb'
There's something else that I'm missing?

Facebook Can't scrape my Joomla website even when i added OG:tags

I have all the OG tags specified but Facebook still can't read my website. What's wrong?
Here is my HEAD section
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<base href="http://www.mojadebica.pl/kryminalne/1392-akcja-trzezwy-poranek-na-podkarpaciu" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="robots" content="index, follow" />
<meta name="keywords" content="Dębica, pizzerie, pizza, wyszukiwarka, jedzenie, na, wynos, dyżury, aptek, noclegi, reklama, strony www, portal, informacje, ogłoszenia, repertuar kin, oferty, pracy, forum, org, nasza" />
<meta name="og:image" content="http://www.mojadebica.pl/images/thumbs/poranek.jpg" />
<meta name="og:type" content="article" />
<meta name="title" content="Akcja 'Trzeźwy poranek' na Podkarpaciu" />
<meta name="og:title" content="Portal MojaDebica.pl" />
<meta name="og:url" content="http://www.mojadebica.pl/kryminalne/1392-akcja-trzezwy-poranek-na-podkarpaciu" />
<meta name="og:site_name" content="E-max" />
<meta name="og:description" content="Moja Dębica - najnowsze informacje i aktualności z Dębicy. Największa baza ofert pracy, ogłoszenia z dębicy i okolic oraz wyszukiwarka pizzy!" />
<meta name="description" content="Moja Dębica - najnowsze informacje i aktualności z Dębicy. Największa baza ofert pracy, ogłoszenia z dębicy i okolic oraz wyszukiwarka pizzy!" />
<meta name="generator" content="Joomla! 1.5 - Open Source Content Management" />
<title>Akcja "Trzeźwy poranek" na Podkarpaciu</title>
<link href="/templates/back-to-nature/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link rel="stylesheet" href="/media/system/css/modal.css" type="text/css" />
<link rel="stylesheet" href="/components/com_k2/css/k2.css" type="text/css" />
<link rel="stylesheet" href="/components/com_jcomments/tpl/default/style.css?v=12" type="text/css" />
<script type="text/javascript" src="/media/system/js/mootools.js"></script>
<script type="text/javascript" src="/media/system/js/modal.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="/components/com_k2/js/k2.js"></script>
<script type="text/javascript" src="/components/com_jcomments/js/jcomments-v2.1.js?v=7"></script>
<script type="text/javascript" src="/components/com_jcomments/libraries/joomlatune/ajax.js?v=3"></script>
<script type="text/javascript" src="/media/system/js/caption.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
SqueezeBox.initialize({});
$$('a.modal').each(function(el) {
el.addEvent('click', function(e) {
new Event(e).stop();
SqueezeBox.fromElement(el);
});
});
});
var K2SitePath = '/';
</script>
<link rel="stylesheet" href="/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="/templates/mdnew/stylemd4.4.css" type="text/css" />
<link rel="shortcut icon" href="/templates/mdnew/favicon.ico" />
<!--[if lte IE 6]>
<link href="/templates/back-to-nature/css/ieonly.css" rel="stylesheet" type="text/css" />
<![endif]-->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-15391002-3']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
And here is sample article:
http://www.mojadebica.pl/video/1388-sonda-gdzie-jest-najlepsze-jedzenie-w-debicy-video-hd
Missing Required Property: The 'og:url' property is required, but not present.
but it's specified here:
<meta name="og:url" content="http://www.mojadebica.pl/kryminalne/1392-akcja-trzezwy-poranek-na-podkarpaciu" />
Your problem is with your webserver configuration.
In your response headers, your server is sending Content-Encoding: none. This is not valid.
There may be additional rules in there that are sending the Facebook parser a 403: Forbidden reply.
If you host with an ISP, contact them about this problem. If you're rolling your own server, you'll need to dig into the LiteSpeed documentation.