We Keep Coding

Unknown dots rendered into page - what causes them?

I have a demo application here and in the upper left corners of the "tweets" there are dots and I have no idea where they come from. The code is written in Ember and the template looks like this
<h2>Ember.js DEMO Tweet list</h2>
<div class="tweets-list">
<h2>Tweets</h2>
<button {{action 'changeAllTweets'}}>Change All Tweets</button>
<button {{action 'changeOneTweet'}}>Change One Tweet</button>
<div class="row input-wrap">
</div>
{{#each this.model.topTweets as |model|}}
<li class="media">
<div {{action 'bindNewModel' this}} class="row">
<a class="pull-left" href="#"><img class="media-object" width="75" height="75" src={{model.avatar}}/></a>
<div class="media-body">
<h4 class="media-heading">{{model.favorites}}</h4>
<p>{{model.text}}</p>
</div>
</div>
<div class="row">
<div class="col-xs-4">
Expand
</div>
<div class="col-xs-8">
<ul class="list-inline text-right">
<li href="#">Reply</li>
<li href="#">Retweet</li>
<li href="#">Favorite</li>
<li href="#">More</li>
</ul>
</div>
</div>
</li>
{{/each}}
</div>
P.S. The SHOW LIST button must be pressed for the list to show

It's because you're using list items, i.e. <li> tags. They're shown with bullet points by default.
First of all, you should only use <li> tags inside an ordered or unordered list (<ol> / <ul>). You should consider if list items are appropriate here. Maybe <div>s are more suitable?
If you want to use list items you should wrap them in a <ul> list and then get rid of the bullet points by applying the styling: list-style-type: none.
Changing the display style of the list item will also get rid of the bullet point.

These are the list item markers. Add list-style:none; to the ul, and they will disappear.
Edit: I see that you are also missing the ul itself. The wrapping ul does not exist. These are just list items. Add the opening ul before the each statement and closing after it. And in case the list style none rule.
I'm on mobile and can't edit the fiddle.

There is HTML structural error.
Wrap the <li class="media"> with an <ul> tag. I can assume you are using Bootstrap. If yes then wrap the <li> tag with <ul class="list-group"> and add list-group-item class to the <li> tag like this: <li class="media list-group-item">

how to Get an id of DOM elements using JQuery

I'm having some problems understanding the stracture of JQuery elements and how to move through the DOM tree.
My aim is to highlight (background color) the clicked link (a).
if the "li a" is inside ul which is not the main "menu" ul (meanning sub-menu link) then i want to highlight both the sub menu link and the top menu link.
My HTML code is:
<div id="site">
<div id="koteret">
<div id="top_menu">
<ul id="menu">
<li><a href="welcome.html" id="wel" title="HomePge" >home</a></li>
<li>read
<ul class="par">
<li><a href="welcome.html" id="b" title="title" >test</a></li>
<li>addRead</li>
</ul>
</li>
<li><a href="books.aspx" title="Books" >Books</a>
<ul class="par">
<li>Search</li>
<li>Register</li>
</ul>
</li>
<li><a href="contact.html" id="a" title="Contact" >CoNTACT</a></li>
</ul>
</div>
</div>
<div id="test">
<iframe id="con" src="welcome.html">ffffffffffffffffffffffffffffffsdfdsfsdfwefwfwfw
fwfwefwe<br />fwefwefw</iframe>
<div id="side_bar">fsfdsfsdf</div>
</div>
<div id="footer">footer</div>
</div>
</body>
As for the JQuery i tried this:
$(this).closest("ul").find("a").attr("id"));
and a few other versions with parents but i get "undefined" or empty strings when i check with alerts.
Can you help me understand where is my mistake?
I'm sure it's something very simple i just can't find it.
Thanks

To highlight the submenu link and its top most parent link use the following code:
$(this).css("background-color","red");
$(this).parents("li").last().find("a:first").css("background-color","red");
The first line highlights the link.
The second line will look for the top-most 'li' then select its immediate 'a' tag and highlight it
UPDATE:
To remove the highlight of the previous click use a CSS class:
.highlight {
background-color: red;
}
Then use the following code:
$("#menu").find(".highlight").removeClass('highlight');
$(this).addClass('highlight');
$(this).parents("li").last().find("a:first").addClass('highlight');

Twitter Bootstrap 3 - navbar-right issue in dropdown

I've created two dropdown using navbar-right.
Here's the fiddle for it.
Issue is... It is working fine in desktop and large screens.
If I resize the browser window. The dropdown gets in a list view with the entire width of the screen when re-sized.
Re-size the result window and you'll come to know my problem.
Help me to overcome this.
Thanks in advance.

This isn't really the way to use a Bootstrap navbar. The idea of the navbar is that it collapses down on mobile, which is what you're seeing happening here. Except, in the Bootstrap navbar, you are supposed to put some containers with specific class names and a <button> etc. You're code just seems to be using navbar-right for the sake of floating it right.
Try this instead. It's 1 list, each <li> has a dropdown. There's no navbar classes. Note that I've added the class nav. This just gives the <a> some padding and colouring on hover etc. You can remove that class and style as required. I also added the class 'pull-right' which is Bootstrap's helper class for floating right.
<div>
<ul class="pull-right nav">
<li class="dropdown">
<i class="glyphicon glyphicon-comment"></i>
<ul class="dropdown-menu dropdown-menu-right">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</li>
<li class="dropdown">
<i class="glyphicon glyphicon-home"></i>
<ul class="dropdown-menu dropdown-menu-right">
<li>One</li>
<li> Two</li>
<li> Three</li>
</ul>
</li>
</ul>
</div>
Some CSS
div > ul > li {
float: left;
}
This won't be responsive like the navbar, but that seemed to be the problem in the first place.
DEMO

Bootstrap Scrollspy isn't working, doesn't scroll

I have been driving myself mad over getting ScrollSpy working. I have a menu that remains in a fixed, left position as the user scrolls down after a certain point, however, ScrollSpy refuses to work in any shape or form. I have tried a multitude of methods to get it working, as well as using a CMS (DotNetNuke) so please excuse some messy code here and there.
Here's the HTML of the nav:
<div role="complementary" class="bs-docs-sidebar hidden-print" id="sideNav">
<div class="sideNavCont">
<div>
<span class="sideMenuHeading">TITLE</span>
</div>
<div class="sideMenuGuideSep"></div>
<div class="sideMenu" id="navbar">
<ul class="nav nav-list affix sideMenuGuide">
<li>Option 1</li>
<li>Option 2 </li>
<li>Option 3 </li>
<li>Option 4 </li>
(and so on...)
</ul>
</div>
</div>
</div>
And here is the HTML for the content I want spied on:
<div id="content">
<span id="opt1">
<strong>Overview</strong>
</span>
<div>
<strong>
<span id="opt2" style="font-size: 32px;">TITLE</span>
</strong>
</div>
<p>
<span id="opt3" style="font-size: 32px;">
<strong>TITLE</strong>
</span>
</p>
</div>
Plus I have this piece of Jquery:
$('body').scrollspy({ target: '#content' });
Note that I also currently have working page anchors on each heading that work from linking from the nav.
I know the answer is probably staring me right in the face, but I'd appreciate your help. Thanks!

From the bootstrap doc, http://getbootstrap.com/javascript/#scrollspy.
"Then add the data-target attribute with the ID or class of the parent element of any Bootstrap .nav component."
So it should probably be initialized like this:
$('body').scrollspy({ target: '#sideNav' })

How to have a custom button within a list view in JQuery Mobile?

I want to have a custom button to appear on the right side of my list view header named 'Click Me', which will perform an action via the 'on click' event. As far as I know JQuery does not have a standard way to achieve this but perhaps you know how to achieve this.
As an illustration to what I want to achieve, take a look at http://jquerymobile.com/test/docs/buttons/buttons-icons.html.
Imagine now that you are looking at list headers where the data icon is on the right side and instead of it being an icon it says 'Click Me'. Furthermore, the List Header cannot be clickable like its elements, instead the data icon must be the only clickable element in here.
Please let me know if you have any ideas, even if this is simply impossible to achieve due to JQuery, thanks!

This is what I was looking for:
<ul data-role="listview">
<li data-role="list-divider">
Fruits
<span class="ui-li-count">
<a href="#" data-role="none" data-theme="b">
Button
</a>
</span>
</li>
<li>Apples</li>
<li>Grapes</li>
<li>Others</li>
</ul>
Note that the list divider contains a SPAN which acts as a button... quite ingenious :)
Anyways, thanks for your help!

You are looking for a Split Button list

This is an example you can put two icon buttons inside:
<ul data-role="listview" data-inset="true" style="min-width:210px;">
<li data-role="list-divider">Opciones de platillo</li>
<li><a href="#" >Notas</a></li>
<li>
Tiempo
<div style="float: right;">
Plus
Minus
</div>
</li>
<li>
Comensal
<div style="float: right;">
Plus
Minus
</div>
</li>
<li>Modificadores</li>
<li>Terminadores</li>
<ul>
</div>