I am executing this function, and I do not know what I am missing but var BYE is empty when HELLO is full of HTML, how could this happen?.
$.get(path+'productor/masnotas.jsp', function(data){
var hello = data;
var bye = $(data).find("#columna1");
$("#columnauno").append($(data).find("#columna1"));
},'html');
Could Someone help me?
Edit: Sorry I am rushing, here is part of the content of data, then it goes with more HTML and is compossed by another div called #columna2, outside #columna1. And I want to, using one HTML/JSP, select and put each content in each column of the web when I update the page:
<html>
<!-- Primera Columna -->
<div class="span-12 first" id="columna1">
<br>
<div class="caja">
<b>Cambios en las denuncias por Self</b>
<p style="text-align: justify;">
Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit amet
Leer más
</p>
</div>
<br>
<div class="caja">
<img border="0" align="left" src="${self.monitor.basePath}images/aapas.jpg"/>
<b>Lorem ipsum dolor sit amet</b>
<p style="text-align: justify;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis condimentum purus vel diam dictum non pharetra dolor vulputate. Aenean sed sapien leo, sed laoreet risus. Duis dictum volutpat imperdiet. Donec eros nibh, accumsan condimentum euismod laoreet, auctor vel lacus. Pellentesque felis tortor, laoreet eget varius eget, iaculis vitae turpis. Cras lobortis malesuada erat, nec sodales tellus porttitor eu. Vestibulum porttitor, neque vel aliquet porttitor, est tortor commodo magna, id faucibus orci massa at velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse arcu quam, volutpat ut ullamcorper in, laoreet eget diam. Pellentesque in massa nec massa dapibus vehicula. Sed nec lectus nisi, sed pharetra est. Ut leo metus, sagittis non blandit ac, adipiscing eu leo. ver nota completa
</p>
</div>
<br>
path is system path, the basepath = ${self.monitor.basePath}
*VARS created are made for testing purposes*
Unfortunately find won't work in this case because i'm suspecting #columna1 is not a descendant. Try the following instead.
var bye = $('<div/>').html( data ).find('#columna1');
Related
I have copied text from my webpage , the selected copied text are
var someText = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nec lorem eu ante ullamcorper semper. In venenatis augue sed dolor tincidunt aliquet. Quisque aliquam consectetur nunc eu congue. Ut aliquet nunc a vulputate ullamcorper. Fusce posuere nec tortor eget varius. Aenean blandit ultricies posuere. - See more at: https://mywebaddress.com#sthash.pUpdg9k4.dpuf";
I want to get rid of see more at: url.. using javascript.
You can use substr() and indexOf():
var someText = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nec lorem eu ante ullamcorper semper. In venenatis augue sed dolor tincidunt aliquet. Quisque aliquam consectetur nunc eu congue. Ut aliquet nunc a vulputate ullamcorper. Fusce posuere nec tortor eget varius. Aenean blandit ultricies posuere. - See more at: https://mywebaddress.com#sthash.pUpdg9k4.dpuf";
someText = someText.substr(0, someText.indexOf('-'));
console.log(someText);
I am currently doing a Search page which requies users to search using a html5 forms with checkbox and a submit button to search the file. I have done the json file but I don't know how I would begin a javascript file that searches the Json file and return a match from users selecting the right checkbox or radio button.
Json file I have made so far. So If anyone could help me develop a javascript (Array) I think to search through the Json data.
{
"choices": [
{
"id":"choices1",
"location":"Mumbai",
"name":"Las vagas",
"location":"India",
"Rating": "4",
"events":["singing", "dancing","swimming"],
"price":1000,
"short_description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis feugiat erat sit amet pharetra interdum. Duis dictum lacus massa, sit amet malesuada neque malesuada quis. Fusce interdum elit in diam dictum, sit amet consequat diam faucibus. Aliquam scelerisque nulla vel ligula commodo auctor.
"picture":"images/pic1small.jpg",
"long_description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis feugiat erat sit amet pharetra interdum. Duis dictum lacus massa, sit amet malesuada neque malesuada quis. Fusce interdum elit in diam dictum, sit amet consequat diam faucibus. Aliquam scelerisque nulla vel ligula commodo auctor.
"url":"clubnight.html"
},
{
"id":"choices2",
"location":"london",
"name":"Las momo",
"location":"Uk",
"Rating": "5",
"events":["racing", "climbing","swimming"],
"price":1000,
"short_description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis feugiat erat sit amet pharetra interdum. Duis dictum lacus massa, sit amet malesuada neque malesuada quis. Fusce interdum elit in diam dictum, sit amet consequat diam faucibus. Aliquam scelerisque nulla vel ligula commodo auctor.
"picture":"images/pic1small.jpg",
"long_description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis feugiat erat sit amet pharetra interdum. Duis dictum lacus massa, sit amet malesuada neque malesuada quis. Fusce interdum elit in diam dictum, sit amet consequat diam faucibus. Aliquam scelerisque nulla vel ligula commodo auctor.
"url":"clubnight2.html"
}
{
"id":"choices3",
"location":"paris",
"name":"las ham",
"location":"France",
"Rating": "3",
"events":["football", "dancing","cricket"],
"price":1500,
"short_descriptionLorem ipsum dolor sit amet, consectetur adipiscing elit. Duis feugiat erat sit amet pharetra interdum. Duis dictum lacus massa, sit amet malesuada neque malesuada quis. Fusce interdum elit in diam dictum, sit amet consequat diam faucibus. Aliquam scelerisque nulla vel ligula commodo auctor. "picture":"images/pic2small.jpg",
"long_description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis feugiat erat sit amet pharetra interdum. Duis dictum lacus massa, sit amet malesuada neque malesuada quis. Fusce interdum elit in diam dictum, sit amet consequat diam faucibus. Aliquam scelerisque nulla vel ligula commodo auctor.
"url":" clubnight3.html"
}
I think I have done the javascript part wrong. If anyone could help to create a fiddle demo to show me how I would solve this task. I am not so good at javascript but I am learning. I appreciate if anyone could help
$("#search").on("click", function() {
var choiceslocation = $("input[location=’location’]:checked").val();
var eventsSearch = $("input[event='events']:checked").map(function() {
return this.value;
})
.get();
var needToEqual = eventsSearch.length;
Your JSON is invalid. This might be why you are having problems. There are different sites where you can parse your JSON online. JSON Editor Online for example. I have fixed it for you:
{
"choices": [
{
"id":"choices1",
"location":"Mumbai",
"name":"Las vagas",
"location":"India",
"Rating": "4",
"events":["singing", "dancing","swimming"],
"price":1000,
"short_description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis feugiat erat sit amet pharetra interdum. Duis dictum lacus massa, sit amet malesuada neque malesuada quis. Fusce interdum elit in diam dictum, sit amet consequat diam faucibus. Aliquam scelerisque nulla vel ligula commodo auctor.",
"picture":"images/pic1small.jpg",
"long_description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis feugiat erat sit amet pharetra interdum. Duis dictum lacus massa, sit amet malesuada neque malesuada quis. Fusce interdum elit in diam dictum, sit amet consequat diam faucibus. Aliquam scelerisque nulla vel ligula commodo auctor.",
"url":"clubnight.html"
},
{
"id":"choices2",
"location":"london",
"name":"Las momo",
"location":"Uk",
"Rating": "5",
"events":["racing", "climbing","swimming"],
"price":1000,
"short_description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis feugiat erat sit amet pharetra interdum. Duis dictum lacus massa, sit amet malesuada neque malesuada quis. Fusce interdum elit in diam dictum, sit amet consequat diam faucibus. Aliquam scelerisque nulla vel ligula commodo auctor.",
"picture":"images/pic1small.jpg",
"long_description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis feugiat erat sit amet pharetra interdum. Duis dictum lacus massa, sit amet malesuada neque malesuada quis. Fusce interdum elit in diam dictum, sit amet consequat diam faucibus. Aliquam scelerisque nulla vel ligula commodo auctor.",
"url":"clubnight2.html"
},
{
"id":"choices3",
"location":"paris",
"name":"las ham",
"location":"France",
"Rating": "3",
"events":["football", "dancing","cricket"],
"price":1500,
"short_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis feugiat erat sit amet pharetra interdum. Duis dictum lacus massa, sit amet malesuada neque malesuada quis. Fusce interdum elit in diam dictum, sit amet consequat diam faucibus. Aliquam scelerisque nulla vel ligula commodo auctor.",
"picture":"images/pic2small.jpg",
"long_description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis feugiat erat sit amet pharetra interdum. Duis dictum lacus massa, sit amet malesuada neque malesuada quis. Fusce interdum elit in diam dictum, sit amet consequat diam faucibus. Aliquam scelerisque nulla vel ligula commodo auctor.",
"url": "clubnight3.html"
}
]
}
I've also still added a Plunkr with the base search functionality. You should be able to fill in the rest yourself. It is just a form:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<form role="form">
<div>
<input type="email" id="search" placeholder="Start typing ....">
</div>
</form>
</body>
</html>
And then the JavaScript which loads your JSON and loops through the results:
$(window).load(function(){
$('#search').keyup(function() {
//Get the type value
var searchField = $('#search').val();
// Load the JSON file
$.getJSON('data.json', function(data) {
for(var i = 0; i < data.choices.length; i++) {
var item = data.choices[i];
//Do the check here if the 'searchField' value is part of whatever you want to check against on 'item'
console.log(item);
}
});
});
});
Update
New plunkr which includes checkboxes:
// Code goes here
$(window).load(function(){
$('#search').keyup(function() {
//Get the type value
var searchField = $('#search').val();
// Load the JSON file
$.getJSON('data.json', function(data) {
var html = '<div>'
for(var i = 0; i < data.choices.length; i++) {
var item = data.choices[i];
//Do the check here if the 'searchField' value is part of whatever you want to check against on 'item'
if(item.location.indexOf(searchField) > -1) {
html += '<input type="checkbox" name="vehicle" value="' + item.location + '"> ' + item.location + ' <br>';
}
}
html += '</div>';
$('#result').html(html);
});
});
});
I am highlighting selected text by using the following xpath and offsets.
Here is an example selection of text I am using to debug.
[{
commonAncestorContainer: "/xhtml:html[0001]/xhtml:body[0001]/xhtml:p[0002]",
startContainer: "/xhtml:html[0001]/xhtml:body[0001]/xhtml:p[0002]",
startOffset:0,
endContainer: "/xhtml:html[0001]/xhtml:body[0001]/xhtml:p[0002]",
endOffset:1,
color: "purple"
}]
This selection above works nicely and highlights the selected paragraph.
Now here is the part I am stuck on, as soon as I add text to the paragraph it fails to highlight the text.
Here is the example with selected paragraph and text, so in theory this should only select the text inside the paragraph that you selected. Changes are marked in bold
[{
commonAncestorContainer: "/xhtml:html[0001]/xhtml:body[0001]/xhtml:p[0002]/text()[0]",
startContainer: "/xhtml:html[0001]/xhtml:body[0001]/xhtml:p[0002]/text()[0]",
startOffset:288,
endContainer: "/xhtml:html[0001]/xhtml:body[0001]/xhtml:p[0002]/text()[0]",
endOffset:330,
color: "purple"
}]
test.html (this uses highlight.show)
function highlightTest() {
$MON.highlight.show([
{
commonAncestorContainer: "/xhtml:html[0001]/xhtml:body[0001]/xhtml:p[0001]",
startContainer: "/xhtml:html[0001]/xhtml:body[0001]/xhtml:p[0001]",
startOffset:0,
endContainer: "/xhtml:html[0001]/xhtml:body[0001]/xhtml:p[0001]",
endOffset:1,
color: "yellow"
},
{
commonAncestorContainer: "/xhtml:html[0001]/xhtml:body[0001]/xhtml:p[0002]/text()[0]",
startContainer: "/xhtml:html[0001]/xhtml:body[0001]/xhtml:p[0002]/text()[0]",
startOffset:288,
endContainer: "/xhtml:html[0001]/xhtml:body[0001]/xhtml:p[0002]/text()[0]",
endOffset:330,
color: "purple"
}
]);
highlight.js(this uses xpath.element)
show: function(selections)
{
for (var i in selections)
{
var selection = selections[i];
var ancestor = $MON.xpath.element(selection["commonAncestorContainer"]);
ancestor.contentEditable = "true";
var col = selection["color"] ? selection["color"] : "yellow";
var range = document.createRange();
var startElement = $MON.xpath.element(selection["startContainer"]);
var startOffset = selection["startOffset"];
var endElement = $MON.xpath.element(selection["endContainer"]);
var endOffset = selection["endOffset"];
range.setStart(startElement, startOffset);
range.setEnd(endElement, endOffset);
window.getSelection().removeAllRanges();
window.getSelection().addRange(range);
document.execCommand("HiliteColor", false, col);
window.getSelection().removeAllRanges();
ancestor.contentEditable = "false";
}
}
xpath.js
(this returns the corresponding element given the xpath, back to highlight.js)
element: function (expr) {
var resolver = function (prefix) {
if ("xhtml" == prefix) {
return "http://www.w3.org/1999/xhtml";
}
}
var result = document.evaluate(expr, document, resolver, 9, null).singleNodeValue;
return result;
}
HTML
<body>
<p>
1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tellus ligula, ullamcorper vitae elementum sed, rhoncus a ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et pulvinar augue. Proin non semper mi. Nullam justo velit, vehicula eu congue vitae, tincidunt sit amet urna. Aliquam blandit rutrum dignissim. Donec dapibus nisl arcu, eu eleifend tellus lobortis quis. Praesent quis hendrerit diam. Quisque ultricies lorem et turpis aliquam ornare. Phasellus dolor purus, lacinia eget porta vel, iaculis ac nisl. Phasellus vestibulum faucibus erat sit amet interdum.
</p>
<p>
2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tellus ligula, ullamcorper vitae elementum sed, rhoncus a ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et pulvinar augue. Proin non semper mi. Nullam justo velit, vehicula eu congue vitae, tincidunt sit amet urna. Aliquam blandit rutrum dignissim. Donec dapibus nisl arcu, eu eleifend tellus lobortis quis. Praesent quis hendrerit diam. Quisque ultricies lorem et turpis aliquam ornare. Phasellus dolor purus, lacinia eget porta vel, iaculis ac nisl. Phasellus vestibulum faucibus erat sit amet interdum.
</p>
<p>
3 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tellus ligula, ullamcorper vitae elementum sed, rhoncus a ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et pulvinar augue. Proin non semper mi. Nullam justo velit, vehicula eu congue vitae, tincidunt sit amet urna. Aliquam blandit rutrum dignissim. Donec dapibus nisl arcu, eu eleifend tellus lobortis quis. Praesent quis hendrerit diam. Quisque ultricies lorem et turpis aliquam ornare. Phasellus dolor purus, lacinia eget porta vel, iaculis ac nisl. Phasellus vestibulum faucibus erat sit amet interdum.
</p>
<p>
4 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tellus ligula, ullamcorper vitae elementum sed, rhoncus a ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et pulvinar augue. Proin non semper mi. Nullam justo velit, vehicula eu congue vitae, tincidunt sit amet urna. Aliquam blandit rutrum dignissim. Donec dapibus nisl arcu, eu eleifend tellus lobortis quis. Praesent quis hendrerit diam. Quisque ultricies lorem et turpis aliquam ornare. Phasellus dolor purus, lacinia eget porta vel, iaculis ac nisl. Phasellus vestibulum faucibus erat sit amet interdum.
</p>
<p>
5 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tellus ligula, ullamcorper vitae elementum sed, rhoncus a ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et pulvinar augue. Proin non semper mi. Nullam justo velit, vehicula eu congue vitae, tincidunt sit amet urna. Aliquam blandit rutrum dignissim. Donec dapibus nisl arcu, eu eleifend tellus lobortis quis. Praesent quis hendrerit diam. Quisque ultricies lorem et turpis aliquam ornare. Phasellus dolor purus, lacinia eget porta vel, iaculis ac nisl. Phasellus vestibulum faucibus erat sit amet interdum.
</p>
<p>
6 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse tellus ligula, ullamcorper vitae elementum sed, rhoncus a ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et pulvinar augue. Proin non semper mi. Nullam justo velit, vehicula eu congue vitae, tincidunt sit amet urna. Aliquam blandit rutrum dignissim. Donec dapibus nisl arcu, eu eleifend tellus lobortis quis. Praesent quis hendrerit diam. Quisque ultricies lorem et turpis aliquam ornare. Phasellus dolor purus, lacinia eget porta vel, iaculis ac nisl. Phasellus vestibulum faucibus erat sit amet interdum.
</p>
</body>
Log on text selection, gets the selected xpath
38:Selected text: Lorem
44:Collapsed: false
45:Ancestor container: /xhtml:html[0001]/xhtml:body[0001]/xhtml:p[0002]/text()[0001]
46:Start container: /xhtml:html[0001]/xhtml:body[0001]/xhtml:p[0002]/text()[0001]
47:Start offset: 7
48:End container: /xhtml:html[0001]/xhtml:body[0001]/xhtml:p[0002]/text()[0001]
49:End offset: 12
Update (my problem was)
I had to add
document.designMode = "on";
before i set the hilite color
here is a link to js fiddle
http://jsfiddle.net/E2BbX/11/
XPath indexes are one-based. Try
startContainer: "/xhtml:html[0001]/xhtml:body[0001]/xhtml:p[0002]/text()[1]
and so on.
I am trying to use JScrollPane (http://jscrollpane.kelvinluck.com/) to render a div with children that have overflow:hidden. When doing this JScrollPane renders but scrolling horizontally there is a large blank space where the overflowed text would have appeared. Below is an image showing the problem as well as the relevant code and a JS fiddle showing the issue, if you scroll to the right you'll notice there is a large area showing which is what I am trying to remove. Any ideas how to do so?
<div id="test" style="width:200px;overflow:auto;">
<div style="background-color:red;white-space:nowrap;overflow:hidden;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ligula id sem tristique ultrices eget id neque. Duis enim turpis, tempus at accumsan vitae, lobortis id sapien. Pellentesque nec orci</div>
<div style="background-color:red;white-space:nowrap;overflow:hidden;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ligula id sem tristique ultrices eget id neque. Duis enim turpis, tempus at accumsan vitae, lobortis id sapien. Pellentesque nec orci</div>
<div style="background-color:red;white-space:nowrap;overflow:hidden;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ligula id sem tristique ultrices eget id neque. Duis enim turpis, tempus at accumsan vitae, lobortis id sapien. Pellentesque nec orci</div>
<div style="background-color:red;white-space:nowrap;overflow:hidden;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ligula id sem tristique ultrices eget id neque. Duis enim turpis, tempus at accumsan vitae, lobortis id sapien. Pellentesque nec orci</div>
</div>
$(document).ready(function(){
$('#test').jScrollPane({});
});
http://jsfiddle.net/yTaAS/1/
This is because the inner div takes the width the parent div #test. I replace your html as following and it is working now.
<div id="test" style="width:200px;overflow:auto;">
<div style="display:inline-block;">
<div style="background-color:red;white-space:nowrap;overflow:hidden;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ligula id sem tristique ultrices eget id neque. Duis enim turpis, tempus at accumsan vitae, lobortis id sapien. Pellentesque nec orci</div>
<div style="background-color:red;white-space:nowrap;overflow:hidden;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ligula id sem tristique ultrices eget id neque. Duis enim turpis, tempus at accumsan vitae, lobortis id sapien. Pellentesque nec orci</div>
<div style="background-color:red;white-space:nowrap;overflow:hidden;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ligula id sem tristique ultrices eget id neque. Duis enim turpis, tempus at accumsan vitae, lobortis id sapien. Pellentesque nec orci</div>
<div style="background-color:red;white-space:nowrap;overflow:hidden;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in ligula id sem tristique ultrices eget id neque. Duis enim turpis, tempus at accumsan vitae, lobortis id sapien. Pellentesque nec orci</div>
</div>
</div>
I have the following HTML markup,
<section>
<img width="106" height="113" title="key-staff-tim" alt="key-staff-tim" class="attachment-post-thumbnail wp-post-image" src="http://wp-content/uploads/2011/07/key-staff-tim.jpg">
<article class="biography visible" style="display: block;">
<h3>Director</h3>
<p>Aliquam sagittis purus vitae turpis elementum sed congue lectus tempor. Integer eleifend vestibulum tristique. Pellentesque ut risus leo. Duis tempus sollicitudin viverra. Pellentesque laoreet, justo ut dictum mattis, tellus odio dapibus lacus, convallis lobortis massa dolor nec quam.</p>
<p>Aliquam sagittis purus vitae turpis elementum sed congue lectus tempor. Integer eleifend vestibulum tristique. Pellentesque ut risus leo. Duis tempus sollicitudin viverra. Pellentesque laoreet, justo ut dictum mattis, tellus odio dapibus lacus, convallis lobortis massa dolor nec quam.</p>
</article>
<img width="107" height="114" title="key-staff-chris" alt="key-staff-chris" class="attachment-post-thumbnail wp-post-image" src="http://wp-content/uploads/2011/07/key-staff-chris.jpg">
<article class="biography" style="top: 300px;">
<h3>Director</h3>
<p>Aliquam sagittis purus vitae turpis elementum sed congue lectus tempor. Integer eleifend vestibulum tristique. Pellentesque ut risus leo. Duis tempus sollicitudin viverra. Pellentesque laoreet, justo ut dictum mattis, tellus odio dapibus lacus, convallis lobortis massa dolor nec quam.</p>
<p>Aliquam sagittis purus vitae turpis elementum sed congue lectus tempor. Integer eleifend vestibulum tristique. Pellentesque ut risus leo. Duis tempus sollicitudin viverra. Pellentesque laoreet, justo ut dictum mattis, tellus odio dapibus lacus, convallis lobortis massa dolor nec quam.</p>
</article>
<img width="106" height="113" title="key-staff-nic" alt="key-staff-nic" class="attachment-post-thumbnail wp-post-image" src="wp-content/uploads/2011/07/key-staff-nic.jpg">
<article class="biography" style="top: 300px;">
<h3>Designer</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus aliquet auctor varius. Mauris venenatis, enim sit amet faucibus pharetra cras amet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus aliquet auctor varius. Mauris venenatis, enim sit amet faucibus pharetra cras amet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus aliquet auctor varius. Mauris venenatis, enim sit amet faucibus pharetra cras amet.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus aliquet auctor varius. Mauris venenatis, enim sit amet faucibus pharetra cras amet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus aliquet auctor varius. Mauris venenatis, enim sit amet faucibus pharetra cras amet.</p>
</article>
<img width="109" height="112" title="key-staff-claire" alt="key-staff-claire" class="attachment-post-thumbnail wp-post-image" src="http://wp-content/uploads/2011/07/key-staff-claire.jpg">
<article class="biography" style="top: 300px;">
<h3>Account Manager</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus aliquet auctor varius. Mauris venenatis, enim sit amet faucibus pharetra cras amet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus aliquet auctor varius. Mauris venenatis, enim sit amet faucibus pharetra cras amet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus aliquet auctor varius. Mauris venenatis, enim sit amet faucibus pharetra cras amet.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus aliquet auctor varius. Mauris venenatis, enim sit amet faucibus pharetra cras amet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus aliquet auctor varius. Mauris venenatis, enim sit amet faucibus pharetra cras amet.</p>
</article>
</section>
What I want to do with the jQuery below is, when an image is clicked, I want to identify the next .biography in the DOM and animate and add class. I assume I will have to use, find(), .closest() or .next(). I have tried all of them below is my current attempt.
$('.the-team img').click(function(){
//var clickedImage = $(this);
$('.visible').animate({"top" : $('.the-team').height()+10 }, 1000).removeClass('visible').fadeOut(5);
$(this).find().next('article.biography').addClass('visible');
});
Uhm, you don't need to call find() first.
The find() function will search all descendants of the given dom element(s). Next will just search the the next element on the same level.
So just use:
$(this).next('article.biography').addClass('visible');
This should do the trick
You could do:
$('img').click(function(){
$(this).next('article.biography').addClass('visible').animate({"top" : $('.the-team').height()+10 }, 1000);
});
Change:
.next('article.biography')
To:
.nextAll('article.biography:first')
Next means: look at the next element, and return it if it matches the selector. If not, return nothing. It does not look farther than the very next element.
nextAll check all of them, then you use :first to just get the first match.
It's a common error.
just try-
$(this).find('article').hasClass(".biography").addClass('visible');