I have divided html page into :
<body>
<div class="menu_container">
<!-- added menu here -->
</div>
<div class="content">
<!-- body content here -->
</div>
</body>
I want to change the content of "content" div when I select menu item.
ie depending on menu item selection div content should change, like what happens in Tabviews.
How can I do so?
The latest versions of YUI include the concept of Pjax which uses History and Ajax to update the page. It's really easy to set up and it'll keep your URLs working. Check out the User Guide: http://yuilibrary.com/yui/docs/pjax/.
You only need to add the yui3-pjax class to each menu that updates the page, apply the Menu plugin, plug the Pjax plugin and have your server return the right HTML content.
<div id="menu-1" class="yui3-menu">
<div class="yui3-menu-content">
<ul>
<li class="yui3-menuitem">
<a class="yui3-menuitem-content yui3-pjax" href="/some-page.html">Some page</a>
</li>
</ul>
</div>
</div>
<div id="content">
<!-- here goes the page content -->
</div>
<script type="text/javascript">
YUI().use('node-menunav', 'pjax-plugin', function (Y) {
Y.one('#menu-1').plug(Y.Plugin.NodeMenuNav);
Y.one('#content').plug(Y.Plugin.Pjax);
});
</script>
This should do the trick:
Y.one('.menu_container').on('click', function(e) {
Y.one('.content').setHTML("<h1>Hello, <em>World</em>!</h1>");
});
Depending on the selector used instead of menu_container, you can update the content accordingly.
EDIT: In fact, delegate is probably better for your needs:
Y.one('.menu_container').delegate('click', onClick, '.menu-item');
http://jsfiddle.net/olan/w2jfh/
Related
I've created a webpage that has the following structure:
Main html that uses a side menu;
Secondary html that has the information that I want to show in the main html.
I want to achieve the following. Let's say that the secondary html has a section named intro. I want to link that section to a menu item. So when I press the corresponding button, I want to show in my main html the secondary html starting at the #intro section.
This is my sidebar nav in the main html
<div id="main">
<div class="wrapper">
<!-- LEFT SIDEBAR NAV-->
<aside id="left-sidebar-nav">
<ul id="slide-out" class="side-nav leftside-navigation">
<li class="no-padding">
<ul class="collapsible collapsible-accordion">
<li class="bold"><a class="collapsible-header waves-effect waves-blue active"><i class="mdi-action-view-carousel"></i> Field</a>
<div class="collapsible-body">
<ul>
<li class="active">Intro
</li>
</ul>
</div>
</li>
</ul>
</li>
</aside>
</div>
This is the section in the 2nd html.
<div class="divider"></div>
<div class="section" id="intro">
<li style="list-style: disc">
some text.
</li>
</div>
</div>
When I press the Intro button in the left side nav, I want to open in my main html the 2nd one at the Intro section.
The reason I want to load the 2nd html in my main one is that It uses different css styles and It ruins my formatting if I merge them.
Any solution?
Thank you!
It can be easily achieved with jQuery:
Here's my suggestion:
Step 1
First of all, make sure you have those sections in your secondary.html file:
<div id="intro">Intro section</div>
<div id="section1">Section 1</div>
<div id="section2">Section 2</div>
<div id="section3">Section 3</div>
An, in main.html, make sure you have an element with id=content. This will be your placeholder. Like this:
<div id="content"></div>
Step 2
Modify your anchors:
point href to a dummy url (#).
add a class so we can catch this with jQuery. I named here btn-load-section.
add data- attributes so we can add some useful data to each anchor, to grab it later. I added here data-url and data-section.
Like this:
<li>Intro
<li>Section 1
<li>Section 2
<li>Section 3
Step 3
At the end of our <body> section (in main.html), you can add this code:
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
/*
Executes the script inside the anonymous function
only when the page is loaded
*/
$(document).ready(function() {
/*
select all anchors with 'btn-load-section' class (class = dot before)
and bind a click event
*/
$("a.btn-load-section").on("click", function(e) {
e.preventDefault(); //this cancel the original event: the browser stops here
var url = $(this).data('url'); //get the data-url attribute from the anchor
var section = $(this).data('section'); //get the data-section attribute from the anchor
var contentDiv = $("#content"); //select the div with the ID=content (id = hash before). This will be our target div.
/*
executes the jQuery .load function
It will load the url and search for the correspondent section (load page fragment)
e.g. will call load with "secondary.html #intro" (#intro is our fragment on the secondary.html page).
*/
contentDiv.load(url + " #" + section);
});
});
</script>
As I don't know how familiar you're with jQuery, I added some comments.
The first script tag loads jQuery from a CDN.
You can read more about the jQuery's .load function here. But basically it allows to load page fragments:
The .load() method, unlike $.get(), allows us to specify a portion of
the remote document to be inserted. This is achieved with a special
syntax for the url parameter. If one or more space characters are
included in the string, the portion of the string following the first
space is assumed to be a jQuery selector that determines the content
to be loaded.
This is just a possible approach. Hope it helps!
I use fullpage.js and want to build navigation automatically when I ad a section or a slide. Therefore I need the id from the sections. Which I have in the script below. But I also need a data-anchor nested in the slide div's inside each section.
**Goal: the html structure is driven by fullpage.js. al working fine. But now I want to automatically generate a submenu for the slides. Therefor I need the id from the section. (which is done) And the value from the data-anchor to put into the href. so the href src needs to be =section0/about and section0/history. when I add a slide in the section it should automatically put a link in the nav. **
Anyone?
HTML
<div id="fullpage">
<div id="section0"></div>
<div id="section1">
<div class="slide" data-anchor="about"></div>
<div class="slide" data-anchor="history"></div>
</div>
<div id="section2"></div>
<div id="section3"></div>
</div>
JS
$( document ).ready(function() {
var sections = $('#fullpage > div').map(function(){
return '#' + this.id;
}).get();
});
RESULT MENU
<ul id="subnav" class="innernav">
<li class="subnav">About</li>
<li class="subnav">History</li>
</ul>
Edit
Does my explanation make any sense?
I'm trying to create a drop down FAQ page with jQuery and for some reason the answers are showing when I load the page.
I have my jQuery script on my page
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
And my javascript page:
<script src="js/threecatsdesign.js"></script>
My full javascript is this:
$(document).ready(function() {
$("#categories h3").click(
function() {
$(this).toggleClass("minus");
if ($(this).attr("class") != "minus") {
$(this).next().hide();
}
else {
$(this).next().show();
}
$("#image").attr("src", "");
// needed for IE so a placeholder isn't displayed for the image
$("#image").attr("style", "display:none;"); }
); // end click
}); // end ready
My HTML is this code:
<main id="categories">
<h3>What is this site about?</h3>
<div>
<ul id="web_images">
<li>We are a website that holds Photoshop lessons called tutorials. Please read our about me page for more information.</li>
</ul>
</div>
<h3>If you hold contests on the site, how do I enter?</h3>
<div>
<ul id="java_images">
<li>Go to our page called contests in the nav bar and you will need to fill out the form in order to enter.</li>
</ul>
</div><p>
<h3>I have a tutorial I would like to suggest or put up my own. How do I do that?</h3>
<div>
<ul id="net_images">
<li>Please go fill out our contact form and you will be contaced with 24 hours or less on how to proceed.</li>
</ul>
</div>
You need to add some css to hide the questions to begin with.
<style>
.faq-question div {
display:none;
}
</style>
I suggest putting this in a different file, but inline styles like this work for a quick and dirty solution.
You also should wrap each question and answer in a tag like this
<div class="faq-question">
<h3>What is this site about?</h3>
<div>
<ul id="web_images">
<li>We are a website that holds Photoshop lessons called tutorials. Please read our about me page for more information.</li>
</ul>
</div>
</div>
And change your JS to reflect the change in elements.
$(".faq-question").click(
I have an index.html containing the following:
index.html
<html>
<head>...</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<div data-role="navbar">
<ul>
<li>Page two
</li>
<li>Page three
</li>
</ul>
</div>
</div>
<div data-role="page" id="pagetwo">
</div>
<div data-role="page" id="pagethree">
<div id="headerPageThree" data-role="header">
<div data-role="main">
<div id="anyDiv"></div>
</div>
</div>
</div>
<body>
<html>
As you see, the navbar in index.html links between pagetwo and pagethree.
Furthermore I have an main.js
main.js
$(document).ready(function () {
$('<select>').attr({'name': 'fuu','id': 'load-fuu',
'data-native-menu': 'false'}).appendTo('#headerPageThree');
$('<option>').html('Load').appendTo('#load-fuu');
$('select').selectmenu();
});
Let's say I open index.html with Chrome. URL is
file:///C:/Users/index.html
Then I click on "Page three" in the navbar. URL is then
file:///C:/Users/index.html#pagethree
The problem is, that the styling of items like the selectmenu looks absolutely strange. It's transparent for example. I add more things than shown in the main.js example and some of them aren't even displayed. Meaning there is nothing where they should be.
But the most curious thing is, that if I press F5 on the page where URL is
file:///C:/Users/index.html#pagethree
, then everything is perfect. I don't get this.
What is the difference between pressing F5 on index.html and pressing F5 on index.html#pagethree?
Can anybody help?
Thanks a lot.
The theme must be set on the element, as it isn't being applied from the parent page. I am not completely sure why though...
This can be done by adding the data-theme attribute when you create the select element:
$(document).ready(function () {
$('<select>').attr(
{'name': 'fuu','id': 'load-fuu',
'data-native-menu':'false',
'data-theme': 'a'
}).appendTo('#headerPageThree');
$('<option>').attr({'value': '1'}).html('Load').appendTo('#load-fuu');
$('#load-fuu').selectmenu();
});
Lastly, if you would like, a codepen example.
Edit: the point made about the option needing a value for selection is valid (though it will still theme properly after we add data-theme)
Instead of the regular jQuery document.ready, use the jQuery Mobile events like pagecreate;
$(document).on("pagecreate","#pagethree", function(){
$('<select>').attr({'name': 'fuu','id': 'load-fuu',
'data-native-menu': 'false'}).appendTo('#headerPageThree');
$('<option>').attr({'value': '1'}).html('Load').appendTo('#load-fuu');
$('select').selectmenu();
});
If you want your option to be selectable, give it a value attribute.
DEMO
I have 3 external pages (inicio.php, perfil.php and produtos.php). And I would like them to appear dynamically and respective in #contaMenuEsq as I click in the "li".
I would like to use jQuery because my intention is to use fadeIn and fadeOut effects when navigating between these 3 links.
index.php
<div id="contaMenuDir">
<div id="contaMenuOpcoes">
<ul>
<li id='inicio'>Inicio</li>
<li id='perfil'>Perfil</li>
<li id='produtos'>Produtos</li>
</ul>
</div>
</div>
<div id="contaMenuEsq"></div>
Thank for your help in advance.
Have you checked out jQuery .load() and fadeIn?
$('#contaMenuDir').on('click','li',function(){
var text = this.attr('id');
$('#contaMenuEsq').load(text+'.php',function(){
//run fade here
});
});
I suggest you read about get() instead. It gives you more control over the actions after dynamically loading the content.