I have this HTML markup:
<a title="Hide comments" hreflang="1" class="comment-show-link" rel="tooltip" href="">Hide comments</a>
<a title="Hide comments" hreflang="2" class="comment-show-link" rel="tooltip" href="">Hide comments</a>
I'll like to change the title and HTML to "Show comments" on slideToggle but didn't know how. I write this code to show/hide a DIV:
$('.comment-show-link').click(function(e) {
$('#comment-show-'+$(this).attr("hreflang")).slideToggle('slow');
e.preventDefault();
});
But not know how to check if DIV is hidden or visible and in each case change title and HTML. Also I know that I can use text() or html() jQuery functions to achieve this but how? Any help?
Thanks in advance
Try this:
$('.comment-show-link').click(function(e) {
var $this = $(this);
var num = $this.attr('hreflang');
$('#comment-show-'+num).slideToggle('slow', function(){
if ($(this).is(':hidden')) {
// do something here
// $this.attr('...', '...')
}
});
e.preventDefault();
});
Related
I am needing to show text for an icon when it is hovered on. The issue is the icons are displaying via a loop. Meaning I have more than one icon with the same name. I'm sure I need to use "this" somehow to only show text next to the icon that is hovered on. However so far I have failed to do so.
My basic code so far. How would I change the code to show text depending on which icon is being hovered on?
$(".material-icons").on({
mouseenter: function () {
console.log('Show Name for this Icon')
},
mouseleave: function () {
console.log('Hide Name for this Icon')
}
});
Any help is appreciated!
Edit: Here is the loop that's being used to show the icons.
<li id='topSection' class="list-group-item active">Amenities </li>
<li id="amnetiesBox" class="list-group-item">
<% for(var i=0; i<rentals.amenities.length; i++){ %>
<i class="material-icons"><%=rentals.amenities[i]%></i>
<% } %>
</li>
</li>
An example of the icons being selected:
<input type="checkbox" name="amenities" value="personal_video"><span>TV</span>
<input type="checkbox" name="amenities" value="call"><span>Phone</span>
You can use $(this) and display the text related to that target element
$(".material-icons").on({
mouseenter: function () {
$(this).next("span").show()
},
mouseleave: function () {
$(this).next("span").hide()
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="material-icons" ><span>Hover </span></div> <span style="display:none">first</span>
<div class="material-icons" ><span>Hover</span></div> <span style="display:none">second</span>
<div class="material-icons" ><span>Hover</span></div> <span style="display:none">third</span>
I came up with a somewhat simple solution that works. The problem with the other suggestions is that I cant add spans per icon because of the loop (as far as I know.)
I went with this:
$(".material-icons").on({
mouseenter: function () {
var text = $(this).text();
if (text === 'wifi'){
text = 'Local Wifi'
}
if (text === 'local_laundry_service'){
text = 'Laundry on site'
}
$(".showName").show()
$(".showName").html(text)
},
mouseleave: function () {
$(".showName").hide()
}
});
So what it's doing is finding the icons name first and if the icon name is "local_laundry_service" etc I'm updating the text to say simply Laundry on site. Obviously you have to do this for each icon that might be used. Not very dry code but I'm not sure how else to go about it.
Having this simple HTML:
<a id="show-modal-button" class="circle modal" href='#' >
<i class="fa fa-plus circle-inner-icon"></i>
</a>
And this script.
<script type="text/javascript">
window.addEvent('domready', function()
{
$('show-modal-button').onclick = function(ev) {
ev.preventDefault();
modalUrl = 'http://www.google.es'
$('show-modal-button').href = modalUrl;
console.log($('show-modal-button').href);
return false;
});
});
</script>
It doesnt work on the first click. The modal opens on the first click but nothing is shown (blank modal). If I close the modal and click on the buttom again, the modal shows the href page (in the example above, google) correctly.
I've read some other threads with the same problem and people solve it adding return false; but I add that line and still doesnt work.
The console.log prints the correct url on the first click.. I also tested with $('show-modal-button').addEvent('click', function (ev) { with no luck :(
Any ideas how to make this work on the first attemp?
In addition to other comments :
Selecting elements with their id in jquery is done by prepending "#" to the id
Changing an element's attribute in jquery is done by using the function attr(name, value)
Inside your click function, you can refer to your jquery element by using $(this)
See this working snippet :
$(function(){
$("#show-modal-button").click(function(e){
e.preventDefault();
var modalUrl = 'http://www.google.es';
$(this).attr('href', modalUrl);
console.log($(this).attr('href'));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="show-modal-button" class="circle modal" href='#' >
<i class="fa fa-plus circle-inner-icon">show modal</i>
</a>
try this..
<script type="text/javascript">
$(function(){
$('show-modal-button').click(function(ev) {
ev.preventDefault();
modalUrl = 'http://www.google.es'
$('show-modal-button').href = modalUrl;
console.log($('show-modal-button').href);
return false;
});
});
</script>
How to get value from custom attribute to be used in if else condition?
I want to switch button between show & hide . if show button clicked it will hiden and the hide button showed. And also the same for opposites.
So i can do show hide for my divs.
Here's my codes
<div class="wrapper">
<a class="show_detail" target="1" style="display:block">+ Show</a>
<a class="hide_detail" target-hide="1" style="display:none">- Hide</a>
<div class="event_down" id="event_down1" style="display:none">
Content 1
</div>
<a class="show_detail" target="2" style="display:block">+ Show</a>
<a class="hide_detail" target-hide="2" style="display:none">- Hide</a>
<div class="event_down" id="event_down2" style="display:none">
Content 2
</div>
<a class="show_detail" target="3" style="display:block">+ Show</a>
<a class="hide_detail" target-hide="3" style="display:none">- Hide</a>
<div class="event_down" id="event_down3" style="display:none">
Content 3
</div>
</div>
CSS:
.show_detail{cursor:pointer; color:red;}
.hide_detail{cursor:pointer; color:red;}
JS :
$('.show_detail').click(function(){
var atribut_show = $('.show_detail').attr('target');
var atribut_hide = $('.hide_detail').attr('target-hide');
if (atribut_show == atribut_hide){
$('.hide_detail').show();
$(this).hide();
}
$('.event_down').hide();
$('#event_down'+$(this).attr('target')).show();
});
and here's MY FIDDLE need your help to solve it.
in order to get custom attributes their name must start with "data-". For example your custom attribute target would be "data-target". After that you can get them using something like $("#myElement").getAttribute("data-target").
You are getting object array list you have to get only the current object
Check updated fiddle here
"http://jsfiddle.net/p7Krf/3/"
$('.show_detail').click(function(){
var atribut_show = $(this).attr('target');
$('.hide_detail').each(function(element){
if($(this).attr("target-hide")==atribut_show){
$(this).show();
}
});
$(this).hide();
$('#event_down'+atribut_show).show();
});
The following javascript made it function for me. You should however consider calling your attributes data-target and data-target-hide as your specified attributes are not actually valid. It will function, but you could run into problems if you don't change the attribute names.
$('.show_detail').click(function(){
var atribut_show = $(this).attr('target');
$('.hide_detail[target-hide="'+atribut_show+'"]').show();
$(this).hide();
$('#event_down'+atribut_show).show();
});
$('.hide_detail').click(function(){
var atribut_hide = $(this).attr('target-hide');
$('.show_detail[target="'+atribut_hide+'"]').show();
$(this).hide();
$('#event_down'+atribut_hide).hide();
});
I have this html code
<div class="sub-middle-column">
<div class="div-header">Grandsire
<a "#", class="table-control-focus sub-header-table-focus" id="table-control-focus-t" >abc</a>
<ul class="table-controls hide side-action-items">
<li>
<a data-remote="true" data-box-no="1" class="find_or_add_horse" href="#">Find/Add Horse</a>
</li>
<li>
Go to the Next Horse
</li>
</ul>
</div>
<input type="text" name="search" id="search" class="search_horse">
</div>
on clicking on find_or_add_horse link I want to get the value of the text field using jquery. I tried parent, child and closest but could not get the result. How can I get the value of text field?
$(document).on('click', '.find_or_add_horse', function(){
// on clicking on find/add horse link I need the value of text field here
});
http://jsfiddle.net/jFIT/pyPtW/
You can use parents to find the root element, then use find on that element to get the input.
console.log($(this).parents('.sub-middle-column').find('.search_horse').val());
Try this
$(document).on('click', '.find_or_add_horse', function(){
var value = $('#search').val();
});
JsFiddle
use .val():
$(document).on('click', '.find_or_add_horse', function(){
alert($('#search').val());
});
if you have multiple sub-middle-column div then try this:
$(document).on('click', '.find_or_add_horse', function(){
alert($(this).closest('.sub-middle-column').find('.search_horse').val());
});
You can try the code below
$(document).on('click', '.find_or_add_horse', function(){
var textValue= $('#search').val();
});
.val(); is for input fields, .text() for other html containers like p, div..
AND dont forget to $.trim(); the input, cos hopefully you dont want whitespaces around the input text
try this:
$(document).on('click', '.find_or_add_horse', function(){
var inputtextvalue = $.trim($("#search").val());
});
I have serval link buttons in order to show a div below it.
<a class="btnComment" onclick="showComment()" isshow='0'>{{ post_comments.count }} comment</a>
<div class="comment">
....
</div>
<a class="btnComment" onclick="showComment()" isshow='0'>{{ post_comments.count }} comment</a>
<div class="comment">
....
</div>
<a class="btnComment" onclick="showComment()" isshow='0'>{{ post_comments.count }} comment</a>
<div class="comment">
....
</div>
I want to clink one linkbutton and only show the div element below it. but my js code:
function showComment(){
var isshow=$(this).attr('isshow');
if(isshow=="0"){
this.$(".comment").show();
$(this).attr('isshow',"1");
}
else{
this.$(".comment").hide();
$(this).attr("isshow","0");
}
}
this show all div. and when i use $(this).siblings() or $(this).next(), i got null, i don't know why that not work.
What can i do?
this is not pointing to the element if you run it in an inline event. Try the following:
onclick="showComment(this)"
And:
function showComment(el) {
var isshow=$(el).attr('isshow');
if(isshow=="0"){
$(el).next(".comment").show();
$(el).attr('isshow',"1");
}
else{
$(el).next(".comment").hide();
$(el).attr("isshow","0");
}
}
Or if you use jQuery's click, you can use this to point to the element:
$('.btnComment').click(function(event) {
var isshow=$(this).attr('isshow');
if(isshow=="0"){
$(this).next(".comment").show();
$(this).attr('isshow',"1");
}
else{
$(this).next(".comment").hide();
$(this).attr("isshow","0");
}
});
You should wrap your <a> and <div> inside another <div> to create a more maintainable code. Like this:
<div class="commentContainer">
<a class="btnComment" isshow='0'>{{ post_comments.count }} comment</a>
<div class="comment">
....
</div>
<div>
This parent div serves as the context for your tags. In the future, if you change the position, move <a> after <div>, your code still works fine. And it's even possible for you to to styling as a group just by assigning a class to the container.
Your jquery, here I use jquery event handler instead.
$(".btnComment").click(function () {
var isshow = $(this).attr('isshow');
var parent = $(this).closest(".commentContainer");
if (isshow == "0") {
parent.find(".comment").show();
$(this).attr('isshow', "1");
} else {
parent.find(".comment").hide();
$(this).attr("isshow", "0");
}
}
If you use .next(), it means your code is coupled to the current html.
css
.hide{visibility:hidden;}
.show{visibility:visible;}
jquery
$('.btnComment').click(function(){
$('.btnComment + div').removeClass('show').addClass('hide');
$(this).next().removeClass('hide').addClass('show'); });
html
<a class="btnComment" href="javascript:;"
sshow='0'>click1</a> < div
class="hide">sandy1</div> <a class="btnComment"
href="javascript:;" isshow='0'>click2</a> <div
class="hide">sandy2</div> <a class="btnComment"
href="javascript:;" isshow='0'>click3</a> <div
class="hide">sandy3</div>
On every click of anchor tag respective div will be shown and others will be hidden.
Hope this will help you.