How can I hide a article if the name is empty.
I am using some articles on my site to display certain information.
<article name="<?php echo $name[0];?>">
<p>Content</p>
<article>
How can I hide that article if the name is empty or there is another article with the same name?
You can try this (http://jsfiddle.net/v6at2rhj/):
$( document ).ready(function(){
var articles = [];
$("article[name]").each(function(){
if ($(this).attr("name") == "")
{
$(this).hide();
}
else
{
if (articles.indexOf($(this).attr("name")) > -1 )
{
$(this).hide();
}
else
{
articles.push($(this).attr("name"));
}
}
});
});
On page load it finds all articles with the name attribute (empty or not). Then it iterates over them. If the attribute is empty it will hide the element. If not it will check if the name of the element is in the articles array. If so hide the element, if not add it to the array.
[].forEach.call(document.querySelectorAll('article[name=""]'), function(article) {
article.style.display = 'none';
});
This code will look for each article with a blank name attribute, and set it's display to none, effectively hiding it. You could go a step further and remove it from the DOM completely, if you wish.
you should give the article a class for example
and then add this code to your javascript
$(.article-class).on('each',function() {
if ($(this).attr('name')=='')
{
$(this).hide()
}
)};
Try
$("article[name]:has(p:contains('Content'))").hide();
$("article[name]:has(p:contains('Content'))").hide()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<article name="<?php echo $name[0];?>">
<p>Content</p>
<article>
Here is an example:
$(document).ready(function(){
$('article').each(function (i) {
var name = $(this).attr('name');
var articles = $("article[name='"+ name +"']:visible")
if(name == "" || articles.length > 1)
{
$(this).hide();
}
});
})
Try it out here.
Related
The code that i am writing is for an application where you select an icon and you get the css line displayed so you easily copy paste it and use it for another project. I'm having trouble with the $(this) selector. I have several divs with the "glyph-holder" class and it doesn't matter wich one I press, it always changes the "copy_text" div's value to the same class, the first one. I want it to change it to the div that i pressed.
The html that i have is:
<div id="copy_text">Select icon</div>
<div class="glyph-holder">
<div class="glyph">
<div class="icon-flip-horizontal"></div>
</div>
<div class="beschrijving-bij-glyph">
icon-flip-horizontal
</div>
</div>
The javascript that i currently have is this:
$(document).ready(function(){
var displayText = "Empty";
$(".glyph-holder").click(function(){
if($(this).has("icon-flip-horizontal")){
displayText = "icon-flip-horizontal";
}else if($(this).has("icon-flip-vertical")){
displayText = "icon-flip-vertical";
}
$("#copy_text").text(displayText);
});
});
Your selector in has() is missing the . prefix for the class. You also need to check the length property of the resulting jQuery object. Try this:
var displayText = "Empty";
$(".glyph-holder").click(function() {
if ($(this).has(".icon-flip-horizontal").length) {
displayText = "icon-flip-horizontal";
} else if ($(this).has(".icon-flip-vertical").length) {
displayText = "icon-flip-vertical";
}
$("#copy_text").text(displayText);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="copy_text">Select icon</div>
<div class="glyph-holder">
<div class="glyph">
<div class="icon-flip-horizontal"></div>
</div>
<div class="beschrijving-bij-glyph">
icon-flip-horizontal
</div>
</div>
You are targeting div by id so it will target only one div. You can get the copy_text div by the div using prev function.
$(document).ready(function(){
var displayText = "Empty";
$(".glyph-holder").click(function(){
if($(this).has(".icon-flip-horizontal")){
displayText = "icon-flip-horizontal";
}else if($(this).has(".icon-flip-vertical")){
displayText = "icon-flip-vertical";
}
$(this).prev().text(displayText);
});
});
You're not currently specifying that the has is looking for a class, also .has() returns a jQuery object and therefore .length should be used to test for the number of elements. Try this instead.
$(document).ready(function(){
var displayText = "Empty";
$(".glyph-holder").click(function(){
if($(this).has(".icon-flip-horizontal").length){
displayText = "icon-flip-horizontal";
}else if($(this).has(".icon-flip-vertical").length){
displayText = "icon-flip-vertical";
}
$("#copy_text").text(displayText);
});
});
Note, the . in .has(".icon-flip-horizontal") is important since it's referencing a class.
hello everyone javascript don't add the class to html
$(".ocmessage").each(function(){
var text = $(this).find('p').html();
if(strpos(text,"<b>"+name+"</b>")!==false) $(this).addClass("quoteme");
});
this code should detect if in <p>...</p> there are name of some member and if there is javascript should add class quoteme
how can i fix it?
I think you mean this. BTW, name isn't defined.
var name = ''; // change the value
if(text.indexOf("<b>"+name+"</b>") > -1) {
$(this).addClass("quoteme");
}
Assuming ocmessage is a div or another contain class.
Take a look at : http://jsfiddle.net/40vv7dbk/
$(".ocmessage").each(function () {
var $this = $(this);
var text = $this.find('p').html();
var name = "Ben"
// Will be -1 if not found.
if (text.indexOf(name) > -1) {
$this.addClass("quoteme");
}
});
What it is doing, is when the document is ready, going through all the Divs with the class ocmessage, looking for a tag, and then checking if a name is in there. If it does, I add the class quoteme.
Your elements with class ocmessage may contain more than one paragraph. So inside the first each-loop we have to do a second loop through all <p> like so:
$(".ocmessage").each(function(){
var $T = $(this);
$T.find('p').each(function() {
var text = $(this).html();
// find username and prevent multiple class adding
if(text.indexOf("<b>"+name+"</b>") > -1) {
$T.addClass("quoteme"); return false; // stop loop when class is added
}
});
});
Working FIDDLE here. Credits to Amit Joki.
This is a very poor way to accomplish the task. Here's the more standard jquery way to do it.
$(".ocmessage").has('p b:contains('+name+')').addClass("quoteme");
//style
.TemplateBox1{display:none;}
//Html
<div class="TemplateBox1" id="9"> 1 </div>
<div class="TemplateBox1" id="10"> 2 </div>
<div class="TemplateBox1" id="11"> 3 </div>
//jQuery
$('div', this).each(function (e) { //Do something });
This is a part from my code, at start the divs display (CSSproperty) is none (not shown) and after the user click on a certain button the property of the div changed to block (shown). I need to select only the divs that their property is display:block using jQuery, I tried :
$('div', this).**css("display")=="block"**.each(function (e) { //Do something }); - didn't work..
What do I need to add to my jQuery...
Try to use :visible selector,
$('div:visible')
It seems that you are using TemplateBox1 class to hide those elements, so you can write in this manner too, that is by using :not() selector
$('div:not(.TemplateBox1)')
Try this : :visible selector for div
$(this).find('div:visible').each(function(){
// do stuff here
});
one way is $('div:visible')
another way is (Demo)
$('.TemplateBox1', this).each(function (e) {
var $css = $(this).css('display');
if($css == 'none'){
$(this).css('display','block')
}
});
Why not use pure JS ?
var list = document.getElementsByTagName("div");
foreach(var i = 0;i < list.length, i++)
{
if(list[i].style.display == "block")
{
// do Something;
}
}
I'm in a bit of a pickle. What I'm trying to achieve is to remove a div IF it is empty and then do what I have to afterwards which is the easy bit. The hard part is trying to remove the empty tags. I'm using DNN and it likes to put in empty tags like p and br. I want to be able to remove them before performing my check. Here is my code so far
$(document).ready(function(){
var element = document.getElementsByTagName("p"); //Need to remove all tags. not just P
element.parentNode.removeChild(element); //Doesn't target which child
if( !$.trim( $('#container2Test').html() ).length ) {
alert("empty");
$('#container2Test').remove();
$('#container3Test').css({'width' : '50%', 'background-color' : '#3F0'});
$('#container3Test').append("This is some content");
}
else{
alert("not empty");
}
});
The html:
<div id="container1Test" style="width:30%; height:10em; background-color:#000;">
</div>
<div id="container2Test" style="width:50%; height:10em; background-color:#666;">
<p></p><br /><p></p>
</div>
<div id="container3Test" style="width:20%; height:10em; background-color:#F66;">
</div>
I've tried many options to try and remove the tags but I've had no such luck :( Please help!
As far as your container2test block goes, try using .text() instead of .html(). This will ignore the empty tags that get inserted and focus only on the text content.
Regarding the piece above it, I'm not quite sure what you're trying to achieve. I don't think it's needed if you implement the change I mentioned earlier.
I think this will be the solution you'll need... Check out that:
var elmsToClear = $('#container1Test, #container2Test, #container3Test');
elmsToClear.each(function(){
while($(this).find('*:empty').remove().length); // recursivly kill all empty elements
if(!$(this).find('*').length){ // if no elements left - kill the parent
alert($(this).attr('id') + ' is empty...');
$(this).remove();
}
else{ // there is something in here...
alert($(this).attr('id') + ' is NOT empty...');
}
});
>>> The JS-Fiddle of the Problem with Solution <<<
Greetings ;)
Notice that getElementsByTagName is plural:
var elements = document.getElementsByTagName("p");
for (var n=0; n < elements.length; n++) {
var element = elements[n];
element.parentNode.removeChild(element); // should work now
}
There is a removeChild() function. So why can't you do something like this:
$('div').each(function(){
if(this.innerHTML == ''){
this.parentNode.removechild(this);
}
});
(Haven't tested this)
I was taking a look at http://www.zenfolio.com/zf/features.aspx and I can't figure out how they are doing the accordion style expand and collapse when you click on the orange links. I have been using the Web Developer Toolbar add-on for firefox, but I have not been able to find anything in the source of the page like JavaScript that would be doing the following. If anyone knows how they are doing it, that would be very helpful.
This is actually unrelated, but if all you answers are good, who do I give the answer too?
They're setting the .display CSS property on an internal DIV from 'none' to '', which renders it.
It's a bit tricky, as the JS seems to be in here that's doing it:
http://www.zenfolio.com/zf/script/en-US/mozilla5/windows/5AN2EHZJSZSGS/sitehome.js
But that's basically how everyone does this. It's in there, somewhere.
EDIT: Here it is, it looks like:
//... (bunch of junk)
zf_Features.prototype._entry_onclick = function(e, index)
{
var cellNode = this.dom().getElementsByTagName("H3")[index].parentNode;
while (cellNode.tagName != "TD") cellNode = cellNode.parentNode;
if (this._current != null) this.dom(this._current).className = "desc";
if ("i" + index != this._current)
{
cellNode.className = "desc open";
cellNode.id = this.id + "-i" + index;
this._current = "i" + index;
}
else this._current = null;
zf_frame.recalcLayout();
return false;
};
Basically, what they're doing is a really roundabout and confusing way of making the div inside of TD's with a class "desc" change to the class "desc open", which reveals its contents. So it's a really obtuse roundabout way to do the same thing everyone does (that is, handling onclick to change the display property of a hidden div to non-hidden).
EDIT 2:
lol, while I was trying to format it, others found it too. =) You're faster than I ;)
Using jQuery, this effect can be built very easily:
$('.titleToggle').click(function() {
$(this).next().toggle();
});
If you execute this code on loading the page then it will work with any markup that looks like the following:
<span class="titleToggle">Show me</span>
<div style="display:none">This is hidden</div>
Notice that this code will work for any number of elements, so even for a whole table/list full of those items, the JavaScript code does not have to be repeated or adapted in any way. The tag names (here span and div) don't matter either. Use what best suits you.
It is being done with JavaScript.
When you click a link, the parent td's class changes from 'desc' to 'desc open'. Basically, the expanded text is always there but hidden (display: none;). When it gets the css class of 'open' the text is no longer being hidden (display: block;).
If you look in the sitehome.js and sitehome.css file you can get an idea about how they are doing that.
btw I used FireBug to get that info. Even though there is some feature duplication with Web Developer Toolbar it's worth the install.
They're using javascript. You can do it too:
<div id="feature">
Feature Name
<div id="desc" style=="display:none;">
description here...
</div>
</div>
<script type="text/javascript">
function toggle()
{
var el=document.getElementById('desc');
if (el.style.display=='none')
el.style.display='block'; //show if currently hidden
else
el.style.display='none'; //Hide if currently displayed
}
</script>
The function above can be written using Jquery for smooth fade in/fade out animations when showing/expanding the descriptions. It has also got a SlideUp and Slidedown effect.
There is a lot of obfuscated/minified JS in their master JS include. It looks like they are scraping the DOM looking for H3's and checking for table cells with class desc and then processing the A tags. ( or some other order, possibly ) and then adding the onclick handlers dynamically.
if (this._current != null) this.dom(this._current).className
= "desc"; if ("i" + index != this._current) { cellNode.className = "desc open"; cellNode.id = this.id
+ "-i" + index; this._current = "i" + index; }
http://www.zenfolio.com/zf/script/en-US/safari3/windows/5AN2EHZJSZSGS/sitehome.js
The script is here.
The relevant section seems to be (re-layed out):
// This script seems over-complicated... I wouldn't recommend it!
zf_Features.prototype._init = function()
{
// Get a list of the H3 elements
var nodeList = this.dom().getElementsByTagName("H3");
// For each one...
for (var i = 0; i < nodeList.length; i++)
{
// ... set the onclick to be the function below
var onclick = this.eventHandler(this._entry_onclick, i);
// Get the first <a> within the H3 and do the same
var node = nodeList[i].getElementsByTagName("A")[0];
node.href = "#";
node.onclick = onclick;
// And again for the first <span>
node = nodeList[i].getElementsByTagName("SPAN")[0];
node.onclick = onclick;
}
};
zf_Features.prototype._entry_onclick = function(e, index)
{
// Get the parent node of the cell that was clicked on
var cellNode = this.dom().getElementsByTagName("H3")[index].parentNode;
// Keep going up the DOM tree until we find a <td>
while (cellNode.tagName != "TD")
cellNode = cellNode.parentNode;
// Collapse the currently open section if there is one
if (this._current != null)
this.dom(this._current).className = "desc";
if ("i" + index != this._current)
{
// Open the section we clicked on by changing its class
cellNode.className = "desc open";
cellNode.id = this.id + "-i" + index;
// Record this as the current one so we can close it later
this._current = "i" + index;
}
else
this._current = null;
// ???
zf_frame.recalcLayout();
return false;
};
Edit: added some comments
Unfortunately their code is in-lined and hard to read (http://www.zenfolio.com/zf/script/en-US/mozilla5/windows/5AN2EHZJSZSGS/sitehome.js), but this looks quite simple to implement... something along these lines (using prototypejs):
<script>
var showHide = {
cachedExpandable: null
,init: function() {
var containers = $$(".container");
for(var i=0, clickable; i<containers.length; i++) {
clickable = containers[i].getElementsByClassName("clickable")[0];
Event.observe(clickable, "click", function(e) {
Event.stop(e);
showHide.doIt(containers[i]);
});
}
}
,doIt: function(container) {
if(this.cachedExpandable) this.cachedExpandable.hide();
var expandable = container.getElementsByClassName("expandable")[0];
if(expandable.style.display == "none") {
expandable.show();
} else {
expandable.hide();
}
this.cachedExpandable = expandable;
}
};
window.onload = function() {
showHide.init();
};
</script>
<div class="container">
<div class="clickable">
Storage Space
</div>
<div class="expandable" style="display: none;">
Description for storage space
</div>
</div>
<div class="container">
<div class="clickable">
Galleries
</div>
<div class="expandable" style="display: none;">
Description for galleries
</div>
</div>
Its also caching the earlier expandable element, so it hides it when you click on a new one.