I've been working on my on meteor app. Now it will be great if my maincontent on the mainpage is dynamic. I got this code:
main.html
<head>
<title>Taskmanager</title>
</head>
<body>
{{> navBar}}
{{> mainlayout}}
</body>
mainlayout.html
<template name="mainlayout">
<main>
{{> Template.dynamic template=main}}
</main>
</template>
routes.js
FlowRouter.route('/', {
name: 'home',
action: function() {
BlazeLayout.render('mainlayout', {main: 'noteOverview'});
}
});
noteoverview.html
<template name="noteOverview">
<div class="container">
<h3>Latest Tasks</h3>
</div>
</template>
When i open the page, the mainlayout doesn't load the noteoverview.html in. Do i miss something? Thanx for any help!
SOLVED:
I forgot to add the package: kadira:blaze-layout....stupid fault
I see that you have a navbar on your template.
Maybe the <h3>Latest Tasks</h3> on your notesOverview template is hiding behind the navbar.
Try adding
body{
margin-top:80px;
}
to your app's stylesheet.
Related
I'm new in web development and vue.js. I've tried in many ways to style my code however, it didn't work. Here is my vue.js code example. Please let me know how to style it. I am providing my code implementation here. I created a figure, figcaption, and image markup which acts as a description for my profile and I want to add css to it
<!DOCTYPE HTML>
<html>
<head>
<title>v-if If Statements</title>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.special {background:yellow; border: 1px dotted #fe0000; padding:30px; display:block; text-align:center;}
.important {font-weight:bold; font-size:30px;}
</style>
</head>
<body>
<div id="app">
<figure>
<img v-if="profile.pic" :src="profile.pic">
<div v-if="profile.fname && profile.lname">
Profile: {{profile.fname}} {{profile.lname}}
</div>
<div v-else>
No First or Last name found.
</div>
<figcaption>
<div v-if="profile.desc">
Desc: {{profile.desc}}
</div>
<div v-else>
No description found.
</div>
<div v-if="profile.bio">
Bio: {{profile.bio}}
</div>
<div v-else>
No bio found.
</div>
</figcaption>
</figure>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
profile: {
fname: "Chris",
lname: "Picasso",
desc: "Student",
bio: "Web developer",
pic: "https://i.pinimg.com/custom_covers/222x/85498161615209203_1636332751.jpg"
}
}
});
</script>
Where have you been applied the css? I can't see anything.
You have to add classes in elements like this. You may also can do this programmatically. But I don't know Vue. So please look into the docs.
<div v-if="profile.fname && profile.lname" class="important" >
Profile: {{profile.fname}} {{profile.lname}}
</div>
i use dhtmlxGantt because i need gantt diagram in my project but i have a desplay problem . i use vuejs component that's why i put the code of dhtmlxGantt in my component but the display isn't clear
this is my code :
//Gantt component
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-body">
<div id="gantt_here">
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
created(){
gantt.init("gantt_here");
},
mounted() {
console.log('Component mounted.')
}
}
</script>
<style scoped>
body{
margin: 10px ;
}
</style>
and i call this two file
<script src="https://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.js"></script>
<link href="https://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.css" rel="stylesheet">
please i need help
VueJS is very complicated when it comes to javascript components external to the components, what I can advise you in this case is to do the internal import of the component's library and try to use it, as I never used this component, so I don't know if it uses jQuery, but there are ways to use jQuery in VueJS.
An example of how you would use it would be installing the library using the command npm install --save #types/dhtmlxgantt, and importing it into your component.
<script>
import gantt from '#types/dhtmlxgantt'
export default {
...
created() {
gantt.init("gantt_here");
}
}
</script>
I'm trying to get Swiper to work but it always throw me an error "Swiper is not a constructor"
I'm using http://idangero.us/swiper/get-started/#.WMsuihJ96MI as the Swiper library and installed this library as a meteor package.
client/body.js
Template.slider.onRendered(function(){
var mySwiper = new Swiper ('.swiper-container', {
// Optional parameters
direction: 'vertical',
loop: true,
// If we need pagination
pagination: '.swiper-pagination',
// Navigation arrows
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
// And if we need scrollbar
scrollbar: '.swiper-scrollbar',
});
});
client/body.html
<body>
<h1>Test</h1>
{{> slider }}
</body>
<template name="slider">
<!-- Slider main container -->
<div class="swiper-container">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div>
</div>
</template>
#mutdmour You should try Swiper.default(element,options)
Make sure to console you Swiper instance and check if, It's really a constructor or it's an object which has it's constructor in it's property. Sorry if I give a wrong info. Because my english is very weak and this is my first reply to a Forum.
In my case i fixed it by changing
import {Swiper, SwiperOptions} from "swiper";
to
import Swiper, {SwiperOptions} from "swiper";
I'm trying to implement this gallery on a website: http://ashleydw.github.io/lightbox/
There are no instructions so I'm pretty lost, have been trying to get it to work.
I copied what's below more or less from the source code from the link above.
I moved all the files included in the github download to a new folder dist/lightbox (e.g. ekko-lightbox.css, ekko-lightbox.js).
It's not doing anything, when you click on an image, it just opens the image url.
What am I missing? Do I need to link to some other files or what's wrong?
<head>
<!-- leaving out the other stuff here -->
<link href="dist/lightbox/ekko-lightbox.css" rel="stylesheet">
<link href="dist/css/bootstrap.css" rel="stylesheet">
<link href="dist/css/custom.css" rel="stylesheet">
</head>
<body>
<!-- this is from the source code, just updated the images -->
<h3 class="page-header" id="image-gallery">Example #2: Gallery of Images</h3>
<p>By default, gallery images must be wrapped in a tag (probably <code><div></code>) - which doesn't have the class <code>.row</code>. This is so you can create columns/rows.</p>
<p>A custom selector for the parent can be used, see example #11. Note how the final image is not in the gallery intentionally.</p>
<div class="row">
<div class="col-md-offset-2 col-md-8">
<div class="row">
<a href="images/DSC00978.jpeg" data-toggle="lightbox" data-gallery="multiimages" data-title="People walking down stairs" class="col-sm-4">
<img src="images/DSC00978.jpeg" class="img-responsive"
</a>
<a href="images/DSC00978.jpeg" data-toggle="lightbox" data-gallery="multiimages" data-title="Man getting wet" class="col-sm-4">
<img src="images/DSC00978.jpeg" class="img-responsive">
</a>
<a href="images/DSC00978.jpeg" data-toggle="lightbox" data-gallery="multiimages" data-title="Someone lost their dress" class="col-sm-4">
<img src="images/DSC00978.jpeg" class="img-responsive">
</a>
</div>
</div>
</div>
<script type="text/javascript">
$(document).delegate('*[data-toggle="lightbox"]', 'click', function(event) {
event.preventDefault();
$(this).ekkoLightbox();
});
$(document).ready(function ($) {
// delegate calls to data-toggle="lightbox"
$(document).delegate('*[data-toggle="lightbox"]:not([data-gallery="navigateTo"])', 'click', function(event) {
event.preventDefault();
return $(this).ekkoLightbox({
onShown: function() {
if (window.console) {
return console.log('Checking our the events huh?');
}
},
onNavigate: function(direction, itemIndex) {
if (window.console) {
return console.log('Navigating '+direction+'. Current item: '+itemIndex);
}
}
});
});
//Programatically call
$('#open-image').click(function (e) {
e.preventDefault();
$(this).ekkoLightbox();
});
$('#open-youtube').click(function (e) {
e.preventDefault();
$(this).ekkoLightbox();
});
// navigateTo
$(document).delegate('*[data-gallery="navigateTo"]', 'click', function(event) {
event.preventDefault();
var lb;
return $(this).ekkoLightbox({
onShown: function() {
lb = this;
$(lb.modal_content).on('click', '.modal-footer a', function(e) {
e.preventDefault();
lb.navigateTo(2);
});
}
});
});
});
</script>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="dist/js/bootstrap.min.js"></script>
<script src="js/modal.js"></script>
<script src="dist/lightbox/ekko-lightbox.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
In the end, I got it to work with a different lightbox, http://lokeshdhakar.com/projects/lightbox2/
I'm using several WordPress loops and jQuery UI Tabs that result in the Main tabs and entry-content div markup below. The WordPress loops generate the "entry-post" markup in each tab div, but I'm not showing the php, as the resulting html markup in each tab div is the important part.
I'm also using a bit of jQuery to independently expand/collapse each entry-content div:
$(".entry-content").hide();
$(".entry-title").click(function() {
$(this).parent().children(".entry-content").slideToggle(500); });
What I've found is that each of the entry-content divs keeps their expanded state when switching tabs, i.e. if some of the entry-content divs are expanded in tabone and I switch to tabtwo and then back to tabone, they're still expanded in tabone.
What I need to do is collapse all the entry-content divs in a tab when a tab is changed. Below is the tab init and also the fx to change the tabs.
What do I need to add to this function to collapse all the entry-content divs when a tab is changed?
$(document).ready(function(){
var $tabs= $("#tabs").tabs();
});
$(function() {
$('#tabs').tabs({
fx: { opacity:'toggle' }
});
});
Main tabs and entry-content div markup:
<div id="tabs">
<ul>
<li>tabone</li>
<li>tabtwo</li>
<li>tabthree</li>
</ul>
<div id="tabone">
<div class="entry-post">
<h1 class="entry-title">Title</h1>
<div class="entry-content">Lorem ipsum...
</div></div>
<div class="entry-post">
<h1 class="entry-title">Title</h1>
<div class="entry-content">Lorem ipsum...
</div></div>
<div class="entry-post">
<h1 class="entry-title">Title</h1>
<div class="entry-content">Lorem ipsum...
</div></div>
</div>
<div id="tabtwo">
<div class="entry-post">
<h1 class="entry-title">Title</h1>
<div class="entry-content">Lorem ipsum...
</div></div>
<div class="entry-post">
<h1 class="entry-title">Title</h1>
<div class="entry-content">Lorem ipsum...
</div></div>
<div class="entry-post">
<h1 class="entry-title">Title</h1>
<div class="entry-content">Lorem ipsum...
</div></div>
</div>
<div id="tabthree">
....
</div></div>
The following code should collapse all .entry-content divs whenever a new tab is selected:
$(document).ready(function() {
var $tabs= $("#tabs").tabs({
fx : {
opacity: 'toggle'
},
select : function(event, ui) {
$(".entry-content").hide();
}
});
});
$("div.post [name^="entry-title"]").hide();
should do what you're wanting when attached next to your fx.
or:
$("#tabs a").click(function () {
$("div.post [name^="entry-title"]").hide();
});
I'm not sure i understand you're question completely. But if you wan't to check whether the tab is triggered or not, try use this:
$( ".selector" ).tabs({
show: function(event, ui) { ... }
});
Simplified how you could collapse all divs with class "entry-post", whenever the tab is showed:
$(document).ready(function(){
var $tabs = $("#tabs").tabs({
show: function(){
$('.entry-post').hide();
}
});
});
I'm not a jQuery expert, so here's straight javascript. Might at least help solve the problem...
Since you don't care what tab a div is on (since all divs should be hidden when a tab is changed) you could simply hide all divs on the page every time a tab is changed, regardless of what tab it's on.
var divList = document.getElementsByClassName("entry-content");
for(var divitem in divList){
divitem.style.display = "none";
}
I wish my jQuery was stronger so I could give it in that, but it may help...
Edit:
Just looking at what your example code, I guess something like this in jQuery:
$("#tabs a").click(function() { $(".entry-content").hide(); });
Something that closes all entry-content class divs when any tab is clicked.
You may want to make use of the existing jquery UI tabs library and this will solve a lot of your problems.
http://jqueryui.com/demos/tabs/
Using this will allow you to make a better association between your list items and the divs they are controlling. Add the reference in your header
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
or download it and remove what you don't need. Add the following to your CSS
.ui-tabs .ui-tabs-hide {
display: none !important;
}
and change your references so they are in keeping with the jqueryUI specification
<div id="tabs">
<ul>
<li>tabone</li>
and then the div ids to match
<div id="tabs-1">
<div class="entry-post">
this should make the association. You can then add the controlling behaviour so it should read
$(document).ready(function(){
$(function() {
$('#tabs').tabs();
});
and that will do away with the need to store the array of divs
you can then bind a function to the tabselect event which will hide the divs you want to collapse
$('#tabs').bind('tabsselect', function(event, ui) {
$('#tabs').children().not(ui.panel).children().children(".entry-content").hide();
});
your code should then read:
<head>
<title>Collapse Divs</title>
<style type="text/css">
.ui-tabs .ui-tabs-hide {
display: none !important;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(function() {
$('#tabs').tabs();
});
$('#tabs').bind('tabsselect', function(event, ui) {
$('#tabs').children().not(ui.panel).children().children(".entry-content").hide();
});
$(".entry-content").hide();
$(".entry-title").click(function() {
$(this).parent().children(".entry-content").slideToggle(500);
});
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li>tabone</li>
<li>tabtwo</li>
<li>tabthree</li>
</ul>
<div id="tabs-1">
<div class="entry-post">
...
<h1 class="entry-title">Title 3.3</h1>
<div class="entry-content">Lorem ipsum...</div>
</div>
</div>
</body>