I want to put a image on header in jQuery mobile.
I try this, but it doesn't work at all.
<div data-role="header">
<img src = "hello.png">
<h1>welcome</h1>
</div>
but strange is that the image did not show in Header.
The pic appears before the header.
But I want the pic inside the header
on one here.
I find the problem it seems that you should put the element in the tag
<h1><image src="a.png"></h1>
and it works
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 use ionic to build cross-platform app.
In out program we need load some post from server like: promotion/ news.
To achieve it, i use ng-bind-html:
<div ng-bind-html="inlineHtml|hrefToJS" style="padding:0px 10px 0px 10px">
I want to cached image in those post to client, that way my app can work offline have native mode, and smoothly.
i use: https://github.com/chrisben/imgcache.js/ to cached image
each time want to cached something , i just need add directives "img-cache" to img or div like this:
<div class= "ProductImage" img-cache ic-bg="{{$root.config.imgUrl+image}}">
</div>
But with inline html ( ng-bind-html above), i can replace all tag <img src = "" > in post to <img img-cache src = ""> but cached not happen, maybe directives img-cache not called.
I try to use $sce to set trust JS and html , but still can not solve problem.
Can you help me solve this case.
Many thanks!.
I have some fotorama pictures and I want to get a link to an specific one. For example I'd like to go to the third image of the carousel with a link and not only to the first one. I guess I should use the .activeIndex but I don't know how to do it.
Thanks in advance!
This is covered in the fotorama documentation.
Just add the attribute data-hash="true" to the enclosing fotorama div element:
<div class="fotorama" data-hash="true">
<img src="1.jpg" id="photo_1">
<img src="2.jpg" id="photo_2">
<img src="3.jpg" id="photo_3">
... etc ...
</div>
and then link to them using the id attribute as a URL fragment identifier, e.g.:
http://example.com/my_gallery.html#photo_1
http://example.com/my_gallery.html#photo_2
http://example.com/my_gallery.html#photo_3
There are some examples you can play with here: http://fotorama.io/customize/hash/
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.
I'm using AngularJS to "include" html partials in my web app. I'm using a nested ng-include for this.
I also have an animation on the outer most ng-include. It all works fine. The only problem is that the outer ng-include template is loaded first. Then the included HTML file also has an ng-include which also loads an HTML file.
The last included HTML file causes the div to suddenly expand in size and that makes the animation look jumpy and weird.
This problem could be solved if all the nested ng-includes could be preloaded somehow. Is something like that possible in AngularJS?
The code I have looks something like this:
My main view:
<div class="animation-grow-in animation-grow-out" ng-repeat="myList">
<div ng-include"base-partial.html"></div>
</div>
The base-partial.html file:
<div ng-switch="myList.type">
<div ng-switch-when="file1">
<div ng-include="'file1.html'"></div>
</div>
<div ng-switch-when="file2">
<div ng-include="'file2.html'"></div>
</div>
</div>
The file1.html and file2.html contain forms.
But because filex.html is loaded with a delay that makes it all look jumpy. So is there a solution for this problem? Can I preload all nested ng-includes?
You can use angularjs template caching service to cache your template. When boot strapping your application, put all your templates inside a cache so that it will not make XHR calls for your templates.
https://docs.angularjs.org/api/ng/service/$templateCache