Anchor Links
11 views
Skip to first unread message
Amanda
Apr 23, 2013, 12:55:35 PM4/23/13
to reason-d...@googlegroups.com
With the fixed banner on our new site design we have come across issues with the content for anchor links being hidden behind the banner on click. We have found a solution that we believe might alleviate this issue, but I was wondering if anyone could point me in the direction of where the anchor link creation happens so we can try to change that structure?
Thanks!
Amanda
Matt Ryan
Apr 23, 2013, 3:25:29 PM4/23/13
to reason-d...@googlegroups.com
Can you share a link where this is happening? I'm curious about the nature of the issue.
Thanks,Matt
Amanda--
You received this message because you are subscribed to the Google Groups "Reason Discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email to reason-discuss...@googlegroups.com.
To post to this group, send email to reason-d...@googlegroups.com.
Visit this group at http://groups.google.com/group/reason-discussion?hl=en-US.
For more options, visit https://groups.google.com/groups/opt_out.
Amanda
Apr 23, 2013, 4:08:05 PM4/23/13
to Reason Discussion
Matt,
On this page - http://devweb.beloit.edu/isr/it/campuscomputing/discounts/
If you click on one of the Plan/Discount links it will jump you to the
section, but because of the nature of anchor links placing that
content at the top of the browser window, the actual content it should
jump to gets hidden behind the banner. We have a student worker
looking in to this and he has found a solution (
http://css-tricks.com/hash-tag-links-padding/ ) that appears as though
it will work, but we don't know exactly where we will want to modify
things to update all anchor links/make it so future anchor links are
created in this way. And, maybe there is a better solution we should
consider instead?
Thanks,
Amanda
On this page - http://devweb.beloit.edu/isr/it/campuscomputing/discounts/
If you click on one of the Plan/Discount links it will jump you to the
section, but because of the nature of anchor links placing that
content at the top of the browser window, the actual content it should
jump to gets hidden behind the banner. We have a student worker
looking in to this and he has found a solution (
http://css-tricks.com/hash-tag-links-padding/ ) that appears as though
it will work, but we don't know exactly where we will want to modify
things to update all anchor links/make it so future anchor links are
created in this way. And, maybe there is a better solution we should
consider instead?
Thanks,
Amanda
Matt Ryan
Apr 23, 2013, 4:34:47 PM4/23/13
to reason-d...@googlegroups.com
The code that generates anchor links in wysiwyg content is in Loki 2. It is probably doable to find the code in Loki that converts back and forth between the anchor placeholders you see in WYSIWYG mode and "real" anchors and to make it produce (and recognize) different patterns.
That said, I'd be a bit leery of putting any significant work into an effort like that, because we currently working on a project to replace Loki with TinyMCE, and Loki does not present an easy learning curve. It might be better to look into modifying TinyMCE.
That said, I'd be a bit leery of putting any significant work into an effort like that, because we currently working on a project to replace Loki with TinyMCE, and Loki does not present an easy learning curve. It might be better to look into modifying TinyMCE.
I wonder if there is a way could target anchor <a> elements that would allow us to avoid modifying Loki to produce span tags. Logically we want to target <a> elements with an id that is not empty, and no href value. Perhaps a clever CSS selector, or a jQuery line that finds these and transforms them so we can address them with CSS, could be an alternative approach.
Matt
Matt Ryan
Apr 23, 2013, 4:46:18 PM4/23/13
to reason-d...@googlegroups.com
I've only confirmed that this works in FF 20, but it might be worth trying:
a:not([href])[id] {
margin-top: -300px; /* or whatever your fixed header height is */
padding-bottom: 300px;
display: block;
}
a:not([href])[id] {
margin-top: -300px; /* or whatever your fixed header height is */
padding-bottom: 300px;
display: block;
}
Amanda
Apr 23, 2013, 4:58:35 PM4/23/13
to Reason Discussion
Thanks, Matt.
I will look in to this some more tomorrow. Sorry about the wrong
URL. It should have been www. But I am guessing you figured that
out.
Amanda
On Apr 23, 3:46 pm, Matt Ryan <matt.d.r...@gmail.com> wrote:
> I've only confirmed that this works in FF 20, but it might be worth trying:
>
> a:not([href])[id] {
> margin-top: -300px; /* or whatever your fixed header height is */
> padding-bottom: 300px;
> display: block;
>
>
>
>
>
>
>
> }
> On Tue, Apr 23, 2013 at 3:34 PM, Matt Ryan <matt.d.r...@gmail.com> wrote:
> > The code that generates anchor links in wysiwyg content is in Loki 2. It
> > is probably doable to find the code in Loki that converts back and forth
> > between the anchor placeholders you see in WYSIWYG mode and "real" anchors
> > and to make it produce (and recognize) different patterns.
>
> > That said, I'd be a bit leery of putting any significant work into an
> > effort like that, because we currently working on a project to replace Loki
> > with TinyMCE, and Loki does not present an easy learning curve. It might be
> > better to look into modifying TinyMCE.
>
> > I wonder if there is a way could target anchor <a> elements that would
> > allow us to avoid modifying Loki to produce span tags. Logically we want to
> > target <a> elements with an id that is not empty, and no href value.
> > Perhaps a clever CSS selector, or a jQuery line that finds these and
> > transforms them so we can address them with CSS, could be an alternative
> > approach.
>
> > Matt
>
> >> On this page -http://devweb.beloit.edu/isr/it/campuscomputing/discounts/
I will look in to this some more tomorrow. Sorry about the wrong
URL. It should have been www. But I am guessing you figured that
out.
Amanda
On Apr 23, 3:46 pm, Matt Ryan <matt.d.r...@gmail.com> wrote:
> I've only confirmed that this works in FF 20, but it might be worth trying:
>
> a:not([href])[id] {
> margin-top: -300px; /* or whatever your fixed header height is */
> padding-bottom: 300px;
> display: block;
>
>
>
>
>
>
>
> }
> On Tue, Apr 23, 2013 at 3:34 PM, Matt Ryan <matt.d.r...@gmail.com> wrote:
> > The code that generates anchor links in wysiwyg content is in Loki 2. It
> > is probably doable to find the code in Loki that converts back and forth
> > between the anchor placeholders you see in WYSIWYG mode and "real" anchors
> > and to make it produce (and recognize) different patterns.
>
> > That said, I'd be a bit leery of putting any significant work into an
> > effort like that, because we currently working on a project to replace Loki
> > with TinyMCE, and Loki does not present an easy learning curve. It might be
> > better to look into modifying TinyMCE.
>
> > I wonder if there is a way could target anchor <a> elements that would
> > allow us to avoid modifying Loki to produce span tags. Logically we want to
> > target <a> elements with an id that is not empty, and no href value.
> > Perhaps a clever CSS selector, or a jQuery line that finds these and
> > transforms them so we can address them with CSS, could be an alternative
> > approach.
>
> > Matt
>
>
> >> If you click on one of the Plan/Discount links it will jump you to the
> >> section, but because of the nature of anchor links placing that
> >> content at the top of the browser window, the actual content it should
> >> jump to gets hidden behind the banner. We have a student worker
> >> looking in to this and he has found a solution (
> >>http://css-tricks.com/hash-tag-links-padding/) that appears as though
> >> If you click on one of the Plan/Discount links it will jump you to the
> >> section, but because of the nature of anchor links placing that
> >> content at the top of the browser window, the actual content it should
> >> jump to gets hidden behind the banner. We have a student worker
> >> looking in to this and he has found a solution (
Amanda
Apr 24, 2013, 10:58:59 AM4/24/13
to Reason Discussion
Matt,
Thanks for the suggestion. That does appear to have worked.
Amanda
On Apr 23, 3:46 pm, Matt Ryan <matt.d.r...@gmail.com> wrote:
> I've only confirmed that this works in FF 20, but it might be worth trying:
>
> a:not([href])[id] {
> margin-top: -300px; /* or whatever your fixed header height is */
> padding-bottom: 300px;
> display: block;
>
>
>
>
>
>
>
> }
> On Tue, Apr 23, 2013 at 3:34 PM, Matt Ryan <matt.d.r...@gmail.com> wrote:
> > The code that generates anchor links in wysiwyg content is in Loki 2. It
> > is probably doable to find the code in Loki that converts back and forth
> > between the anchor placeholders you see in WYSIWYG mode and "real" anchors
> > and to make it produce (and recognize) different patterns.
>
> > That said, I'd be a bit leery of putting any significant work into an
> > effort like that, because we currently working on a project to replace Loki
> > with TinyMCE, and Loki does not present an easy learning curve. It might be
> > better to look into modifying TinyMCE.
>
> > I wonder if there is a way could target anchor <a> elements that would
> > allow us to avoid modifying Loki to produce span tags. Logically we want to
> > target <a> elements with an id that is not empty, and no href value.
> > Perhaps a clever CSS selector, or a jQuery line that finds these and
> > transforms them so we can address them with CSS, could be an alternative
> > approach.
>
> > Matt
>
> >> On this page -http://devweb.beloit.edu/isr/it/campuscomputing/discounts/
Thanks for the suggestion. That does appear to have worked.
Amanda
On Apr 23, 3:46 pm, Matt Ryan <matt.d.r...@gmail.com> wrote:
> I've only confirmed that this works in FF 20, but it might be worth trying:
>
> a:not([href])[id] {
> margin-top: -300px; /* or whatever your fixed header height is */
> padding-bottom: 300px;
> display: block;
>
>
>
>
>
>
>
> }
> On Tue, Apr 23, 2013 at 3:34 PM, Matt Ryan <matt.d.r...@gmail.com> wrote:
> > The code that generates anchor links in wysiwyg content is in Loki 2. It
> > is probably doable to find the code in Loki that converts back and forth
> > between the anchor placeholders you see in WYSIWYG mode and "real" anchors
> > and to make it produce (and recognize) different patterns.
>
> > That said, I'd be a bit leery of putting any significant work into an
> > effort like that, because we currently working on a project to replace Loki
> > with TinyMCE, and Loki does not present an easy learning curve. It might be
> > better to look into modifying TinyMCE.
>
> > I wonder if there is a way could target anchor <a> elements that would
> > allow us to avoid modifying Loki to produce span tags. Logically we want to
> > target <a> elements with an id that is not empty, and no href value.
> > Perhaps a clever CSS selector, or a jQuery line that finds these and
> > transforms them so we can address them with CSS, could be an alternative
> > approach.
>
> > Matt
>
>
> >> If you click on one of the Plan/Discount links it will jump you to the
> >> section, but because of the nature of anchor links placing that
> >> content at the top of the browser window, the actual content it should
> >> jump to gets hidden behind the banner. We have a student worker
> >> looking in to this and he has found a solution (
> >>http://css-tricks.com/hash-tag-links-padding/) that appears as though
> >> If you click on one of the Plan/Discount links it will jump you to the
> >> section, but because of the nature of anchor links placing that
> >> content at the top of the browser window, the actual content it should
> >> jump to gets hidden behind the banner. We have a student worker
> >> looking in to this and he has found a solution (
Reply all
Reply to author
Forward
0 new messages