I would appreciate some guidance on which direction to take regarding a front-end design.
Context:
I am trying to create a page where I have 10 buttons on a top panel. Underneath this top panel will be a main panel containing N boxes of text.
Depending on what button in the top panel is clicked or active (default-button1), I want the boxes in the main panel to display the relevant boxes of text.
Example:
A restaurant menu where you have categories such as Food, Drinks, Desserts at the top. And a section which updates and shows the various options dependent on which category has been selected.
A minimal example:
3 buttons or links as Category1, Category2, Category3
Category1 should have 5 paragraphs.
Category2 should have 3 paragaraphs.
Category3 should have 8 paragraphs.
I am looking for an efficient way to implement this. Any pointers?
I understand the DOM allows one to dynamically render HTML using the call below, but I am confused as to how to 'grow' elements with this static approach. I am determined to learn more JavaScript.
document.getElementsByClassName(“”).innerHTML = "New text"
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<div class = "main_content">
<nav>
<ul id = "categories">
<li>Cat 1</a></li>
<li>Cat 2</li>
<li>Cat 3</li>
</ul>
</nav>
<article class = "items_list">
<section class ="items">
<!--# of <p> elements and inner HTML text for each element depends on which <li> element is currently active -->
<p>Item A</p>
</section>
<section class = "items">
<p>Item B</p>
</section>
<section class = "items">
<p>Item C</p>
</section>
</article>
</div>
</body>
</html>
For every Category/Button you need to add Event Handler which will trigger a function on the event of onClick.
Then according to your requirements, you can add and remove classes on paragraphs which will let you show and hide them.
Those classes can simply have display:none or display:block on it.
Related
I have a website that has a documentation section powered by Atlassian Confluence. In the footer of my documentation there is some information by Atlassian as shown in the picture.
What I am trying to do is to add a sentence above it. So far I have only been able to add it underneath the existing ul. On confluence I can only override elements by inserting new code in a custom HTML block.
My website's footer
This is the code I get from the footer when I inspect the footer element on my web browser.
<section class="footer-body">
<ul id="poweredby">...</ul>
</section>
and this is the code I am inserting into the custom HTML block to get my sentence on the footer. (As seen on the picture)
<ul id="copyright">
<li class="noprint"> THIS INFORMATION SHOULD BE ABOVE </li>
</ul>
How can I change this code so it gets inserted above the existing confluence sentence?
as documented here:
https://developer.mozilla.org/en-US/docs/Web/API/Node/insertBefore
function move() {
var copyright = document.querySelector('#copyright');
var target = document.querySelector('#poweredby');
target.parentNode.insertBefore(copyright, target);
}
window.setTimeout(move, 3000);
<section class="footer-body">
<ul id="poweredby">
<li> hello world</li>
</ul>
</section>
<ul id="copyright">
<li class="noprint"> THIS INFORMATION SHOULD BE ABOVE </li>
</ul>
Using jQuery, on document load you can dinamically move one element into another
$(document).ready(function() {
$('#copyright').prependTo($('.footer-body'));
});
I need some assist with my current problem. I have a listview in my aps.net page which is filled with stuff and looks like this (the one on the top):
listview with dragged item
I also have items in this listview which I can drag-n-drop. Doing this with the droppable and sortable provided by JQuery. The initialization stuff looks like this:
init stuff
My problem is as soon as I leave the h3 header in the listview items like its in the first picture (the bottom one) and the drag the item onto the white area, the accordion will close itself. I want the accordion stay open after I left the droparea (the grey headers) and enter the whitearea. Also to mention: every listview item is one accordion so for example if I have 3 items there are are 3 accordions (for each .accEpa)
My code looks like this but way more complicated:
<div id="wrapper" class="accordion">
<div id="wrapper2" class="accordion">
<div id="FirstListViewItem" class="accEpa"> //<--- for the accordion
<h3 id="header" class="ui-accordion-header">//<--- for the droppable
Some Text
</h3>
<div id="xx" class="accordion">
<ul class="sortable"> //<--- for the sortable
<li>
First Listview Nested Item
</li>
<li>
Second Listview Nested Item
</li>
</ul>
</div>
</div>
</div>
</div>
I have a HTML drop down menu which works fine, but it is completely static.
ie. the items within the menu are manually entered to match the links on the main header page
eg.
<li><a class="tab" href="http://">INTERNAL</a>
<ul>
<li>Internal docs</li>
<li>SQL</li>
<li>Downloadables</li>
</ul>
</li>
The menu is made up of the 3 links for sections which reside within the INTERNAL page.
If I add any sections to the INTERNAL page I have to manually amend my menu to reflect this, but I would like this item to be added automatically if I add a new page
Can this be done?
I hope so!
**EDIT:
To be clearer on this issue; I have the following html:
<div id="category_2232" class="category">
<div class="column" id="forum_259962">
<h3 class="clearfix"><span>Internal KB Documents</span></h3>
</div>
<div class="column" id="forum_20160368">
<h3 class="clearfix"><span>Downloadable Extras</span></h3>
</div>
<div class="column" id="forum_20632406">
<h3 class="clearfix"><span>SQL Scripts</span></h3>
</div>
</div>
which I use as a guide for creating my menu, which takes the form:
<li><a class="tab" href="http://">INTERNAL</a>
<ul>
<li>Internal KB Documents</li>
<li>Downloadable Extras</li>
<li>SQL Scripts</li>
</ul>
</li>
I would like to take the first code, and whenever I add a new <div>, I want a corresponding <li> entry on the menu to be updated automatically.
Please help!
Im sooo sure I could do this!
There has to be some JS somewhere that can generate menu items....
Many thanks to all involved so far
Howie
When the DOM is ready, find your list items and use the text of the anchors to create option elements which you can append to the select. It will make querying the DOM much easier if you add some ID's to your markup.
Working Demo
jQuery
$(function () {
var select = $('#internal-select');
var items = $('#internal-list li a').each(function () {
var text = $(this).text();
select.append('<option value="' + text + '">' + text + '</option>');
});
});
HTML
<li><a class="tab" href="http://">INTERNAL</a>
<ul id="internal-list">
<li> Internal docs</li>
<li>SQL</li>
<li>Downloadables</li>
</ul>
</li>
<select id="internal-select"></select>
So I have this layout and I'm planning on using javascript/jquery to change the content in lower box depending on what link is active on the upper.
Before I choose how to do this I would like some inputs on what the best practice is. Im novice when it comes to changing html content using javascript. Specially if you want to factor in doing it in the most resource efficient way.
The layout in the lower box will be different from one another. So each lowerbox layout must be present in the html from the beginning? And each layout should be contained in a div element for easiest way to change the whole block. Am I thinking correctly here?
What jQuery functions should I utilize?
jsBin demo
Wrap all your DIVs .page inside a common container #pages:
<ul id="navigation">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
<div id="pages">
<div class="page">Page 1</div>
<div class="page">Page 2</div>
<div class="page">Page 3</div>
<div class="page">Page 4</div>
<div class="page">Page 5</div>
</div>
Than just retrieve the index of the clicked navigation and make visible the .page with a same index:
jQuery(function($){
$('.page:gt(0)').hide(); // hide all pages but first
$('ul#navigation li').click(function(){
var liIndex = $(this).index();
$('.page').hide().eq(liIndex).show(); // hide all and show matching page!
});
});
I have recently been doing something similar. My advice would be to use jQuery UI's tabs feature. Each section on your page is a seperate DIV tag which you hide and show as needed. This will result in the whole page being loaded and available as soon as you press the buttons.
Go here to read more about jQuery UI tabs: http://jqueryui.com/demos/tabs/
If they must all be in the original HMTL page, then just put each block of content in it's own div, each with it's own id value and each with a common class name, and hide them all by default via CSS with display: none and then use javascript to show just the desired set of content based on a click. On each click, you can hide all of them and show the one you want to display.
Bootstrap itself has tabs support, you just need to get over included CSS style for such component in order to preserve yours.
I am going to have an ExpressionEngine weblog that will place user designed content blocks in the footer. But, it's only going to show one at at time.
My HTML looks like this:
<ul class="footernav">
<li class="first"><a class="active" href="#">Get in touch</a></li>
<li>Interested in joining?</li>
<li>Feedback</li>
<li>Link 4</li>
</ul>
<div class="copy gutters show">
<p>Lorem Ipsum</p>
</div>
<div class="copy gutters hide">
<p>Lorem Ipsum</p>
</div>
<div class="copy gutters hide">
<p>Lorem Ipsum</p>
</div>
I want to switch the show class to a hide class depending on the clicked link. Not sure how I can accomplish this. It has to be flexible enough to work with N number of content blocks--because they will be defined by the user in ExpressionEngine.
I'm pretty much brand new to JavaScript so I would really appreciate any insight, or solution for how I might accomplish this.
I think this would work with your structure:
// Cycle through each link in our ul.footernav element
$(".footernav a").each(function(i,o){
// Attach click-logic to each link
$(this).click(function(e){
// Prevent page from bouncing, reloading, etc.
e.preventDefault();
// Add .active class to this, but remove from all other links
$(this).addClass("active").closest("li").siblings("li").find("a").removeClass("active");
// Show any DIV having class .copy and same index as clicked link
// meaning, clicking the second link will show the second div
$("div.copy:eq("+i+")").show().siblings("div.copy").hide();
});
});
Demo Online: http://jsbin.com/ekecu