Jquery - Get div number from a list by hovering - javascript

How can a get the number by hovering mouse over the div?
HTML
<div id="log"></div>
<div id="myList">
<div class="divHV">One </div>
<div class="divHV">Two</div>
<div class="divHV">3 </div>
<div class="divHV">Blub </div>
<div class="divHV">Peter</div>
<div class="divHV">6 House</div>
<div class="divHV">last one is 7</div>
</div>
JS
$(document).ready(function() {
$('.divHV').hover(function()
{
XX = '';
$('#log').html('This is the div number '+XX+' <br />');
}, function ()
{
$('#log').html('');
});
});
Working exmaple
http://jsfiddle.net/9R4aC/2/

XX = $(this).index();
but that will start from 0 you can add +1 if you want..
http://jsfiddle.net/9R4aC/2/

$(document).ready(function() {
$('.divHV').each(function(i) {
$(this).hover(function() {
XX = i;
$('#log').html('This is the div number ' + XX + ' <br />');
}, function() {
$('#log').html('');
});
});
});
http://jsfiddle.net/9R4aC/3/

Related

i want to run this code while loading the page

how can I assign the values automatically when the page load without having to invoke the hover or click any event actions. The colors will be changed based on user inputs or random color that will be generated automatically hover the container "someclass" will be the same for all.
<div class="container1">
<div class="someclass"> " #ffff13 " </div>
</div>
<div class="container2">
<div class="someclass"> " #ffff15 " </div>
</div>
<div class="somecontainer">
<div class="someclass"> " #ffgf19 " </div>
</div>
<div class="thecontainer">
<div class="someclass"> " #0fff1a " </div>
</div>
<div class="container1">
<div class="someclass"> " #cfff17 " </div>
</div>
<div class="mastercontainer10">
<div class="someclass"> " #1fff13 " </div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$(".someclass").hover(
function() {
var color = /#[0-9\A-F]+/.exec($(this).html())[0];
$(this).css('background', color)
}, function() {
$(this).css('background', color)
});
});
</script>
Are you looking for this
(function () {
$(".someclass").each(function () {
var html = $(this).html();
var color = html;
$(this).css('background', color);
});
})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="someclass">#ffff13</div>
<div class="someclass">#ffff25</div>
<div class="someclass">#ffff36</div>
<div class="someclass">#ffff48</div>
<div class="someclass">#ffff50</div>
<div class="someclass">#87CEEB</div>
Or
you Lookig for this
(function () {
var color;
$(".someclass").hover(function () {
var html = $(this).html();
color = html;
this.style.backgroundColor = color
});
$(".someclass").mouseleave(function () {
this.style.backgroundColor = "white"
});
})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="background-color:white;" class="someclass">#ffff13</div>
<div style="background-color:white;" class="someclass">#ffff25</div>
<div style="background-color:white;" class="someclass">#ffff36</div>
<div style="background-color:white;" class="someclass">#ffff48</div>
<div style="background-color:white;" class="someclass">#ffff50</div>
<div style="background-color:white;" class="someclass">#87CEEB</div>
Try putting the hover function in an anonymous function
JavaScript
(function() {
// insert code here
})(); // anonymous function

sortable new order error get value tkEmail

I need to sort items that are within div with the same id and class. I have problems to return the value of tkEmail tag. I can not get the value.
example:
item 1
Order: 0 Value: 1
HTML:
<div id="sortable">
<div class='sortear' tkEmail='1'>Item 1</div>
<div class='sortear' tkEmail='2'>Item 2</div>
</div>
<br>
<div id="sortable">
<div class='sortear' tkEmail='3'>Item 3</div>
<div class='sortear' tkEmail='4'>Item 4</div>
</div>
JS:
$(document).ready(function () {
$('div#sortable').sortable({
update: function () { novaOrdem() },
});
});
function novaOrdem(){
$('div#sortable').each(function (i) {
alert($(this).attr('tkEmail'))
});
}
Ids have to be unique and you're not actually checking the child divs in the call to each. $('div#sortable').children() will get you what you want. Also, tkEmail is not valid and it would be better practice to use a data attribute e.g. data-tk-email:
HTML:
<div id="sortable">
<div class='sortear' data-tk-email='1'>Item 1</div>
<div class='sortear' data-tk-email='2'>Item 2</div>
<div class='sortear' data-tk-email='3'>Item 3</div>
<div class='sortear' data-tk-email='4'>Item 4</div>
</div>
JQuery:
$(document).ready(function() {
$('div#sortable').sortable({
update: function() {
novaOrdem()
},
});
});
function novaOrdem() {
var items = $('div#sortable').children();
$.each(items, function() {
alert($(this).html() + ', Order: ' + $(this).index() + ', Value: ' + $(this).data('tkEmail'))
});
}
Fiddle Demo

my JS work on second click

This is my JS. I dont know why the "X" created by append to last child doesn't work on first click, but it does work on the second click. "x" url is in the cloned div. Is that causing the problem? Or is there something wrong in the HTML?
$(document).ready(function () {
$(".add").click(function () {
var aaa = $(this).parent("div").attr('id')
$(this).parent().children(".add").siblings(".name,.detail,.price").clone().appendTo(".CART").wrapAll('<div class="dump ' + aaa + '"></div>')
$(this).removeClass("add").addClass("added");
$(".dump:last-child").append('<a class="delC" href="javascript:delC()">x</a>');
$(".dump").removeClass("dump")
});
})
////////////////
function delC() {
$(document).on('click', '.delC', function () {
var xx = $(this).parent("div").attr('class')
$("." + xx + "").remove()
})
}
<div id="itemA">
<div class="detail">USB</div>
<div class="name">USB type1</div>
<div class="price">1500</div>
<div class="weight">20 Gr</div>
<a class="add">add</a>
</div>
<div id="itemB">
<div class="detail">RAM</div>
<div class="name">RAM type1</div>
<div class="price">2000</div>
<div class="weight">50 Gr</div>
<a class="add">add</a>
</div>
<div class="CART"></div>
The problem is that you are binding click event inside the delC function. So the first time you click you just bind events (and then you bind more and more event handlers)..
Instead remove delC function and just delegate delete events in the first place:
$(document).ready(function () {
$(".add").click(function () {
var aaa = $(this).parent("div").attr('id')
$(this).parent().children(".add").siblings(".name,.detail,.price").clone().appendTo(".CART").wrapAll('<div class="dump ' + aaa + '"></div>')
$(this).removeClass("add").addClass("added");
$(".dump:last-child").append('x');
$(".dump").removeClass("dump");
});
})
$(document).on('click', '.delC', function () {
var xx = $(this).parent("div").attr('class')
$("." + xx + "").remove()
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="itemA">
<div class="detail">USB</div>
<div class="name">USB type1</div>
<div class="price">1500</div>
<div class="weight">20 Gr</div> <a class="add">add</a>
</div>
<div id="itemB">
<div class="detail">RAM</div>
<div class="name">RAM type1</div>
<div class="price">2000</div>
<div class="weight">50 Gr</div> <a class="add">add</a>
</div>
<div class="CART"></div>
You dont need a separate function to be called on href. You can just bind that to a click function.
$(document).on('click', '.delC', function(e){
e.preventDefault();
var xx = $(this).parent("div").attr('class')
$("."+xx+"").remove()
})
Working JsFiddle http://jsfiddle.net/j65uex6t/
This should do the trick
Fiddle
$(function () {
$(".add").click(function () {
var aaa = $(this).parent("div").attr('id')
$(this).parent().children(".add").siblings(".name,.detail,.price").clone().appendTo(".CART").wrapAll('<div class="dump ' + aaa + '"></div>')
$(this).removeClass("add").addClass("added");
$(".dump:last-child").append('<a class="delC">x</a>');
$(".dump").removeClass("dump")
});
$(document).on('click', '.delC', function (e) {
e.preventDefault();
var xx = $(this).parent("div").attr('class')
$("." + xx + "").remove()
})
});

How can I change each div id which is the last part of a number

I want to change each div id with change function.
before:
<div id="a_1">a1</div>
<div id="b_1">b1</div>
<div id="c_1">c1</div>
<div id="d_1">d1</div>
<button onclick="change()">Değiştir</button>
after:
<div id="a_2">a2</div>
<div id="b_2">b2</div>
<div id="c_2">c2</div>
<div id="d_2">d2</div>
<button onclick="change()">Değiştir</button>
I've tried this function but it didnt work
function change()
{
var old_id=1;
var new_id=2;
alert( bas( $("#a_1").attr("id")) );
$("div[id$=_"+old_id+"]").attr("id", bas( $("div[id$=_"+old_id+"]").attr("id") ) +new_id);
}
How can I do?
Thanks.
After doing some small changes you can achieve these this easily.
Try this:
HTML Code:
<div id="a_1">a1</div>
<div id="b_1">b1</div>
<div id="c_1">c1</div>
<div id="d_1">d1</div>
<button onclick="change(1, 2)">Değiştir</button>
Javascript/Jquery Code:
function change(oldid, newid)
{
$('div[id $= "_' +oldid+ '"]').each(function(){
var clone =$(this).clone(true).attr('id' , 'id_' + newid);
$('body').append(clone);
});
var nextid = newid + 1;
$('body').append('<button onclick="change(' + newid + ',' + nextid +')">Değiştir</button>');
}
Working Example
I have added class attribute to the div elements. Here is the demo JSFIDDLE
HTML:
<div id="a_1" class="my_div">a1</div>
<div id="b_1" class="my_div">b1</div>
<div id="c_1" class="my_div">c1</div>
<div id="d_1" class="my_div">d1</div>
<button onclick="change_ids()">Değiştir</button>
JS:
change_ids=function()
{
var old_id=1;
var new_id=2;
$('div.my_div').each(function() {
var div_id = $(this).attr('id');
var arr = div_id.split("_");
//alert(arr[0]+" "+arr[1]);
var new_div_id = arr[0]+"_"+new_id;
$(this).attr('id', new_div_id);
$(this).html(new_div_id);
});
alert('Div ids changed')
}

drag and drop working funny when using variable draggables and droppables

i have some containers that contain some divs like:
<div id="container1">
<div id="task1" onMouseOver="DragDrop("+1+");"> </div>
<div id="task2" onMouseOver="DragDrop("+2+");"> </div>
<div id="task3" onMouseOver="DragDrop("+3+");"> </div>
<div id="task4" onMouseOver="DragDrop("+4+");"> </div>
</div>
<div id="container2">
<div id="task5" onMouseOver="DragDrop("+5+");"> </div>
<div id="task6" onMouseOver="DragDrop("+6+");"> </div>
</div>
<div id="container3">
<div id="task7" onMouseOver="DragDrop("+7+");"> </div>
<div id="task8" onMouseOver="DragDrop("+8+");"> </div>
<div id="task9" onMouseOver="DragDrop("+9+");"> </div>
<div id="task10" onMouseOver="DragDrop("+10+");"> </div>
</div>
i'm trying to drag tasks and drop them in one of the container divs, then reposition the dropped task so that it doesn't affect the other divs nor fall outside one of them
and to do that i'm using the event onMouseOver to call the following function:
function DragDrop(id) {
$("#task" + id).draggable({ revert: 'invalid' });
for (var i = 0; i < nameList.length; i++) {
$("#" + nameList[i]).droppable({
drop: function (ev, ui) {
var pos = $("#task" + id).position();
if (pos.left <= 0) {
$("#task" + id).css("left", "5px");
}
else {
var day = parseInt(parseInt(pos.left) / 42);
var leftPos = (day * 42) + 5;
$("#task" + id).css("left", "" + leftPos + "px");
}
}
});
}
}
where:
nameList = [container1, container2, container3];
the drag is working fine, but the drop is not really, it's just a mess!
any help please??
when i hardcode the id and the container, then it works beautifully, but as soon as i use id in drop then it begins to work funny!
any suggestions???
thanks a million in advance
Lina
Consider coding it like this:
<div id="container1" class="container">
<div id="task1" class="task">1 </div>
<div id="task2" class="task">2 </div>
<div id="task3" class="task">3 </div>
<div id="task4" class="task">4 </div>
</div>
<div id="container2" class="container">
<div id="task5" class="task">5 </div>
<div id="task6" class="task">6 </div>
</div>
<div id="container3" class="container">
<div id="task7" class="task">7 </div>
<div id="task8" class="task">8 </div>
<div id="task9" class="task">9 </div>
<div id="task10" class="task">10 </div>
</div>
$(function(){
$(".task").draggable({ revert: 'invalid' });
$(".container").droppable({
drop: function (ev, ui) {
//process dropped item
}
});
})

Categories