I want to know, how to create a button that looks like this: (everything inside the gray container is a button)
How can I put picture and text inside button? XTemplate? CSS in text property?
Thank you!
Sencha Touch 2
Solution:
{
xtype: 'button',
html: '<img style="margin-left: 35px;" src="http://www.timwickstrom.com/wp-content/uploads/2011/06/beer1.png" width="200" height="200" /><br /><span style="your style">Beer</span>',
}
You can try to use html config:
xtype: 'button',
html: '<img src="your image source"/> width="" height=""'
text: '50$'
Related
<div id="home" class="tab-pane fade in" style="text-align:left;opacity: 1;" >
<button *ngFor="let tool of toolArray" class="m-btn btn btn-secondary" type="button" (click)="{{tool.ToolMethod}}()" placement="bottom"
ngbTooltip="{{tool.Tooltip}}">
<img src={{tool.ToolImgPath}} alt="" width="24" height="24"/>
</button>
</div>
Lets say , I have some tools managed by admin , if the user logs in , he can use that tools for editing .
let toolArray = [
{ToolCategory: "analysis"
ToolId: 96
ToolImgPath: "images/zoom-selection.png"
ToolMethod: "zoomToClickedFeature"
ToolName: "an_zoomto_selected"
Tooltip: "Zoom To Selected Feature"}
]
if I add this in the html using ngFor , its getting error like
Got interpolation ({{}}) where expression was expected
If the method is a member of the controller, you should use this like: (click)="this[tool.ToolMethod]()".
Here's a working example:
https://stackblitz.com/edit/angular-q2l54d?file=src%2Fapp%2Fapp.component.html
Remove the curly brackets from (click)="{{tool.ToolMethod}}()" to (click)="tool.ToolMethod()" and refactor your code to something like this, to get the reference to the corresponding method right:
public zoomToClickedFeature() {
console.log("do something");
}
public toolArray = [
{
ToolCategory: "analysis",
ToolId: 96,
ToolImgPath: "images/zoom-selection.png",
ToolMethod: this.zoomToClickedFeature,
ToolName: "an_zoomto_selected",
Tooltip: "Zoom To Selected Feature"
}
];
Array and function must be class properties of the component.
I want to Trigger boot-strap model on click of disabled text-box or text Area
I have tried it but it works fine with text box if the text box enabled
<input type="text" data-toggle="modal" data-target="#myModal" disabled="disabled"/>
Disabled elements don't fire click event on all the browsers, or all the inputs.
https://developer.mozilla.org/en-US/docs/Web/Events/click
Try this:
<span class="disabled">
<input type="text" data-toggle="modal" data-target="#myModal" disabled="disabled"/>
</span>
Javascript:
$('span.disabled').on('click', function(event) {
$('#myModal').modal('show');
});
OR if you want to collect the target from the input:
$('span.disabled').on('click', function(event) {
var modal_target = $(this).find('input').data('target');
$(modal_target).modal('show');
});
I have a problem with this jQuery function that i use for add and remove box to my page:
jQuery(document).ready(function($){
$('.my2-form .add2-box').click(function(){
var n = $('.text2-box').length + 1;
if( 12 < n ) {
alert('you can't make more than 12 box');
return false;
}
$.post('showselectdatearray.php', { type: 'months', year: 93}, function(result) {
var box_html = $('<p class="text2-box" style="padding: 0px; margin: 0px;"><label for="box' + n + '"><span class="box2-number">' + n + ' </span></label> <input type="text" name="boxes[]" value="" id="box' + n + '" size="8" /> '+resultremoveitem</p>');
box_html.hide();
$('.my2-form p.text2-box:last').after(box_html);
box_html.fadeIn('slow');
box_html.css( 'background-color', '#48b973' );
return false; });
});
$('.my2-form').on('click', '.remove2-box', function(){
$(this).parent().css( 'background-color', '#FF6C6C' );
$(this).parent().fadeOut("slow", function() {
$(this).remove();
$('.box2-number').each(function(index){
var p =index+1;
var str = p+'\xa0\xa0\xa0\xa0';
$(this).text( str );
});
});
return false;
});
$('.my2-form p.text2-box:last').css( 'background-color', '#FFFFFF' );
});
then i use from above script in my code this way:
<div id="showresult12" class="my2-form">
<div>
<input type='button' id='AddMore' name='AddMore' value='add box' class='add2-box' />
</div>
<div style="float: right;" class="scroll10">
<p class="text2-box" style="padding: 0px; margin: 0px;">
<label for="box"><span class="box2-number">1 </span></label>
<input type="text" name="boxes[]" value="" id="box" size="8" />
<?php Show_Select_Date_Array("months",0,0,0,93) ?>
</p>
</div>
</div>
Every thing is OK now and when user click on "add box" button, another box appear and when user click on "remove it" button, one box remove.
I have another part -part2- under this code that fetch from database. after user click on "edit" button that is locate in -part2-, information fetch from database to boxes with php code, but my add and remove button don't work at all. my information fetch with Ajax and replace in new boxes. the 'showresult12' div id completely load again with same data.
what is the problem after replacing div element?!
and what change i must do in my jquery code that it work after div load again?
In your 'var box_html=...' line, there looks to me to be a bit of a syntax error:
'+resultremoveitem</p>');
where 'result' isn't used properly. Should it be something like +result+'<a href... ?
EDIT: If as you say your 'showresult12' div is being emptied and then refilled again dynamically, then your 'add' event handler will always be invalid - it's not using delegation like the 'remove' one.
$('.my2-form').on('click', '.remove2-box', function(){ - this is OK, as it will work for dynamically-created .remove2-box elements.
$('.my2-form .add2-box').click(function(){... - however this is not, as it is only valid for .add2-box elements that were present in the DOM when this handler was created.
So in this scenario, the 'add' hander will not work following your AJAX PHP call.
Furthermore, if you are actually going further and removing and re-adding the .my2-form div (#showresult12) itself, then neither of the handlers will work - you would have to do something like $('body').on('click', '.my2-form .add2-box', function() {....
thanks for your answer but my result fetch from file with name "showselectdatearray.php". it is not important you can remove this
$.post('showselectdatearray.php', { type: 'months', year: 93}, function(result) {
AND result variable in : '+result<a href="#"
I can't make a gallery work with magnific popup. When I click on a picture I receive “The image could not be loaded”.
Here is the html file listing images:
<div class='container'>
<div class='picture'><img src='images/gallery/a.jpg'/></div>
<div class='picture'><img src='images/gallery/b.jpg'/></div>
<div class='picture'><img src='images/gallery/c.jpg'/></div>
<div class='picture'><img src='images/gallery/d.jpg'/></div>
<div class='picture'><img src='images/gallery/e.jpg'/></div>
</div>
Here the jquery code:
$.get( 'html/gallery.html', function( data ) {
$('#page_content').append(data);
$('.container').magnificPopup({
type: 'image',
delegate: 'div',
gallery:{
enabled: true,
navigateByImgClick: true,
arrowMarkup: '<button title="%title%" type="button" class="mfp-arrow mfp-arrow-%dir%"></button>',
tPrev: 'Previous (Left arrow key)',
tNext: 'Next (Right arrow key)',
tCounter: '<span class="mfp-counter">%curr% of %total%</span>'
}
});
I tried to change the "delegate" value to 'div' or 'img' but no result. (I followed this Magnific popup: getting "The image could not be loaded" and image url is undefined)
Thanks for help :)
Well problem solved...
Magnific popup needs a href attribute in order to work.
Solution :
<div class='container'>
<div class='picture' href='images/gallery/a.jpg'><img src='images/gallery/a.jpg'/></div>
<div class='picture' href='images/gallery/b.jpg'><img src='images/gallery/b.jpg'/></div>
....
</div>
On input focus I want to change the color of the label element. How can I achieve this in less?
.control-label{
color: #gray-light;
}
.controls{
input,
textarea{
background-color:red;
&:focus{
.control-label &{
color: red; //HERE
}
}
}
HTML:
<div class="control-group">
<label class="control-label" for="inputEmail">Firstname</label>
<div class="controls">
<input type="text" id="inputEmail" placeholder="Firstname">
</div>
</div>
One solution would be to use the :focus-within selector.
So, you'd do something like the below. Assuming that you always have an input of some description inside of a control-group, it will style the label whenever the input is focused on.
control-group {
&:focus-within {
control-label {
color: red;
}
}
}
More information can be found here: https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within
I don't think you can without changing your HTML, see also: Is there any way to hover over one element and affect a different element?, your elements should be direct siblings. (LESS don't help to solve your problem here, LESS generate CSS and it seems impossible to do in CSS)
Possible suggestion:
input:focus + .control-label
{
background-color:purple;
color: red;
}
.controls > input
{
float:right;
}
<div class="controls">
<input type="text" id="inputEmail" placeholder="Firstname">
<label class="control-label" for="inputEmail">Firstname</label>
</div>
Or solve your problem with javascript: https://stackoverflow.com/a/20226218/1596547
Use Flexbox
CSS is cascading, i.e. affected by the order that elements appear in the DOM. To be able to select the label only when the input is focused (input:focus + label), the label needs to come after the input, so;
Put the input before the label in the DOM and then use flexbox to reverse the order that they appear on the page.
.input-group {
display: flex;
flex-direction: column-reverse;
}
input:focus + label {
color: green;
}
<div class="input-group">
<input value="Input" />
<label>Label</label>
</div>
One solution would be to move the label below the input in the DOM but position them absolutely (to the parent) so the label looks to be above the input field:
<div>
<input type="text"/>
<label>Text</label>
</div>
In CSS move the label to the top, the input to the bottom:
label {
position: absolute
top: 0
}
input {
position: absolute
bottom: 0
}
And use the :focus state to change the style of the label:
input:focus + label {
color: red
}
See example:
http://codepen.io/robcampo/pen/zGKLgg
On focus, the label turns red. No JS required.
control-group {
&:focus-within {
control-label {
color: red;
}
}
}
loads of hearts to this person. Nothing was working and this worked in ion-label too . Accepted answer. Stack overflow does not allow to comment (below 50 reputation). So writing seperately <3
I hope I am not too late to answer this. With the new :has psudo-class we can achieve it without changing the HTML,
HTML:
<div class="control-group">
<label class="control-label" for="inputEmail">Firstname</label>
<div class="controls">
<input type="text" id="inputEmail" placeholder="Firstname">
</div>
</div>
CSS:
.control-group:has(input:focus) label{
color: red;
}
This approach is simple and cleaner.
Note: it is not supported by firefox yet.
The easy way is to use :focus-within check developer mozilla
.control-group:focus-within .control-label {
color: red;
}
Or
.control-group:focus-within label {
color: red;
}