Looking to create a help page with a layout similar to http://support.google.com/plus/?hl=en. Can anyone provide advice or an example of how to update the new content list without refreshing the page?
When you click on something like "circles and streams" in the link, it updates the list on the right-hand side.
Thank you in advance!
Explore the Bootstrap framework from Twitter by visiting . This powerful tool allows you to effortlessly design layouts and implement controls. Be sure to take a look at the various examples provided.
One approach to displaying content on a webpage is through the use of javascript to toggle sections. For instance, you can dynamically show and hide relevant information using this method. An example of how to implement this can be found in the following jsfiddle http://jsfiddle.net/am2Dm/10/.
If your website contains a substantial amount of data or if the content is dynamic, you might want to consider utilizing AJAX calls to fetch your content lists. However, keep in mind that this may be unnecessary depending on the scale of your project.
For achieving your goal, consider utilizing the jQuery library. Take a look at the official documentation for jQuery. It's also recommended to familiarize yourself with CSS3 and HTML5 features as they offer various tools for styling like float, position, and display properties.
If you prefer not to rely on external libraries, you can create tableless layouts using only CSS3 and HTML5 properties.
HTML
<div style="width: 100%;">
<div style="float: left; width:50%; height: 200px;background-color:Yellow;">
<input type="button" onclick="asd(1)" value="one" />
<input type="button" onclick="asd(2)" value="two" />
<input type="button" onclick="asd(3)" value="three" />
</div>
<div id="one" style="float: left; width: 110px;height:200px;display:none; background-color:Blue;">
Cell 2
</div>
<div id="two" style="float:left;width: 110px;height:200px;background-color:Red; display:none;">
Cell 3
</div>
<div id="three" style="float:left; width: 110px;height:200px;;background-color:Green; display:none;">
Cell 4
</div>
</div>
JavaScript
function asd(a)
{
document.getElementById("one").style.display="none";
document.getElementById("two").style.display="none";
document.getElementById("three").style.display="none";
if(a==1)
document.getElementById("one").style.display="block";
if(a==2)
document.getElementById("two").style.display="block";
if(a==3)
document.getElementById("three").style.display="block";
}
Customize the contents within the divs according to your specific needs.
There are numerous Javascript resources available to assist you in accomplishing this task. Two of the most popular options include Mootools and jQuery, both of which offer a wide range of examples and tutorials to guide you through the process.
Give this a shot (no need for frameworks):
<ul>
<li><a href="javascript:loadList('Books')">Books</a></li>
<li><a href="javascript:loadList('Movies')">Movies</a></li>
<li><a href="javascript:loadList('TV Shows')">TV Shows</a></li>
</ul>
<ul id="targetItems"></ul>
<script type="text/javascript">
var items = {
Books: [
{ name: 'Harry Potter', href: 'http://www.harrypotter.com' },
{ name: 'Harry Potter', href: 'http://www.harrypotter.com' },
{ name: 'Harry Potter', href: 'http://www.harrypotter.com' }
],
Movies: [
{ name: 'Inception', href: 'http://www.inceptionmovie.com' },
{ name: 'Inception', href: 'http://www.inceptionmovie.com' },
{ name: 'Inception', href: 'http://www.inceptionmovie.com' }
],
TV Shows: [
{ name: 'Breaking Bad', href: 'http://www.breakingbad.com' },
{ name: 'Breaking Bad', href: 'http://www.breakingbad.com' },
{ name: 'Breaking Bad', href: 'http://www.breakingbad.com' }
]
};
function loadList(index) {
var targetItems = document.getElementById("targetItems");
targetItems.innerHTML = "";
for(var i = 0; i < items[index].length; i++) {
var li = document.createElement('li');
var a = document.createElement('a');
a.href = items[index][i].href;
a.innerHTML = items[index][i].name;
li.appendChild(a);
targetItems.appendChild(li);
}
}
loadList('Books');
</script>
I am puzzled by the behavior of this custom type state: interface DataType { [key: string]: string;} const [data, setData] = React.useState<DataType>({}); When I attempt to execute console.log(data === {}) It surprisingly returns false. Why ...
I am interested in adding a diagonal effect to my table. For instance, if I have a 5x5 table, I want to highlight the first row and set the background color of the corresponding column in that row to red. The same should be done for each subsequent row. ...
Greetings, I have a NodeJS server set up in two separate files: app.js and routes.js. The app.js file includes code for setting up the server, error handling, middleware configuration, and routing logic. The routes.js file contains specific route configu ...
In my Ionic 2 TypeScript file, I am facing an issue with setting the value of a variable from another method. When I close the modal, I get undefined as the value. I'm encountering difficulty in setting the value for coord. export class RegisterMapP ...
I've encountered a peculiar issue while attempting to load a module using Aurelia. The moment library was successfully loaded for date formatting, but when trying to load the numeral library in the same manner with npm install <module> --save, i ...
I recently encountered an issue with SmoothDivScroll when I attempted to load all the JS files asynchronously. I implemented my own async loading pattern using Lazyload.js by Ryan Grove. I also experimented with Modernizr's load/complete pattern, but ...
Currently, I am diving into comet programming and utilizing the cometd implementation along with the JavaScript dojo library before deploying my war files to GlassFish. The issue I have encountered is that every time I create a new project, I find myself i ...
Seeking performance metrics for a Vue application. Interested in metrics for the entire app as well as specific components. I am aware of using Vue.config.performance = true; to enable performance monitoring through dev tools, and I have considered utiliz ...
I've been experiencing issues with my $.post calls throughout my code. Despite not sending requests to different domains, everything is localhosted. My Mac OS X 10.8 automatically defined my localhost alias as ramon.local, and I'm trying to make ...
I'm having trouble getting this script to work correctly on my website. It is supposed to trigger an alert when the specified id is in the viewport, but the issue I am encountering is that the alert keeps popping up repeatedly while the id is still vi ...
Upon using CKFinder 3.2.0 with Firefox 44.0, I encountered the following error message. Interestingly, this issue is exclusive to Firefox while Chrome works perfectly fine. Any insights on what could be causing this problem and how it can be resolved? Ty ...
Is there a more efficient way to check for an object in an array based on a property, without having to go through multiple checks and avoiding potential errors with the ? operator? /** * An API returns a job object like: * { id: 123, name: 'The Job ...
After retrieving a list of options, I make an API call to validate each option. The goal is to display whether each option is valid or not. My starting array looks like: $scope.preValidationArray = [ { id: 1, description: 'Item 1' }, { id: 2 ...
After making an API call to Google Translate, the following data was returned: { "data": { "detections": [ [ { "language": "en", "isReliable": false, "confidence": 0.051902372 } ] ] } } In order to access the "language" ...
I've been experimenting with ngRoute and I'm facing an issue with templateURL not working as expected. The functionality works perfectly except for when I attempt to use templateURL. Here are the 4 files involved: test.html <p>{{test}}&l ...
Is there a way to use jQuery to dynamically change a specific value in the query string by finding and replacing that value based on the selection made from a dropdown menu on the webpage? For example: Imagine we have this query string on the current page ...
Here is the code snippet I have been working on: I am currently exploring the Swiper library documentation to understand its functionalities better. import React from "react"; // Direct React component imports import { Swiper, SwiperSlide } fro ...
I utilized the documentation provided on the Ionic website to incorporate Firebase into my mobile application. this.firebase.getToken() .then(token => console.log(`The token is ${token}`)) // store the token server-side and utilize it for sending not ...
Working with Next.js and a custom Express server, I've encountered an issue regarding basic API error handling. I have set up a simple error handling middleware that looks like this: app.use((err, req, res) => { res.status(400).send(message); ...
In my Angular application, I have a numeric textbox that displays a percentage value and allows users to update it. https://i.stack.imgur.com/eCOKe.png <label for="fees">Fees %</label> <div class="inpu ...