I'm trying to add two .height()'s together in order to get a responsive number for my onScroll event how do I add two of these together?
I'm general, I'm just trying to get the animation to fire after getting to the bottom of everything above the element. Is there any other way to do that besides just adding the heights of everything above?
window.addEventListener('load', function() {
$(window).scroll(function() {
var eventScroll = window.pageYOffset;
var eventScrollAmount = ($("#sectionOneImage").height() + $("#bannerOne").height());
if( eventScroll > eventScrollAmount) {
$("#sectionOneImage").addClass("animated slideInLeft ");
}
else {
$("#sectionOneImage").removeClass("animated slideInLeft ");
}
});
});
Here's an example of how to grab two heights using vanilla JS.
var sizeOfOne = document.getElementById('one').offsetHeight;
var sizeOfTwo = document.getElementById('two').offsetHeight;
document.getElementById('hook').innerHTML = 'The first div is ' + sizeOfOne + ' pixels in height, the second div is ' + sizeOfTwo + ' pixels in height. The total size of both div\'s are ' + (sizeOfOne + sizeOfTwo) + ' pixels.';
#one {
height: 50px;
background: red;
}
#two {
height: 75px;
background: blue;
}
<div id="hook"></div>
<div id="one"></div>
<div id="two"></div>
Related
How would i be able to find the top, left, bottom and right position of multiple moveable elements on a page? I tried jQuery .position() for it, however the function gives me the position of only the most recent moveable element created (div). Here's the code -
Finding Position -
$(document).on('click', function(e) {
var createdWindow = $(nWindow).position();
var createdWindow_right = $(nWindow).position().left + $(nWindow).width();
var createdWindow_bottom = $(nWindow).position().top + $(nWindow).height();
console.log("Top position: " + createdWindow.top + ", Left position: " + createdWindow.left + ", right position: " + createdWindow_right + ", bottom position: " + createdWindow_bottom);
// returns an object with x/y coordinates of the top-left corner of the element
});
Div Creation -
function windowProperties(containment,x,y,width,height){ //New Window Style and jQuery Functions
$(containment).append('<div id="window'+divCount+'"><p id="para'+divCount+'">Drop Here</p></div>');
nWindow = document.getElementById('window'+divCount);
paragraph = document.getElementById('para'+divCount);
paragraph.style.color = "black";
paragraph.style.fontSize = "20px";
paragraph.style.fontWeight = "bold";
paragraph.style.padding = "10px";
paragraph.style.textAlign = "center";
nWindow.style.width = width+"px"; //680
nWindow.style.position = "absolute";
nWindow.style.height = height+"px"; //294.75
nWindow.style.opacity = "0.5";
nWindow.style.background = "white";
nWindow.style.zIndex = "200";
nWindow.style.top = x+"px";
nWindow.style.left = y+"px";
};
Use draggable event property of an element and send event on drag events.
For Example:-
<div draggable = true ondragstart="abc(event)>
//some HTML CODE
</div>
<script>
function abc(event)
{
console.log(event) // here in this event you get all the data of draggable elements
}
</script>
Consider the following example.
$(function() {
$.fn.getPosition = function() {
var results = $(this).position();
results.right = results.left + $(this).width();
results.bottom = results.top + $(this).height();
return results;
}
$(".drag").draggable({
containment: "parent",
stop: function(e, ui) {
console.log($(this).attr("id"), $(this).getPosition());
}
});
});
.cnt {
width: 340px;
height: 340px;
border: 1px solid black;
}
.drag {
width: 20px;
height: 20px;
background: #ccc;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="cnt">
<div class="drag" id="box-1"></div>
<div class="drag" id="box-2"></div>
</div>
This creates a function that can get you the full position. You can then use that in stop callback for a Drag action.
I have a div that I using Javascript to change the position of. However, it is rounding incorrectly.
#hi{
background-color: blue;
width: 2px;
height: 10px;
position: absolute;
}
<div id = "hi"></div>
<button onclick="myFunction()" style = "margin-top: 100px">Click me</button>
<script>
function myFunction() {
var div = document.getElementById("hi");
div.style.left = "0px";
console.log("BEFORE: " + div.style.left);
var moveBy = 109.8125;
div.style.left = moveBy + 'px';
console.log("MOVE BY: " + moveBy);
console.log("NEW POSITION: " + div.style.left);
}
</script>
It should move it by 109.8125, but instead moves it by 109.813.
Any way to make it more accurate and move it to 109.8125?
It may seem like it is not that important, but I am doing this several times, so then it looks in the wrong place, relative to other elements.
If you really need to prevent precision drift due to rounding error, I'd suggest you keep track of the value independently of the style attribute. Here's an example of how you could do it using a data attribute:
function myFunction() {
var div = document.getElementById("hi");
div.style.left = "0px";
console.log("BEFORE: " + div.style.left);
var moveBy = 109.8125;
// track the current value as a data attribute,
// which won't get rounded
const left = div.dataset.left = parseFloat(div.dataset.left || 0) + moveBy;
// apply the computed value as a style
div.style.left = left + 'px';
console.clear();
console.log(`dataset.left: ${left}, style.left: ${div.style.left}`);
}
#hi {
background-color: blue;
width: 2px;
height: 10px;
position: absolute;
}
<div id="hi"></div>
<button onclick="myFunction()" style="margin-top: 100px">Click me</button>
I am looking for way to make page scroll on menu click.
My found place where to go. When I use translateY it work(but ofcouse I can't use it).
I need a scroll I tried to use scrollTop and scrollBy but it doesn't work for me.
What I do wrong?
function scroll(id: number) {
for (let k = 0; k < sectionsForScroll.length; k++) {
if (sectionsForScroll[k].dataset.navId == id) {
const bigginer = sectionsForScroll[0].getBoundingClientRect().top;
console.log( bigginer + 'px how far we from the start ');
const distanceToGo= sectionsForScroll[k].getBoundingClientRect().top;
console.log(sectionsForScroll[k].offsetTop);
const distanceToScroll = bigginer - distanceToGo;
console.log(distanceToGo + ' where we have to go ');
console.log(distanceToScroll + ' what the distanse we need to scroll ');
main.style.transform = 'translateY(' + distanceToScroll + 'px)';
// main.scrollTop=distanceToGo;
// window.scrollBy(0, distanceToGo);
}
}
}
window.scroll will work for you. Here is an example of scrolling 300px after clicking the scroll button.
Before using it you should checkout the compatibility table for the smooth option.
document.getElementById("myButton").addEventListener("click", scrollMe);
function scrollMe() {
window.scroll({
top: 300,
left: 0,
behavior: 'smooth'
});
}
.myDiv {
background-color: green;
height: 1000px;
}
<div class="myDiv">
<button id="myButton">Scroll</button>
</div>
I'm trying to make a slide show using multiple background-images and using the background-position property to animate them. Here is the code:
HTML:
<div class="slide_holder" id="slide_holder"></div>
CSS:
.slide_holder {
float: left;
width: 1440px;
height: 720px;
background-image: url("images/gc-h-s-01.jpg"), url("images/gc-h-s-02.jpg"), url("images/gc-h-s-03.jpg");
background-repeat: no-repeat;
background-size: 100%;
background-position: 0px, 1440px, 2880px;
transition: 1s;
}
JS:
var imageIndex = 1;
var x;
var PosValues = ["0px, 1440px, 2880px", "-1440px, 0px, 1440px", "-2880px, -1440px, 0px"]
startSlides();
function startSlides() {
x = setInterval(IncAndWrite, 1000);
}
function IncAndWrite() {
var i;
document.getElementById("slide_holder").style.backgroundPosition = PosValues[imageIndex];
imageIndex++;
if (imageIndex > 2) {imageIndex = 0;}
}
The concept is that the background-position values for each background-image change every 1s keeping only one image in the visible frame.
The above mentioned code works just fine, but I do not want to write individual position values for different screen sizes (as my website is responsive). So I wrote the following code:
JS:
var imageIndex = 1;
var x;
var UnitRes = 1440;
var PosValues = [
UnitRes*0 + "px, " + UnitRes*1 + "px, " + UnitRes*2 + "px;",
UnitRes*(-1) + "px, " + UnitRes*0 + "px, " + UnitRes*1 + "px;",
UnitRes*(-2) + "px, " + UnitRes*(-1) + "px, " + UnitRes*0 + "px;"]
startSlides();
function startSlides() {
x = setInterval(IncAndWrite, 1000);
}
function IncAndWrite() {
var i;
document.getElementById("slide_holder").style.backgroundPosition = PosValues[imageIndex];
imageIndex++;
if (imageIndex > 2) {imageIndex = 0;}
}
The basic concept is that you put the width of the container in UnitRes and then the values get calculated. But this does not seem to work. The background-position values don't change at all.
What I thought was causing the problem:
In the second case of js code I'm putting a variable value inside an array which I thought is not being converted to a string type while inputing it in the CSS syntax.
What I tried doing:
I used typeof but it is showing the type as string
Then I tried using:
document.getElementById("slide_holder").style.backgroundPosition = PosValues[imageIndex].valueOf();
but still it's not working. I also used alert(PosValues[imageIndex]); to check if the values are ok and they are.
Please help me.
The problem was that in first time you have defined parameters without semicolon ; and in second example you have placed it what broke the script.
I am trying to create a button on an <a href="#" ...> tag using HTML+CSS+Javascript+jQuery. The button displays properly. However, when I click on it nothing happens except for the default behavior (i.e., navigating to "#") . Any suggestions of what I am doing wrong? Here is my code:
//container is a div created with
//borderDiv = document.createElement('div') and
//document.body.appendChild(borderDiv);
function addMenuNavigation(container) {
var temp_innerHTML = '' +
'<div id="titleBar" class="titleBar">' +
'<div id="menuTitle" class="menuTitle"><img id="titleImage" style="height: 70px; position: absolute; top: 2px; left:120px"></img></div>' +
'<a href="#" class="leftButton" id="leftButton">' +
' <div style="position: relative; top: 6px;"><img src="' + getURL('img/menu/iPhoneStyle/chevronLeft.png') + '"></img></div>' +
'</a>' +
'</div>' + //titleBar
'';
container.innerHTML = temp_innerHTML;
var $leftButton = $('#leftButton');
console.dir($leftButton); //Indeed it does display the #leftButton element
//FIXME BUG 'MenuNavigation' below functions do not get registered ...
$('#leftButton').mousedown(function(e) {
$('#leftButton').addClass("pressed");
console.log('leftButton down ' + this.id);
});
$('#leftButton').mouseup(function(e) {
console.log('leftButton up ' + this.id);
$(this).removeClass("pressed");
});
$('#leftButton').click(function(e){
console.log('leftButton clicked ' + this.id);
click_e.preventDefault();
});
}
.css is as follows
.titleBar {
...
display: block;
height: 63px;
opacity: 0.8;
padding: 6px 0;
...
background-image: -webkit-gradient(linear, left top, left bottom,
from(#bbb), to(#444));
z-index: 35;
}
.leftButton:not(ac_hidden), .leftButton:not(pressed) {
left: 6px;
...
-webkit-border-image: url(../img/menu/iPhoneStyle/back_button.png) 0 8 0 8;
}
.leftButton.pressed{
-webkit-border-image: url(../img/menu/iPhoneStyle/back_button_clicked.png) 0 8 0 8;
}
I am working with Chrome.
Any suggestions? Thank you.
$('#leftButton').click(function(e){
console.log('leftButton clicked ' + this.id);
click_e.preventDefault();
});
should be e.preventDefault();
I personally prefer to add my event handlers this way:
function addMenuNavigation(container) {
var container = $(container).empty();
var titleBar = $('<div id="titleBar/>');
var leftButton = $('Image here').mousedown(leftButtonMousedown).mouseup(leftButtonMouseup).click(leftButtonClick).appendTo(titleBar);
titleBar.appendTo(container);
}
function leftButtonMouseDown(e) { //mouse down handler
}
function leftButtonMouseUp(e) { //mouse up handler
}
function leftButtonClick(e) {
e.preventDefault();
// handle the click here
}
Could it be that the browser hasn't finished adding your HTML to the DOM yet before you try to attach an event to it?
i.e, between these two lines?
container.innerHTML = temp_innerHTML;
var $leftButton = $('#leftButton');
In which case, perhaps you want to attach the events with .live(), http://api.jquery.com/live/