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
Related
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.
I have the following jsfiddle. I'm trying to get the right hand side div to slide to where the left div is when a user clicks on any of the example links, i can't figure out how to do this as im fairly new to CSS3 transitions and jquery. Could someone help guide me in the right direction. I've had a look at jQuery animate too but find it a little confusing.
The transition should work in IE10+, anything below it's fine if it doesnt have a transition
http://jsfiddle.net/AV22p/
Below is the structure of my HTML
<section id="modalwindow">
<div id="foodlist">
<div class="links">
<h1>Div 1</h1>
<ul>
<li>Example1 </li>
<li>Example2</li>
<li>Example3</li>
<li>Example4</li>
<li>Example5</li>
<li>Example6</li>
<li>Example7</li>
<li>Example8</li>
</ul>
</div>
</div>
</section>
<section id="modalwindow">
<div id="food_details">
<div class="details">
<h1>Recipe</h1>
<ul>
<li>test </li>
<li>test</li>
<li>test</li>
</ul>
</div>
</div>
</section>
Not sure if this is what you want since the description is quite vague. But you might be able to convert this to your needs.
divWidth checks for the with of the section. On click of a link the section containing #food_details gets moved the (negative)width of #modalwindow to the LEFT.
$('.links ul li a').click(function(){
var divWidth = '-'+$('#modalwindow').width();
$('#food_details').parent().animate({left: divWidth});
});
http://jsfiddle.net/AV22p/3/
Also note that your first example link has a different/invalid markup than the rest.
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 want to have a custom button to appear on the right side of my list view header named 'Click Me', which will perform an action via the 'on click' event. As far as I know JQuery does not have a standard way to achieve this but perhaps you know how to achieve this.
As an illustration to what I want to achieve, take a look at http://jquerymobile.com/test/docs/buttons/buttons-icons.html.
Imagine now that you are looking at list headers where the data icon is on the right side and instead of it being an icon it says 'Click Me'. Furthermore, the List Header cannot be clickable like its elements, instead the data icon must be the only clickable element in here.
Please let me know if you have any ideas, even if this is simply impossible to achieve due to JQuery, thanks!
This is what I was looking for:
<ul data-role="listview">
<li data-role="list-divider">
Fruits
<span class="ui-li-count">
<a href="#" data-role="none" data-theme="b">
Button
</a>
</span>
</li>
<li>Apples</li>
<li>Grapes</li>
<li>Others</li>
</ul>
Note that the list divider contains a SPAN which acts as a button... quite ingenious :)
Anyways, thanks for your help!
You are looking for a Split Button list
This is an example you can put two icon buttons inside:
<ul data-role="listview" data-inset="true" style="min-width:210px;">
<li data-role="list-divider">Opciones de platillo</li>
<li><a href="#" >Notas</a></li>
<li>
Tiempo
<div style="float: right;">
Plus
Minus
</div>
</li>
<li>
Comensal
<div style="float: right;">
Plus
Minus
</div>
</li>
<li>Modificadores</li>
<li>Terminadores</li>
<ul>
</div>
I am using jquery UI tabs and want to know that , is it possible to point a div's id which is not present in
the main tab div container, means
<div id="tabs">
<ul>
<li>tab1</li>
<li>tab2</li>
<li>tab3</li>
</ul>
<div id="tabs-1">
<p>Tab 1</p>
</div>
<div id="tabs-2">
<p>Tab 2</p>
</div>
</div>
<div id="outerdiv">
<p>Tab 3</p>
</div>
I tried this but div#outer contents not opening when i click on tab3. How can i do this?
I believe the default jQuery plugin is looking $(this).find("#outerdiv") (where this=#tabs) which your element is not.
There are ways of getting this to work, but I think the neatest thing to do would be to move #outerdiv into #tabs.
If you insist on keeping the markup the same, you can make use of the load method like so:
$("#tabs").tabs({
load: function (event, ui) {
switch (ui.index) {
case 2:
$("#tabs div").hide();
$("#outerdiv").show();
break;
}
}
});
But I don't know how this will affect the rest of your tab panels. You'll probably have to add them all into this switch function.
You could move the div using .appendTo() before initialising the tabs :
$("#outerdiv").appendTo("#tabs");
Working example here