Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • August 3, 2018 at 3:59 pm #993302
    Rustybucket

    Hello

    If I use an anchor to link to a specific accordion, the page will jump to the accordion and the correct accordion will open as expected. But if the link is within an SVG it doesn’t work. The URL updates with the anchor but the JS isn’t triggered to open the accordion.

    Any idea how I can include the SVG content in that function so it acts like a normal link? Or, can you point me to where the existing JS function is so I can inspect it and write my own?

    Page with examples given privately.

    Thanks.

    August 5, 2018 at 2:36 pm #993683
    Dude

    Hey Rustybucket,

    I checked the code and probably you need to replace the xlink:href attribute with href. At the moment your links look like:

    
<a xlink:href="#toggle-id-3"><path class="org_s_3" d="M28.48,277.56A180.55,180.55,0,0,1,69.84,38.78L70,39c17,25,38,43,55,68a331.19,331.19,0,0,1,28,49.73c-14.69,11.79-29.6,23.7-45,36.27C77.07,218.08,51.74,246.66,28.48,277.56Z"></path></a>

    and they should look like:

    
<a href="#toggle-id-3"><path class="org_s_3" d="M28.48,277.56A180.55,180.55,0,0,1,69.84,38.78L70,39c17,25,38,43,55,68a331.19,331.19,0,0,1,28,49.73c-14.69,11.79-29.6,23.7-45,36.27C77.07,218.08,51.74,246.66,28.48,277.56Z"></path></a>

    Best regards,
    Dude

    August 6, 2018 at 11:05 am #993877
    Rustybucket

    Thanks Dude but that’s not it.

    On the page I have two SVGs, one using standard href links and the other using xlink:href links. Neither work.

    Any other suggestions please?

    Thanks

    August 6, 2018 at 10:40 pm #994129
    Dude

    Hi,
    I read some articles now and it seems like the svg images won’t behave like standard links (a href). Our smooth scrolling script and tab selector script does not support the structure of svg images at the moment. I’ll tag this thread for our devs and ask them to look into it but I can’t promise we’ll support svg soon.

    For now I’d recommend to use the xlink:href attribute which won’t conflict with our scripts. You could then add some custom javascript code (i.e with a child theme) to add svg support. A good starting point would be this tutorial: https://danielleleong.com/blog/2015/06/03/svg-anchor-links.html

    Best regards,
    Dude

    September 26, 2018 at 12:54 pm #1014698
    Rustybucket

    A bit late but in case it helps someone in the future this was my solution:

    $('svg.org-chart a').on('click',function (e) {
	e.preventDefault();
	var $existingTab = $('.active_tc');
	var existingTabHeight = $existingTab.height() || 0 ;
	if (existingTabHeight) {
		var existingTabPosition = $existingTab.offset().top;
	} else {
		var existingTabPosition = 0;
	}
	var target = $(this).attr('xlink:href');
	var $target = $("p[data-fake-id='" + target + "']");
	if (window.location.hash != target) {
		$target.click();
	}
	var scrdis = $target.offset().top - 140
	if (existingTabPosition < scrdis) {
		var scrdis =scrdis- existingTabHeight;
	}
	$('html, body').stop().animate({
		'scrollTop': scrdis
	}, 900, 'swing');
});
    September 26, 2018 at 2:47 pm #1014757
    Dude

    Hi,

    Great, thanks for sharing the code!

    Best regards,
    Peter

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.