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

Why elemen didn't create when it is drugguble EXTJS

I! buttons from my toolbar have to create panel.
And I have some problems, and questions.
1) when created panel is set druggable: true, panel didn't rents after click. And Chrome console throwns it: o such config "translationMethod" for class Ext.util.translatable.CssPosition. How to make it works (draggable)?
2)which the best way to create panel on the Main? like I do or another method? I use extjs 6.2 modern.
3)when centered is false, panel created anomalously (without header and title). how to fix it?
Toolbar is one from items of Main. 'mycuts' button is one from toolbar's items.
I hope somebody can help me
There is code:
{
text:'mycuts',
cls: 'grbuttons',
ui:'action',
height: 35,
width: 205,
margin:2,
handler: function() {
Ext.create('Ext.panel.Panel',{
height: 300,
id:'mycutareagrid',
header:{
title:'cuts',
draggable: true,
},
//draggable:true,
header: {
cls : 'hdr2'
},
width: 850,
renderTo:'bighBox',
centered:true,
margin: '98 0 0 215',
autoDestroy: true,
items:[{
xtype:'contlistII'
}],
collapsible:true,
clossable: true,
scope: this,
tools: [{
type:'help'
},{
type:'search'
},{
type:'close',
handler: function(e) {
e.hide()
}
}],
listeners:{
afterrender: function(e){
var d = e.getHeaderContainer();
e.setHeight(10);
}
}
})
}
}

Using document.write to control javascript twitter widget

I'm trying switch the twitter javascript widgets out depending on the time. So in the day, the twitter widget will be colored differently than at night.
I used the code that twitter gave me and came up with this code. But I get a syntax error in DW on the "document.write" lines. Here is the complete code that I put together.
Here is the code that twitter gave me...
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'search',
search: '#BigNotch',
interval: 6000,
title: 'Follow Me On Twitter',
subject: 'BigNotch',
width: 180,
height: 300,
theme: {
shell: {
background: '#17d1ff',
color: '#ff8fda'
},
tweets: {
background: '#ededed',
color: '#383838',
links: '#ff8aed'
}
},
features: {
scrollbar: false,
loop: true,
live: true,
hashtags: true,
timestamp: true,
avatars: true,
toptweets: true,
behavior: 'default'
}
}).render().start();
</script>
And here is the code i've come up w/ so far to achieve this.
<!-- Twitter Widget -->
<div id="isolate">
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
</div>
<br><br /><br />
<script type="text/JavaScript">
<!--
function changTwitter() {
var currentTime = new Date().getHours();
if (7 <= currentTime&&currentTime < 17) {
document.write('<' + 'script>
new TWTR.Widget({
version: 2,
type: 'search',
search: '#BigNotch',
interval: 6000,
title: 'Follow Me On Twitter',
subject: 'BigNotch',
width: 180,
height: 300,
theme: {
shell: {
background: '#242124',
color: '#f0af4d'
},
tweets: {
background: '#333333',
color: '#c2c2c2',
links: '#f7bc63'
}
},
features: {
scrollbar: false,
loop: true,
live: true,
hashtags: true,
timestamp: true,
avatars: true,
toptweets: true,
behavior: 'default'
}
}).render().start();
</' + 'script> ');
}
else {
document.write('<' + 'script>
new TWTR.Widget({
version: 2,
type: 'search',
search: '#BigNotch',
interval: 6000,
title: 'Follow Me On Twitter',
subject: 'BigNotch',
width: 180,
height: 300,
theme: {
shell: {
background: '#17d1ff',
color: '#ff8fda'
},
tweets: {
background: '#ededed',
color: '#383838',
links: '#ff8aed'
}
},
features: {
scrollbar: false,
loop: true,
live: true,
hashtags: true,
timestamp: true,
avatars: true,
toptweets: true,
behavior: 'default'
}
}).render().start();
</' + 'script> ');
}
}
changeTwitter();
-->
</script>
I get the error on line 88. "document.write('<'+'script>"

document.write takes an string arg, but in your code, the string is not terminated correctly, use document.write('<'+'script>'+"all the other code" +'');
JAVASCRIPT does not support multi-line string like you post.

Stream Twitter by search hashtag and then official twitter stream

How do I go about calling the twitter API in a way similar to http://socialmedia.duke.edu/#stayconnected
We are looking to do the same type of thing. I cannot figure out what is calling to twitter though in the code.
I can supply any needed details that you would need. I am using Wordpress but just using HTML in a page at this moment.
So how do I see the hashtag searches for said twitter account, and then the actual tweets by said account

bluedevilsYou just need to use Twitter's free javascript API widget. It's very easy to use the wizard:
http://twitter.com/goodies/widgets
Here's something similar to Duke's:
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 8,
interval: 6000,
width: 700,
height: 300,
theme: {
shell: {
background: '#ffffff',
color: '#b364b3'
},
tweets: {
background: '#ffffff',
color: '#ffffff',
links: '#338012'
}
},
features: {
scrollbar: false,
loop: false,
live: true,
hashtags: true,
timestamp: true,
avatars: true,
behavior: 'default'
}
}).render().setUser('bluedevils').start();
</script>

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();