Here is a code http://jsfiddle.net/uyDbL/ . Ultimately I want to load in different page one of this links as visible from start(different links must be visible in different pages). Now page doesn't load anything, just blank space. Thanks so much for help. I'm a beginner in javascript and programming too. Please for finished code.
<table border="0">
<tr>
<td>
<hr>
fea1<br><hr>
fea2<br><hr>
fea3<br><hr>
fea4<br><hr>
fea5<br><hr>
fea6<br><hr>
fea7<br><hr>
fea8<br><hr>
fea9
<hr>
</td>
</tr>
</table>
<div class="target">
</div>
<div id="m1">dasdasdasd</div>
<div id="m2">dadasdasdasd</div>
<div id="m3">sdasdasds</div>
<div id="m4">dasdasdsad</div>
<div id="m5">dasdasd</div>
<div id="m6">asdasdad</div>
<div id="m7">asdasda</div>
<div id="m8">dasdasd</div>
<div id="m9">dasdasdsgaswa</div>
If you give the link the class of active, this code will look for that class and set the preview content as that on load.
$(document).ready(function(){
$('a').on('click',function(){
var aID = $(this).attr('href');
var elem = $(''+aID).html();
$('.target').html(elem);
});
el = $("a.active");
if(el.length > 0){
$('.target').html($(el.attr("href")).html());
}
});
a{
text-decoration:none;
color:black;
}
.target{
width:50%;
height:200px;
border:solid black 1px;
}
#m1, #m2, #m3, #m4, #m5, #m6, #m7, #m8, #m9{
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="0">
<tr>
<td>
<hr>
<a class="active" href="#m1">fea1</a><br><hr>
fea2<br><hr>
fea3<br><hr>
fea4<br><hr>
fea5<br><hr>
fea6<br><hr>
fea7<br><hr>
fea8<br><hr>
fea9
<hr>
</td>
</tr>
</table>
<div class="target">
</div>
<div id="m1">dasdasdasd</div>
<div id="m2">dadasdasdasd</div>
<div id="m3">sdasdasds</div>
<div id="m4">dasdasdsad</div>
<div id="m5">dasdasd</div>
<div id="m6">asdasdad</div>
<div id="m7">asdasda</div>
<div id="m8">dasdasd</div>
<div id="m9">dasdasdsgaswa</div>
Related
I'm brand new to Javascript, and need some help. I have a table with 4 rows (3 displayed, and 1 display="none"). What I'm trying to do is display the 4th row via clicking on a link. Here's what my HTML looks like:
<table class="lessons">
<tr>
<td class="chapter">01</td>
<td class="title-desc"><h3 class="title">INTRODUCTION TO PROGRAM</h3>
<h3 class="desc">Program description....blah blah blah...</h3>
</tr>
<tr>
<td class="chapter">02</td>
<td class="title-desc"><h3 class="title">PARTNER WITH THE PROGRAM</h3>
<h3 class="desc">Description for chapter 2....blah blah...blah...</h3>
</tr>
<tr>
<td class="chapter">03</td>
<td class="title-desc"><h3 class="title">FOCUS ON THE PROGRAM</h3>
<h3 class="desc">Description for chapter 3...blah blah blah....</h3>
</tr>
<tr class="hiddenRow" style="display:none;">
<td class="chapter">04</td>
<td class="title-desc"><h3 class="title">THIS CHAPTER IS HIDDEN</h3>
<h3 class="desc">Chapter four description....blah blah...</h3>
</tr>
</table>
show hidden
And here's my javascript:
function showRows(){
var thisRow = document.getElementsByClassName('hiddenRow');
thisRow.style.display="";
}
Link to JSFiddle:
https://jsfiddle.net/99600cha/
I've tried doing the javascript function a few different ways with no success. Could someone show me what I'm doing wrong?
What I'm really trying to do is have the first and last rows displayed with the middle rows hidden and expandable, like this:
Chapter 1
(click to see all chapters)
Chapter 10
so if anyone can point me to something similar, please do!
Edit: Here is a link that shows the exact effect I'm trying to accomplish: https://www.masterclass.com/classes/aaron-sorkin-teaches-screenwriting
if your are using jquery:
function showRows(){
$('.hiddenRow').hide();
}
In var thisRow = document.getElementsByClassName('hiddenRow'); thisRow returns an array of elements that have such class, you have to use thisRow[0] to select a first element.
However, a more elegant and cleaner solution would be making this layout:
<div class="lessons" id="lessons">
<div class="lesson">
<div class="chapter">01</div>
<div class="title">...</div>
<div class="whatever">...</div>
<div class="whatever">...</div>
</div>
<div class="lesson">
<div class="chapter">01</div>
<div class="title">...</div>
<div class="whatever">...</div>
<div class="whatever">...</div>
</div>
<div class="lesson-hidden">
<div class="chapter">A hidden lesson.</div>
<div class="title">...</div>
<div class="whatever">...</div>
<div class="whatever">...</div>
</div>
</div>
By using this simple CSS rule you will be able to hide all elements by changing a single class:
.lessons .lesson-hidden { display: none; }
.lessons.full .lesson-hidden { display: block; }
To show hidden lessons, use this line:
document.getElementById("lessons").classList.add("full")
To revert, use this line: document.getElementById("lessons").classList.remove("full")
I'm using one jQuery pop-up library called thickbox.js.
There is one small image present on my page. When user clicks on this image a call to some function is given, the thickbox.js library creates the HTML/CSS for pop-up on the fly and shows up the pop-up.
The most important thing to note here is if the HTML source of page is viewed when the pop-up is shown I'm not able to see the HTML code of pop-up. I tried to view the HTML source of pop-up through Firebug console by inspecting the element then I could see the HTML source of pop-up. This indicates that the DOM doesn't contain the HTML code of pop-up box.
Now my issue is I want to close this opened pop-up if user clicks anywhere on the page other than the pop-up area. I tried few codes but unfortunately they are not able to do the thing I want to do. Now I'm just clueless for this issue. Following is the code for your reference:
<a href="#" onclick="return $Core.box('prj_name.contactform', 400);">
<!-- This is the function call which generates the pop-up HTML on the fly -->
<img width="33" height="89" align="middle" border="0" pagespeed_url_hash="3893298907" alt="" src="http://58.189.67.789/theme/frontend/foxplus/style/default/image/layout/contact.jpeg">
</a>
Following is the pop-up HTML generated dynamically. I've taken from Firebug console:
<div class="js_box_image_holder_full ">
<div id="js_box_id_3" class="js_box " style="width: 400px; top: 15%; left: 69%; margin-left: 0px; margin-top: 278px; z-index: 5003; display: block;">
<div class="js_box_title">Contact</div>
<div class="js_box_content">
<style type="text/css">#js-contact-message:after{content:'\1f603'}</style>
<div id="js_contact_message">Your details submit succesfully</div>
<div id="js_contact_error_message"></div>
<iframe style="display:none" name="js_contact_frame" id="js_contact_frame" frameborder="1" width="100%"> </iframe>
<div class="main_break">
<form method="post" action="http://58.189.67.789/prj_name/contact/" id="js_contact_form" target="js_contact_frame">
<div class="table">
<div class="p_left">
<label for="email">Full Name</label>
</div>
<div class="p_right">
<input name="val[full_name]" id="full_name" value="" size="60" type="text">
</div>
<div class="clear"></div>
</div>
<div class="table">
<div class="p_left">
<label for="email">Email</label>
</div>
<div class="p_right">
<input name="val[email]" id="email" value="" size="30" type="text">
</div>
<div class="clear"></div>
</div>
<div class="table">
<div class="p_left">
<label for="text">Message</label>
</div>
<div class="p_right">
<textarea name="val[text]" id="text"></textarea>
</div>
<div class="clear"></div>
</div>
<div class="table" style="display:none;">
<div class="p_left">Send Yourself a Copy</div>
<div class="p_right">
<input name="val[copy]" value="1" type="checkbox">
</div>
<div class="clear"></div>
</div>
<div class="table_clear">
<input value="Submit" class="button" type="submit">
<div class="t_right"><span id="js_comment_process"></span></div>
</div>
</form>
</div>
<div class="js_box_title_store">Contact</div>
</div>
<div style="display: block;" class="js_box_close">
x
<span class="js_box_history">prj_name.contactform</span>
</div>
</div>
The jQuery codes I tried are as follows:
$('body').click(function(e) {
if( $('.js_box_image_holder_full').length ) {
if (!$(e.target).closest('.js_box_image_holder_full').length) {
$('.js_box_image_holder_full').hide();
}
}
});
The second code I tried is as follows:
$(document).click(function(event) {
if(!$(event.target).closest('.js_box_image_holder_full').length) {
if($('.js_box_image_holder_full').is(":visible")) {
$('.js_box_image_holder_full').hide()
}
}
})
The issue with both of the above code snippets is the pop-up doesn't open up when user clicks on image. Also I didn't get any error or warning in a Firebug console.
The third code snippet I tried:
$(document).mouseup(function (e) {
var container = $(".js_box");
if (!container.is(e.target) && container.has(e.target).length === 0) {
$(".js_box_image_holder_full").remove();
}
});
The issue I get with above code is the opened pop-up gets closed if user clicks anywhere on page other than the surface of pop-up but when user again clicks on the image to show the pop-up it doesn't come again. This time also I didn't get any error or warning in Firebug console.
I do not use any sort of plugin for popup, but I have simple solution for you. On trigger, fade in an empty mask beside popup and make the mask an agent for fade out. Shown below.
$(function(){
$('.clickme').click(function(){
$('.popup,.mask').fadeIn();
});
$('.mask').click(function(){
$('.popup,.mask').fadeOut();
});
});
.clickme{
display:inline-block;
cursor:pointer;
padding:10px;
background:#00cfff;
color:#fff;
}
.mask{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.4);
z-index:2;
display:none;
}
.popup{
display:none;
position:fixed;
top:20px;
left:20px;
width:100px;
height:100px;
background:#d30043;
z-index:3;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='outer'>
<span class='clickme'>Click Me</span>
<div class='mask'></div>
<div class='popup'>I am a Popup</div>
</div>
Jquery noob, so don't kick too hard plz.
Got the product grid with table in product description. Table td's have the same class, and when i try to pull the content from each of them and insert into a different place, i still get the same content, where it varies in each product.
here is html
<div class="product">
<div class="product777">
<table>
<tr><td class="varimage1">content 1</td><td class="varimage2">COntent2</td></tr>
</table>
<div class="galitem1"></div>
<div class="galitem2"></div>
</div></div>
here is the piece of js code
$(".product").each(function(){
// tried this
var colorimgab = $(".varimage2").html();
//and tried this
var colorimgaa = $(this).closest(".product777").find(".varimage1").html();
$(".galitem1").html(colorimgaa);
$(".galitem2").html(colorimgab);
});
I think this could help you:
$(".product").each(function(){
var colorimgab = $(this).find(".varimage1").html();
var colorimgaa = $(this).find(".varimage2").html();
$(this).find(".galitem1").html(colorimgab);
$(this).find(".galitem2").html(colorimgaa);
});
td{
border:1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="product">
<div class="product777">
<table>
<tr>
<td class="varimage1">content 1</td>
<td class="varimage2">COntent2</td></tr>
</table>
<div class="galitem1"></div>
<div class="galitem2"></div>
</div>
</div>
I have multiple divs with same id , i need to get the content of child's div when the parent div is clicked, the divs are dynamically created. The following code explains that :
i have php file that generate the multiple divs with the same id as follows :
<div id="display" style="display: block;">
<div class="display_box" id="display_box" align="left">
<div class="pic"><img src="https://graph.facebook.com/picture"></div>
<div class="picName">Sahrish Rizwan</div>
</div>
<div class="display_box" id="display_box" align="left">
<div class="pic"><img src="https://graph.facebook.com/picture"></div>
<div class="picName">Sahil Devji</div>
</div>
<div class="display_box" id="display_box" align="left">
<div class="pic"><img src="https://graph.facebook.com/picture"></div>
<div class="picName">Sahar Imtiaz</div>
</div>
<div class="display_box" id="display_box" align="left">
<div class="pic"><img src="https://graph.facebook.com/picture"></div>
<div class="picName">Sahil Devji</div>
</div>
</div>
now i need to get the content of each display_box through jquery , can any one help me out this ?
Try this (see fiddle console)
$(document).on('click','#display',function(){
$(this).find('.display_box').each(function(){
console.log($(this).html()) // returns overall content
});
});
DEMO
OR
$(document).on('click','.display_box',function(){
console.log($(this).html()) // returns clicked content
});
DEMO
$(document).on('click','.display_box',function(){
alert($(this).html())
});
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.