Response title
This is preview!
- Screen name: bobchatelle
bobchatelle's Profile
2 Posts
4 Responses
0
Followers
Activity Trend
Last 30 days
- Last 30 days
- Date Interval
From Date : To Date :
Loading Chart...
Show:
- Expanded view
- List view
Private Message
- I always have a terrible time getting jquery syntax correct.
I have a structure like this:
<div class="tmenu">
<ul>
<li>Line One</li>
<li>Line two</li>
</ul>
</div>
I'm trying to select the second line like this:
$j('.tmenu li:eq(2)').dosomething();
But since it's not working, I have obviously done something wrong.
I can select the second line by assigning it to a class. But i don't understand why the syntax above doesn't work.- I'm trying to learn jquery. Below I include a fairly short html testing page.
I stack up four preview divs. Each preview div contains an image and a text area. On load, I hide all of the previews except for the first one.
At the bottom of the page, I have four links. When I hover over a link, i want the current preview to fade out and a new preview to fade in.
This usually works. But if I start moving the mouse too fast, I soon get into a situation when the new preview fades in, but the old preview doesn't fade out. This example uses hoverIntent. But I have the same problem if i switch to hover. Adding that stop statement seems to have helped somewhat but the problem persists.
Anywhere, here is the complete code. I have not attached the four images, which are just somewhat modified screen captures.
<!doctype html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.hoverIntent.js"></script>
<script type="text/javascript">
var $j = jQuery.noConflict();
var cur=0;
function rotatePics(currentPhoto, newPhoto) {
var numberOfPhotos = $j('#portfolio .preview').length;
currentPhoto = currentPhoto % numberOfPhotos;
newPhoto = newPhoto % numberOfPhotos;
$j('#portfolio .preview').eq(newPhoto).stop(true, true).fadeIn(2000);
$j('#portfolio .preview').eq(currentPhoto).fadeOut(2000, function() {
// re-order the z-index begin
$j('#portfolio .preview').each(function(i) {
$j(this).css (
'zIndex', ((numberOfPhotos -i ) + newPhoto - 1) % numberOfPhotos
);
});
cur=newPhoto;
//re-order the z-index end
});
}
$j(document).ready(function(){
$j('.preview').hide();
$j('#portfolio .preview:first').show();
$j('a.bbjc').hoverIntent(function() {
if (cur != 2) {rotatePics(cur, 2)};
}, function() {});
$j('a.mark').hoverIntent(function() {
if (cur != 1) {rotatePics(cur, 1)};
}, function() {});
$j('a.foj').hoverIntent(function() {
if (cur != 3 ) {rotatePics(cur, 3)};
}, function() {});
$j('a.medspira').hoverIntent(function() {
if (cur != 0) {rotatePics(cur, 0)};
}, function() {});
});
</script>
<style type="text/css">
#portfolio {
width:800px;
height:400px;
border: 1px solid green;
}
.preview {
height:400px;
width: 750px
border: 1px solid red;
position: absolute;
overflow: hidden;
}
.preview .pimg {
float: left;
width:550px;
}
.preview .text {
width:185px;
float: right;
margin-top:20px;
margin-left: 15px;
line-height: 1.2;
text-align: left;
}
.outbreak, .bbjc, .foj {}
</style>
</head>
<body>
<!--portfolio-->
<div id="portfolio">
<div class="preview">
<div class="pimg"><img class="previmg" src="MedScreen.png" alt="" /></div>
<div class="text">
<h2><strong>Medspira LLC</strong></h2>
markets innovative sophisticated medical devices to healthcare professionals.
Medspira has close relationships with major research organizations.
Their Boards of Directors and Advisors include experts in medical-device research and development.
Click <a href="http://medspira.com">here</a> to visit this site.
</div>
</div>
<div class="preview">
<div class="pimg"><img class="previmg" src="MarkScreen.png" alt="" /></div>
<div class="text">
<h2><strong>Mark Pendergrast, Author</strong></h2>
Author of
<em>Inside the Outbreaks</em>
<em>Mirror Mirror</em>
<em>Uncommon Grounds</em>
<em>Victims of Memory</em>
<em>For God, Country and Coca-Cola</em>
Click <a href="http://markpendergrast.com">here</a> to visit this site.
</div>
</div>
<div class="preview">
<div class="pimg"><img class="previmg" src="bbjcScreen.png" alt="" /></div>
<div class="text">
<h2><strong>The Bernard Baran Justice Committee</strong></h2>
successfully worked for the release of Bernard Baran, the first person convicted during the 80s daycare hysteria.
Baran was imprisoned for 22 years for crimes that never occurred. After his release, the BBJC fought for three more years to get all of the charges against Baran dropped.
Click <a href="http://freebaran.org">here</a> to visit this site.
</div>
</div>
<div class="preview">
<div class="pimg"><img class="previmg" src="fojScreen.png" alt="" /></div>
<div class="text">
<h2><strong>Friends of Justice</strong></h2>
is a blog for people concerned about false accusations and wrongful convictions.
Click <a href="http://bobchatelle.net">here</a> to visit this site.
</div><!--end text-->
</div><!--end preview-->
</div><!--end portfolio-->
<p>Hello</p>
<a class="medspira" href="http://medspira.com">Medspira</a>
<a class="mark" href="http://markpendergrast.com/inside-the-outbreaks">Mark Pendergrast</a>
<a class="bbjc" href="http:/freebaran.org">BBJC</a>
<a class="foj" href=""bobchatelle.net">Friends of Justice</a>
</body>
</html>- «Prev
- Next »
Moderate user : bobchatelle