change background-image value dynamically - javascript

I am trying to find all the elements with a specific background-image and change it to another one.
I tried doing it with this piexce of code:
jQuery('a').each( function() {
if ( jQuery(this).css('background-image') == 'url("someurl.png")' ) {
jQuery(this).css('background-image') == 'url("anotherurl.png")';
}
});
but it didn't work...any idea how can i do it??
since this is a really small page i would rather go threw all elements in the page...
there is a way to go threw all elements in page?

Change:
jQuery(this).css('background-image') == 'url("anotherurl.png")';
to:
jQuery(this).css('background-image','url("anotherurl.png")');
Setting a property with .css()

When setting values with jQuery's css(), you'd do
jQuery(this).css('background-image', 'url("anotherurl.png"))';
It's a function, not a property that can be set with =

You need to use the setter of css() to change the property. You can also use filter() and the instance of jQuery passed in to the document ready handler to keep the $ in use. Try this:
jQuery(function($) {
$('a').filter(function() {
return $(this).css('background-image') == 'url("someurl.png")';
}).css('background-image', 'url("anotherurl.png")');
});

Related

Data value does not change in HTML

I must have misunderstood, but I thought that the data-value of a HTML-element changes when calling the jQuery .data() function:
<div id="empty_column_0" data-name="empty_column_0" class="settings_toggle toggle-success inline-toggle" data-target="column_0" data-value="0"></div>
When I "toggle" this element, the data-value must change from 0 to 1 and vice versa.
I do this with:
$('.settings_toggle').on('toggle', function (e, active)
{
var that = $(e.target);
//Change the data value of the element
if(active) {var bool = 1;} else {var bool = 0;}
that.data('value', bool);
console.log(that.data('value'));
});
The value changes in the console but not in the HTML?
Is this how it is suppose to work?
This is by design. jQuery data() does not update the data- HTML attributes. If you wish to update the HTML attributes you'll need to use:
that.attr('data-value', bool);
You code could work, please see the link to understand the difference between .data() and .attr():
https://api.jquery.com/data/#data1
The .data() method allows us to attach data of any type to DOM
elements in a way that is safe from circular references and therefore
from memory leaks.
jQuery Data vs Attr?

How to find class of an dynamic created object by js?

I have an element div which is created by js, i want to get it class.
I try to getElementsByClassName('lt-label')(it works), than i want to check if lt-label has class lt-online and if it true the another block on the page is block.
My code:
$(document).ready(function() {
if (document.getElementsByClassName) {
var redTags = document.getElementsByClassName('lt-label');
if (redTags.is(".lt-online")) {
$("#l-b-wrapper").css({
'display': 'block'
});
};
};
});
But it doesn't work. Where i have mistake?
I give a link only because the html code is big and i can't show my problem full .Site http://www.zemelushka.ru/test/
lt-label - is a right page widget button
l-b-wrapper - left page widget button
You are mixing native and jQuery, Use jQuery object since document.getElementsByClassName will return you an array-like object and they don't have jQuery methods
$(document).ready(function() {
if ($('.lt-label').is(".lt-online")) {
$("#l-b-wrapper").css({
'display': 'block'
});
};
});
You have a really odd mix of native JS and jQuery which is causing the problem.
getElementsByClassName returns an array of DOMElements which do not have the is() method. If you use jQuery to select your elements you can both avoid the problem and shorten your code:
$(function() {
if ($('.lt-label').hasClass('.lt-online')) {
$("#l-b-wrapper").show();
}
});
Note that if there are multiple .lt-label elements found you may need to loop over them, depending on the behaviour you require.
To work with jquery methods you need jQuery Object otherwise you'll get error: method is undefined. So, you may also wrap javascript object with jquery like this:
if ($(redTags[0]).is(".lt-online")) {
Where, redTags is wrapped by jQuery ie. $() and we use [0] for first element as getElementsByClassName result array-like object.
But I would choose simply jQuery object while I work with jquery for simplicity:
$('.lt-label') instead of document.getElementsByClassName('lt-label');
As you should know jQuery has it's own dictionary of methods and it works only with jQuery objects. And you are trying to bind a jQuery method .is() to a dom object which causes in error because .is() is available only for jq objects.
So this would do it (creating a jq wrapper):
$(redTags).is(".lt-online")
and you can shorten it like:
$(document).ready(function() {
var redTags = $('.lt-label');
$("#l-b-wrapper").css({
'display': function(){
return redTags.is(".lt-online") ? "block" : "none";
}
});
});
If you just want to show/hide the element then you can use .toggle(boolean) method:
$(document).ready(function() {
var redTags = $('.lt-label');
$("#l-b-wrapper").toggle(redTags.is(".lt-online"));
});

set element width or height using jquery

Lets say I want to assign element's width to itself. For example, I have a div with content and I want to assign style="width:..." it.
Then in jQuery I do:
elem.width(elem.width());
Which looks for me totally wrong since it looks like how can I set the width by getting it..
Is there any better way to do it?
try this
document.getElementById('divName').style.width = '10px';
You can do this
$(function() {
$("#mainTable").width(100).height(200);
});
This has 2 changes, it now uses .width() and .height(), as well as runs the code on the document.ready event.
Without the $(function() { }) wrapper (or $(document).ready(function() { }) if you prefer), your element may not be present yet, so $("#mainTable") just wouldn't find anything to...well, do stuff to.
Better to add CSS using JQuery following way :
$(function() {
$("#test").css({
width : '30px',
height : '30px'
});
});
If you prefer the style, you could use jQuery's .css() method:
$('.element').css('width', $('.element').width());
If you have multiple elements with the same class (but different widths) you can do this:
$('.yourClass').width( function(id, width) {
return width;
});
See the docs for explanation.

I want to check if `id` has no content

I want check between id that get in var span, if empty was between it put css for input but it not work. how can fix it?
var span = '#'+$('.valid').closest('.auto_box').find('span').attr('id');
if ($(span+':empty').length != 0) {
//alert('ok')
(this).closest('.auto_box').find('input').css('background-color','#000');
}
See here my full code: http://jsfiddle.net/Pjqv2/2/
You are using (this) instead of $('.valid') or whatever you meant with it. Also, you are doing this the wrong way; .find('span') returns the jQuery objects set for that span.
You don't need to get it's ID and then check on that ID again. More importantly, your code seems the need to run on multiple instances of .auto_box. For that, you need to iterate on the set found by (".valid").closest(".auto_box"), which you can do with the jQuery .each() (.each() in jQuery docs) like this:
var autoBoxes = $(".valid").closest(".auto_box");
autoBoxes.each(function(){
if ($(this).find("span").is(":empty")) {
$(this).find("input").css("background-color", "#000");
}
});
Your updated jsfiddle with this script: http://jsfiddle.net/dvir_azulay/Pjqv2/4/
Change (this) to $(span). I updated your fiddle to reflect this change.

Can you use jQuery's $(this) in a one-line code to modify elements?

I'm working on a placeholder function in jquery. Right now, I just want the form element to change its value to whatever its placeholder is. I tried the following code:
$('input:text').val($(this).attr('placeholder'));
But it doesn't work. After testing it a little, I realized the problem is with using $(this) in that context. How can I change this so that it will loop through all form elements and change their value to their placeholder attribute?
$('input:text').val(function() {
return $(this).attr('placeholder');
});
or:
$('input:text').attr('value', function() {
return $(this).attr('placeholder');
});
And here's a live demo.
Most of these setter jQuery functions provide a way to specify a function whose return value will be used. This is a way to make use of $(this).
$('input:text').val(function () {
return $(this).attr('placeholder');
});
jQuery val() Reference

Categories