I am using JavaScript to generate a map for a game, and each tile is a separate div. In order to be able to position the map on my site, I am throwing them all in another div.
So for example:
<div id="mapBox">
<div id="tile" ... ></div>
<div id="tile" ... ></div>
</div>
The #tile divs are generated from data in an XML file, so they're dynamically generated. On each #tile, I have an onmouseevent that triggers a function (alert(1) for now just to get it to work) but it never seems to be triggered.
If I put an onmouseevent on #mapBox it triggers it, but I can't get it to work for the #tile divs.
Any help with this would be appreciated.
Not sure how you're selecting the #tile divs, but it is not valid to have multiple elements with the same ID.
Selection using duplicate IDs will often give you only the first match (or some other unpredictable behavior).
When a duplicate identifier is needed, you should use a class instead of an ID.
<div id="mapBox">
<div class="tile" ... ></div>
<div class="tile" ... ></div>
</div>
First problem, as mentioned, is that you use the same id for many elements, so the event only fires on the first one.
Secondly you should use the .delegate() method on the #mapBox after giving a class on the tiles like this
$('#mapBox').delegate('.tile', 'mouseover', function(e){
//do whatever here
})
example at http://jsfiddle.net/nXa27/1/
Update
Sorry, didn't see you were not talking about jquery..
Here is an example with pure javascript http://www.jsfiddle.net/AvJf7/
Still you will need to add a tile class to your tiles for easy and valid selecting.
Related
Is there any way to "unrender" elements which aren't visible on screen?
I have a page with a lot divs, some of them have event listeners attached to them. Above 45k divs event handlers are running very slow, so I thought maybe unrendering unnecessary element would help?
FYI - when elements have display: none everything works fine.
Instead of adding 45k of event listeners, you should add one event listener on a parent-div.
With jQuery you can do something like this:
<div id="container">
<div class="clickable">a</div>
<div class="clickable">a</div>
<div class="clickable">a</div>
<div class="clickable">a</div>
<div class="clickable">a</div>
<div class="clickable">a</div>
<div class="clickable">a</div>
<div class="clickable">a</div>
</div>
.
$("#container").on('click', '.clickable', function(e) {
console.log($(e.target));
})
this should improve your javascript code.
If you still need to hide elements who a not visible you will need to calculate their positions, and that might decrease your performence
Use divs when you need to divide (that's what divs are supposed to be used for) sections of your page from one another. Header/footer from content for instance, or individual posts on a blog.
However, you shouldn't use them when semantically where another element would make sense. While this is not a duplicate, I think the info found here will be of use to you. Too Many DIVS?
In the code below, I've marked a <div> with "LINE BELOW". I need to set css background attribute but, no matter how I try the syntax in jQuery or JavaScript, it seems like it never recognizes the thing! Why won't it accept my CSS definition?
As a bonus explain to me how to override the existing background attribute that contains !important in it.
This is the approximate scheme of what I have in a target website:
<div id="main-content">
<div id="detailblock">
<div class="tabsblock">
<section class="editblock">
<form id="target">
<div class="editblock-item">
<div class="input textarea">
<div class="editor_box">
//LINE BELOW:
<div class="editor_ editor_text">
//Something inside of div...
</div>
</div>
</div>
</div>
</form>
</section>
</div>
</div>
</div>
I tried this and found during research and it didn't work:
jQuery(".editor_.editor_text").css("background","#000 none repeat scroll 0% 0%");
What am I doing wrong?
UPDATE
I just tested and colored all divs in blue using css(). They all worked, except that particular one. But if I remove all divs using remove(), it will get removed with all divs. But if I remove that particular div using it's selector, it will not get removed!
you're not really selecting a <div> with a complex class name; you're trying to select a <div> with two class names assigned to it. Your jQuery selector does not have to contain both of those class names; either will do, though of course you can specify both if you want. Does $("div.editor_") select the element you want to change? Does $("div.editor_text")?
Once you have figured out the proper selector, you can either call jQuery's .css method on the selected element:
$(...).css("background", "blue");
or you can edit the selected element's style property directly (as in, not through jQuery). If you are attempting to override a CSS !important directive, I believe this is the method you must use:
$(...)[0].style.setProperty("background", "blue", "important");
(this works because two CSS rules are now marked as equally !important, and the order of application dictates that the one you're setting will win out.)
You have a typo here there is an extra space between the two editor:
<div class="editor_ editor_text">
Works fine without the extra space in this fiddle:http://jsfiddle.net/yutzjbjr/
edit
I see now that there are two classes involved. You should include your jquery in the question.
However still works fine with two classes: http://jsfiddle.net/yutzjbjr/1/
Can you maybe read the console?
<div class="col-1-3">
<div class="click"></div>
</div>
<div class="col-1-3">
</div>
<div class="col-1-2">
</div>
Using jQuery, I need to select the col-1-2 div when a user clicks on the "click" div. I need to replace col-1-2 with col-1-3. So far, I have tried a variety of methods using parent();, next();, find(); etc. etc. Right now, I looking into:
$(".click").parent().next(".col-1-2").removeClass("col-1-2").addClass("col-1-3");
That obviously doesn't work but I am not sure where to go from here.
next will only look at the immediate next element. You need to use nextAll to test all the following siblings.
Using this instead of a selector will make sure that you are dealing with the div that was actually clicked rather than another one with the same class name.
$(this).parent().nextAll(".col-1-2").removeClass("col-1-2").addClass("col-1-3");
You may also wish to filter the results to apply the change to only the first match.
One more slightly shorter version:
$(this).parent().siblings(".col-1-2").toggleClass("col-1-2 col-1-3");
$.fn.toggleClass can be used instead or combination of removeClass + addClass: col-1-2 will be removed and col-1-3 will be added.
Is it possible to create a clone/copy of a DOM element in jQuery without cloning its content? I need to split the content of a div into two separate divs with the same attributes. So for example I need to change:
<div class="someclass" someattr="someval">
this is the first sentence. this is the second sentence.
</div>
into something like:
<div class="someclass" someattr="someval">
this is the first sentence.
</div>
<div class="someclass" someattr="someval">
this is the second sentence.
</div>
How exactly the content is split is rather complicated, but this is basically what I need to do. Obviously, creating a clone without content can be achieved using:
$(el).clone().empty();
But since my element can become rather large, I would like to get rid of the overhead of unnecessarily cloning the element content. Ideas? Thanks!
Just go around jQuery for this operation, as long as you don't need to keep (non-attribute-based) event listeners or other data.
var $clone = $(el.cloneNode(false));
I want to animate two jquery OBJECTS at the same time (using the jquery slideUp method)
I have two divs that have already been 'cached' into a variable like so:
var div1 = $('body').find('#someId');
var div2 = $('body').find('#someOtherId');
I have cached these because they take a considerable amount of processing to find due to the page layout (using framesets and frames...don't ask).
Anyway,
If I do the slide animation like below, they are not in perfect sync (they are lined up so you can easily see it visually)
div1.slideUp(500);
div2.slideUp(500);
So I tried wrapping it like so,
$(div1, div2).slideUp(500);
but only div1 slides.
Is there anyway to get this to work while still maintaining the cached objects?
Edit: Giving the div's a class name does not trigger the animation. I think it may have something to do with the fact that I'm using framesets. The jquery code is in the top frame and so it will not look into other frames for the class. That is why I cached the objects
You can do what you want like this:
div1.add(div2).slideUp(500);
I made a quick jsfiddle you can check out here.
The shortest thing to do is to use a shared class and then select all the items with that class:
$('.willAnimate').slideUp(500);
<div id="element1" class="willAnimate"></div>
...
<div id="other-element" class="willAnimate"></div>
Otherwise, you could use the .add() method http://api.jquery.com/add/
In this case your code will become something like this:
div1.add(div2).slideUp(500);
why you dont add a class to the to div and add do the selector like this
<div id="someId" class="example"> </div>
<div id="simeOtherId" class="example"> </div>
the selector that add the animation it's like this
$(".example").slideUp(500);
and that avoid to find some variables and make more selectors
Give the two divs the same class, i.e. slide and then change your code to $('.slide').slideUp(500).
$('.yourclass').slideUp(500);
<div id="someId" class="yourclass"></div>
<div id="simeOtherId" class="yourclass"></div>