I’ve added an image tag in ListView in itemTpl as follows:
<img src='/maxtouch/images/close.png' alt='close' id='imgFavClose' class='close-favlist' />
Now I want to remove the css class 'close-favlist' from image on button tap event. To remove the css class I’ve written following line of code:
var favList = Ext.getCmp('favList'),
imgClose = favList.down('#imgFavClose');
imgClose.removeCls('close-favlist');
Here favList is id of ListView.
But it does not work. Plz let me know what correct way to perform this task.
Any help is appreciated!!
You can try this:
Ext.select('#imgFavClose').removeCls('close-favlist');
Check the docs on select
Related
I'm trying to display an image on mouseover of another image. I'm using dijit/Tooltip for that. Problem is, the image is not displaying on the first mouseover, it always appears on the second time onwards. The images are dynamically displayed and have given a dynamic id.
<c:forEach items="${model.images}" var="image" varStatus="status">
<img src="${image.url}" height="50" onmouseover="showImage('${image.id}')" id="image${image.id}" />
<c:forEach>
<script>
function showImage(name) {
require(["dijit/Tooltip", "dojo/domReady!"], function(Tooltip){
new Tooltip({
connectId: ["image"+name],
label: "<img src='/images/"+name+"'/>"
});
});
};
</script>
With dijit/Tooltip there is no need for an onmouseover function. With your code the first mouseover only sets up the Tooltip. The second time the Tooltip is attached and so it is displayed (and showImage() runs again, which isn't optimal).
You need to create the Tooltip when the image is added to the dom. You can refer to the dijit/Tooltip guide for an example on how to set up a Tooltip declaratively. Alternatively you can convert your code to add the images and their tooltips programmatically.
I am able to create a carousel as described here. The carousel appears and works properly.
Later on I would like to add an additional slide:
$(".carousel").append('<a class="carousel-item active" href="#six!"><img src="http://lorempixel.com/250/250/nature/6"></a>');
However, this does not appear to work as the slide does not get added to the carousel.
Is adding slides to an initialized carousel not supported or is this an issue on my end?
Sure it is. I haven't seen any solution in the internet. I believe that there might be a better and smoother solution but this one is mine.
All you need to do is after adding your new items remove the initialized class from already initialized main carousel div and reinitialize it.
//init carousel
var slider = $('.carousel');
slider.carousel();
//add a new item
slider.append('<a class="carousel-item active" href="#three!"><img src="http://lorempixel.com/250/250/nature/3"></a>');
//remove the 'initialized' class which prevents slider from initializing itself again when it's not needed
if (slider.hasClass('initialized')){
slider.removeClass('initialized')
}
//just reinit the carousel
slider.carousel();
full working fiddle: https://jsfiddle.net/8tq4ycm3/
I had the same problem, but I'm using the slider. (http://materializecss.com/media.html#slider)
To resolve this, it was necessary to clear all items, re-add items with the new one, and then re-bind the slider.
Follow example: https://codepen.io/troits/pen/QvdZov
let itens = [];
function addItem(){
$('.slides').empty();
$('.slider > .indicators').detach();
itens.push(createItem());
for(i in itens){
$('.slides').append(itens[i]);
}
$('.slider').slider();
showItem(i);
}
function showItem(i){
$('.slider > .indicators > .indicator-item')[i].click();
}
I want to remove thumbnail text in amazing slider, but the problem is it removes bottom text in slider, too. Is there any solution to keep bottom text as special effect in amazing slider and remove the thumbnail text
If You Want To do it using jQuery then you can use following code:
//Copy and paste in to your js Code
jQuery(document).ready(function(){
jQuery(".amazingslider-bullet-text-0").remove();
jQuery(".amazingslider-bullet-image-0 img").css("height","100%");
jQuery(".amazingslider-bullet-image-0").css("height","100%");
});
https://amazingslider.com/examples/jquery-image-gallery/
firstly, find following text--
this.options.watermarktext in the amazingslider.js
if you got it like
this.options.watermarktext = this.options.vermk;
and replace it with
this.options.watermarktext = "";
It have worked for me.
I'm using the ekko lightbox along with bootstrap modal to create a gallery. However I cant seem to get the image navigation controls to appear/work like they do on this example: http://ashleydw.github.io/lightbox/#image-gallery
As you can see when you hover over an image you get navigation control arrows. I've tried adding the data attribute data-gallery="multiimages" to my images but this hasnt helped.
You can see my development code here: http://agtdesigns.co.uk/bootstrap-gallery/
Any help appreciated,
tia
I had the same problem,
see https://github.com/ashleydw/lightbox/issues/33 for the answer.
In summary, you need to add a wrapping div, eg
<div class="gallery">
Then as JS code
$(document).delegate('*[data-toggle="lightbox"]', 'click', function(event) {
event.preventDefault();
return $(this).ekkoLightbox({
always_show_close: true,
gallery_parent_selector: '.gallery',
});
});
I'm approaching to Metro App development in this days, so please be gentle.
I have created a User Control - some buttons and textblocks- that is loaded in every page of my app. I want the texblocks to change dynamically depending on the page selected: for example one of the texblocks of the user control is the page title. How can I accomplish this?
you can go for a simple code by finding the children of the usercontrol you are adding.
xaml code
xmlns:newPage="using:TestApp"
add the page like this in say mainpage.xaml:
<newPage:TestPage x:Name="pageNew"></newPage:TestPage>
then from code behind of the mainpage ie mainpage.xaml.cs
public mainpage(){
InitializeComponent();
var newPageContent = pageNew.Content; //here content will give u the immidiete children of usercntrl
}
Now you can type cast like
(Grid)newPageContent = pageNew.content;
var TextBlockFirst = newPageContent.children[0];
and so on :) please check if the suggestion is helpful :)