I have a little problem with prepend() because if I "copy" my div and if click on counter the count change in whole divs the same is with hover. Is this possible change number count and hover only in clicked or hovered div?
Thank you for help and time:)
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>
And javascript
$('.AddDiv').on('click', function() {
$('.Wrap').prepend($('<div class="container"><div class="count">My Counter</div><div class="background"></div><div class="hover"></div></div>'));
});
var count = 0;
$(".count").click(function() {
count++;
$(".count").html(+count);
});
$(".background").on("mouseover", function() {
$(".hover").fadeIn(500);
});
$(".hover").on("mouseout", function() {
$(".hover").fadeOut(200);
});
FIDDLE
Yes sure, use the current clicked element object $(this) :
$(this).html(+count);
Instead of :
$(".count").html(+count);
And use event delegation on() to attach click event to the new elements added dynamically to the DOM :
$("body").on('click',".count",function() {
count++;
$(this).html(+count);
});
To increment count separatelly for every div you should get the current count then add 1 to it, like :
$("body").on('click',".count",function() {
var count = parseInt( $(this).text() );
if( isNaN(count) ){
count = 1; //For the first click
}else{
count++;
}
$(this).text(count);
});
Hope this helps.
$('.AddDiv').on('click', function(){
$('.Wrap').prepend($('<div class="container"><div class="count">My Counter</div><div class="background"></div><div class="hover"></div></div>'));
});
$("body").on('click',".count",function() {
var count = parseInt( $(this).text() );
if( isNaN(count) ){
count = 1; //For the first click
}else{
count++;
}
$(this).text(count);
});
$(".background").on("mouseover", function () {
$(".hover").fadeIn(500);
});
$(".hover").on("mouseout", function () {
$(this).fadeOut(200);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Wrap">
<div class="container">
<div class="count"> Click Me
</div>
<div class="background">
</div>
<div class="hover">
</div>
</div>
</div>
<button class=AddDiv>AddDiv</button>
Here we are creating dynamic id for each prepend. And by sending that div id to the javascript function and using same count logic as #Zakaria Acharki used to maintain count value.
var divNumber = 1;
$('.AddDiv').on('click', function() {
$('.Wrap').prepend($('<div class="container"><div class="count" id="div'+divNumber+'" onclick="makeCount(this.id);">My Counter</div><div class="background"></div><div class="hover"></div></div>'));
divNumber++;
});
function makeCount(id){
var count = parseInt( $("#"+id).text());
if( isNaN(count) ){
count = 1; //For the first click
}else{
count++;
}
$("#"+id).text(count);
}
$(".background").on("mouseover", function() {
$(".hover").fadeIn(500);
});
$(".hover").on("mouseout", function() {
$(".hover").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;
}
.count
{
position:absolute;
width:100px;
height:100px;
position:absolute;
left:50%;
top:50%;
margin-left:-50px;
margin-top:-50px;
background-color:white;
text-align:center;
line-height:100px;
cursor:pointer;
}
.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="count" id="div0" onclick="makeCount(this.id);">My Counter</div>
<div class="background"></div>
<div class="hover"></div>
</div>
</div>
<button class=AddDiv>AddDiv</button>
Try .insertBefore() function:
check: https://jsfiddle.net/mpqtrjzx/
$( '<div class="container"><div class="count">My Counter</div><div class="background"></div><div class="hover"></div></div>' ).insertBefore( ".container:first" );
Related
$('.menu-colors_page > span').each(function () {
var arr_color = [];
arr_color.push($(this).attr('class'));
$(this).click(function (arr_color) {
console.log(arr_color);
});
});
I tried like this but it doesn't work
Q: How to call arr_color inside click?
q: How can i pass parameter from "each" function to "click" function?
Maybe like this:
var arr_color = []; /* global variable */
$(document).ready(function() {
$('.menu-colors_page > span').each(function() {
arr_color.push($(this).attr('class'));
});
$('.menu-colors_page > span').click(function() {
console.log(arr_color);
});
});
span{
padding:2px;
margin:1px;
color:white;
cursor:pointer;
}
.red{
background-color:red;
}
.green{
background-color:green;
}
.blue{
background-color:blue;
}
<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
<div class="menu-colors_page">
<span class="red">span blue</span>
<span class="green">span green</span>
<span class="blue">span blue</span>
</div>
I am trying an animation on the two divs on button click . Here is the demo i have created js fiddle. what i want is
when the user will click on the button the right div will slide to right (it will hide). and the width of left div will become 100%.
on second time when user will click the right div will visible from right to left slide and the width of left div will 50 %
I am trying this code .
my html is
<div class="col-md-12">
<div id="tags-left" class="col-md-6">
div left
</div>
</div>
<div id="tag-div" class="col-md-6">
div right
</div>
</div>
<div class="col-md-12">
<div class="btn-main">
<input id="show-tag" type="button" class="save-btn" value="Show Tag">
<input id="preview" type="button" class="save-btn" value="Preview">
</div>
my js is
$("#show-tag").click(function (e)
{
$( "#tag-div" ).toggle( "slow", function(element) {
//e.preventDefault();
if ($('#tag-div').is(":visible") ) {
$('#tags-left').css('width','50%');
} else {
$('#tags-left').css('width','100%');
}
});
});
$("#show-tag").click(function (e)
{
$( "#tag-div" ).toggle( "slow", function(element) {
//e.preventDefault();
if ($('#tag-div').is(":visible") ) {
$('#tags-left').css('width','50%');
} else {
$('#tags-left').css('width','100%');
}
});
});
.col-md-6 {
width:45%;
float:left;
background:red;
height:200px;
margin:3px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-md-12">
<div id="tags-left" class="col-md-6">
div left
</div>
</div>
<div id="tag-div" class="col-md-6">
div right
</div>
</div>
<div class="col-md-12">
<div class="btn-main">
<input id="show-tag" type="button" class="save-btn" value="Show Tag">
<input id="preview" type="button" class="save-btn" value="Preview">
</div>
This one is simple solution without doing much coding see the fiddle: https://jsfiddle.net/uzar3j4q/7/
JS
var action = 1;
$("#show-tag").click(function () {
if ( action == 1 ) {
$("#tag-div" ).animate({'width':'0%',});
$('#tags-left').animate({'width':'90%'});
action = 2;
} else {
$("#tag-div" ).animate({'width':'45%',});
$('#tags-left').animate({'width':'45%'});
action = 1;
}
});
CSS
.col-md-6 {
width:45%;
float:left;
background:red;
height:200px;
margin:3px;
overflow:hidden; /* This property is added just to hide overflowing content */
}
first of all .. put left and right div in same div and in css
CSS
.col-md-12 {
white-space: nowrap;
overflow: hidden;
height:200px;
}
and you can use animate() method in js
JS
$("#show-tag").click(function (e)
{
$( "#tag-div" ).toggle( "slow", function(element) {
//$('#tags-left').css('width','0%');
//e.preventDefault();
if ($('#tag-div').is(":visible") ) {
$('#tags-left').animate({'width':'45%'},500);
} else {
$('#tags-left').animate({'width':'100%'},500);
}
});
});
DEMO HERE
you can just play around that to get the exact action you need
Optimized #Nilesh Mahajan's answer.
Found a problem with it when clicking on the button continuously.
// Caching
var $tagsLeft = $('#tags-left'),
$tagDiv = $('#tag-div');
var tagLeftWidth,
tagDivWidth;
$("#show-tag").on('click', function () {
var $this = $(this);
$this.prop('disabled', true).addClass('disabled'); // Disable the button
tagLeftWidth = $tagDiv.width() ? '90%' : '45%';
tagDivWidth = $tagDiv.width() ? '0%' : '45%';
$tagDiv.animate({
'width': tagDivWidth
}, function() {
$this.prop('disabled', false).removeClass('disabled'); // Enabling button
});
$tagsLeft.animate({
'width': tagLeftWidth
});
});
Demo: https://jsfiddle.net/tusharj/uzar3j4q/11/
Try this html:
<div id="tag-left" class="col-md-6">div left</div>
<div id="tag-right" class="col-md-6">div right</div>
and this javascript:
$("#show-tag").click(function (e) {
if($("#tag-right").width() == 0) {
$("#tag-left").animate({
width: '0'
});
$("#tag-right").animate({
width: '90%'
});
} else {
$("#tag-left").animate({
width: '90%'
});
$("#tag-right").animate({
width: '0'
});
}
});
jsfiddle
Here is my code:
<html>
<head>
<style type="text/css">
#div1
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
width:100px;
height:100px;
background-color:#F00;
}
#div2
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
width:100px;
height:100px;
background-color:#000;
}
#div3
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
width:100px;
height:100px;
background-color:#ccc;
}
#div4
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
width:100px;
height:100px;
background-color:#999;
}
#links
{
position:absolute;
left:0px;
top:200px;
}
</style>
</head>
<body>
<div id="div1">Div 1</div>
<div id="div2">Div 2</div>
<div id="div3">Div 3</div>
<div id="div4">Div 4</div>
<div id="links">
<input type="button" value="Link1" onclick="resetAll(); up('div1');">
<input type="button" value="Link2" onclick="resetAll(); up('div2');">
<input type="button" value="Link3" onclick="resetAll(); up('div3');">
<input type="button" value="Link4" onclick="resetAll(); up('div4');">
<script>
function reset(id)
{
document.getElementById(id).style.zIndex = 1000;
}
function up(element)
{
element.style.zIndex = 1;
}
function resetAll()
{
for (var i = 1; i <= 4; i++)
{
reset('div' + i);
}
}
</script>
</div>
</body>
</html>
So that works, when you click Link 2 button to display div2, it overrides the zindex of div1 just fine, as I'd like.
However, when you click Link 1 (which is supposed to display div1), it doesn't go back to div1. I'd like whichever button I click to display the div it is linked to.
you should reset all your divs to their original state... then mark your selected. do..upgrade your html to this version:
<div id="div1">Div 1</div>
<div id="div2">Div 2</div>
<div id="div3">Div 3</div>
<div id="div4">Div 4</div>
<div id="links">
<input type="button" value="Link1" onclick="resetAll(); up('div1');">
<input type="button" value="Link2" onclick="resetAll(); up('div2');">
<input type="button" value="Link3" onclick="resetAll(); up('div3');">
<input type="button" value="Link4" onclick="resetAll(); up('div4');">
</div>
and add this JS functions:
function reset(id)
{
document.getElementById(id).style.zIndex = 1000;
}
function up(element)
{
element.style.zIndex = 1;
}
function resetAll()
{
for (var i = 1; i <= 4; i++)
{
reset('div' + i);
}
}
and here comes the fiddle: http://jsfiddle.net/ymzrocks/5604wmtc/
you need to set the first one back to 0
<script>
var shown;
function show(){
if(shown) shown.style.zIndex = 0;
shown = this;
shown.style.zIndex = 1;
}
</script>
then
<input type="button" value="Link1" onclick="show()">
<input type="button" value="Link2" onclick="show()">
<input type="button" value="Link3" onclick="show()">
<input type="button" value="Link4" onclick="show()">
it is the correct behavior because step by step you are giving z-index=1 to all divs. Id div4 is visible with z-index=1 and you execute document.getElementById('div1').style.zIndex='1' the correct behavior is show div4. You should give an higher z-index to div1 or a lower z-index to other divs
<div id="slider-wrapper">
<div id="slider">
<div class="sp" style="background: blue;">akjdfalfkdj</div>
<div class="sp" style="background: yellow;">akjdfautlfkdkjkhkj</div>
<div class="sp" style="background: green;" >akjdfalfkdiyukjkhkj</div>
<div class="sp" style="background: red;">akjdfalfkdkkljjkhkj</div>
</div>
</div>
<div id="nav"></div>
<div id="button-previous">prev</div>
<div id="button-next">next</div>
CSS
#slider-wrapper {width:500px; height:200px;}
#slider {width:500px; height:200px; position:relative;}
.sp {width:500px; height:200px; position:absolute;}
#nav {margin-top:20px; width:100%;}
#button-previous {float:left;}
#button-next {float:right;}
JQUERY
$(document).ready(function(){
$('.sp').first().addClass('active');
$('.sp').hide();
$('.active').show();
$('#button-next').click(function(){
$('.active').removeClass('active').addClass('oldActive');
if ( $('.oldActive').is(':last-child')) {
$('.sp').first().addClass('active');
}
else{
$('.oldActive').next().addClass('active');
}
$('.oldActive').removeClass('oldActive');
$('.sp').fadeOut();
$('.active').fadeIn();
});
$('#button-previous').click(function(){
$('.active').removeClass('active').addClass('oldActive');
if ( $('.oldActive').is(':first-child')) {
$('.sp').last().addClass('active');
}
else{
$('.oldActive').prev().addClass('active');
}
$('.oldActive').removeClass('oldActive');
$('.sp').fadeOut();
$('.active').fadeIn();
});
});
I have the above jquery slider all i need to have a timeout function which the slider slides automatically and as well i need it to slide according to the prev and next buttons. Thanks in advance
DEMO
To use the timeout function goes like this:
setInterval(function(){
//your function you want to timeout
},1000);
1000 milliseconds = 1 second
Try this
Use clearInterval(tId) to stop and run() to start again if you want to pause when next/prev is clicked
Live Demo
var tId;
function run() {
tId=setInterval(function() { $("#button-next").click()},1000);
}
$(function() {
$('.sp').first().addClass('active');
$('.sp').hide();
$('.active').show();
$sp = $(".sp");
$('.nav').click(function () {
var which = this.id.replace("button-", ""),
next = which == "next",
$oldActive = $('.active');
if (next) {
if ($oldActive.index()==$sp.length-1) {
$('.sp').first().addClass('active');
} else {
$oldActive.next().addClass('active');
}
} else {
if ($oldActive.index()==0) {
$('.sp').last().addClass('active');
} else {
$oldActive.prev().addClass('active');
}
}
$oldActive.removeClass('active');
$('.sp').fadeOut();
$('.active').fadeIn();
});
run();
});
I think you would want to use the jQuery.animate function. Something like this:
$(".active").animate({width:"100%"},750);
This assumes that the sliders have a default css property of width: 0%.
Edit: new fiddle http://jsfiddle.net/qnM3x/1/
I am new to javascript . Below is my html for drag and drop. revert not working properly. Please help me why its not working properly.
Revert works properly before drop but not return to original position
<!DOCTYPE html>
<html ng-app="first22">
<head>
<link rel="icon" type="image/png" href="globe/images/correct.png"/>
<link rel="stylesheet" type="text/css" href="globe/css/style.css"/>
<script type="text/javascript" src="globe/script/jquery.js"></script>
<script type="text/javascript" src="globe/script/jquery-ui.js"></script>
<title>
Html5 All in One
</title>
<style>
*{padding:0;margin:0}
#interactive
{
position:absolute;
width:895px;
height:695px;
margin:auto;
left:0;
right:0;
background:#f3f3f3;
}
.dragbg,.drop
{
position:absolute;
width:171px;
height:52px;
background:#c0c0c0;
font-size:20px;
border-radius:25px;
text-align:center;
}
.drag
{
width:160px;
height:40px;
background:#c2c2c2;
border:1px solid;
font-size:20px;
border-radius:25px;
text-align:center;
position:absolute;
margin-top:5px;
margin-left:5px;
line-height:40px;
cursor:pointer;
}
.drag:hover
{
background:#fff;
}
.drop1
{
width:160px;
height:40px;
background:#c2c2c2;
border:1px solid;
font-size:20px;
border-radius:25px;
text-align:center;
position:absolute;
top:5px;
left:5px;
line-height:40px;
cursor:pointer;
}
</style>
</head>
<body>
<div id="interactive">
<div style="position:absolute;left:0px;top:50px;width:100%;text-align:center;font-size:28px;font-weight:bold">Common Drag and Drop</div>
<div class="dragbg" style="left:120px;top:150px;">
<div class="drag" >Meter</div>
</div>
<div class="dragbg" style="left:120px;top:220px;">
<div class="drag">MilliMeter</div>
</div>
<div class="dragbg" style="left:120px;top:290px;">
<div class="drag">CentiMeter</div>
</div>
<div class="dragbg" style="left:120px;top:360px;">
<div class="drag">Gram</div>
</div>
<div class="dragbg" style="left:120px;top:430px;">
<div class="drag">MilliGram</div>
</div>
<div class="dragbg" style="left:120px;top:500px;">
<div class="drag">KiloGram</div>
</div>
<div class="drop" style="left:320px;top:150px;">
</div>
<div class="drop" style="left:320px;top:220px;">
</div>
<div class="drop" style="left:320px;top:290px;">
</div>
<div class="drop" style="left:320px;top:360px;">
</div>
<div class="drop" style="left:320px;top:430px;">
</div>
<div class="drop" style="left:320px;top:500px;">
</div>
</div>
</body>
<script>
$("document").ready(function()
{
$(".drag").draggable(
{
containment:"#interactive",
revert:function(event,ui)
{
$(this).data("uiDraggable").originalPosition=
{
left:0,
top:0
};
return !event;
},
zindex:1000,
drag:function(event,ui)
{
$(this).css("z-index",2000);
}
});
$(".drop").droppable(
{
drop:function(event,ui)
{
$(this).append(ui.draggable)
$(this).find(".drag").each(function()
{
$(this).css("position","absolute");
$(this).css({"top":"0px","left":"0px"});
});
}
});
})
</script>
</html>
You are appending the drag to its place holder which changes the parent of the drag object. So it changes it relation to the new container. You just have to move the position of the drag keeping it to its parent container. Also you have to position the div relative to its container.
$(".drop").droppable(
{
drop:function(event,ui)
{
var pos = $(this).offset();
var ppos = $(ui.draggable).parent().offset();
var left = pos.left - ppos.left;
var top = pos.top - ppos.top;
$(ui.draggable).css({"left" : left, "top": top})
$(this).find(".drag").each(function()
{
$(this).css("position","absolute");
$(this).css({"top":"0px","left":"0px"});
});
}
});
Your fiddle updated http://jsfiddle.net/XSXA6/18/
I think this behaviour is because you are appending the draggable in the droppable and hence changing the position coordinates. You don't need to do anything in the droppable initialisation and it will work.
Demo: http://jsfiddle.net/XSXA6/15/
JS:
$(document).ready(function () {
$(".drag").draggable({
containment: "#interactive",
revert: function (event, ui) {
$(this).data("uiDraggable").originalPosition = {
left: 0,
top: 0
};
return !event;
},
zindex: 1000,
drag: function (event, ui) {
$(this).css("z-index", 2000);
}
});
$(".drop").droppable({
drop: function (event, ui) {
console.log(ui.draggable, $(this));
var d = $(this)
$(ui.draggable).position({
my: "center",
at: "center",
of: d
});
}
});
});