In my webpage, I have an input method and a button which opens a popup with smiles. When a user taps a smile once, the input value is changed to 'current value' + ':smile1:', for example. However, I have about 28 smile icons and this way to send emojis is a little bit difficult. How can I make this process easier? Because after this, I'll need to parse all 28 smiles and check if the input value equals one of them.
My popup:
<div class="smile-popuptext" id="smPopup">
<div class="smile1"></div>
<div class="smile2"></div>
<div class="smile3"></div>
//.....and other 25 divs
</div>
My function that sends the smile:
$('.smile1').on('click', function () {
var message = $('#message').val() + ' :smile1:';
$('#message').val(message);
});
I'd recommend giving all the buttons a single class and giving them unique id's.
So something like this:
<div class="smile-popuptext" id="smPopup">
<div class="smile" id="smile1"></div>
<div class="smile" id="smile2"></div>
<div class="smile" id="smile3"></div>
//.....and other 25 divs
</div>
Then:
$('.smile').on('click', function () {
var message = $('#message').val() + ' :' + this.id + ':';
$('#message').val(message);
});
JSFiddle
You could bind an EventListener on the container and defining the value as a data attribute:
var container = document.querySelector('.smile-popuptext');
container.addEventListener('click', function(event) {
var target = event.target;
var emoji = target.getAttribute('data-emoji');
if(emoji) {
console.log('clicked', [':', emoji, ':'].join(''));
}
});
<div class="smile-popuptext" id="smPopup">
<div class="sm1" data-emoji="smile1">1</div>
<div class="sm2" data-emoji="smile2">2</div>
<div class="sm3" data-emoji="smile3">3</div>
</div>
With no changes in your markup:
$('#smPopup div[class^="smile"]').on('click', function () {
var message = $('#message').val() + ' :' + this.className + ':';
$('#message').val(message);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="smile-popuptext" id="smPopup">
<div class="smile1">smile 1</div>
<div class="smile2">smile 2</div>
<div class="smile3">smile 3</div>
</div>
<textarea id="message"></textarea>
Related
I have several elements that were dynamically added to my web page and now I'm trying to append them to textarea, but I keep getting only the last element to show up.
I figured I need to use val() instead of append(), but with val() I only get last option that was stated.
Can someone help me out? I'm trying to include all rows in the textarea.
I've recreated my problem in a snippet bellow.
function getDetails() {
// Clear content
$("#save-content").val('');
// First headline
$("#save-content").val("First group: \n");
// Content from first group
$(".first-item .row").each(function(){
var firstGroupName = $(this).find(".name").text();
var firstGroupSurname = $(this).find(".surname").text();
$("#save-content").val(firstGroupName + " " + firstGroupSurname + "\n");
});
// Second headline
$("#save-content").val("Second group: \n");
// Content from second group
$(".second-item .row").each(function(){
var secondGroupName = $(this).find(".name").text();
var secondGroupSurname = $(this).find(".surname").text();
$("#save-content").val(secondGroupName + " " + secondGroupSurname + "\n");
});
// Third headline
$("#save-content").val("Third group: \n");
// Content from third group
$(".third-item .row").each(function(){
var thirdGroupName = $(this).find(".name").text();
var thirdGroupSurname = $(this).find(".surname").text();
$("#save-content").val(thirdGroupName + " " + thirdGroupSurname + "\n");
});
}
$('button').on('click', function() {
getDetails();
});
.row>div {
display: inline-block;
}
button {
display: block;
margin: 10px 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="imported-content">
<div class="first-item">
<div class="row">
<div class="name">Penelope</div>
<div class="surname">Smith</div>
</div>
<div class="row">
<div class="name">Jane</div>
<div class="surname">Dalton</div>
</div>
</div>
<div class="second-item">
<div class="row">
<div class="name">Kate</div>
<div class="surname">Davidson</div>
</div>
</div>
<div class="third-item">
<div class="row">
<div class="name">David</div>
<div class="surname">Peters</div>
</div>
<div class="row">
<div class="name">Brad</div>
<div class="surname">Lucas</div>
</div>
</div>
</div>
<button>Import</button>
<textarea id="save-content" rows="5"></textarea>
You can add the val when settings the val when you want to append.
For example:
$('#save-content').val($('#save-content').val() + yourContentHere);
var r1=Math.floor(Math.random()*255)
var g1=Math.floor(Math.random()*255)
var b1=Math.floor(Math.random()*255)
$(".color1").click(function (){
$(this).css("background", "rgb(" + r1 + "," + g1 + "," + b1 + ")")
})
$(document).ready(function () {
$(document).on('click', function (event) {
$target = $(event.target);
$target.addClass('clicked');
});
})
var numItems
var getfirstclass
var getsecondclass
$('div').click(function saveclassnames(){
var getfirstclass=$(this).attr('class')
console.log(getfirstclass)
var getsecondclass=$(this).attr('class')
console.log(getsecondclass)
getfirstclass===null
getsecondclass===null
})
$('div').click(function remove(){
var numItems = $('.clicked').length
if(numItems===2 && getfirstclass === getsecondclass){
$('.clicked').css('opacity', '0')
}
else{
$('.clicked').css('background', 'black')
}
})
<body>
<div class="container">
<div class="row">
<div class="color1"></div>
<div class="color2"></div>
<div class="color3"></div>
<div class="color4"></div>
</div>
<div class="row">
<div class="color5"></div>
<div class="color3"></div>
<div class="color1"></div>
<div class="color6"></div>
</div>
<div class="row">
<div class="color7"></div>
<div class="color6"></div>
<div class="color8"></div>
<div class="color5"></div>
</div>
<div class="row">
<div class="color7"></div>
<div class="color8"></div>
<div class="color4"></div>
<div class="color2"></div>
</div>
</div>
</body>
I am trying to make a game called "Memory" (if 2 flipped cards are same, the cards will disappear, but if the cards are not the same, they will flip back). But there is a difference between the original one). I am using random colors instead of card pictures, but I cannot make <div> elements with the same background-color disappear, or flip back if they are not the same. Can someone explain to me why this code does not work?
Thanks.
opacity: 0; hiding generates a lot of space although the element is not visible.
background: black; – the element needs to blend in with the background, otherwise it will not work (technically it won't work)
You can either do this:
$('yourItem').css({
display: 'none'
});
Or, the "simplest way to hide an element":
$('yourItem').hide();
For more information see https://api.jquery.com/hide/
You could use
display: none
If that messes with other stuff, use
visiblity: hidden;
I have the following snippet:
$(".tab").on("click", function() {
var tabID = $(this).attr("data-item");
$('.image[data-item = ' + tabID + ']').addClass('active');
});
<div class="tabbedContent">
<div class="imageWrapper">
<div class="image" data-item="item--1">
<!-- image -->
</div>
<div class="image" data-item="item--2">
<!-- image -->
</div>
</div>
<div class="tabs__rapper">
<div class="tab" data-item="item--1" >
<!-- tab text here -->
</div>
<div class="tab" data-item="item--2" >
<!-- tab text here -->
</div>
</div>
</div>
Basically, when a user clicks a tab, it displays an image assigned to that section (they're linked through data-item).
However, with the following:
$('.image[data-item = ' + tabID + ']').addClass('active');
If I have two of these tabbed modules on one page (if I have two on the same page, the data-items will be the same as they both start from 1), then images in both sections change.
What I'm trying to do is change the tab that's in scope by using this.
However, I'm unsure on how to do this, I've tried (need something like this):
$(this + '[data-item = '+tabID+']').addClass('active');
Am I far off?
try to stop the event propagation when declaring it :
$(".tab").on("click", function( event ) {
event.stopPropagation();
var tabID = $(this).attr("data-item");
$('.image[data-item = ' + tabID + ']').addClass('active');
});
Since.tab is scoped inside .tabbedContent:
$(this).parent('.tabs__rapper').parent('.tabbedContent').find('.image[data-item='+tabID+']').addClass('active');
Assuming, .image is inside .tab, you can change the tab that's in scope by using:
$(".tab").on("click", function() {
var tabID = $(this).attr("data-item");
$(this).closest('.tabbedContent').find('.image[data-item='+tabID+']').addClass('active');
});
I am trying to make a post edit using jquery. But i have a problem with image think.
I have created this DEMO from codepen.io .
In this demo you can see there are two edit button. If you click the edit1 then the image delete (x) button will be come on the right top bar but that will come just one time. It need to be come two delete button because there are two image. What is the problem on there and how can i fix that problems. Anyone can help me in this regard ?
JS
$(document).ready(function() {
$("body").on("click", ".editBtn", function(event) {
event.target.disabled = true;
var ID = $(this).attr("id");
var selected = $("#messageB" + ID + " .postInfo img").parent().html();
var currentMessage = $("#messageB" + ID + " .ptx").html();
var editMarkUp = '<div class="edi"><div class="del">x</div>' + selected + '</div><div class="edBtnS"><div class="edSv">Save</div><div class="cNeD" id="' + ID + '">Cancel</div></div><textarea rows="5" cols="80" id="txtmessage_' + ID + '">' + currentMessage + '</textarea>';
$("#messageB" + ID + " .postInfo").html(editMarkUp);
var data = $('#txtmessage_' + ID).val();
$('#txtmessage_' + ID).focus();
$('#txtmessage_' + ID).val(data + ' ');
});
$("body").on("click", ".cNeD", function(event) {
$(".editBtn").prop('disabled', false);
var ID = $(this).attr("id");
var currentMessageText = $("#txtmessage_" + ID).html();
$("#messageB" + ID + " .ptx").html(currentMessageText);
});
});
HTML
<div class="container">
<div class="postAr" id="messageB1">
<div class="postInfo">
<img src="http://hdwallpaperia.com/wp-content/uploads/2013/10/Home-Sweet-Home-Wallpaper.jpg" id="1">
<img src="http://www.dam7.com/Images/Puppy/images/myspace-puppy-images-0005.jpg" id="1">
</div>
<div class="ptx"> fdasfads fasd fadsf adsf adsf adsf asd fasd f dfsas</div>
<div class="editBtn" name="edit" id="1">Edit1</div>
</div>
</div>
<div class="container">
<div class="postAr" id="messageB2">
<div class="postInfo">
<img src="http://cdn.theatlantic.com/assets/media/img/photo/2015/11/images-from-the-2016-sony-world-pho/s01_130921474920553591/main_900.jpg?1448476701">
fdasfads fasd fadsf aldsf adsf adsf asd fasd f dfsassssg
</div>
<div class="editBtn" name="edit" id="2">Edit2</div>
</div>
</div>
I found that there are 2 main issues there.
you use html() function which get the HTML contents of the first element in the set of matched elements. take a look document
-> you will get html instead of src of img. But later when you try to set src attribute during creating an 'edit area' so that is the mainly reason why image doesn't
display (.attr() function is better to get src attribute)
same wrong logic with message ( .text() function could be the better
solution in this case)
don't forget to check if you have create an edit area or not. At the moment every time it will create a new "edit area". Duplicate !
Hope it will help you a bit.
thanks in advance.
The question is:
I have 2 buttons that shows the content of the div when the user click on it.
The content of the div are in a function that shows the content when the users click on the button (onclick).
But when the page loads just appear the two buttons without any content, is there any way to 'put' one of these buttons as active by default?
I tried with this:
Html:
<div class="diferencias col-md-12 col-lg-12">
<div class="diferencias col-md-6 col-lg-6"><input type="button" value="Web" onClick="fashioncatweb();">
</div>
<div class="diferencias col-md-6 col-lg-6"> <input type="button" value="Logo" onClick="fashioncatlogo();">
</div>
</div>
<div class="row">
<div id="container">
<div id="content"></div>
</div>
</div>
JS:
function fashioncatweb()
{
var text = "<p>text";
var img = "images/.....";
var content = "<div class=\"col-md-7\"><div class=img><img class=img-responsive src=\"" + img + "\" alt=\"\" /></div></div>"
+ "<div class=\"col-md-5\"><div class=pre-scrollable id=\"fashion\">" + text + "</div></div>";
appendToContainer(content);
}
function fashioncatlogo()
{
var text = "<p>text";
var img = "images/....png";
var content = "<div class=\"col-md-7\"><div class=img><img class=img-responsive src=\"" + img + "\" alt=\"logo\" /></div></div>"
+ "<div class=\"col-md-5\"><div class=pre-scrollable id=\"logo\">" + text + "</div></div>";
appendToContainer(content);
}
$(document).ready(function () {
piramidalweb();
});
But it just works for one section and I have like 15 different sections.
Thanks again!!
You should have a function that is called on the click of the buttons:
Using pure Javascript:
<input type="button" value="Button1" id="btn1" onclick="showContent(this.id)" />
function showContent(id) {
if(id === "btn1") {
// show the content
}
}
Then call immediately at the base of the page within script tags:
showContent("btn1");
That will load the content immediately.
To improve this you would execute this function onload, or in a ready function within jQuery, but hopefully you'll be able to take it from there.