I am trying to access some DOM elements with the onMounted hook in Nuxt 3. This works perfectly on page reload.
But when I access the page through a nuxt route I am getting an "Element not found" warning in the console. And the gsap animation in this case is not working.
I am new to Nuxt 3, but to my understanding the DOM should be available at this point in the lifecycle?
onMounted(() => {
console.log(document.getElementsByClassName('introimage'))
// Header shrinking
$gsap.to('.introimage__image', {
scrollTrigger: {
trigger: '.introimage',
start: 'top 200px',
end: '300%',
// pin: true,
scrub: true,
reverse: true,
markers: false,
toggleActions: 'restart none none reverse',
},
height: '0',
duration: '3',
})
})
I had the same issue with gsap. The way it worked for me was to add:
definePageMeta({
pageTransition: {
mode: 'default',
},
});
Quick StackBlitz as example
Related
I'm trying to use the steps to display several steps in a wizard.
My wizard steps works, but I can't manage to have the current steps highlighted properly in the steps list.
I was able to replicate in a small stackblitz: https://stackblitz.com/edit/angular-ivy-eujcl2?file=src%2Fapp%2Fsteps%2Fstep-two%2Fstep-two.component.html
When I run my code, I got basically this:
But in their demo, the current step gets highlighted:
Any idea what is going on? The styles are imported, I to bind an "activeIndex", but when I move, the step doesn't.
Your routes are not matching with what you have defined app route file vs what you have listed in wizard.component.ts, i.e.
// Your routes
{ path: 'step-1', component: StepOneComponent },
{ path: 'step-2', component: StepTwoComponent }
// But your step routeLinks
{
label: 'Step 1',
routerLink: '/setup/mongDb',
icon: 'fa-light fa-database',
},
{
label: 'Step 2',
routerLink: '/setup/auth-token',
},
Once they match, the highlight starts working.
this.items = [
{
label: 'Step 1',
routerLink: 'step-1',
icon: 'fa-light fa-database',
},
{
label: 'Step 2',
routerLink: 'step-2'
},
];
Demo
from what I see in your code, you don't use the proper routes.
The buttons trigger step-1 and step-2 but your step component is declared with /setup/mongDb and /setup/auth-token so I think the PrimeNg component doesn't see that you are on the declared path. I didn't look at the source code but I think this could be it.
I'm developing a Wordpress Plugin that allows users to add custom video playlists to their pages or posts, and for that I'm using Videojs and Videojs Playlist libraries.
I've successfully managed to add a single playlist into a page, but when a second one is created the first player is disabled.
First Player disabled
Other problem I'm facing is that, although the vjs-playlist div is added, it only shows in the first player created.
Code display in the browser
var options = {"techOrder": ["html5","youtube", "flash"]};
var myPlayer = videojs('my-playlist-player', {options, "autoplay": false, "controls": true, "fluid": true, "liveui": true});
myPlayer.playlist([{
name: 'Test item 1 type .m3u8',
description: 'Testing for videojs-playlist-ui integration',
duration: '45',
sources: [
{src: '//vjs.zencdn.net/v/oceans.mp4',type: 'video/mp4'}
],
thumbnail: [
{
srcset: '//bcvid.brightcove.com/players-example-content/clouds-1800.jpg',
type: 'image/jpeg',
style: 'max-height: 120px;'
}
]
},{
name: resTitle,
description: resDesc,
duration: resDuration,//'45',
sources: [
{src: resItemSrc, type: resMime}
],
thumbnail: [
{
srcset: resThumbnail,
type: resImgType,
style: thumbStyle//'max-height: 120px;'
}
]
}
}
]);
console.log(myPlayer.playlist());
myPlayer.playlistUi({el: document.getElementById('vjs-playlist'), horizontal: true});
myPlayer.playlist.autoadvance(1);
I believe my errors happen because videojs functions are detecting the same id in all elements, but if so how could I avoid this?
Any other ideas or opinions on why this errors might be happening, would be great.
Thanks in advance.
A bit more of information, I wanted to check how many players the script detected and so I printed in the console the window.videojs.players and only one player is detected even if more are created. Check result
Could this be because they have the same ID? If so how could it be fixed? HTML Result
I have the following fieldset in a form Panel in the Admin Dashboard template using ExtJS 6.2:
{
xtype: 'fieldset',
layout: 'anchor',
items: [{
xtype: 'combobox',
listeners : {
select : function() {
console.log(arguments)
console.log(arguments[1].data.birth_date)
console.log(arguments[1].data.first_name)
console.log(arguments[1].data.last_name)
console.log(arguments[1].data.sex)
}
},
bind: {
store: '{patients}'
},
reference: 'patientCombo',
publishes: 'id',
fieldLabel: 'Patient Search',
displayField: 'mrn',
//anchor: '-',
// We're forcing the query to run every time by setting minChars to 0
// (default is 4)
minChars: 2,
queryParam: '0',
queryMode: 'local',
typeAhead: true,
// https://www.sencha.com/forum/showthread.php?156505-Local-combobox-with-any-match-filter
doQuery: function(queryString, forceAll) {
this.expand();
this.store.clearFilter(!forceAll);
if (!forceAll) {
this.store.filter(this.displayField, new RegExp(Ext.String.escapeRegex(queryString), 'i'));
}
}
}, {
// https://www.sencha.com/forum/showthread.php?299301-Bind-combobox-displayField-value-to-displayfield
xtype: 'displayfield',
fieldLabel: 'Selected Patient',
bind: {
html: '<p>Name: <b>{patientCombo.selection.first_name}, ' +
'{patientCombo.selection.last_name} </b></p>' +
'<p>Sex: {patientCombo.selection.sex}</p>' +
'<p>Birthdate: {patientCombo.selection.birth_date}</p>'
}
}]
},
It is working fine, but it is rendering rather strangely, as seen in the following image (I had to mask the data being presented, but the numbers are what to be selected from the combobox):
I am assuming this is a CSS issue, but have not been able to figure out what. NB: I had to copy Admin-all.css Admin-all_1.css Admin-all_2.css and Admin-all_3.css from the build/examples/admin-dashboard/classic/resources folder to the app after I created the template in order to fix a major layout issue.
Yes, this is a CSS issue. The Admin Dashboard example and its CSS have been compiled using Sencha Cmd, so the CSS file contains only the styles required by the example. Since there is no combobox in the example, the combobox styles have not been added and the combobox you inserted does not render correctly.
The only solution would be to use Sencha Cmd to recompile from source and fix the layout issue along the way, which I guess is caused by a missing requires directive.
I'm trying to simulate the clicking of CSS elements on my page and automatically take screenshots of the window at each stage for testing purposes. I'm using backstopJS as the CSS testing/screenshot framework. Everything seems to work fine for this first element. A modal is triggered when i click on the register link in the main header menu. but it is not generating any reference screenshotof the modal.
plz help to trigger a reference screenshot of the modal in the below given script
This is the script :
{
"viewports": [
{
"name": "desktop",
"width": 1600,
"height": 900
},
{
"name": "phone",
"width": 320,
"height": 480
},
{
"name": "tablet_v",
"width": 568,
"height": 1024
},
{
"name": "tablet_h",
"width": 1024,
"height": 768
}
],
"grabConfigs" : [
{
"testName":"vawizard"
,"url":"http://localhost/vawizard/index.html"
,"hideSelectors": [
]
,"removeSelectors": [
"header.banner--clone"
]
,"selectors":[
"#outer_wrapper header"
,".banner_box"
,".help_desk"
,".big_search_box"
,".look_specific"
,".smart_tool_box"
,"footer"
,".copyright_box"
]
}
]
}
This is the link
http://wizard.hodgesdigital.com/
Any ideas what could be causing this behavior?
BackstopJS is mainly focused on testing layout states at different screen sizes and doesn't support the testing of user interactions.
In your case I can make two recommendations. 1) You could add a state to your URL which triggers the modal when your page is loaded OR 2) you could write a custom CasperJS script to test cases like this which require some user interaction. More detail below...
Approach 1:
In the first case you could add a hash to your URL which would trigger your modal, In my experience it's common for web apps (e.g. Angular and Ember) to represent modal states in this way....
// in your BackstopJS config
"url": "http://localhost/vawizard/index.html#openModal",
// then as part of a jQuery script
$(document).ready(function(){
if ( /openModal/.test(location.hash) )
{
// Do your open modal action here
// Then trigger BackstopJS
}
});
Approach 2:
If the above is not your style there is another good option. As part of the BackstopJS install you also have a full version of CasperJS -- so I would recommend going to CasperJS.org to look at some basic examples and see if it makes sense to write your own scripts. It will be a little more time consuming in the short run but the project specific boilerplate you write now may be nice to have for future edge cases (for testing forms, other interactions etc.).
We use custom scripts for such things. e.g
module.exports = async(page, scenario, vp) => {
await require('./onReadyInfo')(page, scenario, vp);
await require('./clickAndHoverHelper')(page, scenario, vp);
await require('./onReadyWaitForImages')(page, scenario, vp);
await page.waitForSelector("div[data-social-media-source='instagram'] a[data-target='#social-media-settings']");
await page.click("div[data-social-media-source='instagram'] a[data-target='#social-media-settings']");
await page.waitForSelector(
"#checkbox-twitter", {
timeout: 6000
}
);
await page.waitForTimeout(500);
await page.evaluate(async() => {
jQuery("#checkbox-twitter + label").click();
setTimeout(() => {
jQuery('#checkbox-twitter + label').focus()
}, 500);
});
await new Promise(resolve => setTimeout(resolve, 300));
};
This will open a dialog on link click, check a checkbox and give the label focus.
When I move between views in my Sencha Touch app I see the animation (slide), then the original view(the one I started at) is shown again. At that point, if I click anywhere in the app the view will change to the correct newly active item.
I'm using Sencha Touch, XCode 4, iOS 5 SDK, and PhoneGap 1.3.0.
Thanks in advance!
here's the code for the main viewport:
plantanalyzer.views.Viewport = Ext.extend(Ext.Panel, {
fullscreen: true,
layout: 'card',
cardSwitchAnimation: 'slide',
initComponent: function() {
Ext.apply(plantanalyzer.views, {
login: new plantanalyzer.views.Login(),
plantDetail: new plantanalyzer.views.PlantDetail(),
buildingList: new plantanalyzer.views.BuildingList()
});
Ext.apply(this, {
items: [
plantanalyzer.views.login,
plantanalyzer.views.plantDetail,
plantanalyzer.views.buildingList
]
});
plantanalyzer.views.Viewport.superclass.initComponent.apply(this, arguments);
}
});
and for the viewController:
plantanalyzer.controllers.viewController = new Ext.Controller({
index: function(options) {
plantanalyzer.views.viewport.setActiveItem(plantanalyzer.views.plantDetail, options.animation);
},
show: function(options) {
plantanalyzer.views.viewport.setActiveItem(plantanalyzer.views.buildingList,
options.animation);
}
});
and this is the code for one of the views:
plantanalyzer.views.PlantDetail = Ext.extend(Ext.Panel, {
width: 320,
height: 480,
items: [
{
xtype: 'panel',
html: '<img src="images/logo.jpg"/>',
tpl: '{name}',
cls: 'plantToolbar'
},
{
xtype: 'button',
name : 'buildingSelect',
text: 'Select Building',
cls: 'standardButton',
listeners: {
'tap': function () {
'use strict';
Ext.dispatch({
controller: plantanalyzer.controllers.viewController,
action: 'show'
});
}
}
},
{
xType: 'panel',
cls: 'infoBoxes',
html: 'Efficiency (kw/ton)<br><canvas id="eff"></canvas>'
},
{
xType: 'panel',
cls: 'infoBoxes',
name: 'totalTons',
html: 'Total Plant Tons: '
},
{
xType: 'panel',
cls: 'infoBoxes',
name: 'totalCost',
html: 'Real-time Plant Cost: '
},
{
xType: 'panel',
name: 'uodateTime',
cls: 'lastUpdate',
html: 'Last Update: '
}
]
});
The code looks fine in both sections. When i had issues with phonegap and sencha touch doing this i generally found there was a javascript error occurring or extra html markup was in between the body tag of the index.html file. The first thing would be to open the console in chrome or safari and check the javascript console to determine if it is a javascript error. If you can't run it in them i would suggest the Wienre application that will give you a console and was written to debug phonegap applications (wienre will also allow you to view the html markup to make sure it is correct)
The problem must be somewhere in the view files. The code you have shown is correct.
Well, for what it's worth, after rebuilding the app I found the issue. It was some custom css that was screwing up the app. Specifically the width that was being set on some of the components.
Hopefully, this will save somebody else some time and heartache.
Thanks, Darren and Ilija for your help!