I've been trying to create a small algorithm that adds a class attr to a specific element if the mouse reaches the X plain half of the browser or more.
I am also going to provide you with a screenshot where I need to use this kind of application.
http://tinypic.com/view.php?pic=2ur101d&s=8#.VVsOR0ai2Uk
As you can see in the image above, if the poster is too far on the right the div that appears on hover stretches out of the browser.
Thats why i need to add that class to move it a bit when the mouse reaches that distance on X.
Here's what i've tried so far but the if condition that I applied does not work.
<!DOCTYPE html>
<html>
<head>
<script>
function readMouseMove(e) {
var result_x = document.getElementById('x_result');
var result_y = document.getElementById('y_result');
result_x.innerHTML = e.clientX;
result_y.innerHTML = e.clientY;
var distance = window.innerWith;
var math = distance / 2;
if (e.clientX >= math) {
result_x.setAttribute('class', 'special');
}
}
document.onmousemove = readMouseMove;
</script>
<style>
.special {
color: red;
}
</style>
</head>
<body>
<h1>Document that reads mouse movement</h1>
<h2 id="x_result">0</h2>
<h2 id="y_result">0</h2>
</body>
</html>
I just refactored your condition, there was a spelling mistake:
if(e.clientX >= window.innerWidth / 2) {
result_x.setAttribute('class','special');
}
Related
I visited theannoyingsite.com and I noticed windows popping up and moving around. (I went there to see if I could get a peek at the source code.)
I am able to do this.
My code is -
<!doctype html>
<html>
<head>
<title>testing123</title>
</head>
<body>
<button id="button">testing123</button>
</body>
</html>
(function() {
var bottomofwin = document.activeElement.clientHeight;
document.getElementById("button").onclick = function() {
var wnd = window.open("about:blank", "test", "height=120px, width=120px");
setInterval(function() {
if(wnd.screenY != bottomofwin) {
wnd.moveBy(0, 100);
}else{
wnd.moveBy(0, -100);
}
}, 2000);
return false;
};
})();
I tried to make a snippet but stackoverflow creates a error. So here is the JSFiddle - https://jsfiddle.net/tLf0aey2/ I want it to bounce around the screen.
Your window movement is just fine. To make your window bounce you need to keep track of its orientation.
Add a variable
var bottomofwin = window.screen.height; // This worked better for me...
var vertical_velocity = 1 // 1 = Down and -1 = Up
Then check whether the popup has hit the upper or lower boundary and change the direction accordingly:
if (wnd.screenY <= 20) {
vertical_velocity = 1
}
if (wnd.screenY >= bottomofwin - 140) {
vertical_velocity = -1
}
Then use vertical_velocity as multiplyer for your moveBy
wnd.moveBy(0, vertical_velocity*100);
Do the same for horizontal.
Here is my prototype https://jsfiddle.net/sr86zb4L/
Maybe you need to adjust the margins a bit.
Then you are one step closer to be really annoying :D
I have an image of a black cat
I want to progressively increase its width and also make the image moving from left to right increasing its own left margin.
I can't understand why the width is increased and the margin-left shows NaN value.
Down here the Html :-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Cat Walk</title>
</head>
<body>
<img id="cat-gif" style="position:absolute;" src="http://www.anniemation.com/clip_art/images/cat-walk.gif">
<script src="main.js"></script>
</body>
Down here the function to make move the cat:-
var catWalk = function() {
var cat = document.getElementById("cat-gif");
cat.setAttribute('width', cat.width+10); //THIS WORKS
cat.setAttribute('marginLeft', cat.marginLeft+10); //THIS DOES NOT WORK!
}
//Call to the function
window.setInterval(catWalk, 500);
try using the following:
cat.style.marginLeft = (parseInt((cat.style.marginLeft) || parseInt(window.getComputedStyle(cat).marginLeft))) + 10 + 'px';
instead of cat.setAttribute('marginLeft', cat.marginLeft+10); there is no attribute marginLeft by default on your Element. So you gotta go by getting the computed styles and add it to your style attribute then you can access it.
Margin left is not a attribute hence it does not work in your case.
its a style property hence you need to do it differently
replace
cat.setAttribute('marginLeft', cat.marginLeft+10);
with
var p = cat.style.marginLeft; // return value in px; i.e 50px
p = p.substr(0,p.length-2); // remove px ie : 50px becomes 50
cat.style.marginLeft = (+p)+ 10 +'px' // convert p to number and add 10
I want to make floating HTML5 element move back and forward on my page. Exactly like SmoothDivScrolling that is already out there. I did try SmoothDivScrolling and it is not working well with the layout of my page.
So I have started to write my own.
If I give a position to my element using CSS I will be able to retrieve the position with:
element = document.getElementById(image);
position = element.style.left;
// removing px from the value
position = parseInt(position.substring(0,position.length-2));
This will return the left position of the element inside its parent only if the CSS contain:
left:0px;
As mentioned, I want my elements to be floating because I plan to have many more than one element;
Now since I want to animate my element I have to change the position by changing the value of 0px with:
fish.style.left = (newPosition)+'px';
It is working if I provide the style of my floating element with:
position:relative; //This doesnt really afect my floating
left:0px; //this does
So I tried to retrieve the position with DOM instead of CSS using:
var element = document.getElementById(image);
var rect = element.getBoundingClientRect();
position = rect.left;
Now this is working. It retrieves the position of the element relative to the body even if no left positioning was specified in the style.
I am wondering if there is way to change the position of that element without going trough CSS style. Because each element might have different width, floating them take care of the positioning. If I provide a position to each of them they won't be floating anymore.
The floating option avoid all the math involved on positioning. But if it's really needed I guess I will do the math.
Any suggestions?
Here is the full code for who ever wants to reinvent the wheel with me
<body style="margin:0px;">
<div id="scroller" style="position:absolute;left:400px;width:800px;border:1px solid #000000;overflow:hidden;height:auto;">
<div id="scrollWrap" style="margin:0px;position:relative;width:400px;margin:auto;border:1px solid #000000;overflow:hidden;height:150px;">
<figure id="shark" style="float:left;margin:0px;padding:0px;width:150px;display:inline-block;">
<img id="image" src="shark.jpeg" alt="The Shark" style="border:1px solid #000000;position:relative;left:0px;width:150px;height:150px;">
</figure>
</div>
</div>
<script type="text/javascript">
setInterval(function(){ do_move("shark"); }, 10);
</script>
</body>
<script type="text/javascript">
var frameDirection;
function do_move(image) {
var container = document.getElementById("scrollWrap");
var bodyRect = container.getBoundingClientRect();
var element = document.getElementById(image);
var rect = element.getBoundingClientRect();
offset = rect.left - bodyRect.left;
fish = document.getElementById(image);
horz = fish.style.left;
fishSize = document.getElementById(image).offsetWidth;
horz = parseInt(horz.substring(0,horz.length-2));
var frameWidth = document.getElementById('scroller').offsetWidth;
var wrapWidth = document.getElementById('scrollWrap').offsetWidth;
var nbrImg = document.getElementById("scrollWrap").getElementsByTagName("figure").length;
if (horz==0) {
frameDirection='right';
}
else if (horz == (wrapWidth-fishSize)) {
frameDirection='left';
}
if (horz<=wrapWidth && frameDirection == 'right') {
horz += 1;
fish.style.left = (horz)+'px';
}
else if (horz<=wrapWidth && frameDirection == 'left') {
horz -= 1;
fish.style.left = (horz)+'px';
}
}
</script>
If I understand correctly, you want to initially float your elements, then switch to absolute positioning, but keep everything in the same place, so you can animate them?
If so, this code may help you. It's not based on your html, just an example.
// get all the floating elements
var floaters = document.getElementsByClassName("floater"),
index, floater, rect;
// go over them backwards
for (index=floaters.length-1; index>=0; index--) {
floater = floaters[index];
// get current position
rect = floater.getBoundingClientRect();
// convert it to style
floater.style.left = rect.left + "px";
floater.style.top = rect.top + "px";
// switch to absolute positioning
floater.style.position = "absolute";
floater.style.float = "none";
}
I made a little jsfiddle, so you can test it.
Inside a position:relativeelement box, I have
a absolutely positioned element parent at top:0 with a couple of static p and h1..h6inside. Those may all have different margin/padding values.
a few absolutely positioned elements where element name and content matches exactly one of the elements from above list #1.
The goal is to set the y-value of the 2nd element such that it exactly overlaps with the corresponding one from the set in 1. .
I've taken this approach (using closure, but anything could be used really), starting with an Array of elements contentfor generating list #1:
goog.dom.removeChildren(parent);
for (var i=0; i<content.length; i++) {
offsets.push(parent.offsetHeight);
goog.dom.appendChild(parent, content[i]);
}
return offsets;
Then, using the values from offsets:
var matchedElm = source[i].cloneNode(true);
goog.style.setStyle(matchedElm, {"top": offsets[i] + "px"});
goog.dom.appendChild(box, matchedElm);
Now this works for various paddings and margin=0, but fails when margins are non-0 on the p and h1..6. I have also tried "scrollHeight" but nothing seems to take into account margins.
I've then tried getting offsetTop directly from the rendered elements in list #1, but this seems to yield exact same results as above procedure to fill offsets.
How can I make the overlap work? I'm looking for a native javascript or closure-library solution.
What you are looking for may be goog.style.getPageOffset and because your overlapping element is absolutely positioned with a top setting you may have to deduct the top margin of the element you want to overlap using goog.style.getMarginBox. Here is some sample code:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<div id="game" data-something="hello"></div>
<script type="text/javascript" src="js/goog/base.js"></script>
<script type="text/javascript">
goog.require("goog.dom");
goog.require("goog.style");
</script>
</body>
<div id="contentToOverLap" style="position:absolute;top:30px;left:30px">
<h1 style="margin:10px;padding:2px">h1 10px mar and 2px pad</h1>
</div>
<div id="overlappingContent" style="display:inline">
<h1 style="color:red;margin:15px;padding:2px;position:absolute">
h1 15px mar and 2px pa
</h1>
</div>
<script type="text/javascript">
(function () {
var pH = goog.dom.$("contentToOverLap").children[0];
var cH = goog.dom.$("overlappingContent").children[0];
var box = goog.style.getPageOffset(pH);
console.log("box is:", box);
var mar = goog.style.getMarginBox(cH);
console.log("mar is:", mar);
var t = box.y - mar.top;
var l = box.x - mar.left;
goog.style.setStyle(cH, { "top": t + "px", "left": l + "px" });
})();
</script>
</html>
I have been working on a site that requires cross browser compatibility (including earlier IEs) and I have a sidebar that uses gradients but it turned out that it is about a million times easier to use a set background image, I have the height of the image repeating properly by taking the height of it based off the main container but I want to do the same the width of it.
I am aware of how to stretch the div based on the size of others but I want to know how I can have a conditional statement that will repeat the image y until the end of the div so it doesn't just move the set image!
I am achieving the height based repeating using this:
<script type="text/javascript">
var theHeight = $('#Container').height() - 260;
$('#SecondaryContent').css('min-height', theHeight);
</script>
I am attempting to use this code:
<script type="text/javascript">
var divWidth = $('#SecondaryContent').width() + 1;
if (divWidth.width() > 200) {
alert('hello');
$('#SecondaryContent').css('background', 'url(../images/background_slice.png)', 'repeat-x 18% 0%');
}
</script>
However it seems unable to find anything within the div.
these css may help
background-repeat: repeat; // repeats x and y
background-repeat: repeat-x; // repeats x
background-repeat: repeat-y; // repeats y
Just thought I would update that I managed to get this working using this:
<script type="text/javascript">
$(document).ready(function () {
divExpander();
divLineExpander();
divWindowLineExpander();
})
function divExpander() {
var theHeight = $('#Container').height() - 260;
$('#SecondaryContent').css('min-height', theHeight);
}
function divLineExpander() {
var theWidth = $('#SecondaryContent').width() + 2;
$('#Navigation').css('min-width', theWidth);
}
$(window).bind("resize", divWindowLineExpander);
function divWindowLineExpander(e) {
var theLineWidth = $('#SecondaryContent').width() + 1;
$('#Navigation').css('min-width', theLineWidth);
}
</script>