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
}
}
Related
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
I am following this guideline to create a responsive navbar that, according to the dimension of the screen, will show its elements in a dropdown list (instead of an inline, used for bigger screens).
Below the relevant part of the HTML (replaced some useless parts with "..." to improve and speed-up readability)
<!DOCTYPE html>
<html lang="en">
<head>
...
<link rel="stylesheet" href="{% static 'css/styles.css' %}">
<link rel="javascript" href="{% static 'javascript/responsive.js' %}">
</head>
<body>
{% block sidebar %}<!-- insert default navigation text for every page -->{% endblock %}
{% block content %}<!-- default content text (typically empty) -->
<!-- Main Logo -->
<div class="main-image" id="myMainImage">
<img src="{{STATIC_URL}}/static/images/logo.png"/>
</div>
<!-- Navigation Bar -->
<div class="topnav" id="myTopnav">
<a href Home
<a href="http://www...</a></li>
Storia di Gabriella</li>
Video Gallery</li>
Photo Gallery</li>
Dicono di Noi</li>
Come Contattarci</li>
<input type="text" placeholder="Ricerca..">
☰
</div>
in the static folder (mysite/articles/static) I have created a javascript folder with a responsive.js file inside it
/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
function respScreen() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
and, finally, I have filled up the styles.css (in mysite/articles/static/css), below the relevant part
/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home").
Show the link that contains should open and close the topnav (.icon) */
#media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon.
This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
#media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
I cannot understand why, despite following exactly the guide linked, when I zoom in the page the navbar does not compact itself (instead, its elements tends to overlap each other).
EDIT1: I tried to copy the code from the tutorial here in Pycharm and run it in my local Django server and it does not work. It seems to be an issue of configuration.
Below the static path from the settings.py
STATIC_URL = '/static/'
If I can provide you with more information, please ask.
EDIT2: Console log below (CTRL + SHIFT + J in Firefox):
unreachable code after return statement aU73Q4U9JMQ.js:1028:375
The character encoding of a framed document was not declared. The document may appear different if viewed without the document framing it. hscv
The character encoding of a framed document was not declared. The document may appear different if viewed without the document framing it. hscv
Attempt to set a forbidden header was denied: Connection 1588510866-lcs_client_bin.js:99:385
Attempt to set a forbidden header was denied: Connection 1588510866-lcs_client_bin.js:99:385
EDIT3: If you want to see the full project to review the other Django files, it is stored in this Github repository.
Resolved inserting a script tag in the html with the javascript function as follow
<script>
function respScreen() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
Just wondering if it would be possible to scroll a page from top to top indefinitely ?
Not going straightly back to the top with #a but showing the top below the bottom after reaching it, also meaning you can see the bottom above the top by scrolling up. A 3d cylinder page ?
Sadly all I found was about blog style infinite top to bottom scroll.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>infinitescroll</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style>
body {
background: #000;
margin:0;
text-align: center;
overflow-x:hidden;
}
#frame {
width: 100%;
height: 100%;
}
.strip div {
position: relative;
text-align:center;
height: 200px;
}
.strip #div01 {
background-color:#942192;
}
.strip #div02 {
background-color:#5228cc;
}
.strip #div03 {
background-color:#0433ff;
}
.strip #div04 {
background-color:#009292;
}
.strip #div05 {
background-color:#00f900;
}
.strip #div06 {
background-color:#cafa00;
}
.strip #div07 {
background-color:#fffb00;
}
.strip #div08 {
background-color:#ffc700;
}
.strip #div09 {
background-color:#ff9300;
}
.strip #div10 {
background-color:#ff5100;
}
.strip #div11 {
background-color:#ff2600;
}
.strip #div12 {
background-color:#d82253;
}
</style>
</head>
<body >
<div id="container">
<div class="strip">
<div id="div01"><br/>↓ ↑</div>
<div id="div02"><br/>↓ ↑</div>
<div id="div03"><br/>↓ ↑</div>
<div id="div04"><br/>↓ ↑</div>
<div id="div05"><br/>↓ ↑</div>
<div id="div06"><br/>↓ ↑</div>
<div id="div07"><br/>↓ ↑</div>
<div id="div08"><br/>↓ ↑</div>
<div id="div09"><br/>↓ ↑</div>
<div id="div10"><br/>↓ ↑</div>
<div id="div11"><br/>↓ ↑</div>
<div id="div12"><br/>↓ ↑</div>
</div>
</div>
</div>
<script>
$('document').ready(function() {
$(document).scroll(function(){
if (document.documentElement.clientHeight + $(window).scrollTop() >= $(document).height()) {
$(document).scrollTop(0);
}
});
});
</script>
</body>
</html>
I did something like that once, but only for the case of list of items - not an arbitrary html.
Basic idea is a virtual list - you have limited number of items on the screen - so called sliding window. While scrolling additional items get pumped up and out of view items get deleted.
In such case infinite scroll is trivial - when you scroll past last item of record set you start loading items at index 0.
For arbitrary markup / styling I don't think it is even possible in 100%. All that absolute positioned elements, floats, etc....
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
On the "home" page I want to have a logotype and a menu on a #banner div (which will then be there throughout the whole site) and on a #content" div to have an image. All these divs are inside a #container" div. The menu has 3 buttons.
I would like that on mouseover event each button displayed image on the #content div changes accordingly. So basically, when hover button1, the image on #content will change from background.jpg to background1.jpg. The event of mouseover on button2 will change it to background2.jpg etc. When buttons are not hovered over, the image should revert to the original background.jpg.
HTML:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>E.S.T.</title>
<link href="_css/layout.css" rel="stylesheet" type="text/css">
<link href="SpryAssets/SpryMenuBarHorizontal.css"
rel="stylesheet"
type="text/css">
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="banner">
<div id="logo">E.S.T.</div>
<div id="menu">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li id="button1">Biography</li>
<li id="button2">Albums</li>
<li id="button3">Links</li>
</ul>
</div>
</div>
<div id="content">
<img id="back0" src="_img/background.jpg">
<img id="back1" src="_img/back_bio.jpg">
</div>
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1,
{
imgDown:"SpryAssets/SpryMenuBarDownHover.gif",
imgRight:"SpryAssets/SpryMenuBarRightHover.gif"
});
</script>
</body>
</html>
CSS:
#charset "UTF-8";
#import url("../_fonts/Days/fontstylesheet.css");
body {
background-color:#CCC;
font-family:Days;
font-size:100%;
}
#container {
width:850px;
max-height: 650px;
margin: 0 auto;
padding-left: 10px;
padding-right: 10px;
overflow: hidden;
font-family: Days;
}
#logo {
position:relative;
font-size: 4em;
color:white;
float:left;
}
#menu {
float:right;
margin-top:40px;
}
I have tried several different things but I manage only to change the background image from the buttons themselves. From searching around the web i think this should be done with JS, but i have no idea how to do it.
This can be solved entirely with CSS, but first let me give you a tip:
Combine background.jpg and background1.jpg into one image, and rather change the background position. This way, there won't be any delay from when the user hovers over the menu element to when the picture is displayed, and you'll have fewer files to keep track of.
Say we let #button1 be 100px tall. We make an image 200px tall containing the normal state image on top, and the hover image on the bottom. This is called a sprite.
#button1 {
height: 100px;
background-image: url("background.jpg");
}
#button1:hover {
background-position: 0 -100px;
}
This moves the background image, showing the hover version.
For convenience, I'll answer this question using the jQuery javascript library.
If I understand you right, you would like #content to contain an image that changes when you hover over the menu items, and the image should reflect the item currently hovered.
In stead of including every image in the body, I'll try an approach using the data attributes.
HTML The relevant parts
<ul id="MenuBar1" class="MenuBarHorizontal">
<li id="button1" data-img="background.jpg">Biography</li>
<li id="button2" data-img="back_album.jpg">Albums</li>
<li id="button3">Links</li>
</ul>
<div id="content">
<img id="back"
src="_img/background.jpg"
data-original="_img/background.jpg"
alt="e.s.t" />
</div>
JavaScript
$(document).ready(function() {
$("#MenuBar1 li").mouseover(function() {
$("#back").attr("src", $(this).data("img"));
}).mouseout(function() {
$("#back").attr("src", $("#back").data("original"));
});
});
So now we store the original image path with the image tag in its data-original attribute, and the path to the :hover image is stored with the menu element.
See this Fiddle for a demo!
Give an id on your image like: id=idimage
You can use jQuery like this:
<script type="text/javascript">
$(document).ready(function(){
$("#MenuBar1 li").mouseover(function(){
var id=$(this).attr('id');
var number = id[id.length-1];
$("#id_image").attr("src","_img/background"+number+".jpg");
});
});
</script>