Jquery offset property unreadable error - javascript

I'm using JavaScript and jQuery to create a horizontal scrolling iframe document using absolute positions for the iframes to make them appear side by side. I'm using a short script based of a jsFiddle I found that displays the co-ords of an element in the top left of the screen and they change as the page is scrolled. I have created my own implementation of this and tried to get it working, but I'm getting an error when I load the site telling me that the top property of an undefined variable cannot be read, even though the first thing I'm doing is defining it. I've looked at all of my code and I can't see why this would be the case, I've got the right jQuery scripts added and I'm defining the variable before it's being used as is the norm. The fiddle I'm basing this off can be found here: http://jsfiddle.net/hxRPQ/22/
The HTML I have:
<!DOCTYPE html>
<html>
<head>
<title>Test 33</title>
<link href="base.css" rel="stylesheet" type="text/css">
<script src="./jquery/jquery.min.js" type="text/javascript"></script>
<script src="./jquery/jquery-ui.js" type="text/javascript"></script>
<script src="scroll.js" type="text/javascript"></script>
</head>
<body>
<div class="iFCont">
<iframe src="./HTMLFiles/07.html" class="iF" id="if1" style="left: 5px;"></iframe>
<iframe src="./HTMLFiles/08.html" class="iF2" id="if2" style="left: 1010px;"></iframe>
<iframe src="./HTMLFiles/09.html" class="iF2" id="if3" style="left: 2015px;"></iframe>
</div>
<div class="output"></div>
</body>
</html>
The js file:
function scroll()
{
var if1 = $("if1");
var ofs = if1.offset();
var posX = ofs.top - $(window).scrollTop();
var posY = ofs.left - $(window).scrollLeft();
$(".output").text("top:" + posY + ", left:" + posX);
}
$(document).ready(function a()
{
$(window).scroll(scroll);
});
and my CSS for reference:
body
{
overflow-x: scroll;
overflow-y: scroll;
}
.iF
{
width: 1000px;
height: 1350px;
position: absolute;
}
.iF2
{
width: 1000px;
height: 1350px;
position: absolute;
}
.iFCont
{
display: inline-block !important;
overflow-x: hidden !important;
}
.output
{
position: fixed;
top: 0px;
left: 0px;
}

You need to fix your selector:
var if1 = $("if1"); // Look for 'if1' tag
Should be:
var if1 = $("#if1"); // Look for an element with 'if1' id

Related

Smoothly scale an img and automatically scrollIntoView

I am trying to set up a basic functionality to smoothly toggle an img on click from being longer than screen to being on a display (fit to window size) (back and forth). It kinda works already using percentages etc.
My issue is I'd like to have a smooth animated transition between the 2 states but the img is being brutally scaled.
Also whenever I try to work with "transition" or "animation", when the img come back to its original size, it will block the scrolling. Same issue happened after I tried to use keyframes.
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<style>
img {
margin: auto;
display: block;
padding: 2%;
width: 90vw;
box-sizing: border-box;
}
.scaled {
width: auto;
height: 100vh;
}
</style>
</head>
<body>
<img class="item" src="images/kitten1.png">
<img class="item" src="images/kitten2.png">
<img class="item" src="images/kitten3.png">
</body>
<script>
$(".item").click(function() {
$(this).toggleClass('scaled');
$(this).scrollIntoView();
});
</script>
</html>
Also I'd like to have the window view (by that I mean the location of the scrolling on the page) centered on the img whenever it is scaled. I am currently trying to use scrollIntoView for that purpose but nothing seems to happen.
Thank you in advance. First time posting here. I don't feel like this should be too difficult but will probably be on a different level than what I can figure out for now ଘ(੭ˊᵕˋ)੭ ̀ˋ
Also tried the following, but the img stay stuck at 90vw and 100vh ...
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<style>
img {
margin: auto;
display: block;
padding: 2%;
width: 90vw;
box-sizing: border-box;
object-fit: contain;
}
</style>
</head>
<body>
<img class="item" src="images/kitten1.png">
<img class="item" src="images/kitten2.png">
<img class="item" src="images/kitten3.png">
</body>
<script>
$(".item").click(function() {
if ($(this).hasClass('scaled')) {
$(this).animate({
height: "none",
width: "90vw"
}, 1000);
$(this).removeClass('scaled');
}
else {
$(this).animate({
width: "none",
height: "100vh"
}, 1000);
$(this).addClass('scaled');
}
});
</script></html>
To scroll to clicked item, use $(this)[0].scrollIntoView(); because .scrollIntoView() is JavaScript function, not jQuery.
Smooth scale (transition).
CSS does not support from auto width to specific width or the same to height transition. Reference: 1, 2
Option 1. Use one side instead.
You can use max-height or max-width only. The good thing is you write less JavaScript and CSS responsive (media query) also supported without any addition. Bad thing is it just only support one side (width or height).
Full code:
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<style>
img {
margin: auto;
display: block;
padding: 2%;
max-width: 100vw;
box-sizing: border-box;
transition: all .3s;
}
.scaled {
max-width: 50vw;
}
</style>
</head>
<body>
<img class="item" src="images/kitten1.png">
<img class="item" src="images/kitten2.png">
<img class="item" src="images/kitten3.png">
</body>
<script>
$(".item").click(function() {
$(this).toggleClass('scaled');
$(this)[0].scrollIntoView({
behavior: "smooth"
});
});
</script>
</html>
See it in action
Option 2. Use JavaScript.
The code below will be use a lot of JavaScript to make CSS transition work properly from width to height. Good thing: of cause support transition between width and height. Bad thing: CSS media query for responsive image will not work properly. Need more JS for that.
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<style>
img {
margin: auto;
display: block;
padding: 2%;
box-sizing: border-box;
transition: all .3s;
height: auto;
width: 90vw;
}
.scaled {
height: 100vh;
width: auto;
}
</style>
</head>
<body>
<img class="item" src="images/kitten1.png">
<img class="item" src="images/kitten2.png">
<img class="item" src="images/kitten3.png">
</body>
<script>
$(window).on("load", function() {
// wait until all images loaded.
// loop each <img> that has class `item` and set height.
$('img.item').each((index, item) => {
$(item).attr('data-original-height', $(item)[0].offsetHeight);
$(item).css({
'height': $(item)[0].offsetHeight
});
});
});
$(".item").click(function() {
if ($(this).hasClass('scaled')) {
// if already has class `scaled`
// going to remove that class after this.
if ($(this).attr('data-scaled-width') === undefined) {
// get and set original width to data attribute.
$(this).attr('data-scaled-width', $(this)[0].offsetWidth);
}
$(this).css({
'height': $(this).data('originalHeight'),
'width': ''
});
$(this).removeAttr('data-original-height');
$(this).removeClass('scaled');
} else {
// if going to add `scaled` class.
if ($(this).attr('data-original-height') === undefined) {
// get and set original height to data attribute.
$(this).attr('data-original-height', $(this)[0].offsetHeight);
}
$(this).css({
'height': '',
'width': $(this).data('scaledWidth')
});
$(this).removeAttr('data-scaled-width');
$(this).addClass('scaled');
// check again to make sure that width has been set.
if ($(this)[0].style.width === '') {
setTimeout(() => {
console.log($(this)[0].style.width);
$(this).css({
'width': $(this)[0].offsetWidth
});
console.log('css width for image was set after added class.');
}, 500);// set timeout more than transition duration in CSS.
}
}
$(this)[0].scrollIntoView({
behavior: "smooth"
});
});
</script>
</html>
See it in action

How to get size of div based on class?

I have the following HTML file that currently has nothing in it except some div class objects that are specified by CSS styles. If I open this web page and inspect the elements in Chrome they are the sizes that I want them to be. What I am wondering is if I can access those sizes via javascript.
HTML File:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>TEST</title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<style type="text/css">
.camp_cont {
float: left;
width: 45%;
height: 50%;
position: relative;
}
.camp_cont_select {
float: left;
width: 45%;
height: 50%;
position: relative;
fill: #800;
}
.sub_camp_cont {
float: left;
width: 15%;
height: 50%;
position: relative;
margin: 10px 25px;
fill: #800;
}
</style>
</head>
<body>
<div class="camp_cont", id="cpa_perf"></div>
<div class="camp_cont", id="ctr_perf"></div>
<div class="sub_camp_cont", id="as_perf"></div>
<div class="sub_camp_cont", id="f_perf"></div>
<div class="sub_camp_cont", id="rh_perf"></div>
<div class="sub_camp_cont", id="rm_perf"></div>
<div class="sub_camp_cont", id="rl_perf"></div>
<div class="sub_camp_cont", id="ul_perf"></div>
<div class="sub_camp_cont", id="rt_perf"></div>
</body>
</html>
I am wondering if I can do something like the following:
x = $("#cpa_perf").width()
Again, when I inspect cpa_perf in Chrome it says its width is 515px. That's what I'm trying to get at
jQuery Width works just fine for this:
x = $("#cpa_perf").width();
alert(x);
JS Fiddle: http://jsfiddle.net/9abcf9d3/
You can use jQuery pretty easily to modify attributes of elements..
$('.classname').css(property, value);
I'm not certain if you are trying to use jQuery or pure javascript.
You're original attempt to get the width of the element should work as long as you're using a jQuery library.
Otherwise, if you just want the width of the element with pure javascript, you can use something like this:
var x = document.getElementById('cpa_perf').offsetWidth;
If you are including a jQuery library then the following should work:
var x = $("#cpa_perf").width()
Additional Note: Make sure that the script isn't called before the DOM element is written to the page as well. For example:
$(document).ready(function (){
var x = $("#cpa_perf").width();
console.log(x);
}) ;

horizontal slide in html

I know that this is a frequent question but I can't find an answer that matches my requirements.
In short, I want to horizontal slide a box from the right-side (insivisible) part of the screen to the left and then from the left back to the right.
The html/css/js below demonstrates what I want:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<style type="text/css">
#box-1 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 80em;
background-color: #f00;
}
#box-2 {
position: absolute;
top: 0;
right: -100%;
width: 100%;
height: 4em;
background-color: #0f0;
}
#viewport {
overflow: hidden;
position: relative;
height: 100em;
}
#container {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
</style>
</head>
<body>
<div id="viewport">
<div id="container">
<div style="position: relative">
<div id="box-1">
</div>
<div id="box-2">
</div>
</div>
</div>
</div>
<script type="text/javascript">
$("#box-1").click(function () {
$(this).parent().parent().animate({left: "-100%"});
});
$("#box-2").click(function () {
$(this).parent().parent().animate({left: "0"});
});
</script>
</body>
</html>
Now, everything might seem fine except for two important things:
I do not want to specify a height for the outer viewport. I would like this viewport to adopt automatically the height of the highest item in the container
this code does not do what I want if you scroll down at the bottom of the page when the red box is visible and click on it: the green box comes within the viewport but it is scrolled at the bottom. I would like the green box to come in view directly. As a bonus, it would be nice if once the green box is in view, if I click on it, the red box came back in view at its previous scroll position.
Of course, this example has lots of other limitations (the default animation function provided by jquery sucks, etc...) but I believe I can fix them later.
Given the limitations of the solution I have posted here, I suspect that I did not chose the right approach but I have no idea on where I should start.
You need to scroll to the top of the div when you click on the box.
Here's the code:
$(function() {
var vheight = Math.max($("#box-1").height(), $("#box-2").height());
$("#viewport").height(vheight)
});
$("#box-1").click(function () {
$(this).parent().parent().animate({left: "-100%"});
$('html,body').animate({
scrollTop: $("#box-1").offset().top
});
});
$("#box-2").click(function () {
$(this).parent().parent().animate({left: "0"});
$('html,body').animate({
scrollTop: $("#box-2").offset().top
});
});
I also updated the JS Fiddle: http://jsfiddle.net/Av7P3/1/

How do I achieve 100% [window] height on DIV on iPhone?

I've been trying to achieve 100% [window] height on a DIV for a project that I am working on. It works great in the desktop but when I try to load it using an iPhone 4 or an Android phone, the first div appears to be 100%; however each subsequent DIV appears to be about 50 pixels (just an estimate) short.
I tried setting it through css by doing the following:
<!DOCTYPE html>
<head>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
div#container {
width: 100%;
height: 100%;
}
div#section1 {
width: 100%;
height: 100%;
background-color: blue;
}
div#section2 {
width: 100%;
height: 100%;
background-color: red;
}
</style>
</head>
<body>
<div id="container>
<div id="section1">
. . .
</div>
<div id="section2">
. . .
</div>
</div>
</body>
</html>
I also tried setting it through javascript with jQuery using something similar to:
var browser_width = $(window).width();
var browser_height = $(window).height();
$(document).ready(function(){
$("#section1, #section2").css("width", browser_width, "height", browser_height);
});
but it behaves the same way as the CSS. Can anyone point me in the right direction?
you have to set the right format to the .css() method in your script
$(document).ready(function(){
$("#section1, #section2").css({
"width" : browser_width,
"height" : browser_height
}); //css
});
UPDATE : also I noticed you forgot to close your first css declaration
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
... the closing bracket } is missing.
Side note : I wouldn't set dimension properties to the html and/or body tags to avoid unexpected results ... unless you know what you are doing

How to use current div width/height as minimum width/height?

How can I use the current width/height (which are both specified in percentage 100%) as the minimum width/height?
Here is a try:
<!doctype html>
<html>
<head>
<title>Layout</title>
<script>
var myDiv = document.body;
var curWidth = myDiv.style.width;
var curHeight = myDiv.style.height;
myDiv.style.minWidth = curWidth;
myDiv.style.minHeight = curHeight;
myDiv = document.getElementById('wrapper1');
var curWidth = myDiv.style.width;
var curHeight = myDiv.style.height;
myDiv.style.minWidth = curWidth;
myDiv.style.minHeight = curHeight;
</script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
height: 100%;
}
#wrapper1 {
width: 100%;
height: 100%;
}
#wrapper2 {
width: 8%;
height: 100%;
float: left;
}
#wrapper3 {
width: 92%;
height: 100%;
float: left;
}
</style>
</head>
<body>
<div id="wrapper1">
<div id="wrapper2">
Wrapper
</div>
<div id="wrapper3">
Wrapper
</div>
</div>
</body>
</html>
Trying to set min width/height of all divs to be the current width/height (which are both 100% by css) using Javascript (or using only css if possible)
Be aware of the fact that myDiv.style.height does not return the height of an element if that was set through CSS, but only if the div looked something like <div style="height: 10px"></div>. You should use:
var curHeight = myDiv.offsetHeight;
var curWidth = myDiv.offsetWidth;
Edit: Oh, and you need to move your script tag at the end of your html, or you won't be able to select wrapper1 (or in a different file?).
Here is references on offsetHeight and offsetWidth. Here
That is the only problem I see with your approach assuming you do a document.write to insert the retrieved css values.
As far as I understand, If you dont specify the width and height of a div by default it will always take it from its enclosing div.
example:
<body>
<div id="wrapper1">
<div id="wrapper2">
Wrapper
</div>
<div id="wrapper3">
Wrapper
</div>
</div>
</body>
<style>
#wrapper1 {
width: 100%;
height: 100%;
}
</style>
This will apply width and height both as 100% to all 3 divs in wrapper1, wrapper2, wrapper3

Categories