Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I made a little app and my button shows only on one place. It's all working but on wrong place. See pictures. I'll leave my GitHub repo link. Sorry most of stuff is on Cyrillic but code is, of course, on English Latin.
Here is a video of my problem (22 sec)
Thank you for your help.
You're problem is with id. HTML ids are unique, so when you do document.getElementById('skocko'), you only get back the first element with that id.
Instead, give the button a class of skocko, and access it like this:
Template.myTemplate.events({
"click .glasaj":function(event, template){
template.$(".skocko").toggle();
}
}
This will select the element with class skocko in the current template.
SRC: https://stackoverflow.com/a/27116956/2317712
check div positioning How to position one element relative to another with jQuery? so its position can be relative to button clicked, or assign unique skocko id for every skocko..
Do something like this in your script glasaj.js
if (Meteor.isClient) {
Template.glasajDugme.events({
'click .glasaj': function(){
var g = Meteor.user().profile.неискоришћениГласови;
if (g < 1) {
var pos = $(this).position();
// .outerWidth() takes into account border and padding.
var width = $(this).outerWidth();
//show the menu directly over the placeholder
$("#skocko").css({
position: "absolute",
top: pos.top + "px",
left: (pos.left + width) + "px"
}).show();
document.getElementById('skocko').style.display = "inline-flex";
// return "disabled" ;
}
else {
Predlozi.update(this._id, {$inc: {Број_Гласова: 1}}
);
Meteor.users.update(Meteor.userId(), {$inc: {"profile.неискоришћениГласови": -1}}
);
};
}
});
sakrijskocka = function(){
document.getElementById('skocko').style.display = "none";
};
};
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed last month.
This post was edited and submitted for review last month and failed to reopen the post:
Original close reason(s) were not resolved
Improve this question
While wandering around the web, I found this animation and wondered how this text background animation can be created.
Question:
Im trying to achieve the same animation on my portfolio website, how can I animate this text background animation on my own project?
Review: I took a look at the website that you have linked and they have multiple text rows that fill out the whole screen, that they continuously manipulate.
How to achieve an animation: Select all the text rows with JavaScript and precisely modify the DOM using innerHTML. You need to receive random characters and precisely modify the DOM in order to achieve a planned out animation.
Animation: Set an interval to call your DOM modification function and add some logic to craft a more complex animation.
Example: Here is a simple example that I have created, the animation consists of 1 row and we shift the content to the left and right.
External Playground: https://jsfiddle.net/cjkaqstg/49/
CSS:
text{
font-size:16px;
white-space:pre;
}
HTML:
<text id="text-0"></text>
JS:
const text_element = document.getElementById("text-0");
const text_length = 30;
var shift_left = true;
function receiveRandomCharacter()
{
// Receive a random character
const characters ="0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
return characters[Math.floor(Math.random() * characters.length-1) +1];;
}
function modifyText(new_content)
{
// Function to modify the text content
text_element.innerHTML = new_content;
}
function textAnimation()
{
// Add some logic, in this case we will shift the characters to the left and right
var row_content ="";
if(shift_left)
{
for(var x=0;x<text_length;x++)
{
if(x % 2==0)
{
// Even Number, add SPACE as a character
row_content += " ";
}
else
{
// Un-even number, add a random character
row_content += receiveRandomCharacter();
}
}
modifyText(row_content);
shift_left = false;
}
else
{
for(var x=0;x<text_length;x++)
{
if(x % 2 ==0)
{
// Even Number, add a random character
row_content += receiveRandomCharacter();
}
else
{
// Un-even number, add SPACE as a character
row_content += " ";
}
}
modifyText(row_content);
shift_left = true;
}
console.log(row_content);
}
const interval = setInterval(function() {
// Call a function every X milliseconds
textAnimation();
}, 300);
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
I’m making a game using HTML, CSS, and JavaScript. When I click the left arrow, the red and yellow box jerks to the original position and runs. I want it to run at the position it is at currently at. Same goes for double tapping the arrows.
I’ve attached a Repl.it. Here it is: https://repl.it/#ritzcrackerz201/cake
Below I have edited your script, Your main issue was you were using two different values for your left and right movement... Also i don't know if this is what you wanted but I made edits to your 'jump' section of code.
Javascript
<script>
let xArrowMovement = 0;
let jumpboxupmovementy = 0;
// let player = null;
// let playerPos = null;
/*setTimeout(function(){
getElements();
}, 100);
function getElements() {
console.log('Entered getElements');
player = document.getElementById("master-cube");
console.log(player);
playerPos = player.style.transform;
console.log(playerPos);
} */
function moveright() {
console.log('Entered moveright');
xArrowMovement += 80;
document.getElementById("master-cube").style.transform = `translate(${xArrowMovement}%, ${jumpboxupmovementy}%)`;
}
function moveleft() {
console.log('Entered moveleft');
xArrowMovement -= 80;
document.getElementById("master-cube").style.transform = `translate(${xArrowMovement}%, ${jumpboxupmovementy}%)`;
}
function movejump() {
console.log('Entered movejump: ' + xArrowMovement + ' ' + jumpboxupmovementy);
jumpboxupmovementy += 80;
document.getElementById("master-cube").style.transform = `translate(${xArrowMovement}%, ${-jumpboxupmovementy}%)`;
//wait for this animation to complete
setTimeout(function(){
jumpboxupmovementy -= 80;
document.getElementById("master-cube").style.transform = `translate(${xArrowMovement}%, ${jumpboxupmovementy}%)`;
}, 500);
}
</script>
HTML
<div id="master-cube"></div>
<img src="arrows/leftarrow.png" alt="Left Arrow" height="80vh" width="80vw" onclick="moveleft()" class="arrowcontrols">
<img src="arrows/middlejumpsquare.png" alt="Jump Square" height="80vh" width="80vw" onclick="movejump()" class="arrowcontrols">
<img src="arrows/rightarrow.png" alt="Right Arrow" height="80vh" width="80vw" onclick="moveright()" class="arrowcontrols">
</body>
Use translate( 0, 0 ) instead of translateX( 0 ), translateY( 0 ). And use one value of x instead of leftarrowmovement and rightarrowmovelock. Now after clicking left function doesn't consider your movement to the right.
But as stated in #Marc's comment, you should use some kind of engine for that. CSS is not the best tool in development of such games.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
please check the below JS code, and suggest me further addition or modification in javascript -
JS :
var $tabs = $('.tabs > div'), _currhash, $currTab;
$tabs.first().addClass("active");
function showTab() {
if($currTab.length>0) {
$tabs.removeClass('active');
$currTab.addClass('active');
}
/* find the panels and 'unlink' the id to prevent page jump */
$tabs.each(function() {
var _id = $(this).attr('id');
$(this).attr('id',_id+'_tab');
/* eg we have given the tab an id of 'tab1_tab' */
}); /* set up an anchor 'watch' for the panels */
function anchorWatch() {
if(document.location.hash.length>0) {
/* only run if 'hash' has changed */
if(_currhash!==document.location.hash) {
_currhash = document.location.hash; /* we only want to match the unlinked id's */
$currTab = $(_currhash+'_tab');
showTab();
}
}
}
setInterval(anchorWatch,300);
jsfiddle not working so please check html and css link - readmore
You can try this in your showTab()
$('html, body').animate({
scrollTop: $( $.attr(this, 'href') ).offset().top
}, 500);
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I've used JavaScript just for this purpose but it only works when I refresh the browser ...
<script>
var scroll = window.scrollY ;
var header = document.getElementById("header");
function my(){
if (scroll >= header.scrollHeight) {
header.style.height = 100 +"px";
} else {header.style.height = 250 + "px";}
}
my();
</script>
You would need to add a scroll event listener :
var scroll, header = document.getElementById("header");
function my() {
scroll = window.scrollY;
if (scroll >= header.clientHeight) header.style.height = 100 + "px";
else header.style.height = 250 + "px";
}
window.addEventListener('scroll', my, false);
window.addEventListener('load', my, false);
Also added a listener that will respond to when the page has fully loaded, this will make sure the function executes when the user lands on the page and a scroll position was cached before...
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
Trying to make jquery script that allows me to move square according to my mouse movement if i click on it.Basicly it does nothing if i click on the box.it doesn't move the box after clicked and i have no idea why, can anyone help me..
$(function(){
var clicked=1;
var ch,x,y,cy,cx;
$('#box').on("click",function(){
clicked=clicked+1;
var ch=clicked%2;
alert('ch'+ch);
});
alert('ifas');
$('body').mousemove(function(){
if(ch==0)
{
var x=event.pageX;
var y=event.pageY;
var cx=('#box').css("left");
var cy=('#box').css("top");
if(cx==='auto')
{
var cx=0;
}else{
var cx=cx.replace('px','')
}
if(cy==='auto')
{
var cy=0;
}else{
var cy=cy.replace('px','')
}
var cy=y-cy;
var cx=x-cx;
$('#box').css({
top:cy,
left:cx,
});
}
});
});
css is basicly 100x100 box.
https://jsfiddle.net/pL72en07/8/
Your main problems are :
Missing $ in :
var cx=$('#box').css("left");
^ // missing
var cy=$('#box').css("top");
^
Setting local var for ch in first click handler. This means the higher level ch is never defined and never changes
$('#box').on("click",function(){
clicked=clicked+1;
ch=clicked%2; // remove `var`
alert('ch'+ch);
});
The box now moves although not smoothly and I don't know what your expectations are.
If you want to move a element with the cursor when the mouse is pressed and release it at mouse position with another mouse press you can do something like this:
HTML
// Set the position attribute for the CSS style to absolute
<div class="moveAble" style="position:absolute;">
This div is movable!
</div>
JS
// Wait for the dom to be ready
$(document).ready(function(){
// declare variable for the element
var moveable = $('.moveAble'),
// variables for x,y position
x,y,
// bool that indicates wether the element should move or not.
isMoving = false;
// When the element is clicked
moveable.on('click', function() {
// Set the bool to be not the value it currently is, making it a toggle
isMoving = !isMoving;
// Use mousemove method and capture the event (e)
$(document).mousemove(function(e){
// set the x and y variables
x = e.pageX;
y = e.pageY;
// if isMoving is true, alter its top and left CSS attributes to the x and y coordinates for top and left
if (isMoving) {
moveable.css({'top': y,'left': x});
}
});
});
});