12 replies · opened Jan 16, 2021
Hello, I have an issue where an embedded widget uses the following jquery file (http://modules.readvantage.com/idxlistings/js/jquery-1.3.2.min.js), and this is causing a conflict with the jquery file in the canvas theme.
Is there a way I can assign this jquery to only the embed or fix the conflict? Thanks!
Hello,
Unfortunately, Older Versions of jQuery are not supported, and especially since this is more than 10 years old, we would not recommend using it as they have security risks. Instead can you simply use the Latest Version and delete the Old Version and check what console errors you are getting. If it is something simple, we can try resolving this.
Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
Hello, I understand, Unfortunately I have no control over the use of this old service.
Here is the testing site http://stage1.vaccaroblock.com/
The element that I need working is the Search Bar inside the main Slider. It uses an onclick function
onclick="onTextSearchSubmit()"
I have narrowed down that the sizzlejs jquery code is all that is needed from that old jquery file. If I remove the Canvas Jquery.js file and put this below file in its place the search bar form works, unfortunately I cant have both Scripts working together.
http://stage1.vaccaroblock.com/js/sizzlejs.js
Im have limited knowledge on Jquery and am sure this probably is simple, if you could look at this and see what I need to do to use the canvas jquery.js and still keep this search bar functioning I would greatly appreciate your help! Thanks you very much!
I found a way to get it to work without the jquery file.
Thanks for your help.
I do howerver have another question regarding this...now that its working I would like to have the search results pop-up a modal and have an iframe inside the modal showing the page that would load from the search. Is this possible?
new staging link
Hello,
Thanks for your Patience!
Glad that the issue was resolved with the jQuery.
We would suggest using the iFrame Modal: http://docs.semicolonweb.com/docs/shortcodes/lightbox/#docs-snippet-iframe . And this Modal can be opened programmatically. Try using this code:
[ch_pre]$.magnificPopup.open({
items: {
src: yourSearchURL
},
type: 'iframe'
}, 0);[/ch_pre]
Simply use the yourSearchURL Variable to programmatically modify the Search URL after the User clicks the button.
This should work fine. Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
Thanks, this sounds good!
I just dont exactly understand where this code goes. The following is the form code, can you tell me what changes I need to make to use the iframe modal? Thanks!
Search
Hello,
You can consider using something like this:
[ch_pre type="js"]$('#iframe-search-form').submit(function() {
let $inputs = $('#iframe-search-form :input'),
values = {},
action = $(this).attr('action');
$inputs.each(function() {
values[this.name] = $(this).val();
});
let yourSearchURL = new URLSearchParams(values).toString();
$.magnificPopup.open({
items: {
src: action + '?' + yourSearchURL
},
type: 'iframe'
}, 0);
return false;
});[/ch_pre]
Change your Form's ID to iframe-search-form. This should work fine. Hope this Helps!
Any further customizations are your responsibility as we currently do not provide Customization related Support according to the Item Support Policy: https://themeforest.net/page/item_support_policy .
Let us know if we can help you with anything else or if you find any further issues.
That worked! Thanks!
Only other question I have on this is how to set the modal dimensions to 1000px x 650px.
If I am asking too much I understand. I appreciate all your help!
Does your team take on custom work on a paid basis?
Hello,
Currently, a Fixed Height on the Modal cannot be set. But you can set the Width using the following code:
[ch_pre type="css"].mfp-iframe-holder .mfp-content {
max-width: 1000px;
}[/ch_pre]
This will definitely work fine. Hope this Helps!
Sure, please contact us directly via Our Email: semicolonweb@gmail.com, and we can discuss further.
Let us know if we can help you with anything else or if you find any further issues.
Hello, Im having trouble with the supplied code...it worked fine when viewing on my local computer, but after uploading the files to the web server it is not working. The search form is now an iframe and showing the website inside this iframe. Here is a staging link, any help would be much appreciated!
https://stage35.vaccaroblock.com
$('#iframe-search-form').submit(function() {
let $inputs = $('#iframe-search-form :input'),
values = {},
action = $(this).attr('action');
$inputs.each(function() {
values[this.name] = $(this).val();
});
let yourSearchURL = new URLSearchParams(values).toString();
$.magnificPopup.open({
items: {
src: action + '?' + yourSearchURL
},
type: 'iframe'
}, 0);
return false;
});Hello,
The JS Codes that you have placed in the Header should be placed in the Footer after the js/jquery.js JS Linking. This is what, that might be causing the issue. Also, the Tabs Nav does not follow the Default Code Structure. If you are not intending to use the Tabs Functionality and just intend to use the Design, simply add the .customjs Class to the .tabs Element. This will not apply any JS Codes to the Tabs.
Additionally, as we have mentioned, the Custom JS Codes we had provided are for experimental purposes only and do not come with additional support as it is out of the scope of the included Support with Canvas. You will need to build and customize it according to your requirements, manually.
Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
Have the same question, or something new?
Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.
Reply on the dashboard