I was debugging my web app using DevTools when I noticed that Firefox is requesting url defined in src attribute of an img that is located inside a HTML5 template tag, while Chrome doesn't.
I'm using the last version (50.0).
Is this a bug?
Example below:
<template id="object-img">
<div class='object-container'>
<div>
<img src="cacaca.jpg" class="img-responsive" alt="imagem" />
</div>
</div>
</template>
It's a kind of optimization from Firefox.
The image is requested only the first time if it is not already in the browser's history / cache. Subsequent reload of the page won't trigger the request again.
The problem is that the image inside the <template> is requested before the following but normal images in the rendered DOM, which could be counterproductive in some situations. A solution is to put the <template> after the other images.
Note: the template specifications state that the elements in the template are not rendered, but they are parsed. They say nothing about preloading of referenced resources.
Related
<body>
<div data-anchor="page_1"></div>
<div data-anchor="page_2"></div>
<div data-anchor="page_3"></div>
<div data-anchor="page_4"></div>
</body>
When I open my home page http://my.site/index, the default page is
page_1 and there is no hash part #page_1 in URL.
I slid down the screen and current page changes to page_2 with URL
http://my.site/index#page_2
I navigate back and the URL changes to
http://my.site/index. The page is still on page_2 which I wanted
is page_1.
Are there some options on creating fullpage.js or should I set the default URL to http://my.site/index#page_1?
Unfortunately that's a well known bug in fullPage.js for which there's no solution so far.
You can read more about it on the repo's github issues forum:
https://github.com/alvarotrigo/fullPage.js/issues/950
To prevent this, you can force fullpage.js to ignore the anchors by using the options recordHistory: false or lockAnchors: true.
When I compile my vuejs and then do a view source (chrome) I still see the directives and variable place holders?
<nav #click="toggleNav"></nav>
<span class="title">{{ pageName }}</span>
I am pulling it in via
<script src="https://unpkg.com/vue/dist/vue.js"></script>
When I try to validate via the W3c I get loads of errors. Should these not be compiled down?
Should I make anything with a directive on it a component so it does not show in my html?
I am developing a Blog with Laravel 5.3. In the Add Post Page, I use CKEDITOR with Code Snippet Plugin. In this area Everything is OK. Code added in the textarea field by plugin is also become highlighted.
In the Target Page I added:
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.8.0/styles/default.min.css">
In the Header section of the page.
and
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.8.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
In the footer section of the page.
The page received the following html code from the Database.
<p>The place for Laravel Blade Template.</p>
<pre>
<code class="language-html"><div><h1>
This is a Header</h1></div></code></pre>
<p> </p>
which is showing like this.
<p>The place for Laravel Blade Template.</p> <pre>
<code class="language-html"><div><h1>This is a Header</h1></div></code>
</pre> <p> </p>
So the code section is not highlighted.
How can I do that. What's my wrong? I need Help.
The problem is, that the whole HTML code is escaped, so it won't be interpreted by the browser.
What you want is that only the content between <code class="language-html">...</code> is escaped, so that the Browser renders the code container correctly and that highlight.js can hook into the DOM object.
In Laravel 5 to output non escaped HTML you must use {!! !!}
An example of this:
{!!$myDatabaseHtml!!}
Note upfront: I do not have any experience using scripts but only some basic HTML and PHP skills.
I would like a page on my google site to refresh automatically as soon as the embedded google form was submitted. This to instantly display the embedded and updated google form results after the button is clicked without the visitor having to reload the page manually. (like you would have for any online poll)
My form sheet is updating perfectly but I have not yet found an example or tutorial how to make a page refresh work for the google site with an embedded google form when the submit button is clicked. I hope someone can help me by providing an example on how to make this work. Preferably I would like to use an embedded google form rather than having to create a separate PHP form loading into google forms what could be an alternative. Thanks.
Below the HTML as I can see it on my Google page. I would need a trigger I guess from these embedded forms to refresh the page on submit. I just have no idea on how to get this done.
<div>
<div style="text-align:left">
<div><img src="https://www.google.com/chart?chc=sites&cht=d&chdp=sites&chl=%5B%5BSpreadsheet+form'%3D20'f%5Cv'a%5C%3D0'10'%3D499'0'dim'%5Cbox1'b%5CF6F6F6'fC%5CF6F6F6'eC%5C0'sk'%5C%5B%22test+int+sheet%22'%5D'a%5CV%5C%3D12'f%5C%5DV%5Cta%5C%3D10'%3D0'%3D500'%3D397'dim'%5C%3D10'%3D10'%3D500'%3D397'vdim'%5Cbox1'b%5Cva%5CF6F6F6'fC%5CC8C8C8'eC%5C'a%5C%5Do%5CLauto'f%5C&sig=5VZGSIULBu8sSdf833qiLWVDcx8" data-origsrc="1VACx4d2pJEZlvAezbO9Gnh_nX3nIPwSJ4iCNjEmCiUM" data-type="spreadsheet-form" data-props="align:center;borderTitle:test int sheet;doctype:freebird;height:400;objectTitle:test int sheet;showBorder:false;showBorderTitle:false;wrap:false;" width="500" height="400" style="display:block;margin:5px auto;text-align:center;"></div>
<br>
</div>
<div style="text-align:left"><img src="https://www.google.com/chart?chc=sites&cht=d&chdp=sites&chl=%5B%5BGoogle+Gadget'%3D20'f%5Cv'a%5C%3D0'10'%3D499'0'dim'%5Cbox1'b%5CF6F6F6'fC%5CF6F6F6'eC%5C0'sk'%5C%5B%22Include+gadget+(iframe)%22'%5D'a%5CV%5C%3D12'f%5C%5DV%5Cta%5C%3D10'%3D0'%3D500'%3D397'dim'%5C%3D10'%3D10'%3D500'%3D397'vdim'%5Cbox1'b%5Cva%5CF6F6F6'fC%5CC8C8C8'eC%5C'a%5C%5Do%5CLauto'f%5C&sig=t6_Deqv8rgMQCB28aqz1n9MoVTU" data-igsrc="http://164.gmodules.com/ig/ifr?mid=164&synd=trogedit&url=http%3A%2F%2Fhosting.gmodules.com%2Fig%2Fgadgets%2Ffile%2F106581606564100174314%2Fiframe.xml&up_iframeURL=https%3A%2F%2Fdocs.google.com%2Fspreadsheets%2Fd%2F1g2cGeavUciTy6po7_DXPXMNqC1fqTTROHRoTnsafFfM%2Fpubhtml%3Fgid%3D754672963%26single%3Dtrue&up_scroll=no&h=400&w=100%25" data-type="ggs-gadget" data-props="align:center;borderTitle:Include gadget (iframe);height:400;igsrc:http#58//164.gmodules.com/ig/ifr?mid=164&synd=trogedit&url=http%3A%2F%2Fhosting.gmodules.com%2Fig%2Fgadgets%2Ffile%2F106581606564100174314%2Fiframe.xml&up_iframeURL=https%3A%2F%2Fdocs.google.com%2Fspreadsheets%2Fd%2F1g2cGeavUciTy6po7_DXPXMNqC1fqTTROHRoTnsafFfM%2Fpubhtml%3Fgid%3D754672963%26single%3Dtrue&up_scroll=no&h=400&w=100%25;mid:164;scrolling:no;showBorder:false;showBorderTitle:null;spec:http#58//hosting.gmodules.com/ig/gadgets/file/106581606564100174314/iframe.xml;up_iframeURL:https#58//docs.google.com/spreadsheets/d/1g2cGeavUciTy6po7_DXPXMNqC1fqTTROHRoTnsafFfM/pubhtml?gid=754672963&single=true;up_scroll:no;view:default;width:100%;wrap:false;" width="500" height="400" style="display:block;margin:5px auto;text-align:center;" class="igm"></div>
<div style="text-align:left"><br>
</div>
<div style="text-align:center">
<div></div>
<br>
</div>
<div style="text-align:left">
<div style="text-align:center"><br>
</div>
<div style="text-align:center"><br>
</div>
<br>
</div>
</div>
I'm sorry to be the annunciator of a such bad news but that's impossible.
As your code show, you are actually using a google Site to display your google form. The line:
<img src="https://www.google.com/chart?chc=sites&cht=d&...
IS the way google tell you there is a google form in this page when you hit the button to get the source code.
In other words: google don't let you put whatever you want in a google site. It's impossible to add some JS code that will be fired when the user submit the form.
Even if you host your form in something else than a google Site, you won't have this ability, as the form himself will be displayed in an iframe that can't be modified by external scripts.
This is an hard limitation of Google Form, the only workaround that you may use is to write to the user in the confirmation message of the form that he now need to reload the page or go to an other link.
On this WordPress theme utilizing AJAX, proves to be difficult. The developer of the theme cannot seem to find the issue or solution to it.
This site runs beautifully, if, and only IF, you type is this complete URL "http://www.geigerandwood.com/#!//" if you type in the .com site alone, it will appear but will be disfunctional.
I have made attempts in 301 redirects, even creating a static page with a redirect but still no luck. Is there something that I can add or change in the code to make this work properly?
FYI - it has been tested on the common web browsers on both OSX & Windows.
Here is a video of my presented issue. http://www.screenr.com/D1G8
What theme do you use?
My quick examination of your page source code is that I only can find something related to the #!// is in here
<div id="contentBoxScroll">
<a id="closeButton" href="#!//"></a>
<div class="dragcontainer">
<div id="contentBoxScrollDragger" class="dragger">
<div class="scroll_up"></div>
<div class="scroll_down"></div>
</div>
</div>
</div>
I assume it must be something inside the script from which that HTML is generated. I can say more since I can't see the full source.