Questions tagged [dom]

The Document Object Model (DOM) is an application programming interface (API) for valid HTML and well-formed XML documents. It defines the logical structure of documents and the way a document is accessed and manipulated.

Filter by
Sorted by
Tagged with
3
votes
0answers
36 views

Displaying sections from pre-checked options

First off, not the greatest with jQuery but know enough to get by. I have a custom script for our WordPress site that ties in with a main plugin we use. I have a JSFiddle that gives the gist of what ...
1
vote
0answers
97 views

Escaping invalid XML characters (e.g. for the Java DOM API)

I want to save and load an arbitrary Java String in a Text node in a XML file using the Java DOM API. The ...
2
votes
2answers
44 views

Find size for elements to fit in certain width

This is a follow-up on Change size of elements until parent reaches certain height The goal of the function is to find a size for the elements inside a parent, so they all fit in a single row. I ...
4
votes
1answer
46 views

Change size of elements until parent reaches certain height

I wrote this method and I would like to refactor it so it is easier to understand and looks cleaner. However, I don't know how or where to start. If you could give it your best shot and explain your ...
4
votes
0answers
51 views

Enables markup to instantiate objects, call methods, and generate HTML

I'm looking for a code review for the package PXP. https://github.com/hxtree/PXP/ PXP enables markup to instantiate objects, call methods, and generate HTML. It works similar to a server-side ...
0
votes
1answer
27 views

Jquery Selector optimization for multiple clicks

I have multiple inputs that each one has an increment and decrement button The buttons will be pressed multiple times so i am looking to optimize my selector: So should i keep the first one (which ...
5
votes
1answer
101 views

Video player UI in Javascript/JQuery

I am a Javascript/JQuery beginner working on my first ever project. Everything in this program is working as it should and I am happy with its performance. I have pieced it together from a variety of ...
2
votes
1answer
87 views

Simple Password Generator in JavaScript

...
8
votes
2answers
188 views

Webpage with a preload animation using JavaScript setTimeout

I am working on a website with an animation that runs at the beginning before the content of the homepage becomes visible. I've looked at some examples of preloaders and now use that code with some ...
1
vote
1answer
57 views

Automatically select the table rows between two selected rows

The code is to check the rows in a table. If in a table two non consecutive rows are checked then all the in between rows should be selected by itself. Also, after selecting two rows, on selection of ...
3
votes
0answers
117 views

Parse DOM Tree in C++ [closed]

Problem I need to read custom text input of a sample document object model (DOM) represented in a json format from a file and store it in a struct I've defined as ...
2
votes
1answer
47 views

javascript carousel

I made this javascript code for a simple slider that can be controlled by arrows up/down. I'm wondering what I could have done better.. ...
2
votes
1answer
52 views

Add or remove a class on two elements when two different events fire

I want to add/remove a class on the html and body tags in the dom when my nav menu is opened or closed. Is this the most optimal way of writing this logic? ...
4
votes
1answer
73 views

Screen transition effect like in Final Fantasy games

I've created a battle screen transition effect similar to Final Fantasy games, you can see it in action here: https://gilles-leblanc.github.io/ff8-transition/ I'm interested in code quality, ...
2
votes
2answers
59 views

Cardinal direction enum from range input

Still learning JS and I made the following function to convert degrees into cardinal directions respectively. My first iteration of the code was over 50 lines and I was able to get it down to 13 using ...
0
votes
1answer
98 views

Extract HTML tags and its content from a string [closed]

Goal I want to extract HTML tags and its content from a string. The content (input) is queried from WordPress database. Sample data (input) I extract this dummy data from my WordPress database: ...
4
votes
2answers
111 views

Dynamically add/remove fields on input

The following code allows users to enter multiple optional quantity fields after first filling in a value of the current quantity input. If the input field contains a value it will then display the ...
4
votes
1answer
72 views

Event triggers for animations using vanilla ES6

I'm new to JS and wanna know right code style or approach to cod Vanilla JS using ES6. To practice this, I'm using ESLint JS code-style of AirBnb and referencing clean-code-javascript repo. However, I ...
3
votes
0answers
32 views

Function to flip cards in a memory game

I've developed a small memory game, the game contains a function to flip cards for every turn. I'm looping thru the array containing the images every time to pick one card. I'm sure there's away to ...
2
votes
1answer
60 views

Toggling the background color of a page using JavaScript closures

This question is to see if I can get some input on the "design pattern" I tried to implement here. I'm just learning about closure in JavaScript and I think I'm starting to get it. I'm wondering if ...
2
votes
1answer
52 views

Dynamically inserting html from external file and updating the database

I need some suggestions on how to approach this. I want to allow users to create sections of website. The code so far is working but since I am new to back-end I feel like there is better, more ...
2
votes
0answers
51 views

Wait for an element to exist in DOM before clicking it

Here is the problem: some script is injecting some HTML5 elements (actually a button with the #thebutton ID) to the current DOM. But this is a third party script ...
3
votes
1answer
61 views

Basic input system for a few form fields

I am attempting to port a linear function that I designed in a spreadsheet into HTML and Javascript. It's based on linear least squares where I have to take a Matrix and multiply it by its ...
1
vote
0answers
18 views

Creating a reusable plugin (Dialog/Notifier as example)

I started working on a notification system that is pluggable into any project. I have not made any "plugin" type javascript libraries, usually just functions very specific to the project at hand. That ...
1
vote
1answer
45 views

JQuery Selector in Vanilla JS

I've decided to reproduce the JQuery selector - specifically for finding elements by class name, ID, and tag So for example the tests could be written like ...
2
votes
0answers
322 views

Angular 8: Scroll spy implementation for a timeline Contents

I have made a timeline component that can have multiple milestone/major/minor as sub components nested within timeline container component. I have also added a side navigation for that lists all ...
3
votes
0answers
64 views

Copy-to-clipboard function from a React.js component

I have a React component with a copyToClipboard method, which all works fine, but feels extremely verbose and quite hacky (namely, having to create a new select ...
4
votes
1answer
51 views

Modularized JavaScript event handler to increment counters

In the following code we use the function Incrementer (capitalized for clarity, despite that it's to be used without new), to ...
3
votes
1answer
37 views

helper function to determine if html text is wrapped with a certain tag

I have this code that I've made to parse a string of HTML and tell me if it is all enclosed within a specified tag: ...
3
votes
3answers
54 views

Simple javascript code to create an image caption

I'm trying to become better at javascript and have written a simple script that just creates some html from getting some details from some elements (e.g. the image alt text) and inserts it onto the ...
2
votes
1answer
50 views

Is this a proper way to cancel an onMouseOver which uses setTimeout? (Vanilla JS)

I've got a working solution for an onMouseOver event which rolls over a set of images and replaces them in the element. Due to my lack of knowledge in JS I would ...
3
votes
2answers
152 views

jQuery dynamic toggle class function

I wrote this function that will toggle a class of a targeted element. Applying the class js_class_toggle to any element will trigger the function when clicking on ...
2
votes
0answers
61 views

Vanilla Javascript code to sort nested tables

I have written a code to sort a main table containing tables in each of its rows. Here I am trying to sort the table by first sorting the rows in each of the main rows and then sorting the table from ...
1
vote
0answers
23 views

Dragging and dropping a spot using TypeScript

Currently my code is based around mouse events so that it is easier to test but I will be swapping these to touch events once I have had the code reviewed. The idea of the UX is that you need to ...
0
votes
2answers
77 views

Asynchronous query to load products from laravel controller

The following code works fine. When a user clicks on an element, an AJAX request is made, which will return the query result. The results are being displayed in a view. I read many articles where ...
6
votes
0answers
66 views

Todo list using pure JavaScript [closed]

I watched a YouTube video and completed the Todo List using Pure JavaScript. Below is the code I wrote. I want to improve this code, but it 's not clear how. I want to change this code to ...
6
votes
2answers
343 views

Tic-Tac-Toe code in JavaScript

I have developed a tic-tac-toe game in native JavaScript. Can you tell me how to optimize more and what are the missing things? JSBIN The logic, modular approach, testable and scalable? ...
1
vote
1answer
49 views

Targeting only 1 event in DOM

In the picture below, I want to open a modal when a user clicks anywhere within in the yellow block, including if they click on the white ‘+’ sign. The problem is, the click event happens on a ...
1
vote
1answer
26 views

Summing buying and selling rate fetched from the web txt

I've got a class that is like a facade, like an engine for my application which is responsible for fetching data from url and summing it. I have got problem with proper names for my methods. ...
3
votes
1answer
253 views

Tic tac toe game in a web browser

I have this tic tac toe game which is very old project of mine, though I made some changes on this to improve the script to perform better. This game is functional, Any logic improvements or other ...
3
votes
1answer
48 views

Replacing GitHub usernames with links

A user wrote an issue asking if inside the bio (or any arbitrary tag), any tagged accounts can be automatically linked like on Github. I gave them this function: ...
2
votes
2answers
48 views

jQuery redirect form

I'm using jQuery to create a (hidden) form that redirects people to another page using JavaScript. ...
2
votes
2answers
216 views

JS to create Table data dynamically

The following codes generate table row dynamically. I wonder if there are better ways of generating the same data. Also instead of manually coding the heading and the table itself, is it possible to ...
4
votes
1answer
89 views

AutoSuggest: Better way to implement focus after inserting a snippet

Introduction: I am working on a javascript plugin AutoSuggest, My aim is to create an IDE like autocomplete experience in web applications using JavaScript. One of the features I have implemented is ...
4
votes
0answers
35 views

Fullscreen slideshow with fading background [closed]

For the past months I have been learning plain javascript without jquery or libraries/frameworks. So now, when I develop a website, I want to write all of the JS code by myself to fully understand ...
6
votes
1answer
65 views

Determine if a section is in view

i am currently learning to do things with vanilla Javascript. No plugins, libraries or code snippets. I want to do things on my own, so that I understand 100% of what is happening. I wrote a little ...
2
votes
1answer
70 views

Generate a Style Tag and Append to a Document

Code Review I have two functions of styleAppend and getCss, which generate and append a ...
3
votes
1answer
187 views

Move and resize square boxes with Vanilla JS

Feature requirements. I can move a square box. I can resize a square box by stretching four edges. Many square boxes can exist. I've implemented moving and resizing square boxes by module pattern. ...
-2
votes
1answer
42 views

Show maximum 4 forms on user actions [closed]

HTML ...
1
vote
3answers
148 views

1 2 3 4 5 8