I'm using masonry and typekit. Hence, I would want the layout to not have overlapping due to image loading and at the same time render the typekit fonts without having the default fonts being shown in a flash when we first load the page.
Hence, I need javascript codes to deal with both issues: overlapping images from masonry and loading typekit fonts correctly.
I have the following codes in my javascript file that loads the masonry perfectly, but i'm unable to correctly load the typekit fonts. When the website first loads, it shows the default Times New Roman font, then it shows the typekit fonts after a flash.
How can I amend my javascript codes?
//trigger masonry and typekit
var $container = $('#wrapper');
function triggerMasonry() {
if ( !$container ) {
return
}
$container.imagesLoaded(function(){
$container.masonry({
itemSelector : '.box',
columnWidth : 240
});
});
}
$(function(){
$container = $('#wrapper');
triggerMasonry();
});
Typekit.load({
active: triggerMasonry,
inactive: triggerMasonry
});
Thanks for your code example it really helped me out and I was able to solve this just by simply removing the originaly Typekit load function that Typekit supplies:
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
After removing this my masonry worked flawless.
Related
My extension CSS hides youtube video (on youtube.com) from being displayed. The only issue, it loads only when the page is ready, so a noticeable 1-2 seconds of the video is being showed before it is hidden.
How can I inject CSS before the page even loads? Here is my injection code I tried with no luck:
window.addEventListener("DOMContentLoaded", function() {
path = chrome.runtime.getURL("/inject.css");
jQuery('<link/>', {
rel: 'stylesheet',
type: 'text/css',
href: path
}).appendTo('head');
});
Im using the following lib http://davidjbradshaw.github.io/iframe-resizer/ which enables cross site iFrame's to be resized after source page.
Although I encountered the following problem on the mobile device Im not able to solve:
When first loading the page the height of the iFrame is right (the whole loaded page is seen in the iframe). But when pressing a link which height is less then previous page then "resizedCallback" function could not called. So the current page height remain same as previous page. While the height of the current page is too small from previous page. This arises only on mobile.
This can be resolved by calling the parent resize method from second page.
For example your iFrame is like :
<iframe id="paymentForm" src="/payments/onlineDetailsForm" width="100%"
height="400px" onload='resizeIframeWithoutScrolling(this);'></iframe>
And resize methods are :
<script type="text/javascript">
function resizeIframeWithoutScrolling() {
document.getElementById("paymentForm").style.height = (parseInt(document
.getElementById("paymentForm").contentWindow.document.body.scrollHeight) + 1)
+ "px";
}
function AdjustIframeHeight(i) { document.getElementById("paymentForm").style.height = parseInt(i) + "px"; }
Now on second page just add the following script:
<script type="text/javascript">
parent.resizeIframeWithoutScrolling(document.getElementById("secondPageId").scrollHeight);
This script will adjust the size automatically.
I'm using ajax in Rails 4 to load this form. Using select2-rails gem, it renders properly when the document loads:
After I click update, it loads the view partial:
but when I click on edit, the styling doesn't show up, and only the default bootstrap styling shows up:
How do I get this last image to show the select2 styling from the first image? I think it has to do with how select2 styling is loaded when the document is first loaded, but would appreciate a solution. Here is my stylesheet below:
$(document).ready(function(){
$("#e9").select2();
})
Allen:
Hello again by the way...
I had a similar problem in rails 4 and it had to do with turbolinks.
link: http://guides.rubyonrails.org/working_with_javascript_in_rails.html#how-turbolinks-works
In your JS file change your document ready to the function name below, then add the two commands just below the function, which are also below. This may be your issue as well because your page initially loads correctly, however when turbolinks is working, it tries to load only previously loaded files to quicken the load process and may skip your document ready function. Let me know if this helps... (Jake - DBC).
var select2Gem = function(){
$("#e9").select2();
};
$(document).ready(select2Gem);
$(document).on('page:load', select2Gem);
I am using PhantomJS to create PDFs from html.
It works fine, but I can't find out how to work with pagination; I want to create a page for each div in my document, but I can't find anything in the doc. about pagination.
If my document is short, it makes only one page, and if it is bigger, it creates one second empty page and my contents are in the first page which becomes very long.
Any idea ? (I am using phantomJS-node module for nodeJS)
PhantomJS takes care of webkit’s css implementation. To implement manual page breaks you can use these properties :
page-break-before : auto/always/avoid/...
page-break-inside : auto/always/avoid/...
page-break-after : auto/always/avoid/...
For example, a div can be :
<div style="page-break-before:always;"><!-- content --></div>
or
<div style="page-break-after:always;"> <!-- content --></div>
Controlling page breaks when printing in Webkit is sometimes not easy, in particular with long html tables.
Very late, but I had issues with "break-inside:avoid" using JsReport that were fixed by changing the element's display type to inline-block. More info here:
https://github.com/ariya/phantomjs/issues/10638
You should see this issue with different tips.
Try to use display:inline-block in the element that you don't want to breaks because the page break. The reasoning behind is that webkit already tries to preserve images from breaking. And images are inline-blocks.
Pagination works fine with :
var page = webPage.create();
page.paperSize = {
format: 'A4',
orientation: 'portrait',
margin: '1cm'
}
Check documentation here http://phantomjs.org/api/webpage/property/paper-size.html
I'm using DD_belatedPNG to fix transparent PNGs in IE6; at a certain point I noticed that all fixed PNGs started disappearing a second after the document loaded. Something along these lines: page loads, 1 second passes, the transparency becomes viewable and the PNGs almost immediately disappear. Any clue on what the cause is and how to fix? Thanks!
UPDATE: the elements are still in place, so if one of the PNGs was a link, it is still clickable.
<script src="/scripts/plugins/DD_belatedPNG_0.0.7a-min.js"></script>
<script>
PNG_selectors = ".bbb, #logo, #home_title, .home-image, ..........";
alert("PNGs are going to disappear now");
DD_belatedPNG.fix(PNG_selectors);
</script>
As long as the alert is in place they are there, once OK is clicked, they are gone.
For those who are interested, this was being caused by as script loading stuff from fonts.com... I set it to defer, and it fixed the issue. Sweet!
Can you try calling DD_belatedPNG.fix() only when the page has finished loading, then see if the problem goes away? Attach an event handler to window.onload like so:
<script>
window.onload = function() {
var PNG_selectors = ".bbb, #logo, #home_title, .home-image, ..........";
alert("PNGs are going to disappear now");
DD_belatedPNG.fix(PNG_selectors);
};
</script>