How do I get the middle block (the block where it says: "hallo") like the image:
How it is:
How I want it:
jsfiddle + script: http://jsfiddle.net/mWmsU/
html:
<div id="container">
<div class="overlay"></div>
<div class="btnbar">
<div class="btn" id="it1"><div class="btnp" id="txt"></div><h2>Knopje 1</h2></div>
<div class="btn" id="it2"><div class="btnp"></div><h2>Knopje 2</h2></div>
<div class="btn" id="it3"><div class="btnp"></div><h2>Knopje 3</h2></div>
<div class="btn" id="it4"><div class="btnp"></div><h2>Knopje 4</h2></div>
<div class="btn" id="it5"><div class="btnp"></div><h2>Knopje 5</h2></div>
<div class="btn" id="it6"><div class="btnp"></div><h2>Knopje 6</h2></div>
<div class="btn" id="it7"><div class="btnp"></div><h2>Knopje 7</h2></div>
</div>
<div class="largebar">
<div class="pointer"></div>
<div class="largebarcontent">
<h1 id="title">Hallo</h1>
</div>
</div>
</div>
It should like a littlebit like ios home screen
Use this... and see the HTML and CSS of the demo...
$(function(){
var currentItem;
var plusLeft;
$(window).bind("resize", resizeWindow);
resizeWindow();
// $(".overlay.largeOpen").css("height", $("body").height());
$(".btn").click(openItem);
$(".overlay").click(function(){
$(currentItem).css("z-index", 9);
$(".row").css("padding-bottom", 0);
$("#"+currentItem.id + " h2").css("visibility", "visible");
$("#container, .overlay").toggleClass("largeOpen");
$(".btn").click(openItem);
});
$("#txt").text(window.innerWidth);
function openItem(){
currentItem = this;
$('html,body').animate({
scrollTop: $(this).position().top
}, 700);
$("#container").toggleClass("largeOpen");
$(this).parent().css("padding-bottom", 100);
$(".pointer").css("left", $(this).position().left+plusLeft);
$(".largebar").css("top", $(this).position().top+117);
$(this).css("padding-button", "117px");
$(this).css("z-index", 101);
$("#"+currentItem.id + " h2").css("visibility", "hidden");
// console.log($(this).css('z-index') == 10);
$(".btn").unbind('click');
}
function resizeWindow(e) {
if(currentItem){
$(".pointer").css("left", $("#"+currentItem.id).position().left+plusLeft);
$(".largebar").css("top", $("#"+currentItem.id).position().top+117);
}
$(".overlay.largeOpen").css("height", $("body").height());
if(window.innerWidth <= 320) plusLeft = 9;
if(window.innerWidth > 320) plusLeft = 20;
}
});
And see this DEMO
Related
I'm trying to grab the source of an image using jQuery. However, when I log the result, it returns undefined. Here is my code:
$(document).ready(function() {
$(".btn-expand").on("click", function() {
var img = $(".img-" + "num" + " img").attr("src");
console.log(img);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-12 img-banner img-2">
<img src="assets/img/placeholder-banner.png" alt="Banner 2">
<div class="overlay overlay-2">
<div class="overlay-contents">
<h2>Name2</h2>
<h3>Caption2</h3>
View
</div>
</div>
</div>
</div>
$(".img-" + "num" + " img")
is exactly equivalent to
$(".img-num img")
I believe you meant "num" to be a variable called num whose value is the number of the target image, not a hard-coded string:
$(document).ready(function() {
$(".btn-expand").on("click", function(event) {
var num = $(event.currentTarget).attr('overlay-data')
var img = $(".img-" + num + " img").attr("src");
console.log(img);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-12 img-banner img-2">
<img src="assets/img/placeholder-banner.png" alt="Banner 2">
<div class="overlay overlay-2">
<div class="overlay-contents">
<h2>Name2</h2>
<h3>Caption2</h3>
View
</div>
</div>
</div>
</div>
Well you have an attribute on the anchor you do not read. Change it to be a data attribute and use a variable instead of hardcoding a string.
$(document).ready(function() {
$(".btn-expand").on("click", function (e) {
e.preventDefault()
var overlay = $(this).data("overlay")
var img = $(".img-" + overlay + " img").attr("src");
console.log(img);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-12 img-banner img-2">
<img src="http://via.placeholder.com/350x150" alt="Banner 2">
<div class="overlay overlay-2">
<div class="overlay-contents">
<h2>Name2</h2>
<h3>Caption2</h3>
View
</div>
</div>
</div>
</div>
Everything looks good except that the attribute value wasn't defined. To set an attribute in jQuery, you must set the value. Hence, to correct that snippet.
$(document).ready(function() {
$(".btn-expand").on("click", function(event) {
var num = $(event.currentTarget).attr('overlay-data')
var img = $(".img-" + num + " img").attr("src");
console.log(img);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-12 img-banner img-2">
<img src="assets/img/placeholder-banner.png" alt="Banner 2">
<div class="overlay overlay-2">
<div class="overlay-contents">
<h2>Name2</h2>
<h3>Caption2</h3>
View
</div>
</div>
</div>
</div>
$(document).ready(function() {
$(".btn-expand").on("click", function(event) {
var num = $(event.currentTarget).attr('overlay-data')
var img = $(".img-" + num + " img").attr("src","imageSource.extention");
console.log(img);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-12 img-banner img-2">
<img src="assets/img/placeholder-banner.png" alt="Banner 2">
<div class="overlay overlay-2">
<div class="overlay-contents">
<h2>Name2</h2>
<h3>Caption2</h3>
View
</div>
</div>
</div>
</div>
var img = $(".img-" + "num" + " img").attr("src");
in this code you are looking for tag with class "im-num" and child with class "img". if you give class im-num to outer div and class img like below
<div class="col-md-12 img-banner img-2 im-num">
<img src="assets/img/placeholder-banner.png" alt="Banner 2" class='img'/>
</div>
I want to trigger a JQuery event when the user scrolls across a div for the firs time.
I have tried using waypoint. It is not working. Here is the code, it gives no error.
var waypoints = $('#main').waypoint({
handler: function(direction) {
alert("Main div");
}
})
HTML code:
<body>
<!-- main content -->
<div id="push"></div>
<section class="grey darken-4 valign-wrapper">
<div class="container valign">
<div class="col s12">
<h2 class="center-align white-text">Hey!</h2>
<div class="divider"></div>
<p class="center-align white-text flow-text developer"></p>
</div>
</div>
</div>
</section>
<div id="main">
<div class="container" style="padding-top:8px">
<h2 class="center black-text darken-4">Profile</h2>
<h4 class="center teal-text darken-4">
I love to Code <a class="pulse btn-floating"><i class="material-icons">favorite</i></a>
</h4>
<div class="divider"></div>
<div class="row" style="padding-top:5%">
<div class="col s4">
<h4 class=" teal-text darken-4">About me</h4>
<p class="flow-text me" style="font-size:20px">
</p>
</div>
<div class="col s4">
<img src="Images/Aarth.jpg" alt="" class="circle responsive-img">
</div>
<div class="col s4">
<h4 class="teal-text darken-4" style="padding-left:11%">Details</h4>
<p style="padding-left:11%; font-size:20px;" class="flow-text"><strong>Name:</strong>
<span class="name "></span>
</p>
<p style="padding-left:11%; font-size:20px;" class="flow-text"><strong>Age:</strong>
<span class="age"></span>
</p>
<p style="padding-left:11%; font-size:20px;" class="flow-text"><strong>Location:</strong>
<span class="location"></span>
</p>
</div>
</div>
</div>
</div>
</body>
Here are the approaches I have used till now, but nothing worked
function Utils() {
}
Utils.prototype = {
constructor: Utils,
isElementInView: function (element, fullyInView) {
var pageTop = $(window).scrollTop();
var pageBottom = pageTop + $(window).height();
var elementTop = $(element).offset().top;
var elementBottom = elementTop + $(element).height();
if (fullyInView === true) {
return ((pageTop < elementTop) && (pageBottom > elementBottom));
} else {
return ((elementTop <= pageBottom) && (elementBottom >= pageTop));
}
}
};
var Utils = new Utils();
Help would be great!
To use waypoints, bear in mind there needs to be enough scroll room for the top of the "main" div to hit the top of the viewport. This will vary depending on the size of the browser window the user has open. You can set a % offset from the top of the viewport to make it trigger when the element is a certain distance from the top.
If your "main" div is the last element, you can also use the special "bottom-in-view" offset to make it work once the scroll hits the bottom of the page, even if the top of "main" can't reach the top of the viewport:
var waypoints = $('#main').waypoint({
handler: function(direction) {
alert("Main div");
},
offset: "bottom-in-view"
});
All of this information is available in the documentation. See http://imakewebthings.com/waypoints/api/offset-option/ for more details
I've tried many combinations of this code and nothing works correctlly. I've also tried scrollTop. Just look at my js code and tell me what is wrong with it.
<header>
<div class="nav" id="nav">
<div class="navRow" id="navRow">
<div class="navBrand" id="brand"><img src="img/logo-light.png" alt="Snow" height="35"></div>
<div class="navLinks">
<div class="navItem">About</div>
<div class="navItem">Contact</div>
<div class="navItem">Portfolio</div>
<div class="navItem">Blog</div>
<div class="navItem">Wordpress Theme</div>
</div>
</div>
</div>
</header>
<script>
var yPos = window.pageYOffset;
var nav = document.getElementById("nav");
if (yPos > 50 || document.body.pageYOffset > 50) {
nav.style.backgroundColor = "white";
}
else {
nav.style.backgroundColor = "none";
}
</script>
Your code runs only once when page loads. I suppose you want it to run on every scroll event:
window.addEventListener('scroll', function(e) {
// ... your code here
})
i want to annimate 3 divs when the user scroll down the page, i followed many ttorials, it didn't work any suggestions how to do it, because the divs haz a defined css classes this is the divs . i wante them to fade up or down or any cool anniation how to acomplish this . please .
<section >
<div class="container">
<h1> PRODUITS </h1>
<div class="row">
<a href="pehdeauFrame.php">
<div id="mudivsho" class="col-md-4 col-sm-4">
<div class="panel panel-default">
<div class="panel-body">
<h4 style="text-align:center;" class="adjst">Tubes PEHD pour Eaux </h4>
<img id="imgeaudiv" src="assets/images/diveau.jpg">
</div>
</div>
</div>
</a>
<a href="pehdTelecomFrame.php">
<div id="mudivsho" class="col-md-4 col-sm-4">
<div class="panel panel-default">
<div class="panel-body">
<h4 style="text-align:center;" class="adjst">PEHD pour gaine Fibre Optique</h4>
<img id="imgeaudiv" src="assets/images/divtelecom.jpg">
</div>
</div>
</div>
</a>
<a href="http://www.mansouriplast.com/">
<div id="mudivsho" class="col-md-4 col-sm-4">
<div class="panel panel-default">
<div class="panel-body">
<h4 style="text-align:center;" class="adjst">Tubes PVC</h4>
<img id="imgeaudiv" src="assets/images/divpvc.jpg">
</div>
</div>
</div>
</a>
</div>
</div>
</section>
I suppose you can find out how to make it on this website:
https://css-tricks.com/aos-css-driven-scroll-animation-library/
This javascript will allow you to move a div.
$(document).ready(function(){
$("button").click(function(){
$("div").animate({left: '250px'});
});
});
and this will allow you to make an object appear (fade) on scroll:
$('.back-to-top').css({"display": "none"});
jQuery(document).ready(function() {
var offset = 25;
var duration = 300;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.back-to-top').fadeIn(duration);
} else {
jQuery('.back-to-top').fadeOut(duration);
}
});
jQuery('.back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
});
});
So, what you may want is:
$('#mudivsho').css({"display": "none"});
jQuery(document).ready(function() {
var offset = 25; /* pixels you have to scroll to the div show up (fade) [you can change] */
var duration = 300; /* Duration of the fade (you can change) */
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('#mudivsho').fadeIn(duration);
} else {
jQuery('#mudivsho').fadeOut(duration);
}
});
jQuery('#mudivsho').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
});
});
See if this works.
you can animate like this.
$("document").ready(function(){
$(window).scroll(function(){
$("#mudivsho1").animate({left: "10%",top: "30%",width: "20%",height: "30%",margin: "0 10%"}, 500);
$("#mudivsho2").animate({left: "50%",top: "50%",width: "40%",height: "30%",margin: "0 20%"}, 500);
$("#mudivsho3").animate({left: "100%",top: "70%",width: "80%",height: "30%",margin: "0 30%"}, 500);
});
});
Demo: http://codesheet.org/cs/ZWLNfwqa
Hello for my project i need to get the positions of all .move elements and check if there is an element at relative position.
Here's the HTML code :
<article id="move_wrapper">
<div class="move">
<span class="location"></span>
</div>
<div class="move">
<span class="location"></span>
</div>
<div class="move">
<span class="location"></span>
</div>
<div class="move">
<span class="location"></span>
</div>
<div class="move">
<span class="location"></span>
</div>
</article>
And here's the JS code:
function overlap() {<br>
$(".move").click(function () {
$("#main *.move").each(function () {
var thisPosLeft = this.position().left;
var thisPosTop = this.position().top;
var elem = document.elementFromPoint(thisPosLeft - 100, thisPosTop - 100);
});
alert(elem.index(this));
});
}
Here's a jsfiddle with the full code:
http://jsfiddle.net/C3uqV/