Check element is in view port using isOnScreen - javascript

I am working on a function that should get the text inside a span with class ".dida" of each post (Tumblr) and append them in a specific place (a div with id "#bottom-stripe") only when the image of the posts (img with class ".miniatura") are 50% in viewport.
I am using this external library to detect the elements on viewport:
https://github.com/moagrius/isOnScreen
This is my JS code:
<script>
$( window ).on('load scroll', function(e) {
$( "img.miniatura" ).each(function() {
if ( $( this ).isOnScreen(0.5, 0.5) ) {
var dida = $(".dida").each(function() {
$(this).html();
});
$( "#bottom-stripe" ).empty();
$( "#bottom-stripe" ).append( dida );
}
});
});
</script>
The script get all the captions together and append them all in the #bottom-stripe div. I want it to do this only when the img.miniatura are 50% in the viewport.
Any suggestions on where is the mistake?
Many thanks for your help!

It seems that you want to detect which image is currently in viewport.
$("img.miniatura").each(function() {
if ($(this).isOnScreen(0.5, 0.5)) {
var text = $(this).parents('div').find('.number').html();
//Detect which image is in viewport
$('#bottom-stripe').html(text);
}
});
I've add images text under number class, see the working example to detect the current view port image.
// https://github.com/moagrius/isOnScreen
!function(t){t.fn.isOnScreen=function(o,e){(null==o||"undefined"==typeof o)&&(o=1),(null==e||"undefined"==typeof e)&&(e=1);var i=t(window),r={top:i.scrollTop(),left:i.scrollLeft()};r.right=r.left+i.width(),r.bottom=r.top+i.height();var f=this.outerHeight(),n=this.outerWidth();if(!n||!f)return!1;var h=this.offset();h.right=h.left+n,h.bottom=h.top+f;var l=!(r.right<h.left||r.left>h.right||r.bottom<h.top||r.top>h.bottom);if(!l)return!1;var m={top:Math.min(1,(h.bottom-r.top)/f),bottom:Math.min(1,(r.bottom-h.top)/f),left:Math.min(1,(h.right-r.left)/n),right:Math.min(1,(r.right-h.left)/n)};return m.left*m.right>=o&&m.top*m.bottom>=e}}(jQuery);
// show only captions related to visible images
$(window).on('load scroll', function(e) {
$( "img.miniatura" ).each(function() {
if ($(this).isOnScreen(0.5, 0.5)) {
var text = $(this).parents('div').find('.number').html();
//Detect which image is in viewport
$('#bottom-stripe').html(text);
}
});
});
.info ul.tags {
display: none;
}
#bottom-stripe {
width: 100%;
height: auto;
position: fixed;
bottom: 0px;
left: 0px;
background-color: #ddd;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="post">
<div class="post-content">
<div class="media">
<a href="#">
<img class="miniatura" src="https://placehold.it/350x300">
</a>
<div class="number">First Image</div>
<div class="info">
<ul class="tags">
<li>FirstWord</li>
<li>SecondWord</li>
<li>ThirdWord</li>
</ul>
</div>
</div>
</div>
</div>
<div class="post">
<div class="post-content">
<div class="media">
<a href="#">
<img class="miniatura" src="https://placehold.it/350x300">
</a>
<div class="number">Second Image</div>
<div class="info">
<ul class="tags">
<li>FirstWord</li>
<li>SecondWord</li>
<li>ThirdWord</li>
<li>FourthWord</li>
</ul>
</div>
</div>
</div>
</div>
<div class="post">
<div class="post-content">
<div class="media">
<a href="#">
<img class="miniatura" src="https://placehold.it/350x300">
</a>
<div class="number">Third Image</div>
<div class="info">
<ul class="tags">
<li>FirstWord</li>
<li>SecondWord</li>
<li>ThirdWord</li>
</ul>
</div>
</div>
</div>
</div>
<div id="bottom-stripe">test</div>

Related

Multiple Toggle IDs - Close One When Another Open

I have a page with lots of toggle boxes. When one closes I'd like another to open. Because of the layout of the design there are five hyperlinks in a row and then five hidden boxes below which toggle (so I've used unique ID's for the divs and buttons) - there's a total of about 40 of these rows so it's quite long - probably something more efficient available? However, now I'd like to close one, when another is toggled open. I've tried to find a solution but can't seem to. Here is my JQuery:
$(window).load(function(){
$( "#button1" ).click(function() {
$( "#item1" ).slideToggle();
});
$( "#button2" ).click(function() {
$( "#item2" ).slideToggle();
});
$( "#button3" ).click(function() {
$( "#item3" ).slideToggle();
});
});
and here is my HTML:
<div class="row">
<div class="onefifth"><a id="button1" href="#"><img src="assets/01.jpg"></a></div>
<div class="onefifth"><a id="button2" href="#"><img src="assets/02.jpg"></a></div>
<div class="onefifth"><a id="button3" href="#"><img src="assets/03.jpg"></a></div>
</div>
<div id="item1" style="display: none;">
BOX CONTENT
</div>
<div id="item2" style="display: none;">
BOX CONTENT 2
</div>
<div id="item3" style="display: none;">
BOX CONTENT 3
</div>
Any help would be greatly appreciated! Quite new to JS and struggling a bit...
One nice approach that will give you more control over the elements is avoid the use of hardcoded ID's to refer your buttons, instead use the class of the parent you already have; I suggest on your <a> elements use the href attribute to store which target you want to open.
To close the other elements you can slideUp() all #item... containers or use a flag like a active class.
$(document).ready(function() {
$(".onefifth").on('click','a',function() {
var targ = $(this).attr('href');
$('[id^="item"]').slideUp();
$(targ).slideToggle();
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="onefifth">
<img src="assets/01.jpg">
</div>
<div class="onefifth">
<img src="assets/02.jpg">
</div>
<div class="onefifth">
<img src="assets/03.jpg">
</div>
</div>
<div id="item1" style="display: none;">
BOX CONTENT
</div>
<div id="item2" style="display: none;">
BOX CONTENT 2
</div>
<div id="item3" style="display: none;">
BOX CONTENT 3
</div>
Option 2
If you can be sure the order of your buttons and the order of your containers will match then you can simplify more this with the use of a common class on the containers no ID's.
$(document).ready(function() {
$(".onefifth").on('click', 'a', function(e) {
e.preventDefault();
$('.content').slideUp().eq($(this).parent().index()).slideDown();
})
});
.content {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="onefifth">
<img src="assets/01.jpg">
</div>
<div class="onefifth">
<img src="assets/02.jpg">
</div>
<div class="onefifth">
<img src="assets/03.jpg">
</div>
</div>
<div class="content">
BOX CONTENT
</div>
<div class="content">
BOX CONTENT 2
</div>
<div class="content">
BOX CONTENT 3
</div>
Add a class to all your divs likes this:
<div class="contentBox" id="item1" style="display: none;">
BOX CONTENT
</div>
<div class="contentBox" id="item2" style="display: none;">
BOX CONTENT 2
</div>
<div class="contentBox" id="item3" style="display: none;">
BOX CONTENT 3
</div>
Then you can just just do a close on all of those before you open the new ones
$(window).load(function(){
$( "#button1" ).click(function() {
closeOpenContent();
$( "#item1" ).slideToggle();
});
$( "#button2" ).click(function() {
closeOpenContent();
$( "#item2" ).slideToggle();
});
$( "#button3" ).click(function() {
closeOpenContent();
$( "#item3" ).slideToggle();
});
});
function closeOpenContent(){
$(".contentBox:visible").slideToggle();
}

Javascript tabs will not open tab on pageload

I need to add to this script to make the webpage open a tab on page load.
How can I do this?
I am thinking there is just a JavaScript command I am missing. I just for the life of my cant see it.
JavaScript:
$(document).ready(function(){
$('.tabs').each(function(){
var tab = $(this);
tab.find('.tab_content').hide(); // Hide all divs
tab.find('ul.tab_nav li a').click(function(){ //When any link is clicked
if($(this).hasClass('current_tab')) return false;
tab.find('ul.tab_nav li a').removeClass('current_tab');
$(this).addClass('current_tab'); //Set clicked link class to active
var currentTab = tab.find($(this).attr('href'));
tab.find('.tab_content').hide(); // Hide all divs
$(currentTab).slideDown(); // Show div with id equal to variable currentTab
return false;
});
});
});
HTML:
<!doctype html>
<html>
<head>
<link rel="stylesheet" media="screen" href= "D:\WP\css\style.css"/>
<script src="D:\WP\script\jquery1.9.1.js"></script>
<script src="D:\WP\script\easing.js"></script>
<script src="D:\WP\script\tabs.js"></script>
</head>
<body>
<!--Web page box-->
<div id="tab_style" class="box tabs">
<!--Header start-->
<div id="header">
<ul class="tab_nav">
<li>Home</li>
<li>About</li>
<li>Consulting</li>
<li>Social</li>
<li>Contact</li>
</ul>
</div>
<!--header end-->
<!--contents of site begin-->
<div class="content">
<div id="about" class="tab_content">
<br/>3
<br/>3
<br/>3
</div>
<div id="contact" class="tab_content"></div>
<div id="footer">
<p></p>
</div>
<!--footer ends-->
</div>
<!--contents end here-->
</div>
<!--Web page box end-->
</body>
This might not be the answer you were hoping for, but I just want to suggest that you start with something a little bit less convoluted than the code you posted.
Tabs can be easy: when a tab is clicked, just deactivate the current tab+panel and activate the new one.
Here is a quick demo I just threw together to show you:
HTML:
<div class="tabs">
<span class="tab" data-tab="thing1">Thing 1</span>
<span class="tab" data-tab="thing2">Thing 2</span>
<span class="tab" data-tab="thing3">Thing 3</span>
</div>
<div class="panels">
<div class="panel" data-tab="thing1">
<h2>Thing 1</h2>
<p>blah blah</p>
</div>
<div class="panel" data-tab="thing2">
<h2>Thing 2</h2>
<p>foo bar</p>
</div>
<div class="panel" data-tab="thing3">
<h2>Thing 3</h2>
<img src="http://slodive.com/wp-content/uploads/2014/03/funny-bab.jpg">
</div>
</div>
JavaScript:
// hook tab clicks:
$('body').on('click', '.tab', show);
// show first tab:
show('.tab');
function show(tab) {
// accepts an Event or a CSS selector:
tab = $(tab.target || tab).attr('data-tab');
// de-activate current tab:
$('[data-tab].active').declassify('active');
// activate new tab:
$('[data-tab="'+tab+'"]').classify('active');
}
CSS:
.tab {
display: block;
float: left;
padding: 5px 10px;
margin: 0 5px;
background: #FFF;
transform-origin: 0 100%;
transition: all 500ms ease;
cursor: pointer;
}
.tab:not(.active) {
opacity: 0.5;
transform: perspective(1000px) rotateX(30deg);
}
.panel {
background: #FFF;
padding: 20px;
}
.panel:not(.active) {
display: none;
}
JSFiddle Demo: http://jsfiddle.net/developit/42zcagjb/

Z-index issue with jQuery fading an element in and out

so I have an interactive graphic, in which you click a div and it will display the relative information for that person. I'm using 'animate' to fade in the opacity up to 1. The problem is that when opacity reaches 1 it then jumps behind the divs you've just clicked on.
This is how one of these boards is structured..
<div class="boardbg board1bg">
<div class="rollover person-1"><img src="images/hardie.png"/></div>
<div class="rollover person-2"><img src="images/bernstein.png"/></div>
<div class="rollover person-3"><img src="images/haldane.png"/></div>
<div class="rollover person-4"><img src="images/cohen.png"/></div>
<div class="rollover person-5"><img src="images/dawson.png"/></div>
<div class="info person-1">
<h3>hardie</h3>
<p>blablablablabla
</p>
<h5>click to close</h5>
</div>
<div class="info person-2">
<h3>bernstein/h3>
<p>blablablablabla
</p>
<h5>click to close</h5>
</div>
<div class="info person-3">
<h3>haldane</h3>
<p>blablablablabla
</p>
<h5>click to close</h5>
</div>
<div class="info person-4">
<h3>cohen</h3>
<p>blablablablabla
</p>
<h5>click to close</h5>
</div>
<div class="info person-5">
<h3>dawson</h3>
<p>blablablablabla
</p>
<h5>click to close</h5>
</div>
<div class="backbtn">BACK</div>
</div>
The jQuery works like this...
$( ".rollover" ).click(function() {
$(".info").css('display', 'none');
person = $(this).attr('class').split(' ')[1];
$(".info."+person).css('display', 'block');
$(".info."+person).animate({"opacity": "1"}, 200);
});
$( ".info" ).click(function() {
person = $(this).attr('class').split(' ')[1];
$(".info."+person).animate({"opacity": "0"}, 200);
$(".info."+person).css('display', 'none');
});
I have tried to correct the problem using css z-index attributes but to no avail. Is it something to do with them all being in the same div???
You can see an example if you follow this link and select the top-left picture (Pioneers), then click any of the pictures.
http://thetally.efinancialnews.com/tallyassets/extramile/index.html
Thanks for any help, I'm stumped
Your .info (=Infotext) defaults to position: static, but your .rollover (=photos) are position: absolute so they are always on top. Just set in your CSS:
.info {position: relative;} // now you're done
BTW:
I can't explain why .info is on top during animation.
z-index works only for elements with position other than static.
Try changing the value of the opacity to 0.99.

Display only one div and hide the rest using index

I want to have a function that will fadeIn() a div with class image on hover on another class. However there are multiple divs from each class and would like to have each div correspond to another. I havet hought about using index() to get the inex number of each class and then equal each index number to only display the one corresponding.
To clarify I'll express it as code:
<div class="container">
<div class="woot"></div>
<div class="woot"></div>
<div class="woot"></div>
<div class="woot"></div>
<div class="woot"></div>
</div>
<div class="img_container">
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
</div>
The idea is that when hovering the first woot div it will display the first image div, if hovering the second one it will display the second one and the same process for the rest.
<div class="container">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
//use css selection in jquery
$('container span:nth-child(1))
$('container span:nth-child(2))
$('container span:nth-child(3))
$('container span:nth-child(4))
I hope this will help you.
Try the code below:
$(document).ready(function() {
$(".woot").hover(
function() {
$(".image:eq(" + $(this).index() + ")").show();
},
function() {
$(".image:eq(" + $(this).index() + ")").hide();
}
);
});
.woot {
width: 100px;
height: 100px;
background-color: black;
}
.image {
width: 100px;
height: 100px;
background-color: blue;
display: none;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="woot"></div>
<div class="woot"></div>
<div class="woot"></div>
<div class="woot"></div>
<div class="woot"></div>
</div>
<div class="img_container">
<div class="image">1</div>
<div class="image">2</div>
<div class="image">3</div>
<div class="image">4</div>
<div class="image">5</div>
</div>
With this solution, you got to set ALL the .img_container div to display:none.
CSS
.img_container div{display:none;}
jQuery
$('.container div').on('mouseenter', function(){
var indx = $(this).index();
$('.img_container div').eq(indx).show();
})
$('.container div').on('mouseleave', function(){
var indx = $(this).index();
$('.img_container div').eq(indx).hide();
})
JSFIDDLE: http://jsfiddle.net/sz7am8Lt/.
With this solution you got to set ALL the .img_container div to visibility:hidden.
CSS
.img_container div{visibility:hidden;}
jQuery
$('.container div').on('mouseenter', function(){
var indx = $(this).index();
$('.img_container div').eq(indx).css('visibility','visible');
})
$('.container div').on('mouseleave', function(){
var indx = $(this).index();
$('.img_container div').eq(indx).css('visibility','hidden');
})
JSFIDDLE: http://jsfiddle.net/sz7am8Lt/1/.

Need to display a div when I click a link using Javascript

For some dumb practices in which I am not allowed to use alert or any Js dialog box I have to make the following magic happen:
1.Make a div with a link, in this case its the one called info.
2.Made a invisible div, that would be my "PopUp" with some rubbish info inside.
3.When I click on the link info, the invisible div should materialize.
While simple and and even fairly obvious I am having a bit of trouble getting the logic of how to make such thing happen. If it helps me save face I just started programming..like 1 month ago and just HTML CSS, I am new to this whole Js universe.
This is my code as of now:
<div class="scroll-area" id="lista">
<div class="box">
<p>Item #1</p>
<p class="info"><a href="#" id="lnkInfo">Info</p>
</a>
<p class="info"><a href="#">Take</p>
</a>
</div>
<div class="box">
<p>Item #2</p>
<p class="info"><a href="#">Info</p>
</a>
<p class="info"><a href="#">Take</p>
</a>
</div>
</div>
Here comes the groans "PopUp"...
<div class="popUp">
<ul>
<li>BLA BLA</li>
<li>BLA BLA/li>
<li>BLA BLA</li>
<li>BLA!</li>
</ul>
</div>
CSS just in case.
.popUp {
position: absolute;
width: 300px;
height: 300px;
margin: 0 auto;
background-color: #ecf0f1;
top: 100px;
left: 100px;
display: none;
}
.show {
display: block;
}
And what I though would be a start to the JS:
var elementPopUp = document.getElementById('lnkInfo');
elementoPopUp.addEventListener('click', validate);
function validate() {
document.getElementById('popUp').className += ' show';
}
UPDATED you have syntax bugs in your html code fix and you are using getElementById to get element but you set popUp as class change it to id
<div class="scroll-area" id="lista">
<div class="box">
<p>Item #1</p>
<p class="info"><a href="#" id="lnkInfo">Info
</a></p>
<p class="info"><a href="#">Take
</a></p>
</div>
<div class="box">
<p>Item #2</p>
<p class="info">Info</p>
<p class="info">Take</p>
</div>
</div>
<div id="popup" >
<ul>
<li>BLA BLA</li>
<li>BLA BLA</li>
<li>BLA BLA</li>
<li>BLA!</li>
</ul>
</div>
and css
#popup {
position: absolute;
width: 300px;
height: 300px;
margin: 0 auto;
background-color: #ecf0f1;
top: 100px;
left: 100px;
display: none;
}
#popup.show {
display: block;
}
and javascript
var elementPopUp = document.getElementById('lnkInfo');
elementPopUp.addEventListener('click', validate);
function validate() {
var d = document.getElementById("popup");
d.classList.add("show");
}
I believe if you do this:
<div class="scroll-area" id="lista">
<div class="box">
<p>Item #1</p>
<p class="info">Info</p>
<p class="info">Take</p>
</div>
<div class="box">
<p>Item #2</p>
<p class="info">Info</p>
<p class="info">Take</p>
</div>
</div>
And make the javascript this:
function validate(){
document.getElementById('popUp').style.visibility = 'visible';
}
That should work.
I have not tested it, so I may have a syntax or two wrong.
Here is an example of how to affect element style through JavaScript:
HTML
<a id="shower" href="">
show
</a>
<br>
<a id="hider" href="">
hide
</a>
<br>
<div id="popup" class="hide">Hello</div>
JS
document.getElementById("shower").addEventListener("click", function (e) {
var myDiv = document.getElementById("popup");
myDiv.className = "";
e.preventDefault();
});
document.getElementById("hider").addEventListener("click", function (e) {
var myDiv = document.getElementById("popup");
myDiv.className = "hide";
e.preventDefault();
});
CSS
.hide {
display: none;
}
Here is a simplified version of what I'd do:
The HTML:
clickMe
<div id="showMe">showMe</div>
The CSS:
display:none;
The JavaScript:
document.getElementById("clickMe").onclick = function() {
document.getElementById("showMe").style.display = "block";
}
Here is a fiddle to show the effect
Hope this helps ;)

Categories