Anchor html code works and then doesn't

ChancyRat · September 29, 2015

I have an anchor code set up on this page:
http://www.joinrats.com/ModifyBehavior/PositiveReinforcement/Method/
which takes people to one section on this page:
http://www.joinrats.com/Links

The anchor is this:
<a name="R+basics"></a>

The link is this:
<a href="http://www.joinrats.com/Links#R+basics" target="blank">these articles in the JoinRats Links</a>

What happens visually when I click the link: First I see this in the URL field, and the page loads correctly in a new tab:
http://www.joinrats.com/Links#R+basics

Then I'm immediately moved to exactly the right place where the anchor is, down the page, but the URL changes:
http://www.joinrats.com/Links#!R+basics=

And then there's a flicker and this URL appears, and I'm jumped to the bottom of the page (leaving the anchor):
http://www.joinrats.com/Links/i-DKfzqhd

:huh :huh :huh

I have struggled endlessly to stop this behavior.
May I have the right anchor code for new Smug?
Thanks.

ChancyRat · October 1, 2015

Bump? I have successfully added the anchor codes to within the page. My "Table of Contents" on
http://www.joinrats.com/Links
Several more code revisions and I'm still not finding the new-Smug codes that work for going from one page to an anchor in another. I imagine it has to do with CSS more than html?

If - shudders - the answer is "no can do," telling me would help minimize my growing head wounds. :bash

Thanks.

ChancyRat · October 1, 2015

I'm dying over here. :cry

This doesn't work either:

Positive Reinforcement

(One of the Four Quadrants of

Operant Conditioning)

Links to Positive Reinforcement – Basics!

Is the problem that the link does not have .htm or .html at the end?

Why doesn't it workkkkkkkk {yowling into the dark North Wind} :cry

cry

Hikin' Mike · October 1, 2015

ChancyRat wrote: »

I'm dying over here. :cry

This doesn't work either:

<h2><a id="prb">Positive Reinforcement<br>
(One of the Four Quadrants of
<br> Operant Conditioning)</a></h2>

<a href="http://www.joinrats.com/Links#prb" target="blank">Links to Positive Reinforcement – Basics!</a>

Is the problem that the link does not have .htm or .html at the end?

Why doesn't it workkkkkkkk {yowling into the dark North Wind} :cry
cry

No, your page doesn't have a .htm or .html at the end.

Hikin' Mike · October 1, 2015

PM sent.

Hikin' Mike · October 2, 2015

I did some testing. On my 'Adding Fonts' page, http://gallery.imagesinthebackcountry.com/Smugmug-customization/Adding-Fonts, I added an anchor on the <h2> 'CSS' text. So when you if you click on this, it takes you to the 'Adding Fonts' page in the section called 'CSS'.

The anchor:

<h2 id="css">CSS</h2>

In your case, you might want to remove the <a tag> and use this instead:

<h2 id="prb">Positive Reinforcement<br>(One of the Four Quadrants of<br> Operant Conditioning)</h2>

With that, I'm going to bed.

ChancyRat · October 2, 2015

Hikin' Mike wrote: »
I did some testing. On my 'Adding Fonts' page, http://gallery.imagesinthebackcountry.com/Smugmug-customization/Adding-Fonts, I added an anchor on the <h2> 'CSS' text. So when you if you click on this, it takes you to the 'Adding Fonts' page in the section called 'CSS'.

The anchor:
<h2 id="css">CSS</h2>
In your case, you might want to remove the <a tag> and use this instead:
<h2 id="prb">Positive Reinforcement<br>(One of the Four Quadrants of<br> Operant Conditioning)</h2>
With that, I'm going to bed.

I love typing a message and then having DG kill it because it had logged me out. :cry

Thank you Mike for trying so hard. I was sans computer last night so couldn't respond.
I'm sorry you can't read my type?? I don't know what to do about that.

I have tried your exact code:

<h2 id="prb">Positive Reinforcement</h2>

<p>Want to read some articles that explain the basics of Positive Reinforcement? <br>
  Visit <a target="blank" href="http://www.joinrats.com/Links#prb">Links to Positive Reinforcement &ndash; Basics!</a></p>

and the page breaks the same way as I first described: I'm taken to the right section, then jumped to the bottom of the page. Maybe I have to remove all the other anchors that currently use names... or do another simpler test...

Mike: <img src="https://us.v-cdn.net/6029383/emoji/iloveyou.gif" border="0" alt="" > <img src="https://us.v-cdn.net/6029383/emoji/iloveyou.gif" border="0" alt="" > <img src="https://us.v-cdn.net/6029383/emoji/iloveyou.gif" border="0" alt="" >

Allen · October 2, 2015

One thing, you can only have one ID = prb on a page. Maybe you have multiple?

ChancyRat · October 2, 2015

Allen wrote: »

One thing, you can only have one ID = prb on a page. Maybe you have multiple?

Thank you Allen, and I did know that (one thing I knew!!!), and I do not have it more than once. I did a find on the prb and got zero.

ChancyRat · October 3, 2015

The problem is Journal style gallery - doesn't allow anchors
Mike, you were really awesome because you nailed the right ID code for me, but that was not the end of the painful road.

I set up a test page and copied the blocks of code into it. Each time I added new code, I tested the page. I had set up the anchor link on another page, to this test page. Each test worked correctly; I was taken to the right section on the test page. The blocks I added, one at a time, included the main block of html, then a youtube video. Then I added the css code for the page. The anchor still worked correctly. Then I checked the gallery settings and made sure Journal style was set and that nothing else differed (except unlisted gallery for the test page). Anchor still worked correctly in the test page.

What was different? The only thing different between the two pages was the presence of ONE photo in the gallery. So I removed the photo from the gallery page where the anchor is not working, AND IT WORKED. The previously broken page was fixed.

Next test: moved a photo into the Test gallery, and this page, which had worked reliably, BROKE.

This drove me to Allen's code for descriptions on the right side for Journal style gallery (even though the code in the page CSS didn't break the anchor links - only adding one photo caused the break). This didn't work: removal of his code, but with one photo in the Journal style gallery caused the anchor link to break.

Next - changed gallery style from Journal, to Portrait collage - and the page was fixed. Finally fixed.

Is this a bug, that anchor codes don't work in Journal style?

Allen · October 3, 2015

Why aren't you using pure Pages rather then galleries? Did you put the anchor code in a caption?

ChancyRat · October 3, 2015

Allen wrote: »

Why aren't you using pure Pages rather then galleries? Did you put the anchor code in a caption?

No, the anchor code was not in a caption. I scrutinized the caption and title, thinking some combo of letters was involved, but nothing I could see. The "breaking" behavior was to jump me down to the bottom of the page where that photo in fact was, so I can see why you would ask this.
This is the now-working-in-collage-portrait page, with the one photo that was present all along:
www.joinrats.com/Links/

This is the the test link that now works (let's see if it works from DG!!!):
http://www.joinrats.com/Links#prb

I've got no pages on my site, Allen... not sure that was conscious as much as a holdover from Old smug where pages weren't an option. I always think I might want to add photos - so having a gallery is a good thing. I always add at least one photo, so galleries are good that way too.

ChancyRat · October 3, 2015

It doesn't work!
OMG. This is not working:
http://www.joinrats.com/Links#prb

And yet if you click that same link that is embedded on this page (HTML block below and RIGHT of the title):
http://www.joinrats.com/ModifyBehavior/PositiveReinforcement/Method/
it DOES work.

ChancyRat · October 3, 2015

I AM JUST SO CONFUSED. now the embedded link here is not working:

http://www.joinrats.com/ModifyBehavior/PositiveReinforcement/Method/

Embedded link below and to the right of the gallery title.

I've only clicked this test link about 30 times, successfully. No changes. How can this be???

:bash:bash:bash:bash:bash

ChancyRat · October 3, 2015

When all seems lost (and some still is), update your computer and clear cookies. and take a fresh look.

The anchor link is working on Firefox, but not on Chrome.

Tested from both within my site, and from DG. Behavior is the same on both FF and Chrome.
FF good.
Chrome bad.

EDITING to add: Not working in IE either.

ChancyRat · October 3, 2015

Apparently a long-standing bug... easy to search and get lots of results on this topic. In fact THIS thread is on p. 2 of the google search results, "ID for anchors doesn't work in Chrome".

ChancyRat · October 4, 2015

The final solution
This works on IE, FF, and Chrome: Added CSS in the content block of the list of links. I put all 40-something IDs at once.

BTW, I use Excel to generate and organize the list of links and all the codes needed. It creates the CSS and HTML sections. Plus I'm able to mass-modify and organize by subject areas, alphabetize, etc. If anyone wants a template, PM me. :ivar

Example, inclusive of all the components needed:

#prb, #ocb{
    color: #000;
 }

<h2 id="prb">
<p id="ocb">

Jumping down to a section within the same page:

<p><a href="#prb">Positive Reinforcement &ndash; Basics</a></p>

From a page to a section on another page:

<a href="http://www.joinrats.com/Links#ocb" target="_blank">Articles on OCB &ndash; Basics!</a></p>

ChancyRat · October 4, 2015

Lastly, changing the gallery style to Journal, caused the code to break. As far as I can tell, fragment links don't work in Journal style.

Anchor html code works and then doesn't

Comments

Positive Reinforcement (One of the Four Quadrants of Operant Conditioning)

Positive Reinforcement

(One of the Four Quadrants of

Operant Conditioning)