I am currently working on a library bookkeeping service for my school. I am using Electron to create practically a website, which will then be compiled into a cross-platform application afterward. However, I have run into an early problem with angular routing. I plan to use angular navigation because it removes the white buffer between switching pages and in this app I plan to be switching pages frequently.
So far this is my home screen, the animation inside works fine without the ng-view container, but then the links don't work, however, when I put the ng-view container, the animation and whole page altogether seem frozen. Also referring to the root folder for routing doesn't seem to be working for me, so I had to use ../ to go up one folder.
Here is my code.
var app = angular.module("Librain", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "../HomePage/homePage.html"
})
.when("/people", {
templateUrl: "../MembersPage/members.html"
})
});
body {
background-color: #83DDF7;
margin: 0;
padding: 0;
/*Sets to fill background*/
min-height: 800px;
min-width: 1024px;
/*Sets up scaling*/
width: 100%;
height: auto;
/*Sets up the positioning*/
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
/*==========Title Box For Title===========*/
.SideBox {
/*positioning and sizing*/
position: fixed;
text-align: center;
top: 55%;
left: 0;
width: 0%;
height: 18%;
/*color of the box with opacity*/
background-color: rgba(255, 255, 255, .8);
box-shadow: 0 0 .25em rgba(158, 67, 7, .25);
border-radius: .25em;
box-sizing: border-box;
padding: 10px 10px 10px 10px;
/*The */
animation: slideIn 3s forwards;
}
#keyframes slideIn {
/*
Making the box slide into the screen
by increasing the width over 3 seconds
*/
0% {
width: -5%;
}
100% {
width: 30%;
}
}
/*The styling for the text within the content box*/
.SideText {
color: #0090AD;
font-size: 0px;
font-family: Arial;
text-align: left;
animation: appearingText 2s forwards;
animation-delay: 1s;
}
#keyframes appearingText {
/*
Making the box slide into the screen
by increasing the width over 3 seconds
*/
0% {
font-size: 0px;
}
100% {
font-size: 125px;
}
}
/*=============Navigation bar============*/
ul {
position: absolute;
top: 0px;
right: 0px;
width: 100%;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
}
li {
float: right;
}
li a {
display: block;
color: #666;
text-align: center;
padding: 28px 32px;
}
li a:hover {
text-decoration: none;
font-weight: bold;
}
li a:hover:not(.active) {
color: black;
}
li a.active {
color: white;
background-color: #0090AD;
}
<!DOCTYPE html>
<html ng-app="Librain">
<head>
<!--Sourcing jquery, css, and necessary pages-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<link rel="stylesheet" href="homePageStyles.scss">
<script src="homePage.js"></script>
<title>Librain</title>
</head>
<body>
<div class="SideBox">
<div class=SideText>Librain</div>
</div>
<ul>
<li><a class="active" href="#!">Home</a></li>
<li>Members</li>
</ul>
<ng-view></ng-view>
</body>
</html>
Thank you for helping me, I am new to this and have never attempted an app before. I appreciate all the help I can get.
Also is it possible to scale the text within the sidebox with the box itself? As I make the window smaller, it gets out of place and is too large for the box.
Related
When my mobile menu opens, I would love the rest of the visible background (other than the menu itself) to 'dim.' (Both my pages and menu background are very white in general).
There is a plugin that offers this functionality but in trying to keep the website light, am trying to see if this is possible with just some lines of code?
Googling for quite a while came up with nothing other than the app which is a surprise... maybe I searched the wrong keywords?
Any ideas?
Here is my full code (not my original code, can link various parts to their respective Authors).
/*Change hamburger menu colour*/
span.mobile_menu_bar:before{
color:#D7AF39;
}
/*Remove shading of top menu to match sub menu*/
.et_mobile_menu .menu-item-has-children a {
background-color:#FFFFFF;
}
/** Divi Space slide in mobile edits**/
#mobile_menu { display: block !important; min-height: 100vh; top: 0; border-top: none; padding-top: 80px; z-index: 9998; }
.mobile_nav.closed #mobile_menu {
transform: rotateY(90deg); -webkit-transform: rotateY(90deg);
transform-origin: right; -webkit-transform-origin: right;
background: #fff; transition: .8s ease-in-out !important; }
.mobile_nav.opened #mobile_menu {
transform: rotateY(0deg); -webkit-transform: rotateY(0deg);
transform-origin: right; -webkit-transform-origin: right;
background: #fff; transition: .8s ease-in-out; }
.mobile_nav.opened .mobile_menu_bar:before {
content: "\4d"; color: #D7AF39; }
.et_mobile_menu li a, .et_mobile_menu .menu-item-has-children>a {
font-weight: 600;
font-family: open sans;
font-size: large;
}
#media(max-width: 980px) {
.et_header_style_split .mobile_menu_bar, .et_header_style_left .mobile_menu_bar { z-index: 9999; }
#main-header .container.clearfix.et_menu_container { width: 100%; }
.logo_container { padding-left: 30px; }
#et-top-navigation { padding-right: 30px; }
}
#media(min-width: 341px) {
#mobile_menu { width: 340px; margin-left: calc(100% - 340px); }
}
One way of doing this is to assert a blanket div over the entire page, beginning just below the menu bar, then setting that div's opacity to the desired level of dimming.
I have thrown together a very simple proof of concept. Hover the dummy Menu button to observe the effect. Take it onwards from there.
body {
--menu-height: 50px;
}
#page {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: yellow;
}
#menu_bar {
position: absolute;
width: 100%;
height: var( --menu-height);
background-color: blue;
}
#menu_item {
position: absolute;
top: 10px;
left: 10px;
width: 50px;
height: 30px;
background-color: white;
line-height: 30px;
text-align: center;
}
#menu_item:hover:after {
content: '';
position: fixed;
top: var( --menu-height);
left: 0;
height: 100vh;
width: 100vw;
background-color: black;
opacity: 0.5;
/* Ensure z-index is higher than page's content/data items */
z-index: 2
}
#data {
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
background-color: white;
border: 2px solid black;
padding: 10px;
z-index: 1;
}
#text {
display: inline-block;
width: 100%;
text-align: center;
font-weight: bold;
}
<div id="page">
<div id="menu_bar">
<div id="menu_item">Menu</div>
</div>
<div id="data">
<span id="text">Hover the "Menu" button...</span><br><br> Lorem ipsum dolor etc
</div>
</div>
I started off with some text over a background image for the home page on my website. I wanted to make the letters more legible so I added an opaque box using the class "transbox" and setting it's opacity. I'm not too concerned about the text being transparent, but now the navigation bar that I have set up sits behind the "transbox" and will not let me click the links when I scroll over the "transbox" since it is sitting over the navigation bar.
I have already tried setting the z-index appropriately and even went through changing the classes and css code to make it simply a transparent container with some text, however the problem persists and new issues arise regarding container/text placement.
All I want is the navbar to be over everything so it is not covered and unusable in any situation as the user scrolls through the page. I'm curious if this is a bug with opacity, if I am using the wrong type of class, or if it is something entirely different.
$(window).on('scroll', function(){
if($(window).scrollTop()){
$('nav').addClass('black');
$('header').addClass('black');
$('header .logo img').addClass('black');
$('header ul').addClass('black');
$('header a').addClass('black');
}
else
{
$('nav').removeClass('black');
$('header').removeClass('black');
$('header .logo img').removeClass('black');
$('header ul').removeClass('black');
$('header a').removeClass('black');
}
})
header{
background: #35424a;
color: #ffffff;
z-index: 999;
}
header.black{
z-index: 999;
}
header a{
color: #5ff5a3;
text-decoration: none;
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
text-transform: uppercase;
padding: 5px 20px;
font-size: 16px;
transition: .5s;
}
header a.black{
color: #ffffff;
font-size: 14px;
}
header ul{
float: right;
padding: 68px 50px 0 10px;
display: flex;
transition: .5s;
}
header ul.black{
padding: 40px 10px 0 10px;
}
header li{
float: left;
display: inline-block;
box-sizing: border-box;
padding: 1px;
transition: .5s;
}
header nav{
position: fixed;
top: 0;
left: 0;
width: 100%;
transition: .5s;
}
header nav.black{
background: rgba(0,0,0,.8);
color: #000000;
}
header .current a, header a:hover{
color: #ffffff;
background: #000000;
font-weight: bold;
border: 1px solid #ffffff;
transition: .5s;
}
header .logo img
{
width: 500px;
padding: 0px 50px;
height: auto;
float: left;
transition: .5s;
}
header .logo img.black
{
width: 300px;
padding: 0px 20px;
}
#showcase{
min-height: 1000px;
background: url(../img/showcaseimg.jpg) no-repeat 0 -200px;
background-size: cover;
background-position: center;
text-align: center;
color: #ffffff;
}
#showcase h1{
font-size: 55px;
color: #ffffff;
padding: 0px 20px;
}
#showcase p{
font-size: 20px;
color: #ffffff;
padding: 0px 20px 20px;
}
#showcase .transbox{
margin-top: 700px;
margin-bottom: 10px;
background-color: #000000;
opacity: 0.6;
z-index: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<div class="container">
<nav>
<div class="logo">
<img src="./img/creativecs_logo.png">
</div>
<ul>
<li class="current">HOME</li>
<li>SERVICES</li>
<li>PRODUCTS</li>
<li>ABOUT</li>
<li>CONTACT</li>
<li>NEWS</li>
</ul>
</nav>
</div>
</header>
<section id="showcase">
<div class="container">
<div class="transbox">
<h1>Custom PC solutions for anyone and everyone.</h1>
<p>Designed by engineers. Tested by enthusiasts. Check out what CreativeCS has to offer you.</p>
</div>
</div>
</section>
It work fine for me.
That being said, for z-index to work you need your elements with z-index to be positionned (MDN).
header {
position:relative;
z-index: 999;}
#showcase {
position:relative;
z-index: 1;
}
You might need to read about the stacking context.
Here header and #showcase exist in the stacking context of the root element (html) so it will work fine. Other times you might want to create a stacking context that is not as high as the root element.
Everything seams to be fine, anchors do fire as expected, you can add this script to see wich element is selected..
var x = document.getElementsByTagName("*")
for(var i = 0; i< x.length; i++){
x[i].addEventListener("click", function(e){
alert(e.target.tagName)
})
}
I have looked through various pages, but have not managed to find a working solution. I want the text in my div to get more transparent gradually when I scroll. Please, can anybody help? Here is my code:
<script src = "/js/titleScroll.js"></script>
<div class = "header-title">
<h1>Title</h1>
</div>
and:
$(document).ready(function() {
$(window).scroll(function() {
if ($(this).scrollTop() > 0) {
$('header-title').css('opacity', 0.8);
} else {
$('header-title').css('opacity', 1);
}
});
});
and here is my css:
.header-title {
width: 80%;
height: 100px;
left: 50%;
top: 50%;
font-size: 1.5em;
text-align: center;
transform: translateX(-50%);
margin-top: -50px;
position: relative;
max-width: 100%;
background-attachment: fixed;
position: float;
}
.header-title h1 {
color: white;
text-shadow: 2px 2px 4px #d1d1d1;
font-family: arial, sans-serif;
white-space: nowrap;
text-transform: uppercase;
display: inline-block;
}
Thank you.
Problem is, currently you are just triggering 0.8 opacity when user is not at top of the page. Try to get top offset each time scroll is executed and then apply opacity based on that offset, it can be linear function, or more complex ones - it's up to you how it's gonna fade in/out.
Here's very quick working example:
<head>
<style>
body {
min-height: 4000px;
}
.header-title {
position: fixed;
width: 80%;
height: 100px;
left: 50%;
top: 50%;
font-size: 1.5em;
text-align: center;
transform: translateX(-50%);
margin-top: -50px;
max-width: 100%;
background-attachment: fixed;
}
.header-title h1 {
color: white;
text-shadow: 2px 2px 4px #d1d1d1;
font-family: arial, sans-serif;
white-space: nowrap;
text-transform: uppercase;
display: inline-block;
}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<script>
$(document).ready(function() {
$(window).scroll(function(event) {
let scroll = $(this).scrollTop();
let opacity = 1 - (scroll / 1000);
if (opacity >= 0) {
$('.header-title').css('opacity', opacity);
}
});
});
</script>
<div class = "header-title">
<h1>Title</h1>
</div>
</body>
https://jsfiddle.net/un2bdvfm/
I've looked around SO and Google, but I haven't found an answer for my question (though I do feel this might be a very commonly asked one, still no luck anyway). All those I found were on jQuery, but I don't want to start jQuery without grasping adequate knowledge of the main JS.
Basically, I have a simple website, and I'm now trying to make the frame of the navigation bar. The navigation bar will dropdown to display other options. My only question is how to make the dropdown STAY when I move out of the main element, that triggers the dropdown, and into the dropdown information.
I noticed it's easier and neater to use CSS's :hover instead of JS, but I prefer to use JS as I'm still starting to learn a little bit of JS, so it's just to gain more knowledge.
Please ignore all the colors and weird formatting in my code, it's just a frame for now that lets me see things better.
PS: SORRY I HAVEN'T OPTIMISED THE TEXT AND VISUALS FOR RESIZED VIEWING AND IFRAMES. SORRY!
Thanks in advance! :)
document.getElementById("server").onmouseover = function() {serverMouseOver()};
document.getElementById("server").onmouseout = function() {serverMouseOut()};
function serverMouseOver() {
document.getElementById("serverdropdownbox").style.display = "block";
}
function serverMouseOut() {
document.getElementById("serverdropdownbox").style.display = "none";
}
.clearfix {
clear: both;
}
body
{
background-color: rgb(21,14,43);
background-image: url("../images/backgroundimage.jpg");
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
min-height: 100%;
background-position: center center;
overflow: hidden;
}
#gigalogomainbox
{
float: left;
width: 30vw;
height: 10vw;
overflow: hidden;
transform: skewX(20deg);
margin: 0 0 0 -4vw;
background-color: white;
}
#gigalogobox
{
margin: 0 3vw 0 2vw;
padding: 0 0 0 2vw;
width: 100%;
height: 8vw;
}
#gigalogo
{
width: 80%;
margin: 3vw 2vw 0 0;
height: 7vw;
}
#steamlogomainbox
{
width: 15vw;
height: 10vw;
float: right;
margin: 0 -4vw 0 0;
background-color: white; /*000c21*/
transform: skewX(-20deg);
overflow: hidden;
}
#steamlogobox
{
margin: 0 -2vw 0 3vw;
padding: 0;
width: 100%;
height: 20%;
}
#steamlogo
{
padding: 0 0 0 2vw;
margin: 3vw 0vw 0 0;
transform: skewX(20deg);
height: 7vw;
}
#placeholderbartop
{
float: left;
width: 60%;
margin: 0;
padding: 0;
height: 10vw;
}
#navbarbox
{
clear: both;
display: block;
width: 100%;
height: 5vw;
padding: 2vw 0 0 0;
margin: auto;
}
#navbar, #navbar ul
{
width: 100vw;
height: 5vw;
background-color: green;
margin: auto;
}
#navbar li
{
color: white;
list-style: none;
display: inline-block;
padding: 1vw 3vw 0 3vw;
color: red;
font-size:35px;
}
#serverdropdownbox
{
display: none;
color: white;
background-color: darkblue;
}
#serverdropdowncontent
{
list-style-type: none;
width: 15vw;
margin: 0 0 0 15vw;
transform: skewX(15deg);
}
#serverdropdowncontent li
{
border: 1px solid white;
font-size: 25px;
text-align: center;
padding: 1vw 0 1vw 0;
}
.menugradient
{
backround: darkblue;
}
#server
{
background-color: blue;
}
#server:hover #serverdropdownbox
{
display: block;
}
#gigalogomainbox:hover
{
background-color: red
}
<!DOCTYPE html>
<html>
<head>
<link href="css/mainframe.css" type="text/css" rel=stylesheet>
<script src="scripts/jquery.js"></script>
</head>
<body>
<!--Giga logo, top left-->
<div id="gigalogomainbox" class="clearfix">
<div id="gigalogobox">
<img id="gigalogo" src="images/gigalogo.png">
</div>
</div>
<!--Steam logo, top right-->
<div id="steamlogomainbox">
<div id="steamlogobox">
<img id="steamlogo" src="images/steamlogo.png">
</div>
</div>
<!--navigation barrrrrr-->
<div id="navbarbox">
<ul id="navbar">
<li>Home</li>
<li id="server">Servers</li>
<li>Community</li>
<li>Store</li>
<li>Download</li>
<li>Contact</li>
</ul>
<div id="serverdropdownbox">
<ul id="serverdropdowncontent">
<li>Server List</li>
<li>GigaDB</li>
<li>CS:GO</li>
</ul>
</div>
</div>
<script src="scripts/frame.js"></script>
</body>
</html>
So, to fix this, it would be easy to fix this in jQuery. But the way to fix it in pure JS is to create multiple ids for the "Servers" content (li's,a tags). Then do the same thing you did with the "Servers" li in JS but with those id's that you created for the "Servers" content. Also, you should do that on id serverdropdowncontent.
Best of Luck,
Ben A.K.A BlackSky
My webpage takes anywhere from .5sec - 3 seconds to load completely. I was just wondering if there was a way to have an overlay to show in till the page was loaded. When the page finished loading, I would want this overlay to hide. Something like a progress bar or a .gif. I'm using the razor engine in MVC3.
Three things I have done to make this work: PS, Sorry for poor code blocks, new to all of this.
HTML Div:
<div id ="blocker">
<div>Loading...</div></div>
CSS:
#blocker{position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
z-index: 1000;
opacity: 0.3;
display: none;
}
#blocker div
{ position: absolute;
top: 50%;
left: 50%;
width: 5em;
height: 2em;
margin: -1em 0 0 -2.5em;
color: #fff;
font-weight: bold;
}
JQuery before the Ajax gets called:
$("#blocker").show();
$.ajax`
What I do is:
var loadingTimeout;
$j('body').ajaxStart(function () {
loadingTimeout= setTimeout(function () {
$("#blocker").show();
}, 1000);
});
$j('body').ajaxStop(function () {
clearTimeout(loadingTimeout);
$("#blocker").hide();
});
On every ajaxcall made in your page, your blocker gets displayed after 1 second. When the client gets the resonse, the block gets hidden again. What do yout think?
Maybe this one might help you
$(document).ready(function() {
$('button').click(function(){
$('body').addClass('noscroll');
document.querySelector("#overlay").classList.remove('is-visible');
});
});
#overlay {
background: #ffffff;
color: #666666;
position: fixed;
height: 100%;
width: 100%;
z-index: 5000;
top: 0;
left: 0;
float: left;
text-align: center;
padding-top: 25%;
opacity: .80;
}
button {
margin: 40px;
padding: 5px 20px;
cursor: pointer;
}
.spinner {
margin: 0 auto;
height: 64px;
width: 64px;
animation: rotate 0.8s infinite linear;
border: 5px solid firebrick;
border-right-color: transparent;
border-radius: 50%;
}
#keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.is-visible {
display: none;
}
.noscroll {
overflow: hidden;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<body>
<button>Load Spinner</button>
<div id="overlay" class="is-visible">
<div class="spinner"></div>
<br/>
Loading...
</div>
</body>
</html>