so I'm aware there are already similar questions on here, the reason I ask this question is because I cannot get any of the other solutions to work.
So what I've do is I have an iframe in my html like so:
<iframe name="frame1" id="frame1" scrolling="auto" frameborder="no" onload="resizeIframe(this)" style="width:100%; height:1000px;" src="https://www.treeofgnosis.com/community/discussion/151/faq"></iframe>
and then I have added the code to add custom CSS to the iframe like so directly below in the html:
<script type="text/javascript">
jQuery(function($) {
var $head = $('#frame1 head');
var url = "/wp-content/themes/layerswp/iframe.css";
$head.append('<link rel="stylesheet" type="text/css" href="' + url + '" />');
});
alert("Alert\$head function us running");
</script>
From what I can tell, the code is all running (the iframe shows and so does the alert) - but the custom is not appending into the iframe's content's head when I check the DOM.
When I manually insert the into the head after the page has loaded, the css does apply, so the error isn't there.
Here is a link to the page I'm working on, the iframe is right at the bottom of the screen: https://www.treeofgnosis.com/faq/
Any help would be appreciated, I have no idea why things aren't working. I have also tried some other code variations - but the situation remains pretty much the same. So really, I am really looking for WHY things aren't working.
(PS in the console log, there are no errors related to this)
Related
I'm working on some websites that are using the WPBakery video background on rows. These should autoplay, and did until recently. Sometimes they do, and sometimes they don't. Typically it happens where they don't work more when I'm looking at them via Incognito mode on Chrome. I'm aware of the changes a couple years ago for autoplaying needing to include muted, and I've tried to hack this to add muted to the allow, but because it comes in via an iframe, it adds it too late for the autoplay to start.
Example Sites:
https://www.infrastructurereportcard.org/
https://brgcommunications.com/
https://colorworksinc.com/
I haven't seen other questions on this, but the fact that I'm seeing it on three totally different sites means that it is likely a larger issue.
Below is a bit of code that I tried, but wasn't successful in getting it to actually autoplay. It gave me an error of .play() is not a function.
<script type="text/javascript">
jQuery(function($) {
$(window).load(function(){
$('#widget2').attr('allow', 'muted accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture');
$('#widget2').play();
});
});
</script>
I think there's two parts of the WPBakery plugin's video background not working properly.
Video's with a Youtube-embed link are not working properly.
Video's stop autoplaying when using the same URL.
The first one is fixable by only using the URL's without embed. Something like: https://www.youtube.com/watch?v=XXXXXXXXX
The second one is fixable by creating a unique URL every time you load the page. This can be done by the following code:
function startVideo() {
const date = $('.video-wrapper').data('date');
let src = $('.video-wrapper iframe').attr('src');
src = src + '&autoplay=1&randomVar=' + date;
$('.video-wrapper iframe').attr('src', src);
}
This will take the existing url of the iframe, add the current date which is available on the wrapper and regenerate the video's url. This way the URL is always unique and will autoplay. You can also just generate a date manually and add that as a random param on the URL.
Hope this is of any help!
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).
The question may seem confusing so let me clarify.
Github lets you see the source code of a files in a repo. I want to include them in iframes but am unsure how and suspect someone has already done this before.
In my case I want to add https://github.com/ileathan/hubot-mubot/blob/master/src/mubot.coffee to an iframe so that from my website people can see the code as it evolves.
A GitHub page itself wouldn't be put directly in a iframe (because of the X-Frame-Options: deny HTTP header).
That leaves you with the GitHub API for contents
GET /repos/:owner/:repo/contents/:path
Like: https://api.github.com/repos/ileathan/hubot-mubot/contents/src/mubot.coffee.
You should be able to put that content in a iframe (as in this answer)
Here's a concrete example of how this can be done via the GitHub API. We request the encoded content and insert it directly into the iframe.
<iframe id="github-iframe" src=""></iframe>
<script>
fetch('https://api.github.com/repos/ileathan/hubot-mubot/contents/src/mubot.coffee')
.then(function(response) {
return response.json();
}).then(function(data) {
var iframe = document.getElementById('github-iframe');
iframe.src = 'data:text/html;base64,' + encodeURIComponent(data['content']);
});
</script>
Here's the code in action https://jsfiddle.net/j8brpdsg/2/
I just found a way to do this using Gist-it
Usage
Take a github file url and prefix it with http://gist-it.appspot.com and embed the result within a tag:
<script src="http://gist-it.appspot.com/http://github.com/$file"></script>
Here's a test I just made. Works! :)
You'll need to hack the iframe and css a bit to get it to work without tags in your document, but it's possible:
https://www.arctype.co/blog/embedding-github-gists-via-iframe
<iframe frameborder=0 style="min-width: 200px; width: 60%; height: 460px;" scrolling="no" seamless="seamless" srcdoc='<html><body><style type="text/css">.gist .gist-data { height: 400px; }</style><script src="https://gist.github.com/sundbry/55bb902b66a39c0ff83629d9a8015ca4.js"></script></body></html>'></iframe>
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.
I would like to setup mobile redirection using the htaccess in my Wordpress website.
I have a mobile site (mobile.domain.com) and regular site (domain.com) The permalinks will be the same for each site e.g. domain.com/page-one/ and mobile.domain.com/page-one/ so it seems like it should be fairly easy to redirect to the same page in the mobile site.
I've tried looking online and cant find what I need, can anyone help with this? I would be happy just using a plugin if one already exists.
I know this is an old post, but after figuring this out I think the solution I used is worth mentioning here.
Everyone knows that a simple Javascript redirect will work great, but what if you want the user to end up on a page that has the exact same path name? If you have this redirect, then "example.com/contact" will be redirected to "mobile.example.com" - notice how this is not the mobile version of the contact page.
The solution is to have a Javascript snippet in the main header that will tell each page to keep its same pathname when redirected, such as "/contact". The one caveat is that each mobile page must be named the same as the desktop version - /whatever and /whatever.
<script type="text/javascript">
<!--
if (screen.width <= 800) {
document.location = "https://mobile.example.com" + window.location.pathname;
}
</script>
you could do the following in javascript:
<script language="JavaScript" type="text/javascript">
if ((screen.width>=1024) && (screen.height>=768))
{
window.location.replace('example.html');
}
</script>
This would need to go in your header.php
Check this website http://detectmobilebrowsers.com/ for php or javascript code. You can use PHP or Javascript, that you have to paste within header.php
Solution:
Download and install plugin : CSS & Javascript Toolbox
(make sure to always backup before downloading and installing
plugins)
Add this javascript to the page you want to redirect from.
<script type="text/javascript">
<!--
if (screen.width <= 600)
{
window.location="http://www.yourmobilesite.com";
}
//-->
</script>