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?
Related
I have a div container which holds several other divs and other content, which collectively, makes up my slideout sidenav menu.
I would like to call that entire div from another page. I have tried some suggested jquery methods, but so far, have had no luck.
This is a shortened version of what the section looks like...
<!--Opening div for menu container-->
<div id="menuContainer">
<div>
<div>
<span class="menu">
<a href="#" onclick="CollapsiblePanel_1.open();">SECTION TITLE
<p class="subMenuOpenBtn">Open ▼</p>
</a></span></div>
<div id="CollapsiblePanel_1" class="CollapsiblePanel">
<div class="tab">
<div class="subMenu">
<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
<li>Option 5</li>
</ul>
<div class="subMenuCloseBtn">
<span>Close ▲
</span>
</div>
</div><!--Closing div for menu container-->
I want to save that entire bit of code on it's own page called 'SlideOutPage' (I'm not entirely sure if tat page should be saved in an html, php, or other type page)
Then... on my index.php page, I want to create a new div or 'container', and somehow call that section of code into it.
This is possible through Javascript/jQuery, yes. Save that into a new file, then use jQuery's .load() function like so.
<div id="wrapper">
Loading, please wait...
</div>
JS:
<script>
$(function() {
$("#wrapper").load("myfile.html");
}
</script>
HOWEVER, I would suggest doing this with PHP instead. You can just include the file with a PHP include or require statement.
<?php
include "myfile.php";
?>
Difference between various methods
The best way to do it is using PHP because its a backend scripting language and wont be visible to visitor. If someone visits the webpage, it looks normal to him/her.
Through JQuery, it will be visible in source code. So, in some way visitor can know that its fetching the div from another file.
<!-- external file `menu.html`
Opening div for menu container-->
<div id="menuContainer">
<div>
<div>
<span class="menu">
<a href="#" onclick="CollapsiblePanel_1.open();">SECTION TITLE
<p class="subMenuOpenBtn">Open ▼</p>
</a></span></div>
<div id="CollapsiblePanel_1" class="CollapsiblePanel">
<div class="tab">
<div class="subMenu">
<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
<li>Option 5</li>
</ul>
<div class="subMenuCloseBtn">
<span>Close ▲
</span>
</div>
</div><!--Closing div for menu container-->
Through PHP
include 'menu.html'; or require 'menu.html'
<div id="wrapper">
<?php include 'menu.html'; ?>
</div>
or,
<div id="wrapper">
<?php require 'menu.html'; ?>
</div>
The file in which this code is called should be .php.
You can also use include_once 'menu.html' or require_once 'menu.html'. In this your file will be called only one time in a page. If there is another occurrence of same file, then it won't be included.
Through JQuery
<div id="wrapper"></div>
<script>
$(function() {
$("#wrapper").load("menu.html");
}
</script>
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.
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/
First of all, i know that there are tons of tutorials out there to show how to make a dropdown list, but i wanted to try myself with my limited knowledge to make a very simple one, and i am aware that i am probably doing it wrong, but still i wanna try it.
So this is my problem now, i have set up ul and li in html and i have setup a simple jquery code that it will slideDown the submenu when mouse enters and slideUp the submenu when mouse leaves, but it doesn't work correctly at all.
Code:
<div style="width:200px; height:400px;">
<ul id="ul" class="menu" style="border:thin solid #090;">
<li id="li">Test
<ul id="ull">
<li>Test 2</li>
<li>Test 3</li>
<li>Test 4</li>
</ul>
</li>
<li id="li">Test 2A
<ul id="ull">
<li>Test 3A</li>
<li>Test 4A</li>
</ul>
</li>
</ul>
</div>
<script>
$(document).ready(function(){
$("#ul ul").css({"color":"red","font-size":"30px"}).hide();
});
$("#li").mouseenter(function(){
$("#ull").slideDown(400).show();
});
$("#li").mouseleave(function(){
$("#ull").slideUp(400).hide(100);
});
</script>
All this, is inside one html, i am not using anything else, expet a CSS where the class "menu" is just this display:inline-block;
The problem is that dropdown menu doesn't work as it should. When i move my mouse over the Test the sub-menu appears, but this doesn't happen at Test 2A, plus when the dropdown list "drops", Test 2A follows below it aswell.
I can't explain the problem easily so i setup a jsfiddle which will help you understand.
Once again, i know that this is not right and i should have done it by using some other way, but i wanted to try using the few things i've learned so far to make a simple dropdown list.
Thanks in advance.
Id must be unique.
<li id="li">Test
<li id="li">Test 2A
Change to different id's or use a class
Corrected Fiddle
And do not take li and ul as Id's or classes.Those are reserved key words.Creates mess.
In my opinion, the best solution is to change id at one of the two minor ul and add a row in your function that call it.
<div style="width:200px; height:400px;">
<ul id="ul" class="menu" style="border:thin solid #090;">
<li id="li">Test
<ul id="ull">
<li>Test 2</li>
<li>Test 3</li>
<li>Test 4</li>
</ul>
</li>
<li id="li">Test 2A
<ul id="lull">
<li>Test 3A</li>
<li>Test 4A</li>
</ul>
</li>
</ul>
</div>
<script>
$(document).ready(function(){
$("#ul ul").css({"color":"red","font-size":"30px"}).hide();
});
$("#li").mouseenter(function(){
$("#ull").slideDown(400).show();
$("#lull").slideDown(400).show();
});
$("#li").mouseleave(function(){
$("#ull").slideUp(400).hide(100);
$("#lull").slideUp(400).hide(100);
});
</script>
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();
});