dragging child element from parent element - javascript

is it possible to drag child element from parent element without parent element is overflowing?, its like i want to create a drag and drop event out from parent element but it keeps on overflowing, if its not possible? what else can i do?
current example code:
<div id="parent">
<div id = "child">Drag me out from parent!</div>
</div>
<script>
$("#child").draggable();
</script>
Ive tried different revisions but it doesnt work well, Im looking forward to this, thanks!

Maybe you can create your own draggable
$('#child').on('mousedown',function(){
$('child').css('position','fixed');
var evt=setInterval(followMouse, 50);
$('child').on('mouseup',function(){
clearInterval(evt);
$('child').off('mouseup');
});
});
function followMouse(){
// mousePosX & Y must be a string ex: 345px
$('child').css('left',mousePosX
'top',mousePosY
);
}

Related

Auto click on child element with random ID

I'm a complete javascript noob and I'm trying to automatically click a button inside a div.
<div id="KB_3383878" class="td button-visible">
<button id="KB_1532704" class="inputsubmit">Search</button>
</div>
The numbers after KB_ are changed randomly each time the button is clicked. I am not able to click based off the inputsubmit class as there are 3 identical buttons, of which 2 are hidden and they rotate which one is visible after x clicks, and the inputsubmit class is also rotated between inputsubmit and enterclass.
So I have to find the child element of the div with the button-visible class.
The JS script I've tried using so far has no effect what so ever:
window.onload = function(){
var parent = document.getElementsByClassName('button-visible');
var children = parent.children[0];
setInterval(function(){
parent.button.click();
},1000);
};
It seems you are referring to the wrong var. parent.button.click() should be referring to children (which I would name firstChild or something).

Need help traversing elements with jQuery in ASP.NET Web Forms

So the first image is what my page looks like. I am trying to grab the ID of the table at the top (the table that has the class trackingHistory and ID of ContentPlaceHolder1_ctl00_myRpt_ctl00_0_gdvTH_0) whenever the highlighted button is clicked.
Right now I can click the button and fire my Javascript method 'ToggleHistory()' and use jQuery to get the ID of my button. (.attr('id'))
but that's about as far as i can get. I have tried messing around with the closest() and prev() methods from jQuery but haven't had any luck. any help would be appreciated.
javascript method
function ToggleHistory(button)
{
console.log(button);
var x = $(button).prev();
var y = $(button).closest('table').find('.trackingHistory');
//var z = $(button).closest('.trackingHistory');
console.log(x);
console.log(y);
console.log($(y).attr('id'));
//console.log(z);
}
i dont want to have to hard code the id because there will be a dynamic amount of these tables and buttons.
The <button> and the <table> don't have a direct relationship, but do have the <div> in common.
<div>
<table class="toggleHistory"></table>
</div>
<button type="button" onclick="ToggleHistory(this)">click here to hide</button>
The <button> and <div> are immediate siblings, which you can traverse between with .prev() and back with .next().
$(button).prev()...
Then, the <div> and <table> are .parent() and child (.children()):
$(button).prev().children('.trackingHistory');
function ToggleHistory(button)
{
console.log(button);
var $historyTable = $(button).prev().children('.trackingHistory');
console.log($historyTable.attr('id'));
}

How to add an element to the jquery.shapeshift grid

I want to append and element to the grid created by jquery.shapeshift. The documentation says to trigger a rearrange once the element is added. I've tried but I get nothing. What am I doing wrong? See the example http://jsfiddle.net/LNysC/1307/
$(".container").shapeshift({
minColumns: 3
});
$("a").click(function(){
$(".container").append("<div></div>");
$(".container").trigger("ss-event-arrange");
});
Many Thanks
The div you added that way is not recognized by the container as a child yet so you should tell the container that the div you added is a child to be treated like so.
I know there should be another way to do it, but try reshapeing the container by calling $(".container").shapeshift() again, for example:
$(".container").shapeshift({
minColumns: 3
});
$("a").click(function(){
$(".container").append("<div></div>");
$(".container").shapeshift();
});
Here is an example:
http://jsfiddle.net/LNysC/1501/

jQuery CSS Selector combined with "this"

I'm trying to figure out if something like this would be possible. We are given that HTML structure
<a href='#' class='anyLink'>
<!-- here goes some content-->
<div class='childElement'><!-- here goes some content--></div>
</a>
I am not able to use ID's because there are many links and it's not defined how many more are to come. So my question is, do you guys know a way where I can do something like this :
$('a').on("click",function(e){
$(this +"div").val(); // for example.
});
I want to select a children element of that anchor that has been clicked or want to get the value of the children element. I also don't have any ID's of the children elements and I am trying to select things via CSS Selectors as td:nth-child(4).
Could anybody tell me if this is possible ?
try
$('a').on("click",function(e){
$("div",this).text(); // for example.
});
$('a').on("click",function(e){
$(this).children("div").eq(0).html();
});
You are looking for a function called .children().
But you can also try something like this:
$('a').on('click', function( e ) {
$('div', this).val(); // Each div child of this element
$(this).children('div'); // Each div child of this element
});

jquery select class inside parent div

I'm trying to change the alt of the image, I'm clicking by
selecting the image's class (add_answer)
Note: .add_answer shows up multiple times inside different containing div's
jQuery(function(){ // Add Answer
jQuery(".add_answer").click(function(){
var count = $(this).attr("alt");
count++;
$('.a_type_'+count+'').show();
$(this).parents("div:first").$('.add_answer').attr("alt", count);
});
});
This line doesn't seem to be working, how do I select this add_answer class by way of it's parent div
$(this).parents("div:first").$('.add_answer').attr("alt", count);
Anyone else have an idea?
I'm trying having trouble decreasing the alt value on the .add_answer image when .destroy_answer is clicked
jQuery(function(){ // Hide Answer
jQuery(".destroy_answer").click(function(){
$(this).parents("div:first").hide();
var count = $('.add_answer').attr("alt");
count--;
$('.add_answer',$(this).parent('div:first')).attr('alt',count);
});
});
Problem line:
$('.add_answer',$(this).parent('div:first')).attr('alt',count);
you can use the parent div as the scope:
$('.add_answer',$(this).parent('div:first')).attr('alt',count);
This should work:
$(this).parent("div").find(".add_answer").attr("alt", count);
You code is almost correct. Required change is to use .find instead of .$ after .parents method. Use of .parent instead of .parents should be avoided, this way your code will be more unobtrusive (precisely - this way img can be non-direct child of the div).
$(this).parents('div:eq(0)').find('.add_answer')
You can manipulate :eq(0) to select eg third parent div using :eq(2).

Categories