In my main navigation bar there is a menu named category & item and it has two submenus which names are category and item respectively. I have only one page to display these two section.
My page is category_item.php and it has two different tabs to display each sections. In this case it is category and item.
So my problem is I need to open category and item tab when clicking on category and item links on the submenu.
UPDATE -
This is code from main navigation bar
<li class="current">
<a>Category & Item</a>
<div class="menu-container">
<div class="menu-link">
Category
</div>
<div class="menu-link current">
Item
</div>
</div>
</li>
This is from category_item.php page
<div class="ui-widget-header ui-corner-top">
<ul>
<li>My Category</li>
<li>My Items</li>
</ul>
</div>
<div id="tabs-1" class="tabs3">
my stuff...
</div>
<div id="tabs-21" class="tabs3">
my stuff...
</div>
Can I know is it possible to do?
Thank you.
You can do this using Javascript. Just toggle property display of that class from none to block and vice versa.
If you are using jQuery, you can do this:
$(document).ready(function() {
$('#cat_link').click(function() {
$('#tabs-1').hide();
$('#tabs-2').show();
return false;
});
$('#item_link').click(function() {
$('#tabs-2').hide();
$('#tabs-1').show();
return false;
});
});
You also have jQuery-UI widget tabs.
If you are using pure javascript, you can do it like this (reference):
function hideshow(which){
if (!document.getElementById)
return
if (which.style.visibility=="visible")
which.style.display="hidden"
else
which.style.display="visible"
}
Related
On my website, I want to make a navigation bar just like this, with categories (here 2012) and articles (here May - October). I've got a JSON object with all categories (id, name) and one with all articles (id, title, body, category), which angular gets for me.
The current HTML is as follows:
<!-- The angular controllers are already initialized before this piece of code -->
<div class="menubar">
<ul>
<li class="cat" ng-repeat="infocategory in info.infocategories">
{{infocategory.name}}
<ul>
<li class="arti" ng-repeat="infoentry in info.infoentries">
<!-- The link links to a function that sets the correct tab -->
<a href ng-click="tab.setTab({{infoentry.id}})">{{infoentry.title}}</a>
</li>
</ul>
</li>
</ul>
</div>
And the JavaScript:
app.controller('InfoController', ['$http', function($http){
var info = this;
info.infocategories = [];
info.infoentries = [];
// This all works correctly
$http.get(api + 'info_categories?pageSize=20&pageNumber=1').success(function(data){
info.infocategories = data.data;
});
$http.get(api + 'info_posts?pageSize=20&pageNumber=1').success(function(data){
info.infoentries = data.data;
});
}]);
However, as you can imagine, this code displays all entries under the categories, but I want only the entries that belong to the specific category to be displayed.
I'm relatively new to AngularJS, so any help is greatly appreciated. If there's any code lacking or unclear, please tell me. Thanks in advance!
Never mind, I already fixed it myself. I guess I was thinking too difficult...
<div class="menubar">
<ul>
<li class="cat" ng-repeat="infocategory in info.infocategories">
{{infocategory.name}}
<ul>
<li class="arti" ng-repeat="infoentry in info.infoentries" ng-show="infoentry.cat == infocategory.id">
<a href ng-click="tab.setTab(infoentry.id)">{{infoentry.title}}</a>
</li>
</ul>
</li>
</ul>
</div>
It's 3:40AM and I'm going to give up trying for tonight.
The tabs will not update the page outside of the navigation area.
The PanelController looks like this:-
app.controller('PanelController', function($scope) {
$scope.tab = 1;
$scope.selectTab = function(setTab) {
$scope.tab = setTab;
};
$scope.isSelected = function(checkTab) {
return $scope.tab === checkTab;
};
});
and the nav pane looks like this:-
<div class="navbar-collapse collapse" ng-controller="PanelController">
<ul class="nav navbar-nav navbar-right">
<li ng-class="{ active:isSelected(1) }">
<a href ng-click="selectTab(1)">Blog</a>
</li>
<li ng-class="{ active:isSelected(2) }">
<a href ng-click="selectTab(2)">About{{tab}}</a>
</li>
<li ng-class="{ active:isSelected(3) }">
<a href ng-click="selectTab(3)">Contact</a>
</li>
</ul>
</div>
and the placeholder HTML for my two tabs is as follows:-
<div ng-controller="PanelController">
<div ng-show="isSelected(1)">
<p>Hello</p>
</div>
<div ng-show="isSelected(2)">
<p>Please work</p>
</div>
</div>
As you can see, the {{tab}} next to 'About' in my navbar is updating in my view as I click the tabs, as is the active class. When I place a {{tab}} expression outside of the navbar it isn't updating whenever it's clicked. Obviously this is something related to the scope of the variable, but I am using the PanelController on the parent of both the nav and my main area.
I can't see what I'm doing wrong.
I'd appreciate a fresh pair of eyes -- I've already some help with this already and any more will be graciously accepted.
The problem diagnosis is fairly simple, 2 controllers means 2 instances that each have their own scope
You would need to use a service or events to have them communicate together
I'm creating an application in jsp & servlet. So I have created a home.jsp page it is a main page of an application and it contains a menu bar . When user clicks on menu item the following page should appear in my iframe and if user clicks on another menu item the selected page should appear in the same iframe.
I need a help.... The following code is creating a menu bar and menu item
<li>Master
<ul>
<li>Customer</li>
<li>Suplier</li>
<li>Item</li>
</ul>
</li>
<li>Transaction
<ul>
<li>Purchase</li>
<li>Sales</li>
</ul>
</li>
<li>Contact</li>
After menu bar I have a iframe in which I want to show a menu item.
I don't know how do i do this. please help me out
You will need to bind a function onclick of your <a> tag. Then using jQuery find the href of the <a> which is clicked, finally assign that href as src of your iframe
HTML
<li>Master
<ul>
<li>Customer</li>
<li>Suplier</li>
<li>Item</li>
</ul>
</li>
<li>Transaction
<ul>
<li>Purchase</li>
<li>Sales</li>
</ul>
</li>
<li>Contact</li>
<br />
<iframe src="" height="300" width="500"></iframe>
jQuery
$(document).ready(function () {
$('a').click(function () {
var target = $(this).attr('href');
$('iframe').attr('src', target);
return false;
});
});
Here's a working DEMO. I just changed the href of first two items as example.
I am trying to output the link in list "li" from json data and pass it to jquery mobile elements. But the link on "li" seem output like regular link (link with blue color instead of properly listview jquery mobile) after I append with jquery, and did not show attribute css for jquery mobile.
Don't know if I explain it correctly, but what am I doing wrong here??
<?php include "_header.php" ?>
<div data-role="header" data-theme="c">
<div align="center">
//some code
</div>
</div><!-- /header -->
<div data-role="content">
<div align="center"><img src="imgs/charmchasers-m.png" alt="Charmchasers logo" width="250px" ></div>
<div class="content-primary">
<ul data-role="listview" data-inset="true" data-theme="e">
<li>
<h3>North America</h3>
<p>H-D Dealer Charms - USA & Canada.</p>
<ul data-role="listview" data-filter="true" data-theme="c" data-inset="true" id="state-list">
</ul>
</li>
<li>
<a href="display.php?state=international" data-transition="slide">
<h3>International</h3>
<p>H-D Dealer Charms - Asia & Europe.</p>
</a>
</li>
<li>
//some code
</li>
<li>
//some code
</li>
</ul>
</div>
</div><!-- /content -->
<div data-role="navbar" data-iconpos="bottom">
<ul>
<li>New Charms</li>
<li>//some code</li>
</ul>
</div><!-- /navbar -->
<script>
(function() {
var json_url = 'http://localhost:8888/MOD/charmchasers/app/mysql-to-json.php';
$.getJSON(json_url, function(data){
$.each(data, function(i, item) {
$('#state-list').append('<li>' + see_abbrv(item.d_state) + '</li>');
});
});
}) ();
</script>
Any idea??
Every time new content is added jQuery Mobile needs to be forced to enhance page markup. It can be done in numerous ways, and if you want to find out more take a look at this ARTICLE, to be more transparent it is my personal blog. Or take a look HERE.
This function should be used:
$('#state-list').listview('refresh');
And code needs to be changed like this:
(function() {
var json_url = 'http://localhost:8888/MOD/charmchasers/app/mysql-to-json.php';
$.getJSON(json_url, function(data){
$.each(data, function(i, item) {
$('#state-list').append('<li>' + see_abbrv(item.d_state) + '</li>');
});
$('#state-list').listview('refresh');
});
}) ();
One more thing to remember, this line must be used inside a $.getJSON but after $.each loop finishes with content appending. In the end one last thing to remember, if possible classic jQuery DOM ready functions should not be used with jQuery Mobile, page events should be used instead, find more about it HERE.
"if you generate new markup client-side or load in content via Ajax and inject it into a page, you can trigger the create event to handle the auto-initialization for all the plugins contained within the new markup." - http://jquerymobile.com/demos/1.0/docs/pages/page-scripting.html
So after appending the new list items you have to trigger the create event to build the listview. try:
$('ul').listview('refresh');
or
$('ul').trigger('create');
EDIT:
try this inside the $.each() loop:
$('#state-list').append('<li>' + see_abbrv(item.d_state) + '</li>').listview('refresh');
I just added .listview('refresh'); at the end of each append. If the list view is already initialized it should work.
I'm using bootstrap 2.2.1 and for whatever reason the data-parent attribute is not doing what is intended. It does not close a previous opened target when i click another target. Here's a fiddle with the code below, any ideas on how to fix this ?
<div id="accordion">
<ul>
<li>
<a href="#" data-toggle='collapse' data-target='#document', data-parent='#accordion'>option 1</a>
<ul id="document" class="collapse">
<li> suboption 1</li>
<li> suboption 1</li>
<li> suboption 1</li>
</ul>
</li>
<li>
option 2
</li>
<li>
option 3
</li>
<li>
<a href="#" data-toggle='collapse' data-target='#document2', data-parent='#accordion'>option 4</a>
<ul id="document2" class="collapse">
<li> suboption 1</li>
<li> suboption 1</li>
<li> suboption 1</li>
</ul>
</li>
</ul>
</div>
It says in the Bootstrap Documents:
If a selector is provided, then all collapsible elements under the
specified parent will be closed when this collapsible item is shown.
(similar to traditional accordion behavior - this is dependent on the
panel class)
so it has to be used with panel-groups, but you can override the javascript anyway.
http://getbootstrap.com/javascript/#collapse-options
I couldn't get this to work either - this may be something in the Bootstrap JS related to the fact that you are using lists rather than divs?
So to get it to work, I had to override the click event. Based on this question here: Collapsible accordion doesn't work inside a dropdpwn-menu Bootstrap
I added an accordion-toggle class to each option link, and then added the following JavaScript to get it to work:
$(document).on('click', '.accordion-toggle', function(event) {
event.stopPropagation();
var $this = $(this);
var parent = $this.data('parent');
var actives = parent && $(parent).find('.collapse.in');
// From bootstrap itself
if (actives && actives.length) {
hasData = actives.data('collapse');
//if (hasData && hasData.transitioning) return;
actives.collapse('hide');
}
var target = $this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, ''); //strip for ie7
$(target).collapse('toggle');
});
This fiddle shows it in action.
've been struggling with bootstrap collapse as well. I was trying to something do something slightly different. I wanted inline toggle behavior. See my JS fiddle below. What I found is that bootstrap seems to require the existence of the "accordion-group" div in addition to the data-parent attribute covered in their docs. So either there is a bug in the JS or their docs do not include it. I also had to zero out the styles on the accordion-group div...
http://jsfiddle.net/cssguru/SRFFJ/
<div id="accordion2">
<div class="accordion-group" style="border:0;padding:0;margin:0">
<div id="collapseOne" class="collapse in">
Foo Bar...
<a data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
Show Herp Derp
</a>
</div>
<div id="collapseTwo" class="collapse">
Herp Derp...
<a data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
Show Foo Bar
</a>
</div>
</div>
</div>
You have to use accordion-group class in your items, see issue https://github.com/twitter/bootstrap/issues/4988