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?
Related
I have this sample snippet: https://jsfiddle.net/uyg8tauo/ wherein several divs are initially defined as display: none; and upon clicking the buttons, I would like them to appear by changing the display property of the element to block.
However, I would like the elements to cascade properly based on the buttons I actually clicked. For instance, if I click the the first button 4 times, the elements with ids "school_" + n show up one after another and if I click on the second button the div with id "noSchool_" + n appears after the first ones not on where it is exactly written on my DOM.
Please take note that it has to be supported by legacy browsers (IE8<). Apparently, my divs have to pre-defined and cannot be dynamically added. I really hope I made myself clear with my problem and any feasible solution is greatly appreciated!
Thanks.
If you re-append a DOM element into it's same container, it will be put last in the DOM tree. Consider the following:
<div id="container">
<div id="button-1">1</div>
<div id="button-2">2</div>
<div id="button-3">3</div>
</div>
Now, if you would do this:
document.getElementById('container').appendChild(document.getElementById('button-1'));
This would effectively switch the DOM into the following structure:
<div id="container">
<div id="button-2">2</div>
<div id="button-3">3</div>
<div id="button-1">1</div>
</div>
As explained in the first paragraph here:
https://developer.mozilla.org/en/docs/Web/API/Node/appendChild
<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.
I have some bullet points which I want to show more text below them on clicking them. They are both two separate Ps that are paired together by sharing a common id. So, what I am trying to do below is to find the element with (id_same_as_this.class), so that the element with the class "expand" as well as the id that matches the clicked on P is toggled. Does that make sense?
$(document).ready(function(){
$(".expandable").click(function(){
$(this.attr('id')+"."+"expand").toggle(800);
});
});
I only ask if the above code could be made to work because it would make the expandable bullet points in my web page significantly less code intensive than a lot of the examples I have read about.
$(this.attr('id')+"."+"expand").toggle(800);
Must be
$("#" + this.id +".expand").toggle(800);
You missed the # there. That said, you shouldn't ever have a common ID. By definition IDs are meant to be unique. If you have the same ID on multiple elements, while it may work now on the browsers you try, you have no guarantee it won't break in the next rev of jQuery (or Chrome, or Konqueror, or iOS Safari). There's also no reason to do it. You could just use classes or data-* attributes.
Yes this will work but you need a # before the ID
They are both two separate Ps that are paired together by sharing a common id.
IDs are unique. Two elements can't share a common ID, as that defeats the whole purpose of having a unique identifier. JavaScript assumes that you're using valid HTML, so document.getElementById() will return only the first element with a matching id. By using non-unique IDs, things will start breaking in unpredictable ways:
$('#foo').find('.bar') // Won't search past first #foo
$('#foo .bar') // Will search past first #foo in IE8+
Try restructuring your HTML to make this task easier. Maybe you could do something like this:
<ul id="bullets">
<li>
<h2>Title</div>
<div>Text</div>
</li>
</ul>
And then use a simple event handler:
$('#bullets h2').click(function() {
$(this).next().toggle(800);
});
You don't need id values for this at all (which is good, as from the comments on hungerpain's answer, you're using the same id value on more than one element, which is invalid).
Just do this:
$(document).ready(function(){
$(".expandable").click(function(){
$(this).find(".expand").toggle(800);
});
});
That will find the element with the class expand within the expandable that was clicked. No relying on unspecified behavior of selectors.
If you really need that data on the expandable, just put it in a data-* attribute. So instead of this invalid structure:
<!-- INVALID -->
<div id="foo27" class="expandable">
<div class="expand">...</div>
</div>
<div id="foo27" class="expandable">
<div class="expand">...</div>
</div>
Do this
<!-- VALID -->
<div data-id="foo27" class="expandable">
<div class="expand">...</div>
</div>
<div data-id="foo27" class="expandable">
<div class="expand">...</div>
</div>
Use the above code to do the expansion. If you need the value, use .attr("data-id") or .data("id") to get it.
For example, with a font-size switcher/button, if I use
$('#container p').css('font-size', '24px');
it works as expected, but if I later add paragraph elements to the container (via ajax, etc), they are not styled with the updated font-size. I am aware that this is the intended behavior of the .css() method. I am simply asking:
What's the proper approach to changing a style for a CSS selector, and making those styles persistent?
Right, well, when you perform that command, it styles all p elements in #container. If you want it to be permanent, you could create a <style /> element and add the CSS stylings there.
To elaborate, you could do something like this:
$(document.head).append('<style>#container p{font-size: 24px;}</style>');
What jQuery does in that line is equivalent to:
<div id='container'>
<p style='font-size:24px'>a</p>
<p style='font-size:24px'>b</p>
<p style='font-size:24px'>c</p>
</div>
For your particular case I'd get one of the stylesheets present in the document, like this:
var stylesheets = document.styleSheets
Which returns an array of styleSheet objects that contain the insertRule method, which you can use to add your new (permanent) css rule.
Cheers!
You cannot add the style directly w/ JavaScript, but you can however do this:
<div id="wrapper">
<div id="paragraph1">blah</div>
<div id="paragraph2">you</div>
</div>
and
$("#wrapper").css...
This way any paragraph you add to the wrapper will have the new font size...
Well you are adding style to exiting elements only, there is no way for jquery to know about the new elements.
The problem is probably that you are destroying the element upon which you have the style.
If you are bringing in via AJAX a replacement for #container, then all of the content will get destroyed and replaced with the new content. All of the <p> tags you added the style to will no longer exist, and it will need to be repeated on the newer entry.
What you could try is creating a class definition on the fly.
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.