i want to do visual testing with cypress-image-diff. So far, so good. I can take and compare screenshots of the complete page, but never of the element itself, as they are in an iFrame. With help of cypress-iframe I can check e.g. name, stype etc of the element. But screenshots are always taken from another area. Pls help
verifyLogoShown() {
cy.log("Verify if diconium logo is visible");
cy.frameLoaded(this.IFRAME)
// after the frame has loaded, we can use "cy.iframe()"
// to retrieve it
cy.iframe().find(this.TEST_OBJECT).should('have.text', 'Styled Button - primary') // works. I can test all kinds of CSS or other values from the button TEST_OBJECT
cy.wait(1000);
cy.getIframeBody(this.IFRAME).find(this.TEST_OBJECT).should('have.text', "Styled Button - primary")
cy.getIframeBody(this.IFRAME).type("a")
cy.compareSnapshot('button (replaceable)');
//doesn't take screenshot of that part I expect (e.g. iFrame box or button itself, instead of the menu part on the left)
}
My commands.js
Cypress.Commands.add('getIframeDocument', (iFrameSelector) => {
return cy
.get(iFrameSelector)
.its('0.contentDocument');
})
Cypress.Commands.add('getIframeBodyOtherWay', (iFrameSelector) => {
return cy
.getIframeDocument(iFrameSelector).should('exist').its('body').should('not.be.undefined')
.then(cy.wrap);
})
Cypress.Commands.add("getIframeBody", (framename) => {
// get the iframe > document > body
// and retry until the body element is not empty
return cy
.get(framename)
.its('0.contentDocument.body').should('not.be.empty')
// wraps "body" DOM element to allow
// chaining more Cypress commands, like ".find(...)"
// https://on.cypress.io/wrap
.then(cy.wrap);
});
Related
I was trying to use JQuery UI Sortable plugin for multiple tables. The idea was to grab and drop elements in cells of a table, by connecting all <td> tags with this plugin.
It looks like this: https://jsfiddle.net/Lhm3z0bw/3/
By changing zoom with mouse wheel controls, we can actually grab the elements already placed in the table.
However, when the scale is changing, moving them makes a shift on the current grabbed element.
I tried adding some functions from the JQuery UI API for resetting positions for the element or updating the helper, but there's no good results on it.
$(".sortableCards").sortable({
connectWith: ".sortableCards",
containment: "window",
scroll: false,
placeholder: "sortable-placeholder",
items: ".card1",
forcePlaceholderSize: false,
sort: function(evt,ui) {
//////////
// Maybe some fix needed here ?
//////////
}
receive: function(event, ui) {
if ($(ui.sender).hasClass('cards')) {
if ($(this).find('.card1').length > 2) {
$(ui.sender).sortable('cancel');
} else {
ui.item.clone().appendTo($(ui.sender));
}
}
}
});
Here is another linked question with the same issue : How to get JqueryUI Sortable working with Zoom/Scale - mouse movements
I have 4 main components for my React portfolio site called Home, Portfolio, About, Contact. The components are linked in Navigation. If I click on those link, Component appears. But the problem is if I scroll the Portfolio page 50% and click on About. The About page stay automatically scrolled top by 50%. I don't want an automated scroll. Rather I want the component will start from top 0;
I have tried "css-snap-type" but it doesn't work.
How can I solve the problem?
you could solve this using a react component that will scroll the window up everytime you click on a different link.
checkout this documentation is pretty straight forward https://reactrouter.com/web/guides/scroll-restoration
If you are using gatsby it comes with and API called called shouldUpdateScroll you could implement it on the gatsby.browser.js
const transitionDelay= 500
exports.shouldUpdateScroll = ({
routerProps: { location }, //location
getSavedScrollPosition, //last position on the previous page
}) => {
if(location.action === 'PUSH'){
window.setTimeout(()=> window.scrollTo (0,0), transitionDelay)
}
else {
const savedPosition = getSavedScrollPosition(location)
window.setTimeout(
()=> window.scrollTo((savedPosition || [0,0])),
transitionDelay
)
}
return false
}
U need to set window.scrollTo(0, 0) when u click on link so it would start on top of page.
I'm trying to get the height of a div in angularjs, but it only returns the initial value and never updates:
vm.summaryHeight = $(".history-log-container").height();
console.log(vm.summaryHeight);//returns 0 and then never logs again.
How can I get the height of this div as it updates?
I tried this:
link: function ($scope, element, attrs) {
//console.log(element.height());
$scope.$watch(function(){
return element.height();
}, function(oldVal, newVal){
//returns the initial values then nothing else
console.log(arguments);
})
}
As others have said, the value will be taken once unless you specify otherwise. Try something like;
$(document).resize(function(){
// Your code here
});
If your window size changing affects the height of the target element then whenever the document is resized the value will be retaken. This might also work if you were to target the element rather than the document;
$('.history-log-container').resize(function(){
// Your code here
});
But you'd have to check that out- I just usually have all my window responsive sizings within the one document resizing function.
I'm using Drupal 6 + dialog.module, Ctools(Axaj), jQuery 1.3.2, jQuery UI
When i'm open a modal dialog window the scrollbar of the browser is locked. I can scroll that if i use mouse scroll-wheel, but not by clicking or key-up, key-down functions.
What is the trouble? I can't find any block function in code like this:
sites/all/modules/dialog/dialog.js
Drupal.CTools.AJAX.commands.dialog_display = function(command) {
var $el = Drupal.Dialog.dialog,
o = {},
overrides = {};
// Ensure that the dialog wasn't closed before the request completed.
if ($el) {
$el.html(command.output).dialog('show');
// Merge all of the options together: defaults, overrides, and options
// specified by the command, then apply them.
overrides = {
// Remove any previously added buttons.
'buttons': {},
'title': command.title,
//'maxHeight': Math.floor($(window).height() * .8), // HACK // DISABLED
'minHeight' : 700, // HACK // I've set it, and dialog window automagically adjusted - we need central part with content have height = auto, so there is no scroll bar, and hence no problems with autocomplete popups in dialog windows
};
o = $.extend({}, Drupal.settings.Dialog.defaults, overrides, command.options);
$.each(o, function (i, v) { $el.dialog('option', i, v); });
if ($el.height() > o.maxHeight) {
$el.dialog('option', 'height', o.maxHeight);
$el.dialog('option', 'position', o.position);
// This is really ugly, but dialog gives us no way to call _size() in a
// sane way!
$el.data('dialog')._size();
}
Drupal.attachBehaviors($el);
}
};
And i didn'y find anything interesting in css files. What's the trouble?
Seeking a solution to my problem...
I partially found an answer from another thread on here, using this script
$(function () {
$(".myclass").hover(function ()
{}, function ()
{
$(".myclass>li").fadeTo(200, 1)
});
$(".myclass>li").hoverIntent(function ()
{
$(this).attr("id", "current");
$(this).siblings().fadeTo(200, .6);
$(this).fadeTo(300, 1)
}, function ()
{
$(".myclass>li").removeAttr("id");
$(this).fadeTo(200, 1)
})})
When an item in the list is hovered, the script fades all other items out. Original demo is here http://jsbin.com/usobe
This works OK on my site, though the list ( a grid of thumbnails) is part of a bigger slider script, which loads "previews" via ajax. When a list item is clicked a hidden section expands on the page, and the slider script assigns the list item a class "active".
When the hidden section is open I would like the activated thumbnail to remain at 1 opacity, while the rest are faded to .6, exactly as it is with the hover effect using the script above. What I am trying to achieve becomes obvious when you click a thumbnail to activate the ajax script. Is it possible to use the active class to make this happen i.e. if class is not active set to .6 opacity?
Thanks in advance
----EDIT
Thanks everyone for suggestions - I am not having much luck so far! Using the code above, would it be possible to modify it so that when a list item is clicked it holds the specified levels of opacity? That would do nicely, I think. Then I could use onclick I guess to fade all items back to full opacity when the hidden div is closed.
I'm trying to guess how your code work, for what I understand you should do something like this:
// this is the selector that gets the click on the thumbnail
$('li.item').click(function() {
// fade all the thumbnails to op 1.0
$('#li.item').css('opacity', '.6');
// let the active thumbnail to 1.0
$(this).css('opacity', 1);
//show your hidden div
});
Then, when you close the hidden div:
$('div#hiddenDiv').onClose(function()
// about to close
$(this).fadeTo('fast', 1);
});
You could use an on click targeting the zetaThumbs li elements, set the current target to 1 and its siblings to .6
$('.zetaThumbs li').click(function(){
$(this).css({'opacity':1}).siblings().css({'opacity':.6});
})