Dynamically reordering DIV elements [closed] - javascript

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 7 years ago.
Improve this question
I recently started studying html, css and javascript since I'm quite interested in being able to create my own news website and I realized that I don't really know how to accomplish the following thing :
I want my website's homepage to have 10 div blocks and every one of them to have a headline with hyperlink to the corresponding html page. However, when I add a new div, I want the bottom div block disappear so it can make room for the newest div that's gonna be on top.
To be quite honest I have no idea what I need to study to accomplish this. Here's an image depicting what I want to accomplish.
Can you throw me a brief explanation or some keywords for me to google in order to understand how to do that?

This is a bit of a tricky question without knowing precisely how you want the items (the div elements you mentioned) to be added.
If you are adding these items to the set dynamically (without reloading the entire page), then you may want to use the overflow property of the container of these items. This way, you can keep the items that were already in the set from disappearing as someone is about to visit them.
Otherwise, if you plan on only loading the latest items in your database when the page is visited, you will simply have to use the correct queries to return only the correct amount (the amount that fits in your "set") of most recent data from your database.
I should probably mention that building this website from the ground up without any help will be quite the challenge for a beginner. Especially since you will have to do all of the back-end work as well to set up your database. I'd advise seeking help from someone with experience in this area if you can, because it wouldn't be much fun to start off in the wrong direction and have to completely restart!

Related

Simple Questions/Answer Games [closed]

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 3 years ago.
Improve this question
Thank you for taking the time reading this!
A quick disclaimer, I have never coded anything in my life!
I know some basics terms so you can communicate your response without defining them.
Anyways, my project is a simple game.
You press [START]
You hear a "random" word
You have a type-in box,
if you fill it right you get +5 points and get a random word .... and so on.
You fill it wrong, you lose immediately [gameover]
Although, I would deeply appreciate to code the whole game, for some of you it is relatively simple - I wish to do it myself for the learning experience and sense of accomplishment!
For now, I only need a push in the right direction.
I aim to use it on my tablet or phone (both run android)
Best,
haz
You should start by learning the fundamentals of JavaScript and HTML (should also learn CSS if you want the app to look nice). There are many sites (other than SO) that have multiple tutorials and/or full documentation (i.e. MDN, W3Schools). You could also use online teaching platforms for that.
Here are a couple of things you should consider after getting a grasp of the basic concepts:
When do you want to check if the user inserted the right input (timer, on enter, a submit button)?
Where will the sounds be stored and how will you retrieve them (a collection of sounds of files, a database with a server, a single big sound file containing all of the words)?
Regardless of how you store the sounds you will need a way to map text to the sound and the random number (Math.random()) to one of the two.
Finally create a JavaScript function that resets the text and gets a new word every time the user gets the word right or when the initial start button is clicked.
Once you reach any questions on the actual coding, search for the problem in SO (odds are it has been asked before). If you can't find an answer to your question create a new question (you should read How to ask first).

Infinite-like space for Conway's Game of Life in html/js with canvas [closed]

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 5 years ago.
Improve this question
I want to create a CellularAutomation(Life Game) using HTML/js, and I've already realized one with canvas and js.
But I have some trouble in the margin zone. In my case, a slider slid to the edge and turns out a cube(grave OR still live pattern). Maybe I should, for example, create an array[100][100] and show array[90][90] in the middle, and that I am afraid that the cube(grave...) could influence other cells(I mean alive cell like another slider) which slid by it.
But space(canvas) for all cells is finite. I remember I've visited a web site(I forgot the URL -_-!) that simulates LifeGame and I can use mouse scroll to zoom in or out. It gives me a feeling that it's infinite and I can zoom out to make those cells looks very small. The most important is that it has no edge problem in my case at all.
I'm not sure that the web is or is not using canvas, maybe it uses SVG.
So, how to create an infinite or infinite-like space for those cells.
Thanks a lot!

What do you call this bug and is it a CSS, JS, library bug? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I have this bug happening in my site where my menu drops down and instead of being render on top there is this one area that is under the table.
I am looking for an answer but am not sure exactly what is the bug called, or if it is a CSS, java script, or library problem. The menu is created using Kendo Ui and the table/Grid is created using JqxGrid. If you guys can help me identify the name of this behavior it will help me a lot in finding the solution. Or if you know the reason that is even better. Before I show code I would like to try to solve this on my own. Thank you.
It looks to me like an issue with your CSS. The row of the grid you have is at a higher z-index than your menu. In my experience the best thing to do is to explicitly (where possible) give your menu items z-indices higher than anything else you have on the page (or would want). eg. if your highest z-index is 100, use 1000 for the menu.

New web to print solution [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I'm working on a web-shop with a personalize function. The web-shop is going to sell prints. Before customers goes to check out, they will be able to customize their product/print with just changing custom text on the designs. I know their is many different web2print solutions. I'm thinking about using Adobe's Scene7 web to print solution. It's a service and will cost money, so I rather do something more simple.
The thing is that most web2print solutions are so advanced with so many edit options. I just want to have limited rows of text to customize.
So my idea was to make the designs in html and css. With a basic background image and text on top of the background image. When the customer is done filling in the form for the text and clicks order. The web pages makes the html-css coded customised design and makes it to an image that gets mounted on high resolution printable pdf.
There is many web to pdf solutions, but the problem is that they doesn't seem to make an exact flat copy of what's shown in the design. I want this to work server side.
In my head this doesn't seem so advanced, maby i'm missing something?
I know css and html good, I can also handle javascript and some php. But i'm also open to learn new languages and programming skills to get this to work.
Thanks!
Use SVG which is the standard vector format (can be resized without loss in quality) and will look the same across implementations.

JavaScript carousel without jQuery [closed]

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 8 years ago.
Improve this question
I'm trying to build a JavaScript carousel exactly like the simple version of the famous JCarousel but I want to do it with no jQuery at all. Why do I want to do that? Well, because I'm trying to really learn and understand how JavaScript works.
I've been searching forever to find an example with no use of libraries but I haven't been able to find anything. If anyone can point me out to something similar to what I need I'd appreciate.
Now, basically my question when it comes to build the carousel is related to the movement of the images in the list. So I have all the images in a list, I have buttons for the arrows left and right, ok but when I trigger the event I just don't know where to start in order to move all the images left or right...
Any clues?
You'll likely find examples that use libraries because some of these things are pretty intense. The theory is that you'll want to make a very wide div with all the images arranged horizontally, then on button pushes, set the div's css's left position to add or remove the value of the image's width. Libraries are very good at wiring up button clicks to callback functions, querying and setting an element's css, measuring an element's width, and manipulating the dom to take (for example) a list of <li> tags and making it into a very wide div. Add the graphic design constraints, and though I applaud and reverence your desire to do it by hand, you'll spend a very long time reinventing the wheel.

Categories