How to create shared content for every Vuejs View? - javascript

I am learning Vuejs and trying to clone the Remotive.io website using their API.
First of all, I am trying to clone UI and create some basic stylesheet.
My architecture is like that :
I have components, router and views, and also App.vue where I put my navigation bar with simple router navigation. Also in the App.vue I want to add everything, which will be the same on every page.
As you can see Remotive.io has this little picture which is shared on every page, to just copy img tag and put this on every my Vue Views I think is a stupid thing and it's not relevant.
My understanding of how Vuejs works is that :
App.vue is shared Vue root content which will be loaded on every page. So if I want to make some static image, which I want to load on every view as a navigation bar, I need to put it into my App.vue file.
So this is my App.vue file
<template>
<div id="app">
<div class="nav">
<nav>
<img src="https://blog.remotive.io/content/images/2017/03/logo-remotive-black-1.png" alt="">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link> |
<router-link to="/contact">Contact</router-link>
</nav>
</div>
<router-view />
<div class="remotiveImage">
<img src="https://remotive.io/remotive_website_static_pages/static/src/img/illustrations/1x/jobs.png" alt="">
</div>
</div>
</template>
<style>
.nav img {
width: 40%;
height:auto;
}
.nav {
display:flex;
justify-content: flex-start;
min-height: 50px;
box-shadow: 0 5px 5px -5px rgba(2,2,2,.2);
}
.remotiveImage {
display:flex;
flex-direction: row;
justify-content: center;
margin-top: 20px;
}
</style>
And this is my homepage view file
<template>
<div class="hello">
<div class="mainText">
<h1> Find the Best Remote Job </h1>
</div>
</div>
</template>
<script>
export default {
name: "HelloWorld",
props: {
msg: String
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.remotiveImage {
margin-top:20px;
display:flex;
flex-direction: row;
justify-content: center;
}
.mainText {
display:flex;
justify-content: center;
}
</style>
And the website looks like this
I don't understand why the text content, which is in my view is top of the picture, which is in the App.vue ?
What am I doing wrong?
Should not App.vue content must be on the top for every page?
If I would add any component or any HTML, it always is on the top of this picture, which is loading in App.vue
I am very beginner in front-end and very beginner in Vue, so any help and advice will be appreciated and helpful.

Change you app.vue template to look like this:
<template>
<div id="app">
<div class="nav">
<nav>
<img src="https://blog.remotive.io/content/images/2017/03/logo-remotive-black-1.png" alt="">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link> |
<router-link to="/contact">Contact</router-link>
</nav>
</div>
<div class="remotiveImage">
<img src="https://remotive.io/remotive_website_static_pages/static/src/img/illustrations/1x/jobs.png" alt="">
</div>
<router-view />
</div>
</template>
Basically, the content being rendered by your router (the text-containg component in question) will be rendered at this line:
<router-view />
So if you want your app.vue content (the image) to appear above it, simply make sure it is sitting about the router-view!
App.vue essentially acts as a wrapper around the router content, as opposed to just rendering before or after that content

Related

How to make a navbar fully disappear with bootstrap 4

I am using Vue.js and Bootstrap 4. I would like to make the navbar fully disappeared when the screen becomes small.
Thi is my Bootstrap 4 code in a .vue file:
<template>
<div>
<nav class="navbar navbar-dark bg-dark">
<p class="pl-5">Hello Guest</p>
<p class="mr-5">Nice play!</p>
</nav>
</div>
</template>
<script>
export default {
data() {
return {
title: "Vue ninjas"
}
}
}
</script>
<style scoped>
p {
color: lightgreen;
text-align: center;
}
nav {
height: 11vh;
}
</style>
Obviously I don't want that the navbar becomes a dropdown menu but I would like it disappears with all the content on resizing. I tried in many ways with no success. Is there a way to do that with Bootstrap 4 or Javascript? Can help?
I solved with this code:
#media screen and (max-width:600px) {
nav {
display:none
}
}

foundation sticky does not work and remove markup when initialised from javascript

I am trying to make an element sticky without touching the HTML.
I tried to follow the documentation but i don't know where did i missed something.
I know there have been a similiar bug
but i use the patched (6.3.1) version
var elem = new Foundation.Sticky($('.another'));
.item{
height: 120vh;
}
.another{
background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/js/foundation.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.min.css" rel="stylesheet"/>
<div class="item">
item
</div>
<div class="another">
another
</div>
<div class="item">
item
</div>
and a pen

Get particles.js on the correct layer?

I can't make particles.js work as a background. It covers the entire page, I've tried setting a higher z-index (50) for everything I want to cover particles.js with. Here's the particles codepen. The codepen has no background, therefor the particles are not visible.
The code below is what I'm trying to set as background for <section id="services">.
<!-- particles.js container -->
<div id="particles-js"></div>
<!-- stats - count particles -->
<!-- particles.js lib - https://github.com/VincentGarreau/particles.js -->
<script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<!-- stats.js lib --> <script src="http://threejs.org/examples/js/libs/stats.min.js"></script>
The problem is that it covers everything inside <section> as well, not sure why.
The code you're about to see is nothing but a butchered ole' bootstrap template. Never intended to make any real use of it in the first place, hence the confusing amount of style attributes.
<section id="services" style="padding:10px;background-color:black;">
<!-- Here's where I thought fitting it would cause it to work as a background -->
<div class="container" style="padding-top:10px;margin-top:10px;">
<div class="row text-center" style="margin-left:auto;margin-right:auto;">
<div style="margin-left:auto;margin-right:auto;max-width:720px;width:100%;">
<button id="reload" onclick="return returnGame();clearDescr();">
<div class="notspinning" id="theSpinner"></div>
</button>
<span id="findMe">
<a href="" id="steamLink" style="color:#333" target="_blank">
<h4 class="service-heading" id="gameName" style="font-family:Montserrat,'Helvetica Neue',Helvetica,Arial,sans-serif;text-transform:uppercase;font-weight: 700;font-size: 22px;color:#777;"></h4>
</a>
</span>
<p class="text-muted" id="gameDescr" style="min-height:100px;font-family:MyWebFont;"></p>
</div>
</div>
</div>
</section>
Any sort of guidance just in the right direction would be much appreciated.
have you tried setting an element as the background, e.g. position: fixed; top:0; right: 0; bottom: 0; left: 0; z-index: 0 and then another div for your content position: relative?
e.g. http://codepen.io/alexander-holman/pen/rebroK
In its simplest form your markup would look like:
<style>
#particle {
background-color: #b61924;
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
z-index:0;
}
#overlay {
position:relative;
}
</style>
<div id="particle"></div>
<div id="overylay">[Your content here]</div>
<script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<script>
var options = {};
particlesJS("particle", options);
</script>

Why on('click', function ()) isn't working in jQuery? [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I have a very simple website with some menu tabs (i.e. Home, About Me etc.) and few paragraphs. I added click function inside my .JS file so that the clicking on tab can navigate to the desired paragraph (or page). But it's not working.
I should refernce to this post as I posted back.
[NOTE: I have apache running in my computer and xwamp is installed. I have jquery source added into my file and they are accurately saved in correct path or file. Besides I have Bootstrap installed, though I didn't necessarily need to set path for any file to it.]
My code:
main.php:
<!DOCTYPE html>
<html>
<head>
<html lang="en">
<html charset="utf-8">
<title>Welcome to Fatah's world!</title>
<link rel="stylesheet" href="main_design.css"/>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/main_interaction.js"></script>
<div class="row">
<div id="header" class="col-xs-12">
<h1>Welcome to my green world!</h1>
</div>
<div class="col-xs-4">
<ul>
<li id="home">HOME</li>
<li id="gallery">GALLERY</li>
<li id="about">ABOUT ME</li>
<li id="contact">CONTACT ME</li>
<li id="diary">MY DIARY</li>
<li id="blog">BLOG</li>
</ul>
</div>
<div class="col-xs-8 home">
<p>Thank you for spending your time to visit my website. My name is Jabir Al Fatah. I live in Sweden. I have a lot of interest in web developing and 3d graphics designing. I am a travel addicted guy. I love to travel and have experience about diversity among life and nature. I am passionate. I don't do everything just becuase I am obliged to do,rather I like to take risk to be done with something just because I like.I haven't have a wonderful childhood in my life. But I admit it that my parents were surprisingly aware of my future and even every singlestep in my life. Their love and affection fulfilled all of my demand.Well, I just admired them a little. There are tons of others stuff I can say. However, in my life, changes happen very fast.</p>
</div>
<div class="col-xs-8 gallery hidden">
<p>This is the gallery.</p>
</div>
<div class="col-xs-8 about hidden">
<p>This paragraph should appear while clicking on "About me". Beisides, it's not accurately placed in the window. I need to fix that .Another problem is that this paragraph moves under the menu area by pushing it up when I make the window size smaller.</p>
</div>
<div class="col-xs-8 contact hidden">
<p>Contact me here.</p>
</div>
<div class="col-xs-8 diary hidden">
<p>My diary will be here.</p>
</div>
<div class="col-xs-8 blog hidden">
<p>Blog posts appear here.</p>
</div>
<div id="footer" class="col-xs-12">Developed by Jabir Al Fatah</div>
</div>
</body>
</html>
.JS:
$("li").on('click', function () {
$(".col-xs-8").addClass("hidden");
$("." + $(this).attr("id")).removeClass("hidden");
});
.CSS:
#import url('http://getbootstrap.com/dist/css/bootstrap.css');
.row {
margin: 0;
}
#header {
background-color: mediumturquoise;
text-align: center;
padding: 20px;
border: 4px solid crimson;
}
.col-xs-8 {
text-align: center;
font-family:'Verdana';
color: mediumblue;
font-size: 13pt;
}
.col-xs-4{
border: 4px solid crimson;
background-color: yellow;
line-height: 40pt;
font-family:'Tahoma';
font-size: 15pt;
font-weight: bold;
margin: 0;
padding: 0;
}
.col-xs-4 ul {
list-style-type: none;
}
#footer {
background-color: gray;
border: 2px solid green;
text-align: center;
position: absolute;
bottom: 0;
left: 0;
}
li:hover {
cursor: pointer;
text-decoration: underline;
}
You're including (and thus executing) the JavaScript before the elements exist on the page. HTML/JavaScript is processed in the order in which is exists in the DOM. So when this runs:
$("li")
the parser is only at the top of the HTML body and hasn't loaded any li elements into the DOM yet. Thus, that selector doesn't find anything.
Either put the JavaScript at the end of the DOM or wrap it in a document ready handler:
$(function () {
$("li").on('click', function () {
// etc.
});
});
(or both)
on not support from jquery 1.9, try live
$("li").live("click",function(){});
I looked at your code and was wondering if replacing
$("li").on('click', function () {
with
$("li").click(function() {
would solve the issue. I've used jquery for a while but have never used ".on" but my onclicks work fine. Hope this helps!

Creating a splash screen using ng-cloak

I'm trying to create a splash screen using AngularJS as described in this talk on the AngularJS youtube channel: http://youtu.be/xOAG7Ab_Oz0?t=10m20s
It uses the ng-cloak directive. Here's the HTML:
<head><head>
<body ng-app>
<!-- inline styles -->
<div class="splash" ng-cloak="">
<p>Loading</p>
</div>
<!-- Rest of app -->
</body>
And the CSS:
[ng-cloak].splash {
display: block !important;
}
[ng-cloak] {
display: none;
}
.splash {
background-color: #428bca;
}
Here is a fiddle: http://jsfiddle.net/TimFogarty/LaBvW/2/
In the fiddle, the splash div does not disappear as the talk said it would. Is there something wrong with this code? Have I made a mistake? How can I implement this splash screen?
This tutorial worked for me: http://www.ng-newsletter.com/advent2013/#!/day/21
Here is a plunker: http://plnkr.co/edit/twGP7gUe9uraYXSr6kQG?p=preview
Note some things:
In the demo I'm manually bootstrapping angular to simulate loading.
The splash screen markup should have ng-cloak attribute
The rest of the template should have ng-cloak attribute
Markup:
<div class="splash" ng-cloak="">
<p>Loading</p>
</div>
<div ng-cloak="">
<h1> app loaded </h1>
</div>
Css:
.splash {
display: none;
}
[ng-cloak].splash {
display: block !important;
}
The second css selector which was:
[ng-cloak] {
display: none;
}
should be
.splash {
display: none;
}
because angular will remove the ng-cloak class when the app is bootstrapped

Categories

Resources