I am new to jQuery and need help for the following problem.
How can I read the text from div and print in alert at click function?
My html code:
<div>
<div id"test">text1</div>
select
<div id"test">text2</div>
select
<div id"test">text3</div>
select
</div>
$('a').on('click', function() {
var div = $(this).prev();
alert(div.text());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div id="test1">text1</div> select
<div id="test2">text2</div> select
<div id="test3">text3</div> select
</div>
Related
I got multiple chips with the same class name. I would like to write a javascript that would remove the chips that i clicked on. Here's my code
HTML:
<div class = "chips">
<span>General</span>
<div class="icon-close"></div>
</div>
<div class = "chips">
<span>test</span>
<div class="icon-close"></div>
</div>
JS:
$("body").on("click",".chips .icon-close", function(){
$(".chips").focus().remove();
});
I want the click function to be on the class (".chips .icon-close"). My code currently remove both chips when i click on either one of it
You can hide or remove html tag by following code.
$("body").on("click",".chips .icon-close", function(){
$(this).parent().remove();
//Or hide chips
$(this).parent().hide();
});
Try the following:
$('.chips').click(function(){
$(this).focus().remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "chips">
<span>General</span>
<div class="icon-close"></div>
</div>
<div class = "chips">
<span>test</span>
<div class="icon-close"></div>
</div>
I'm trying to create a drop down effect similar to this image: GIF, however with what I have so far: EXAMPLE I can't seem to figure out a way to add more than one link, if I do add just another content div it doesn't show up.. Hope someone can help, been losing sleep over this haha. Thanks
HTML:
<div class="container">
<div class="header">Projects</div>
<div class="content" onclick="initContent('example')"><em>Example Project</em></div>
</div>
JS:
$(".header").click(function() {
$header = $(this);
//getting the next element
$content = $(this).next();
//checking if its already visible
$content.slideToggle(500, function() {
//execute this after slideToggle is done
//change text of header based on visibility of content div
$header.text(function() {});
});
});
What I would try:
<div class="container">
<div class="header">Projects</div>
<div class="content" onclick="initContent('example')"><em>Example Project</em></div>
<div class="content" onclick="initContent('exampleNew')"><em>Example Project 2</em></div>
</div>
Just put all your links in a single content div:
https://jsfiddle.net/sfcm95yz/3/
<div class="content">
<div class="item" onlclick="initContent('example')">
<em>Example Project</em>
</div>
<div class="item" onlclick="initContent('example2')">
<em>Example Project 2</em>
</div>
</div>
It's because you are sliding down the content div that is right after the header class element ($content = $(this).next();), which applies a display: block to it. If you add another content div, it isn't going to be right after that header and so won't be shown.
You can either change your JavaScript to target all content divs, or rearrange your HTML, something like this:
<div class="container">
<div class="header">Projects</div>
<div class="content">
<div onclick="initContent('example')">
<em>Example Project</em>
</div>
<div onclick="initContent('example')">
<em>Example Project 2</em>
</div>
<div onclick="initContent('example')">
<em>Example Project 3</em>
</div>
</div>
</div>
If you want to modify your JS and keep the existing markup, .nextAll() will select all of $header's siblings (.next() only selects one sibling). You can also add a selector argument to be sure you only select elements with the class "content".
$(".header").click(function() {
$header = $(this);
//getting the sibling ".content" elements
$content = $(this).nextAll(".content");
//checking if its already visible
$content.slideToggle(500, function() {
//execute this after slideToggle is done
//change text of header based on visibility of content div
$header.text(function() {});
});
});
$(document).ready(function () {
$('.box').on('click', function() {
var elmDay = $(this).data('day');
$('.' + elmDay).toggleClass('display');
});
});
Please, visit this site to understand -> http://jsfiddle.net/g42d8pjp/
When you click in the first box, one text with background red will show, right?, them if you click in the other box, other text with a red background will show too.
Can i make the first text with the red background disappear if the second box is clicked??
Add a common class for the boxes like 'day'
<div class="row">
<div data-day="thursday" class="box thursday-box col-xs-6 col-sm-3">
<img src="http://pubcrawlnovo-black.site44.com/assets/images/box.png">
</div>
<div data-day="friday" class="box friday-box col-xs-6 col-sm-3">
<img src="http://pubcrawlnovo-black.site44.com/assets/images/box.png">
</div>
<div class="col-9">
</div>
</div>
<div class="thursday display day">
<h1 class="title">SOMETHING1 </h1>
<p>SOMETHING1</p>
</div>
<div class="friday display day">
<h1 class="title">SOMETHING2</h1>
<p>SOMETHING2</p>
</div>
Hide elements with this class attached on click.
$(document).ready(function () {
var days = $('.day');
$('.box').on('click', function() {
var elmDay = $(this).data('day');
days.addClass('display');
$('.' + elmDay).toggleClass('display');
});
});
Why don't you just change the css via javascript/jquery? Here is a quickly done updated jsfiddle:
http://jsfiddle.net/ykoo873e/
You can just set all the other styles for those divs to 'display: none' and only set the one:
$('.display').css('display', 'none');
$('.display.' + elmDay).css('display', 'block');
Though you could also just dynamically change the html inside the div like so:
http://jsfiddle.net/m5hL220d/
Try this:
http://jsfiddle.net/g42d8pjp/1/
<div id="thursday" class="thursday display">
<h1 class="title">SOMETHING1 </h1>
<p>SOMETHING1</p>
</div>
<div id="friday" class="friday display">
<h1 class="title">SOMETHING2</h1>
<p>SOMETHING2</p>
</div>
$(document).ready(function () {
$('.box').on('click', function() {
var elmDay = $(this).data('day');
if (elmDay == 'thursday')
{
$('#thursday').show();
$('#friday').hide();
}else
{
$('#friday').show();
$('#thursday').hide();
}
//$('.' + elmDay).toggleClass('display');
});
});
The contact_container div holds contact children, within these children is a checkbox. I use ajax to append these children to the container. Once I append the html and click a childs checkbox. The .click does not recognize the newly added checkboxes, Only the children work on page load. Below are working samples of my HTML and Jquery.
Can you offer a solution so that the appended checkboxes are picked up when they are clicked? Thanks
Here is my HTML markup:
<div id="contact_container">
<div class="contact">
<div class="contact_checkbox">
<div class="checkbox_container">
<div class="checkbox">
<input class="testing_checkbox" type="checkbox" name="contacts[]" value="bf6b0049059ec8998601f8fe20acb68ecafe2d44">
</div>
</div>
</div>
<div class="contact_info">
<div class="contact_image">
<img src="image.jpg" width="50" height="50" alt="Profile Picture">
</div>
<div class="contact_name"><span>Caroline Airey</span>
</div>
</div>
</div>
</div>
<div id="x_message" class="inputdata" style="overflow: hidden; display: none;">
<label>Message:</label>
<span><textarea name="x_message" placeholder="Enter a message to send to your contact(s)"></textarea></span>
<div class="clear"></div>
<button class="form_button">Add Contact to Network</button>
</div>
Here is my Jquery:
$( ".checkbox" ).click(function() {
var checked = $('.testing_checkbox:checked').length;
$('#testing').val(checked);
if (checked > 0){
$('#x_message').show(1000);
}
else{
$('#x_message').hide(1000);
}
});
You will need the Parent reference to bind the element properly to jquery try this
$(parentObj).on("click",".checkbox",function() {
var checked = $('.testing_checkbox:checked').length;
$('#testing').val(checked);
if (checked > 0){
$('#x_message').show(1000);
}
else{
$('#x_message').hide(1000);
}
});
The parentObj is the div or the html element you've appended the html code with ajax call
Use this jQuery method instead:
$(".checkbox").on("click", function()
{
// Your code here
});
This will grab clicks from elements that are dynamically added to your page after it initially loads :)
I am trying to load a specific sibling for each div using fancybox.
E.g:
<div id ="content">
<div class="item1">
<div class="pop-ups"><span>click</span></div>
<div class="hidden"><span>content for item 1</span></div>
</div>
<div class="item2">
<div class="pop-ups"><span>click</span></div>
<div class="hidden"><span>content for item 2</span></div>
</div>
<div class="item3">
<div class="pop-ups"><span>click</span></div>
<div class="hidden"><span>content for item 3</span></div>
</div>
<div class="item4">
<div class="pop-ups"><span>click</span></div>
<div class="hidden"><span>content for item 4</span></div>
</div>
</div>
I tried to do the config using the property Content, but not got it, is it possible to get each hidden for each specific item ?
You can use below code:
$(function(){
$("div.pop-ups span").click(function(){
$.fancybox({ content: $(this).parent().next().html() });
});
});
This will show the content of relevant div in fancybox.
You can call this function to open some specific div content in a fancybox.
function OpenDiv(divIDtoopen) //eg. divIDtoopen= #divID //# is must to be prepended to divID for selection
{
$(document).ready(function ()
{
$.fancybox.open(
{
href: divtoopen
}
);
}
);
}