I am working on a wordpress website in which I am adding class when h1 elements are empty (as shown below) meaning when there is no content inside .featured-block__tag and
.featured-block__title classes.
<h1 class="featured-block__title"></h1>
<h1 class="featured-block__tag"></h1>
Here is the logic I have used in jQuery:
jQuery(function($) {
if ($(".featured-block__title").is(":empty")) {
$(".img-fit").addClass("opacity-pointeight");
}
})
The above code only works when there is no content inside .featured-block__title class.
Problem Statement
I am wondering what changes I need to make in the code above so that it checks both
for .featured-block__tag and .featured-block__title classes.
Also, .featured-block__tag show ::before selector when there is no content inside it.
Why don't you use $(".featured-block__title").html() === "" instead of checking for is(":empty")?
I think it makes much more sense, and you wouldn't have any problem with :before
Try it like this:
$(function() {
if($(".featured-block__tag").html() === "" &&
$(".featured-block__title").html() === "") {
$(".img-fit").addClass("opacity-pointeight");
}
})
Related
I am trying to replace the class of a div with Javascript. I have looked at some posts but it did not seem to help (e.g. Change an element's class with JavaScript). I have a straightforward innerHTML
document.getElementById("colored-title").innerHTML = "Add comments";
HTML is straightforward as well and it works when there is no condition on the class
<div id="colored-title"></div>
I tried many options (I listed them all below) but none of them seems to work.
if (array[current][5] == 4) {
document.getElementById("colored-title").addClass("green-text");
document.getElementById("colored-title").className= "green-text";
document.getElementById("colored-title").className+= "green-text";
document.getElementById("colored-title").setAttribute=("class","green-text");
} else {
// other format
}
document.getElementById("colored-title").innerHTML = "Add comments";
You can add classname throught javascript by .classname='classname'
This should work.check your if condition to see why it is not working
window.onload = function() {
document.getElementById("colored-title").className= "green-text";
}
.green-text {
color: green;
}
<div id="colored-title">
hello
</div>
Hope it helps
If you have jQuery in your project, then setAttribute should look like this:
$("#colored-title").attr("class", "green-text");
You have to use the jQuery selector, not document.getElementById.
Edit: Worth noting, the .attr method can also set multiple things at once:
$("#thing").attr({class:"green-text", title:"green-Object", id:"green-Id"});
This statement will add the correct class to your div:
document.getElementById("colored-title").className= "green-text";
But with the following statement you are changing the class from "green-text" to "green-textgreen-text":
document.getElementById("colored-title").className+= "green-text";
If you have jQuery in your project, then
$("#elem").addClass("myClass");
.myClass {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="elem">
Text
</div>
I'm playing around with Velocity.js and jquery.inview, and I want all the titles on my page to slideDownIn when they come into view. This code works fine for the first title:
$('.movies-title').bind('inview', function(event, isInView, visiblePartX, visiblePartY) {
if (isInView) {
// element is now visible in the viewport
if (visiblePartY == 'top') {
// top part of element is visible
} else if (visiblePartY == 'bottom') {
// bottom part of element is visible
} else {
// whole part of element is visible
$(this).velocity("transition.slideDownIn", 500);
}
} else {
// element has gone out of viewport
$(this).velocity("reverse");
}
});
If I copy and paste the above several times and replace .movies-title with the classes of the other titles, it works as I want it to.
However, that seems like a lot of extra code. I tried changing $('.movies-title') to $(.movies-title, .tv-title, .books-title) but then the animation only works for the last element in the list. I also tried adding a new class called .title to all of the titles and changing .movie-title to .title but that didn't work either.
What am I doing wrong? How can I condense the code?
The best solution is to use a single class on each of these elements since they have something so in common. You might just add title as a class type and apply it to that class.
<div class="title movie-title"></div>
I know you mentioned this in your question, but I can't see why this wouldn't work.
Try using delegate instead of bind for multiples. Also make a unified class for all of them (I just used title)
so like this -
$('body').delegate('.title','inview', function(event, isInView, visiblePartX, visiblePartY) {
Edit - sorry linked wrong fiddle initially
see fiddle http://jsfiddle.net/d1g7sLxq/3/
So I have built some validation in Javascript and when a field has an error the div <div class="form-group">...</div> becomes <div class="form-group has-error">...</div>
I then have a .btn-bar div that contains the button for submitting the form. I have this hidden by default when the page loads:
$(document).ready(function(){
$('.registration-information').hide();
$('.btn-bar').hide();
});
I have a function to show the .btn-bar:
function enableButtons(){
if(noErrors){
$('.btn-bar').slideDown();
}
}
Now obviosuly, the script above doesn't work. More specifically, the if statement. My question, is how do I search for a div that has has-error in the class name on the page? If there is one then the btn-bar does not show, if there isn't any then the btn-bar shows.
It's actually fairly simple in jQuery. Try something like this:
function noErrors() {
return $('.has-error').length == 0;
}
function enableButtons(){
if(noErrors()){
$('.btn-bar').slideDown();
}
}
I separated noErrors() into its own function, in case there are other validation tests you eventually want to add in that aren't related just to the .has-error class.
Good luck!
You can achieve this simply by doing this :
$(document).ready(function(){
$('.registration-information').hide();
$('.btn-bar').hide();
if (!$('.has-error')) {
$('.btn-bar').slideDown();
}
});
It will check to see if any element has the class .has-error , and if it does not ! exist anywhere on the page, it will show the .btn-bar.
I'm making this little html app with a sidebar menu that pops up on click. It works fine except that it only starts to work after the second click. On the first click nothing happens.
CSS:
#menubalk{
margin-left: -260px;
}
HTML:
<div id="menubutton">
<img src="design/images/menu.png" id="menu" onclick="toggle()" alt=""/>
</div>
<div id="menubalk">
<h5>Menu</h5>
</div>
Javascript:
function toggle () {
var el = document.getElementById("menubalk");
var kop = document.getElementById("kop");
var pag = document.getElementById("pagina");
if ( el.style.marginLeft=="-260px" ) {
el.style.marginLeft="0px";
kop.style.marginLeft="260px";
pag.style.marginLeft="260px";
} else {
el.style.marginLeft="-260px";
kop.style.marginLeft="0px";
pag.style.marginLeft="0px";
}
}
I think I might have to set the margin somewhere in the javascript also but I can't figure it out.
All help is greatly appreciated!
style.marginLeft is looking at your inline styles. As you haven't defined any inline style initially style.marginLeft is undefined.
To fix this, you could simply reverse your if/else statement:
if ( el.style.marginLeft=="0px" )
element.style only search for inline style, to get actual style you can use getComputedStyle
i.e.
if ( window.getComputedStyle(el).marginLeft=="-260px" ) {...
Reference: https://developer.mozilla.org/en-US/docs/DOM/window.getComputedStyle
Note: For IE, this only works for IE9 or above.
With this line
if(el.style.marginLeft=="-260px") {
You are checking if the inline style of the element is a specific value. However, this style is set in the css. I recommend adding a className to the menu to expand it. You can check for this classname and add/remove it accordingly:
if ( el.className == "expanded" ) {
el.className = "";
} else {
el.className = "expanded";
}
With this addition to the css:
#menubalk.expanded {
margin-left:0;
}
You say you set the menu style in the JavaScript somewhere but I would actually recommend doing that as part of your initialisation, rather than setting the left margin with CSS.
I suspect (it's hard to see without an example) that on the first click the JavaScript is going straight to the else condition because it's not recognising that you've set the margin in CSS (or elsewhere). Then on the second click, JavaScript has been used to set the left margin so it can read it and perform accordingly.
I am trying to apply a class to a child's parent element if the conditions are true but cannot seem to get it to work. In short, I want to check a table for a cell that is the number "0" and hide its parent row.
I have created a basic jsfiddle of what I have done: http://jsfiddle.net/immbudden/YbZPE/3/
And the snippet of jquery that I have put together:
if ($('#the_table>table>td:contains("0")').length === 1) {
$(this).parent("tr").addClass("hidden");
}
I am still learning jQuery and javascript and this is probably something small, but I can't seem to put my finger on it!
Any help would be much obliged, thanks in advance!
$('td', '#the_table > table').each(function() {
if ($(this).text() === '0') {
$(this).parents("tr").addClass("hidden");
}
});
FIDDLE
Use your browser's developer tools! Or Get Firebug.
With that page loaded, try this in the javscript console:
$('#the_table>table>td:contains("0")')
If that gives you
[ ]
then it's not finding any elements. Then you can try breaking it down, for example, see if this works:
$('#the_table>table>td')
And keep taking out and adding bits of that expression until it produces true or false as you require.
you can do it like this,
$('#the_table table td').filter( function (index) {
return $(this).text() == '0';
}).parent("tr").addClass("hidden");
http://jsfiddle.net/YbZPE/5/
First you have to get teh cell, if you want the first use eq(0):
$cell = jQuery('#the_table tr td:eq(0)');
then you have to put the class on the parent row:
$cell.parent("tr").addClass("hidden");
The following code will do it.
jQuery('#the_table tr td:eq(0)').parent("tr").addClass("hidden");