I am using paper-cards, that contains each element of a survey, which is wrapped by neon-animated-pages. When I have a long question or has multiple answers and have to scroll down on a phone, when I switch to the next question, which is shorter, is off the screen since you have to navigate down. How do I focus back on the top? Especially since the code I am on is currently running on the card that I am leaving, not the one I am navigating to.
<neon-animated-pages id="views" class="flex" selected="0" entry-animation="slide-from-right-animation" exit-animation="slide-left-animation">
<template is="dom-repeat" id="surveyquestions" items="{{survey.Questions}}" sort="_sort">
<template is="dom-if" restamp if="{{isFormat(item.Type, 'Single-Select')}}" >
<question-singleselect question="{{item}}" auth-Data="{{authData}}"></question-singleselect>
</template>
....
</template>
</neon-animated-pages>
Actually found it....after searching a long while. I tried to do this, but with the actual elements, but this works.
document.getElementById("mainContainer").scrollTop = 0
Related
I am new to GTM and am creating a trigger on a site for my company. I have tried all the ways I know how and looked at Simo Ahava's blog and cannot get my trigger to fire. I am making a trigger that fires on element click and wants to have the Click Element match the CSS selector but cannot get it to work properly.
This is what I see when I inspect the component on the page:
<div _ngcontent-my-app-c1="" class="page-complementary jss-page-complementary" id="jss-page-complementary" name="jss-page-complementary" sc-placeholder="">
<!---->
<!---->
<app-tab-stories _nghost-my-app-c26="" _ngcontent-my-app-c1="" class="ng-star-inserted">
<!---->
<div _ngcontent-my-app-c26="" id="our-stories" class="tab-stories tab-stories--option-three">
<div _ngcontent-my-app-c26="" class="tab-stories__inner">
<div _ngcontent-my-app-c26="" class="tab-stories__header">
<h2 _ngcontent-my-app-c26="" class="tab-stories__heading">Our Stories</h2></div><div _ngcontent-my-app-c26="" class="tab-stories__wrapper">
<mat-tab-group _ngcontent-my-app-c26="" class="tab-stories__tabs mat-tab-group mat-primary ng-animate-disabled mat-tab-group-dynamic-height" disableripple="" dynamicheight="">
<img _ngcontent-my-app-c9="" class="ng-tns-c9-25 tab-stories__image ng-trigger ng-trigger-fadeIn ng-star-inserted" id="app-deferred-image_id_d1e0186a-6714-c0b4-649e-b9234689c136" alt="null" src="/-/media/images/images-sc9/locations/pch/general-pch/patient-stories/lexie-gardiner-square.ashx?&mw=400" style="">
I have tried the following CSS Selectors with no success, any help would be appreciated. The goal is to track that whenever anyone clicks on one of the stories under "Our Stories" they do not link off to anywhere just hidden content.
.tab-stories
.tab-stories__wraper
.tab-stories__image
div#our-stories
.tab-stories*
div#tab-stories*
div#tab-stories
Try .tab-stories__tabs
If it doesn't work, edit your question and add a complete set of html with closing tags so that we could actually inject it into a page and see how it looks.
You don't need to try your selectors in GTM every time. That takes too long.
Just do the following:
Inspect your element to open the Elements tab in the Chrome Debugger.
press ctrl+f while the Elements tab is being focused and start typing your CSS selectors.
The search in the Elements tab is smart enough to not only match literal matches, but CSS selectors matches too.
Debugging your selectors through the Elements tab is the best way to make sure nothing else would trigger your rule on this page and to see what exactly will trigger it.
I have the following dom repeat, which basically takes an array of survey question and displays them.
<template is="dom-repeat" items="{{survey.Questions}}">
<template is="dom-if" restamp if="{{isFormat(item.Type, 'Single-Select')}}">
<question-singleselect question="{{item}}" auth-Data="{{authData}}"></question-singleselect>
</template>
<template is="dom-if" restamp if="{{isFormat(item.Type,'Open-Ended')}}">
<question-openended question="{{item}}" auth-Data="{{authData}}"></question-openended>
</template>
and in the code further down, I want to take the answers, and create the header record, and all the detail/answer records... The header, I can save no problem, the detail records, I am trying to do the following.
for(question in survey.Questions)
{
...
}
Getting the error message, 'survey cannot be found'. How can I gain access to the array of questions that I am displaying on this page? I have tried this.$. and other different things I found on the web and this site.
Well instead of survey.questions. It seemed that I had to give the dom-repeat an ID and reference that ID with the following:
<template is="dom-repeat" id="testquestions" items="{{survey.Questions}}">
...
...
var item = this.$.testquestions;
I use rn-carousel with ng-repeat and I am able to swipe between all my items. However there is an infinite number of blank items appended to the list, meaning that I can swipe past my own items to the right an infinite number of time, it displays empty slides.
This happens even with a very basic markup:
<ul rn-carousel rn-carousel-controls class="swiper-container">
<li ng-repeat="p in UseCaseCtrl.getProjects()">
<img ng-src="{{p.picture}}">
</li>
</ul>
and regardless of the device.
Also the next '>' control link is never displayed on any slide, which is quite misleading when the user lands on the first slide and does not even know there are others slides on the right.
Any guess on what could be the source of the problem? Or a way to debug?
In case someone faces the same issue, the root cause was my implementation of UseCaseCtrl.getProjects() which used to return an object. Internally, rn-carousel will use .length to determine the number of slides. Since it tried to make .length of an object with nested items, it could not work. The problem was solved by returning an array instead.
My page is divided into sections : #page-1 and #page-2
See Plnkr: http://plnkr.co/edit/RZJLmsWDfs63dC0QuDJi
<body>
<section id="page-1">
This is page 1. It takes the whole height of the browser. User has to scroll down to see page-2.
</section>
<section id="page-2">
<span class="animated bounce">This is page 2 </span>
</section>
</body>
Animation classes are being applied to different elements in #page-2.
However by the time the user scrolls down to these elements, the animation has already finished. Hence they just look like static objects.
Is there anyway I can detect when #page-2 is currently being viewed and then call a function to addClass('animated bounce') to certain elements ?
I would like to achieve this in angularjs if possible
I have found a angularjs directive that is probably helpfull for you in this case. Inview tries to solve this exact problem by reporting to you if a dom element is visible on the screen. Unfortunately I have been unable to test my solution because I couldn't find a minified js file of Inview but I assembled some code that should work:
<section id="page-2" in-view="{$inview ? isFocused=true;}">
<div ng-class="{'animated bounce': isFocused}">This is page 2 </div>
</section>
The $inview is supposed to be true whenever the element is in visible in the browser. This leads to the scope variable isFocused being set to true and therefor the animation class is added to your div.
This should work as you have intended in your question, if it does not work for some reason please let me know so I can improve my answer.
Today's bogglement! I have two sidebars and a main content area. When I click on a button to expand the page, the sidebars should go away and the main content area spreads to 100%. (I'm trying to do something like what quandl.com does in its api displays, which is totally nifty.)
This should be really simple! I just add a class of 'apponly', which set the main-content to 100% and the sidebars to display:none. In my controller, I've got:
$scope.toggle = function() {
$scope.displayed = !$scope.displayed;
}
and in my html, I've got basically:
<div class="sidebar left" ng-class="{'apponly' : displayed }">
--something something--
</div>
<div class="main-content" ng-class="{'apponly' : displayed }">
<button class="btn btn-info device" ng-click="toggle()">[icon]</button>
--something something--
</div>
<div class="sidebar right" ng-class="{'apponly' : displayed }">
--something something--
</div>
...but it consistently only applies the class 'apponly' to the first sidebar and main content, and leaves the second sidebar intact (wrapped around to the next line, but still right there, w/no class of 'apponly' applied).
I tried to set up a plnk (http://plnkr.co/edit/ER4TPGexGnZ8knb4ThXQ?p=preview) but it won't work at all [okay that was a stupid oversight, now it does work except now I'm even more confused]. What really simple obvious thing am I totally missing here?
many thanks in advance!
AS PSL said, juste update your plunkr to <body ng-app="app" ng-controller="mainController"> and it will work. It actually does what you were expecting, so the issue is probably somewhere else.
Welp, I might as well answer since I (sort of) figured it out, and you never know, I might not be the only one baffled by such behavior.
It's tied to the animation. If you take the animation away, then everything behaves. You add it back in, and things get wacky again.
Why is this? I have no idea. But when I took the animation off the sidebars (so they simply disappear immediately), then the right-hand sidebar doesn't get pushed to the next line and end up remaining despite the added-class that should make it disappear. From behavior at least, it seems that the browser is trying to render animation at the same time the css-class is trying to make the section disappear. Which doesn't make any sense, b/c this works fine in other places, but all I know is that if you leave the animation on the main (middle) part, and turn it off on the sidebars, then everything behaves properly.
I'm not counting this as an answer, though, since it's more of a "well, that fixed it, if inadequately," which is less of an answer and more of a workaround left here for posterity, the enlightenment of any confused devs behind me, and the entertainment of any senior devs wandering through.