I have a feeling this is pretty simple, but my JS is not very good.
I have a div class
<div class=" foo1 foo2" style="top: 0px;">
I can see in chrome that it this div has an attribute set like this:
.foo2
{
position: fixed;
width: 100%;
}
I'm trying to use JS to adjust the attributes of foo2, but I don't know how to get at it.
var changeFoo = document.getElementById ('foo2');
changeFoo.position = "relative";
How do I call foo2.position and change it?
Try this:
Its a pure javascript solution.
function update_this_css(matchClass) {
var elems = document.getElementsByTagName('*'), i;
for (i in elems) {
if((' ' + elems[i].className + ' ').indexOf(' ' + matchClass + ' ')
> -1) {
elems[i].style.position = "relative";
}
}
}
update_this_css('foo2');
You can do it as:
var foo= document.getElementsByClassName('foo2');
for(var i=0;i<foo.length;i++){
foo[i].style.position='relative';
}
You are trying to get the JS to identify an element using its ID ('foo2') which you have not set. If you want to use a class name instead you must use:
document.getElementsByClassName
else you must give your element your desired ID.
Another problem is that you simply have:
changeFoo.position
where as you need to use:
changeFoo.style.position
To get your code to work, you need to loop through the results:
var divs = document.getElementsByClassName('foo');
for(var i=0; i<divs.length; i++) {
divs[i].style.position='fixed'
}
The easiest way I found so far is to use jQuery because regular javascript is so much longer and harder to write. Get a JS library one at jquery.com Learn jQuery once and say thanks to yourself forever :) You can use CSS selectors to get elements without any IDs.
Then use it like this.
$('.foo2').css('position', 'relative');
http://api.jquery.com/css/
Related
I want to "copy" a certain elements and the change some of the text inside them with a regex.
So far so good: (/w working fiddle - http://jsfiddle.net/8ohzayyt/25/)
$(document).ready(function () {
var divs = $('div');
var patt = /^\d\./;
var match = null;
for (i = 0; i < divs.length; i++) {
match = ($(divs[i]).text().match(patt));
$(divs[i]).text($(divs[i]).text().replace(match[0], "5."));
}
});
HTML
<div>1. peppers</div>
<div>2. eggs</div>
<div>3. pizza</div>
This works exactly the way I want it, but I want to add some of the content dynamically, but when I try to change the content of the copied divs, nothing happens.
Please refer to this fiddle:
http://jsfiddle.net/8ohzayyt/24/
I have put some comments, to be more clear what I want to achieve.
I thing that your problem is that you're not passing an element to your changeLabel function, but just a string.
Look at this solution: http://jsfiddle.net/8ohzayyt/26/
Here is the line I changed to make your code work:
var newContent = $("<hr/><div id='destination'>" + $("#holder").html() + "</div>");
I just wrapped your HTML in $(). this creates an element from the string.
try:
var newContent = $("<hr/><div id='destination'>" + $("#holder").html() + "</div>");
EDIT:
Brief explanation What I've done.
In order to make $(el).find('div'); work changeLabel() needs an element. Instead of passing newContent as a string doing the above will make it pass as an element which will make $(el).find('div'); work.
I have a question about the class, and give the class a specific id.
For example I've got a html code like this:
<div class="test">text1</div>
<div class="test">text2</div>
<div class="test">text3</div>
<div class="test">text4</div>
<div class="test">text5</div>
My question is how can I add an id by each .test class.
I thought something like this in Jquery:
var i = 1;
$('.test').each(function(){
$('.test').attr('id','id_'+i+'');
i++
});
This doesn't work I think it's something with .closest() or .next()
to solve this problem.
Regards,
Frank
EDIT:
I solved the problem by myself the answer is:
$('.test').each(function(){
$(this).attr('class','test').attr('id','id_'+i+'');
i++;
});
No reason to make a counter, .each() comes with one built in.
$('.test').each(function(i){
$(this).attr('id','id_'+i+'');
});
Use $(this) to refer to the current element the in callback function:
var i = 1;
$('.test').each(function(){
$(this).attr('id','id_'+i);
i++
});
Much faster and simpler like this:
$('.test').each(function(i){
this.id = 'id_' + i;
});
There's no need for .attr() when setting or getting the id of an element.
Or if you wanted the numbers to start with 1, do this:
$('.test').each(function(i){
this.id = 'id_' + (i + 1);
});
You were on the right path:
var i = 1;
$('.test').each(function(){
$(this).attr('id','id_'+i+'');
i++
});
Use this jQuery instead:
var i, $test = $('.test'), tl = $test.length;
for (i = 0; i < tl; i++) {
$test.eq(i).attr('id','id_'+i+'');
}
As i is incremented in the for loop, you select the specific element you want to give the i based id with .eq(i).
I have couple of divs like
<div id="rg_dia_0">
zdszczxvzxvzxvc
</div>
<div id="rg_dia_1">
dfgdZXcZC
</div>
<div id="rg_dia_2">
hfhgjhgjdj
</div>
I need javascript to fetch all the divs and delete the content. I think we can use regex to match the ids as only the number that is changing.
As said by Sam in Javascript it can be
for (var i = 0; i <= 2; i++) {
document.getElementById("rg_dia_" + i).innerHTML = "";
}
Something like this can easily be done with jQuery. I would strongly encourage you to learn it.
$('div').each(function() {
$(this).html('');
});
$('#id').html(newContent);
try:
$("div[id^='rg_dia_']").html("");
see this for wildcard attribute selection in jQuery.
for (var i = 0; i <= 2; i++) {
$("#rg_dia_" + i).html("");
}
to clarify; the above obviously requires the use of jQuery, as l.devries so blatantly down-voted as an act of true adulthood and surely not be considered as trolling since the explanation as of why had to be requested first. glad to have people like you on-board!
I have a list in a div and I would like to change the background image of the parent div (#homepage_container) when I hover over a list item.
here's the site:-
http://www.thebalancedbody.ca/
Is this possible? I'm guessing I'll have to use javascript.
Thanks
Jonathan
This is quite simple with pure javascript.
function changeBg(newBg)
{
var imgdiv = document.getElementById("divwithbackground");
imgdiv.style.backgroundImage = "url(" + newBg + ")";
}
Or using sprites:
imgdiv.style.backgroundPosition = "new position";
This can be executed on mouseover for any of your li's. Event registration in javascript can be done many ways, but to do it in script, I recommend QuirksMode's method here.
Something like:
function addEventSimple(obj,evt,fn) {
if (obj.addEventListener)
obj.addEventListener(evt,fn,false);
else if (obj.attachEvent)
obj.attachEvent('on'+evt,fn);
}
And on load:
// get the list items
var ul = document.getElementById("ulId");
var lis = ul.getElementsByTagName("li");
// add event handlers
for (var i = 0; i < lis.length; i++)
{
addEventSimple(lis[i], "mouseover", (function(j) {
return function() {
// get your background image from the li somehow
changeBg(lis[j].id + "_bg.png");
};
})(i)); // use a closure to capture the current value of "i"
}
You have to use JS.
Better to learn something like jQuery.
With it you will have to do something like
var images = ['img1.jpg', 'img2.jpg', ...]
for (var i = 0; i < li_count; ++i) // li_count is the number of li's
$('li:eq(' + i + ')').mouseover(function() {$('#homepage_container').css('background-image', images[i]})
Anyway, if you wish to use such kinds of techniques, you have to learn JS.
See http://www.w3schools.com/js/default.asp and for basics and http://docs.jquery.com/Tutorials for jQuery.
I suggest installing the Jquery Library for this (jquery.com)
Just add this to your header:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
<script type="text/javascript">
$(document).ready(function() {
$('li').hover(function(){
$('#homepage_container').css('background-image' : 'whatever.png');
}
});
</script>
If you don't care about IE6, you could do it with CSS:
#homepage_container { background: url(normal.png); }
#homepage_container:hover { background: url(hover.png); }
How could I change the text below so that the text within it has a number appended to it.
<div class="right">This is some text</div>
<div class="right">This is some text</div>
<div class="right">This is some text</div>
So the code above would become,
This is some text
This is some text
This is some text
you should use an ordered list... ol
or else you will need use css and add the content property your selector with the :after pseudo element.
How about the following?
$("div.right").each(function(i){
$(this).prepend((i + 1) + ". ");
});
UPDATE:
Here is one way that should work.
"number" is a custom element (it can be anything you want) that will/should be ignored by browsers.
$("div.right").each(function(i){
$(this).find("number").remove().end()
.prepend("<number>(i + 1) + ". </number>");
});
OR use the following which is probably a little slower but semantically correct...
$("div.right").each(function(i){
$(this).find("span.number").remove().end()
.prepend("<span class='number'>" + (i + 1) + ". </span>");
});
OR an even better way would be to prepend span.number before your first drag:
$(function(){ // document ready...
// caching the "numbers" will only work if you use the DOM
// for updating div position (like jQuery's "append()", "prepend()", "before()", and "after()") and not "innerHTML" or "html()"
var numbers = $("div.right").each(function(i){
$(this).prepend("<span class='number'>" + (++i) + "</span>. ");
}).find("span.number");
function dragEnd(){
// do your drag end stuff here...
numbers.each(function(i){
this.innerHTML = ++i;
});
)};
});
This is really an elaboration on another comment. I can't format code in a comment, I guess. You could use jQuery core's each:
$('div.right').each(function(ii){
html = $(this).html();
$(this).html(ii + '. ' + html);
});
jQuery selectors are your friend...
Get your stuff and loop on through something like this:
texts = $("div.right");
for(i = 0;i < texts.length;i++)
{
node = $(texts[i]);
content = node.html();
number = i + 1;
node.html(number + ". " + content);
}
Update: Jeez, last time post untested code straight off the dome here (disclaimer: not actually the last time). In the interest of correctness, I've updated it to at least run (and work!) if you still want to do it this way. Although I admit the other solutions are cleaner and more elegant.
Does this have to be done dynamically through jquery? Can't you just combine all that text into one div and then make a ordered list around it?
Using [] notation with a result set will give you the raw DOM element which does not have the html() function. Use the eq() function to get each element wrapped in a jQuery object.
You can also use each() as mentioned above, but I prefer straight 'for loops' so I don't have to adjust for 'this' if I'm in an event handler.
var texts = $("div.right");
var elem;
for(i = 1; i < texts.length; i++) {
elem = texts.eq(i);
html = elem.html();
elem.html(i + '. ' + html);
}