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.

javascriptiframetagsfancyboxanchor

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

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 :)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Navigating through sibling elements can be accomplished by using various methods in

Can someone help me figure out how to assign unique IDs to 6 different Div elements as I step through them? The code snippet below is not working as expected, giving all Divs the same ID. What is the correct way to accomplish this task? $('#main-slid ...

javascriptjquerycssiterationstep-through

I encountered an issue with the onclick event in JavaScript

I have been struggling with an issue for some time now and I just can't seem to figure out what I am doing wrong. Here's the problem - when I click on a link on my website, a calculator should pop up. Then, when I click the off button on the calc ...

javascript

Bot in discord.js refuses to exit voice channel

I've been struggling to get my bot to leave the voice channel despite trying multiple methods. Here's what I've attempted in the source code: Discord.VoiceConnection.disconnect(); Although this is the current code, I have also tested: messa ...

javascriptnode.jsdiscorddiscord.js

The model.find operation is failing to retrieve the necessary fields from the database

When I execute console.log(correct.password), it returns undefined, even though the if condition results in false. app.post('/login' , async (req , res)=> { const correct = data.findOne({name : req.body.name}).select({name : 0}); if(!c ...

javascriptnode.jsmongodbmongoosefind

Output object data to table by clicking on it - requires two clicks for the data to be

I have a situation where I want the user to click a button in order to print an object obtained from a web service into a table. The issue is that currently, I have to click the button twice for it to work properly. Here's some more detail: The button ...

javascriptreactjsmaterial-ui

Tips for automatically verifying coupons and adjusting prices

My current task involves implementing a coupon feature on the checkout page using an AJAX request to validate the coupon and adjust the price accordingly. However, when the checkout view is loaded, I encounter an error message: The first argument in the ...

javascriptruby-on-railsrubyajaxruby-on-rails-4

Modifying the attribute of an element inside an array

Presented below is an object: { "_id" : ObjectId("5a8d83d5d5048f1c9ae877a8"), "websites" : [ "", "", "" ], "keys" : [ { "_id" : ObjectId("5a8d83d5d5048f1c9ae877af"), "name ...

javascriptnode.jsmongodbexpressmongoose

An alternative to PHP's exec function in Node.js

I am interested in developing a piece of software using C (such as prime number factorization) and hosting it on my web server with Node.js. Following that, I would like to create an HTML document containing a form and a button. Upon clicking the button, ...

javascriptphphtmlnode.jsexpress

Having difficulty implementing two-way binding on SELECT element within Angular JS programmatically

Struggling with implementing two-way binding for SELECT elements. Attempting to dynamically change the selected element through code. While I've come across examples on Stackoverflow for binding the change event for SELECT, finding resources on the ap ...

javascriptangularjsangularjs-ng-modelangularjs-ng-options

Tips for using rspec to test front end functionality?

In my Rails project, I have incorporated Vue.js using only the core library. Currently, most forms in the project are developed with Vue.js. When testing front-end features like form filling or validations using feature tests in RSpec, I found it to be qui ...

javascriptruby-on-railsrspecvue.js

Color picker can be utilized as an HTML input element by following these steps

After trying out various color pickers, I was not satisfied with their performance until I stumbled upon Spectrum - The No Hassle jQuery Colorpicker. It perfectly met my requirements. <html> <head> <meta http-equiv="content-type" content="t ...

javascriptphpjqueryhtmlcss

Determine whether a WebElement contains a particular content within the :after pseudo class

After locating my element in Selenium, I've come across an interesting challenge. IWebElement icon = box.FindElement(By.ClassName("box-icon")); Sometimes, this element (icon) has a content set as follows: &:after { content: $icon-specia ...

javascriptjquerycssselenium

Tips for subscribing to an Angular Unit Test:

In the process of writing test cases for a component, I first tackled a basic test case to ensure smooth functionality. Initially, I faced Dependency Injection errors and managed to resolve them. The current challenge I am encountering involves mocking API ...

javascriptangularunit-testingjasminekarma-jasmine

Approach for fetching these JSON records

I am currently exploring ways to retrieve all entries within a JSON payload using JavaScript. Specifically, I am interested in finding the best method to extract all instances of "o4" in a specific order (-159, -257). How can this be achieved? { ...

javascriptjson

Converting numbers in React Native, leaving only the last four digits untouched

When mapping biomatricData.ninId, the value I am receiving is "43445567665". biomatricData.ninId = 43445567665 My task now is to display only the last 4 digits and replace the rest with "*". I need to format 43445567665 as follows: Like - *******7665 ...

javascriptreactjsreact-nativeecmascript-6

How to manually close the modal in Next.js using bootstrap 5

Incorporating Bootstrap 5.2 modals into my Next.js application has been smooth sailing so far. However, I've encountered an issue with closing the modal window after a successful backend request. To trigger the modal, I use the data-bs-toggle="modal" ...

javascriptreactjstwitter-bootstrapnext.jsbootstrap-5

React form not detecting the Enter key press in onSubmit event

Currently, I am in the process of working on a form that includes a tag input feature. The issue I am facing is that when a user enters a tag and presses enter, it not only adds the tag to a specific array but also submits the form. While I can use the e.p ...

javascriptreactjs

Pytest is not able to locate any elements on the webpage, yet the same elements can be easily found using the console

When using CSS or XPath in the console (F12), I am able to locate the element on the page. $$("span.menu-item[data-vars-category-name='Most Popular']") However, when trying to find the same elements with Selenium (pytest) using: driver.find_el ...

javascripthtmlpython-3.xseleniumpytest

Adding choices to dropdown menu in AngularJS

As a beginner in AngularJs, I am struggling with appending options to select boxes created by javascript. Below is the code snippet that is causing the issue. var inputElements = $('<div><label style="float:left;">' + i + '</ ...

javascriptangularjsjson

Move router parameters to separate files to streamline and organize code

I have encountered a bit of an issue. I currently have the following code in my routing.js file where I define both my parameter and route. I have moved the routes to a separate router instance in my routing.js file, but I am struggling to separate the par ...

javascriptnode.jsexpressmean