Hide div if facebook comments are 0 - javascript

I'm using Facebook social plugin and everything works fine. I want to hide the div of my "chat bubble"
if
<span class="fb-comments-count" data-href="[article URL]"></span>
is zero for each article loaded on my homepage and ofcourse keep the not zero ones.
Also additional information, I'm using a "show more" button to load other articles using ajax as well.
I already tried using http://graph.facebook.com/ to get the information whether the address contains comments and it worked, but because I needed to ping http://graph.facebook.com/ for each article, my page loading times was abysmal so I removed that.

Create a function iterate over span having "fb-comments-count" class. And find if the text of this span is zero or not. If it's zero, get the parent of this class(Article DIV) and hide the bubble DIV using hide() method.
https://api.jquery.com/each/
//for iterating .fb-comments-count
http://api.jquery.com/text/
//for getting get count from span
https://api.jquery.com/parent/
//to get the parent DIV by class or ID of span
http://api.jquery.com/hide/
//to hide the perticular div by class or ID.
Call this function every time you fetch the articles using AJAX.
e.g.
function yourCustomFunction() {
$('span.fb-comments-count').each(function(index) {
var count=$(this).text();
if(count==0) {
var parentDiv=$(this).parent('article.yourParentDivClass');
parentDiv.find('.bubbleDiv').hide();
}
});
}

The span is given the class 'fb_comments_count_zero' if there are no comments, so you can set that class to be display:none in your styleshet

Related

Hide all elements except the given data-* attribute with jQuery

I'm making a menu if someone clicks on one object it should filter all of them accordingly (i.e: all projects, completed projects a.s.o. I have a jQuery to take care of this like this (I added the .not() recently, before adding it this script worked):
$("#completed").click(function(){
$('.project_wrapper[data-category="completed_projects"]').not(this).hide();
});
I have figured out that I should use .not() to .hide all objects that don't have the given [data-category] or am I doing this wrong?
Edit
The HTML:
The Menu:
<ul class="project_menu>
<li id="complete">Completed Projects</li>
</ul>
The Projects:
<div class="project_wrapper" data-category="completed_projects">The projects</div>
Edit
Got it working thanks to #Nitha & #Sam Hollenbach thanks!
Edited a bit myself but here is the final jQuery code I've got:
jQuery(document).ready(function($){
// Show all
$("#all").click(function(){
$(".project_wrapper").show();
});
// Complete
$("#complete").click(function(){
$(".project_wrapper:not([data-category='completed_projects'])").hide();
$(".project_wrapper[data-category='completed_projects']").show();
});
});
Update
Instead of using .show and .hide I used .css("visibility", "collapse") & .css("visibility", "visible") show and hide seemed to bug out for me in WordPress.
The below code will hide all the project_wrapper div with data-category not equal to "completed_projects" and will show the project_wrapper div with data-category equal to "completed_projects"
$(".project_wrapper:not([data-category='completed_projects'])").hide();
$(".project_wrapper[data-category='completed_projects']").show();
I believe what you're asking is to hide all elements within .project_wrapper except for the .project_wrapper[data-category="completed_projects"] element. In that case I believe you can do this
$('.project_wrapper *').not('.project_wrapper[data-category="completed_projects"').hide()​;
Or if you want to remove everything in the body
$('body *').not('.project_wrapper[data-category="completed_projects"').hide()​;
This will remove all elements within .project_wrapper or body, subtract the one with the correct data-category, and then hide all the others.
Source

jQuery generating content from generated content

I am using a database to create divs and then naming them from a field in a database.
Within this div is a "delete" link that I'd like to be able to create a div below the original div with a message such as "are you sure you want to delete this?"
But my issue comes to when the database has to generate more than one of these original divs, meaning that the "delete" link will be used more than once in different places or the different divs.
I am unsure on how to create a Javascript/jQuery script where it would:
1. check what the ID of the parent div is (div#parent -> ul -> li -> a).
2. generate a new div below the parent div (not inside).
3. once an option is selected, remove the generated div.
Heres an example of the layout that I'd like to work with:
link to image
As you can see, the generated jQuery div would be outside of the parent div it also has the id of the parent div with "_delete" added onto the end. The functions are there as an example for naming the functions...
Would this be possible?
EDIT - I have gotten it somewhat working, now the issue is when it creates the extra div it doesn't stop you from making more than one... How can I limit this?
What I have done so far
function action() {
var visable = false;
if(visable==false) {
$("#foo").append('
<div id="action_foo" class="action-warn center">
Are you sure you want to delete "<span>foo</span>"?
Yes / No
</div>
')
visable = true;
} else if(visable==true) {}
}
Yes it is possible.
$('#foo_delete').sibling('#parent') will allow you to select "parent".
http://api.jquery.com/siblings/
Try using insertAfter.
http://api.jquery.com/insertafter/
You can remove generated div also with sibling.
Try calling $('#parent').sibling('#foo_delete').remove() on parent's delete anchor.
Try this:
$(document).ready(function(){
$('#foo ul li.right').click(function(){
var _parent = $(this).parent(), // gets immediate parent which is ul
_gparent = _parent.parent(); // gets grandparent which is #foo
$('<div id="foo_delete" class="action-warn center">-Delete Warning Text-</div>').insertAfter(_gparent); // insertAfter(); puts the content right after _gparent.
});
$('#foo_delete a').click(function(){
$('#foo_delete').remove();
});
});

I'm having difficulty appending a class

I originally couldn't think of a way to append an additional class to an li element which had a class that other li elements had. I wanted to only add a class to that specific li element that I clicked a select button on and the solution was "On the click of the button, you can use .closest() to find the ancestor li element". The solution was a jquery solution and it works fine but now I'm having an additional problem. First, here's what I originally posted and the solution I was given along with the fiddle and then I will explain what my new problem is and would appreciate the help. So my original post:
"Ok so my script allows me to input text in a textarea element and add it to a li element within an ordered list with the id "Glist". Not only is text added to each li I add to the ordered list, but the additional things below are added as well and they all just display additional images using CSS. One of the classes, "Selimg" displays a sprite image of a button that says "select". Now each li element I add to my ol has all of the elements below as well as the classes. So each li element will have a div with a "Selimg" class that displays an image of a button that says select for example. When I click this div with the class Selimg, a new class named "Selected" will be added to the div which will change the background color of the li to indicate that it has been selected. The problem is, I want to only add the "Selected" class to the div with the Selimg class that I've clicked, not all li elements with "Selimg" classes. How can I do that with an onclick event handler or any other way using js or jquery? Here's the html:
<ol id="GList">
<li class="MyList">
<p class="bulletp"></p>
<!--This Selimg class displays an image of a button that says select-->
<div class="Selimg"></div>
<!--When a user presses this select button, I want to append a class only to the specific li element the user has pressed the select button on. -->
<div class="edit1"></div>
<div class="Del"></div>
<div class="progress"></div>
<div class="ShowMore"></div>
<div class="CheckedGoal"></div>
<div class="PCompetePercent"></div>
<div class="ShowMoreBlock"></div>
<div class="goalTxt"></div>
</li>
</ol>
The solution I was given:
"On the click of the button, you can use .closest() to find the ancestor li element"
$('.Selimg').click( function() {
$(this).closest('li').addClass('someclasss')
//or $(this).parent().addClass('someclasss') since the li is the parent of the button
})
here's the fiddle demonstrating the solution: http://jsfiddle.net/arunpjohny/fSMDv/2/
And now for the new issue. For some reason, the jquery solution was not working on it's own. Somehow, the jquery code above only worked when I placed it into a js function like this:
<script>
function runSel() {
var $li = $('.Selimg').closest('li').addClass('liselected');
$li.siblings().removeClass('liselected');
}
</script>
I also have a function that's called whenever I want to add another item to the list.
//This is only the part of the code that creates the div that I style to look like and be used as a button that says select. There's more code that also creates the li element itself and a few additional things but all for design. Nothing important.
var Selimg = document.createElement('div');
Selimg.setAttribute("class", "Selimg");
Selimg.setAttribute("onclick", "runSel();");
entry.appendChild(Selimg);
What this does is, create the div with the class "Selimg" which will be an image of a select button added to my list item and then it's given the onclick attribute that calls the runSel() function above as you can see. It works. However it only works once. The fiddle example demonstrates what I'm looking for. So now, when I add an item to the list, and click the select button on it, the function "runSel" is called which adds a class called "liselected" and liselected just changes the background color because the rules for each property in the css, have "!important" so the background color overrides the current one. It works, but like I said it only works once. After I add another item, and press the Select button on that one (which is made from the styles from the Selimg class), the liselected class is removed from the other li element yet the second li element that I just clicked the select button on, only causes the liselected class to be removed from the first but it's not added after that to the second li item, the current one. So, when i add multiple li, they will contain things like text and a div styled to look like a button that says "select" and so when I click "select" on an li, I want then for that specific li to have the liselected class appended and when I select the "select" button on another li, I want the class liselected to be removed from the other li element it was on and added to that one.
The jQuery solution will work fine... the problem is you are dealing with dynamically created elements... so need to use event delegation
$(document).on('click', '.Selimg', function() {
$(this).closest('li').addClass('someclasss')
//or $(this).parent().addClass('someclasss') since the li is the parent of the button
})
Also from what I understand you have not added the script in a dom ready handler
Demo: Fiddle
Not sure why you have written a book for such a small issue. I mean, I got tired of reading what you wrote after the first 30 lines of not getting to the point of the question.
Use: $(this).parent('li').addClass("...") instead.
jsFiddle

Fadeout all nested divs

On my page I'm trying to do smth like that: Lets say, when we click on some link with id min_reg it animates div with idftr_form_cntr, and shows another div tcr_form_cntr within.
There are 3-4 links that does same function but shows another div within ftr_form_cntr. Well if user clicked one of this links for the first time then there is no problem. But if user already clicked (I mean if ftr_form_cntr already opened) I want to just fadeOut all existing divs nested to ftr_form_cntr and fade in one another div (or swap existing div with another one).
Take a look at this line tcr_form_cntr.fadeIn(1000). What do I need to do before this line to fadeOut all nested divs?
My function look like this:
$(min_reg).click(function () {
if($(ftr_form_cntr).hasClass('opened')){
$(ftr_form_cntr)...<fadeOut all nested divs>
tcr_form_cntr.fadeIn(1000);
return;
}
ftr_form_cntr.show().stop(true, true).animate({
height:"170"
},1000).addClass('opened');
tcr_form_cntr.fadeIn(1000);
});
Assuming that ftr_form_cntr is a string variable holding the jQuery selector for your container element, you can select all the div elements inside and fade them like this:
$(ftr_form_cntr + " div").fadeOut();
Have a look at the jQuery doco on selectors, specifically the "descendant selector".
If ftr_form_cntr is not a string variable but is actually, say, a reference to a DOM element or something then another way to select certain nested elements is using the .find() method, which gets descendants of the elements in your existing jQuery object according to another selector you provide:
$(ftr_form_cntr).find("div").fadeOut();
Your function could look like this:
$(min_reg).click(function () {
var animated_div = $(ftr_form_cntr);
if(animated_div.hasClass('opened')){
animated_div.find('div').fadeOut();
tcr_form_cntr.fadeIn(1000);
return;
}
animated_div.show().stop(true, true).animate({
height:"170"
},1000).addClass('opened');
tcr_form_cntr.fadeIn(1000);
});
What I did is:
I cached the element you work on ($(ftr_form_cntr)),
used .find() jQuery method to get all the divs you want to fade out,
Did it help? Please make sure that both ftr_form_cntr and tcr_form_cntr are defined and first is eg. selector, but the second must be jQuery object.

jQuery removeClass except on current id

[ Live Demo ]
I have a navigation menu that displays a certain state when hovered and also displays text in a different div.
In the event that the user does not interact with the menu, the divs auto cycle on their own and the navigation menu displays the corresponding hover state as if the user were interacting.
However, as it is cycling, if the user hovers over another link on the navigation menu, I need to removeClass on the previously highlighted element.
How do I write, "if id is not currently hovered id, then removeClass('hoverBold') on all other navigation links"
Look at jQuery not().
Something like...
$('.myMenu').hover(function() {
$('.myMenu').not(this).removeClass('hoverBold');
});
Just add this to hoverIn:
links.removeClass('hoverBold');
You don't need to take the class off the other elements, because the current element, a:hover.sliderLinks, shares styling with hoverBold
Working example: http://www.jsfiddle.net/MXSkj/1/
Something like this?...
$('#nav li').mouseover(function(){
//remove from others
$('#nav li').removeClass('hoverBold');
//add to this
$(this).addClass('hoverBold')
});
one way to do this would be to remove the hoverBold class on all links and add the it on the current link.
$(".sliderLinks").hover(function(){
$(".sliderLinks").removeClass("hoverBold");
$(this).addClass("hoverBold");
},function(){
//..resume the automatic behaviour
});
Other would be to use the .is() method inside the function passed to $(".sliderLinks").each() to see if its current element
Look at .filter
$(".myMenu").click(function() {
// store current object
var that = this;
$(".myMenu").filter(function() {
// check object in list is not current object
return this != that;
}).removeClass("hoverBold");
});
Basically you pass a filtering function and every object is tested. If the filter returns false (i.e. this == that) then the object is removed from the list.

Categories

Resources