I'm creating a touch screen application for my client using AngularJs. I'm using ngTouch and then the directives ng-swipe-left and ng-swipe-right. I've created a function that should be called when I swipe left and similarly for swipe right.
HTML Template:
<div class="prod-gall" data-ng-controller="getItemDataCtrl>
<ul class="prod-gall-list" data-ng-swipe-left="swipeLeft($event)">
<li data-ng-repeat="i in itemList" >
<figure class="prd-img"> #*<img src={{i.image}} alt="" />*# <img class="figure.prd-img img" src=content/images/movies/m2210521.jpg alt="" />
<figcaption class="prd-nam f5">{{i.title}}</figcaption>
</figure>
<div class="prd-price f5"> {{i.currentprice}} </div>
</li>
</ul>
</div>
I'm seeing the below to problems.
When I swipe in left I could see my function being called but not always, it is working intermittently, I'm unable to find the exact location when it is actually calling the function (however I don't want it to work only for specific location) because it is not that it is working always when I swipe on the same area, it keep on changing.
You see that I'm using the ul - > li ->figure and figcaption - when I try to swipe by touching the li which is container of the figure and figcaption I could see that figcaption i.e., text is being highlighted or selected and if I touch sipw on the image the image clone is being selected instead of swipe. (this may not be related to ngTouch, but not sure)
How can I fix these two issues. Please help.
I was just calling the wrong function, i.e., when I swipe left I was calling the function that I've created for swipe right and vice versa.
Related
I am using the Next Js Script tag to embed a form from Convertkit into my project. The embed gets pulled in, and it works, I can subscribe and my email appears in the Convertkit Dashboard, everything works as expected.
However, the form does not render where I am trying to place it, which is in my about page, but rather, gets appended to the bottom of each screen, as it if was outside of the html document (outside of the parent div in my return statement, no background styling or anything takes effect). Sometimes its rendered at the top of the screen, over every other content.
You can check out the test project here: https://testfetchdata-uier.vercel.app/about
This is what my embed looks like:
<div className="flex flex-row space-x-4">
</div>
<>
<Script
async
data-uid="PROJECT_ID"
src="https://MYPROJECT.ck.page/PROJECT_ID/index.js"
></Script>
</>
</div>
</div>
Any ideas as to what might be happening?
Thanks a lot.
I have the following element on a page (it's a button with the word Next that you click)
<div class="aaabutton">
<div class="aaacontainer">
<div class="aaatext">
Next
</div>
</div>
</div>
No matter what I try it can't find it.
Tried following:
css=.show .aaacontainer
xpath=//div[#id='Next']/div[3]/div[2]/div/div
xpath=//div[3]/div[9]/div[3]/div[2]/div/div
Times out trying to find it (for example Trying to find xpath=//div[#id='Next']/div[3]/div[2]/div/div... Failed:)
Since you didn't share all your existing code trials and a link to that page we can only guess. So, I guess this may work:
xpath="//div[#id='Next']//div[#class='aaabutton'][contains(.,'Next')]"
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.
Currently, i'm buiding my rich text editor with quill and i need to create an embed for images. Before quill, i used to use redactor and i try to move to redactor. But, i already have 2 version of data from redactor before where the users is already uploaded images.
Version 1:
<p>
<img src="http://lorempixel.com/400/200/" data-image="5bb71bdc65465e0675ba" class="img-fluid img-responsive">
</p>
Version 2:
<figure>
<img src="http://lorempixel.com/400/200/" data-image="1bdc65465e0675ba1b2b" class="img-fluid img-responsive">
</figure>
Expected behavior:
I expect to replace the p with figure on initial parsing in quill. So, all the images have same parent figure
Actual behavior
figure is always deleted by default
I tried to register figure with blots/block/embed but i can't check and add the figure if the image doesn't have figure on its parent
Thank you
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.