Jump to content

Trying to add javascripts into div and never seems to work


THRobinson

Recommended Posts

Hey there, I'm a newbie, still learning HTML5/CSS3 and working on a small project with some java script for an online course. Not having much luck when it comes to dropping it into a div container... original scripts are in a main container, however, pages I'm doing have a main container centred on screen, with containers inside (header, footer, main, etc) since I've learned that tables are now no longer used for the most part. I found that if I changed the css position from 'absolute' like in the examples we get to 'relative' the stuff at least shows up inside the div I want it to instead of the top left corner of the entire page. That being said, the sample I'm working on now, when I click the squares to move them, they jump down/over about 150px, which it doesn't do when set to 'absolute'. I apologize since I know it makes sense in my head but I'm certain makes no sense when reading it. :D Basically, drag/drop elements when the css is set to 'absolute' work fine, but appear top left of the screen. When set to 'relative' they appear inside the div where I want them to be, but, when clicked they jump over and down but still drag/drop... just considerably far from the pointer. Is there a trick I'm missing? As mentioned, I have a main container div, set at 750px wide, margin-left/right set to auto so appears centre. I then have divs set up like header, footer, body, that I put inside the container div. I'm trying to put a script inside the body. Should I zip/attach or just copy/paste the code? I have an html, two css sheets, and jpgs (background art). Or does someone have a suggestion to try without uploading anything? Thanks

Link to comment
Share on other sites

Hmm... the samples we have have the script tags, but, up in the header. This what I have... trying to make a page look like an old fridge, doing that 'Fridge Poetry' that was popular like 10+ yrs ago... just to show an example of the drag/drop with small boxes of words. Samples given aren't in a container div like mine so... maybe I have them in the wrong spot as a result? W3C Markup Validation passes on this and the css files.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Project 7</title><script type="text/javascript">var object = null;var cX =  0;var cY = 0;function initPage () {document.onmousedown = pickIt;document.onmousemove = dragIt;document.onmouseup = dropIt;}function pickIt(evt) {var objectID = (evt.target) ? evt.target.id : ((evt.srcElement) ? evt.srcElement.id : null);var evt = (evt) ? evt : ((window.event) ? event : null);if (objectID.indexOf('chip')!=-1)  object = document.getElementById(objectID);if (object) {  object.style.zIndex = 100;  cX = evt.clientX - object.offsetLeft;  cY = evt.clientY - object.offsetTop;  return;}else {  object = null;  return;}}function dragIt(evt) {evt = (evt) ? evt : ((window.event) ? event : null);if (object) {  object.style.left = evt.clientX - cX + 'px';  object.style.top = evt.clientY - cY + 'px';  return false;}}function dropIt() {if (object) {  object.style.zIndex = 0;  object = null;  return false;}}</script><style type="text/css"> @import url("main.css");</style><style type="text/css"> @import url("fridgepoetry.css");</style></head><body onload="initPage()"><div class="container"><div class="header"><h1 id="title">Project | 7</h1></div><div class="fridge"><div id="chip1" class="chip">One</div><div id="chip2" class="chip">Ring</div><div id="chip3" class="chip">to</div><div id="chip4" class="chip">Rule</div><div id="chip5" class="chip">Them</div><div id="chip6" class="chip">All</div></div><div class="footer"><div class="links"><h2><a href="index.html">Home</a></h2></div><div class="links"><h2><a href="java2.html">Java | 2</a></h2></div></div></div></body></html>

Edited by THRobinson
Link to comment
Share on other sites

This was what confused me and a few others I expect.

original scripts are in a main container
I still don't know what it means, but now I know it doesn't matter. You haven't posted your CSS, so I'll make some guesses. Some of this you may have already done. No biggie. 1. Position the chips absolutely. Position the fridge relatively. That will make sure the chips are positioned relative to the fridge, not the window. 2. Give the chips initial coordinates. (For example, position them randomly across the face of the fridge). If you don't, they will initially stack up at the 0,0 position of the fridge. 3. Don't assign the fridge coordinates (unless you want to). Relative positioning this way only affects the contents, not the fridge itself. 4. Give the fridge a defined height or it will have no height at all. When the chips are removed from the "flow," they don't affect the size of their container.
Link to comment
Share on other sites

Well, class is online, and has sample pages... but the sample pages we get are very basic. No headers, footers, no div container with stuff inside etc... just plain text starting at the top-left corner on a white page page with a sample script. Once you grab the scrip and start putting it into a designed page... that's when stuff seems to be breaking for me. I have 2 css files, a main css, and a css just for the chips. I have a div setup for the centre of my screen, with the fridge set as a background image. Hopefully the CCS's aren't too big to post.... thread is already long from the last code. :D As mentioned, everything passes verification... though I'm pretty certain there are better ways to do what I'm doing. All part of learning I guess. Fridgepoetry.css

@charset "utf-8";/* CSS Document */.chip {position:relative;padding: .5em;border: 1px solid #333;border-right: 3px solid #333;border-bottom: 3px solid #333;background-color: #FFC;cursor: move;z-index: 0;height: 1em;width: 5em;text-align:center;}#chip1 {top: 5px;left: 5px}#chip2 {top: 5px;left: 25px}#chip3 {top: 10px;left: 5px}#chip4 {top: 10px;left: 55px}#chip5 {top: 15px;left: 10px}#chip6 {top: 15px;left: 25px}

Main.css

@charset "utf-8";/* CSS Document */a:link {color: #333;text-decoration: none;}a:visited {color: #333;text-decoration: none;}a:hover {color: #F60;text-decoration: none;}a:active {color: #F60;text-decoration: none;}@font-face {    font-family: 'BebasNeueRegular';    src: url('fonts/BebasNeue-webfont.eot');    src: url('fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),		 url('fonts/BebasNeue-webfont.woff') format('woff'),		 url('fonts/BebasNeue-webfont.ttf') format('truetype'),		 url('fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');    font-weight: normal;    font-style: normal;}body {background-image: url(images/background.jpg);background-repeat: repeat;background-position: center;margin: 0;padding: 0;font-family: Arial, Helvetica, sans-serif;font-size: 0.9em;color: #333;}h1 {font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif;font-size: 6em;padding-bottom: 0em;padding-top: 0em;}h2 {font-family: Arial, Helvetica, sans-serif;font-size: 2em;text-align: center;}h3 {font-family: Arial, Helvetica, sans-serif;font-size: 2em;padding-top: .25em;}#title {font-weight: normal;font-style: normal;text-align: center;color: #333;}#key {  visibility: visible;  position: relative;  top: 1em;}/* ~~ this fixed width container surrounds the other divs ~~ */.container {width: 750px;margin-left: auto;margin-right: auto;margin-top: 10px;}.header {width: 750px;height: 100px;background-color: #CCC;opacity: 0.6;}.body {width: 750px;height: 300px;background-color: #CCC;opacity: 0.4;}.fridge {width: 750px;height: 600px;background: url(images/fridge.jpg) no-repeat;}.doorback {width: 750px;height: 600px;background: url(images/door.jpg) no-repeat;padding-left: 2em;padding-bottom: 0;}.footer {width: 750px;height: 75px;background-color: #CCC;opacity: 0.6;}.links {width: 50%;height: 100px;float: left;}

Link to comment
Share on other sites

More or less as I explained. The difference is that you used relative coordinates for the chips, and they won't work when the positioning is absolute. So first I had to convert things from ems to px so I could add the border and padding correctly. Then I translated your relative coordinates into absolute ones. It's an approximation, so make changes as you like. Pts might work better than px. Just be consistent or the math doesn't work. Obviously, if you change the font size, you'll want to change the chip height. With the chips located, now, it was just a matter of changing the positioning mode of .chip and .fridge. Below I've pasted only the values I changed to get you the results I think you want.

.chip {position:absolute;padding: 7px;height: 15px;} #chip2 {top: 38px;}#chip3 {top: 76px;}#chip4 {top: 109px;}#chip5 {top: 147px;}#chip6 {top: 180px;}.fridge {position: relative;}

Link to comment
Share on other sites

That worked! So... the "stuff" going into the area I want needs to be absolute, and the space it's going into needs to be relative? This is the stuff that eats up most of my time trying to figure out, but I guess that's learning. :) Thanks a bunch, I'd have spent easily another hour on it and likely never solved it. Out of curiosity, what caused it to jump across the screen when clicked? I can understand it not appearing correctly or simply not working, but the giant jump across the screen baffles me.

Edited by THRobinson
Link to comment
Share on other sites

So... the "stuff" going into the area I want needs to be absolute, and the space it's going into needs to be relative?
Yeah. If you want to animate something, you need to take it out of the flow. That means positioning, and absolute positioning is easiest to work with. The default behavior is for the coordinates of absolutely positioned elements to be relative to the window. If you want to position them relative to their container, the container needs to have positioning also. You can find this piece of information all over the place, but if you're not looking for it, you'll probably miss it, but even if it is the answer to your problem (as here) it's hard to know what question to ask that leads to this answer. So it's like the answer is hiding in plain sight.
Out of curiosity, what caused it to jump across the screen when clicked? I can understand it not appearing correctly or simply not working, but the giant jump across the screen baffles me.
The math starts with the coordinates of the mouse pointer. If the element you're animating is positioned relative to the window, then there is a 1-1 correspondence between the coordinates of the element and the pointer (adjusting for the position of the pointer relative to the top-left corner of the element). If the element is positioned relative to its container, then you need to add an offset to the mouse coordinates to get the element's coordinates. So what works with one positioning mode will be offset in the other positioning mode. The offset begins (jumps) as soon as you start the animation. After that, the element's movements mimic the pointer movements, but at the offset.
  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...