I'm new to Foundation 4 and am currently trying to do the following:
I'm using the section-container horizontal-nav and was wondering if anyone knows the configuration to get the section container to display its content first by default instead of hiding it until it's been clicked? So when the page loads, the section will be shown first until the user clicks on "Section 1".
<div class="section-container horizontal-nav" data-section="horizontal-nav">
<section>
<p class="title" data-section-title>
Section 1
</p>
<div class="content" data-section-content>
<ul class="side-nav">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li class="divider"></li>
<li>Link 1</li>
</ul>
</div>
Tried adding active into the class attribute?
<div class="content active" data-section-content>
The section is placed as a horizontal nav-bar and I'd like for it to
be shown when the page loads as if the user has already clicked on it.
You can achieve this by giving you menu items an id and open that menu in jquery.
Section 1
then add this to the script section of your page:
$(function () {
$("#menu1").click();
});
Related
I have a dashboard feature on my website where I'm using ajax and jquery to render partial content. That is I have a sidebar and when the user clicks one of the items the content of the page changes but not the sidebar, navbar, footer and you get the point.
But what happens to the content thats not displayed anymore? Is it still there in the background slowing down my page? Should I avoid alternating between large amounts of content in this manner?
It depends on the implementation. Let's take a simple example:
$(function () {
$("aside nav a").click(function (e) {
e.preventDefault();
$("#content").load($(this).attr("href"));
});
});
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<aside>
<nav>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
</nav>
</aside>
<main>
<h1></h1>
<div id="content"></div>
</main>
The above code, scraps everything inside the #content div and loads fresh content from AJAX. The old content is not there anywhere in the page. Most of the implementations are similar to this.
i have 3 tabs place on my website
tab 1| tab 2 | tab 3
i am using jquery for the functionality of these tabs, however it is not working, the page shows only tab 1 details when i click on any other tab it doesn't get loaded
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script>
$(function() {
$( ".tabs" ).tabs();
});
</script>
<div class="tabs" ">
<ul>
<li data-tab="tab 1" class="active" ga-action="tab 1 Tab" ga-label="">tab 1</li>
<li data-tab="tab 2" class="" ga-action="tab 2 Tab" ga-label="">tab 2</li>
<li data-tab='tab 3' class=''>tab 3</li>
</ul>
<div id="tab 1" class="tab active">
<p> Written Material one </p>
</div>
<div id="tab 2" class="tab">
<p> Written Material two </p>
</div>
<div id="tab 3" class="tab">
<p> Written Material three </p>
</div>
</div>
Can anyone tell me how can i make the tabs work
There are several errors in the code you've posted:
There's an orphaned double quote " in the top-level div. That's invalid HTML
Your <li>s don't include any buttons/links. The tabs widget expects to have an <a> element within the li, with which to take the user to the corresponding tab
Your content div's id attributes contain spaces. That's invalid HTML.
To fix these change:
<div class="tabs">
...
<li data-tab="tab-1" class="active" ga-action="tab 1 Tab" ga-label="">
tab 1
</li>
...
<div id="tab-1" class="tab active">
...
Here's a working fiddle example: http://jsfiddle.net/9uvmktb8/
That's all the apparent problems, if it's still not working I'd look for the problem in omitted code. Let me know if this isn't the functionality wanted (as the question is a little unclear)
Currently your are not telling your li elements where to go when clicked.
You can try the below code
<div class="tabs">
<ul>
<li class="active">tab 1</li>
<li class="">tab 2</li>
<li class=''>tab 3</li>
</ul>
<div id="tabs-1" class="tab active">
<p> Written Material one </p>
</div>
<div id="tabs-2" class="tab">
<p> Written Material two </p>
</div>
<div id="tabs-3" class="tab">
<p> Written Material three </p>
</div>
</div>
In the above code, with the help of a link we can tell that on click which tab to display.
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.
First of all, what do I mean by "fluid page"? I mean one long page that is broken into id sections which show those id's as pages. It's most basic structure looks like this:
<div class="mainnav">
<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="container-fluid"> Page 1 content </div>
<div id="page2" class="container-fluid"> Page 2 content </div>
<div id="page3" class="container-fluid"> Page 3 content </div>
<div id="page4" class="container-fluid"> Page 4 content </div>
<div id="page5" class="container-fluid"> Page 5 content </div>
<!-- sticky footer -->
<div class="footer"></div>
So as you can see whenever the you hit the menu item for that ID, the content slides up until it reaches that Id and it displays the content as if it was a different page. Easy enough!
My problem is, I have the footer sticky and I did that so that when you click to the next page (ID) the footer is still there, EXCEPT, I don't want it to show when #page1 is selected.
I attempted to build a small JS, but my JS is less than great. Here is my attempt
<script type="text/javascript">
function hideFooter(){
$("#homeContainer").css(display:none);
}
$(document).ready(function() {
hideFooter();
});
</script>
Obviously, not working. Here is a FIDDLE that you can use.
Any ideas!?
You just need to add a handler on the .mainnav a tags and toggle as appropriate:
$(document).ready(function() {
Viewport();
$(window).bind('resize', Viewport);
$('.mainnav a').click(function(){
if (this.href.indexOf('#page1') == -1) {
$('.footer').show();
} else {
$('.footer').hide();
}
});
});
http://jsfiddle.net/taHCv/4/
Bit of a silly question here but here goes... say I wish to use the jQuery tabs but instead of my tabs pointing to DIVs within the same page I want to point them to pages within my site or even external pages... for example
<div id="tabs">
<ul>
<li>Page 1</li>
<li>Profile</li>
<li>Photos</li>
<li>Page 3</li>
<li>Page 4</li>
</ul>
<div id="profile">
<p>Profile</p>
</div>
<div id="photos">
<p>Photos</p>
</div>
</div>
For the tabs pointing to Page 3 and Page 4 would I have to use an IFrame or a Div with an iFrame within to display the desired content? For example
<div id="tabs">
<ul>
<li>Page 1</li>
<li>Profile</li>
<li>Photos</li>
<li>Page 3</li>
<li>Page 4</li>
</ul>
<div id="profile">
<p>Profile</p>
</div>
<div id="photos">
<p>Photos</p>
</div>
<div id="page3">
<iframe></iframe>
</div>
</div>
or
<div id="tabs">
<ul>
<li>Page 1</li>
<li>Profile</li>
<li>Photos</li>
<li>Page 3</li>
<li>Page 4</li>
</ul>
<div id="profile">
<p>Profile</p>
</div>
<div id="photos">
<p>Photos</p>
</div>
<iframe id="page3"></iframe>
If this question makes no sense or my wording is bad please say and I'll improve my question.
UPDATE **
Sorry I should add that when using the original code (the first block) the tabs that reference pages and not DIVs are not shown when the user uses IE8. IE9 seems fine... my problem was risen when testing in IE8! However the first tab (pointing to Page1) is displayed when the page loads... when I click on the Page 3 or Page 4 links nothing is shown...
If you are using jQueryUI Tabs, you could use select or show event for this. For example:
$( ".selector" ).tabs({
show: function(event, ui) {
// do your stuff with changing attribute `src` of your iframe
}
});
Just use an iFrame: <iframe id="page3"></iframe>
Have you tried this and run into some kind of problem?