Yes, this is tricky (at least for me).
I tried this JS below, but it was not a good solution either, but it
might be an interesting avenue to pursue. For in-page links it seems OK
but not when navigating from other pages.
var shiftWindow = function() { scrollBy(0, -50) };
if (location.hash) shiftWindow();
window.addEventListener("hashchange", shiftWindow);
In any case, I would prefer a CSS solution. Looking at this
page<http://nicolasgallagher.com/jump-links-and-viewport-positioning/demo/>,
I can see that this is quite complex and not guaranteed cross-browser .
However, I have decided to go with this (see method B of the link).
a[name^="markmin"] {
display:block;
content:"";
height:50px;
margin:-50px 0 0;
}
If no one can suggest anything more comprehensive, at least this helps with
Markmin and did not seem to break anything else.
Regards,
David
On Tuesday, July 31, 2012 8:35:42 PM UTC+1, Niphlod wrote:
>
> this is not an issue related to anchor links relative to a. Now you can
> have a <div id="something" /> and url#something will treat that as an
> anchor.
> The issue is described here in more detail
> https://github.com/twitter/bootstrap/issues/1768
>
> If one has to use the fixed navbar on the top (and want to use anchors) he
> should take into consideration that all the anchors definitions have to
> "counterpart" with a padding the one set on the body.
>
> On Tuesday, July 31, 2012 8:42:00 PM UTC+2, villas wrote:
>>
>> The reason I made it specific to markmin is because I would otherwise
>> have to style all <A> tags. I was not sure whether that would break
>> anything else.
>>
>> Look at the markmin code here...
>>
>> >>> MARKMIN('[[myanchor]]').xml()
>>
>> '<p><a name="markmin_myanchor"></a></p>'
>>
>> The only way to style that 'generally' would be to do this:
>>
>> a { position:relative; top:-50px; }
>>
>> Well, I guess that shouldn't break anyone's layout? Maybe someone better
>> at CSS might comment?
>>
>>
>>
>>
>>
>>
>>
>> On Tuesday, July 31, 2012 7:27:04 PM UTC+1, Massimo Di Pierro wrote:
>>>
>>> Can you write a patch which is not markmin specific?
>>>
>>> On Tuesday, 31 July 2012 11:52:16 UTC-5, villas wrote:
>>>>
>>>> In my opinion it is simply an omission in the CSS.
>>>> The Navbar has a fixed position which takes it out of the 'flow' of the
>>>> document.
>>>> One unfortunate side-effect is that it covers anchor tags which, by
>>>> default, are displayed at the top (under the bar!)
>>>>
>>>>
>>>> On Tuesday, July 31, 2012 5:34:50 PM UTC+1, Massimo Di Pierro wrote:
>>>>>
>>>>> would you say this is a bootstrap bug?
>>>>>
>>>>> On Tuesday, 31 July 2012 11:08:43 UTC-5, villas wrote:
>>>>>>
>>>>>> Hi Niphlod,
>>>>>>
>>>>>> Thanks for your comments. As you say, this problem can affect all
>>>>>> anchor tags, not just markmin ones. My solution therefore is a little
>>>>>> more specific than it needed to be.
>>>>>>
>>>>>> However, although you mention an 'ideal' solution, you do not
>>>>>> describe it sufficiently clearly for me to test it and see whether it is
>>>>>> better.
>>>>>>
>>>>>>
>>>>>> On Tuesday, July 31, 2012 4:33:42 PM UTC+1, Niphlod wrote:
>>>>>>>
>>>>>>> That is not a markmin problem.
>>>>>>> If you use the navbar there is a fixed padding-top margin on the
>>>>>>> body.
>>>>>>> Ideally you should insert a "void" first element or use the first
>>>>>>> section with the same padding-top.
>>>>>>>
>>>>>>>
>>>>>>> Il giorno martedì 31 luglio 2012 17:09:44 UTC+2, villas ha scritto:
>>>>>>>>
>>>>>>>> This solution took a while for me to find, so I am sharing it to
>>>>>>>> hopefully save time for others.
>>>>>>>>
>>>>>>>> Problem: The Bootstrap top navbar is great, but it conceals any
>>>>>>>> anchors in your markmin text set with [[myanchor]]
>>>>>>>>
>>>>>>>> Solution: Use this CSS style
>>>>>>>> /*move markmin anchor tags down*/
>>>>>>>> a[name^="markmin"] { position:relative; top:-50px; }
>>>>>>>>
>>>>>>>>
>>>>>>>> Hmm, wonder whether this should be included in standard stylesheet?
>>>>>>>
>>>>>>>
--
