Anchor html code works and then doesn't

ChancyRatChancyRat Registered Users Posts: 2,141 Major grins
edited October 4, 2015 in SmugMug Customization
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&quot; 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.

Comments

  • ChancyRatChancyRat Registered Users Posts: 2,141 Major grins
    edited 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.
  • ChancyRatChancyRat Registered Users Posts: 2,141 Major grins
    edited 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:cry
  • Hikin' MikeHikin' Mike Registered Users Posts: 5,467 Major grins
    edited 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&quot; 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:cry

    No, your page doesn't have a .htm or .html at the end.
    - Mike
    Images in the Backcountry

    My SmugMug Customizations | Adding CSS to Your Site | SEO for the Photographer | Locate Your Page/Widget Number | SmugMug Help Desk
  • Hikin' MikeHikin' Mike Registered Users Posts: 5,467 Major grins
    edited October 1, 2015
    PM sent.
    - Mike
    Images in the Backcountry

    My SmugMug Customizations | Adding CSS to Your Site | SEO for the Photographer | Locate Your Page/Widget Number | SmugMug Help Desk
  • Hikin' MikeHikin' Mike Registered Users Posts: 5,467 Major grins
    edited 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.
    - Mike
    Images in the Backcountry

    My SmugMug Customizations | Adding CSS to Your Site | SEO for the Photographer | Locate Your Page/Widget Number | SmugMug Help Desk
  • ChancyRatChancyRat Registered Users Posts: 2,141 Major grins
    edited 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&quot; border="0" alt="" > <img src="https://us.v-cdn.net/6029383/emoji/iloveyou.gif&quot; border="0" alt="" > <img src="https://us.v-cdn.net/6029383/emoji/iloveyou.gif&quot; border="0" alt="" >
  • AllenAllen Registered Users Posts: 10,013 Major grins
    edited October 2, 2015
    One thing, you can only have one ID = prb on a page. Maybe you have multiple?
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • ChancyRatChancyRat Registered Users Posts: 2,141 Major grins
    edited 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.
  • ChancyRatChancyRat Registered Users Posts: 2,141 Major grins
    edited 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?
  • AllenAllen Registered Users Posts: 10,013 Major grins
    edited October 3, 2015
    Why aren't you using pure Pages rather then galleries? Did you put the anchor code in a caption?
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • ChancyRatChancyRat Registered Users Posts: 2,141 Major grins
    edited 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.
  • ChancyRatChancyRat Registered Users Posts: 2,141 Major grins
    edited 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.
  • ChancyRatChancyRat Registered Users Posts: 2,141 Major grins
    edited 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
  • ChancyRatChancyRat Registered Users Posts: 2,141 Major grins
    edited 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.
  • ChancyRatChancyRat Registered Users Posts: 2,141 Major grins
    edited 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".
  • ChancyRatChancyRat Registered Users Posts: 2,141 Major grins
    edited 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>
  • ChancyRatChancyRat Registered Users Posts: 2,141 Major grins
    edited 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.
Sign In or Register to comment.