We Keep Coding

Show div if another div has content

So I don't get why this isn't working. I want to show a Div when another div has a value. I got this code from stackoverflow and it's pretty simple. But it doesn't work for me. No console errors..
$(document).ready(function(){
if ($(".txt").html().length > 0) {
$('.btn-01').show();
}
});
If the html value of .txt is larger then 0 then show btn-01.
But it doesn't. In my web inspector it just says:
<div style="display: block;" class="btn-01"><p>Things</p></div>
If I remove the script it says:
<div class="btn-01"><p>Things</p></div>
So it does do something. I tried changing the show to hide. But no go.
<div style="display: none;" class="btn-01"><p>Things</p></div>
I tried:
$(document).ready(function(){
if ($(".txt").html().length > 0) {
$('.btn-01').addClass('showme);
}
});
btn-01 css:
.btn-01 {
background: #f60;
color: #fff;
border-radius: 2px;
padding: 5px;
text-align: center;
margin: 40px auto 0px auto;
width: 90%;
}
But that didn't work either. Does anyone know whats going on here?
Maybe I should work with an else statement? Help would be much appreciated.
JsFiddle

You need to either set the button to display none prior to the window loading or add an "else" statement to hide the element:
.btn-01{
display:none;
}
OR
$(document).ready(function(){
if ($(".txt").html().length > 0) {
$('.btn-01').show();
}
else
{
$('.btn-01').hide();
}
});
See the fiddle: https://jsfiddle.net/r89gg7tp/
IMPORTANT TO CONSIDER
If you have entered a line break between the starting and closing tags of the element, this will add to the length. You need to set the txt div to be in the following format:
<div class='txt'></div>
It may be better to change your function to this:
$(document).ready(function(){
if ($(".txt").html().trim(' ').length > 0) {
$('.btn-01').show();
} else {
$('.btn-01').hide();
}
});
This way you trim the whitespace before checking.
See the second fiddle: https://jsfiddle.net/r89gg7tp/3/

You need to hide the btn-01 with a "display:none" in the stylesheet and then execute your script.
I think you are having a "display:none !important" which is overriding the jquery show() function inline style.

This might help you.
$(document).ready(function(){
if (!$.trim($(".txt").html())){
$('.btn-01').addClass('showme');
}
});
Please let me know if you've any queries.

You can use .contents() with .toggle():
$(document).ready(function() {
$('.btn-01').toggle($(".txt").contents().length > 0);
});
.btn-01{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="txt">
<h3>Things Title</h3>
</div>
<div class="btn-01">
<p>Things</p>
</div>

You guys where all right. I needed to place the code in some Session file (Ajax). Now its working with the original code and even some that you provide.
Thanks!

Hide/show block with CSS

A previous developer built a webpage with a woman and numbers on it to click for to show services related to a bodypart. You can see the current page here...
http://dermanaissance.com/nos-solutions/
My issue here is that he built the solution with CSS VS using JS or Jquery. I'm trying to hide the other blocks when a specific block has been clicked using what he's already done but am afraid isn't possible only using CSS.
I'm not quite sure how to tackle this one without using Jquery as this is usually how I would approach this, any ideas?
This is the code right now...
<div id="anchor-1" class="nos-anchor">1
<span class="nos-block">
<span class="nos-line"> </span>
<ul>
<li>Lift Sans Chirurgie</li>
<li>Atténuation des Rides</li>
<li>Contour des Yeux</li>
<li>Double-menton</li>
<li>Bajoues</li>
<li>Relâchement du Cou</li>
<li>Ouverture du Regard</li>
<li>Augmentation du Volume</li>
<li>Amélioration du Teint de la Peau</li>
<li>Acné Active</li>
<li>Cicatrices d’Acné</li>
<li>Décolleté</li>
<li>Atténuation des Cicatrices</li>
<li>Photorajeunissement</li>
<li><a href="/taches-pigmentaires-et-melasma/">
Taches pigmentaires et Mélasma</a></li>
<li>Couperose et Rosacée</li>
<li>Varicosités</li>
</ul>
</span>
</div>
and the CSS that makes this solution work...
.page-id-9 #main-content .nos-anchor {
position: absolute;
display: block;
z-index: 9;}
.page-id-9 #main-content .nos-anchor .nos-block {
position: absolute;
display: none;}
.page-id-9 #main-content .nos-anchor .nos-block a {
display: block;}
.page-id-9 #main-content .nos-anchor .nos-line {
display: block;
position: absolute;
top: 20px;}

If you want a pure CSS solution I suggest looking into the Target psuedo element, otherwise -
Here is a pure javascript solution. Just give the divs you are hiding and showing an ID, and call them with the clickable object using onclick="hideShow(sectionID);"
<div style="height:40px; width:40px; background:red;" onclick="hideShow('div1')">
<div id="div1" style="display:none; background:orange; width:15px; height:15px;"></div>
</div>
<div style="width:40px; height:40px; background:yellow;" onclick="hideShow('div2')">
<div id="div2" style="display:none; background:green; width:15px; height:15px;"></div>
<div></div>
</div>
<div style="width:40px; height:40px; background:blue;" onclick="hideShow('div3')">
<div id="div3" style="display:none; background:purple; width:15px; height:15px;"></div>
<div></div>
</div>
var currrentElementShowing;
function hideShow(sectionID) {
if (document.getElementById(sectionID) != currrentElementShowing) {
document.getElementById(sectionID).style.display = "block";
if (currrentElementShowing != undefined) {
currrentElementShowing.style.display = "none";
}
currrentElementShowing = document.getElementById(sectionID);
} else {
}
}
https://jsfiddle.net/cxjndqzu/

Wow "page-id-9" is pretty terrible naming convention (I know you didn't do it, but MAN!).
So, what I would do is create two CSS classes:
"ToggleClass"
"Active"
You would assign "ToggleClass" to all of your list items. Using CSS, you make "ToggleClass" items that ALSO have the "Active" class display how you would like. "ToggleClass" items WITHOUT the "Active" class would be hidden as you would like.
Then, using jQuery (sorry, but I think it has to be done), make the following function:
$(document).ready(function(){
$(".ToggleClass").on("click", function(){
$(".ToggleClass").removeClass("Active");
$(this).addClass("Active");
});
});
This event will fire anytime someone clicks a "ToggleClass" element. First, it removes the "Active" class from ALL elements that have "ToggleClass" (this ensures that you won't simultaneously have two elements with the "Active" class). Next, it adds the "Active" class to the element that was clicked.
Leave a comment and let me know how this works for you - Good luck!

Having looked at your page, you could apply something like this. You'll have to use pure Javascript or Jquery. Since you mentioned JQuery as your preference:
html
<div>
<div class="pill">1</div>
</div>
<div>
<div class="pill">2</div>
</div>
js
$('.pill').click(function(){
$(this).toggleClass('active')
if ($(this).hasClass('active')){
$('.pill').not(this).fadeOut(200)
}else{
$('.pill').not(this).fadeIn(200)
}
});
The idea here is to use Jquery's toggleClass method and to check whether the click element has the active class, and if it does hide the other elements. This should steer you in the right direction
Fiddle

how to hide image by its icon-value

hi everyone i cant find the solution for my question on google. i just want to hide the images using there icon-value
like in the below example i just want to hide the image which have icon-value="1" in the div which have .box class
<div class="box">
<div class="icon"><img src="xyz/smiley.png" icon-value="1" icon-index="0"></div>
<div class="icon"><img src="xyz/1.png" icon-value="2" icon-index="1"></div>
</div>

use an attribute selector.
.box img[icon-value="1"] {
display: none;
}

CSS solution:
.box img[icon-value="1"] {
display: none;
}
Demo
PS: Notice the value in quotes. I don't think CSS attribute selectors will work if the value is not specified in quotes
jQuery solution:
$(".box img[icon-value=1]").css("display", "none");
Demo

using css try following
.box .icon img[icon-value="1"] {
display: none;
}
or if you are using jquery you can try this also
$(".box img[icon-value=1]").hide();

HTML objects growing and pushing others

How could I make it so that given two elements let's say these boxes:
If I clicked over one, it would grow, and the other would shrink like and vice versa:
How can I do this?
I have seen this sort of done with CSS, using the focus tag and adjusting the width. But I have two problems there, first how could I affect the other element, and second as far as I can tell adjusting width will only stretch them right. I have seen people change the way they float the elements to deal with that, but I don't want to move them around the page to do this.

Here are 2 examples without Javascript/jQuery:
Pure CSS - Trigger on click: (example)
Using the checkbox hack in CSS you can effectively toggle the widths of the elements when the checkbox is :checked. Here is what part of the CSS looks like:
input[type=checkbox]:checked ~ .red {
width:70%;
}
input[type=checkbox]:checked ~ .green {
width:20%;
}
Go to the example for the full CSS.
HTML
<input type="checkbox" id="toggle" />
<div class="red">
<label for="toggle"></label>
</div>
<div class="green">
<label for="toggle"></label>
</div>
You might also be interested in the original example I made. It takes a different approach, though it doesn't fully work.
Pure CSS - Trigger on hover: (example)
Unfortunately, neither the adjacent selector, nor the general sibling selector can select previous elements, therefore it makes this a little difficult. I placed 2 general elements before the main elements in order to somewhat solve this issue.
.greenS:hover, .greenS:hover ~ .green,
.redS:hover, .redS:hover ~ .red {
width:72%;
}
.greenS:hover ~ .redS, .greenS:hover ~ .red,
.redS:hover ~ .greenS, .redS:hover ~ .green {
width:22%;
}
HTML
<div class="redS"></div><div class="greenS"></div>
<div class="red"></div>
<div class="green"></div>
Since this was tagged as JS/jQuery, here are 2 alternative solutions.
JS/jQuery - Trigger on click: (example)
$('.red, .green').click(function(){
$('.red').toggleClass('expanded')
.next('.green').toggleClass('contracted');
});
JS/jQuery - Trigger on hover: (example)
$('.red').hover(function(){
$(this).toggleClass('expanded')
.next('.green').toggleClass('contracted');
});
$('.green').hover(function(){
$(this).toggleClass('expanded')
.prev('.red').toggleClass('contracted');
});

See jQuery .animate() method documentation.
Example on jsfiddle:
.box {
width: 100px;
height: 100px;
display: inline-block;
}
#box1 {
background: red;
}
#box2 {
background: blue;
}
<div class="box" id="box1"></div>
<div class="box" id="box2"></div>
$('.box').click(function() {
var currentWidth = $(this).outerWidth(),
siblingCurrentWidth = $(this).siblings('.box').outerWidth();
$(this).animate({'width' : currentWidth/2})
.siblings('.box').animate({'width' : siblingCurrentWidth*2});
});
This is a very simple example with several flaws, but it demonstrates a possibility for what your purpose is.

Simple example http://jsfiddle.net/PeLub/ ( modify how you need) .
<div class="box" id="first"></div>
<div class="box" id="second"></div>
$("#first").click(function(){
$(this).animate({width:'50px'}, 500);
$("#second").animate({width:'150px'}, 500);
});
$("#second").click(function(){
$(this).animate({width:'50px'}, 500);
$("#first").animate({width:'150px'}, 500);
});

javascript,css,html dropdown menu mouseover

I have used javascript on a menu so that when I mouseover it should drop down. But instead of only the menu dropping down, the footer and the menus are coming down too.
CSS:
.navmenu {position:relative;float:left;cursor: pointer;margin-right:2px;width:200px;min-width:200px;}
.navmenu a{top:0px;left:0px;padding: 0;color: #000;text-decoration: none;position:relative;}
nav .wrapper{width:150px;min-height:128px;display:block;}
ul.subnav {top:0px;padding: 0px 5px 5px 15px;margin: 0px;list-style: none;position: relative;max-width: 150px; width: 150px; left: 0; display: none;z-index:150; }
ul.subnav li{padding:5px; width:120px;text-decoration: none;}
.imagem1{top:0px;left:-15px;margin:0;padding:0;position:absolute;z-index:150;}
.imagem3{top:0px;left:-15px;margin:0;padding:0;position:absolute;z-index:150;}
.imagem2{top:-3px;left:-3px;margin:0;padding:0;position:absolute;z-index:150;}
.imagem4{top:-3px;left:-20px;margin:0;padding:0;position:absolute;z-index:150;}
.imagem5{top:1px;left:-44px;margin:0;padding:0;position:absolute;z-index:180;}
.menuname{min-height:40px;z-index:150;}
.menuname img {border:0;}
#placaparque{left:20px;top:-17px;z-index:150;}
#placainfo{left:-15px;top:-10px;z-index:150;}
#placacons{left:-15px;top:-5px;z-index:150;}
#placaactiv{left:-10px;top:-8px;z-index:150;}
#placaanim{left:-65px;top:-6px;z-index:150;}
1#sub1{left:0px;top:0;}
1#sub3{left:0px;z-index:150;}
#fundo1{position:relative;background-image:url('images/fundo.png');left:38px;width:150px;min-height:128px;}
#fundo2{position:relative;background-image:url('images/fundo.png');left:0px;width:150px;min-height:128px;}
#fundo3{position:relative;background-image:url('images/fundo.png');left:-10px;width:150px;min-height:128px;}
#fundo4{position:relative;background-image:url('images/fundo.png');left:-10px;width:150px;min-height:128px;}
#fundo5{position:relative;background-image:url('images/fundo.png');left:-10px;width:150px;min-height:128px;}
#parq{left:-20px;}
#acti{left:-30px;}
#info{left:-65px;}
#cons{left:-110px;}
#anim{z-index:100;left:-155px;}
HTML:
<nav id="mainMenu">
<div id="parq" class="navmenu" >
<div " id="wrapper" class="wrapper">
<div id="fundo1" class="fundo">
<ul id="sub1" class="subnav">
<?php /*wp_list_categories('include=16');*/ ?>
<?php wp_nav_menu( array( 'menu' => 'Menu Parque' ) ); ?>
</ul>
</div>
<img class="imagem1" src="<?php bloginfo('template_directory'); ?>/images/comboioparque.png"/>
</div>
JavaScript:
$(function () {
var divnav = $(this); //menu1
$("#parq").hover(function () {
$("#sub1").stop(true, true).delay(200).slideDown(300);
$(".imagem1").stop(true, true).fadeOut(200);
}, function () {
$(".imagem1").stop(true, true).delay(200).fadeIn(200);
$("#sub1").stop(true, true).slideUp(300);
});
I only want the to menu drop down. I don't want the rest of the menus under and footer coming down too. I know it has something to do with "z-index" but I'm not following.
Can yall help me?
Thanks.

First of all, notice that you are having an error in this line of the css:
1#sub1{left:0px;top:0;}
it should be like this:
#sub1{left:0px;top:0px;} /*and by the way, why have you added a number one before the id??*/
You also have an error in this line of the html:
<div " id="wrapper" class="wrapper">
it should be like this:
<div id="wrapper" class="wrapper">
in the css of .navmenu why are you defining a with and ALSO a min-width?? Im not sure if that would validate for W3C...maybe it can cause you css conflicts
If you are calling both of them in order to view it right in IE6 I would recomend you to use a hack for width and for all the other browsers just leave the "min-width".
And finally one curious question: in the jquery, why are you using a .stop method? Why dont you just use an .animate method?? You could do something like this:
$(document).ready(function(){
$("#btn1").click(function(){
$("#box").animate({height:"300px"});
});
$("#btn2").click(function(){
$("#box").animate({height:"100px"});
});
});
I hope something of all this things may help you. Besides, in the jquery you are ONLY calling the #sub1 and not others so the jquery I think should work well.
If you are still having problems, let us know... because as far as I understand I only found those details.
Regards,