Sliding out when a div is clicked - javascript

I'm making a website and I want it to be just one index page. And when you land, there will be a couple rows like this and when you click a row, it will expand the information that's been hiding to the bottom so it looks like this.
Now I searched around and I found this and I essentially copied and pasted the thing onto a new file just to fool around with it but it didn't work. I added the html tags, and important the proper files and such, well my code looks like this.
//Index
<!DOCTYPE html>
<html>
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<link href="main.css" rel="stylesheet">
<script type="slide.js"></script>
<div class="container">
<div class="one">Click me to reveal new div</div>
<div class="two">Hey it worked!
<br>New Contenttt</div>
</div>
</html>
//main.css
.container {
overflow:hidden;
height: 60px;
}
.one {
position: relative;
top: 0;
background-color: #FFC300;
z-index: 1;
cursor:pointer;
}
.two {
position: relative;
top: -40px;
background-color: yellow;
z-index: -1;
-webkit-transition: top 1s;
-moz-transition: top 1s;
-o-transition: top 1s;
transition: top 1s;
}
/*.one:hover + .two {
top: 0px;
}*/
//slide.jsvar clicked=true;
$(".one").on('click', function(){
if(clicked)
{
clicked=false;
$(".two").css({"top": 0});
}
else
{
clicked=true;
$(".two").css({"top": "-40px"});
}
});
However it doesn't seem to work. What am I missing?

var clicked=true;
is commented out. Uncomment this.
Hope this helps.

I think you are looking for something like this
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function (event) {
$(".one").on('click', function(){
$(".two").slideToggle('fast')
});
});
</script>
<style>
.container {
overflow:hidden;
height: 60px;
}
.one {
background-color: #FFC300;
cursor:pointer;
}
.two {
display:none; /* delete this line if you want to show your yellow div by default*/
background-color: yellow;
}
</style>
</head>
<div class="container">
<div class="one">Click me to reveal new div</div>
<div class="two">Hey it worked!
<br>New Contenttt</div>
</div>
</html>

I am not sure how is your markup since in your previous answer you comment you have written
I just messed up when copy and pasting
Here is the complete mark up including JS and CSS
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<style>
.container {
overflow:hidden;
height: 60px;
}
.one {
position: relative;
top: 0;
background-color: #FFC300;
z-index: 1;
cursor:pointer;
}
.two {
position: relative;
top: -40px;
background-color: yellow;
z-index: -1;
-webkit-transition: top 1s;
-moz-transition: top 1s;
-o-transition: top 1s;
transition: top 1s;
}
</style>
</head>
<body>
<div class="container">
<div class="one">Click me to reveal new div</div>
<div class="two">Hey it worked!
<br>New Contenttt</div>
</div>
<script>
var clicked=true;
$(".one").on('click', function(){
if(clicked)
{
clicked=false;
$(".two").css({"top": 0});
}
else
{
clicked=true;
$(".two").css({"top": "-40px"});
}
});
</script>
</body>
</html>
NOTE: I include the body , & head tag. Also please update are you referring the css and js from external file.Currently I have referring CSS and JS from same page
WORKING DEMO

Change
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script> to <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> in index.html
and <script type="slide.js"></script> to <script src="slide.js"></script>
and embed your code in $(document).ready( function () { });
and Uncomment var clicked=true;
Final code will be
index.html
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="slide.js"></script>
<link href="main.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="one">Click me to reveal new div</div>
<div class="two">Hey it worked!
<br>New Contenttt</div>
</div>
</body>
slide.js
$(document).ready(function() {
var clicked = true;
$(".one").on('click', function() {
if (clicked)
{
clicked = false;
$(".two").css({"top": 0});
}
else
{
clicked = true;
$(".two").css({"top": "-40px"});
}
});
});
main.css
.container {
overflow:hidden;
height: 60px;
}
.one {
position: relative;
top: 0;
background-color: #FFC300;
z-index: 1;
cursor:pointer;
}
.two {
position: relative;
top: -40px;
background-color: yellow;
z-index: -1;
-webkit-transition: top 1s;
-moz-transition: top 1s;
-o-transition: top 1s;
transition: top 1s;
}
/*.one:hover + .two {
top: 0px;
}*/

Related

Moving background doesn't seem to be working

So i'm trying to make my background move endlessly from left to right repeatedly. I tried all sorts of things, but I don't know why the code doesn't work.
Here's my code
HTML:
<html>
<head>
<meta charset="utf-8" />
<script src="JS/javascript.js"></script>
</head>
<body>
<main>
</main>
<div id="section1"></div>
</body>
</html>
Javascript:
var i=null;
window.onload = function(){
var move = setInterval(move, 30);
move();
}
function move(){
i++;
document.getElementById("section1").style.backgroundPosition=i+"px";
}
Here are updated code for your requirement.
You only need pass move method to setInterval, don't need call move() after setInterval
var i=1;
function move(){
i++;
document.getElementById("section1").style.backgroundPosition=i+"px";
}
window.onload = function(){
var move1 = setInterval(move, 30);
//move();
}
#section1{
height: 200px;
background-image: url('https://cdn.pixabay.com/photo/2017/01/08/21/11/wood-1963988__340.jpg')
}
<html>
<head>
<meta charset="utf-8" />
<script src="JS/javascript.js"></script>
</head>
<body>
<main>
</main>
<div id="section1"></div>
</body>
</html>
You can use CSS animation to achieve this.
#section1 {
width: 200px;
height: 200px;
background: url('http://placehold.it/1000?text=test image');
background-size:cover;
animation-duration: 3s;
animation-name: scroll;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
#keyframes scroll {
0% {
background-position: 0 0;
}
100% {
background-position: 200px 0;
}
}
<div id="section1"></div>

Hide an element after clicking on it

Todo :
Hide an element smoothly after clicking on it , like in this page https://www.alphafx.co.uk/ , when you click on the letter A it fades away smoothly
Achieve this effect with just HTML,CSS,JavaScript ?
var foo = document.getElementById('foo');
document.getElementById('hide-button').onclick = function () {
foo.className = 'hidden';
};
document.getElementById('show-button').onclick = function () {
foo.className = '';
};
#foo {
transition-property: visibility, opacity;
transition-duration: 0s, 1s;
}
#foo.hidden {
opacity: 0;
visibility: hidden;
transition-property: opacity, visibility;
transition-duration: 1s, 0s;
transition-delay: 0s, 1s;
}
Text
<button id="hide-button">Hide</button>
<button id="show-button">Show</button>
You can achieve this using jQuery fadeOut check working fidle below:
Using jQuery
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>fadeOut demo</title>
<style>
.hide {
font-size: 150%;
cursor: pointer;
text-align: center;
}
h1 {
text-align: center;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div class="hide">
<h1>A</h1>
<p>
If you click on this paragraph you'll see it just fade away.
</p>
</div>
<script>
$(".hide").click(function() {
$(".hide").fadeOut("slow");
});
</script>
</body>
</html>
Using JavaScript
function fadeOutEffect() {
var fadeTarget = document.getElementById("hide");
var fadeEffect = setInterval(function() {
if (!fadeTarget.style.opacity) {
fadeTarget.style.opacity = 1;
}
if (fadeTarget.style.opacity > 0) {
fadeTarget.style.opacity -= 0.1;
} else {
clearInterval(fadeEffect);
}
}, 200);
}
document.getElementById("hide").addEventListener('click', fadeOutEffect);
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>fadeOut demo</title>
<style>
#hide {
font-size: 150%;
cursor: pointer;
text-align: center;
}
h1 {
text-align: center;
}
</style>
</head>
<body>
<div id="hide">
<h1>A</h1>
<p>
If you click on this paragraph you'll see it just fade away.
</p>
</div>
</body>
</html>
You can easily achieve this using jQuery fadeOut() effect.
Below is the w3scool reference:
https://www.w3schools.com/jquery/eff_fadeout.asp
Click on "try it yourself>" button and you can modify the code as per your requirement.
Here is another working example for you:
https://jsfiddle.net/kag4jqyh/
Please try this:
$(function() {
$('#spantext').on('click', function() {
// $(this).hide();
$(this).fadeOut("slow"); // if you want to hide it slow
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="spantext">this is a text</span>
Here's an answer in vanilla JavaScript (without using jQuery)
HTML
Text
<br />
<button id="hide-button" onclick="hideButton()">Hide</button>
<button id="show-button" onclick="showButton()">Show</button>
JavaScript
const hideButton = () => {
document.getElementById("foo").classList.add('hidden');
}
const showButton = () => {
document.getElementById("foo").classList.remove('hidden');
}
CSS
.foo {
transition-property: visibility, opacity;
transition-duration: 0s, 1s;
}
.foo.hidden {
opacity: 0;
visibility: hidden;
transition-property: opacity, visibility;
transition-duration: 1s, 0s;
transition-delay: 0s, 1s;
}
What you want is just an animation to hide the view.
You can use <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> for getting such beautiful effects. You can see the sample code below.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#box").animate({opacity: 0});
});
$("#btn2").click(function(){
$("#box").animate({opacity: 1});
});
});
</script>
</head>
<body>
<button id="btn1">Animate</button>
<button id="btn2">Reset</button>
<div id="box" style="background:#98bf21;height:100px;width:100px;margin:6px;"></div>
</body>
if you want to use JavaScript rather than using jQuery. then
Try this
/******define time-delay only in s(seconds)****/
var timeSlot = '.3s';
function hide(obj){
obj.style.visibility= 'hidden';
obj.style.opacity= 0.8;
obj.style.transition= 'visibility 0s linear'+timeSlot+', opacity '+timeSlot+' linear';
}
.div1 {
font-size: 1.2rem;
cursor: pointer;
text-align: center;
margin-top:-100px;
}
.logo {
font-size: 10rem;
}
<div class="div1" onclick="hide(this);">
<h1 class="logo">A</h1>
</div>

Make HTML element disappear with CSS animation

I want to know if there is a way to make an HTML element disappear with an animation of CSS. So when the element gets removed from the page by some script, an animation shall display before the element actually gets removed.
Is this possible in an easy way? Or do I need to set a timer to my script that starts the animation with a duration of X and removes the element after time X?
I would get fancy with keyframes
#keyframes myAnimation{
0%{
opacity: 1;
transform: rotateX(90deg);
}
50%{
opacity: 0.5;
transform: rotateX(0deg);
}
100%{
display: none;
opacity: 0;
transform: rotateX(90deg);
}
}
#myelement{
animation-name: myAnimation;
animation-duration: 2000ms;
animation-fill-mode: forwards;
}
If the script is actually removing the DOM element, I don't believe there's a way to fade it out. I think the timer is your only option.
I use jQuery to implement this.
//jQuery
$(document).ready(function() {
var target = $("#div");
$("#btn").click(function() {
removeElement(target);
});
});
function removeElement(target) {
target.animate({
opacity: "-=1"
}, 1000, function() {
target.remove();
});
}
div {
width: 100px;
height: 100px;
background-color: #000;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<div id="div"></div>
<input type="button" value="fadeout" id="btn">
</body>
</html>
Use transitions like this:
function waithide()
{
var obj = document.getElementById("thisone");
obj.style.opacity = '0';
window.setTimeout(
function removethis()
{
obj.style.display='none';
}, 300);
}
div
{
height:100px;
width :100px;
background:red;
display:block;
opacity:1;
transition : all .3s;
-wekit-transition : all .3s;
-moz-transition : all .3s;
}
<div id="thisone" onclick="waithide()"></div>
I think you would have to do it in two steps. first the animate. Then, after animate is done, remove the elem. See the function below. Perhaps it could be put in a jquery plugin?
<style>
#test{
background: red;
height: 100px;
width: 400px;
transition: height 1s;
}
#test.hide {
height: 0;
}
</style>
<div id="test"> </div>
<button>Hide the Div</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
<script>
$('button').click(function(){
removeWithAnimate('#test');
});
function removeWithAnimate(id){
$(id).addClass('hide');
setTimeout( function(){
$(id).remove()
},1000);;
}
</script>
$('button').click(function() {
removeWithAnimate('#test');
});
function removeWithAnimate(id) {
$(id).addClass('hide');
setTimeout(function() {
$(id).remove()
}, 1000);;
}
#test {
background: red;
height: 100px;
width: 400px;
transition: height 1s;
}
#test.hide {
height: 0;
}
<div id="test"> </div>
<button>Hide the Div</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
transition: .5s;
invisible:
opacity: 0;
visible:
opacity: 1;
transition will make it appear and disappear smoothly.

How to make a navigation which reveals on hover

I would like to create a navigation that reveals on hover however I am not sure how to go about doing it. I would like to do it how they have done it in the top left hand corner when you hover on the name: http://higz.ghosted.net/
I would like it to be just like the example and the menu which display to be a list so <ul> <li>
Here is an example related to what you are looking at- still there some issue you have to fix, but i have giving you the quick start.
final result -
http://jsbin.com/parok/4/edit?html,css,js,output
HTML -
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id='navigation'>
<div class='logo'></div>
<div class='menus'>
<ul>
<li><a href='#'>Home page</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Service</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</div>
</div>
</body>
</html>
CSS -
body {margin:0; padding: 0;}
#navigation {
width: 500px;
height: 100px;
background: wheat;
border-radius: 5px;
}
.logo {
width: 100px;
height: 100px;
background: red;
border-radius: 50px;
float:left;
margin-right: 20px;
font-size: 20px;
text-align:center;
color: white;
display: block;
}
.logo p {
margin-top: 30px;
}
.menus {
position: relative;
opacity: 0;
top: 40px;
}
.logo:hover {
cursor: pointer;
}
.menus a:link, .menus a:visited {color: darkgray; text-decoration: none; text-transform: uppercase;}
.menus ul {
list-style:none;
}
.menus ul li {
display: inline-block;
padding-right: 15px;
}
jQuery -
$(function(){
$('.logo').mouseover(function(){
//console.log('foo');
$('.menus').animate({
'opacity': 1,
'left': '20px'
}, 500);
}).mouseout(function(){
//console.log('bar');
$('.menus').animate({
'opacity': 0,
'left': '0px'
}, 500);
});
});
Use jquery and ajax if you want to do it Asynchronously. I prefer do it by calculating the navigation at run time using ajax provided they are not static pages. (depends on server side language you are using)
Otherwise just use jquery to do this.
With the hover event of jQuery you show the navigation and on just hide it :
$("#id").hover(function(){
$("#id").show();
});
$("#id").mouseleave/blur(function(){
$("#id").hide();
});
and do paste your code where you want to achieve it. Otherwise we can only put up theory here. We are not supposed to write entire code.
This is not a hard task to achieve..
Lets get started:
Step 1) Build a sample html content to be displayed on hover
<div class="toggle-display">
Your HTML
</div>
Step 2) Lets give it some css
.toggle-display {
opacity: 0.1; /*set to 0.0 to hide it completely */
width: 200px;
height: 50px;
border: 1px solid #333;
/* transitions */
-o-transition: all .3s linear;
-webkit-transition: all .3s linear;
-moz-transition: all .3s linear;
transition: all .3s linear;
}
.toggle-display:Hover {
opacity: 1.0;
}
3) Put it all together
<html>
<head>
<style>
.toggle-display {
opacity: 0.1; /*set to 0.0 to hide it completely */
width: 200px;
height: 50px;
border: 1px solid #333;
/* transitions */
-o-transition: all .3s linear;
-webkit-transition: all .3s linear;
-moz-transition: all .3s linear;
transition: all .3s linear;
}
.toggle-display:Hover {
opacity: 1.0;
}
</style>
</head>
<body>
<div class="toggle-display">
Your content
</div>
</body>
</html>
Here is a sample
Tried and works fine,
Hope this helped you (If so, mark this answer as ok please),
Best regards.
Alberto
Use Jquery:
$('.blog_title').on('mouseenter', function(){
$('ul').show();
});
In reality you want to animate and not just show(). It looks like the menu fades in and moves from the left.
Also you want to give your ul a class name otherwise this code will affect all the ul's in the HTML.
And you do the reverse on 'mouseleave'.

CSS transition not animating

Can't figure this out, need another pair of eyes. The footer is dispalyed properly at the bottom of the page. On click, the trace appears in the console. Not animating the transition in any browser. THANKS for looking!!
HTML
<link rel="stylesheet" href="stylesheets/appoverwrite.css" type="text/css" media="screen" />
<script type="text/javascript" src="scripts/appscripts.js"></script>
<div id="appfooter">....</div>
APPOVERWRITE.CSS
#appfooter {
position:fixed;
width: 100%;
bottom: -350px;
height: 400px;
clear:both;
font-size: 11px;
background: #000;
border-top: 1px dotted #d83800;
z-index: 1000;
transition: bottom 2s;
-moz-transition: bottom 2s;
-webkit-transition: bottom 2s;
-o-transition: bottom 2s;
}
#appfooter .transition {
bottom: 0px;
}
APPSCRIPT.JS
jQuery(document).ready(function($){
$appfooter = $('#appfooter');
show_footer();
});
function is_touch_device() {
return !! ('ontouchstart' in window);
}
function show_footer() {
var open = false;
$appfooter.click(function() {
console.log("show_footer");
if (open == false) {
$appfooter.addClass("transition");
open = true;
} else {
$appfooter.removeClass("transition");
open = false;
}
});
}
Your problem is simple ;). Assuming that you want to show the footer, #appfooter .transition applies to elements which have the transition style that are descendants of the appfooter element. Use #appfooter.transition, or simply .transition instead. (I'm sure you must have just missed this by mistake.)
As a bonus here is some simplified JS for you:
var appfooter = document.getElementById("appfooter");
appfooter.onclick = function () {
appfooter.classList.toggle("transition");
}
See http://jsfiddle.net/MD8HL/

Categories

Resources