Multiple div's onhover same functionality - javascript

Here I have six different div on hover blue color div should appear and by default hidden. I have written code for this but it works only for the first div I merge all div's in a single variable. Can anyone suggest to me what I'm missing here
var tcpTooltip = $('.tp-cont-tech, tp-cont-b, tp-cont-m, tp-cont-t, tp-cont-i, tp-cont-e');
var tcpTooltipDiv = $('.tpc-tooltip-tech, tpc-tooltip-b, tpc-tooltip-m, tpc-tooltip-t, tpc-tooltip-i, tpc-tooltip-e');
tcpTooltipDiv.hide();
$(tcpTooltip).each(function() {
$(tcpTooltip).hover(function() {
$(tcpTooltipDiv).show();
}, function() {
$(tcpTooltipDiv).hide();
});
});
/* Tooltip */
.tp-cont-tech,
.tp-cont-e,
.tp-cont-t,
.tp-cont-m,
.tp-cont-i,
.tp-cont-b {
position: relative;
width: 200px;
height: 200px;
background-color: red;
margin-bottom: 20px;
}
.tpc-tooltip-tech,
.tpc-tooltip-e,
.tpc-tooltip-t,
.tpc-tooltip-m,
.tpc-tooltip-i,
.tpc-tooltip-b {
position: absolute;
top: 2%;
left: 5%;
z-index: 10;
width: 100px;
height: 100px;
background-color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="tpc-info">
<div class="tp-cont-tech">
<div class="tpc-tooltip-tech"></div>
</div>
<div class="tp-cont-b">
<div class="tpc-tooltip-b"></div>
</div>
<div class="tp-cont-m">
<div class="tpc-tooltip-m"></div>
</div>
<div class="tp-cont-t">
<div class="tpc-tooltip-t"></div>
</div>
<div class="tp-cont-e">
<div class="tpc-tooltip-e"></div>
</div>
</div>


As suggested already, I'd go by using pure CSS and the :hover pseudo.
If you really want jQuery for some reason this would be a remake of your code.
Basically (beside adding common classes to your elements [see code below]) you need the $(this) reference of the currently hovered element:
var $tpCont = $('.tp-cont');
var $tcpTooltip = $('.tcp-tooltip');
$tcpTooltip.hide();
$tpCont.hover(function() {
$(this).find($tcpTooltip).toggle();
});
.tp-cont {
position: relative;
width: 200px;
height: 200px;
background-color: red;
margin-bottom: 20px;
}
.tcp-tooltip {
position: absolute;
top: 2%;
left: 5%;
z-index: 10;
width: 100px;
height: 100px;
background-color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="tpc-info">
<div class="tp-cont tp-cont-tech">
<div class="tcp-tooltip tpc-tooltip-tech"></div>
</div>
<div class="tp-cont tp-cont-b">
<div class="tcp-tooltip tpc-tooltip-b"></div>
</div>
<div class="tp-cont tp-cont-m">
<div class="tcp-tooltip tpc-tooltip-m"></div>
</div>
<div class="tp-cont tp-cont-t">
<div class="tcp-tooltip tpc-tooltip-t"></div>
</div>
<div class="tp-cont tp-cont-e">
<div class="tcp-tooltip tpc-tooltip-e"></div>
</div>
</div>


You can achieve this far more effectively with CSS. If you add some common classes to the tp-cont-X and tpc-tooltip-X elements, then you can use the :hover pseudo-selector, like this:
.tp-cont {
position: relative;
width: 200px;
height: 200px;
background-color: red;
margin-bottom: 20px;
}
.tpc-tooltip {
position: absolute;
top: 2%;
left: 5%;
z-index: 10;
width: 100px;
height: 100px;
background-color: blue;
display: none;
}
.tp-cont:hover .tpc-tooltip {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="tpc-info">
<div class="tp-cont tp-cont-tech">
<div class="tpc-tooltip tpc-tooltip-tech"></div>
</div>
<div class="tp-cont tp-cont-b">
<div class="tpc-tooltip tpc-tooltip-b"></div>
</div>
<div class="tp-cont tp-cont-m">
<div class="tpc-tooltip tpc-tooltip-m"></div>
</div>
<div class="tp-cont tp-cont-t">
<div class="tpc-tooltip tpc-tooltip-t"></div>
</div>
<div class="tp-cont tp-cont-e">
<div class="tpc-tooltip tpc-tooltip-e"></div>
</div>
</div>


Try using index inside hover.
var tcpTooltip = $('.tp-cont-tech, .tp-cont-b, .tp-cont-m, .tp-cont-t, .tp-cont-i, .tp-cont-e');
var tcpTooltipDiv = $('.tpc-tooltip-tech, .tpc-tooltip-b, .tpc-tooltip-m, .tpc-tooltip-t, .tpc-tooltip-i, .tpc-tooltip-e');
tcpTooltipDiv.hide();
$(tcpTooltip).each(function() {
$(tcpTooltip).hover(function(index, item) {
$(tcpTooltipDiv).eq($(this).index()).show();
}, function() {
$(tcpTooltipDiv).hide();
});
});
/* Tooltip */
.tp-cont-tech,
.tp-cont-e,
.tp-cont-t,
.tp-cont-m,
.tp-cont-i,
.tp-cont-b {
position: relative;
width: 200px;
height: 200px;
background-color: red;
margin-bottom: 20px;
}
.tpc-tooltip-tech,
.tpc-tooltip-e,
.tpc-tooltip-t,
.tpc-tooltip-m,
.tpc-tooltip-i,
.tpc-tooltip-b {
position: absolute;
top: 2%;
left: 5%;
z-index: 10;
width: 100px;
height: 100px;
background-color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="tpc-info">
<div class="tp-cont-tech">
<div class="tpc-tooltip-tech"></div>
</div>
<div class="tp-cont-b">
<div class="tpc-tooltip-b"></div>
</div>
<div class="tp-cont-m">
<div class="tpc-tooltip-m"></div>
</div>
<div class="tp-cont-t">
<div class="tpc-tooltip-t"></div>
</div>
<div class="tp-cont-e">
<div class="tpc-tooltip-e"></div>
</div>
</div>

Related

How to fix div position in html2canvas

i am trying to make a customized product, and the issue i am getting here is when i customize my product and try to save it or preview it my div position is not the same i set before! printArea is the div which i want as an image.
<style>
#printArea
{
z-index: 1;
height: 330px;
width: 330px;
border: 1px dashed black;
align-items: center;
position: relative;
left: 126;
top: 165;
margin: 20px;
padding: 10px;
overflow: hidden;
}
</style>
<div class="row">
<div class="col-md-2">
<input type="file" name="file">
</div>
<div class="col-md-8"></div>
<div class="col-md-2">
Preview
<a class="button btn btn-download" id="btn-Convert-Html2Image" href="#">Download</a>
</div>
</div>
<div class="row">
<div class="col-md-2">
</div>
<div class="col-md-8">
<div class="box">
<div id="printArea" class="print-area">
<div id="draggable4" class="ui-widget-content" style="width: 204px; height: 204px; overflow: hidden; z-index: 100; left: 69px; top: 69px;">
<div class="upload-image-preview">
</div>
</div>
</div>
<img src="<?php echo base_url(); ?>assets/user/img/customTshirt.jpg" class="" id="mirror" style="position: relative; width: 600px; height: 600px; left: 13px; top: -350px; "/>
</div>
</div>
<div class="col-md-2"></div>
</div>
</div>
<div id="previewImage">
</div>
<script type="text/javascript">
var element = $(".box"); // global variable
var getCanvas; // global variable
$("#btn-Preview-Image").on('click', function () {
html2canvas(element, {
onrendered: function (canvas) {
$("#previewImage").append(canvas);
getCanvas = canvas;
}
});
});
$("#btn-Convert-Html2Image").on('click', function () {
var imgageData = getCanvas.toDataURL("image/png");
// Now browser starts downloading it instead of just showing it
var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
$("#btn-Convert-Html2Image").attr("download", "your_pic_name.png").attr("href", newData);
});
</script>
</body>
</html>
What i want
http://i.imgur.com/Y8vMf35.png
What i get
http://i.imgur.com/wZt9eDF.png

Flex can be used to center elements:
var element = $(".box"); // global variable
var getCanvas; // global variable
$("#btn-Preview-Image").on('click', function () {
html2canvas(element, {
onrendered: function (canvas) {
$("#previewImage").append(canvas);
getCanvas = canvas;
}
});
});
$("#btn-Convert-Html2Image").on('click', function () {
var imgageData = getCanvas.toDataURL("image/png");
// Now browser starts downloading it instead of just showing it
var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
$("#btn-Convert-Html2Image").attr("download", "your_pic_name.png").attr("href", newData);
});
#printArea {
z-index: 1;
height: 330px;
width: 330px;
border: 1px dashed red;
padding: 10px;
overflow: hidden;
position: absolute;
}
.box{
display: inline-block;
}
.wrapper {
display: flex;
align-items: center;
justify-content: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-2">
<input type="file" name="file">
</div>
<div class="col-md-8"></div>
<div class="col-md-2">
Preview
<a class="button btn btn-download" id="btn-Convert-Html2Image" href="#">Download</a>
</div>
</div>
<div class="row">
<div class="col-md-2">
</div>
<div class="col-md-8">
<div class="box">
<div class="wrapper">
<div id="printArea" class="print-area">
<div id="draggable4" class="ui-widget-content"
style="width: 204px; height: 204px; overflow: hidden; z-index: 100; left: 69px; top: 69px;">
<div class="upload-image-preview">
</div>
</div>
</div>
<img src="https://via.placeholder.com/600" class="" id="mirror"
style="position: relative; width: 600px; height: 600px; left: 13px;"/>
</div>
</div>
</div>
<div class="col-md-2"></div>
</div>
</div>
<div id="previewImage">
</div>

var element = $(".box"); // global variable
var getCanvas; // global variable
$("#btn-Preview-Image").on('click', function () {
html2canvas(element, {
onrendered: function (canvas) {
$("#previewImage").append(canvas);
getCanvas = canvas;
}
});
});
$("#btn-Convert-Html2Image").on('click', function () {
var imgageData = getCanvas.toDataURL("image/png");
// Now browser starts downloading it instead of just showing it
var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
$("#btn-Convert-Html2Image").attr("download", "your_pic_name.png").attr("href", newData);
});
.box {
height: 730px;
width: 100%;
border: 1px dashed black;
align-items: center;
float: none;
margin-top: 20px;
padding: 10px;
position: relative;
}
#mirror{
position: absolute;
width: 600px;
height: 600px;
left: 0;
top: 0;
right: 0;
margin: auto;
}
#printArea {
z-index: 1;
height: 330px;
width: 330px;
align-items: center;
position: absolute;
left: 0;
top: 26%;
margin: auto;
padding: 10px;
overflow: hidden;
right: 7px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-2">
<input type="file" name="file">
</div>
<div class="col-md-8"></div>
<div class="col-md-2">
Preview
<a class="button btn btn-download" id="btn-Convert-Html2Image" href="#">Download</a>
</div>
</div>
<div class="row">
<div class="col-md-2">
</div>
<div class="col-md-8">
<div class="box">
<div id="printArea" class="print-area">
<div id="draggable4" class="ui-widget-content"
style="width: 204px; height: 204px; overflow: hidden; z-index: 100; left: 69px; top: 69px;">
<div class="upload-image-preview">
</div>
</div>
<img src="https://via.placeholder.com/600" class="" id="mirror"
style="position: relative; width: 600px; height: 600px; left: 13px;"/>
</div>
</div>
</div>
<div class="col-md-2"></div>
</div>
</div>
<div id="previewImage">
</div>

How to get the default size back for a div by toggle in JQuery?

I have two divs in my application that seperates the screen with the content and sidemenu.
<div class="splitter-left ">
<div class="close-left-btn">
<button class="btn btn-primary" id="toggle-menu">Click me</button>
</div>
<div class="container-fluid content-close">
<div class="row">
<div class="col-4">
<p>Home</p>
</div>
<div class="col-4">
<p>About</p>
</div>
<div class="col-4">
<p>Contact</p>
</div>
</div>
</div>
</div>
<div class="splitter-right">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<strong>Header options</strong>
</div>
</div>
</div>
</div>
And this is my styling for splitter-left and splitter-right
.splitter-left {
display: inline-block;
width: 25%;
max-width: 300px;
min-width: 250px;
background-color: #fff;
margin-top: 10px;
margin-left: -35px;
vertical-align: top;
}
.splitter-right {
display: inline-block;
width: 85%;
margin-top: 10px;
position: relative;
left: 50px;
min-height: 400px;
}
I also made a JQuery function to activate the button to hide and show the splitter-left
This is my function in JQuery
$("#toggle-menu").click(function () {
if ($(".content-close").toggle()) {
$(".splitter-left").toggleClass('sidemenu-close')
$(".splitter-right").css({ width: '100%' });
else {
$(".splitter-right").css({ width: '75%' });
}
});
And this is the styling for the method toggleClass for sidemenu-close
.sidemenu-close {
width: 0% !important;
min-width: 0% !important;
}
When I click on the button Click me the splitter-right class gets a width of 100% (this is working). When I click on the button again the splitter-right doesn't go back to the default size of 75%.
How can I get the default size back when I click on the button?

I have fixed it with the following solution:
$("#toggle-menu").click(function() {
$(".content-close").toggle();
if ($(".splitter-left").hasClass('sidemenu-close')) {
$(".splitter-left").removeClass('sidemenu-close')
$(".splitter-left").css({
width: '25%'
});
$(".splitter-right").css({
width: '85%'
});
} else {
$(".splitter-left").addClass('sidemenu-close');
$(".splitter-right").css({
width: '100%'
});
}
});

Stretch Div width to take Bootstrap Container width

I want the overlay div to take full container width (col-md-12). Now of course, it's only taking up col-md-4 width which is it's parent.
$(document).ready(function() {
$('button').click(function() {
$('#overlay').toggleClass('active');
// calcs bottom of button
var bottom = $(this).position().top + $(this).outerHeight(true);
$('#overlay').css({
'top': bottom + 'px',
});
});
$('#close').click(function() {
$('#overlay').removeClass('active');
});
});
#overlay {
z-index: 10;
margin-left: 15px;
position: absolute;
width: 100%;
background: #E5E5E5;
text-align: center;
min-height: 500px;
display: none;
left: 0;
}
#overlay.active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-md-4">
<button type="button" class="btn btn-link">ADD GAME</button>
<div id="overlay">
X
<h2>This is an overlay</h2>
</div>
</div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>

Set position: static; to .col-md-4 and position: relative; to .container
$(document).ready(function() {
$('button').click(function() {
$('#overlay').toggleClass('active');
// calcs bottom of button
var bottom = $(this).position().top + $(this).outerHeight(true);
$('#overlay').css({
'top': bottom + 'px',
});
});
$('#close').click(function() {
$('#overlay').removeClass('active');
});
});
#overlay {
z-index: 10;
margin-left: 15px;
position: absolute;
width: 100%;
background: #E5E5E5;
text-align: center;
min-height: 500px;
display: none;
left: 0;
}
#overlay.active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<style>
.container {
position: relative;
}
.col-md-4 {
position: static;
}
</style>
<div class=container>
<div class="row">
<div class="col-md-4">
<button type="button" class="btn btn-link">ADD GAME</button>
<div id="overlay">
X
<h2>This is an overlay</h2>
</div>
</div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
</div>

Try this I think this may work for you. Am not sure because your Q is not that much clear.I have removed margin-left: 15px as you have put left:0; at the bottom.
#overlay {
z-index: 10;
position: absolute;
background: #E5E5E5;
text-align: center;
min-height: 500px;
display: none;
left: 0;
right:0;/*Added right attribut to make width 100%*/
top: 0;/*Added top attribut to make your div attach to the top of the parent div*/
}
#overlay.active {
display: inline-block;
}
This will only work if the parent of the #overlay is positioned as relative(position: relative;) because the absolute position div always depend on its relative parent if there is none then it will align according to the HTML Page.

How about adding overlay as sibling to row
<div class="row">
<div class="col-md-4">
<button type="button" class="btn btn-link">ADD GAME</button>
</div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
<div id="overlay">
X
<h2>This is an overlay</h2>
</div>

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/

Categories