I need to change the CSS class name of all the elements in a page with a particular class name (.k-textbox). I tried the below code but it does not hit inside the .each() function
<script>
$(document).ready(function () {
$(".k-textbox").each(function () {
//alert("a");
$(this).removeClass("k-textbox");
$(this).addClass("input-medium");
});
});
</script>
In the page i have a 3rd party grid control. the CSS class i have mentioned is inside that third party grid control.
below is the DOM object:
You should try to use chaining API provided by jQuery library:
$(".k-textbox").removeClass("k-textbox").addClass("input-medium");
edit:
As long as the elements are created dynamically you could try to run this code after those elements are created. But if you don't know when they are inserted into the code and doesn't have control over them you could try write simple watch function, i.e:
var watchTimer = setInterval(function () {
var inputs = $('.k-textbox');
if (inputs.length) {
// clear interval
clearInterval(watchTimer);
// change class
inputs.removeClass("k-textbox").addClass("input-medium");
}
}, 100);
use addClass() and removeClass()
$(".k-textbox").removeClass("k-textbox").addClass("input-medium");
Related
I have some problems with jQuery.
I have code that is running ok, but I want to add some delay (fade in, etc...) on this both functions.
$(document).ready(function(){
$(".product-item, .rade-test").mouseover(function(){
$('.just-to-define').removeClass('rade-test-div');
$('.just-to-define').addClass('rade-test-div2');
$('.heredefine').removeClass('rade-test');
$('.heredefine').addClass('rade-test2');
});
$( ".product-item, .rade-test" ).mouseout(function() {
$('.just-to-define').addClass('rade-test-div');
$('.just-to-define').removeClass('rade-test-div2');
$('.heredefine').addClass('rade-test');
$('.heredefine').removeClass('rade-test2');
});
});
I tried with
$(".product-item, .rade-test").mouseover(function(){
$('.just-to-define').removeClass('rade-test-div');
$('.just-to-define').addClass('rade-test-div2');
$('.heredefine').removeClass('rade-test');
$('.heredefine').addClass('rade-test2');
}, 2000);
but that's not working from some reason. I don't know why. So here when it have to add class i need fade in/delay/'process time', and i already tried with .fadeIn("slow")
Second what I have problem with this is, I have table foreached in my template, and when mouse is over table (see in jQuery function) it's opening every class that i have write (rade-test-div2 and rade-test2), and when I add .first() it's only first ofc. How can I open only table where is my mouse?
product-item class is in TR element of table, so I can add something like
#php $uniqueId = uniqId(); #endphp
<tr class="product-item {{$uniqueId}}">
But how to write in jQuery to select this $uniqueId? My jQuery code is in another file.
To make an animation, use a CSS "transition" property: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions. Then, when a CSS class will be added to an element, the animation will be triggered.
To manipulate the active element use "this", e.g.:
$(".product-item, .rade-test").mouseover(function(){
var $this = $(this);
$this.find('.just-to-define').removeClass('rade-test-div');
$this.find('.just-to-define').addClass('rade-test-div2');
$this.find('.heredefine').removeClass('rade-test');
$this.find('.heredefine').addClass('rade-test2');
}, 2000);
Example: https://jsfiddle.net/8vjmhztr/2/
I am using the lazyload for a project, it loads images progressively.
https://github.com/verlok/lazyload
When the images are loading, the "loading" class is activated in the <img class = "loading"> ... </ img>
and when it finishes loading, the "loading" class is replaced by the class "loaded"
I want to know if it would be possible to add a class to a div based on the activity of the "loading" class.
I made a rather rustic example, just to demonstrate my goal.
if ($('img').hasClass('loading')) {
$("body").addClass("images-is-loading");
$(".post-thumbnail").addClass("post-images-is-loading");
}
Could someone clarify me? Thanks
You'll need to continuously check for the condition on regular intervals using setInterval . Here is the sample code:
setInterval(function() {
if ($("img.loading").length) {//Checks if there is such element
$("body").addClass("images-is-loading");
$(".post-thumbnail").addClass("post-images-is-loading");
} else {
$("body").removeClass("images-is-loading");
$(".post-thumbnail").removeClass("post-images-is-loading");
}
}, 1000);
If you are using any framework like Angular, data binding takes care of continuously checking the classes being added or deleted.
In other case, you have to use "setInterval" function of JavaScript.
ex:
setInterval (function () {
// Your Code...
}, some frequency of time)
setInterval isnt great for this in my opinion, maybe it is better to look for the build in callback events like:
var lazyLoadInstance = new LazyLoad({
elements_selector: ".lazy",
class_loading: "loading-img",
callback_enter: function(el) {
$(body).addClass('loading');
},
callback_loaded: function(el) {
$(body).removeClass('loading');
}
});
Sorry, I know the title might be strange. Basically, I have the code below:
jQuery(document).ready(function($) {
$('body.single article.project').addClass('grayscale');
});
The problem is that adding the class of grayscale on load initializes the plugin that corresponds to that class, which I don't want to do. I would like to add the class but not initialize the plugin.
Would I have to somehow add the class a few milliseconds after load? How would I go about this?
If the plugin has a self initialization script, then that will be running in dom ready handler. So one solution could be is to use a timer to delay your addClass() by few milliseconds
jQuery(function ($) {
setTimeout(function () {
$('body.single article.project').addClass('grayscale');
}, 100)
});
Using setTimeout you can add the desired class after page load (e.g 100 ms):
$(window).load(function(){
var t=setTimeout(
function(){$("body.single article.project").addClass("grayscale");}, 100)
})
UPDATE: I'm sorry that my thread was misinterpreted by many users. I'll try to be more clear.
I'm using Drupal and I have created three floating banners. On the frontpage there is a block (block1) that displays one floating banner and after refresh the second one is appearing and for the third too.
Like a wrote before these banners has a little X button to stop overflow.
I've putted this script in a one of the banners and it's working great.
<script language="javascript">
function doexpand() {
document.getElementById("block1").style.overflow = "visible";
}
function dolittle() {
document.getElementById("block1").style.overflow = "hidden";
}
</script>
The real problem is that in categories pages I have #block2 and in articles #block3.
These block are displaying the same banners. The code over is working only for a one ID. In this case #block1. document.getElementById is not working for more ID's as I read from other topics.
I've tried with jQuery with two blocks idents like this:
(function ($) {
function doexpand() {
$("#block1,#block2").css("overflow","visible");
}
function dolittle() {
$("#block1,#block2").css("overflow","hidden");
}
})(jQuery);
It's not working.
The firebug/console displays: ReferenceError: doexpand is not defined.
I've tried with a single block too with jQuery like this:
(function ($) {
function doexpand() {
$("#block1").css("overflow","visible");
}
function dolittle() {
$("#block1").css("overflow","hidden");
}
})(jQuery);
and it's displaying the same error.
Note: Drupal has a different wrapping and it's like this:
(function ($) {
//your existing code
})(jQuery);
Please have a look on jQuery Selectors.
I think in your case, it is better to apply style with help of css for multiple elements. e.g. :
<script language="javascript">
function doexpand() {
$('.block').style.overflow="visible";
}
function dolittle() {
$('.block').style.overflow="hidden" ;
}
</script>
Please add class="block" to all of blocks for which you want to apply this style/function, it will apply on all of the blocks having css class "block".
jQuery?
HTML:
<div class="block2"></div>
JS:
function doExpand(selector) {
if ( $(selector).length ) {
$(selector).css({'overflow':'visible'});
}
}
Calling with non ID selector would look like this: (jQuery syntax):
doExpand('.block2');
The above code is perfectly valid in jQuery (which is a JavaScript library).
If you want to use a more typical jQuery code, you can do
$('#block1').css('overflow', 'visible');
You can expend it to multiple id like this :
$('#block1, #block2').css('overflow', 'visible');
You always can get the DOM object from a jQuery object, which means you could also have adapted your code to use jQuery selectors using
$('#block1').get(0).style.overflow="visible";
(this specific example isn't smart : no need to use jQuery if you don't use a complex selector or jQuery functions)
Pretty simple really, jQuery selection is based on css selectors for the most part. These selectors are then translated into an array of dom objects held in a jQuery object.
function doexpand() {
$("#block1").css("overflow","visible");
}
function dolittle() {
$("#block1").css("overflow","hidden");
}
You should never have more than one HTML element with the same ID (Which is why document.getElementById only returns one element)
You can just refeerence block2, block3 directly document.getElementById("block2").style.overflow="hidden" ;
Or use getElementByClassName
var elements = document.getElementsByClassName("yourClass")
Which will pick up all elements with a specific class.
If you want to use jQuery like the other answers are suggesting you can match on the element name. For example:
$('div[id^="block"]').css("overflow", "visible");
This will match all div element where their ID starts with block. You can also use other wildcards such as * for contains and $ for ends with.
Here is your Javascript Code in jQuery. I dont understand what you want do do, but you could pass the params in the function. Example under this code.
<script language="javascript">
function doexpand() {
$("#block1").css({'overflow': 'visible'});
}
function dolittle() {
$("#block1").css({'overflow': 'hidden'});
}
</script>
Here is it
<script language="javascript">
function doexpand(element) {
$("#" + element).css({'overflow': 'visible'});
}
function dolittle(element) {
$("#" + element).css({'overflow': 'hidden'});
}
</script>
Than you could call it like: doexpand("theIDofTheElement");
Alternative to document.getElementById("an_element);
in Jquery is: $("#an_element");
It will work fine in JQuery, it's just that JQuery makes things faster and less verbose.
Thought I'd post here. My first hour on jQuery, actually first programing ever done. Would love to learn whats not right and how it could be better.
$(function() {
function hide_me()
//A place to specify which elements you want hidden, on page load.
{
$("li.credentials").hide();
}
function first_bow()
//The div right_column takes a bow on initial load.
{
$("div#right-column").show("drop");
}
function bigpeek()
//The third column toggles in/out. All elements under div right_column.
{
$("div#right-column").toggle("drop", "fast");
}
function smallpeek()
//Smaller snippets like credentials or user assignment flying in/out.
{
$("li.credentials").toggle("drop", "fast");
}
$(document).ready(function() {
$("*").ready(hide_me);
$("*").ready(first_bow);
$(".btn-new-email").click(bigpeek);
$(".button").click(smallpeek);
$(".icon-delete").mouseover(function() {
$(this).effect("bounce", "fast");
});
});
});
The best thing to learn about programming is how to effectively re-use code. In your code, you have set up some functions that you yourself claim will do a bunch of the same thing. So instead, you could make it better by only writing code to do the repeated task once.
For one example, instead of creating a function where you place a bunch of things that need to be hidden, I would add a class to the elements that should be hidden, and then hide all those elements:
function hide_me()
//Hides anything with the "hide-me-onload" class
{
$(".hide-me-onload").hide();
}
$(function () {
...
}
is the same as
$(document).ready(function() {
...
}
So you can move the method calls from inside your $(document).ready() to be inside your $(function(){}). Also try to use IDs instead of class names wherever possible. Something like this will go through the entire DOM to look for an element
$(".item")
Be more specific
$("#itemID") // use IDs instead of Classes
//If you have to use class name then you can speed up the selector by adding the element tag before it
$("div.item")
Using $("*").ready() within $(document).ready() is redundant... you already know using all of the elements are ready! Also, in general using the universal selector $('*') is very inefficient.
So, the first two lines of your $(document).ready() can just be:
hide_me();
first_bow();
Other than that and a couple of issues with organization and nomenclature you're off to a great start, keep it up!