Fade out on click isn't working - javascript

When I click on the "open" button,it fade out but "navigazione" div doesn't fade in. But If I try to put display: block; on the "navigazione ID" I can see the script working. Obviously I need that the "navigazione id" start with display none. where's the problem?? thank you in advance for your help!
JS
<script>
$(document).ready(function(e) {
$("#close-icon").on('click', function() {
$("#menu-butt").fadeIn();
$("#navigazione").fadeOut();
});
$("#menu-butt").on('click', function() {
$("#menu-butt").fadeOut();
$("#navigazione").fadeIn();
});
});
</script>
HTML
<div id="navigazione"> <div> <div id="button"> ciao </div> </div>
<div class="row menu-butt"><a href="#" id="menu-butt">open<a></div>
<div id="close-icon"><a href="#" id="close-icon">close<a></div>
CSS
#navigazione { height: 100vh;
width:100%;
position: fixed ;
top: 0px;
left: 0px;
background-color: rgba(28,82,23,0.95);
z-index:400;
display: none;
}
#close-icon{ position: fixed;
height: cover;
top: 20px;
right: 30px !important;
z-index: 450 ;
display: none;
}

Is this you are looking for -
$(document).ready(function(e) {
$("#close-icon").on('click', function() {
$("#menu-butt").fadeIn();
$("#navigazione").fadeOut();
});
$("#menu-butt").on('click', function() {
$("#menu-butt").fadeOut();
$("#navigazione").fadeIn();
});
});
#navigazione { height: 100vh;
width:100%;
position: fixed ;
top: 0px;
left: 0px;
background-color: rgba(28,82,23,0.95);
z-index:400;
display: none;
}
#close-icon{ position: fixed;
height: cover;
top: 20px;
right: 30px !important;
z-index: 450 ;
}
close-icon {
color:#000;
}
.menu-butt {
color:#000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navigazione"> <div id="button"> ciao </div> </div>
<div class="row menu-butt">open</div>
<div id="close-icon">close</div>

Related

How can I add text to a text area at the bottom right of the text area?

I want to show the user how many allowable characters they have left to type, and I would like to place this within the text area, at the bottom right, after a new line; refreshing it after the textarea has changed in anyway. I just need help on placing it in said position.
function countChar(val){
var len = val.value.length;
if (len >= 50) {
val.value = val.value.substring(0, 50);
} else {
$('#charNum').text(50 - len);
}
};
.main{
position: relative;
display: inline-block;
}
.main textarea{
height: 100px;
width: 100px;
resize: none;
}
.main span{
color: coral;
position: absolute;
bottom: 5px;
right: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<textarea class="textareatest" onkeyup="countChar(this);"></textarea>
<span id="charNum">50</span>
</div>
You can do someting like this:
<div class="form-block">
<textarea></textarea>
<div class="label"></div>
</div>
And in CSS:
.form-block {
position: relative;
}
.label {
bottom: 5px;
position: absolute;
right: 5px;
}
It can be achieved with something like this.
function count(){
document.getElementById('textarea').onkeyup = function () {
document.getElementById('count').innerHTML = this.value.length;
};
}
.main{
position: relative;
display: inline-block;
}
.main textarea{
height: 100px;
width: 200px;
resize: none;
}
.main span{
color: coral;
position: absolute;
bottom: 5px;
right: 5px;
}
<div class="main">
<textarea id="textarea" onclick="count()"></textarea>
<span id="count">0</span>
</div>
Made This using bootstrap and jquery.
<div style="margin-top:45px; margin-left:45px">
<form>
<div class='row'>
<div class='col-sm-3'>
<div class='textCountContianer'>
<label>Some Text</label>
<div class="count">0/250</div>
<textarea class='form-control' type="text" maxlength="250"></textarea>
</div>
</div>
</div>
</form>
</div>
CSS
.count{
position: absolute;
bottom: 1px;
right: 10px;
color:gray
}
.textCountContianer{
position: relative;
}
JQUERY
$('textarea').keyup(function(e) {
var textlen = $(this).attr('maxlength') - $(this).val().length;
$(this).parent().find('.count').html('<span>'+$(this).val().length+'/'+$(this).attr('maxlength')+'</span>');
});
Demo
https://codepen.io/badevellis/pen/mdwWXLq

Hover in prepend() function

HTML:
<div class="Wrap">
<div class="container">
<div class="count">My Counter</div>
<div class="background"></div>
<div class="hover"></div>
</div>
</div>
<button class="AddDiv">AddDiv</button>
jQuery:
$('.AddDiv').on('click', function(){
$('.Wrap').prepend($('<div class="container"><div class="background"></div><div class="hover"></div></div>'));
});
$(".background").on("mouseover", function () {
$(".hover").fadeIn(500);
});
$(".hover").on("mouseout", function () {
$(".hover").fadeOut(200);
});
https://jsfiddle.net/mpd075s8/5/
Hello, I have problem with hover, look at the jsfiddle and click on button AddDiv and when hover on the green square hovered are all divs, but I would like that every div will be hovered separately. And hover doesn't work in new divs
Two things
You need to use delegated event for dynamic element
Use this for the reference of current element.
Try like following.
$('.AddDiv').on('click', function() {
$('.Wrap').prepend($('<div class="container"><div class="background"></div><div class="hover"></div></div>'));
});
$(".Wrap").on("mouseover", ".background", function () {
$(this).next(".hover").fadeIn(500);
});
$(".Wrap").on("mouseout", ".hover", function () {
$(this).fadeOut(200);
});
.Wrap {
width: 650px;
height: 800px;
}
.container {
position: relative;
top: 5px;
left: 5px;
width: 200px;
height: 200px;
background-color: red;
float: left;
margin-left: 5px;
margin-top: 5px;
}
.AddDiv {
position: absolute;
top: 0px;
}
.background {
width: 20px;
height: 20px;
background-color: green;
position: absolute;
left: 170px;
top: 10px;
}
.hover {
width: 200px;
height: 200px;
background-color: rgba(255, 255, 255, 0.8);
position: absolute;
z-index: 1001;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Wrap">
<div class="container">
<div class="background">
</div>
<div class="hover">
</div>
</div>
</div>
<button class=AddDiv>AddDiv</button>
You can use $(this) jquery function
$("body").on("mouseover",".background", function () {
$(this).siblings('.hover').fadeIn(500);
});
$("body").on("mouseout",".hover", function () {
$(this).fadeOut(200);
});
https://jsfiddle.net/mpd075s8/7/

How to make a overlay fit in another image

I currently have working system where you check the checkboxes it overlays the image however, the problem I am having is getting the image postioned inside the computer screen so it's not on the very edge. Cany Anyone help with this?
<html><head>
<style>
.overlay {
display: none;
position: absolute;
}
.right {
position: absolute;
right: 0px;
width: 300px;
border:3px solid #8AC007;
padding: 10px;
}
#map {
position: relative;
right: -780px;
width: 452px;
height: 344px;
background: url(BLANK-COMPUTER-SCREEN.png);
}
#station_A { top: 5px; left: 85px }
#station_B { top: 150px; left: 180px }
.hover { color: green }
</style>
<div id="map" >
<span id="station_A" class="overlay"><img style="background:url(/BLANK-COMPUTER-SCREEN.PNG)" src="/tn_WhiskersPrinceworkup.png" /></span>
<span id="station_B" class="overlay">Highlight image here.</span>
</div>
<p>
<h2>Choose a Shirt</h2>
<form>
<input type="checkbox" name="image" value="station_A">Station Alfa<br>
<input type="checkbox" name="image" value="station_B">Station Beta
<input type="checkbox" name="image" value="bandanna" id="checkbox1">Bandanna
</form>
</p>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("input[type='checkbox']").change(function () {
var state = $(this).val();
$("#" + state).toggleClass("overlay");
});
$('#checkbox1').change(function () {
if (this.checked) $('#map').fadeIn('slow');
else $('#map').fadeOut('slow');
});
});
</script>
Fiddle is here.
you need to set the position:absolute to your #station_A and #station_b instead of .overlay, because you use .overlay to toggle in jQuery, so it will loose the property.
here is a snippet:
$(document).ready(function() {
$("input[type='checkbox']").change(function() {
var state = $(this).val();
$("#" + state).toggleClass("overlay");
});
$('#checkbox1').change(function() {
if (this.checked) $('#map').fadeIn('slow');
else $('#map').fadeOut('slow');
});
});
.overlay {
display: none;
}
.right {
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #8AC007;
padding: 10px;
}
#map {
position: relative;
/*right: -780px; removed for demo purposes */
width: 452px;
height: 344px;
background: url(//preview.jesybyqcev4e7b9xn83mzparyiafw29nwvpl11qsrsmunmi.box.codeanywhere.com/BLANK-COMPUTER-SCREEN.png) no-repeat;
}
#station_A {
top: 8%; /* whatever you like */
left: 5%; /* whatever you like */
position: absolute;
}
#station_B {
top: 45%; /* whatever you like */
left: 15%; /* whatever you like */
position: absolute
}
.hover {
color: green
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="map">
<span id="station_A" class="overlay"><img style="background:url(//preview.jesybyqcev4e7b9xn83mzparyiafw29nwvpl11qsrsmunmi.box.codeanywhere.com/BLANK-COMPUTER-SCREEN.png)" src="//lorempixel.com/270/240" /></span>
<span id="station_B" class="overlay">Highlight image here.</span>
</div>
<p>
<h2>Choose a Shirt</h2>
<form>
<input type="checkbox" name="image" value="station_A">Station Alfa
<br>
<input type="checkbox" name="image" value="station_B">Station Beta
<input type="checkbox" name="image" value="bandanna" id="checkbox1" />Bandanna
</form>
</p>
The issue was due to a z-index problem I moved the image to the front and the button works fine now after this css change.
#VneckTshirtImage
{
left: 138px;
top: 457px;
position: absolute;
width: 118px;
height: 174px;
z-index:28;
}

jQuery/Javascript - Fade in div onclick fade out another doesn't work

I want to pop up a menu on click of a div and I got it all working in this Fiddle: http://jsfiddle.net/EhtrR/825/ but I cant manage to make it work on my code.
HTML:
<div id="clickOne" class="clickDesign">
<h2 class="fs20 nobold">Leafy Plants</h2>
</div>
<div id="clickTwo" class="clickDesign">
<h2 class="fs20 nobold">Juicy Plants</h2>
</div>
</div>
<div id="leafyPlants">
Leafy Test
</div>
<div id="juicyPlants">
Juicy Test
</div>
CSS:
#leafyPlants{
display:none;
position:absolute;
top:50px;
}
#juicyPlants{
display:none;
position:absolute;
top:50px;
}
jQuery:
$("#clickOne").on('click', function() {
$("#leafyPlants").fadeIn();
$("#juicyPlants").fadeOut();
});
$("#clickTwo").on('click', function() {
$("#leafyPlants").fadeOut();
$("#juicyPlants").fadeIn();
});
It doesn't show anything when I put it my code.
Add this css
<style>
img {
float: left;
display: block;
height: 40px;
width: 40px;
cursor: pointer;
}
#img1 {
background: #b00;
}
#img2 {
background: #c00;
}
#div1 {
display: none;
position: absolute;
top: 50px;
width: 200px;
background: #077;
left: 10px;
}
#div2 {
display: none;
position: absolute;
top: 50px;
width: 200px;
background: #0b0;
left: 10px;
}
br {
clear: both;
}
</style>
This js codes
<script src="http://code.jquery.com/jquery-1.11.0.js"></script>
<script>
$(document).ready(function(e) {
$("#img1").on('click', function() {
$("#div1").fadeIn();
$("#div2").fadeOut();
});
$("#img2").on('click', function() {
$("#div1").fadeOut();
$("#div2").fadeIn();
});
});
</script>
And you HTML
<img id="img1"/> <img id="img2"/> <br/>
<div id="div1">1</div>
<div id="div2">2</div>
It should work. Most probably you did not included jQuery library. I added it.
<script src="http://code.jquery.com/jquery-1.11.0.js"></script>
Using it should solve your porblem probably.

change image in a div with any effect like fadein when mouse hovered on another div

The below shown is the format of my html code. In the header div i have a image. Each box(box1, box2, box3) inside the contain div has link inside like(software development(box1), Graphic Designing(box2), and Technical Training(box3). These links when clicked will take me to separate pages which has their own header images. So i have 3 header image for each box and a default header image in the home page.In the home page when ever I hover my mouse in the box1 div the header image should change to the box1 header image with an effect like fadeIn and return my default image on mouse out. Same for box2 and box3. Please help me with doing this with CSS or JS or jQuery. Thank You
<body>
<div class="wrapper">
<div class="out">
<div class="in">
<div id="header"></div>
<div class="contain">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</div>
</div>
</div>
</body>
css:
.wrapper{
width: 100%
height: auto;
margin: 0px;
}
.out{
margin: auto;
width: 1000px;
height: 730px;
border-top: 5px solid #333333;
}
.in{
width: 900px;
height: 640px;
margin: auto;
margin-top: 25px;
}
#header{
background:url(../img/Untitled-1.jpg);
height: 175px;
width: 900px;
margin: 0px;
}
.contain{
margin: 0px;
width: 900px;
height: 428px;
}
.box1{
height: 360px;
width: 295px;
float: left;
margin: 67px 0px 0px 0px;
position: absolute;
background-color: #e6e7e9;
border-bottom: 4px solid #735d8c;
}
.box2{
height: 360px;
width: 295px;
float: left;
margin: 67px 0px 0px 302px;
position: absolute;
background-color: #e6e7e9;
border-bottom: 4px solid #735d8c;
}
.box3{
height: 360px;
width: 295px;
float: left;
margin: 67px 0px 0px 602px;
position: absolute;
background-color: #e6e7e9;
border-bottom: 4px solid #735d8c;
}
I have a made an BIN
I am placing same image for all the 3 divs like
$('#content,#content2,#content3').mouseover(function(){
$('#header').css('background','url(http://www.google.com/mobile/android/images/android.jpg)')
});
You change with your respective images like
$('#content').mouseover(function(){
$('#header').css('background','url(http://www.google.com/mobile/android/images/android.jpg)')
});
$('#content2').mouseover(function(){
$('#header').css('background','url(http://www.google.com/mobile/android/images/android.jpg)')
});....
jsBin demo
jQuery:
var currPage = 0; // PLAY HERE: set here current page (0 = home)
var $header = $('#header');
var $headerImg = $header.find('img');
$headerImg.eq( currPage ).show().addClass('currentImg');
// clone images to boxes:
var c = 0;
$('.box').each(function( i ){
$(this).prepend( $headerImg.eq(i==currPage? (i+1+c++) : c+i).clone() );
});
$('.box img[class^=headImg]').on('mouseenter mouseleave', function( e ){
var opacity = e.type=='mouseenter' ? 1 : 0 ;
var myClass = $(this).prop('class'); // get class
var $mainImg = $header.find('img.'+myClass);
$headerImg.hide();
$mainImg.stop().fadeTo(300, opacity);
$('.currentImg').stop().fadeTo(600, !opacity);
});
HTML:
<div class="wrapper">
<div class="out">
<div class="in">
<div id="header">
<img class="headImg1" src="home.jpg" alt="" />
<img class="headImg2" src="ONE.jpg" alt="" />
<img class="headImg3" src="TWO.jpg" alt="" />
<img class="headImg4" src="THREE.jpg" alt="" />
</div>
<div class="contain">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
</div>
</div>
</div>
MODIFIED CSS PART:
/*ADDED*/
#header img{
position:absolute;
display:none;
}
.contain{
margin: 0px;
width: 900px;
height: 428px;
}
.box{ /* CHANGED */
height: 360px;
width: 294px;
float: left;
margin: 67px 3px 0px;
position: relative;
background-color: #e6e7e9;
border-bottom: 4px solid #735d8c;
}
/* ADDED */
.box img{
width:100%;
}
See this : http://jsfiddle.net/xTjQT/2/
$('a').mouseover(function() {
var src = $(this).attr('alt');
alert(src);
$('#header img').stop().fadeOut(100, function() {
$(this).attr('src', src);
$(this).fadeIn(100);
});
});
$('a').mouseout(function() {
$('#header img').stop().fadeOut(200, function() {
$(this).attr('src', 'http://jsfiddle.net/img/logo.png');
$(this).fadeIn(100);
});
});

Categories