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).
Related
I am working on styling a Tweet button by modifying the CSS class using font-awesome without success. here is the HTML code taken from Twitter:
Tweet<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>.
The issue originates from the widgets.js, whenever it loads, whatever I do it will change the style to the classic one, and in case removing or bypassing "twitter-share-button" class, the button won't work anymore.
any suggestion on how to use a specific style on tweet button?
Tweet.
to be honest, I did find a solution, although not the way I liked...
I did some modifications to the code to become as follows:
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
txt = "websitename"; $ttr = urlencode("$titleforarticle") . "\n"; $lk = urlencode("$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]") . "\n";
you may use JS instead of PHP.
better solutions are always welcome!
I have noticed that sometimes relative links from i.e urls in stylesheets are not working if the path in the address bar is pointing to the nsf instead of the xsp
so if I have the following inline style in a panel
background-image:url('footer-bg.png')
and I access my site using acme.com/mypage.nsf (with a launch propery set to start.xsp)
the background is not loading
but if I use the fullpath to the xsp the background is working fine e.g acme.com/mypage.nsf/start.xsp
How can I solve this issue so that my inline stylesheet background always work
The trick is to always add a trailing slash if you autolaunch an XPage in the database properties.
var h=window.location.href;
if(h.indexOf(".xsp")==-1){
if(h.substring(h.length,h.length-1)!="/"){
window.location.href+="/"
}}
I have written a blog post about it here
http://www.xpagedeveloper.com/2013/quicktip-get-right-path-when-autolaunching-an-xpage
or use this jQuery code that Thomas added
$(function(){
var h=window.location.href;
if(h.indexOf(".xsp")==-1){
if(h.substring(h.length,h.length-1,1)!="/"){
window.location.href+="/"
}}
})
I have a snippet for that that resides in my layout CC that I use on every page: http://snippets.notesx.net/Privat/osnippets.nsf/snippet.xsp?documentId=13EBFA7FDDC4354EC1257C120005018E
In the beforePageLoad you put the following code:
var url = facesContext.getExternalContext().getRequest().getRequestURI();
if(url.indexOf(".xsp")==-1){
if(url.endsWith("/")){
url = url.substr(0, url.length-1)
}
context.redirectToPage(url+view.getPageName())
}
I am building an app for the first time using Meteor. Due to an accessibility issue, we would like to offer two different Bootswatch themes to the users. I found a very useful explanation of how to switch Bootswatch themes here:
How to dynamically change themes after clicking a drop down menu of themes
(which references a handy fiddle in the accepted answer: http://jsfiddle.net/82AsF/)
I have tried placing the provided javascript inside myapp.html in the <head> tag. I also tried placing it inside the myapp.js file. (Then I tried placing in many assorted places just to see what would happen ;-) )
Nothing I have tried is working and it seems that it is the Meteor framework that is, understandably, "getting in the way". Is there an approach that will work for switching Bootswatch themes in a Meteor app?
Dynamically switching bootswatch themes is easily done as demonstrated in the originally referenced question: How to dynamically change themes after clicking a drop down menu of themes
Meteor (plus iron-router in my case) complicates this a little through the event maps and the simple fact that the dynamic change is occurring in the <head>.
Another answered question explains how to handle an event in jQuery directly (bypassing Meteor event maps): How to handle custom jQuery events in Meteor?
The code snippet below shows how I put the two ideas together. It's all working as expected.
var themes = {
"default": "bootstrap311/css/bootstrap.default.min.css",
"readable" : "bootstrap311/css/bootstrap.readable.min.css",
"slate" : "bootstrap311/css/bootstrap.slate.min.css"
}
$(function(){
var themesheet = $('<link href="'+themes['default']+'" rel="stylesheet" />');
themesheet.appendTo('head');
$('body').on('click', '.theme-link', function (e) {
var themeurl = themes[$(this).attr('data-theme')];
themesheet.attr('href',themeurl);
});
});
I added the JQuery list package to meteor and it recognizes it. But when I write JQuery code inline in <script></script> tags in the apps main html file it does not recognize it ( but I don't get an error). When I write JQuery code in my meteor app .js file I get an error. So I am confused as to how one is suppose to write with javascript or added library packages (like JQuery) once they are added. Thank you.
You need to put general javascript in a container to include it in a specific Meteor template.
For general onLoad scripts that you might be used to, you can encapsulate that code inside a function once the template is rendered
Example:
Template.*templatename*.rendered = function()
{
//do this only on template load
if(!this._rendered) {this._rendered = true;console.log('Template onLoad');}
//everything outside if is done every time the template is re-drawn (meteor sends an update)
}
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.