this is a small issue that I don't know how to exactly ask, but basically what's happening is I uploaded a custom opentype font, but loading it on the site will leave an empty gap for a couple seconds before loading the actual text. I've seen a couple sites that attacked these issues by loading a local font before changing into the custom font, but I lost track of these (rare-ish) sites to find out how they do it.
How would I fix this issue? Will I have to use some form of javascript to accomplish this task?
Thanks in advance! All answers appreciated!
it`s good question :)
Read this http://paulirish.com/2009/fighting-the-font-face-fout/
And add into or file-script
(if you addded #font-face in your css...):
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
//load fonts
(function(){
// if firefox 3.5+, hide content till load (or 3 seconds) to prevent FOUT
var d = document, e = d.documentElement, s = d.createElement('style');
if (e.style.MozTransform === ''){ // gecko 1.9.1 inference
s.textContent = 'body{visibility:hidden}';
var r = document.getElementsByTagName('script')[0];
r.parentNode.insertBefore(s, r);
function f(){ s.parentNode && s.parentNode.removeChild(s); }
addEventListener('load',f,false);
setTimeout(f,3000);
}
})();
});
</script>
i prevent fout creating a css file only for the font-face rules and use the link tag in the header of the page just before linking my master css file
Related
I cannot seem to get owl carousel to work in drupal 7. I thought it might be a conflict with Chaos tools but now I'm not sure. I had zero issues with it functioning as expected in Drupal 8 but my client needs it in Drupal 7.
I've tried it as a Block and as a Page. Currently, it stacks the content vertically instead of 3 inline as I hoped.
Here is the working Drupal 8 link to show what I'd like to achieve:
https://bryanbowers.me/cms/slideshow
Here is the Drupal 7 version not working:
https://bryanbowers.me/seven/?q=node/5
How can I get these inline?
forgot to mention that in the parent div it appends a class="owl-carousel-page_12"
in dev tools if I remove -page_12, the carousel renders inline.
I can't seem to find how to prevent this class from being added. I also tried to write css for class="owl-carousel-page_12" to match css for "owl-carousel" without success.
<script src="https://bryanbowers.me/seven/sites/all/modules/jquery_update/replace/jquery/1.10/jquery.min.js?v=1.10.2"></script>
<script src="https://bryanbowers.me/seven/misc/jquery-extend-3.4.0.js?v=1.10.2"></script>
<script src="https://bryanbowers.me/seven/misc/jquery.once.js?v=1.2"></script>
<script src="https://bryanbowers.me/seven/misc/drupal.js?pvwisq"></script>
<script src="https://bryanbowers.me/seven/sites/all/modules/jquery_update/replace/ui/ui/minified/jquery.ui.core.min.js?v=1.10.2"></script>
<script src="https://bryanbowers.me/seven/sites/all/modules/jquery_update/replace/misc/1.9/jquery.ba-bbq.min.js?v=1.2.1"></script>
<script src="https://bryanbowers.me/seven/sites/all/modules/jquery_update/replace/misc/1.9/overlay-parent.js?v=1.0"></script>
<script src="https://bryanbowers.me/seven/modules/contextual/contextual.js?v=1.0"></script>
<script src="https://bryanbowers.me/seven/sites/all/modules/jquery_update/replace/ui/external/jquery.cookie.js?v=67fb34f6a866c40d0570"></script>
I've tried a number of jquery and js scripts in footer to replace class but I'm getting things incorrect or it won't override. Wish I could prevent it from writing the custom class altogether.
/// tried and no
$('.owl-carousel-block2').removeClass('owl-carousel-block2').addClass('owl-carousel');
/// tried and no
$(document).ready(function(){
$('.owl-carousel-block2').removeClass('owl-carousel-block2').addClass('owl-carousel');
});
//// tried and no
$(div.owl-carousel-block2).attr('owl-carousel-block2', 'owl-carousel');
/// tried and no
(function ($) {
$.fn.replaceClass = function (owl-carousel-block2, owl-carousel) {
return this.removeClass(owl-carousel-block2).addClass(owl-carousel);
};
}(jQuery));
//// tried and no
var el = $('.owl-carousel-block2');
el.addClass('owl-carousel');
el.removeClass('owl-carousel-block2');
$('div.owl-carousel-block2').addClass('owl-carousel').removeClass('owl-carousel-block2');
//// tried and no
jQuery.fn.replaceClass = function(sSearch, sReplace) {
return this.each(function() {
var s = (' ' + this.owl-carousel-block2 + ' ').replace(
' ' + sSearch.trim() + ' ',
' ' + sReplace.trim() + ' '
);
this.owl-carousel = s.substr(1, s.length - 2);
});
};
Issue 1. (the JS)
You have linked to a page that loads via HTTPS, but you are loading your google fonts over HTTP resulting in an error which breaks the JS.
specifically "http://fonts.googleapis.com/css?family=Roboto:400,300,700,500"
Fix:
Either load your page via HTTP or load your fonts via HTTPS
Doing the above will get the owl carousel JS working (but it still wont look right).
Issue 2. (the CSS)
The owl carousel CSS is loaded but not applied.
As you said, this seems to be because the owl carousel block does not have the "owl-carousel" class.
You can check this by simply adding that class to the block in dev tools.
There seems to be an issue about this HERE which mentions a conflict with ctools page manager, though it seems to relate to version 7.x-2.0-alpha0, but you don't seem to be using that module (judging from the module README.txt which your site serves). Are you using ctools page manager?
If you are using version 7.x-1.6 I can only speculate why the "owl-carousel" class is not being output for you but seems to work for so many other people.
A work around would be to either run the JS you have already tried to alter the class (but do it with issue 1 fixed), make use us a preprocess function to add the class, or maybe even just adding the class via the views interface (as it seems to be output from a view).
I am very new and green so please forgive the basic question.
When I create a site using Bootstrap I believe that I include the link to the Bootstrap CDN file in the head section of each page and I also include a link to my own CSS style sheet. Is that correct? Or can I put the cdn file links in my style sheet and then just put a link to the style sheet in the HTML head section of every page?
Same question re JavaScript. Do I link to the cdn file on every page of my site?
It is always good to include the js and css cdn links in every page or u can download these and add it to your project and include as you include your stylesheet.
Don't add cdn link to your css.
It depends on what you want. Are you going for page-speed?
If you want to optimize your website for page-speed I recommend combining both the CSS and JavaScript files in to single files (there are tools to automate this process). Also if you really want to optimize your website for page-speed you can apply both the combined CSS and JavaScript dynamically, by putting the following snippet just before the closing body tag so that the HTML can be rendered before executing the Javascript:
<script type="text/javascript">
function (sources) {
for (var i = 0; i < sources.length; i++) {
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = sources[i];
head.appendChild(script);
}
})([
'//domain.com/combined.js'
]);
</script>
Note that the JavaScript files are not loaded in synchronized order, but using a single combined script it doesn't matter.
For the sheets I use the following algorithm:
Determine if it is the first page view of the session:
If so, inline the combined CSS in the head tag:
<html>
<head>
<style><? echo file_get_contens('./path_to_combined_style.css'); ?></style>
</head>
</html>
If not, just include the CSS link in the head tag:
<html>
<head>
<link rel="stylesheet" href="//domain.com/path-to-combined-style.css" type="text/css" />
</head>
</html>
Then you can force to cache to CSS style on the first load by executing a XMLHttpRequest, for simplicity I use jQuery here:
$(document).ready(function(){
var href = "//domain.com/path-to-combined-style.css";
$link = $("link[href='" + href + "']");
if ($link.size() === 0) {
$.get(href);
}
});
You can put this in the combined JavaScript.
Note that you won't be able to use the speed advantage of the CDN. To solve this you could publish your combined resources to your own CDN. You will loose the possibility that the user has already cached bootstrap though.
Ofcourse this whole process requires some knowledge and experience, so you might want to consider using a tool such as CloudFlare, which does a pretty good job optimizing your website.
Grateful for your help.
I'm experience a conflict (for lack of a better word) between nivo Slider and Camera slide show. (nivo Slider is native to the wordpress theme we use--and is our main navigational feature on the sites landing page. Camera is of course a plugin and gets inserted via shortcode [camera slideshow="my-slideshow"])
This thread seems to have a promising answer. But I'm novice enough to be at a loss as to where to place this script--or if the script is the right solution.
The script:
<script type="text/javascript">
var j = jQuery.noConflict();
j(window).load(function() {
j('#slider').nivoSlider({
Again, grateful for your help.
Check the js console in browser for errors or add a link to your site.
Possible reason: doubled call for jQuery. You may check in page source for (or similar)
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
I need to use the extra powers of the swfobject api. This object is a new way of embedding Youtube videos into web sites.
Pasting code that I found from Google's tutorial directly into the WordPress editor was in-effective. WordPress would not treat this as active code.
So, I created a new template file and inserted my code into that file. This worked relatively well. The code went live and I got the extra feature that I was looking for, which was that I am able to have the visuals of the video autoplay, and to have the sound muted by default.
However, this has messed up the layout and flow of my menus which where just above the video.
Can anyone tell me where to proper place to put this code is, or is this question too specific. If it will help you can see the messed up page at:
http://bestoftimesusa.com/home-mute-test/
and how it is supposed to look at:
http://bestoftimesusa.com
The fully functional code that got embedded is this:
<script type="text/javascript" src="/wp-includes/js/swfobject/swfobject.js"></script>
<div id="ytapiplayer">
You need Flash player 8+ and JavaScript enabled to view this video.
</div>
<script type="text/javascript">
var ytplayer = false;
var params = { allowScriptAccess: "always" };
var atts = { id: "myytplayer" };
swfobject.embedSWF("http://www.youtube.com/v/IBjstQceGBk?enablejsapi=1&playerapiid=ytplayer&version=3&autoplay=1",
"ytapiplayer", "370", "238", "8", null, null, params, atts);
function onYouTubePlayerReady(playerId) {
ytplayer = document.getElementById("myytplayer");
ytplayer.mute();
}
</script>
</div>
Unless you want the same youtube video to appear on all pages (of a certain type), I don't think putting that entire block in your template files makes sense. The only part that really makes sense for a template file is the first line. The lines after that are video-specific.
By default, WordPress filters out javascript from posts. You can disable that filtering with a plugin which would allow you to include javascript in your posts.
Using that plugin, you can set javascript filters on a global or per-post basis. It seems like a per-post basis would work for you so I'd go with that, just enabling it on the page I wanted.
Two last things:
You could put the first line in one of your template files to eliminate having to put that in every post
You have one opening <div> tag but two closing </div> tags, that could be expected, but I'd double check.
Using javascript with jQuery, I am adding an iframe with a youtube url to display a video on a website however the embed code that gets loaded in the iframe from youtube doesnt have wmode="Opaque", therefore the modal boxes on the page are shown beneath the youtube video.
Any ideas how to solve the issue?
Try adding ?wmode=opaque to the URL or &wmode=opaque if there already is a parameter.
If it doesn't work try this instead, &wmode=transparent which will work in IE browser as well.
Try adding ?wmode=transparent to the end of the URL. Worked for me.
If you are using the new asynchronous API, you will need to add the parameter like so:
<!-- YOUTUBE -->
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "http://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
var initialVideo = 'ApkM4t9L5jE'; // YOUR YOUTUBE VIDEO ID
function onYouTubePlayerAPIReady() {
console.log("onYouTubePlayerAPIReady" + initialVideo);
player = new YT.Player('player', {
height: '381',
width: '681',
wmode: 'transparent', // SECRET SAUCE HERE
videoId: initialVideo,
playerVars: { 'autoplay': 1, 'rel': 0, 'wmode':'transparent' },
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
This is based on the google documentation and example here:
http://code.google.com/apis/youtube/iframe_api_reference.html
Adding ?wmode=opaque to the URL seems to solve this problem for me, although I have not tested it in IE yet.
For those of you having troubles with the previously proposed solution, note that an inital ampersand will only work if you are already supplying other arguments to the URL. The first argument must have an initial question mark: http://www.example.com?first=foo&second=bar
Add &wmode=transparent to the url and you're done, tested.
I use that technique in my own wordpress plugin YouTube shortcode
Check its source code if you encounter any issue.
Just a tip!--make sure you up the z-index on the element you want to be over the embedded video. I added the wmode querystring, and it still didn't work...until I upped the z-index of the other element. :)
&wmode=opaque didn't work for me (chrome 10) but &wmode=transparent cleared the issue right up.
I know this is an old question, but it still comes up in the top searches for this issue so I'm adding a new answer to help those looking for one for IE:
Adding &wmode=opaque to the end of the URL does NOT work in IE 10...
However, adding ?wmode=opaque does the trick!
Found this solution here: http://alamoxie.com/blog/web-design/stop-iframes-covering-site-elements
recently I saw that sometimes the flash player doesn't recognize &wmode=opaque, istead you should pass &WMode=opaque too (notice the uppercase).