Develop Reference

Debug Bootstrap 3 template

I'm converting psd to html, so I'm using bootstrap3. After I finished with converting, I have notice that I can not make container-fluid full width because I have left out some closing div tags, so I have turn on firebug and start inspecting div's one by one to see where do I need to close them, off course I have done it in the end, but it took me some time and that is fine.
I'm trying to understand how can I do this properly, and quickly, how can I properly debug a template, is there some work flow that will help me overcome this mistakes, and how can firebug help me speed up thing when I'm converting psd.

I found these links to be helpful when designing the structure of a web page with bootstrap:
Bootlint
debug.css

Weird elements in code that appears to be HTML

I'm currently modding a game and everything works fine when I use basic commands & attributes for formation etc. but there are some elements that I can't identify and modify as I would like.
Hopefuly someone can help me out, here's the code, elements in question follow
tr "game_spell_tooltip_EkkoQ" = "<titleLeft>Timewinder</titleLeft><titleRight>Level #Level# [#Hotkey#]</titleRight><subtitleLeft>#Cost# Mana</subtitleLeft><subtitleRight>#Cooldown# sec Cooldown</subtitleRight><mainText>Ekko throws a device that deals #Effect1Amount# <font color='#99FF99'>(+#CharAbilityPower#)</font> magic damage to enemies it passes through. It expands into a slowing field on the first champion hit, slowing everything inside by #Effect2Amount#%. It then returns to him after a delay, dealing #Effect3Amount# <font color='#99FF99'>(+#CharAbilityPower2#)</font> magic damage to all targets hit upon return.</mainText>"
The elements in question are <titleLeft>, <titleRight> and the same for the subtitle elements
I've tried to implement another title in the center, both <titleCenter>, <titleMiddle> and simply <title> won't work, it just doesn't show up
Any other modifications like <br> and basic formation attributes work perfectly fine, but those are in the maintext
An example of my experimental slaughtery here
tr "game_spell_tooltip_EkkoE" = "<titleLeft>Phase Dive</titleLeft><titleRight>Level #Level# [#Hotkey#]</titleRight><subtitleLeft>#Cost# Mana</subtitleLeft><subtitleMiddle><font color='#F5E5D4'; size='2'><i>Dash & Teleport</i></font></subtitleMiddle><subtitleRight>#Cooldown# sec Cooldown</subtitleRight><mainText><font color='#7C03FC'>Magic Damage: #Effect1Amount#</font> <font color='#99FF99'>(+#CharAbilityPower#)</font></mainText>"
The subtitleCenter doesn't work either.
Any ideas?
Best regards

They're probably custom web components.
As described by Rob Dodson on CSS Tricks:
Web Components are a collection of standards which are working their
way through the W3C and landing in browsers as we speak. In a
nutshell, they allow us to bundle markup and styles into custom HTML
elements. What's truly amazing about these new elements is that they
fully encapsulate all of their HTML and CSS. That means the styles
that you write always render as you intended, and your HTML is safe
from the prying eyes of external JavaScript.
You can find out more here: http://webcomponents.org/

Mottie jQuery Tablesorter filters not loading on the page

I'm having a terrible hard time at trying to get the Mottie Tablesorter plugin to work properly on my HTML page.
I'm designing the front end of a website for someone, and I need the advanced filters provided with this plugin:
http://mottie.github.io/tablesorter/docs/example-widget-filter-formatter-1.html#demo
I have downloaded the files in .zip format, extracted them and placed them in my project, and made sure all the links work properly and that the page can read them.
I have copy/pasted the stuff from the demo with the multiple types of filters across all the columns (in the code quotes) into my HTML page.
However, the second table header row inside the table header doesn't appear.
I can't figure out what it is that I'm doing wrong.
Here's a screenshot of what gets rendered on the page + the offending code inside the web inspector of Safari: http://puu.sh/dqzNX.png
As you can see, the second table header looks like it is trying to display, but it's empty?
And it seems like it generates a search for searching by text, but is set to hidden (I don't know why)
And it also generates the correct amount of TH's, but all of them (apart from the first one) are empty!!
I've been banging my head against a wall over this for 4 days now and have no clue!
Can anyone else get this demo to work properly?
Many thanks for taking the time to read all of this!

Looks like I must not have been pulling jQuery UI into my project properly, as when I started from scratch it all looks like it's working now! -- My bad, thanks for the help though, great table filtering!
In my haste I also seemed to have put a css CDN into a script src tag, causing some style errors where the date picker was below the table before it had been selected and had a transparent background. That had me stumped for a good 20 minutes until I realised my mistake!

navigating to anchors in div element

I have a HTML file with many <div> elements and I cannot navigate to anchor tags using JavaScript. I have put a demo in jsfiddle. Please see the link for JavaScript + CSS + HTML for details.
I can navigate to the "section5" but not to other sections.
jsfiddle demo
Can anyone help me with this?
Any help would be really appreciated....
Kind regards
Update : Thanks for the response. I have updated the link with cleaned up HTML. The javascript navigation still doesn't work :(
Update 2: Thanks for the suggestions, but still not working
I updated it with your suggestions.. but it doesn't work. If I take out the css entry "div.columnbreak { -webkit-column-break-after: always; the navigation works. When I put that back the navigation doesn't work*

You are not closed the tags correctly
For eg:,
Wrong
<p>This EPUB eBook is released under a Creative Commons (BY-NC-ND/3.0) Licence.
<p>Source text and images taken from the Public Domain.</p>
Correct
<p>This EPUB eBook is released under a Creative Commons (BY-NC-ND/3.0) Licence.
Source text and images taken from the Public Domain.</p>

Take a look: jsfiddle
You don't need to use <a> element at all, you can assign unique id to your section block.

I might be reading this wrong but it looks like your tags might not be closed properly
in section you have 2 open p's and only 1 close.
its throwing off wihch sections are in which and thats why your anchors are getting mixed up.
JSFiddle also doesn't seem to like the 3 div tags above section 3 but I havent figured out why, yet.

This is because of the location of the <a> tag. You should put it right after the <p> tag you're interested in.
And well, you should tidy up your markup a bit. Everyone knows Irene Adler is attracted by valid webpages.

This is a screenshot of the markup in your jsFiddle example:
As you can see, there are multiple <a>'s with name value "section1", "section2" etc. This will prevent your #sectionX hash to find a unique anchor.

Show incorrect html on page that doesn't influence the rest of the page

I have got some detail content pages on my site where I don't have the complete control over the html content that is displayed in a certain div. Now when the content of the external resource contains invalid html, like having no ending my navigation in the right-bar is also italic. I don't want to use iframes, like ebay, and there is probably other ways to fix this. Hope on an answer.
<html>
<body>
<div id="page">
<div id="content">[content of external resource]</div>
<div id="right-bar">[My navigation]</div>
</div>
</body>
</html>
A simplified structure of my page is above.

I hate to tell people to use Tables when they aren't necessary, but in this case, I feel that it could solve your problem.
The issue that you are facing is one of the browsers well-formed html check, so, you could have some browsers that work as you hope, and others that work the way that bothers you, as each rendering engine is going to perform it's own well-formed html check flavor.
If you wrap it inside a td, then I don't think that it will be able to bleed styling the way that you are seeing. Just a thought. The reason that a td container is going to help more than the div container that you are currently using is the following: Since you are wrapping their stuff in a div, and they are most likely wrapping their own stuff in divs, the browser doesn't know where the mistake is at. It doesn't know where the missing div tag should be inserted. So essentially, div in div in div creates problems for the well-formed html check, as it is not sure which of the tag you forgot. However, div in div in td, that is more distinct. If the td open and closes, then it knows that the missing tags belong to a smaller group of possible elements. In other words, you are making it easier on the well-formed check to do it's job by wrapping it inside different tag types.
This makes sense to me. I hope that I have explained it ok.

I think that there is no other way than using iframes. If you don't use an iframe to host the external content means that the external content will be included in the DOM structure of your page, so unless you parse all the external content code to check all the possible things that should affect your page (and this could be a madness), you will never be sure that your page will be safe from collateral effects coming from the external code.
And even using iframes, you should parse anyway the external content to look for script tags, to prevent any undesired javascript code been executing inside your page.