Click here to Skip to main content
15,844,387 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hi!

I have an unusually wide page with tenses in https://scienceprojects.lv/tenses

I'm trying to assign an ID to each tense in English so it takes the class to exact tense when I specify a link with anchor. For example, the https://scienceprojects.lv/tenses#pastperfectcontinuous should open the page at exactly to Past Perfect Continuous. So that the students don't have to scroll horizontally.

I know this works well within clean HTML, but in my case I'm trying to assign an ID with an HTML anchor tag to an SVG element by wrapping it around anchor tag.

What I have tried:

By merely wrapping the container with does not work. Neither does span or div.

HTML
<a id="pastperfectcontinuous"><text transform="matrix(1.1 0 0 1 268.9156 437.0796)" data-fancybox data-type="iframe"  href="Tenses/tenses/Past_perfect_continuous.php" class="st21 st22 st23">Past Perfect Continuous</text></a>
Posted
Updated 25-Jan-23 10:22am
v11

The id element here is pastperfectcontinuous but your anchor is for #past-perfect-continuous. Have you tried either:

  • Removing the hyphens from the anchor (#pastperfectcontinuous)
  • Adding hyphens to the id attribute (id="past-perfect-continuous")

Remember that the id value and the anchor # need to be exactly the same, otherwise the page won't navigate to it.
 
Share this answer
 
v2
Comments
Liepājas Liedaga vidusskola 24-Jan-23 9:22am    
Sorry, I have updated my question to make the link and ID correspond. I was playing with both hyphens, underscores or without any signs. While copying, I missed it. It still doesn't work. Thanks for input.
Chris Copeland 24-Jan-23 9:29am    
I see, I notice you're using data-fancybox which I believe is a reference to the jQuery lightbox plugin. It's entirely possible that this plugin is changing the DOM structure of your page which means the element could be being affected. Unfortunately I don't know enough about the plugin to make an informed guess but you could try inspecting the HTML elements within your browser (typically right-clicking the element and choosing "Inspect" is enough), and you should be able to see whether the page is the same. Here is an example of the anchor working[^], so the scrolling shouldn't be an issue.
Liepājas Liedaga vidusskola 24-Jan-23 12:38pm    
Yeah, but data-fancybox is within <text> tag. While I'm trying to wrap it within .
I've also tried adding it to places without any jQuery. It still fails.

Could that be due to SVG elements and HTML tags within an SVG element? Your example provides HTML only.
Chris Copeland 25-Jan-23 10:33am    
I just noticed that the link you provided is an example page, I opened the page and manually appended #pastperfectcontinuous to the end and the browser window did actually navigate to that element, so I don't see the issue?
Liepājas Liedaga vidusskola 25-Jan-23 15:12pm    
Can you video it? I've tried both a and g tags. I still have nothing working. Weird.
Everything you always wanted to know about SVG, but decided to come to CP instead:
World Wide Web Consortium (W3C)[^]
 
Share this answer
 
Ok. Discovered the culprits of the issues I was having.

1st issue. My code had a scroll to script that took the user to the center of the horizontal middle of the page.
JavaScript
<script>
function pageScroll() 
{ window.scrollTo(1950,0);} 
</script>

2nd issue. After removing the code in the 1st issue I ran into another issue. Namely, the link worked just once. Once I refresh, it goes away. This was due to I had a link conversion set in .htaccess file which converted my original link https://scienceprojects.lv/tenses to https://scienceprojects.lv/english.php#pastperfectcontinuous
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900