Ok so i have one div and inside it a canvas:
my html file:
<div id="container">
<canvas id="game" width="600px" height="2000px">
</div>
my css file:
#game{
background: -moz-linear-gradient(top, #00b7ea0%, #008793 14%, #04b9b 43%, #1f00ea 74%, #008793 89%, #009ec3 100%);
bottom: 0px;
position: absolute;
}
#container{
position: relative;
width:600px;
height:500px;
}
And here is my question:
What code should be used in a javascript file, if i want to control the bottom property of #game?
What i mean i that i want the user to press a botton, e.g. W(=87), and the bottom property to change negative or possitive direction is irrelevant, the need is to make a code that when a key is pressed the magnitude of the bottom property will change.
I hope that i described the probel well, if more info is needed please ask...
Looking forward for a reply :-)
If you want to set the bottom property dynamically you can do this as follows-
function setHeight (bottomValue) {
if (typeof bottomValue === "number") {
bottomValue = bottomValue + "px";
}
var gameElement = document.getElementById("game");
if (gameElement) {
gameElement.style.bottom = bottomValue;
}
}
See https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.style
Alternatively using jQuery-
$('#game').css('bottom', bottomValue);
See http://api.jquery.com/css/
Using jQuery you could add the following code to your key press handler:
var newBottomValue = 13;
$("#game").css("bottom", newBottomValue);
If you are not using jQuery I would do something like:
var newBottomValue = 13;
document.getElementById("game").style.bottom = newBottomValue + "px";
Related
I have a scrollable div container fits multiple "pages" (or div's) inside of it's container.
My goal is to, at any given moment, figure out where inside my red container does it reach the top of my scrollable container. So it can be a constant on scroll event, or a button that triggers this task.
So for example. If I have a absolute div element inside one of my red boxes at top:50px. And if I scroll to where that div element reaches the top of my scrollable container. The trigger should say that I am at 50px of my red container.
I'm having a hard time grasping how to accomplish this but I've tried things like:
$("#pageContent").scroll(function(e) {
console.log($(this).scrollTop());
});
But it doesn't take into account the separate pages and I don't believe it it completely accurate depending on the scale. Any guidance or help would be greatly appreciated.
Here is my code and a jsfiddle to better support my question.
Note: If necessary, I use scrollspy in my project so I could target which red container needs to be checked.
HTML
<div id="pageContent" class="slide" style="background-color: rgb(241, 242, 247); height: 465px;">
<div id="formBox" style="height: 9248.627450980393px;">
<div class="trimSpace" style="width: 1408px; height: 9248.627450980393px;">
<div id="formScale" style="width: 816px; -webkit-transform: scale(1.7254901960784315); display: block;">
<form action="#" id="XaoQjmc0L51z_form" autocomplete="off">
<div class="formContainer" style="width:816px;height:1056px" id="xzOwqphM4GGR_1">
<div class="formContent">
<div class="formBackground">
<div style="position:absolute;top:50px;left:100px;width:450px;height:25px;background-color:#fff;color:#000;">When this reaches the top, the "trigger" should say 50px"</div>
</div>
</div>
</div>
<div class="formContainer" style="width:816px;height:1056px" id="xzOwqphM4GGR_2">
<div class="formContent">
<div class="formBackground"><div style="position:absolute;top:50px;left:100px;width:450px;height:25px;background-color:#fff;color:#000;">This should still say 50px</div></div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
CSS
#pageContent {
position:relative;
padding-bottom:20px;
background-color:#fff;
z-index:2;
overflow:auto;
-webkit-overflow-scrolling: touch;
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
}
#formBox {
display: block;
position: relative;
height: 100%;
padding: 15px;
}
.trimSpace {
display: block;
position: relative;
margin: 0 auto;
padding: 0;
height: 100%;
overflow: hidden;
}
#formScale::after {
display: block;
content:'';
padding-bottom:5px;
}
#formScale {
position:relative;
width:816px;
margin:0;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
transform-origin: 0 0;
-ms-transform-origin: 0 0;
}
.formContainer {
position:relative;
margin : 0 auto 15px auto;
padding:0;
}
.formContent {
position:absolute;
width:100%;
height:100%;
}
.formBackground {
width:100%;
height:100%;
background-color:red;
}
JS
var PAGEWIDTH = 816;
$(window).resize(function (e) {
zoomProject();
resize();
});
function resize() {
$("#pageContent").css('height', window.innerHeight - 45 + 'px');
}
function zoomProject() {
var maxWidth = $("#formBox").width(),
percent = maxWidth / PAGEWIDTH;
$("#formScale").css({
'transform': 'scale(' + percent + ')',
'-moz-transform': 'scale(' + percent + ')',
'-webkit-transform': 'scale(' + percent + ')',
'-ms-transform': 'scale(' + percent + ')'
});
$(".trimSpace").css('width', (PAGEWIDTH * percent) + 'px');
$("#formBox, .trimSpace").css('height', ($("#formScale").height() * percent) + 'px');
}
zoomProject();
resize();
EDIT:
I don't think I am conveying a good job at relaying what I want to accomplish.
At the moment there are two .formContainer's. When I scroll #pageContainer, the .formContainer divs move up through #pageContainer.
So what I want to accomplish is, when a user clicks the "ME" button or #click (as shown in the fiddle below), I'd like to know where in that particular .formContainer, is it touching the top of #pageContainer.
I do use scroll spy in my real world application so I know which .formContainer is closest to the top. So if you just want to target one .formContainer, that is fine.
I used these white div elements as an example. If I am scrolling #pageContainer, and that white div element is at the top of screen as I am scrolling and I click on "ME", the on click trigger should alert to me that .formContainer is touching the top of #pageContainer at 50px from the top. If, the the red container is just touching the top of #pageContainer, it should say it is 0px from the top.
I hope that helps clear up some misconception.
Here is an updated jsfiddle that shows the kind of action that I want to happen.
I am giving this a stab because I find these things interesting. It might just be a starting point since I have a headache today and am not thinking straight. I'd be willing to bet it can be cleaned up and simplified some.
I also might be over-complicating the approach I took, getting the first visible form, and the positioning. I didn't use the getBoundingClientRect function either.
Instead, I approached it trying to account for padding and margin, using a loop through parent objects up to the pageContent to get the offset relative to that element. Because the form is nested a couple levels deep inside the pageContent element you can't use position(). You also can't use offset() since that changes with scroll. The loop approach allowed me to factor the top margin/padding in. I haven't looked at the other solutions proposed fully so there might be a shorter way to accomplish this.
Keeping in mind that the scale will affect the ACTUAL location of the child elements, you have to divide by your scale percentage when getting the actual location. To do that I moved the scalePercentage to a global var so it was usable by the zoom function and the click.
Here's the core of what I did. The actual fiddle has more logging and junk:
var visForm = getVisibleForm();
var formTop = visForm.position().top;
var parents = visForm.parentsUntil('#pageContent');
var truOffset = 0;
parents.each(function() {
truOffset -= $(this).position().top;
});
// actual location of form relative to pageContent visible pane
var formLoc = truOffset - formTop;
var scaledLoc = formLoc / scalePercent;
Updated Fiddle (forgot to account for scale in get func): http://jsfiddle.net/e6vpq9c8/5/
If I understand your question correctly, what you want is to catch when certain descendant elements reach the top of the outer container, and then determine the position of the visible "page" (div with class formContainer) relative to the top.
If so, the first task is to mark the specific elements that could trigger this:
<div class='triggerElement' style="position:absolute;top:50px;left:100px;width:450px;height:25px;background-color:#fff;color:#000;">When this reaches the top, the "trigger" should say 50px"</div>
Then the code:
// arbitrary horizontal offset - customize for where your trigger elements are placed horizontally
var X_OFFSET = 100;
// determine once, at page load, where outer container is on the page
var outerContainerRect;
$(document).ready(function() {
outerContainerRect = $("#pageContent").get(0).getBoundingClientRect();
});
// when outer container is scrolled
$("#pageContent").scroll(function(e) {
// determine which element is at the top
var topElement = $(document.elementFromPoint(outerContainerRect.left+X_OFFSET, outerContainerRect.top));
/*
// if a trigger element
if (topElement.hasClass("triggerElement")) {
// get trigger element's position relative to page
console.log(topElement.position().top);
}
*/
var page = topElement.closest(".formContainer");
if (page.length > 0) {
console.log(-page.get(0).getBoundingClientRect().top);
}
});
EDIT: Changed code to check formContainer elements rather than descendant elements, as per your comment.
http://jsfiddle.net/j6ybgf58/23/
EDIT #2: A simpler approach, given that you know which formContainer to target:
$("#pageContent").scroll(function(e) {
console.log($(this).scrollTop() - $("#xzOwqphM4GGR_1").position().top);
});
http://jsfiddle.net/rL4Ly3yy/5/
However, it still gives different results based on the size of the window. This seems unavoidable - the zoomProject and resize functions are explicitly resizing the content, so you would have to apply the inverse transforms to the number you get from this code if you want it in the original coordinate system.
I do not fully understand what it is that you are needing, but if i am correct this should do the trick
$("#pageContent").scroll(function(e) {
// If more then 50 pixels from the top has been scrolled
// * if you want it to only happen at 50px, just execute this once by removing the scroll listener on pageContent
if((this.scrollHeight - this.scrollTop) < (this.scrollHeight - 50)) {
alert('it is');
}
});
ScrollHeight is the full height of the object including scrollable pixels.
ScrollTop is the amount of pixels scrolled from the top.
You can use waypoints to detect the position of divs based on where you're scrolling.
Here is a link to their official website's example: http://imakewebthings.com/waypoints/shortcuts/inview/
I have a progressbar on my website and this is a part of its css:
.progress-bar span {
display: inline-block;
height: 25px;
width: 78%; //the actual position
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
//other css
}
I have to change the width that indicates the position of the progression (the line you see here). This is the first time I use progress bars and I have no idea about how to setup the javascript code.
Any advice? jsfiddle
Here is the way without jQuery
HTML
<div class="progress-bar" align="left">
<span id="prog"></span>
</div>
JS:
var elem = document.getElementById("prog");
elem.style.width = "88%";
I'd recommend using jQuery to make your javascript calls much simpler. You can download the latest version here: http://jquery.com/download/
First, include the jQuery file in the head of your html like this:
<head>
...
<script type="text/javascript" src="<location of file>jquery-1.10.2.min.js"></script>
...
</head>
Then within your own javascript code, you can move the position of the progress bar like so:
jQuery('.progress-bar scan').css('width', <desired width>);
Hopefully that helps.
You can use:
document.querySelectorAll('.progress-bar span').forEach(function(elem) {
elem.style.width = '<YOUR WIDTH>';
});
no jQuery
I just incremented the width this way:
function increment(){
var width = document.getElementById('progressbar').clientWidth;
var divArray = document.getElementById('progressbar');
if(width<500){
var largura = width+10;
divArray.style.width = largura+'%';
setTimeout("increment()",1000);
}
else{
window.location.href = "http://www.google.com/";
}
}
And does it every second so it will be incremented every second but u can change it the way you want.
I am attempting to create a function where by a button is clicked and the background image is selected for a div. Here is what I have started below but it does not seem to work can anyone point out where Im going wrong... :)
<style type="text/css">
#txt{
width: auto;
height: auto;
border: solid #000;
}
</style>
<script type="text/javascript">
function backg1(){
var test = new string ();
test = document.getElementById('txt');
test.style.backgroundImage="url('cloud.jpg')";
}
</script>
</head>
<body>
<div id="txt">
<input type="button" value="BG1" onclick="backg1()"/>
</div>
Since your <div> originally contains nothing but the button input, it has no size outside the boundaries of that button. You will need to set an explicit width and height (along with position: relative) to see the background.
I would recommend setting them to the same dimensions as your image.
/* in the CSS */
#txt{
/* use the width, height of your image */
width: 400px;
height: 250px;
position: relative;
border: solid #000;
}
Or if you need to set them dynamically:
function backg1() {
test = document.getElementById('txt');
test.style.backgroundImage="url('cloud.jpg')";
// <div> needs a width & height for the background image to be visible outside the
// bounds of the one element contained in the div.
test.style.width = "400px";
test.style.height = "250px";
test.style.position = "relative";
}
There is a javascript error at this line.
var test = new string ();
You can make it like var test = new String(); Then it should work.
Moreover, i observed that you are creating string object and then you are overriding with DOM object. Not sure why it so like that. You can just create a variable like var test;
I'm working on modifying a website which has a chart of FAQs which have has a question link.
If question link is clicked, it reveals the answer in a drop down.
My goal is to swap out a plus icon image with a minus icon next to the linked text for the drop down reveal action.
the FAQs use Spry Collapsible Panel (sprycollapsiblepanel.js) to manage the show/hiding from the link. before I go about modifying the code in the javascript source code, I was wondering if there was an easier way of doing this through dreamweaver someone might be aware of.
thanks in advance.
UPDATE:
the html calling the show/reveal actions are:
<div class="CollapsiblePanel">
<div id="CollapsiblePanel1" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="1">Fax to E-Mail</div>
<div class="CollapsiblePanelContent">Here is the text content as it relates to Fax to E-Mail</div>
</div>
</div>
The construct the actions for the drop down, Spry requires the following at the bottom of the page:
<script type="text/javascript">
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1", {contentIsOpen:false});
var CollapsiblePanel2 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel2", {contentIsOpen:false});
var CollapsiblePanel3 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel3", {contentIsOpen:false});
</script>
In SpryCollapsiblePanel.css, amend the following style rules:
.CollapsiblePanelTab {
font: bold 0.7em sans-serif;
background-color: #DDD;
border-bottom: solid 1px #CCC;
margin: 0px;
padding: 2px 2px 2px 25px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
}
This increases the padding on the left to make room for the image.
Then add the images to the following rules:
.CollapsiblePanelOpen .CollapsiblePanelTab {
background-color: #EEE;
background-image: url(images/plus.gif);
background-position:left top;
background-repeat: no-repeat;
}
.CollapsiblePanelClosed .CollapsiblePanelTab {
background-image: url(images/minus.jpg);
background-position:left top;
background-repeat: no-repeat;
/* background-color: #EFEFEF */
}
THe plug ins adds a class to each panel title when is opened and when is closed, these are "CollapsiblePanelOpen" and "CollapsiblePanelClosed" accordingly. With that you can use CSS to add the +- effect with a background image perhaps.
onclick switch an image then onclick of something else switch back to + sign
If it's an image, and you don't want to change the source code, and you want to use javascript, you'll need to change the src property of the image.
// Grab the img object from the DOM
var img = document.getElementById("theImageId");
// If it's the plus pic, switch for minus, and vice versa.
if(img.src == "plus.png") {
img.src = "minus.png";
}
else {
img.src = "plus.png";
}
You can put this code in wherever you need (in an onclick or a function or whatever). Also, the URLs for the images will obviously need to be updated.
Easy fix with some simple JavaScript.
Add the following script:
<script type="text/javascript">
<!--
function name ()
{
var img = document.getElementById("imgid");
if (img.src == "plus.png") {
img.src = "minus.png";
}
else {
img.src = "plus.png";
}
}
//-->
</script>
When that's done look at the div defining the collapsible panel. It looks something like this:
<div id="CollapsiblePanel1" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0">Name <img src="url.com/minus.png" id="imgid"></div>
<div class="CollapsiblePanelContent">content</div>
All you need for this to work is to add onclick="name();" to the syntax:
<div id="CollapsiblePanel1" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0" onclick="name();">Name <img src="url.com/minus.png" id="imgid"></div>
<div class="CollapsiblePanelContent">content</div>
can someone please help me make a floating menu in prototypeJS? I found documentation to do it in jQuery, like here: net.tutsplus.com/tutorials/html-css-techniques/creating-a-floating-html-menu-using-jquery-and-css/ and here: manos.malihu.gr/jquery-floating-menu, but can't figure out where to start for prototypeJS.
So I got it work, sorta. I found documentation here. Here's my code:
<html>
<head>
<title>Prototype examples</title>
<script src="lib/prototype/prototype.js" type="text/javascript"></script>
<script type="text/javascript">
Event.observe(window,'scroll', function(evt){
$('movable').setStyle({ top: 8 + document.viewport.getScrollOffsets().top + 'px' });
});
</script>
<style type="text/css">
#container {
background:#000;
padding:100px 10px 10px;
}
#movable {
position: absolute;
float:left;
width:18.5%;
height: 300px;
background-color: red;
}
#firstDiv {
background:#ccc;
float:right;
height:1200px;
width:80%;
}
.clear-both {clear:both;}
</style>
</head>
<body>
<div id="container">
<div id="movable"> Floating menu</div>
<div id="firstDiv">right</div>
<div class="clear-both"></div>
</div>
</body>
</html>
So now I'm trying to get it so it's not choppy when you scroll, and so the menu doesnt start moving until the scroll has moved down to like 100px vertically or something, so it hooks into place.
Figured it out with some help. Used this tutorial: http://jqueryfordesigners.com/fixed-floating-elements/
But changed it up to use Prototype JS syntax. Here's the code:
var topMenu = $('ELEMENT').cumulativeOffset().top;
Event.observe(window,'scroll', function(evt) {
// what the y position of the scroll is
var y = document.viewport.getScrollOffsets().top;
// console.log(y) // console
// check which browser it's using
if (false) { // newer browsers, could be "false"
if (y >= topMenu) {
// if so, ad the fixed class
$('ELEMENT').addClassName('fixed');
} else {
// otherwise remove it
$('ELEMENT').removeClassName('fixed');
}
}
else { // older browsers, iPad, iPhone
if (y >= topMenu) {
$('ELEMENT').setStyle({ top: (0 + document.viewport.getScrollOffsets().top - topMenu) + 'px' });
}
else {
$('ELEMENT').setStyle({ top: 0 + 'px' });
}
}
});
If you want it to not look choppy, you're going to have to use an animation library. If you're using Prototype, then your best bet is to look into Scriptaculous at http://script.aculo.us/
I'd also recommend using Element.cumulativeOffset on DOM load to get the absolute top offset of the menu. Then each time you scroll the menu element, include this initial padding so the menu doesn't just latch on to the top of the viewport.
One more idea too, if you don't particularly want to use an animation library, you could try making the menu position: fixed. You'll still have to keep updating the position for IE though, as it doesn't support fixed positioning ...