Develop Reference

How to use owl carousel in Nuxt?

I want to make script work on every page without that these page need loaded;
I have owl caroussel script on my static folder, and i already put it in nuxt.config.js, here how i put it:
head: {
title: 'title',
htmlAttrs: {
lang: 'en'
},
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: '' },
{ name: 'format-detection', content: 'telephone=no' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
],
script: [{
src: process.env.BASE_URL_ROOT + "/jquery-3.3.1.min.js",
type: "text/javascript"
},
{
src: process.env.BASE_URL_ROOT + "/owl.carousel.min.js",
type: "text/javascript"
},
{
src: process.env.BASE_URL_ROOT + "/main-script.js",
type: "text/javascript"
}
]
},
And there is the script on my main-script.js:
$(document).ready(function() {
$('.owl-menu').owlCarousel({
loop: true,
responsiveClass: true,
center: true,
items: 6,
nav: true,
dots: false,
autoWidth: true,
responsive: {
600: {
items: 6,
nav: true,
autoWidth: true,
center: true,
loop: true
},
}
})
$('.owl-video').owlCarousel({
loop: true,
center: true,
items: 3,
margin: 10,
nav: true,
dots: true,
responsive: {
600: {
items: 3,
margin: 12,
},
},
navContainer: "#nav-conte",
navText: [
'<i class="far fa-arrow-alt-circle-left" aria-hidden="true" style="color: rgba(0,0,0,0.67843);"></i>',
'<i class="far fa-arrow-alt-circle-right" aria-hidden="true" style="color: rgba(0,0,0,0.67843);"></i>'
]
})
})
The caroussel work well on the page if the page is loaded, but if it come from nuxt navigation, the caroussel script not work anymore.
Solution that i used is MutationObserver that look at the change on the DOM; on my main-script.js:
MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
var observer = new MutationObserver(function(mutations, observer) {
// my owl caroussel script
});
observer.observe(document, {
subtree: true,
attributes: true
});

Here, you're using some jQuery code that relies on selecting specific parts of the DOM. Meanwhile, nowadays front-end frameworks do handle the DOM in a different manner and relying more on the state or refs than actual querySelector.
Hence, I do not recommend even trying to wire it. You should probably try and use a Vue package to make the same kind of feature.
It will be probably less heavy (bundle-size), more easy to integrate with your Nuxt app and you will not rely on buggy and hacky behavior.
Check this list of Carousels: https://github.com/vuejs/awesome-vue#carousel
I do use vue-awesome-swiper, more on a heavier side but really complete.
Also, I don't know if you really need to have jQuery in your Nuxt app on top of Vue, but if you want a clean and simple way of installing it into your Nuxt app, you follow my other answer here: https://stackoverflow.com/a/68414170/8816585
EDIT, even owl carousel deprecates itself as you can see

MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
var observer = new MutationObserver(function(mutations, observer) {
// your owl caroussel script
$('.owl-menu').owlCarousel({
loop: true,
responsiveClass: true,
center: true,
items: 6,
nav: true,
dots: false,
autoWidth: true,
responsive: {
600: {
items: 6,
nav: true,
autoWidth: true,
center: true,
loop: true
},
}
})
$('.owl-video').owlCarousel({
loop: true,
center: true,
items: 3,
margin: 10,
nav: true,
dots: true,
responsive: {
600: {
items: 3,
margin: 12,
},
},
navContainer: "#nav-conte",
navText: [
'<i class="far fa-arrow-alt-circle-left" aria-hidden="true" style="color: rgba(0,0,0,0.67843);"></i>',
'<i class="far fa-arrow-alt-circle-right" aria-hidden="true" style="color: rgba(0,0,0,0.67843);"></i>'
]
})
});
observer.observe(document, {
subtree: true,
attributes: true
});
This worked for me. You can try. enter link description here

How do i call external javascript function/lines in html?

In the javascript file i have this code:
$(function() {
$('#carousel span').append('<img src="img/gui/carousel_glare.png" class="glare" />');
$('#thumbs a').append('<img src="img/gui/carousel_glare_small.png" class="glare" />');
$('#carousel').carouFredSel({
responsive: true,
circular: false,
auto: true,
infinite: true,
items: {
visible: 1,
width: 200,
height: '56%'
},
scroll: {
fx: 'directscroll',
pauseOnHover: true,
duration: 500
}
});
$('#thumbs').carouFredSel({
responsive: true,
circular: false,
infinite: false,
auto: false,
prev: '#prev',
next: '#next',
items: {
visible: {
min: 2,
max: 6
},
width: 150,
height: '66%'
}
});
$('#thumbs a').click(function() {
$('#carousel').trigger('slideTo', '#' + this.href.split('#').pop() );
$('#thumbs a').removeClass('selected');
$(this).addClass('selected');
return false;
});
});
I want that when the pauseOnHover execute that something will happen in the html file.
In the html file i included the javascript file already:
<script src="java_script.js"></script>
Also added some style code for the test:
<style>.container {
background: rgb(170, 187, 97);
background: rgba(170, 187, 97, 0.5);
}</style>
And when the pauseOnHover execute happen in the javascript file i want to display on screen this two lines in the html file:
<div class="container">Lorem ipsum dolor</div>
<div class="container">Lorem ipsum_for_testing dolor</div>

Twitter Tweet Widget not working anymore

Kindly take a look at the following code. Is there something wrong with it my twitter widget is not working anymore but its was few days earlier from the very same code/ Kindly help thanks,
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 4,
interval: 6000,
width: 216,
height: 240,
theme: {
shell: {
background: '#ffffff',
color: '#292b2c'
},
tweets: {
background: '#f6f6f6',
color: '#292b2c',
links: '#1388d2'
}
},
features: {
scrollbar: false,
loop: false,
live: true,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'all'
}
}).render().setUser('ganasal').start();
</script>

As stated in the widget's code:
"The Twitter API v1.0 is deprecated, and this widget has ceased functioning. You can replace it with a new, upgraded widget..."

The chuck norris twitter widget is losing style on IE

Getting a strange problem when loading the twitter widget asynchronously on IE. It loads just fine, but for some reason doesn't apply any style (color, background are blank/default) only on IE (7,8,9).
Loading the script the standard way works also in IE.
The code looks like this and works on all browsers (including IE, but without the style)
<div id="twitter_div"></div>
<script>
jQuery(window).load(function () {
jQuery('<link rel="stylesheet" type="text/css" href="http://widgets.twimg.com/j/2/widget.css" >').appendTo("head");
jQuery.getScript('http://widgets.twimg.com/j/2/widget.js', function () {
var twitter = new TWTR.Widget({
id: 'twitter_div',
version: 2,
type: 'profile',
rpp: 4,
interval: 6000,
width: 'auto',
height: 300,
theme: {
shell: {
background: '#add459',
color: '#382638'
},
tweets: {
background: '#ffffff',
color: '#141114',
links: '#4aed05'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'all'
}
}).render().setUser('chucknorris').start();
})
})
</script>
You can see this live on this link.
It loses the style on IE even when set to chucknorris.

What you think to put the css in you own css to avoid problems
<style type="text/css">
#twitter_div .twtr-doc, #twitter_div .twtr-hd a, #twitter_div h3, #twitter_div h4 {
background-color: #ADD459 !important;
color: #382638 !important;
}
#twitter_div .twtr-bd, #twitter_div .twtr-timeline i a, #twitter_div .twtr-bd p {
color: #141114 !important;
}
#twitter_div .twtr-avatar {
display: none;
}
#twitter_div .twtr-new-results, #twitter_div .twtr-results-inner, #twitter_div .twtr-timeline {
background: white !important;
}
#twitter_div .twtr-tweet a {
color: #4AED05 !important;
}
</style>
Also good is it if put it in your main.css file to get a better caching experince of your static stuff and is all in one place
<script>
jQuery(window).load(function () {
$("head").append("<link rel='stylesheet' type='text/css' href='http://widgets.twimg.com/j/2/widget.css' />");
jQuery.getScript('http://widgets.twimg.com/j/2/widget.js', function () {
var twitter = new TWTR.Widget({
id: 'twitter_div',
version: 2,
type: 'profile',
rpp: 4,
interval: 6000,
width: 'auto',
height: 300,
theme: {
shell: {
background: '#add459',
color: '#382638'
},
tweets: {
background: '#ffffff',
color: '#141114',
links: '#4aed05'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'all'
}
}).render().setUser('chucknorris').start();
})
})
</script>

as found here:
How to asynchronously load CSS using jQuery?
$("head").append("<link rel='stylesheet' type='text/css' href='http://widgets.twimg.com/j/2/widget.css' />");
to make the code complete:
<div id="twitter_div"></div>
<script>
jQuery(window).load(function () {
$("head").append("<link rel='stylesheet' type='text/css' href='http://widgets.twimg.com/j/2/widget.css' />");
jQuery.getScript('http://widgets.twimg.com/j/2/widget.js', function () {
var twitter = new TWTR.Widget({
id: 'twitter_div',
version: 2,
type: 'profile',
rpp: 4,
interval: 6000,
width: 'auto',
height: 300,
theme: {
shell: {
background: '#add459',
color: '#382638'
},
tweets: {
background: '#ffffff',
color: '#141114',
links: '#4aed05'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'all'
}
}).render().setUser('chucknorris').start();
})
})
</script>
edit somehow this is the only thing that seems to work in IE:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>test</title>
<link href="http://widgets.twimg.com/j/1/widget.css" type="text/css" rel="stylesheet">
<link href="http://widgets.twimg.com/j/2/widget.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
</head>
<body>
<div id="twitter_div"></div>
<script type="text/javascript">
$(document).ready(function () {
var twitter = new TWTR.Widget({
id: 'twitter_div',
version: 2,
type: 'profile',
rpp: 4,
interval: 6000,
width: 'auto',
height: 300,
theme: {
shell: {
background: '#add459',
color: '#382638'
},
tweets: {
background: '#ffffff',
color: '#141114',
links: '#4aed05'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'all'
}
}).render().setUser('chucknorris').start();
})
</script>
</body>
</html>

twitter's profile widget include in a separate javascript file

I'm just trying to put the custom twitter's profile widget on my page, but I like to put the code in a separate javascript's file.
so, I don't know how to do that.
I mean, I put this on head tag
<script type="text/javascript" src="http://widgets.twimg.com/j/2/widget.js"></script>
the create a div for the widget, an put the rest of the code in another javascript
new TWTR.Widget(json_twitter_options).render().setUser('username').start();
But, how to "put" the result in that widget... I'm totally lost, thanks in advance.

The solution for me was simply to add an "id" property to the options object of an element that you want the widget to render into. This way you can even load the script with require.js or after the page loads and still render the widget into the space you want.
I didn't find any documentation for this property by the way.
ex:
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 4,
interval: 6000,
width: 135,
height: 700,
theme: {
shell: {
background: '#e5e5e5',
color: '#363F49'
},
tweets: {
background: '#e5e5e5',
color: '#000000',
links: '#06C'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'all'
},
id: 'someDivId'
}).render().setUser('comster').start();

The js file doesn't have to be in the head just above the widget
this code works I have tested it:
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 4,
interval: 6000,
width: 135,
height: 700,
theme: {
shell: {
background: '#e5e5e5',
color: '#363F49'
},
tweets: {
background: '#e5e5e5',
color: '#000000',
links: '#06C'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'all'
}
}).render().setUser('USERNAME').start();
</script>

Ok, It seem my question was not understand.
I couldn't do what I want. But the way to simplify my problem, was creating a json object for setting up the widget.
I'm still want to find a way to not use script tag inside body tag
thanks a lot to viewvers!

Just put the entire code into a new javascript file (name it anything you like, like twitter.js), and link it in where you want it to display, like under
<div id="twittercode">[js file link goes here]</div>
This whole chunk should go into a new javascript file.
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 4,
interval: 6000,
width: 135,
height: 700,
theme: {
shell: {
background: '#e5e5e5',
color: '#363F49'
},
tweets: {
background: '#e5e5e5',
color: '#000000',
links: '#06C'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'all'
}
}).render().setUser('USERNAME').start();