So I'm making a website where I have several divs that should slide either from right, left, or top when user clicks on specific button or nav items. However, none of those are working. None of the divs will slide over when I click on the button that are supposed to make them slide. I'm using pure javascript to perform those actions. So far, I've tried several actions. First, I thought it was because I didn't have window.onload, but after adding it, nothing changed. Then I though maybe the links were still carrying the default actions, so I tried to add e.preventDefault in hopes that was the problem, it also didn't work. Then I found out something weird that made think maybe it is my computer that is not interpreting javascript correctly(weird thought, I know. But I was just considering anything since I was running out of solutions).But actually, it turns out that my computer or the editor is not reading "document" or window in javascript. It says both of them are not defined, which is weird since I have linked the javascript file correctly at the end of the body. So I decided to run it on JSFiddle to check whether it was really just my computer. However, even in JSFiddle the divs still won't slide when I click the button to make them slide.
I'm out of ideas. Since the project I'm doing is big, I extracted the part of divs that are not sliding to make things easier. The div you guys will see, is supposed to slide from the left when we click on the same div.
Here is the html code:
<!DOCTYPE>
<html>
<head>
<title>Emanuel Inacio</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css? family=Roboto+Condensed:100,300,400" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id="home-page">
<div id="nav-bar"></div>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
Here is the css code:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Roboto Condesed', 'San-serif';
}
#nav-bar {
width: 50%;
height: 100vh;
background-color: #000000;
transform: translateX(-50%);
transition: transform 0.5s;
}
.active {
transform: translateX(50%);
}
Finally, this is the javascript part:
var nav = document.getElementById("nav-bar");
window.onload = function () {
nav.addEventListener("click", function () {
nav.classList.toggle("active");
});
}
Every other div that is not working has pretty much the same code base as this one. Hence I decided to post only this div. Thanks in advance!
It's a specificity issue, ID is more specific than class so your style will never be applied. You need to adjust CSS like this:
var nav = document.getElementById("nav-bar");
window.onload = function() {
nav.addEventListener("click", function() {
nav.classList.toggle("active");
});
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Roboto Condesed', 'San-serif';
}
#nav-bar {
width: 50%;
height: 100vh;
background-color: #000000;
transform: translateX(-50%);
transition: transform 0.5s;
}
#nav-bar.active {
transform: translateX(50%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="home-page">
<div id="nav-bar"></div>
</div>
Related
I am aware I can use background-image: url("www.linktoimage.com/image.png"), in css, to place an image in the background. I also know I can add a javascript file into html with tag. My challenge is how do I apply css characteristics of a background image to my javascript file?
To add some context, the javascript file is a simple animation (randomly bouncing balls, that responds to the screen width and height. I want to place text on top of this as if it was background, but no matter what I do, text will place itself above the script, in a white box, instead of directly on top of my script. Below is the general result of my various attempts:
I would like to place "Welcome" on top of my javascript, as oppose to how it currently appears on top of window with a white background. My css is as follows:
#font-face {
font-family:'HighTide';
src: url('assets/HighTide.otf')
font-family:'HighTideSans';
src: url('assets/HighTideSans.otf')
}
body {
padding: 0;
margin: 0;
}
canvas {
vertical-align: top;
z-index: -1
}
.title {
font-family:'HighTide';
font-size: 10vw;
margin: auto;
text-align: center;
z-index: 1;
}
.enter {
font-family:'HighTideSans';
font-size: 2vw;
text-align: center;
margin: auto;
z-index: 1;
}
And here is the html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>LockeDesign</title>
<script src="libraries/p5.js" type="text/javascript"></script>
<script src="libraries/p5.dom.js" type="text/javascript"></script>
<script src="libraries/p5.sound.js" type="text/javascript"></script>
<script src="libraries/svg.js" type="text/javascript"></script>
<script src="main.js" type="text/javascript"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class=title> WELCOME </div>
<a href="main.html" class=enter> </a>
</body>
</html>
Any suggestions are appreciated, thank you!
EDIT
Using position: absolute; works partially, all I had to do was add left: 0;
right: 0; and bottom: 50%; to re-center the text. Resizing the window would cause scrollbars to appear, which was less than desirable, so I added overflow:hidden; to the body tag. Now this works exactly as intended, thanks all!
I would suggest WRAPPING all of the content you wish to display over the dynamic background in a single div
Example
<html>
<body>
<div id="BodyWrapper">
<h1> This is an HTML Page </h1>
</div><!-- End BodyWrapper -->
</body>
</html>
Then apply some Z positioning to the BodyWrapper with css
#BodyWrapper{position:absolute; top:0; left:0; width:100%; height:100%; z-index:5;}
If the above is still not enough then you may have to delay the
showing of the body content (make sure the dynamic background
completely loads first).
You can set the initial display styling of the wrapper to
#BodyWrapper{position:absolute; top:0; left:0; width:100%; height:100%; z-index:1; display:none;}
and onLoad... call this function
function show_PageBody()
{
setTimeout(function(){ update_Wrapper(); },1000);
function update_Wrapper()
{
document.getElementById('BodyWrapper').style.display='block';
document.getElementById('BodyWrapper').style.zIndex = 5;
}
}
You can add a css transition for the opacity of the BodyWrapper so that it fades onto the screen instead of just appearing.
This should work (has worked for me in the pass).
If not please let me know.
Using position: absolute; works partially, and renders this result:
All I had to do was add left: 0; right: 0; and bottom: 50%; to re-center the text. Also, resizing the window would cause scrollbars to appear, which was less than desirable, so I added overflow:hidden; to the body tag. Now this works exactly as intended:
I am using perfect scrollbar for custom scroll bar. It is working fine.
But the scrollbar is visible only when you mouse over on the container.
How do I make this visible all the time?
$('.container').perfectScrollbar();
Demo
From the perfectscrollbar wiki:
How can I make the scrollbars always visible?
The reason why it's hidden by default is that opacity: 0 is used.
Please change all references of it to opacity: 0.6. If using .scss,
modify the line #include opacity(0) to #include opacity(0.6) in the
scrollbar-rail-default mixin and run gulp build to build .css and
.min.css files.
If you're not willing to modify the CSS files but would like to make
it always visible, please add following lines anywhere after
perfect-scrollbar.css is loaded.
.ps-container > .ps-scrollbar-x-rail,
.ps-container > .ps-scrollbar-y-rail { opacity: 0.6; }
Also, an example code may be helpful to see how to achieve it.
Here is example https://github.com/noraesae/perfect-scrollbar/blob/master/examples/always-visible.html
So, if you modify your JSFiddle by pasting the following into your html, it works.
<div class="container">
<div class="content"></div>
</div>
<style>
.ps-container > .ps-scrollbar-x-rail,
.ps-container > .ps-scrollbar-y-rail { opacity: 0.6; }
</style>
In addition you have to make sure perfect-scrollbar is updated at the right time. If the content is loaded dynamically, call ps.update().
Warning, make sure the the call is made after your data is loaded, on VueJS I had to do it in the 'nextTick' function :
this.$nextTick(() => {
ps.update();
});
},
I guess a timeout may works too.
.ps__rail-x,
.ps__rail-y {
opacity: 0.6;
}
This worked for me.
Try this. This will work even if the container class doesn't exist in you application
.ps> .ps__scrollbar-x-rail, .ps> .ps__scrollbar-y-rail{
opacity: 0.6;
}
I'm using ngx-perfect-scrollbar in Angular 8 and fixed problem by adding the following styles
.ps > .ps__rail-x,
.ps > .ps__rail-y {
opacity: 0.6;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>perfect-scrollbar example</title>
<link href="../dist/css/perfect-scrollbar.css" rel="stylesheet">
<script src="../dist/js/perfect-scrollbar.js"></script>
<style>
h1 { text-align: center; }
.container { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: auto; }
.container .content { background-color: red; width: 1280px; height: 720px; }
</style>
<style>
/* to make scrollbars always visible */
.always-visible.ps-container > .ps-scrollbar-x-rail,
.always-visible.ps-container > .ps-scrollbar-y-rail {
opacity: 0.6;
}
</style>
</head>
<body>
<h1>Default</h1>
<div class="container">
<div class="content">
</div>
</div>
<h1>Always visible</h1>
<div class="container always-visible">
<div class="content">
</div>
</div>
<script>
window.onload = function () {
[].forEach.call(document.querySelectorAll('.container'), function (el) {
Ps.initialize(el);
});
};
</script>
</body>
</html>
I had the same issue. Make sure you are rendering the content first and after that you are creating the scrollbars. No CSS changes are needed. I'm using perfect-scrollbar.jquery.js
This is my code:
<!doctype html>
<html lang="en-US">
<head>
<title>Welcome - Home</title>
<link type="text/css" rel="stylesheet" href="Home.css">
<link rel="icon" href="KLOGO.png" type="image/png"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script src="Home.js"></script>
</head>
<body class="menu">
<header>
Toggle
<nav class="menu-side">
This is a side menu
</nav>
</header>
<p> sioeufh iufha dgrkljbgril unfvuabervluiyboyubn serlibglisuhsefiuh oaisuf aieufh aosih asioeufh iufha dgrkljbgril unfvuabervluiyboyubn serlibglisu</p>
<p>oierua yugafapiwugText and more tejiaslirfuh aiufh oaiuefhioaushf aisbhfailsubfaufha dgrkljbgril unfvuabervluiyboyubn serlibglisuh oaiusg foiygasdefoiawg pghuioyf gaiwuebfyaweoilru gfa s7ierfygasrgoooa8iweygfra iiiastygf a8we8</p>
</body>
</html>
The css:
.menu-side{
background: #333;
border-right: 1px solid #000;
color: #fff;
position: fixed;
top: 0;
left: -231px;
width: 210px;
height: 100%;
padding: 10px;
}
.menu{
overflow-x:hidden;
position: relative;
left: 0px;
}
.menu-open {
left: 231px;
}
And the jquery:
(function () {
var body = $('body');
$('.menu-toggle').bind('click', function () {
body.toggleClass('menu-open');
return false;
});
})();
I'm using the Brackets program to write my code, but when I go to the live view after I saved everything and i press "toggle" the page wont move and I looked over everything and Im 98% sure its correct.
Put <script src="Home.js"></script> before the </body> tag.
I made another class
.menu-side-open{
left:0px;
}
and JQuery
(function () {
var body = $('body');
$('.menu-toggle').bind('click', function () {
body.toggleClass('menu-open');
$('.menu-side').toggleClass('menu-side-open');
return false;
});
})();
Also added
.menu, .menu-side{
transition: 300ms;
}
for a nice slide :)
JSFiddle demo
You need to include jQuery if you want to use it.
Add this line
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
In your html's head or before you use jQuery!
e.g.
<head>
<title>Welcome - Home</title>
<link type="text/css" rel="stylesheet" href="Home.css">
<link rel="icon" href="KLOGO.png" type="image/png"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script src="Home.js"></script>
Change this:
body.toggleClass('menu-open');
to this:
$('.menu-side').toggleClass('menu-open');
And change the .menu-open css class to this:
.menu-open {
top:10%;
left: 0px;
}
Here is the JSFiddle demo
Its the .menu-side that is hidden on the left. Therefore you should be applying the menu-open class to .menu-side and not the body tag.
Your CSS was setting the left of .menu-side to 231px, setting it back to 0px is enough to make the menu appear back into view. And when the menu appeared, it covered the 'Toggle' link, therefore I also added top:10% to the .menu-open class CSS.
I think it is related to a missing file from the computer. I have the same issue with my computer and it does not really matter wether you put the CSS and JS into the HTML page. The result will be the same. When you open the page in the browser, you won`t see any changes, and if I press F12 it says: Failed to load resource: net::ERR_FILE_NOT_FOUND or dll file not found or something like that
Don't really know what they're called. For some reason I can't remember. But you know on many homepages they have that menu-like thing with panels that slide by showing their products? I pretty much need to learn how to do that, although what I'm actually doing is making a panel slide by when you click some text. The ideas are pretty much the same, from what I can tell, except those menus do it automatically every couple seconds.
Now I know pretty much exactly what to do in terms of the Javascript. The problem I'm having right now is (worryingly) basic HTML. This is what I've got:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Dat Sliding Menu Doe</title>
<link rel="stylesheet" href="slidingmenu.css"/>
</head>
<body>
<div id="menu1">
<h1>This is some text.</h1>
<p>This is some more text.</p>
</div>
<div id="menu2">
<h3>This text is different.</h3>
<h1>Very different.</h1>
<p>So different, in fact, that</p>
<p>the div is a different height.</p>
</div>
<script type="text/javascript">
</script>
</body>
</html>
CSS:
#menu1 {
position: absolute;
display: inline-block;
background: #d8d808;
color: white;
left: 0px;
right: 0px;
top: 0px;
width: 100%;
margin-left: 0%;
}
#menu2 {
position: absolute;
display: inline-block;
background: #7feaa8;
color: white;
left: 0px;
right: 0px;
top: 0px;
width: 100%;
margin-left: 100%;
}
Pay no attention to the colors or anything, this is just practice!
It's doing everything it's supposed to do EXCEPT for the fact that I get a scrollbar at the bottom of the page that allows me to scroll to the right and see the second div... which is a problem. Am I doing something fundamentally wrong, or do I just need to add something to get rid of that scrollbar?
Also, a little bit of uncertainty on the Javascript. How would I get it so that the margin-left for both divs changes at EXACTLY the same time? Even a slight delay will show up, right?
It may be easier to just link to a tutorial. I tried researching this, but I didn't know what to look up (forgot what they're called!).
EDIT
Ok, so I took Joshua Chavanne's suggestion and hid the overflow for the body, which worked. Then I did all this with the Javascript:
var menu1 = document.getElementById("menu1");
var menu2 = document.getElementById("menu2");
var switch1 = document.getElementById("switch1");
var switch2 = document.getElementById("switch2");
switch1.onclick = move;
switch2.onclick = move;
function move() {
if (menu1.style.marginLeft == 0) {
show2();
}
else {
show1();
}
}
function show2() {
if (menu1.style.marginLeft > -100) {
menu1.style.marginLeft = (menu1.style.marginLeft - 10) + "px";
requestAnimationFrame(show2);
}
}
When I click on switch1, menu1 moves over 10px, then stops moving. No idea why.
Check out free jssor carousel
It will do everything you are asking for and you don't have to write it yourself.
<head>
<title>Overlay test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#overlay {
position: absolute;
background-color: #ccffcc;
display: none;
height: 200px;
margin: 0 auto;
width: 200px;
}
</style>
<script type="text/javascript">
//<![CDATA[
function hide() {
document.getElementById("overlay").style.display = "none";
}
function show() {
document.getElementById("overlay").style.display = "block";
}
//]]>
</script>
so when the user clicks it runs show() which places the css box on top. However i want it to be centered in the browser. I've set the margin: 0 auto; which should be doing the trick shouldnt it?
I'm just trying to create an overlay function without using jquery because it seems to be incompatible with my schools cms templates.
Thanks
Margin: 0 auto won't work on position absolute elements, they exist in their own little world, outside of normal flow. So in order to pull this off, you need to do an extra step. The CSS dead centre technique will work here.
Try setting the top and left attributes on your overlay.
Use % to set top and left position. Set css attribute top:10%; Left 40%;