I'm trying to implement a very simple vertical slide down panel in Wordpress, I've tried jbar (http://tympanus.net/codrops/2009/10/29/jbar-a-jquery-notification-plugin/) and an easy JS method I found at http://jsfiddle.net/ahr3U/
But I still cannot get this implemented, I've tried inserting the below code in the footer.php right before it's close, and within the header.php and still nothing appears.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
<script>
$(document).ready(function(){
$("#notification").addClass("visible");
});
</script>
And CSS:
#notification {
background-color: #F00;
color: #FFF;
height: 25px;
position: absolute;
top: -25px;
width: 100%;
transition: top 0.5s;
-moz-transition: top 0.5s;
-webkit-transition: top 0.5s;
-o-transition: top 0.5s;
}
#notification.visible {
top: 0px;
}
The HTML CTA via the div, I've tried calling with the <head> and <body>
<div id="notification">Page load complete...</div>
Try putting the script code in the and make sure you close the first script tag where you include the jquery library
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
Related
I tried to resize a svg (which i did put into the div). I tried out:
document.getElementById('pload').setAttribute("height", "15%");
document.getElementById('pload').css("height", "15%");
document.getElementById('pload').attr("height", "15%");
document.getElementById('pload').style.height = "15%";
I always get "Cannot read property 'style/ css/ attr/ setAttribute' of null.". I can interact with document.getElementById('pload') but can't change any style properties. Everything should already be loaded (see JS: EventListener). Else there are just some timers in the function, nothing should interfere with the svg/div (i just change some style properties in the svg with jquery, no id's or var's are shared. Can interact with svg id's just fine, "EventListener" "load" also works fine). I have no idea anymore what this problem could be.
HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div id="pload">
//svg (#pagepreload) here
</div>
</body>
</html>
CSS:
#pagepreload *{
visibility: hidden;
}
#pagepreload #mappin, #pagepreload #ring {
visibility: visible;
}
#pagepreload{
position: absolute;
padding: 0;
border: 0;
margin: 0;
height: 100%;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
}
#pload{
padding: 0;
border: 0;
margin: 0;
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
height: 30%;
transition: top 1s ease-in-out, left 1s ease-in-out, height 1s ease-in-out, transform 1s ease-in-out;
}
JS:
window.addEventListener("load", afterload(), false);
function afterload(){
document.getElementById('pload').style.height = "15%";
//timers here (accessing svg content)
};
Thanks for your time and effort in advance.
Your script loaded before dom parse.
Use defer to solve this problem.
<script src="script.js" defer></script>
Or use your script link before end of body tag.
You are calling the afterload method when you are attaching it to the load event.
Do this instead:
window.addEventListener("load", afterload, false);
function afterload(){
document.getElementById('pload').style.height = "15%";
//timers here (accessing svg content)
};
I'm working on a website and I thought it would be cool to have the navbar only show when you move your mouse to the top of the screen. Is that even possible? because I cant find any tutorials on it. Anyway, is there also a way for it to not just appear, but more slide down from the top? Kind of like the windows taskbar does only upside down. Thanks!
This is the site if anyone wants to see the navbar right now: https://www.oakparknerds.tk/
There are a few approaches that could be taken to achieve this. The easiest is to just use CSS to animate the margin-top of the nav bar when hovered. You can set the nav bar to have no background color, then on hover change the color to make it appear.
Example with nav bar ID of #slidingBox:
#slidingBox {
width: 100%;
height: 60px;
background-color: none;
overflow-y: scroll;
margin-left: 0px;
margin-top: -50px;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
#slidingBox:hover {
margin-top: 0px;
background-color: #d9dada;
}
Here is a fiddle
Here is a way to do this with jquery and css. I changed the background color to orange so you can see it in action.
<html lang="en">
<head>
<meta charset="utf-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div id="nav_container" style="border:1px solid black;width:100%;height:300px;">
<nav id="my_nav" style="display:none;width:100%; height:200px;background-color:orange;">
Links
</nav>
</div>
<script>
$(document).ready(function(){
$("#nav_container").mouseover(function(){
$("#my_nav").slideDown(3000);
});
$("#nav_container").mouseout(function(){
$("#my_nav").fadeOut();
});
});
</script>
</body>
</html>
Have a DNN/Evoq skin based off of this: https://startbootstrap.com/template-overviews/simple-sidebar/
Prior to DNN/Evoq 9, the control bar was at the top; no problems. Now the persona bar is on the left and it causes issues when logged in. The sidebar doesn't move since it's position is set to fixed.
So I tried adding some JS code to add a class to this sidebar to move the item left an additional 80px; this isn't working.
Any ideas? Thanks..
#sidebar-wrapper {
z-index: 1000;
position: fixed;
left: 300px;
width: 0;
height: 100%;
margin-left: -300px;
overflow-y: auto;
background: #000;
background: #415A8A;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
border-right: 2px solid #c88d0c;
}
#sidebar-wrapper.sideadmin {
left: 380px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// When persona bar is active, move page right 80px
$(function () {
if ($('form').hasClass('personalBarContainer')) $('#sidebar-wrapper').addClass('sideadmin');
});
});
</script>
<html>
<body id="Body" style="margin-left: 80px;">
<form method="post" action="/" onsubmit="javascript:return WebForm_OnSubmit();" id="Form" enctype="multipart/form-data">
<div id="ctl15_PersonaBarPanel" class="personalBarContainer">
.....
</div>
<div id="sidebar-wrapper" class="mm-wrapper">
.....
</div>
</form>
</body>
</html>
I think your problem lies in the fact that the PersonaBar is loaded in an Iframe. With the code below you can manipulate that Iframe. It adds an extra class to that Iframe and moves it 80px to the right. It also sets the rest of the page back to the left side of the browser. Maybe this will help you get started.
<style>
.sidebar-wrapper {
border: 2px solid red;
position: absolute;
left: 80px !important;
}
.extraBodyClass {
left: 0px !important;
margin-left: 0px !important;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$("#personaBar-iframe").addClass('sidebar-wrapper');
$("body").addClass('extraBodyClass');
});
</script>
I want to slide a menu bar from the left and at the same time slide the page to the right using CSS and jquery. I can do the sliding no problem but what is happening is the body slides left, then once that is complete the menu slides out
JS
$('body').toggleClass('slide-left', '');
$('.mid-side-menu').toggleClass('slide-out', '');
CSS
.slide-left {
position: fixed;
right: 300px;
transition: right 0.5s;
}
.slide-out {
transition: right 0.5s;
right: 0px;
}
How do I run the two commands at the same time?
I don't think you can accomplish what you want with your current implementation. You would need to add the same class to both items, but have the class act differently based on what it is applied to.
For example:
jQuery
$('.mid-side-menu, body').toggleClass('slide-out', '');
CSS
body.slide-out {
position: fixed;
right: 300px;
transition: right 0.5s;
}
.mid-side-menu.slide-out {
transition: right 0.5s;
right: 0px;
}
hi i would like to create some animations using javascript when i thought of something which didn't work (i am a beginner in js)
so in simple i have a box at the top of my page and i want to change its css properties on pageload like width , margin -top margin -bottom and etc
here is my code -
<html>
<head>
<style>
#div{
backgroud: #ecb4df;
width: 200px;
height: 50px;
}
</style>
<script>
function codeAddress() {
/* the code here */
}
window.onload = codeAddress;
</script>
</head>
<body>
<div id="div"></div>
</body>
</html>
moreover is this way correct and workable or is there any other way of tackling my problem , if yes please tell that too
I can strongly recommend you to look at CSS animations, they perform much better and are easier to maintain.
In JavaScript all you need to do is add or remove a class.
<style>
.my-div {
-webkit-transition-property: top, left;
-moz-transition-property: top, left;
-o-transition-property: top, left;
transition-property: top, left;
-webkit-transition: 2s ease-in-out;
-moz-transition: 2s ease-in-out;
-o-transition: 2s ease-in-out;
transition: 2s ease-in-out;
position: absolute;
top: 200px;
left: 200px;
}
.initial {
top: 0px;
left: 0px;
}
</style>
<div id="mydiv" class="my-div initial">Ipsum Lorem</div>
<script>
setTimeout(function () {
document.getElementById("mydiv").className = "my-div"; // remove "initial" to trigger animation
});
</script>
http://jsfiddle.net/srTnE/1/