my code is
<div class="col-lg-6 stickyboard" style="padding:5px;">
<div class="sticky-container" >
<div class="sticky" >
<h4>{{title}}</h4>
{{content}}
</div>
// If click on this
<i class="mdi-content-add pull-right" id="addNewSticky"></i>
</div>
</div>
//Here I want to add some html
<div class="col-lg-6 stickyboard" style="padding:5px;">
<div class="sticky-container" >
<div class="sticky" >
<h4>{{title}}</h4>
{{content}}
</div>
<i class="mdi-content-add pull-right" id="addNewSticky"></i>
</div>
</div>
When somebody clicks on addnewsticky I want to add html immediatly after that sticky,
Expected output
<div class="col-lg-6 stickyboard" style="padding:5px;">
<div class="sticky-container" >
<div class="sticky" >
<h4>{{title}}</h4>
{{content}}
</div>
// If click on this
<i class="mdi-content-add pull-right" id="addNewSticky"></i>
</div>
</div>
<h3>Hi this is added html</h3>
<div class="col-lg-6 stickyboard" style="padding:5px;">
<div class="sticky-container" >
<div class="sticky" >
<h4>{{title}}</h4>
{{content}}
</div>
<i class="mdi-content-add pull-right" id="addNewSticky"></i>
</div>
</div>
See newly added html <h3> tag
How to do that using jquery?
addNewSticky:function(e,tmpl){
$(e.currentTarget).parent().parent().find('.stickyboard').html("some html");
}
but this is adding to the same class itself not after that class
You can insert it after the .stickyboard ancestor of the click target.
So
$(e.currentTarget).closest('.stickyboard').after("<h3>Hi this is added html</h3>");
You can use .after() also like:
addNewSticky:function(e,tmpl){
$(e.currentTarget).parent().parent().after("some html");
}
Related
The icon and the word hi can not be put into the same line
<link href="http://code.ionicframework.com/1.3.1/css/ionic.css" rel="stylesheet"/>
<div class="row">
<div class="col">
<h5 class="title">hi</h5>
</div>
<i class="icon ion-ios-heart"></i>
</div>
Thanks!!
Method 1 - CSS
<div class="row">
<div class="col">
<span class="item">
<h5 style="display:inline" class="title">hi</h5>
<i class="icon ion-ios-heart"></i>
</span>
</div>
</div>
Method 2 - In same column
<div class="row">
<div class="col">
<h5 class="title">hi<i class="icon ion-ios-heart"></i></h5>
</div>
</div>
Method 3 - In two columns in same row
<div class="row">
<div class="col">
<h5 class="title">hi</h5>
</div>
<div class="col">
<i class="icon ion-ios-heart"></i>
</div>
</div>
h5 will display as a block, so it has its own line.
Should work with the icon inside the h5 tags, though.
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 7 years ago.
<input type="text" id="message" param="1" placeholder="chat here.." />
This is element inside the div which is working fine outside the javascript
here is the case after appended element
$('.chat-wrapper').append('<li class="one-big-icon mega-li mgl-10"> <span class="mega-icon"><img alt="example image" class="chat-initatior" src="'+img_url+'"></span> <span class="badge vd_bg-red">10</span> <div class="vd_mega-menu-content open-top width-xs-4 width-md-5 width-lg-4 center-xs-4 chat-box'+id+'" data-action="click-target"> <div class="child-menu"> <div class="title"> ujwal <i>(online)</i> <div class="vd_panel-menu"> <div data-rel="tooltip" data-original-title="Close" class="menu entypo-icon"> <i class="icon-cross"></i> </div> </div> </div> <div class="content-list content-image content-menu"> <div data-rel="scroll"> <ul class="list-wrapper pd-lr-10"> <li> <div class="menu-icon"><img alt="example image" src=""></div> <div class="menu-text"> Do you play or follow any sports? <div class="menu-info"> <span class="menu-date">12 Minutes Ago </span> </div> </div> </li> </ul> </div> <div class="closing chat-area"> <div class="chat-box"> <input type="text" id="message" placeholder="chat here.." /> </div> <div class="vd_panel-menu"> <div data-rel="tooltip" data-original-title="Insert Picture" class="menu"> <i class="icon-camera"></i> </div> <div data-rel="tooltip" data-original-title="Emoticons" class="menu"> <i class="fa fa-smile-o"></i> </div> </div> </div> </div> </div> <!-- child-menu --> </div> <!-- vd_mega-menu-content --> </li>');
Now when I do
$('#message').keypress(function(event){
alert('WORKING');
});
alert('working') only works when I type any key in the first element after the append is made on some click and if I type something inside that appended input box I get nothing but why?
Look at using .on() or .live() depending on your jQuery version to bind to elements that are appended.
$("div").on( "keypress", "#message", function(){
alert( "working!" );
});
where div is the selector of a parent of #message.
here work fine;
https://jsfiddle.net/mig1098/0rgd3ppu/
var id='one',img_url='http';//test values
$('.chat-wrapper').append('<li class="one-big-icon mega-li mgl-10"> <span class="mega-icon"><img alt="example image" class="chat-initatior" src="'+img_url+'"></span> <span class="badge vd_bg-red">10</span> <div class="vd_mega-menu-content open-top width-xs-4 width-md-5 width-lg-4 center-xs-4 chat-box'+id+'" data-action="click-target"> <div class="child-menu"> <div class="title"> ujwal <i>(online)</i> <div class="vd_panel-menu"> <div data-rel="tooltip" data-original-title="Close" class="menu entypo-icon"> <i class="icon-cross"></i> </div> </div> </div> <div class="content-list content-image content-menu"> <div data-rel="scroll"> <ul class="list-wrapper pd-lr-10"> <li> <div class="menu-icon"><img alt="example image" src=""></div> <div class="menu-text"> Do you play or follow any sports? <div class="menu-info"> <span class="menu-date">12 Minutes Ago </span> </div> </div> </li> </ul> </div> <div class="closing chat-area"> <div class="chat-box"> <input type="text" id="message" placeholder="chat here.." /> </div> <div class="vd_panel-menu"> <div data-rel="tooltip" data-original-title="Insert Picture" class="menu"> <i class="icon-camera"></i> </div> <div data-rel="tooltip" data-original-title="Emoticons" class="menu"> <i class="fa fa-smile-o"></i> </div> </div> </div> </div> </div> <!-- child-menu --> </div> <!-- vd_mega-menu-content --> </li>');
$('#message').keypress(function(event){
alert(event.keyCode);
});
I am trying to find clicked button value.here is my htmlcode,I am not able to get but always getting first one.
<div id="addSentiment" class="dialogs">
<div id="1" class="dialogs">
<div class="itemdiv dialogdiv">
<div class="user">
<img src="assets/avatars/avatar1.png" alt="Alexas Avatar">
</div>
<div class="body">
<div class="time"> <i class="ace-icon fa fa-clock-o"></i>
<span class="green">Date : 10/01/2014</span>
</div>
<div class="name"> ki#n.com
</div>
<div id="cat_1" class="text">category : Scheduling
<br>
</div>
<div id="op_1" class="text">ddd word/phrase : providing solutions
<br>
</div>
<div id="feature_1" class="text">ddd word/phrase : listen to
<br>
</div>
<div class="text">
<input type="hidden" value="1" name="hd">
</div>
<div class="tools"> <a id="edit_1" class="btn acebtn btn-minier btn-info" href="#">
<i class="icon-only ace-icon fa fa-share"></i>
</a>
</div>
</div>
</div>
</div>
<div id="2" class="dialogs">
<div class="itemdiv dialogdiv">
<div class="user">
<img src="assets/avatars/avatar1.png" alt="Alexas Avatar">
</div>
<div class="body">
<div class="time"> <i class="ace-icon fa fa-clock-o"></i>
<span class="green">Date : 10/01/2014</span>
</div>
<div class="name"> tc#n.com
</div>
<div id="cat_2" class="text">category : Scheduling
<br>
</div>
<div id="op_2" class="text">dddd : providing solutions
<br>
</div>
<div id="feature_2" class="text">ddddddde : listen to
<br>
</div>
<div class="text">
<input type="hidden" value="2" name="hd">
</div>
<div class="tools"> <a id="edit_2" class="btn acebtn btn-minier btn-info" href="#">
<i class="icon-only ace-icon fa fa-share"></i>
</a>
</div>
</div>
</div>
</div>
<div id="3" class="dialogs">
<div class="itemdiv dialogdiv">
<div class="user">
<img src="assets/avatars/avatar1.png" alt="Alexas Avatar">
</div>
<div class="body">
<div class="time"> <i class="ace-icon fa fa-clock-o"></i>
<span class="green">Date : 10/01/2014</span>
</div>
<div class="name"> tn#nn.com
</div>
<div id="cat_3" class="text">category : Scheduling
<br>
</div>
<div id="op_3" class="text">Opinion word/phrase : providing solutions
<br>
</div>
<div id="feature_3" class="text">Feature word/phrase : listen to
<br>
</div>
<div class="text">
<input type="hidden" value="3" name="hd">
</div>
<div class="tools"> <a id="edit_3" class="btn acebtn btn-minier btn-info" href="#">
<i class="icon-only ace-icon fa fa-share"></i>
</a>
</div>
</div>
</div>
</div>
</div>
I tried following code in jquery
$(".dialogs .itemdiv .tools").live("click",function(e){
e.preventDefault();
alert('clicked on edit');
var n = $('.dialogs .itemdiv .tools a').attr('id');
alert(n);
});
I use live here because I am getting above html by using append method in jquery.
live is deprecated in later versions of jQuery - but to solve your issue you need to use an instance of this
$("#addSentiment").on("click", ".dialogs .itemdiv .tools", function(e){
e.preventDefault();
alert('clicked on edit');
var n = $("a", this).attr('id');
alert(n);
});
jQuery selectors catch the first match of their content.
To catch the n-th match, you need to use the n-th child selector, like this:
$(".dialogs .itemdiv .tools:nth-child(2)")
I am not familiar with the live method, but you should be able to do something like the following:
function addHandlers() {
$(".dialogs .itemdiv .tools a").each(function() {
$(this).click(function() {
alert('clicked on edit');
);
});
}
function yourAppendFunction() {
//your append code
//add call to a function that will create your event handlers
addHandlers();
}
The .each method runs through each and every item that fits the selection criteria, and then we use the this keyword within the function to reference what we are working on. Putting it in a function that we don't call until after you append the items ensures the html exists when you try to add the handlers you need.
API references:
each method: http://api.jquery.com/each/
click method: http://api.jquery.com/click/
I've tried to implement answers I found on stackoverflow asked by other people, but I'm not getting the results that I want.
I have an about section on a site I'm building. In that section I have four different about items. At the bottom is a button and when that button is clicked I want the four boxes to be hidden and for a large about item to appear(show) in their place and display the information of the about item who's button was clicked. With the code I have now, when I click one of the buttons, all large about item divs show up instead of just one. Is it possible to just display only one large about item(showfullabout) when clicked, instead of all four? I want to individually show items when clicked.
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 showfullabout">
<div class="about-item-full">
<h1>Title</h1>
<h2>Description</h2>
<p>Content</p>
<button class="small-about"><i class="fa fa-plus"></i>
</button>
</div>
</div>
<div class="col-xs-12 col-sm-6- col-md-3 col-lg-3">
<div class="about-item">
<div class="about-item-top">
<img src="img/img07.jpg" alt="img">
<div class="about-item-circle">
<span class="oi oi-justify-left"></span>
</div>
</div>
<div class="about-item-bottom">
<h1>Title</h1>
<h2>Description</h2>
<p>
Content
</p>
<button class="full-about"><i class="fa fa-plus"></i>
</button>
</div>
</div>
<!--END ITEM-->
</div>
<!--END COLUMN-->
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 showfullabout">
<div class="about-item-full">
<h1>Title</h1>
<h2>Description</h2>
<p>Content</p>
<button class="small-about"><i class="fa fa-plus"></i>
</button>
</div>
</div>
<div class="col-xs-12 col-sm-6- col-md-3 col-lg-3">
<div class="about-item">
<div class="about-item-top">
<img src="img/img07.jpg" alt="img">
<div class="about-item-circle">
<span class="oi oi-image"></span>
</div>
</div>
<div class="about-item-bottom">
<h1>Title</h1>
<h2>Description</h2>
<p>
Content
</p>
<button class="full-about"><i class="fa fa-plus"></i>
</button>
</div>
</div>
<!--END ITEM-->
</div>
<!--END COLUMN-->
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 showfullabout">
<div class="about-item-full">
<h1>Title</h1>
<h2>Description</h2>
<p>Content</p>
<button class="small-about"><i class="fa fa-plus"></i>
</button>
</div>
</div>
<div class="col-xs-12 col-sm-6- col-md-3 col-lg-3">
<div class="about-item">
<div class="about-item-top">
<img src="img/img07.jpg" alt="img">
<div class="about-item-circle">
<span class="oi oi-monitor"></span>
</div>
</div>
<div class="about-item-bottom">
<h1>Title</h1>
<h2>Description</h2>
<p>
Content
</p>
<button class="full-about"><i class="fa fa-plus"></i>
</button>
</div>
</div>
<!--END ITEM-->
</div>
<!--END COLUMN-->
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 showfullabout">
<div class="about-item-full">
<h1>Title</h1>
<h2>Description</h2>
<p>Content</p>
<button class="small-about"><i class="fa fa-plus"></i>
</button>
</div>
</div>
<div class="col-xs-12 col-sm-6- col-md-3 col-lg-3">
<div class="about-item">
<div class="about-item-top">
<img src="img/img07.jpg" alt="img">
<div class="about-item-circle">
<span class="oi oi-location"></span>
</div>
</div>
<div class="about-item-bottom">
<h1>Title</h1>
<h2>Description</h2>
<p>
Content
</p>
<button class="full-about"><i class="fa fa-plus"></i>
</button>
</div>
</div>
<!--END ITEM-->
</div>
<!--END COLUMN-->
<!--CSS-->
.showfullabout{
display:none;
}
<!--Script-->
$("button.full-about").click(function(){
$(".about-item").hide();
$(".showfullabout").fadeToggle(500);
});
$("button.small-about").click(function(){
$(".about-item").fadeToggle(500);
$(".showfullabout").hide();
});
You need to use relative selectors to find the target elements
$("button.full-about").click(function () {
$(".about-item").hide();
$(this).closest(".about-item").parent().prev('.showfullabout').fadeIn(500);
});
$("button.small-about").click(function () {
$(this).closest(".showfullabout").hide();
$(".about-item").fadeToggle(500);
});
Demo: Fiddle
In the case of button full-about you need to hide all about-item elements and show the previous sibling of the ancestor about-item's parent, the opposite for small-about button
I have the following code in my JSP file
<div class="row-fluid">
<div style="text-align: left;" class="span3 row-fluid">
<label><spring:message code="alert.channels.outbound.lines"></spring:message>: </label>
</div>
<div class = "span3">
<div class="textbox">
<div class="textVal">${alertStatusForm.outboundLines}</div>
<div class="pencil span3 ">
<img src="/static/img/pencil.png" alt="Edit">
</div>
<div class="save span3">
<img src="/static/img/disk.png" alt="Save">
</div>
<div class="close span3">
<img src="/static/img/Cross.png" alt="Close">
</div>
</div>
</div>
</div>
Now I have to use the font-awesome in place of pencil.png , disk.png and Cross.png .
I have the following codes for the above pencil , disk and Cross as
Pencil = icon-pencil ()
disk = icon-save ()
Cross = icon-remove ()
from the website http://fortawesome.github.io/Font-Awesome/cheatsheet/
Please let me know how to use the above codes in place of
You can write like this by change to <i> tag instead of <img>
<div class="row-fluid">
<div style="text-align: left;" class="span3 row-fluid">
<label><spring:message code="alert.channels.outbound.lines"></spring:message>: </label>
</div>
<div class = "span3">
<div class="textbox">
<div class="textVal">${alertStatusForm.outboundLines}</div>
<div class="pencil span3 ">
<i class="icon-edit"></i>
</div>
<div class="save span3">
<i class= "icon-save"></i>
</div>
<div class="close span3">
<i class= "icon-folder-close"></i>
</div>
</div>
</div>
</div>
Besure that you have link with font awsome css or
add this link in your layout or views
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
You need to change the <IMG> tags with the following:
<i class="icon-pencil"></i>
Setting appropriate class on the <i> element.