How to show some text with clicking id - javascript

hi everyone i want to ask you something.
I am trying to make a popup window. My popup window is working fine. But if is possible anyone can tell me How do I withdraw some text in popup window.
For example i have created this DEMO.
You can see in this demo there is a JohDoe1,JohnDoe2,JohnDoe3 and JohnDoe4 and also there is a Click to show name in popup link.
I want to learn how can i withdraw that name (JohDoe1,JohnDoe2,JohnDoe3 and JohnDoe4) when i click (Click to show name in popup) link
Javascript
$(document).ready(function(){
var i;
$('.vd_button').click(function(){
i = $(this).attr('id');
$('.vduzalani, .box').animate({'opacity':'.50'}, 300, 'linear');
$('.vvalan').animate({'opacity':'1.00'}, 300, 'linear');
$('.vduzalani, .vvalan').css('display', 'block');
});
$('.vkapat').click(function(){
close_box();
});
$('.vduzalani').click(function(){
close_box();
});
});
function close_box()
{
$('.vduzalani, .vvalan').animate({'opacity':'0'}, 300, 'linear', function(){
$('.vduzalani, .vvalan').css('display', 'none');
});
}
HTML
<div class="vduzalani"></div>
<div class="vvalan">
<div class="vkapat">✖</div>
<div class="bilgidegistirmealani">
The name should be here
</div>
</div>
<div class="container">
<div class="divcont">
<div class="name" id="5">Jogn Doe1</div>
<div class="show_name vd_button" id="5">Click To show name in popup</div>
</div>
<div class="divcont">
<div class="name" id="6">Jogn Doe2</div>
<div class="show_name vd_button" id="6">Click To show name in popup</div>
</div>
<div class="divcont">
<div class="name" id="7">Jogn Doe3</div>
<div class="show_name vd_button" id="7">Click To show name in popup</div>
</div>
<div class="divcont">
<div class="name" id="8">Jogn Doe4</div>
<div class="show_name vd_button" id="8">Click To show name in popup</div>
</div>
</div>

Essentially, bind a click event to those divs with class names of "show_name". When clicked grab their "prev" sibling's text and use that text to update the dialog's text. With jQuery, that is pretty easy and straight forward:
$('.show_name').click(function () {
var text = $(this).prev().text();
$('.bilgidegistirmealani').text(text);
//open dialog here
});

Here is a sample solution:
$('.show_name').on('click', function() {
var text = $(this).siblings('.name').html()
alert(text);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="vduzalani"></div>
<div class="vvalan">
<div class="vkapat">✖</div>
<div class="bilgidegistirmealani">
The name should be here
</div>
</div>
<div class="container">
<div class="divcont">
<div class="name" id="5">Jogn Doe1</div>
<div class="show_name vd_button" id="5">Click To show name in popup</div>
</div>
<div class="divcont">
<div class="name" id="6">Jogn Doe2</div>
<div class="show_name vd_button" id="6">Click To show name in popup</div>
</div>
<div class="divcont">
<div class="name" id="7">Jogn Doe3</div>
<div class="show_name vd_button" id="7">Click To show name in popup</div>
</div>
<div class="divcont">
<div class="name" id="8">Jogn Doe4</div>
<div class="show_name vd_button" id="8">Click To show name in popup</div>
</div>
</div>

Related

how to show hide div on focus input

How to show hide div upon existing div, existing div should be hide.
My existing div
<div class="container">
<div class="row">
<input class="abc" type="text" />
</div>
</div>
My Hide Div which are i want show on click action
<div class="container newone">
<div class="row">
<span>some text here</span>
</div>
</div>
css
.newone{ position:absolute; left:0; right:0; top:0px; display:none;}
this should work
$(function() {
$(".abc").focusin(function() {
$(".newone").show();
}).focusout(function () {
$(".newone").hide();
});
});
You can use the focus and focusout events of an input to hide and show a related message using javascript:
var input = document.getElementById('myinput');
var message = document.getElementsByClassName('newone')[0];
input.addEventListener('focus', function() {
message.style.display = 'block';
});
input.addEventListener('focusout', function() {
message.style.display = 'none';
});
.newone {
display:none;
}
<div class="container">
<div class="row">
<input class="abc" type="text" id='myinput'/>
</div>
</div>
<div class="container">
<div class="row">
<span>some text here </span>
<span>some text here</span>
</div>
</div>
<div class="container newone">
<div class="row">
<span>some text here</span>
</div>
</div>
You could use addClass to hide the div using jQuery, Please refer the below code.
$( ".container" ).addClass( "newone" );
For more info please refer the below url
https://api.jquery.com/addclass/

open block on div click from list of div's in HTML

<div class="lsiting-main">
<div class="row">
<div class="col-md-8">
<div class="col-md-4 text-right">
<span class="close-list">
<span class="funded-list">
<span class="new-list">
<div class="technology closedlanguage" headerindex="0h">
<span class="accordprefix"> </span>
View Detail Notice
<span class="accordsuffix"></span>
</div>
</div>
</div>
<div class="thelanguage" contentindex="0c" style="display: none;">
<div align="center">
<div class="big-listing-details">
</div>
<hr>
</div>
<div class="lsiting-main">
......
</div>
<div class="lsiting-main">
......
</div>
I have list of class="listing-main" and i try to open block class="thelanguage" style="display: none;" on click of class="technology closedlanguage".
But what i need, when i click on class="technology closedlanguage" at that time class change "closedlanguage" to "openlanguage" and style change 'none' to 'block'.
But when i click, only one block open at that time from list of div's
<script type="text/javascript">
$(document).ready(function () {
$('.lsiting-main .closedlanguage').click(function (event) {
event.preventDefault();
var target = $('.thelanguage');
$(target).toggleClass('hidden show');
$('.thelanguage').css('display', 'block');
})
});
I have updated the HTML a bit and also if your willing to use JavaScript then refer the below code, it is working as per your expectation.
Here is the JSFiddle Link: Working JS Fiddle Link
JS Code is :
<script>
document.getElementById("technologyclosedlanguage").addEventListener("click", myFunction);
function myFunction(){
var thelanguage = document.getElementById("thelanguage");
var technology = document.getElementById("technologyclosedlanguage");
thelanguage.style.display="block";
technology.className = "technologyopenlanguage";
alert(technology.className); //class name changed.
}
</script>
HTML Code is :
<div class="lsiting-main">
<div class="row">
<div class="col-md-8">
<div class="col-md-4 text-right">
<span class="close-list">
<span class="funded-list">
<span class="new-list">
<div class="technologyclosedlanguage" id="technologyclosedlanguage" headerindex="0h">
<span class="accordprefix"> </span>
View Detail Notice
<span class="accordsuffix"></span>
</div>
</div>
</div>
<div class="thelanguage" id="thelanguage" contentindex="0c" style="display: none;">
<div align="center">
<div class="big-listing-details">
The Language
</div>
<hr>
</div>
<div class="lsiting-main">
......
</div>
<div class="lsiting-main">
......
</div>
Let me know if it works, and helps you. Happy Coding.
Change your script to:
<script type="text/javascript">
$(document).ready(function () {
$(".closedlanguage").click(function (event) {
var target = $(".thelanguage");
$(target).toggleClass("hidden");
$(".hidden").css("display", "none");
event.preventDefault();
});

How to change CSS display property using an anchor tag?

I have a page in which there is an anchor tag: jump to div2.
This anchor tag opens tut.html, which has a div with id=div2:
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<div id="div1">
--some content--
</div>
<div id="div2" style="display:none;">
--some content--
</div>
</div>
</div>
</div>
By default, the contents of div2 are hidden. How can I display or fade in its contents when a user clicks on a hyperlink in another page?
You can easily check the hash that is passed in and use that to display the appropriate block:
window.onload = function(){
var element = document.querySelector(location.hash);
if(element) element.style.display = "block";
}
your href link should not link to the page, just to the anchor :
<a class="myButton" href="#div2">link</a>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<div id="div1">
--some content--
</div>
<div id="div2" style="display:none;">
--some content--
</div>
</div>
</div>
</div>
Using jQuery, you should have a function in the bottom of your document which would handle your click like this :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<script>
$(function () {
$('a.myButton').on('click', function(event){
event.preventDefault();
$('div2').fadeIn('slow');
return false;
})
});
</script>
If the link goes to a new page:
link
On the bottom of the new page 'tut.html' :
<script>
$(function () {
var hash = window.location.hash;
if(hash == '#div2') $(hash).fadeIn('slow');
});
</script>

Find closest div with specified class

I have the DOM structure as
<div id="content">
<div id="wrapper">
<input type="text" id="search" />
</div>
</div>
<div class="subContent">
</div>
<div class="subContent">
</div>
I want to select <div class="subContent"> on enter event of input box which is closest to the input box.
$('#search').on('keypress', function(){
$(this).parent().parent().next();
});
Is there a better way to do this ?
$(this).closest('#wrapper').nextAll('.subContent').first()
That way you can change it to use classes
I guess this can help you
$("#search").click(function () {
$(this).closest("div.module").hide();
});
Possible duplicate of
Hiding the closest div with the specified class
Use This:-
<html>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<div id="content">
<div id="wrapper">
<input type="text" id="search" />
<div class="subContent" style = 'background-color:red;'>div1</div>
<div class="subContent" style = 'background-color:red;'>div2</div>
<div class="subContent" style = 'background-color:red;'>div3</div>
</div>
</div>
</html>
<script>
$('#search').on('keypress', function(){
$(this).next().css( "background-color", "blue" );
});
</script>

Showing Overall Description on button click

I have a UI where more than three div's are there which has the data's with different ids but with the common button called as "Read".I have displayed the messages in which I have kept the message body as a tiny(15) on this Read button it show me the entire body of the message.How to achieve this one way that I am trying to do is as follows:
foreach (var item in Model.MyNote)
{
<div class="row">
#if (item.Owner.Roles.Any(cx => cx.RoleName == "Customer"))
{
<div class="panel">
<div class="row">
<div class="three columns">
<img src="#Request.Url.FormatAbsoluteUrl(#item.Owner.Personal.ImageURL)" />
<span style="text-align: center;">
#item.Owner.Personal.FirstName #item.Owner.Personal.LastName
</span>
</div>
<div class="nine columns">
<input type="hidden" value="#item.Id" id="messid" />
<p class="parahide1">#item.Description </p>
<p class="parahide">#item.Description.ToTiny(15) </p>
</div>
#*Read*#
<button class="button" id="read">Read</button>
</div>
</div>
}
else if (item.Owner.Roles.Any(cx => cx.RoleName == "Professional"))
{
<div class="panel">
<div class="row">
<div class="nine columns">
<p>#item.Description </p>
</div>
<div class="three columns">
<img src="#Request.Url.FormatAbsoluteUrl(#item.Owner.Professional.ImageURL)" />
<span style="text-align: center;">#item.Owner.Professional.CompanyName</span>
</div>
</div>
Read
</div>
}
</div>
<script type="text/javascript">
$(function () {
$(".parahide1").hide();
$("#read").live('click',function () {
$(".parahide").hide();
$(".parahide1").show();
});
});
</script>
}
This give the the result but it is showing the description of all the div's even if I click on the button of the first div.
Try finding the classes in the parent of the current button like this -
$(function () {
$(".parahide1").hide();
$("#read").on('click',function () {
$(this).parent().find(".parahide").hide();
$(this).parent().find(".parahide1").show();
});
});
Hence, only the divs present in the current button's parent will be hidden or shown!
More on .parent() and .find()
Also use .on() instead of .live() as live has been deprecated.

Categories

Resources