I'm working on taking a html5up template that I really like and put it in rails. I have it all working except for one thing. In the js they have this
skel.init({
reset: 'full',
breakpoints: {
'global': { range: '*', href: 'css/style.css', containers: 1400, grid: { gutters: 40 }, viewport: { scalable: false } },
'wide': { range: '961-1880', href: 'css/style-wide.css', containers: 1200, grid: { gutters: 40 } },
'normal': { range: '961-1620', href: 'css/style-normal.css', containers: 960, grid: { gutters: 40 } },
'narrow': { range: '961-1320', href: 'css/style-narrow.css', containers: '100%', grid: { gutters: 20 } },
'narrower': { range: '-960', href: 'css/style-narrower.css', containers: '100%', grid: { gutters: 15 } },
'mobile': { range: '-736', href: 'css/style-mobile.css', grid: { collapse: true } }
},
Which loads a certain css file depending on what size screen you have. This works fine when its just being loaded using apache but in rails all css gets throw together into an application.css when its in assets/stylesheets which means i wont be able to do anything like this. Is there any way to keep these css files separate and load them dynamically from js like it is here?
Figured it out. i just put in into public and then just referenced it from ../stylesheets/mycss.css
Related
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
Any one have any knowledge of froala editor. I ma using it to edit webpage and generate it as a PDF. The HTML template contains a dynamic data, and when I generate a PDF the page break happen between the content, which looks quite bad. Does any one knows how to resolve it?
You could create a custom button and modify the html2pdf plugin inside the callback.
FroalaEditor.DefineIcon('customDownload', {
NAME: 'plus',
SVG_KEY: 'add'
});
FroalaEditor.RegisterCommand('customDownload', {
title: 'Custom Download PDF',
focus: true,
undo: true,
refreshAfterCallback: true,
callback: function() {
var element = this.el;
var opt = {
margin: 1,
filename: 'myfile.pdf',
image: {
type: 'jpeg',
quality: 0.98
},
html2canvas: {
scale: 2
},
jsPDF: {
unit: 'in',
format: 'A4',
orientation: 'portrait'
},
pagebreak: {
mode: 'avoid-all',
before: '#page2el'
}
};
html2pdf(element, opt);
}
});
new FroalaEditor('#selector', {
toolbarButtons: ['customDownload']
});
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);
}
}
})
}
}
As a newbie to caroufredsel, I am trying to override the default wrapper name in for the carousels using a dynamic count.
However, the carousel rendered only has the default caroufresel_wrapper. Whereas my javascript is trying to get caroufredsel_wrapper0, caroufredsel_wrapper1, caroufredsel_wrapper2 for 3 carousels on the same page. I find it amusing that it will not get overridden.
My code for carousel creation is here
$('.carousel-content').carouFredSel({
circular: false,
infinite: false,
auto: false,
align: 'left',
width: 940,
height: 323,
scroll: 1,
wrapper: { element:'div',
classname: 'caroufredsel_wrapper.concat(carousel_count)'},
items: 4,
onCreate: function() {
$('#xy.concat(carousel_count) > .caroufredsel_wrapper.concat(carousel_count)').css('float','left');
}
});
});
}
The documentation does not make it explicit, but the carouFredSel accepts two parameters: (options, configs). The wrapper makes it part of the configs parameter. Try this:
$('.carousel-content').carouFredSel({
circular: false,
infinite: false,
auto: false,
align: 'left',
width: 940,
height: 323,
scroll: 1,
items: 4,
onCreate: function() {
$('#xy.concat(carousel_count) > .caroufredsel_wrapper.concat(carousel_count)').css('float','left');
}},
{
wrapper: {
element:'div',
classname: 'caroufredsel_wrapper.concat(carousel_count)'
});
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();