Clickable link in popup window using fancybox

Question

Clickable link in popup window using fancybox

When I try to use fancybox to open an iframe and scroll to an anchor tag, it works perfectly in IE but not consistently in other browsers. It stops at a different place than the anchor.

I suspect the issue may be related to JavaScript based on information I found here: . However, I am having trouble fixing my code accordingly.

Here is the link:

<a class="various fancybox.iframe" href="cost_of_hire.php#cupcakeanchor"><img src="images/services/4.jpg" alt="" /></a>

And the anchor:

<a name="cupcakeanchor">CUP CAKE MAKING PARTY<br />£0.00</a>

Any assistance would be greatly appreciated. Thanks

PS.: In IE everything is functioning properly, while in Chrome and Firefox 8 out of 12 links work fine, in Safari 6 work correctly, and in Opera none of them work as expected.

javascript iframe tags fancybox anchor

Answer 1

Answer №1

When using Fancybox, it seems that anchors do not function properly with certain elements like or . You may want to experiment with using a different element instead.

Answer 2

When using Fancybox, it seems that anchors do not function properly with certain elements like or . You may want to experiment with using a different element instead.

Answer 3

Answer №2

If you're looking to create a clickable link that opens an iframe with an anchor, you won't be able to do it directly but with some javascript magic, it's totally achievable. I personally used this method in my Prestashop website and it worked like a charm.

Here is an example of how the link should look:

<a href="http://mylink.com/blabla/#myanchor" class="iframe-pv">Click here</a>

And here is the code snippet I used to make it work:

$(document).on('click', 'a.iframe-pv', function(e){
    e.preventDefault();
    var anchor = '';
    var url = $(this).attr('href');
    var anchorIdx = url.indexOf('#');

    if (anchorIdx > -1) {
        anchor = url.substring(anchorIdx, url.length);
        url = url.substring(0, anchorIdx);
    }

    if(url.indexOf('content_only=') == -1) {
        url += (url.indexOf('?') > -1) ? '&' : '?';
        url += 'content_only=1';
    }

    if (!!$.prototype.fancybox){
        $.fancybox({
            'padding': 20,
            'width': '70%',
            'height': '70%',
            'type': 'iframe',
            'href': url + anchor
        });
    }
});

I hope this explanation helps you achieve what you need! Good luck :)

Answer 4

If you're looking to create a clickable link that opens an iframe with an anchor, you won't be able to do it directly but with some javascript magic, it's totally achievable. I personally used this method in my Prestashop website and it worked like a charm.

Here is an example of how the link should look:

<a href="http://mylink.com/blabla/#myanchor" class="iframe-pv">Click here</a>

And here is the code snippet I used to make it work:

$(document).on('click', 'a.iframe-pv', function(e){
    e.preventDefault();
    var anchor = '';
    var url = $(this).attr('href');
    var anchorIdx = url.indexOf('#');

    if (anchorIdx > -1) {
        anchor = url.substring(anchorIdx, url.length);
        url = url.substring(0, anchorIdx);
    }

    if(url.indexOf('content_only=') == -1) {
        url += (url.indexOf('?') > -1) ? '&' : '?';
        url += 'content_only=1';
    }

    if (!!$.prototype.fancybox){
        $.fancybox({
            'padding': 20,
            'width': '70%',
            'height': '70%',
            'type': 'iframe',
            'href': url + anchor
        });
    }
});

I hope this explanation helps you achieve what you need! Good luck :)

Clickable link in popup window using fancybox

Answer №1

Answer №2

Similar questions

Guide on sending JSON object to Angular custom components

Achieving the functionality of making only one list item in the navbar bolded upon being clicked using React and Typescript logic

Error: JSON key data not present in rendering

"Headers cannot be set once they have been sent to the client... Error handling for unhandled promise rejection

Custom positioning of Mui Snackbar in V5

The combination of Fabric.js, Darkroom.js, and devicePixelRatio offset creates a powerful tool

Triggering of NVD3 Angular Directive callback occurring prematurely

Tips for capturing the interaction between a jQuery Dialog and its Parent

Vue.js is displaying an error message stating that the data property is

Is there still a need to preload dynamic images in the background?

Ways to eliminate an item in a JSON structure?

Getting the x-axis points on Google charts to start at the far left point

The parent component is failing to pass the form values to the child form group in CVA

How to modify browser's back button action in Vue.js

How can I display a pattern using Javascript?

Add Firebase Data to Dropdown

How can you include the product price in the cart using the URL on WooCommerce?

Vue 3 list fails to refresh

What steps can be taken to update the cart if all products have been removed?

What are the best ways to display nicely formatted JSON data in a text area using React JS?