What is a JavaScript 'element' within the context of jQuery library OpenSeaDragon? - javascript

I'm using a pretty cool JavaScript/jQuery library called OpenSeaDragon. It's for displaying deep zoom images. It also have a method for adding 'overlays', essentially creating a div and putting it over the image with coordinates though a viewer object. There's also a method for removing the overlays: https://openseadragon.github.io/docs/OpenSeadragon.Viewer.html#removeOverlay
viewer.removeOverlay(element or element id);
As the doc states regarding the input param: "A reference to the element or an element id which represent the ovelay content to be removed." I'm creating a whole bunch of overlays -- creating a grid out of rectangles -- so I've given them a class. Passing the class to this method doesn't work. So I'm trying to understand what they mean by "element". Is there a way I can use JQuery or JavaScript to select an "element" and pass it to the method? Or some such thing?
thanks

It usually means an element in your document, i.e. a DOM node. So, a div, or a span, or somesuch.
You can select an element with jQuery pretty easily:
var $obj = $('#elementId');
and then grab the underlying DOM node from the jQuery object that results:
var elm = $obj[0];

Thanks everyone. Here's how to do it:
var n = $(".gridcell").length
for(i=0; i<n; i++) {
viewer.removeOverlay($(".gridcell")[0]);
}
At first I though I could iterate through the array, calling removeOverlay() on each item index successively. This was causing half the overlays to be deleted on each run. So, for 16 overlay, I have to run it 4 times. After a few minutes it clicked... Each time you get the elements $(".gridcell"), it returns a new array.

Related

Where could `appendTo()` be usable with an `htmlString`?

The API docs for appendTo list the method being able to select an HTML string for a target.
However, there seems to be no use to this since the set still includes the original elements, and the HTML string seems not to have been added anywhere in the DOM nor do I see a circumstance where it could be available.
var b = button.appendTo('<div>').appendTo('body');
b is a button, and yet it is not wrapped in a div or anything.
You can see this at http://jsfiddle.net/0dgLe5sj/
Where would it be useful to append to a HTML string (which doesn't yet exist on the page)?
appendTo() returns the item being appended.
So your code is:
var btn = button.appendTo('<div>');
btn.appendTo('body');
As you can see, you move it inside a div, then immediately move it inside the body. So you when you look at it at the end, it's inside the body.
Perhaps you meant:
var b = button.appendTo($('<div>').appendTo('body'));
which will append a div to the body and then append the btn to that div.
Updated fiddle: http://jsfiddle.net/0dgLe5sj/8/
or, if you wanted to add to the div first:
var b = button.appendTo("<div>");
b.parent().appendTo("body")
but if you combine it into a single line, you can't get the button back into the variable using .appendTo as you're adding the div to the body so you're going to get the div or the body back.
To address the 'where would this be useful part':
Being able to create detached DOM elements is extremely useful for parsing HTML strings and can also be used to 'batch' up some changes without forcing page redraws between.
Moving one button to a detached div and the back to the body doesn't have a lot of point, but it proves the principles.

Click Listener from jQuery to Javascript

I work on a site that recently changed, I track certain clicks on the site through GTM and push it into the dataLayer for Google Analytics.
With the changes to the site I can't use jQuery any more so I'm having to change the following jQuery to Javascript, but I just can't get it to work. The script used to collect the h3 text within the div class 'grid_4' when the div was clicked on. The whole structure has changed now, but the old jQuery one looked like this;
<script>
var h3Tile = $("div[class*='grid_4'] a").find('h3').text();
$("div[class*='grid_4'] a").click(function() {
dataLayer.push({
'h3Value' : h3Tile,
'event' : 'tileClick'
});
});
</script>
The js I have so far is;
<script>
var outerElement = document.getElementsByClassName('ContentTeaser');
var childElems = outerElement.getElementsByTagName('h1').innerHTML;
var myFunction = function() {
dataLayer.push({
'h1Value' : childElems,
'event' : 'tileClick'
});
};
for(var i=0;i<childElems.length;i++)
childElems[i].addEventListener('click', myFunction(), false);
</script>
The only problem is that GTM refuses to accept this, saying;
'Uncaught TypeError: outerElement.getElementsByTagName is not a function'
Which I understand is related to the fact that I am creating an array rather than selecting an individual element, but I was hoping my for loop would handle this? or am I mistaken?
Thank you for any help anyone can offer.
Matt
getElementsByTagName is a method found on HTML Elements.
It and (more to the point) getElementsByClassName return an (array-like) HTML Collection, not a single HTML element.
You need to loop over outerElement and call getElementsByTagName on each element in turn instead of trying to call it on the collection itself.
Which I understand is related to the fact that I am creating an array rather than selecting an individual element, but I was hoping my for loop would handle this?
You have two collections. You are looping over the second one, but are trying to treat the first one as a single element.
It would probably be easier to simply use query selector instead:
var childElems = document.querySelectorAll(".ContentTeaser h1");
You then have a couple more problems:
for(var i=0;i<childElems.length;i++)
Since childElems is the value of innerHTML, it is undefined (if you'd called it on an element instead of an html collection then it would be a string instead) so that will throw an error.
Don't use innerHTML (which I already fixed in the query selector example).
childElems[i].addEventListener('click', myFunction(), false);
You are calling myFunction immediately and trying to assign its return value (undefined) as an event handler. Remove the ().

Accessing Objects inside HTML Object with JS

I am creating an array of div tags inside the player table div. I'm getting all div tags with class .players. The divs with class name .players have input fieds and a link field inside. I want to be able to manipulate these (remove, add class, etc...)
What I thought would work would be something like:
$(divarray[j]+' .link').hide();
$(divarray[j]+' a').remove('.link');
But it's not working. Any thoughts? I'm sure it's something simple but it's my first time at JS :)
var divarray = $('#player-table > .players');
for( var j = 0; j < 10; j++){
$(divarray[j]).removeClass("players");
$(divarray[j]).addClass("selected_players");
$('#debug').append(divarray[j]);
$(divarray[j]+' a').hide();
}
First of all, you cannot just concatenate jQuery objects or DOM nodes with strings to create new selectors. jQuery provides methods for this kind of situations, where you already have an object or DOM node and want to find other related nodes.
Second, with jQuery there are much better ways to process a set of elements. Here is your code in more jQuery-like way. This is just an example, because I don't know the HTML structure. You have to adjust it so that it selects and applies to the correct elements.
$('#player-table > .players').slice(0,10) // gets the first 10 elements
.removeClass("players") // removes the class from all of them
.addClass("selected_players") // adds the class
.find('a').hide().end() // finds all descendant links and hides them
.appendTo('#debug'); // appends all elements to `#debug`
As you maybe see, there is only one semicolon at the last line. That means this whole code block is just one statement, but splitting it up over several lines increases readability.
It works because of the fluent interface, a concept which jQuery heavily makes use of. It lets you avoid creating jQuery objects over and over again, like you do ($(divarray[j])).
Another advantage is that you can work on the whole set of elements at once and don't have to iterate over every element explicitly like you have to do with "normal" DOM manipulation methods.
For learning JavaScript, I recommend the MDN JavaScript Guide.
jQuery has a couple of tutorials and a very good API documentation.
Read them thoroughly to understand the basics. You cannot expect to be able to use a tool without reading its instructions first.
Try this istructions
$(divarray[j]).find('.link').hide();
$(divarray[j]).find('a').remove('.link');
Try also
$(divarray[j]).find('.link:first').hide();
If you need to work only on the first element
Hope it helps

JQuery remove images

I'm curious if anyone knows why this piece of jQuery code doesn't remove the images?
var a = $('#tblMain').clone().remove('img');
The table is being selected. This is trying to take the table on the webpage and export to excel but I do not want the images to export.
Thank you,
Do it like this:
$("#tblMain").clone().find("img").remove();
EDIT: Okay, here's the problem:
selector: A selector expression that
filters the set of matched elements to
be removed.
http://api.jquery.com/remove/
The img in .remove('img') is to filter the set of items in the jquery object, NOT to find elements within the items themselves. In this case, the jquery object contains only one item, the cloned table. Therefore, .remove('img') removes nothing, since the jquery object does not contain any images (only images within items it contains).
I don't know what's happening behind the scenes, but you're referring to some variable called img whilst you most probably just want to select all img elements. In that case, you ought to use a selector as a string:
var a = $('#tblMain').clone().remove('img');
EDIT: .clone.remove does not seem to work indeed. I used this workaround which actually works:
.find('img').each(function() {$(this).remove()});

JQuery DOM creation/handling issue

So, say I have selected, in JQuery, a singular DOM div.
I then proceed to create a new DIV like so:
var DIV = $("<div>Hello, world</div>");
After that, I attempt to place that DIV inside the original one like so:
$(OriginalDiv).append(DIV);
Okay, that works.
Now I want to edit DIV further.
Calls to .click, .html, .addClass, (And likely more) do not work!
Okay, instead I do:
var OriginalDiv = $("someSelector");
var DIV = $("<div>Hello, world</div>");
DIV = $(OriginalDiv).append(DIV);
That appears to work at first; However, instead, it sets DIV to reference the same DOM object as OriginalDiv and NOT the newly appended DOM object. Naturally, this does not allow me to edit DIV.
So, then, I try two more methods:
var OriginalDiv = $("someSelector");
var DIV = $("<div>Hello, world</div>");
$(DIV).appendTo(OriginalDiv);
and
var OriginalDiv = $("someSelector");
var DIV = $("<div>Hello, world</div>");
DIV = $(DIV).appendTo(OriginalDiv);
Not even these work.
If I haven't done a very good job explaining, here is my exact dilemma
I am trying to create a DOM object in jquery, then append it to another DOM object using jquery. The problem is, once it gets appended, there seems to be no way for me to directly access it without using somethign like .children.
I'd like very much to be directly returned somewhere along in that process a reference to the DOM object which I am appending. As in the one that actually gets appended.
I'm not sure how to do this in JQuery. Anybody know a solution?
Thanks
--G
Yes, append won't work as it returns a reference to the element the new element was appended to. jQuery supports method chaining, so this should work easily:
$("<div>Hello, world</div>")
.click(function() {
// something
})
.appendTo('someSelector');
But even
var $ele = $("<div>Hello, world</div>").appendTo('someSelector');
will work. appendTo returns a reference to the element which was appended. If this does not work for you, you have your problem elsewhere.
Comments on your code: This is not your problem, however it is important for you to know what is going on here.
This part
var OriginalDiv = $("someSelector");
var DIV = $("<div>Hello, world</div>");
$(DIV).appendTo(OriginalDiv);
is the same as
$($("<div>Hello, world</div>")).appendTo($("someSelector"));
You see, you have a nested call to jQuery, because DIV is already a jQuery object. There is no need to pass it again to jQuery.
You can also pass a selector directly to appendTo.
you could try this;
var DIV = document.createElement('div');
then you can use;
$(div).html('Test!');
or what ever you want to use with.
You don't have to get anything back from the DOM. Once you create the element with jQuery, you already have a reference to the DOM element. Inserting it into the document does not do anything special.
// this will create the DOM element, and the jQuery
// object wrapping that newly created DOM object
// is assigned to DIV.
var DIV = $("<div>Hello, world</div>");
// Don't worry about getting a return value from this
// append() call. What we need is already available inside
// the variable DIV.
$(OriginalDiv).append(DIV);
// continue using DIV as you normally would. It is referring
// to the same DOM object that was just appended to the document.
DIV.addClass('green');

Categories

Resources