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 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/
<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();
});
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>
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>
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.