First of all, sorry, because probably this is kind of a long shot. My coding knowledge is very limited and everything I always do is based on tutorials, and codes I see around.
Basically, I created this site, with a list of galleries and institutions. When one hovers on the name of the venue there's a tooltip with image that comes out and follows the mouse. I really liked this effect but realized it is not working that well on small screens such like the laptop ones.
Is there any easy way to modify this js so I can have an image coming out as full screen (covering the whole screen) fixed and responsive?
<script language="javascript" type="text/javascript">
var tooltipSpans = document.getElementsByClassName('tooltip-span');
window.onmousemove = function (e) {
var x = e.clientX,
y = e.clientY,
i, l = tooltipSpans.length;
for(i = 0; i < l; i++) {
tooltipSpans[i].style.top = (y + 20) + 'px';
tooltipSpans[i].style.left = (x + 20) + 'px';
}
};
</script>
Thank you so much in advance!!!
You could set the image as background image of your body-tag. And set following styling to it:
#container {
background-repeat: no-repeat;
background-size: contain;
background-attachment: fixed;
}
Here the javascript changes:
window.onmousemove = function (e) {
var i, l = tooltipSpans.length;
for(i = 0; i < l; i++){
var backgroundimageSRC = tooltipSpans[i].children.getAttribute("src");
document.getElementById("conatiner").style.backgroundImage = "url("+ backgroundimageSRC +")";
}
}
Maybe you have to change a little bit. But I think it will do the magic.
Related
I'm making a sliding puzzle (something like this) using HTML, CSS and JavaScript/jQuery.
Everything works fine, but I want to add a sliding transition each time a slide moves.
The code works based on the following logic:
12, 16 or 48 <div>s are created (depending on the level of difficulty).
A background-image is assigned to all of them, and cropped accordingly to simulate a "piece" of the original image.
They all have a class of image, and also piece<number>, where <number> is the number of the tile. The last tile (piece12, piece16 or piece48) also has a class of voidBlock, that removes the background-image. This is the empty tile that permits the ones directly next to it to move into its place. All the other tiles have an additional class, imgBlock.
When one of the tiles that are next to the voidBlock is clicked, it exchanges classes with the voidBlock. For example, if we were to click piece6, which happens to be next to the voidBlock(let's say the difficulty is set to easy, and thus voidBlock is piece12), this would happen:
The original voidBlock changes its piece12 class to piece6.
The original voidBlock changes its voidBlock class to imgBlock.
The original piece6 changes its piece6 class to piece12.
The original piece6 changes its imgBlock class to voidBlock.
After that, a draw() function is called; it sets the background-position of each tile, depending on its piece number.
As you might have guessed by now, none of the <div>s actually move. They remain still as the background-position of their background-image changes through their classes.
Although I do have some experience in programming (namely in Python and Java), web development in general is very new to me. I have tried various methods of transitioning, but the best thing I could come up with was to have the background image move each time a tile moved (which is just weird and unintuitive).
My question is, thus: is there any way to have an animation/transition of the tiles sliding each time that they move?
Code
(the lines that are commented out have nothing to do with the question)
CSS:
Part of the main.css file:
.image {
background-image: url(/Users/user/puzzle-test/img/image001.jpg);
width: 200px;
height: 200px;
display: inline-block;
vertical-align: top;
margin: 10px 10px 10px 10px;
}
.voidBlock {
background-image: none;
}
.imgBlock {
background-image: url(/Users/user/puzzle-test/img/image001.jpg);
}
JavaScript/jQuery:
The <div> click handler:
var clickHandler = function() {
var voidPosX = $(".voidBlock").css("left");
var voidPosY = $(".voidBlock").css("top");
voidPosX = parseInt(voidPosX.substring(0, voidPosX.length-2));
voidPosY = parseInt(voidPosY.substring(0, voidPosY.length-2));
var posX = $(this).css("left");
var posY = $(this).css("top");
posX = parseInt(posX.substring(0, posX.length-2));
posY = parseInt(posY.substring(0, posY.length-2));
if((voidPosX == posX - finalWidth) && (voidPosY == posY)){
posX -= finalWidth;
voidPosX += finalWidth;
move($(this));
}else if((voidPosX == posX + finalWidth) && (voidPosY == posY)){
posX += finalWidth;
voidPosX -= finalWidth;
move($(this));
}else if((voidPosY == posY - finalHeight) && (voidPosX == posX)){
posY -= finalHeight;
voidPosY += finalHeight;
move($(this));
}else if((voidPosY == posY + finalHeight) && (voidPosX == posX)){
posY += finalHeight;
voidPosY -= finalHeight;
move($(this));
}
}
The move function (used in the click handler) (h and v are the horizontal and vertical dimensions of the puzzle):
function move(element) {
//moveCounter++;
var temp = element.attr("class").split(" ");
for(var i = 0; i < temp.length; i++){
if(temp[i].substring(0, 5) == "piece"){
var pieceNum = temp[i].substring(5);
}
}
element.addClass("tempBlock1");
$(".voidBlock").addClass("tempBlock2");
element.filter(".tempBlock1").addClass("piece"+(h*v));
element.filter(".tempBlock1").removeClass("piece"+pieceNum);
element.filter(".tempBlock1").addClass("voidBlock");
element.filter(".tempBlock1").removeClass("imgBlock");
$(".voidBlock").filter(".tempBlock2").addClass("piece"+pieceNum);
$(".voidBlock").filter(".tempBlock2").removeClass("piece"+(h*v));
$(".voidBlock").filter(".tempBlock2").addClass("imgBlock");
$(".voidBlock").filter(".tempBlock2").removeClass("voidBlock");
$(".tempBlock1").removeClass("tempBlock1");
$(".tempBlock2").removeClass("tempBlock2");
draw();
}
The draw function (the numbers 800 and 600 represent the dimensions of the image):
function draw() {
//var imgSelect = $("input[type='radio'][name='bgImage']:checked").val();
var j = 1;
for(var pY = 0; pY > -600; pY -= finalHeight){
for(var pX = 0; pX > -800; pX -= finalWidth){
$(".piece"+j).css("background-position", pX+"px "+pY+"px");
//$(".piece"+j).css("background-image", "url(/Users/user/puzzle-test/img/"+imgSelect+".jpg)");
//$(".piece"+j).find(".helpNum").text(j);
j++;
}
}
//$(".move").text("Moves: " + moveCounter);
$(".voidBlock").css("background-image", "none");
//$(".grid").find("img").attr("src", "img/"+imgSelect+".jpg");
//$(".image:not(.voidBlock)").css("cursor", "pointer");
//$(".voidBlock").css("cursor", "default");
}
Finally, the <div>s are created by the shuffle function, like this (pieces is a shuffled array of the puzzle pieces, basically used to tell where to position each tile):
// DRAW
for(var i = 0; i < pieces.length; i++){
// HTML
var el = "<div class=\"image piece"+(pieces[i])+"\"><p class=\"helpNum\"></p></div>";
$(".grid").append(el);
$(".piece"+(h*v)).addClass("voidBlock");
}
// CSS div positioning
var j = 0;
for(var pY = 0; pY > -600; pY -= finalHeight){
for(var pX = 0; pX > -800; pX -= finalWidth){
$(".piece"+pieces[j]).css({left: pX, top: pY});
j++;
}
}
I finally solved it thanks to #BillyNate 's answer, which was to set the position property of the <div>s to absolute, then move them by changing the top and left properties.
I have a 5*5 grid, what i want to do is to imitate drawing action than when i press(with my finger, it is suppose to be a mobile app) on a square it changes its background color.
this part i have managed to do and it works fine.
what I would like to do now is that when I move the finger over the screen it will change the color of each of the squares my finger is pressing(enters its surface) just like drawing.
i know that there is a touchenter event but i don't understand how can i use it
i read some tutorials and articles and everywhere it says that the touchenter event dosen't bubbles...
how can I get the id of the element that i am touchmove over?
https://jsfiddle.net/uLfm5szz/2/
any help will be more than great!
html
<div id="demo"></div>
css
.b{
width: 50px;
height: 50px;
display: inline-block;
border: red 1px solid;
}
js
createLoop();
$('.b').bind('touchmove',StartDragSelect);
function createLoop(){
var length = 30;
var text = "";
var demo = $("#demo")
for (i = 0; i < length; i++) {
var rowElement = $('<div class="a"></div>');
demo.append(rowElement);
for(var x = 0; x < length; x++){
createGridItem(rowElement,i,x);
}
}
}
function createGridItem(rootElement, i, x){
var pix = 10;
var currItem = $('<div class="b" id="a'+i+x+'" style="top:' + i*pix +'px; left: ' + x*pix +'px; background-position-x: -' + x*pix +'px ; background-position-y:-' + i*pix +'px";"></div>');
$(rootElement).append(currItem);
}
function StartDragSelect(obj)
{
obj = obj.currentTarget;
$(obj).css({"background-color":"blue"});
}
how can i check if i am above the element? which parameter should i
use to check it?
Here is a function to get the position of an element(a gridview cell for you). With the x and y coordinates, you can add the height and width to them to calculate if your current touch position is above the element.
function getPosition(element) {
var xPosition = 0;
var yPosition = 0;
while (element) {
xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft);
yPosition += (element.offsetTop - element.scrollTop + element.clientTop);
element = element.offsetParent;
}
return { x: xPosition, y: yPosition };
}
To use this function you can do like this
var y = getPosition(document.getElementById('cell1')).y;
var x = getPosition(document.getElementById('cell1')).x;
Take a look at https://api.jquerymobile.com/swipe/
This is a jQuery lib for doing that.
I'm making a scrolling comment section, it works by having several elements echoed by php have their top property animated with javascript. Everything seems to be working fine except when I set their position to absolute and use javascript simultaneously, this results in text-align:center only working whenever there is more than one line in the text. Here is my code:
HTML (Roughly goes like this, is echoed through PHP, also apologies for the inline styling)
<div id="element0" style="position:absolute;text-align:center;">Hello world!</div>
<div id="element1" style="position:absolute;text-align:center;">Hello world!</div>
<div id="element2" style="position:absolute;text-align:center;">Hello world!</div>
<div id="element3" style="position:absolute;text-align:center;">Hello world!</div>
Javascript
var offset = 0;
var i = 0;
for(i = 0; i < 3; i++) {
obj = document.getElementById("element" + i);
obj.style.top = offset + "px";
offset += obj.clientHeight;
}
function moveComments() {
var i1 = 0;
for(i1 = 0; i1 < 3; i1++) {
obj = document.getElementById("element" + i1);
obj.style.top = parseInt(obj.style.top) - 1 + 'px';
if(parseInt(obj.style.top) <= -offset)
obj.style.top = offset + 100 + "px";
}
}
setInterval(moveComments, 10);
position: absolute causes the element's width to automatically shrink to fit its content.
text-align: center centers text within the bounds of the block element.
If the block element is not wider than the text, it won't do anything.
You need to give it a larger width.
I'm trying to figure out how to create a rotating image effect using a sprite sheet in javascript. What I'm trying to do:
Two buttons:
Left button: Rotate 15 frames to the left.
Right button: Rotate 15 frames to the right.
I realize that there are jquery plugins that would allow me to easily do this, but I want to try it from scratch. Beyond the general idea, I don't know where to proceed. Any tips would be greatly appreciated.
Check out this jsFiddle to see a working example
Based on your question, it sounds like you're trying to learn how to animate a sprite and not actually rotate a single image. If so, here is how you would animate a sprite. Note: this uses an image of a man running. In your question, you asked about a rotating image effect. In either case, you are simply looking at different slice of a sprite and then animation is solely dependent on the sprite. As long as your sprite displays a rotating image then the image will appear to rotate.
If you need a plugin to actually rotate an image, see here.
JavaScript
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.js" type="text/javascript"></script>
<script type="text/javascript">
var imgWidth = 240;
var imgHeight = 296;
var ximages = 6;
var yimages = 5;
var currentRow = 0;
var currentColumn = 0;
function MoveSprite(dir) {
if (dir == "left") {
currentColumn--;
if (currentColumn < 0)
{
currentColumn = ximages -1;
if (currentRow == 0) {
currentRow = yimages - 1;
}
else {
currentRow--;
}
}
}
else {
currentColumn++;
if (currentColumn == ximages) {
currentColumn = 0;
if (currentRow == yimages - 1) {
currentRow = 0;
}
else {
currentRow++;
}
}
}
$("#txtRow").val(currentRow);
$("#txtColumn").val(currentColumn);
$("#spritesheet").css("backgroundPosition", -imgWidth * currentColumn + "px " + -imgHeight * currentRow + "px");
}
</script>
HTML
<button onclick="MoveSprite('left');return false;">Move Left</button><button onclick="MoveSprite('right');return false;">Move Right</button>
<div id="spritesheet"></div>
CSS
<style type="text/css">
#spritesheet {
height: 296px;
width:240px;
background-image:url('walking_spritesheet.png');
}
</style>
Sample Sprite (1440x1480):
If you are familiar with MovieClip in flash, I made a library that gives you a similar interface in javascript. https://github.com/wolthers/SpriteClip.js
you could try
css3 (rotation) ex : http://antimatter15.com/misc/rotatedgooglecss3.html
canvas (javascript) ex : https://developer.mozilla.org/en/Drawing_Graphics_with_Canvas
svg (dom or other libs) ex : http://www.svgbasics.com/rotate.html , http://raphaeljs.com/reference.html
All,
A total newbie here but could someone please review this code and let me know where I am going wrong?
What effect I am trying to achieve: I have about 9 divs on the webpage, consisting of images and text, the text comes into focus when the user hovers over the image inside the div. I want these divs to 'appear' to be floating around the page.
So what I did: I absolutely positioned the divs using CSS on the webpage. Now I am using JS to move the divs from their position to set positions on the page (will do this for each div) and try to give the effect of random movement to the divs. Here is the code:
<script language="javascript">
var x = document.getElementById("cr001").style.left;
var y = document.getElementById("cr001").style.top;
var d_x = 75;
var d_y = 100;
var interval = 2; //move by only 2px...
function moveImage() {
if(x < d_x) x = x + interval;
if(y < d_y) y = y + interval - 1; //move y by only 1px
document.getElementById("cr001").style.left = x+'px';
document.getElementById("cr001").style.top = y+'px';
if ((x + interval < d_x) && (y + interval < d_y)) {
window.setTimeout('moveImage()',100);
}
}
</script>
</head>
<body onload="moveImage()">
<div id="blackhole"><img src="img/bimg.png" alt="blackhole" /></div>
<div id="container">
<div id="cr001" class="twinkles">
<a href="#">
<img src="img/cr.png" alt="Co is about your freedom" />
<span>Co is about your freedom</span></a>
</div>
</body>
Could someone please explain where I am going wrong?
Cheers,
Based on the refined post, I now see that you are trying to access body content in the head with var x = document.getElementById("cr001").style.left;
This won't work because when the head is loaded, the body is not ready. You should make an init() function that looks like:
function init(){
window.x = document.getElementById("cr001").style.left;
window.y = document.getElementById("cr001").style.top;
moveImage();
}
and then attach that to the body onload.
EDIT: ok, here is some modified code that does what you want. You can stick this in a file named index.html and launch it in Firefox. I broke it down for you:
<html>
<head>
<script language="javascript">
var d_x = 75;
var d_y = 100;
var interval = 2;
//init is used for getting things up and running once the page is loaded
function init(){
//optimization: only get the element once
var el = document.getElementById("cr001")
x = parseInt(el.style.left);
if(isNaN(x)){
//parseInt("") == NaN
x = 0;
}
y = parseInt(el.style.top);
if(isNaN(y)){
//ditto
y = 0;
}
//call the nuts of this script
moveImage();
}
//this is mostly unchanged
function moveImage() {
if(x < d_x){
x = x + interval;
}else{
//lets keep looping just for fun!
x = 0;
}
if(y < d_y){
y = y + interval - 1; //move y by only 1px
}else{
y = 0;
}
//optimization: only get the element once
var el = document.getElementById("cr001")
el.style.left = x + 'px'; //dont forget to add 'px' back in
el.style.top = y + 'px';
//loop, don't use strings in setTimeout since this is basically eval...eval is evil
setTimeout(moveImage, 100);
}
</script>
</head>
<body onload="init()">
<div id="container">
<!-- IMPORTANT: POSITION IS ABSOLUTE -->
<div id="cr001" style="position:absolute; width:10px; height:10px; background-color:black"></div>
</div>
</body>
The problem is here:
document.getElementById("cr001").style.left
This actually returns the css value, which is a string for example '100px' or '10%' etc. Yet, later on your code, you use this value as if it was an integer.
You have an unclosed div. You open <div id="container"> and <div id="cr001" class="twinkles"> but only close one of them