Ideally I want a windows 7 style minimize the div then restore. I want a method that literally takes the div, shrinks and move it to the bottom left of the screen, then can be clicked on to restore it to the center. Please help! Here is my jsfiddle for the basic operation of moving the divs using buttons:
http://jsfiddle.net/UqWC6/1/
var clicked = 0;
var restored = 0;
$("#go").click(function () {
if ($(".box" + clicked)) {
$(".box" + clicked).animate({
top: 400,
width: "20px;",
height: "20px;",
opacity: 0.4,
});
clicked++;
} else {
clicked = 0;
}
});
$('#go2').click(function () {
if ($(".box" + restored)) {
$(".box" + restored).animate({
top: -20,
width: "140px;",
height: "140px;",
opacity: 1,
});
restored++;
} else {
restored = 0;
}
});
http://jsfiddle.net/UqWC6/2/
I removed the incorrect semicolons. And linked to jqueryUI in the fiddle.
So changed these lines from
width: "20px;",
height: "20px;",
width: "140px;",
height: "140px;",
To this
width: "20px",
height: "20px",
width: "140px",
height: "140px",
Seems to work great now. Let me know if that's what you want.
EDIT: http://jsfiddle.net/UqWC6/3/ I fixed it so the third one only needs one click, instead of two.
I changed your html from this
<p>
<button id="go">Save »</button>
<button id="go2">Restore Next</button>
</p>
<div class="box0">box 1</div>
<div class="box1">box 2</div>
<div class="box3">box 2</div>
To this
<p>
<button id="go">Save »</button>
<button id="go1">Restore Next</button>
</p>
<div class="box0">box 1</div>
<div class="box1">box 2</div>
<div class="box2">box 3</div>
And changed this script line from
$('#go2').click(function () {
To this
$('#go1').on('click', function () {
EDIT http://jsfiddle.net/UqWC6/4/ I made it so that you can continue to loop through the clicks once they hit 3 clicks (reset them to 0)
added
if (clicked === 3) {
clicked = 0;
}
if (restored === 3) {
restored = 0;
}
Related
I have a fixed div on the page which contains a logo and as the user scrolls and this logo passes over other divs I wnat to the change the colour of the logo.
I have this working over a single div but need to it work across multiple so any help appreciated.
The WIP site can be seen here... dd.mintfresh.co.uk - if you scroll down you'll (hopefully) see the logo change from black to white as it crosses an illustrated egg. I need the same to happen when it crosses other divs further down the page.
The script so far...
jQuery(window).scroll(function(){
var fixed = jQuery("logo");
var fixed_position = jQuery("#logo").offset().top;
var fixed_height = jQuery("#logo").height();
var toCross_position = jQuery("#egg").offset().top;
var toCross_height = jQuery("#egg").height();
if (fixed_position + fixed_height < toCross_position) {
jQuery("#logo img").css({filter : "invert(100%)"});
} else if (fixed_position > toCross_position + toCross_height) {
jQuery("#logo img").css({filter : "invert(100%)"});
} else {
jQuery("#logo img").css({filter : "invert(0%)"});
}
}
);
Any help appreciated. Thanks!
you need to fire a div scroll event. you can assign
$("div1").scroll(function(){
//change the color of the div1
}
});
$("div2").scroll(function(){
//change the color of the div2
}
});
or you can assign a class to divs which you want to change the color
$(".div").scroll(function(){
//change the color of the div which you are scrolling now
}
});
You can use like this :-
$(window).scroll(function() {
var that = $(this);
$('.section').each(function() {
var s = $(this);
if (that.scrollTop() >= s.position().top) {
if(s.hasClass('active')) {
$('.logo').addClass('invert');
} else {
$('.logo').removeClass('invert');
}
}
});
});
body {
padding: 0;
margin: 0;
}
div {
background: #f00;
height: 400px;
}
.logo {
position: fixed;
top: 0;
left: 0;
width: 100px;
}
.logo.invert {
filter: invert(100%);
}
div:nth-child(even) {
background: #ff0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="https://dd.mintfresh.co.uk/wp-content/uploads/2018/06/DD_logo.svg" class="logo" />
<div id="page1" class="section"></div>
<div id="page2" class="section active"></div>
<div id="page3" class="section"></div>
<div id="page4" class="section active"></div>
<div id="page5" class="section"></div>
As your site code you can do like this :
$(window).scroll(function() {
var that = $(this);
$('#content > section').each(function() {
var s = $(this);
if (that.scrollTop() >= s.position().top) {
if(s.hasClass('black')) {
$('#logo img').css({filter: 'invert(0%)'});
} else {
$('#logo img').css({filter: 'invert(100%)'});
}
}
});
});
I'm looking to simulate pumps, growing and shrinking as expected.
The process is:
pump 1 dumps into pump 2
pump 2 dumps into pump 3
pump 3 dumps into pump 1
Currently I have on/off buttons working pretty much as expected. Unfortunately, for the demo - I'd like to have multiple buttons on at the same time.
Therefore if pump 1 and pump 3 are on at the same time I would expect pump 2 to remain constant. Unfortunately, the way I have the jQuery animations working right now isn't mimicking this in real time.
Here's a demo: http://jsfiddle.net/tJugd/3939/
Ideally, what I'd want is something that grows/shrinks X pixels per second and is bound to a particular div - or something similar. I'm open to ideas.
Example jQuery:
const secs = 30000;
const maxH = '250';
const minH = '0';
$('#btn-on-one').click(function(){
$('#air-pump-one').animate({height:maxH}, secs);
$('#water-pump-one').animate({height:minH}, secs);
$('#air-pump-two').animate({height:minH}, secs);
$('#water-pump-two').animate({height:maxH}, secs);
});
$('#btn-off-one').click(function(){
$('#air-pump-one').stop().animate();
$('#water-pump-one').stop().animate();
$('#air-pump-two').stop().animate();
$('#water-pump-two').stop().animate();
});
I am not sure what you asked, but I rewrote it a little according to my understanding. You can see if this will work for you or not.
http://jsfiddle.net/d21oq86d/6/
If you change the capacity just make sure the .pump-animation-box height css has the correct height to reflect the new capacity.
CSS:
.pump-animation-parent {
display: inline-flex;
}
.pump-animation-box {
border: 2px solid #333;
height: 150px;
width: 40px;
margin-left: 30px;
margin-right: 30px;
margin-bottom: 40px;
background-color: white;
border-radius: 10px;
overflow: hidden;
position: relative;
}
.pump_contents {
background-color: #04ACFF;
position: absolute;
bottom: 0px;
left: 0px;
width: 40px;
}
HTML:
<div id="pump-animation" class="pump-animation-parent">
<div id="pump-one-animation" class="pump-animation-box">
<div class="pump_contents" data-id="1"></div>
</div>
<div id="pump-two-animation" class="pump-animation-box">
<div class="pump_contents" data-id="2"></div>
</div>
<div id="pump-three-animation" class="pump-animation-box">
<div class="pump_contents" data-id="3"></div>
</div>
</div>
<div id="button-parent">
<div>
<button class="btn-default pump_button" data-id="1">Toggle Pump 1</button>
</div>
<div>
<button class="btn-default pump_button" data-id="2">Toggle Pump 2</button>
</div>
<div>
<button class="btn-default pump_button" data-id="3">Toggle Pump 3</button>
</div>
</div>
JS:
var pumps = {
'status': {
1: false,
2: false,
3: false
},
'contents': {
1: 50,
2: 50,
3: 50
},
'capacity': {
1: 150,
2: 150,
3: 150
}
};
$(function(){
init();
});
function init() {
setInterval(function(){
pumpCycle();
updatePumps();
}, 200);
}
function pumpCycle() {
for(var i = 1; i <= 3; i++) {
var target = i == 3 ? 1 : i + 1;
if(pumps.status[i]) {
if(pumps.contents[target] < pumps.capacity[i] && pumps.contents[i] > 0) {
pumps.contents[target]++;
pumps.contents[i]--;
}
}
}
}
function updatePumps() {
for(var i = 1; i <= 3; i++) {
$('.pump_contents[data-id='+i+']').css('height', pumps.contents[i]+'px');
}
}
function printPumps() {
console.log(pumps);
}
$('.pump_button').click(function(){
var pump_id = $(this).attr('data-id');
pumps.status[pump_id] = !pumps.status[pump_id];
});
I currently work with some jQuery, where i have got some problems.
I got this code
if ($(".accordion").length > 0) {
$(".accordion").each(function() {
var item = $(this).find(".accordion-text");
var height = item.outerHeight() + 20;
item.data("height", height + "px").css("height", "0px");
})
}
$(".accordion").on("click", function(e) {
foldOut($(this));
});
function foldOut(accordien) {
console.log(accordien);
var item = $(accordien).find(".accordion-text");
if ($(accordien).hasClass("accordion-open")) {
$(item).stop().transition({
height: '0px'
}, 500, 'in-out');
$(accordien).find(".accordionArrow").removeClass("accordionBgActive");
console.log($(accordien).find(".accordionArrow"));
} else {
$(accordien).find(".accordionArrow").addClass("accordionBgActive");
$(item).stop().transition({
height: item.data("height")
}, 500, 'in-out');
}
$(accordien).toggleClass("accordion-open");
}
But inside the div that is folding out, there may be an a tag, and when i click on the a tag it opens the link but also folds the div..
How can i get the div not to fold when the click is on an a tag?
HTML Where its "closed"
<div class="row">
<div class="overflow-hide rel">
<div class="accordion rel col-md-12 no-pad">
<div class="accordionHeaderDiv">
<h3>Test</h3>
<div class="accordion-header-teaser">
<p>TestTestTestTestTestTestTestTestTestTest</p>
</div>
</div>
<div class="accordion-text" style="height: 0px;">
<p>TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest</p>
<p>Test</p>
</div>
<div class="accordionArrow" style=" position: absolute; top: 0; cursor: pointer; right: 43px; height: 30px;"></div>
</div>
<div class="clearfix"></div>
</div>
</div>
Filter it out regarding event target:
$(".accordion").on("click", function(e) {
if(e.target.tagName.toLowerCase() === "a") return;
foldOut($(this));
});
As anchor can contains other contents, a more relevant way would be:
$(".accordion").on("click", function (e) {
if ($(e.target).closest('a').length) return;
foldOut($(this));
});
<body>
<div id = "SiteContainer">
<div id = "NavigationButtons"></div>
<div id = "ShowReelContainer">
<div id= "NavigationBackward" name = "back" onclick="setPosition();">x</div>
<div id= "NavigationForward" name = "forward" onclick="setPosition();">y</div>
<div id = "VideoWrapper">
<div id = "SlideShowItem">
<img src="Images/A.png" alt="A"></img>
</div>
<div id = "SlideShowItem">
<img src="Images/B.png" alt="B"></img>
</div>
<div id = "SlideShowItem">
<img src="Images/C.png" alt="C" ></img>
</div>
</div>
</div>
</div>
<script>
var wrapper = document.querySelector("#VideoWrapper");
function setPosition(e)
{
if(e.target.name = "forward")
{
if!(wrapper.style.left = "-200%")
{
wrapper.style.left = wrapper.style.left - 100%;
}
}
else
{
if(e.target.name = "back")
{
if!(wrapper.style.left = "0%")
{
wrapper.style.left = wrapper.style.left + 100%;
}
}
}
}
</script>
</body>
Hi, I am very new to javascript. What I am trying to do, is change the x-position of a div when another div (NavigationForward or NavigationBackward) is clicked. However it does not appear to do anything at all. Basically if the div with name forward is clicked, I want to translate the VideoWrapper -100% from it's current position and +100% when "back". The css div itself VideoWrapper has a width of 300%. Inside this div as you can see is a SlideShowItem which is what will change. Perhaps I am adding and subtracting 100% the wrong way?
EDIT:
Thanks everyone for helping me out with this...I had just one more query, I am trying to hide the arrows based on whether the wrapper is at the first slide or the last slide. If its on the first slide, then I'd hide the left arrow div and if it's on the last, I'd hide the right arrow, otherwise display both of em. Ive tried several ways to achieve this, but none of em work, so Ive resorted to using copies of variables from the function that works. Even then it does not work. It appears that my if and else if statements always evaluate to false, so perhaps I am not retrieving the position properly?
function HideArrows()
{
var wrapper2 = document.getElementById("VideoWrapper");
var offset_x2 = wrapper2.style.left;
if(parseInt(offset_x2,10) == max_x)
{
document.getElementById("NavigationForward").display = 'none';
}
else if(parseInt(offset_x2,10) == min_x)
{
document.getElementById("NavigationBackward").display = 'none';
}
else
{
document.getElementById("NavigationForward").display = 'inline-block';
document.getElementById("NavigationBackward").display = 'inline-block';
}
}
//html is the same except that I added a mouseover = "HideArrows();"
<div id = "ShowReelContainer" onmouseover="HideArrows();">
To achieve this type o slider functionality your div VideoWrapper must have overflow:hidden style, and your SlideShowItemdivs must have a position:relative style.
Then to move the slides forward or backward you can use the style left which allows you to move the divs SlideShowItem relative to it's parent VideoWrapper.
I've tested this here on JSFiddle.
It seems to work as you described in your question, although you may need to do some adjustments, like defining the width of your slides, how many they are and so on.
For the sake of simplicity, I defined them as "constants" on the top of the code, but I think you can work from that point on.
CSS
#VideoWrapper{
position:relative; height:100px; white-space:nowrap;width:500px;
margin-left:0px; border:1px solid #000; overflow:hidden; }
.SlideShowItem{
width:500px; height:100px;display:inline-block;position:relative; }
#NavigationForward, #NavigationBackward{
cursor:pointer;float:left; background-color:silver;margin-right:5px;
margin-bottom:10px; text-align:center; padding:10px; }
HTML
<div id = "SiteContainer">
<div id = "NavigationButtons">
</div>
<div id = "ShowReelContainer">
<div id= "NavigationBackward" name = "back" onclick="setPosition('back');">prev</div>
<div id= "NavigationForward" name = "forward" onclick="setPosition('forward');">next</div>
<div style="clear:both;"></div>
<div id = "VideoWrapper">
<div class= "SlideShowItem" style="background-color:blue;">
Slide 1
</div>
<div class = "SlideShowItem" style="background-color:yellow;">
Slide 2
</div>
<div class = "SlideShowItem" style="background-color:pink;">
Slide 3
</div>
</div>
</div>
</div>
JavaScript
var unit = 'px'; var margin = 4; var itemSize = 500 + margin; var itemCount = 3; var min_x = 0; var max_x = -(itemCount-1) * itemSize;
function setPosition(e) {
var wrapper = document.getElementById("VideoWrapper");
var slides = wrapper.getElementsByTagName('div');
var offset_x = slides[0].style.left.replace(unit, '');
var curr_x = parseInt(offset_x.length == 0 ? 0 : offset_x);
if(e == "forward")
{
if(curr_x <= max_x)
return;
for(var i=0; i<slides.length; i++)
slides[i].style.left= (curr_x + -itemSize) + unit;
}
else if(e == "back")
{
if(curr_x >= min_x)
return;
for(var i=0; i<slides.length; i++)
slides[i].style.left= (curr_x + itemSize) + unit;
} }
After you analyze and test the code, I don't really know what's your purpose with this, I mean, you maybe just playing around or trying to develop something for a personal project, but if you are looking for something more professional avoid to create things like sliders on your own, as there are tons of plugins like this available and well tested out there on the web.
Consider using jQuery with NivoSlider, it works like a charm and is cross browser.
I would recommend using jQuery, this will reduce your coding by quite a bit. Can read more here: http://api.jquery.com/animate/
I've created a simple fiddle for you to take a look at. This example uses the .animate() method to reposition two div elements based on the CSS 'left' property.
CSS:
#container {
position: absolute;
left: 1em;
top: 1em;
right: 1em;
bottom: 1em;
overflow: hidden;
}
#one, #two {
position: absolute;
color: white;
}
#one {
background: pink;
width: 100%;
top:0;
bottom:0;
}
#two {
background: blue;
width: 100%;
left: 100%;
top:0;
bottom:0;
}
HTML:
<div id="container">
<div id="one">Div One</div>
<div id="two">Div Two</div>
</div>
JavaScript/jQuery:
var one, two, container;
function animateSlides(){
one.animate({
left : '-100%'
}, 1000, function(){
one.animate({
left : 0
}, 1000);
});
two.animate({
left : 0
}, 1000, function(){
two.animate({
left:'100%'
}, 1000);
});
};
$(function(){
one = $('#one');
two = $('#two');
container = $('#container');
setInterval(animateSlides, 2000);
});
JSFiddle Example: http://jsfiddle.net/adamfullen/vSSK8/3/
I'm trying to create a multi-page navigation using jQuery, where when we change page the current one would suffer a slideUp() and disappear.
Until now I have this JS:
$(document).ready(function() {
current = "#div1";
$("#btn1").click(function() {
if (current != "#div1") {
$(current).slideUp("slow");
current = "#div1";
}
});
$("#btn2").click(function() {
if (current != "#div2") {
$(current).slideUp("slow");
current = "#div2";
}
});
$("#btn3").click(function() {
if (current != "#div3") {
$(current).slideUp("slow");
current = "#div3";
}
});
});
Running on this: http://jsfiddle.net/93gk3oyg/
I just can't seem to correctly navigate from page 1 to 3, 3 to 2, and so on...
Any help would be appreciated :)
I have refactored your code somewhat. I actually do not make any use of the slide-up functionality, everything is handled using CSS animations, which means you will be able to alter those to something else later. Also notice, that this means you don't really need to mess about with z-index.
HTML:
<div id="menu">
<button class="btn" id="btn1" data-rel-page="div1">Pag1</button>
<button class="btn" id="btn2" data-rel-page="div2">Pag2</button>
<button class="btn" id="btn3" data-rel-page="div3">Pag3</button>
<button class="btn" id="btn4" data-rel-page="div4">Pag4</button>
</div>
<div id="div1" class="fullscreen active">
<center>HOME</center>
</div>
<div id="div2" class="fullscreen">
<center>PAGE2</center>
</div>
<div id="div3" class="fullscreen">
<center>PAGE3</center>
</div>
<div id="div4" class="fullscreen">
<center>PAGE4</center>
</div>
JS:
$(document).ready(function () {
var current = "div1";
$("[data-rel-page]").bind('click', function (evt) {
var el = $(evt.currentTarget).attr('data-rel-page');
if (el === current) return;
var $el = $("#" + el);
var $cur = $("#" + current);
current = el;
$cur.removeClass('active');
$el.addClass('active');
})
});
CSS:
.fullscreen {
transition: all 0.4s linear;
position: fixed;
bottom: 0px;
left: 0px;
right: 0px;
height: 0%;
overflow: hidden;
}
.fullscreen.active {
display: block;
height: 100%;
}
Here is the fiddle: http://jsfiddle.net/93gk3oyg/9/