Inspect Element diplaying child divs

Question

I've never heard of this before and I'm really confused. The deal is that I have the following code,

Javascript

$(document).ready(function () {
    showSideBar('sbselection_1');
    $('.talkbubble').click(function () {
        var sidebarSelector = $(this).find('.tbselector').val();
        showSideBar(sidebarSelector);
    });
    $('.clickables').on('click','.talkbubble',function () {
        $(this).siblings('.talkbubble').removeClass('clicked');
        $(this).addClass('clicked');
    });

});
function showSideBar(selector) {
    $('.sidebarContent').hide();
    $('.sidebarContent.' + selector).show();
}

CSS

 .sidebar{ 
position: absolute;
background-color: rgb(153,153,153);
width: 250px;
height: 300px;
}
.sidebarcontent{
display:none;
overflow:hidden;
}
.clickables {
position: absolute;
left: 270px;
}           
.talkbubble {
background: white;
color: rgb(0,0,0);
font-family: Rockwell, Garamond, "MS Serif", "New York", serif;
font-size: 12px;
height: 40px;
margin-top: 1%;
margin-bottom: 20px;
position: relative;
width: 130px;   
z-index: 5;
}

.talkbubble:before {
border-top: 10px solid transparent; 
border-right: 10px solid white; 
border-bottom: 10px solid transparent; 
content:""; 
height: 0; 
position: absolute; 
right: 100%; 
top: 10px; 
width: 0;   
}
.clicked {
background:rgb(153,153,153);
}
.clicked:before {
border-right-color:rgb(153,153,153);
}
.talkbubble:hover{
background-color: rgb(112,112,112);
color: rgb(255,255,255);
 }
.talkbubble:hover:before {
border-right-color: rgb(112,112,112);
 }

.thumbnail {
height: 33px;
width: 30px;
float: left;
position: absolute;
margin: 4px;
z-index: 2;
left: 2px;
top: 0px;
}
.words {
height: 24px;
width: 150px;
position: absolute;
float: right;
left: 40px;
top: 10px;
}
#orangetriangle{
border-top:25px solid green;
height: 0;
position:absolute;
width: 0;
z-index:3;  
border-right: 25px solid transparent;
height: 0;
position:absolute;
width: 0;
z-index:5;
border-top-color: rgb(255,138,0);
}
#dkpurpletriangle{
border-top:25px solid green;
height: 0;
position:absolute;
width: 0;
z-index:3;  
border-right: 25px solid transparent;
height: 0;
position:absolute;
width: 0;
z-index:5;
border-top-color: rgb(120,3,105)
}
#powderbluetriangle{
border-top:25px solid green;
height: 0;
position:absolute;
width: 0;
z-index:3;  
border-right: 25px solid transparent;
height: 0;
position:absolute;
width: 0;
z-index:5;
border-top-color: rgb(99,89,288);
}

HTML Event 1

    <div class="talkbubble">
        <input type="hidden" class="tbselector" value="sbselection_2" />
        <div class="thumbnail">
           <img src="images/thumbnail1.png" height="33" width="30" align="middle" />
        </div>
        <div class="words">Event 2</div>
    </div>

    <div class="talkbubble">
        <input type="hidden" class="tbselector" value="sbselection_3" />
        <div class="thumbnail">
           <img src="images/thumbnail1.png" height="33" width="30" align="middle" />
        </div>
        <div class="words">Event 3</div>
    </div>
</div>

And you can see it on this fiddle https://jsfiddle.net/petiteco24601/rhjw8uzm/9/

Which is great and beautiful and does exactly what I want it to do. Next I put it on a html page that I put together, you can see it here: http://www.emich.edu/dining/draft/index.html Again, this button display is working wonderfully and doing exactly what I want it to do. Then I had to go through a specific server and use their system- which I'm a tad unfamiliar with and really forces you to separate everything, not just by folders but essentially you have two libraries working together to pull together the appropriate css, javascript, and html. As such, you can see that I do have a lot (against my better judgement) of inline styles and inclusion of javascript at the header rather than in a separate sheet. Nonetheless

http://webstage.emich.edu/dining-new/index.php

If you hit "inspect source" you see what I'm seeing when I'm working on it. The click-able display looks almost identical to the one on jsfiddle- but you hit Inspect Element and you see that all the <div class="sidebarContent"> is embedded inside each other. As such, it won't display the appropriate pictures to fill the <div class="sidebar"> area.

Any ideas??? Please and thank you!

It's working fine in chrome and safari. Please be specific about the problem. The sidebarContent is not embedded inside each other. They are all placed inside sidebar — mohamedrias, Mar 24 '15 at 03:55

score 3 · Answer 1 · edited May 23 '17 at 11:58

3

Looks like the problem is you have used the self closing syntax for the inner divs of .sidebarContent elements like <div id="eetriangle" /> instead of using <div id="eetriangle"></div>.

Demo: Problem, Solution

What are all the valid self-closing elements in XHTML (as implemented by the major browsers)?

edited May 23 '17 at 11:58

Community

1
1

answered Mar 24 '15 at 03:54

Arun P Johny

384,651
66
527
531

In safari it's rendering properly. – mohamedrias Mar 24 '15 at 03:58
1

@mohamedrias look at how the fiddle(problem) is rendered in my chrome - http://imgur.com/Qb6CASJ - it should have been something like http://imgur.com/ZmbbSFl – Arun P Johny Mar 24 '15 at 04:06
Oops yes. I looked at the draft url. As you mentioned in the another link the div is self closing which is causing the problem. +1 for you :) – mohamedrias Mar 24 '15 at 04:13
Thank you for the help @ArunPJohny ! My only think is, I went back and double checked, and I did properly close all the
for the corner triangles. There's something else that's forcing it to embed all the siblings within each other- and in turn the clickable display is only showing the top photo, none of the other clickable images. – petiteco24601 Mar 24 '15 at 13:47

score 2 · Answer 2 · answered Mar 24 '15 at 04:01

2

If you have noticed clearly in both the .clickables you have the below code

.clickables { position: absolute; left: 270px; }

in case of your which you dont have just add the below and it works identical :)

.clickables {
  margin-left: auto;
  position: absolute;
  left: 333px;
}

enter image description here

answered Mar 24 '15 at 04:01

Kawinesh S K

3,148
1
16
29

Thank you so much, Kawinesh, but I think I'm a little unclear at what you're trying to point out? The problem is that the .sidebarContent is not displaying the proper images. I BELIEVE its because the way the server is parsing together the div boxes, they're becoming embedded children elements rather than siblings, so the javascript can't properly pull up the corresponding div to go with the clickable. – petiteco24601 Mar 24 '15 at 13:51

score 1 · Answer 3 · answered Mar 30 '15 at 20:42

So I went through and did some research on the server we're using. It turns out that I was correct in thinking that there was something wrong with how the library was parsing the information. Specifically, when the library puts everything together, it doesn't know what to do with an empty box and therefore immediately starts embedding other boxes inside of it- effectively destroying the code. Easy fix: just add an html comment inside of each empty box, and the program believe the is populated so it leaves it alone.

Thank you everyone for your help and suggestions!

Inspect Element diplaying child divs

3 Answers3