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>
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 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.
What am I doing wrong? I am trying to show divs when the thumbnail is clicked. I am able to show the first div, but for some reason, the next div is not showing. I cannot figure out what I might be missing.
<script>
$(function(){
$('.clickImage').click(function(){
$('.popUp').hide();
$('.popUp').eq($(this).index()).show();
});
});
</script>
<style>
.popUp{
display:none;
}
</style>
<div id="projectContainer">
<div class="imageV clickImage"></div>
<div class="textVertical">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel tortor sit amet magna condimentum dapibus non quis nulla. Etiam varius pellentesque quam sed faucibus. Ut libero mi, porta ac tincidunt sagittis, porttitor a elit. In non tellus eu mauris tristique gravida. In rutrum arcu ullamcorper risus consequat interdum. Sed rutrum rhoncus dolor. Suspendisse potenti.</div>
<div class="imageV clickImage"></div>
<div class="textVertical">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel tortor sit amet magna condimentum dapibus non quis nulla. Etiam varius pellentesque quam sed faucibus. Ut libero mi, porta ac tincidunt sagittis, porttitor a elit. In non tellus eu mauris tristique gravida. In rutrum arcu ullamcorper risus consequat interdum. Sed rutrum rhoncus dolor. Suspendisse potenti.</div>
</div>
<div>
<div class="popUp">Enlarged Image 1</div>
<div class="popUp">Enlarged Image 2</div>
</div>
Try including a selector in the .index() method:
$(function(){
$('.clickImage').click(function(){
$('.popUp').hide();
$('.popUp').eq($(this).index(".clickImage")).show();
});
});
Your first clickable clickImage will work because it will return index:0.
Which is the right corresponding popup.
But for the second clickImage it will return index:2, which does not have a corresponding popup. Only 0 and 1 are present.
This is because .textVertical is also seen as a sibling of clickImage, thus the 2nd clickImage you clikc will be the 3rd sibling (index).
Change
$('.popUp').eq($(this).index()).show();
To
$('.popUp').eq($(this).index('.clickImage')).show();
http://jsfiddle.net/rNSLE/
I don't think index() is doing what you are intending for it to do.
I would use a dataImageId attribute or something similar to uniquely identify the images.
Try this way:
<script>
$(function(){
$('.clickImage').click(function(){
$('.popUp').hide();
$(this).next().next().show();
});
});
</script>
<style>
.popUp{
display:none;
}
</style>
<div id="projectContainer">
<div class="imageV clickImage"></div>
<div class="textVertical">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel tortor sit amet magna condimentum dapibus non quis nulla. Etiam varius pellentesque quam sed faucibus. Ut libero mi, porta ac tincidunt sagittis, porttitor a elit. In non tellus eu mauris tristique gravida. In rutrum arcu ullamcorper risus consequat interdum. Sed rutrum rhoncus dolor. Suspendisse potenti.</div>
<div class="popUp">Enlarged Image 1</div>
<div class="imageV clickImage"></div>
<div class="textVertical">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel tortor sit amet magna condimentum dapibus non quis nulla. Etiam varius pellentesque quam sed faucibus. Ut libero mi, porta ac tincidunt sagittis, porttitor a elit. In non tellus eu mauris tristique gravida. In rutrum arcu ullamcorper risus consequat interdum. Sed rutrum rhoncus dolor. Suspendisse potenti.</div>
<div class="popUp">Enlarged Image 2</div>
</div>
your index is 2 as selected, use something like this:
$('.clickImage').click(function () {
var i=$('.clickImage').index(this);
$('.popUp').hide();
$('.popUp').eq(i).show();
});
index is 0 based.
Note that the first returns 0 as it is the first div, and 2 on the second as it is the third div, so you need to isolate to the divs with the .clickImage class
Here is a simple fiddle to demonstrate: http://jsfiddle.net/zfZE2/
I have tried using the accordion plugin, but it does not work, and I know there is a simpler solution using pure jQuery.
In essence, I would like it so that when you click a <h2> with the class="expand", it should 'expand' the next div with class="collapse". All the divs should be collapsed by default.
Any help would be much appreciated, thanks in advance!
For testing purposes see this jsFiddle demo.
const $headers = $('.header');
const $contents = $('.content');
$headers.on("click", function() {
const $cont = $(this).next(".content");
$contents.not($cont).slideUp(); // Hide all
$cont.slideToggle(); // Toggle one
});
.header { background: #ddd; cursor: pointer; margin: 0; }
.content{ display:none; }
<h2 class="header">Click to expand and collapse</h2>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean bibendum dolor nec nunc aliquam placerat. Nullam vehicula nibh felis. Nulla tincidunt aliquam nisl nec sagittis. Donec convallis hendrerit nisl, ut lacinia elit sagittis a. Nullam sollicitudin
ultricies nibh, tincidunt adipiscing erat tristique vitae. Sed id ipsum ac ipsum fringilla molestie et sit amet elit. Cras commodo augue id dolor suscipit commodo. Ut varius porta orci, quis dignissim ante adipiscing et. Pellentesque rhoncus purus ut
tortor tempus auctor.</div>
<h2 class="header">Click to expand and collapse 2</h2>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean bibendum dolor nec nunc aliquam placerat. Nullam vehicula nibh felis. Nulla tincidunt aliquam nisl nec sagittis. Donec convallis hendrerit nisl, ut lacinia elit sagittis a. Nullam sollicitudin
ultricies nibh, tincidunt adipiscing erat tristique vitae. Sed id ipsum ac ipsum fringilla molestie et sit amet elit. Cras commodo augue id dolor suscipit commodo. Ut varius porta orci, quis dignissim ante adipiscing et. Pellentesque rhoncus purus ut
tortor tempus auctor.</div>
<h2 class="header">Click to expand and collapse 3</h2>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean bibendum dolor nec nunc aliquam placerat. Nullam vehicula nibh felis. Nulla tincidunt aliquam nisl nec sagittis. Donec convallis hendrerit nisl, ut lacinia elit sagittis a. Nullam sollicitudin
ultricies nibh, tincidunt adipiscing erat tristique vitae. Sed id ipsum ac ipsum fringilla molestie et sit amet elit. Cras commodo augue id dolor suscipit commodo. Ut varius porta orci, quis dignissim ante adipiscing et. Pellentesque rhoncus purus ut
tortor tempus auctor.</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
It hides all opened elements before collapsing the closed one.
And it toggles the open state if the element is opened.
This is simple, just use the below
$('.expand').click(function() {
$(this).next('.collapse').slideToggle(); // or use .toggle() for no animation
});
Fiddle: http://jsfiddle.net/garreh/WQYc7/2/
To be collapsed by default just add the below css:
.collapse {
display: none;
}
Use jQuery, I've updated your Fiddle.
HTML:
<div id="accordion">
<h2 class="toggle">Click to expand and collapse</h2>
<div class="pane">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean bibendum dolor nec nunc aliquam placerat. Nullam vehicula nibh felis. Nulla tincidunt aliquam nisl nec sagittis. Donec convallis hendrerit nisl, ut lacinia elit sagittis a. Nullam sollicitudin ultricies nibh, tincidunt adipiscing erat tristique vitae. Sed id ipsum ac ipsum fringilla molestie et sit amet elit. Cras commodo augue id dolor suscipit commodo. Ut varius porta orci, quis dignissim ante adipiscing et. Pellentesque rhoncus purus ut tortor tempus auctor.
</div>
<h2 class="toggle">Click to expand and collapse 2</h2>
<div class="pane"><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean bibendum dolor nec nunc aliquam placerat. Nullam vehicula nibh felis. Nulla tincidunt aliquam nisl nec sagittis. Donec convallis hendrerit nisl, ut lacinia elit sagittis a. Nullam sollicitudin ultricies nibh, tincidunt adipiscing erat tristique vitae. Sed id ipsum ac ipsum fringilla molestie et sit amet elit. Cras commodo augue id dolor suscipit commodo. Ut varius porta orci, quis dignissim ante adipiscing et. Pellentesque rhoncus purus ut tortor tempus auctor.
</div>
</div>
Javascript:
<script>
$(document).ready(function() {
$('#accordion h2').click(function() {
var $nextDiv = $(this).next();
var $visibleSiblings = $nextDiv.siblings('div:visible');
$(this).toggleClass('current').siblings('h2').removeClass('current');
if ($visibleSiblings.length ) {
$visibleSiblings.slideUp('fast', function() {
$nextDiv.slideToggle('fast');
});
} else {
$nextDiv.slideToggle('fast');
}
});
});
</script>
CSS:
.toggle {
background: gray;
padding: 5px;
cursor: pointer;
}
.pane { display: none; }
.current { background: green }
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');