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.
Related
I am trying to dynamically load some links from an array(JSON encoded values) as a list inside a div. In my real application this array comes from PHP. I am using insertAdjacentHTML('beforeend', "link content") to set the content.
To style the same I am using "accordion slider" and "Perfect Scrollbar", I have achieved to combine both successfully. I am able to display the links as I want inside the div, but the scroller seems to be disappeared now.
Please check the fiddle here - https://jsfiddle.net/prashu421/2mpL61x7/
If you would check the links that aren't loaded dynamically are scrollable and the scrollbar is displayed there.
I couldn't find any clear reference on the internet for my case.
Any help is greatly appreciated.
Thanks for your consideration.
You're including dynamic HTML on the load event, but initializing the scrollbar on jQuery's $(document).ready() function) which's triggered before the dynamic html load.
So to solve this, put everything in the same function or simply at the end of your document as seen in the code of this fiddle-
https://jsfiddle.net/kumar4215/svhscqcp/
<div id="bloc-accordeon">
<ul class="accordion">
<li id="one" class="files">
One
<ul class="sub-menu" id="firstClub" style="font-size: 12px;">
<!--Container for dynamically generated links-->
</ul>
</li>
<li id="two" class="mail">
Two
<ul class="sub-menu">
</ul>
</li>
<li id="three" class="cloud">
Three
<ul class="sub-menu">
</ul>
</li>
</ul>
</div>
I'm rusty at javascript and HTML, and trying to get back into it.
Here's the sample code of the element I'd like to modify:
<div id="tabContainer" class="table">
<h1>Container</h1>
<ul class="tabs">
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<div id="tab_display">
<div id="tab1" class="tab_content"></div>
<div id="tab2" class="tab_content"></div>
<div id="tab3" class="tab_content"></div>
</div>
</div>
I'm using a version of jQuery Accordion to switch between tabs,and it works without any trouble. Clicking on tab 2, while tab 1 is selected, will clear 'tab_display' and display the contents of tab 2.
I would like to control what tab is displayed, by clicking for a button for example.
If tab 1 is being displayed and I click another button on the page, I'd like for a specific tab to be displayed (show the selection on the 'tabs' list, and also show the contents in the 'tab_dsiplay').
How can I do this?
Thanks!
Try using the solution here open-jquery-accordion-panel-with-link-outside-of-acccordion
Demo here.
Hi I am trying to create a one page website that contains multiple div's about the same size as the window.The website will have a menu that will refer to each div on the page.What I want to do is animate the window when the user clicks on one of the menu links to it's coresponding div.
http://www.nistoralexandru.comule.com/div.jpg
When a user clicks on a link I need the window to animate to that div similar to this site:
http://shahkaarshah.com/
How can I do this?
The site you're linking to is built with Flash, replicating the animation of different page elements with javascript should'nt be to hard, but there's really no quick "one size fits all" function to do it.
Here's a quick example of how it's usually done :
Build some sort of HTML structure:
<div id="site">
<div id="main" class="page">
<ul>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li>Page 4</li>
<li>Page 5</li>
</ul>
</div>
<div id="page1" class="page">Back</div>
<div id="page2" class="page">Back</div>
<div id="page3" class="page">Back</div>
<div id="page4" class="page">Back</div>
<div id="page5" class="page">Back</div>
</div>
And animate it around the viewport with a little javascript:
$('.page a').on('click', function(e) {
e.preventDefault();
var href = $(this).attr('href'),
top = $(href).css('top'),
left = $(href).css('left');
$("#site").animate({top: '-'+top, left: '-'+left}, 1000);
});
Here's a FIDDLE
You might be meaning something like accordion?
http://jqueryui.com/demos/accordion/
There are many easy-to-use accordion plugins for jquery, so they might be easier to use for complex animations than coding from scratch.
Based on your added information, maybe a grid accordion such as this?
http://css-tricks.com/examples/InfoGrid/
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
I have several blocks of text separated into their own divs. I also have several links in a navigation bar that reference these divs with an anchor link. On click, I'd like to hide all other divs except the one referenced by the clicked link. I have:
<div id="navbar">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</div>
So, when I click 'Link 3'. I'd like to hide all divs except #section3.
I'm fine actually hiding/showing each section of text using CSS, but I can't figure out how to use the link's href attribute to reference the div name.
Thanks for your help, and let me know if you need clarification of what I'm asking.
Try this:
$('#navbar a').click(function() {
$('div:not(#navbar)').hide();
$($(this).attr('href')).show();
return false; // You may or may not want this line.
});
You can see an example here.
You can use the anchor's .hash property as a selector, all you need to so is hide the divs you want first, like this:
$('#navbar a').click(function(e) {
$('.container > div').hide();
$(this.hash).show();
e.preventDefault(); //to prevent scrolling
});
This assumes you have the <div> elements you want to show in a container of some sort, like this:
<div class="container">
<div id="section1">Section 1</div>
<div id="section2">Section 2</div>
<div id="section3">Section 3</div>
<div id="section4">Section 4</div>
</div>
You can test it out here.