I want to display tweets like card-columns in my page.
I am not able to use Masonry in my vue webpack template. i have used tried it through npm & CDN but not getting grid properly.
in main.js
import Tweet from 'vue-tweet-embed';
import Masonry from 'masonry-layout';
in html
<head>
//....
<script src="https://unpkg.com/masonry-layout#4/dist/masonry.pkgd.min.js"></script>
</head>
in template
<div class="grid">
<div class="grid-item" v-for="i in topics">
<Tweet class="" :id="i.tweets.quoted_status_id_str" :options="{ theme: 'light' }" error-message-class="text-center text-muted tweet_err"><div class="text-center text-muted card" style="margin-top:12px;min-width:30px;"><i class="ion-social-twitter"></i>Loading tweet...</div></Tweet>
</div>
</div>
I have used vue-masonry.
(We need to take care of redraw method this.$redrawVueMasonry(); on update or change.)
Related
I like to use MountingPortal to teleport an element (later a Component) to <body>. But the element is not moved to the target.
Setup
Create a Vue app with vue create portal-test and choose Vue 2 and all defaults
Add Vue-Portal: npm install --save portal-vue
Edit main.js: add import PortalVue from 'portal-vue' and Vue.use(PortalVue)
In packages.json under "dependencies" I've found "portal-vue": "^2.1.7",
Add portal target in public/index.html
In the body I add a div with id target-id that should be treated as a portal target:
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<hr />
<div id="target-id">
Hey
</div>
<hr />
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
Change App.vue
<template>
<div id="app">
<MountingPortal name="destination" mountTo="#target-id">
</MountingPortal>
<portal to="destination">
<p>This should be rendered outside</p>
</portal>
</div>
</template>
Expected output
The <p>This should be rendered outside</p> should displayed between the two <hr />.
Actual output
The <p>...</p> is missing in the DOM. I've tested in Firefox and Edge, the DOM looks the same.
Ah, ok, a <portal-target> must be wrapped in <MountingPortal>.
This works:
<template>
<div id="app">
<MountingPortal mountTo="#target-id">
<portal-target name="destination" />
</MountingPortal>
<portal to="destination">
<p>This should be rendered outside</p>
</portal>
</div>
</template>
Given i have this
//mycompoent.js
Vue.component('main-nav',{
template:`
<div id="main-nav">
</div>
`
});
Vue.component('menu-nav',{
template:`
<div id="menu-nav">
</div>
`
});
new Vue({
}).$mount("#nav-app");
Then in my CSS I have the following
//style.css
#menu-nav{display:none;}
#media (max-width:840px){
#main-nav{display:none;}
#menu-nav{display:block;}
}
//index.html
<div id="nav-app">
<main-nav />
<menu-nav />
</div>
When I resize the browser less than 840px the menu-nav component never appears; I don't know what I have done wrong.
If you're testing this directly in the browser (without a compile step), you can't use the self-closing form <main-nav /> for components. Try the following:
<div id="nav-app">
<main-nav></main-nav>
<menu-nav></menu-nav>
</div>
I want to create a static header, with some links that change a vue app like a SPA. I know how to do this within the main app, but how can it be achieved outside of it, in a static header for example?
App being the main vue instance.
<body>
<div id="header">
</div>
<div id="#app"></div>
</body>
As claimed in the comments you can simply put your static header inside your app
<div id="#app">
<!-- static -->
<div id="header">
<router-link to="" id="link_to_change_app_view" />
</div>
<!-- dynamic -->
<router-view></router-view>
</div>
I have been using owl carousel 1.3 on pages that generally have a wrapper container that sets the width to 1200px.
I started to build responsive sites and don't use a fixed width on any wrappers now, i am also using version 2 of Owl.
I am using the bootstrap grid layout and trying to make my owl carousel responsive. However i can't get this to work and it seems it only works if you set a width on a parent div.
For example if i have this:
<div class="container-fluid">
<div class="row">
<div class="col-md-8">
<div class="owl-carousel">
<div><h2>Item 1</h2></div>
<div><h2>Item 2</h2></div>
<div><h2>Item 3</h2></div>
</div>
</div>
<div class="col-md-4">
<h2> Just a right hand panel</h2>
</div>
</div>
</div>
The owl slider will take up 100% of the screen width, it will ignore the col-md-8 width of 66% so i end up with a broken layout.
Is owl carousel truly responsive or do you have to fix a width to it for it to work?
I know this is old problem but i sloved it with wrapper and little jQ code.
Owl-carousel doesnt support bootstrap class "container-fuild", and when you use this class for owl, will crash width of your page so you need to set width of the wrapper.
Remember add resize event.
My HTML ( div with class owl-wrapper used in jQ ):
<section class="container-fluid">
<div class="owl-wrapper">
<div class="row">
<div class="col-md-8">
<div class="owl-carousel owl-theme ">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
</div>
</div>
</section>
jQuery file:
$(document).ready(function($){
var windowWidth = $( window ).width();
$('.owl-wrapper').css('width', windowWidth);
$('.owl-carousel').owlCarousel({
loop:true
});
});
Try putting min-width : 100% on the parent container.
I am using materialize css for my app, and I using materialize v0.97.0
When I try to use slider it always shows grey background, I have also initialised the slider().
Here's my markup
HTML
<div class="row">
<div class="col s12">
<div class="slider">
<ul class="slides">
<li>
<img src="../images/bg3.jpg" alt="slider image"> <!-- random image -->
<div class="caption center-align">
<h3>This is our big Tagline!</h3>
<h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
</div>
</li>
</ul>
</div>
</div>
JS
$(document).ready(function () {
// Plugin initialization
$('.slider').slider();
})
I have also tried various solutions, but nothing worked
Your code is alright assuming that you initialize javascript correctly. Open the page, where your slider is, right click on the grey block and choose view image. If it does not show the image it is supposed to show, then problem is with your image source. Try using source image from the web.
If it shows the image when clicking - view image, the problem is with the initialization of the javascript. Check if your webpage loads correct javascript file.
In JS I wrote following code and it worked.
$(document).ready(function () {
$('.slider').slider({full_width: true});
});
You need to actually set the transition times in the javascript to make it work
Put this after the jQuery plugin import
<script type="text/javascript">
$(document).ready(function() {
$('.slider').slider({
full_width: false,
interval: 5000,
transition: 800,
});
});
</script>
Any error in your JavaScript will prevent to let the slider shows , so check your console when you refresh the page and solve them and you will be fine :)
My best guess is that the source of your tag is pointing to a wrong path.
Just tried your code with a working image path and it worked like a charm.
Please, check if your source path is pointing to the right place. For testing purposes you should try changing your source to the following:
src="https://www.google.com.br/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"
$(document).ready(function () {
$('.slider').slider({full_width: true});
});
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<div class="slider">
<ul class="slides">
<li>
<img class="img-responsive" src="http://lorempixel.com/580/250/nature/1">
<div class="caption center-align">
<h3>This is our big Tagline!</h3>
<h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
</div>
</li>
<li>
<img class="img-responsive" src="http://lorempixel.com/580/250/nature/2">
<div class="caption left-align">
<h3>Left Aligned Caption</h3>
<h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
</div>
</li>
</ul>
</div>
Simply Use this class transparent
<ul class="slides transparent" style="height: 400px;">