Develop Reference

How can I get my divs to process separately?

Not sure exactly how to put this but here goes. I have a page that I set up to show and hide divs when a certain link is clicked and everything is working fairly well apart from this. when the first two links are pressed, the div that appears becomes linked the same as the last link on the page. Likewise the third is linked the same way and also has underline and white text (as I set up for general links on the site)
The div that shows up when a link is clicked shouldn't be linked at all.
Here's my code:
HTML
<div id="wrapper">
<div id="container">
<div id="shown" class="content">
<div id="list">
<div id="filler"></div>
<div id="a1" class="inactive">WHAT IS LIGHT IT UP?</div>
<div id="spacer"></div>
<div id="a2" class="inactive">WHO</div>
<div id="spacer"></div>
<div id="a3" class="inactive">REGISTRATION FEES</div>
<div id="spacer"></div>
<div id="a4" class="inactive">WHEN</div>
<div id="spacer"></div>
<div id="a5" class="inactive">AWARDS</div>
<div id="spacer"></div>
<a href="javascript:show('shown','id6','a6');"><div id="a6" class="inactive">GLOW DANCE PARTY!</div>
<div id="filler"></div>
</div>
<div id="id1" class="hidden">text 1</div>
<div id="id2" class="hidden">text 2</div>
<div id="id3" class="hidden">text 3</div>
<div id="id4" class="hidden">text 4</div>
<div id="id5" class="hidden">text 5</div>
<div id="id6" class="hidden">text 6</div>
</div>
</div>
CSS
#wrapper{width:94%; float:left; position:relative; left:3%; background-color:rgba(163,207,98,0.7); margin:auto; border-radius:1.2em;}
#container{width:96%; float:left; position:relative; left:2%; margin-top:2%;}
#spacer{background-color:rgba(0,0,0,0.7); float:left; box-shadow: -1px 1px 1px rgba(255,255,255,0.7);}
#filler{height:1.5em; width:100%;}
#list{
overflow:hidden;
float:left;
letter-spacing:1px;
font-family:upc;
font-size:1.35em;
}
#list a:link{text-decoration:none}
.active{
text-shadow: -2px 1px 1px #000;
background-color:rgba(0,0,0,0.5);
color:#A3CF62;
}
.inactive{
text-shadow: -2px 1px 1px rgba(255,255,255,0.5);
color:#000;
}
.inactive:hover{
text-shadow: -2px 1px 1px #000;
background-color:rgba(0,0,0,0.5);
color:#A3CF62;
border-radius:2em;
}
.hidden {display: none}
.unhidden {
margin-top:1.5em;
margin-bottom:1.5em;
display:block;
text-align:justify;
color:#A3CF62;
}
#shown{
float:left;
position:relative;
background-color:rgba(0,0,0,0.5);
border-radius:1.2em;
}
#media screen and (orientation:landscape){
#list{width:20%; text-align: center; position:relative; float:left; right:20%;}
#shown{width:80%; float:left; left:20%;}
#spacer {
width:90%;
margin-top:0.1em;
margin-bottom:0.1em;
margin-left:auto;
margin-right:auto;
height:0.1em;
}
#stretch{display:none}
.unhidden{width:80%; vertical-align: middle; float:left; position:relative; right:10%; overflow-y:auto;}
.active{border-top-left-radius:2em; border-bottom-left-radius:2em;}
}
JavaScript
var old_target,old_trigger;
function show(win, target, trigger){
document.getElementById(win).className = 'content';
if(old_target!==undefined) document.getElementById(old_target).className = 'hidden';
if(old_trigger!==undefined) document.getElementById(old_trigger).className = 'inactive';
document.getElementById(target).className = 'unhidden';
document.getElementById(trigger).className = 'active';
old_target = target;
old_trigger = trigger;
}

The last <a href> element is missing its closing tag, causing the browser's HTML parser to generate unexpected results. To see the unintended effect, select 'Inspect element' from the right-click menu.

tree div use one jquery

I have three different names in my div class. I can run one class name with jQuery. But i can not run tree class name with jQuery. is anyone can help me.
in this study can only use such p_img. p_img, p_img2 and tree_img these three classes. How can I use in a single JavaScript.
This is my JSFiddle demo
This javascript code for image crop for one div ( p_img )
$('.p_img img').each(function() {
var image = $(this),
height = image.height(),
width = image.width();
if (width > height) {
image.addClass('height');
var middle = 0 - (image.width() - image.closest('.p_img').width()) / 2;
image.css('margin-left', middle + 'px');
} else {
var middle = 0 - (image.height() - image.closest('.p_img').height()) / 2;
image.css('margin-top', middle + 'px');
}
});
HTML CODE:
<div class="profile_cover_container">
<div class="cover_container">
<div class="cover_img">
<div class="p_img">
<a href="#">
<img src="http://scontent-b-fra.xx.fbcdn.net/hphotos-frc1/t1.0-9/1780641_780166082011699_1924260798_n.jpg" width="198" height="198" padding="0" />
</a>
</div>
<div class="p_img">
<a href="#">
<img src="http://fbcdn-sphotos-h-a.akamaihd.net/hphotos-ak-prn2/t31.0-8/964870_679724332055875_989825665_o.jpg" width="198" height="auto" padding="0" />
</a>
</div>
</div>
<div class="cover_img_big">
<div class="p_img2">
<a href="#">
<img src="http://fbcdn-sphotos-h-a.akamaihd.net/hphotos-ak-prn2/t31.0-8/964870_679724332055875_989825665_o.jpg" width="400" height="400" padding="0" />
</a>
</div>
</div>
<div class="cover_tree_img">
<div class="tree_img"><a hre0f="#"><img src="" width="381" height="133" ></a></div>
<div class="tree_img"><a hre0f="#"><img src="" width="381" height="133" ></a></div>
<div class="tree_img"><a hre0f="#"><img src="" width="381" height="133" ></a></div>
</div>
</div>
</div>
and CSS CODE:
.profile_cover_container{
position:relative;
width:981px;
height:400px;
margin-left:auto;
margin-right:auto;
overflow:hidden;
border:1px solid #d8dbdf;
-webkit-border-bottom-right-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
-moz-border-radius-bottomright: 3px;
-moz-border-radius-bottomleft: 3px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
margin-top:3px;
}
.cover_container {
width:981px;
height:400px;
float:left;
}
.cover_img {
float:left;
width:200px;
height:400px;
background-color:#000;
}
.p_img {
float:left;
width:198px;
height:198px;
margin:1px;
overflow: hidden;
}
.p_img img {
width: 100%;
}
.p_img img.height {
width: auto;
height:100%;
}
.cover_img_big {
float:left;
width:400px;
height:400px;
background-color:black;
}
.p_imb2 {
float:left;
width:400px;
height:400px;
margin:1px;
overflow: hidden;
}
.p_imb2 img {
width: 100%;
}
.p_imb2 img.height {
width: auto;
height:100%;
}
.cover_tree_img {
float:left;
width:381px;
height:400px;
background-color:black;
}
.tree_img {
float:left;
width:381px;
height:133px;
overflow:hidden;
}

You can add multiple classes to your selector like you would do it in css:
$('.p_img img, .p_img, .p_img2').each(function(){
...
});

You want to select multiple classes in one jQuery selector?
You can do this by using a comma to seperate them.
var divs = $(".p_img, .p_img2, .tree_img");

You can also use Attribute Selectors to add a bit of flexibility in your code
$('[class*="_img"]').each(function() { ... });

Fadeout Each div separately

I have some divs with unique ids and same class mbox. These divs holds some info. At the bottom of each div I have a div with same class to all divs removeme.
How is it possible when I am clicking the div with class removeme to fade out the div with class mbox? But only mbox and not the other next to it
My Html:
<style>
.mbox{
width:300px;
height:280px;
float:left;
margin-left:5px;
margin-right:10px;
margin-bottom:10px;
background-color: #E0E0E0;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border:1px solid #CACACA;
}
.removeme{
width:200px; height:45px; float:left; background-color: #F00;
}
.title{
width:290px;
float:left;
margin-left:5px;
margin-top:5px;
text-align:center;
color:#333;
font-family:Verdana, Geneva, sans-serif;
font-size:24px;
font-weight:bold;
}
.photoholder{
width:200px;
height:150px;
float:left;
margin-left:50px;
margin-top:8px;
background-color:#FFF;
}
.imgclass{
float:left;
margin-left:10px;
margin-top:5px;
}
</style>
<div class="mbox" id="1">
<div class="title">Hello Box</div>
<div class="photoholder">
<img class="imgclass" src="http://whomurderedrobertwone.com/wp-content/uploads/2010/06/BigStarlitSky-300x250.jpg" width="180" height="140">
</div>
<div style="width:200px; height:45px; float:left; margin-top:12px; margin-left:50px; cursor:pointer;">
<div class="removeme"></div>
</div>
</div>
<div class="mbox" id="2">
<div class="title">Hello Box</div>
<div class="photoholder">
<img class="imgclass" src="http://whomurderedrobertwone.com/wp-content/uploads/2010/06/BigStarlitSky-300x250.jpg" width="180" height="140">
</div>
<div style="width:200px; height:45px; float:left; margin-top:12px; margin-left:50px; cursor:pointer;">
<div class="removeme"></div>
</div>
</div>
<script type="text/javascript">
$('.removeme').click(function () {
$(this).fadeOut("fast");
});
</script>
Check my demo: http://jsfiddle.net/fWtm6/9/

You can use .parent() to get the parent element (in this case you need 2 to get the parent .mbox
$('.removeme').click(function () {
$(this).parent().parent().fadeOut();
});
http://jsfiddle.net/kkd3r/
EDIT: After a second look at the jQuery API .parents() would be a better idea as it traverses all the parent elements so you can explicitly filter out elements by class or id no matter how far it is up the tree
$('.removeme').click(function () {
$(this).parents('.mbox').fadeOut();
});
http://jsfiddle.net/kkd3r/1/

Try this, Hope it will answer your question..
$('.removeme').click(function () {
var str=$(this).parent().closest(".mbox");
$(str).fadeOut("fast");
});

Replace this line
$(this).fadeOut("fast");
with this
$(this).closest('.mbox').fadeOut("fast");

Why does this code work for an input text box but not for a contenteditable div?

I have a snippet of Javascript code as follows:
<div id="TestControl" contentEditable="true" style="width:200px; position:absolute; left:100; top:100; border: 1px solid #000;"></div>
<div style="position:absolute; left:100; top:200; width:200px; border:1px solid #000; padding: 5px 5px 5px 5px;" id="displaydiv" ></div>
<script>
document.getElementById("TestControl").onkeyup = function() {
document.getElementById("displaydiv").innerHTML = this.value;
}
</script>
This code works fine if I replace the contenteditable div with an input text box. Why the disparity?
Thanks for looking :)

A content div does not have a property called value
<div id="TestControl" contentEditable="true" style="width:200px; position:absolute; left:100; top:100; border: 1px solid #000;"></div>
<div style="position:absolute; left:100; top:200; width:200px; border:1px solid #000; padding: 5px 5px 5px 5px;" id="displaydiv" ></div>
<script>
document.getElementById("TestControl").onkeyup = function() {
document.getElementById("displaydiv").innerHTML = this.value || this.textContent || this.innerText || this.innerHTML;
}
</script>

jquery slideonlyone function

I am currently using jquery slideonlyone function. I am having problems implementing an expanding/collapsing image(Plus.png)(Minus.png) change when clicked on. this is my jquery code.
<script type="text/javascript">
function slideonlyone(thechosenone) {
$('div[name|="newboxes2"]').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).find("img").attr({src:"Minus.png"}).slideDown(200);
}
else {
$(this).find("img").attr({src:"Plus.png"}).slideUp(600);
}
});
}</script>
<table><tr>
<td>
<div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px;">
<a id="myHeader1" href="javascript:slideonlyone('newboxes1');" ><img src="images/faq_cuts/Plus_Circle.png";/>slide this one only</a>
</div>
<div name="newboxes2" id="newboxes1" style="border: 1px solid black; background-color: #CCCCCC; display: block;padding: 5px;">Div #1</div>
</td>
<td>
<div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px;">
<a id="myHeader2" href="javascript:slideonlyone('newboxes2');" ><img src="images/faq_cuts/Plus_Circle.png";/>slide this one only</a>
</div>

You don't actually have any images in your html.
Also, you are using attr incorrectly. If you want to set the src of an image it would be .attr("src","Minus.png").