When the menu is selected, I would like for this div to both appear on the screen and slide

I need this div to be visible and move up when a menu item is selected. Can anyone provide a solution for this? Thank you in advance.

<html><head>
<script type="text/javascript">

<!--
var divobject = null;
function init(id){
   divobject = document.getElementById('id');
   divobject.style.left = '25px'; 
   divobject.style.top = '580px';
   divobject.style.visibility = 'hidden';
}
function moveUp(id){
   divobject = document.getElementById(id);
   divobject.style.visibility = 'visible';
   divobject.style.left = '25px';
   divobject.style.top = parseInt(div.style.top) + 0 + 'px';
   divobject.style.position = 'absolute';
}
document.onclick =init; 
window.onload =init;
//-->
</script>
</head>
<body>
<a href="javascript:void(moveup('1'));">show div</a>
<div id="1">tytt</div>
</body>
javascript

Answer №1

Avoid using IDs that begin with numbers

Update your code as follows:

function init(id){
   divobject = document.getElementById(id);

Remove the following lines because no arguments are being passed to functions, which will result in an error since id will be undefined:

document.onclick =init; 
window.onload =init;

If you wish to modify the existing style top value, use a numeric value instead of 0 while enclosing it in braces for addition rather than string concatenation:

divobject.style.top = (parseInt(divobject.style.top) + 0) + 'px';

Answer №2

It seems that there are some issues in your code that need to be addressed. I was able to make it work by making some changes, but you may want to consider a different approach if you want to create a menu-style control.

  • Consider using style classes and toggling them dynamically using classList
  • Make sure the element id starts with letters.
  • Note that methods are case sensitive.
  • The id is a variable and should not be enclosed in commas.

Don't forget to utilize developer tools and debugger for troubleshooting.

<html><head>
<script type="text/javascript">

<!--
var divobject = null;
function init(id){
   divobject = document.getElementById(id);
   divobject.style.left = '25px'; 
   divobject.style.top = '580px';
   divobject.style.visibility = 'hidden';
}
function moveup(id){
   divobject = document.getElementById(id);
   divobject.style.visibility = 'visible';
   divobject.style.left = '25px';
   divobject.style.top = parseInt(div.style.top) + 0 + 'px';
   divobject.style.position = 'absolute';
}

window.onload = function(e) {                
    init("elt");
}
//-->
</script>
</head>
<body>
<a href="javascript:void(0);" onclick="moveup('elt')">show div</a>
<div id="elt">tytt</div>
</body>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the reason that certain functionalities do not work on an element that has two CSS classes assigned to it

I have a unique situation with two input elements and a button: <input class="close-acc-usr opt-in" type="text" name="closeAccUsr" /> <input class="close-acc-pin opt-in" type="number" name="cl ...

javascripthtmlcss

Retrieving data from Firestore yields an empty result

Having trouble reading from Firestore within a function, even though writes are working fine. Despite following examples on the given link, the query below and its variations result in an empty promise: module.exports.customerByPhone = phone => { r ...

javascriptnode.jsfirebasegoogle-cloud-firestoregoogle-cloud-functions

Using a curly brace in a React variable declaration

After completing a react tutorial, I started customizing the code to suit my requirements. One specific section of the code involved a component that received a parameter called label. render() { const { label } = this.props; ... } For instance, I re ...

javascriptreactjs

Why are the UI components (`Card Number`, `MM/YY`, `CVC`) not being displayed in the React app when using Card

Having an issue where the CardElement Ui component is not visible in the image provided. It should appear above the Order Total: $0 next to the payment method. I've attempted various debugging methods without success. I'm still working on resolv ...

javascriptcssreactjsexpress

Tips for automatically setting focus to the following cell after inserting a new row in AngularJS

Transitioning from the Knockout world to Angular, I am facing an issue with a key-press event for tab. Whenever I add a new row in the table, the focus shifts to the information icon in the URI bar instead of the next cell in the newly created row. I belie ...

javascriptangularjshtml

Unable to dynamically display an HTML5 video using JavaScript

I'm facing an issue with displaying videos in a modal dynamically. Here's the scenario: +------------+---------+ | Name | View | +------------+---------+ | 1.mp4 | X | | 2.mp4 | X | +------------+---------+ The X ...

javascripthtmlvideo

Navigating through JSON data that has been returned

When I use AJAX (jQuery) to query my database, the data I receive back is causing some difficulties. While searching for a solution, I came across similar issues posted by others who pointed out that the PHP code (specifically how data is stored in the arr ...

javascriptphpjqueryjson

What is the best way to instruct jQuery to disregard an empty server response?

After examining this piece of code: $.ajax({ type: "POST", url: theRightUrl, data: whatToPost, logFunction: whatever, suppressSuccessLogging: !0, dataType: "html" }); I encountered an issue where Firefox displays a "no element ...

javascriptjqueryajaxfirefox

Tips for transferring date values in an ajax request to a web application handler

I am currently working on plotting a graph between two dates using Google Charts. My goal is to send date values to the controller, which is implemented with webapp2. However, I am facing difficulties in figuring out how to send date values to the controll ...

javascriptjqueryajaxwebapp2

Troubleshooting a unique CSS bug in jQuery mouseover functionality

Check out this pen: https://codepen.io/anon/pen/eKzEVX?editors=1111 I recently created a Form Select in Laravel: {!! Form::select('status_id', $statuses, $post->status_id, ['class' => 'form-control post-sub-items-label &apo ...

javascriptjqueryhtmlcssmouseover

Determining the precise spacing needed for a personalized cursor

Currently, I'm facing an obstacle in my attempt to design a custom cursor/crosshair inside a canvas. The problem lies in the Length, Width, and Gap dimensions assigned to the four rectangles that make up the cursor, as it is resulting in an incorrect ...

javascriptreactjscanvas

What is the best method for transmitting the filename using Plupload?

I've been trying to solve this issue for a while now. My problem seems straightforward – I want to send the filename along with the file as a multipart request in Plupload, but so far, I haven't had any success. The main thing I'm missin ...

javascriptphpplupload

Troubleshooting Database Saving Problem with Vue.js and Ruby on Rails

Trying to configure a nested form with Vue.js in a Rails application to save ingredients for a recipe. While all other details of the ingredients are saving correctly, the ingredient name (from an input field) is not getting saved in the database. How can ...

javascriptruby-on-railsjsonvue.js

What could be the reason my black overlay doesn't show up when the button is clicked?

Attempting to craft a pop-up window on my own, I encountered an issue. Upon pressing the button, instead of the anticipated pop-up appearing and darkening the background below it, the entire page freezes with no sign of the pop-up box. If I eliminate the ...

javascriptjqueryhtmlcss

Steps for implementing a reset button in a JavaScript slot machine game

I need assistance with implementing a reset button for my slot machine game prototype written in JS. I attempted to create a playAgain function to restart the game by calling the main game function, but it's not working as expected. Do I need to pass ...

javascriptfunctionbuttoncallback

Accessing the i and i+1 elements within a ng-repeat iteration

I'm currently learning Angular and struggling with a seemingly simple issue. My goal is to achieve the following HTML structure in AngularJS: <div> <div> {{bar[i]}} {{bar[i+1]}} </div> <div> {{bar[i+2]}} ...

javascriptangularjsangularjs-ng-repeat

Is it possible to process HTML and JavaScript as a request in JMeter?

After receiving a response, I noticed that the HTML body contains a hidden form along with an internal JavaScript function to submit the form (view snapshot here). Is there a method in JMeter to execute JavaScript code that directly submits a form? I am ...

javascripthtmljmeter

Unchanging Dive Field

I'm having trouble understanding why this field isn't updating with the correct number. It seems that any value less than 1 is being rounded in the alert() function. I believe all numbers are simply getting rounded down, but I'm unsure of an ...

javascripthtmlcss

Enhance the appearance of CodeMirror substrings by applying bold formatting without altering

I am currently utilizing codemirror with primefaces extensions in XML Mode. I need to modify the font style of a specific substring to make it bold. For instance, <User> <Name>Micheal</Name> <Age>25</Age> <Addr ...

javascriptprimefacescodemirrorprimefaces-extensions

Explore an array of elements to find the correct objectId stored in mongodb

element, I am faced with a challenge of searching through an array of objects to find a key that contains nested object id for populating purposes. Exploring My Object { service: 'user', isModerator: true, isAdmin: true, carts: [ ...

javascriptmongodbexpressmongoose