I am using jquery fancybox plugin in the website for displaying the country selection options to the user. So, I have a dropdown on my fancybox page that displays the list of country user can select and button "Go" which closes the fancybox and reloads the parent window. Also, I am replacing the normal dropdown <select> tag with the <div>'s to add style on the dropdown button. This is done using custom jscript similar to what's explained on the below dropdown style
To call this dropdown page, I am using
$('a.fancy').fancybox({
'type': 'iframe',
'scrolling': "no",
'width': 395,
'height': 123,
'overlayOpacity': 0.62,
'onClosed': function () {
parent.location.reload(true);
; // <---i guess you don't need this (JFK)
}
});
if I change the type to "ajax" my drop-down on the page shows fine with all the values. But when I use type as "iframe", my drop-down list values are not displaying outside the page and got truncated with the iframe window size (i.e first two values are visible and rest are not displayed outside of iframe window size)
Can anyone please suggest what's the difference it is causing when i am changing type from ajax to iframe?
Thanks!!
Yatish
Kindly visit the codes in action here: http://jsfiddle.net/ff2P9/
and tell me if this is the effect you want.
Basically, when you use **type: iframe** in conjunction with **scrolling: no**, any content outside the iframe's borders are clipped [hidden from view]. So, if you require to see the rest of the content [in an iframe], you need to set the scrolling option to either "yes" or "auto".
snippet:
$(document).ready(function() {
$('a.fancy').fancybox({
'type': 'iframe',
'scrolling': "auto",
'width': 395,
'height': 323,
'overlayOpacity': 0.62,
'onClosed': function () {
parent.location.reload(true);
; // <---i guess you don't need this (JFK)
}
});
return false;
});
--
Again, please see fancybox in action here: http://jsfiddle.net/ff2P9/
Related
I'm trying to add a custom button into the Elementor text widget toolbar next to other buttons like Bold, Italic, Underline etc. It seems that the ability to customize the instance using PHP may be disabled but that it is possible to do so using JavaScript instead.
I can get back the view by using the following code but I'm unable to get back the editor instance.
elementor.hooks.addAction( 'panel/open_editor/widget/text-editor', function( panel, model, view ) {}
I've tried the following suggestions but none seem to return anything after that.
// get active instances of the editor
let editor = tinymce.activeEditor;
var editor = elementor.editors.get(0).getEditModel().get('editor');
var activeEditor = view.getOption('editor');
The rest of the suggested code after getting the editor instance is as follows but I don't get this far.
// add a button to the editor buttons
editor.addButton('tooltip', {
text: 'tooltip',
icon: false,
onclick: (editor) => {
tooltipCallback(editor);
}
});
// the button now becomes
let button=editor.buttons['tooltip'];
// find the buttongroup in the toolbar found in the panel of the theme
let bg=editor.theme.panel.find('toolbar buttongroup')[0];
// without this, the buttons look weird after that
bg._lastRepaintRect=bg._layoutRect;
// append the button to the group
bg.append(button);
I want to find out if imprint links are working. Sometimes there are cookie consistent banners and you can not click the link on the page.
But is there a way to find out if there is a second imprint link is clickable on the modal?
export const ttValidateImprintClickable = () => {
cy.log("validateImprintClickable - NCA TESTIFY");
cy.get("a")
.contains("Impressum")
.each((item) => {
let isClick = item.;
debugger;
});
};
Example page https://www.qi-digital.de
Plugin to publish solution open source https://github.com/ncatestify/cypress-base-plugin/blob/main/src/commands/tt-validate-imprint-clickable.ts
The problem is not that you need to find one of the options that is clickable. All the links are all non-clickable because the cookie dialog is covering them.
This is how you can dismiss the cookie dialog and the gray mask which covers the main page
cy.visit('https://www.qi-digital.de');
// in case the cookie is already set and the mask does not appear
// use a conditional check first
cy.get('body').then($body => {
if ($body.find('#SgCookieOptin').length) {
cy.get('.sg-cookie-optin-box-close-button').click()
}
})
// now just click the link
cy.contains('a', 'Impressum').click()
// and confirm the new page appears
cy.contains('h1', 'Impressum', {timeout:10_000}).should('be.visible')
It seems to me that in the test runner, the cookie dialog always appears, in which case you can simplify the test
cy.visit('https://www.qi-digital.de');
// remove the cookie dialog
cy.get('.sg-cookie-optin-box-close-button').click()
// now just click the link
cy.contains('a', 'Impressum').click()
// and confirm the new page appears
cy.contains('h1', 'Impressum', {timeout:10_000}).should('be.visible')
Clicking the "Impressum" link on the cookie modal
This code will click the "Impressum" link that is on the footer of the cookie modal.
I added some code to clear application data to force the modal, but it's not consistently showing the cookie modal.
cy.clearCookies()
cy.clearLocalStorage()
cy.get('#SgCookieOptin') // cookie modal
.find('a:contains(Impressum)') // find the link in the modal footer
.then($a => $a.removeAttr('target')) // stop new browser tab opening
.click()
Take a look at this page Is focusable
Is focusable
Returns a boolean indicating whether an element can receive focus.
Cypress internally uses this method everywhere to figure out whether an element is hidden,
mostly for actionability.
So try mapping the elements to the true/false result of this method
cy.contains('a', 'Impressum')
.each($el => {
const isActionable = Cypress.dom.isFocusable($el)
... // continue test
})
Looking at your gist, this may be what you need
cy.contains('a', 'Impressum')
.filter((index, el) => Cypress.dom.isFocusable(Cypress.$(el)) )
.eq(0)
.click()
Where the filter command takes a function and passes only those that return true.
Since Cypress.dom.isFocusable() needs a jQuery object (same as passed to .each()) we first need to wrap the "raw" element given to .filter().
Next, take the first only in case multiple items are clickable.
Or click multiple items at once like this (but probably you only want one item).
cy.contains('a', 'Impressum')
.filter((index, el) => Cypress.dom.isFocusable(cy.wrap($el)) )
.click({multiple:true})
I am trying to add a code generated from https://pages.etoro.com/widgets/signup/demo.html and the code writes like this
<script>
window['etoro_sign_up_widget_settings']={
culture:'en-us', // 'en-us', 'fr-fr', 'es-es', 'ru-ru', 'zh-cn', 'it-it', 'ar-ae', 'de-de' , 'pl-pl'
width:'100%',
height:'470px',
show_uk:false,
firstlastname:true,
show_intro:true,
auto_resize:true, // auto resize IFRAME, true is default
social:true, // show social buttons
container:'.mainContainer', // Container selector (e.g. element name / ID / class)
affiliate_id:'8906', // Your Affiliate ID
sub_affiliate_id:'' // Sub Affiliate ID
}</script><script src="https://marketing.etorostatic.com/widgets/signup/signup.js"></script>
I tried to place this code inside a section using Code Block in Avada theme WordPress but the code or form that's supposed to be generated from this code does not show, instead, it creates a space in the footer.
Please help what I did wrong.
I fixed it now.
I changed container:'.mainContainer', to a customer CSS ID.
I have homepage which is created by using multiple small template pages in wordpress. I have set menus on it . now i want to go on particular section/ template using menu. like if i press contact menu button then it should go smoothly downwards of homepage where the contact template has been called. I am using "Page scroll to id" plugin of wordpress but its not working. I have also seen that this plugin work when the page is created by dashoard page. Please help me , how can i navigate to my template page/section using this plugin. If any other plugin is there , please tell me about it . i will try to use that too.
Thanks
To create smooth scroll on link click follow the below steps :
Step 1: Add section ids in menu href including #section1 from admin section Appearance >> Menu .
Step 2: Create section or div with id name section1.
<div id="section1"></div>
Step 3: Paste the below code under your custom js file.
$(document).ready(function(){
// Add smooth scrolling to all links
$("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
I hope it will helps you.
I have this annoying thing that although is not a blocker-blocker, is very annoying. Let me explain.
I have this code inside of a MCE plugin:
var theWindow = editor.windowManager.open({
html: '<iframe id="iframeID" src="iframeURL" frameborder="0"></iframe>',
buttons: [
{
text: 'Cancel',
subtype: 'secondary'
},
{
text: 'Submit',
onclick: 'submit',
subtype: 'primary mySubmitButton'
}
],
});
$('#iframeID').on('load', function(){
selectedSnippets.on('change', function(e){
theWindow.statusbar.$el.find('.mySubmitButton .mce-txt').text(text);
});
});
(I avoided the plugin declaration and the code that will trigger the window opening for brevity)
Ok, so this works, the window is opened, it does have a title, a footer and two buttons on this footer.
My issue now is this: how do I update the text on the footer buttons? I mean I could simply do it with js. That works, but the problem is the buttons are positioned absolute and computed on first render:
So, my question is: how the hell do I re-render those buttons? The documentation of TinyMCE doesn't really help (or I may not know what/where to look for).
And as a subquestion: how to disable one button?
Thanks!
I managed to re-render the buttons in two steps in a probably not-so-clean way:
// you will need to run this for each **updated** button
theWindow.statusbar._items[0].$el.find('.mce-txt').text('my long value goes here');
theWindow.statusbar._items[0].updateLayoutRect();
// You will need to call this once
theWindow.statusbar.reflow()
I still have no idea how to disable/enable buttons though :)