I have a menu in a PHP page:
<li data-target='MA'><span>M.A.</span></li>
<li data-target='MBA'><span>M.Com.</span></li>
<li data-target='MBA'><span>B.E.</span></li>
and I have content:
<p id="MA" class='content'>MA</p>
<p id="MCOM" class='content'>MCOM</p>
<p id="BE" class='content'>BE</p>
I have to selectively show the content. How do I do it?
You need to search for javascript solution.
For example look on the answer to this question:
Responsive menu show and hide on click
Solution:
function switchContent(id) {
var content = $(('#' + id));
$('.content').not(content).hide();
content.show();
}
function handleHash() {
switchContent(location.hash.substring(1));
}
window.onhashchange = handleHash;
$(handleHash);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<li data-target='MA'><a class='link' href="#MA"><span>M.A.</span></a></li>
<li data-target='MCOM'><a class='link' href="#MCOM"><span>M.Com.</span></a></li>
<li data-target='BE'><a class='link' href="#BE"><span>B.E.</span></a></li>
<p id="MA" class='content'>MA</p>
<p id="MCOM" class='content'>MCOM</p>
<p id="BE" class='content'>BE</p>
Related
This is the Div with UL on the webpage.
<div id='sites'>
<ul style="display: block;">
<li data-product-id="55">
Test1<br><em class="environment">Production</em>
</li>
<li data-product-id="99">
Test2<br><em class="environment">Production</em>
</li>
<li data-product-id="98">
Test3<br><em class="environment">Production</em>
</li>
<li data-product-id="61">
Test4<br><em class="environment">Production</em>
</li>
<li data-product-id="97">
Test5<br><em class="environment">Production</em>
</li>
<li class="active">
Test6<br><em class="environment">Production</em> <a class="flat button" href="/product_center">Settings</a>
</li>
</ul>
</div>
The page loads with Test6 ul by-default and I want to click on Test5.
The CSS locator provided by Firepath is "#sites>ul>li>a". So I tried this in casperjs:
var casper = require('casper').create({
verbose: true,
logLevel: "debug",
});
casper.start('http://localhost:8080', function() {
this.echo(this.getTitle());
});
casper.then(function(){
casper.page.injectJs('jquery.js');
this.evaluate(function (){
$("#sites>ul>li")[4].click();
});
this.capture('screenshot.png');
});
casper.then(function() {
this.echo(this.getTitle());
});
The title that comes up is always of the current page. It should have clicked on Test5 and fetched the title of the Test5 Page.
What I am doing wrong?
Try #sites .active as the selector
I'd do
this.click('#sites .active') instead of
casper.page.injectJs('jquery.js');
this.evaluate(function ()
{
$("#sites>ul>li")[4].click();
});
edit for comment:
try this then
#sites li:nth-child(5) a
square bracket for JS array returns "object HTMLDivElement"; while .slice() returns array.
click() function normally coming along with array objects.
So your codes should go to:
$("#sites ul li").slice(4,5).click()
I'm trying to do a vertical menu with dropdowns that can be activated by an arrow toggle, while still keeping the top level link active and clickable. I'm using a custom CMS so I have some constraints as far as how I can make this work.
HTML
<ul class="topnav">
<li class="tn_first">
<span></span><a class="topmenu" href="/default.asp">Home</a>
</li>
<li class="tn_mid">
<span></span><a class="topmenu" href="/listings.asp">My Listings</a>
<ul class="subnav">
<li class="sn_first">
<a class="submenu" href="#">Listing 1</a>
</li>
<li class="sn_mid">
<a class="submenu" href="#">Listing 2</a>
</li>
<li class="sn_last">
<a class="submenu" href="#">Listing 3</a>
</li>
</ul>
</li>
<li class="tn_last">
<span></span><a class="topmenu" href="/links.asp">System Pages</a>
<ul class="subnav">
<li class="sn_first">
<a class="submenu" href="#">Page 1</a>
</li>
<li class="sn_mid">
<a class="submenu" href="#">Page 2</a>
</li>
<li class="sn_last">
<a class="submenu" href="#">Page 3</a>
</li>
</ul>
</li>
</ul>
So I've got a pretty straightforward UL LI menu system. I've added to the template of the top level nav a span tag, which I wanted to use as a toggle switch. The span can be changed to anything, it's just what I have in there currently.
The issue I've run into is that given this is a template system, I have the option of putting the span in, but don't have the option to show it conditionally based on whether ul.subnav exists in the same li. So I need some way of applying display:block to the ones that actually meet this condition, then I'll just display:none the other spans by default.
I tried using this solution and it did work to a point, but it doesn't work with multiple dropdowns, it only seems to work if you have a single instance of a dropdown in your menu structure.
jQuery Toggle Dropdown Menu
and
http://jsfiddle.net/hXNnD/1/
Javascript
jQuery(document).ready(function () {
var subMenu = jQuery("li ul li");
var linkClick = jQuery("ul li").filter(":has(ul)");
subMenu.hide();
linkClick.click(function (e) {
e.preventDefault();
subMenu.slideToggle("fast");
});
});
I created another example that has 2 sub ULs so you can see where the code is falling down.
http://jsfiddle.net/BxsEX/
Hide with CSS your spans and go for: $('.topnav li:has(ul) span').show();
http://jsbin.com/ujoqek/1/edit
CSS:
.topnav li span{ display:none; }
jQ:
var arrow = ['▼','▲'];
$('.topnav li:has(ul) span').show().html( arrow[0] ).data('a',0);
$('.topnav li > ul').hide();
$('.topnav span').click(function(){
$(this).closest('li').find('ul').slideToggle();
var arrw = $(this).data('a');
$(this).html( arrow[++arrw%2] ).data('a', arrw);
});
I think this is all you wanted. I may be wrong.
$('li').each(function(){
//if we can find a UL with the class of subnav within our LI
if($(this).find('ul.subnav').length){
//find the span within this LI and give it a display block
$(this).find('span').css('display', 'block')
}else{
//otherwise, hide the span.
$(this).find('span').css('display', 'none')
}
});
My html
<ul class="nav nav-tabs tabs-up" id="friends">
<li> Contacts </li>
<li> Friends list</li>
<li>Awaiting request</li>
</ul>
<div class="tab-pane active" id="contacts">
</div>
<div class="tab-pane" id="friends_list">
</div>
<div class="tab-pane urlbox span8" id="awaiting_request">
</div>
My javascript code :
$('[data-toggle="tabajax"]').click(function (e)
{
e.preventDefault()
var loadurl = $(this).attr('href')
var targ = $(this).attr('data-target')
$.get(loadurl, function(data) {
$(targ).html(data)
});
$(this).tab('show')
return false;
});
I have given links for tabs respectively. But i couldnt render those links in the page when a tab is clicked..
Could anyone please help me out of this.
Seems to work fine for me:
JSFiddle
The only code that I added to yours (aside from using some gists for the ajax calls) was putting the tab panes inside a <div class="tab-content">.
I've made a list who's content is loaded via AJAX, and it works as intended.
I'd now like to make each list entry load (via AJAX) and display a sublist, when clicked upon.
Is this possible in AngularJS? (I'm new to AngularJs and am more than a little confused over $scope.)
<div ng-controller="StockGroupCtrl">
<ul>
<li ng-repeat="group in groups">
<span>{{group.prod_grp}}</span>
<span>{{group.desc}}</span>
<!-- something like
<ul ng-controller="WhatShouldItBe?">
<li ng-repeat="item in items">
<span>{{item.name}}</span>
<span>{{item.price}}</span>
</li>
</ul>
-->
</li>
</li>
</div>
I've made the outer code work with:
function StockGroupCtrl($scope, $http) {
$scope.groups = [];
$scope.handleGroupsLoaded = function(data, status) {
$scope.groups = data;
}
$scope.fetch = function() {
$http.get('/api/stock/groups/').success($scope.handleGroupsLoaded);
}
$scope.fetch();
}
but I can't really see where to start with the inner lists.
How about this? You don't need another controller.
<ul>
<li ng-repeat="item in group.items">
<span>{{item.name}}</span>
<span>{{item.price}}</span>
</li>
</ul>
I need some help about creating more HoverCards with this plugin (download). I just created a code demo on JSFiddle. Do you have any recommendations about this?
JavaScript:
$('.babe-hover').hovercard({
detailsHTML: $(this).attr('data-control').html(),
width:278
});
HTML:
<ul class="demo">
<li>
<span class="babe-hover" data-control="control-01">William Johnson</span>
<div id="control-01" style="display: none;">
<p class="s-desc">Address: 64 Newman Street.</p>
<ul class="s-stats">
<li>Tweets<br><span class="s-count">1337</span></li>
</ul>
</div>
</li>
<li>
<span class="babe-hover" data-control="control-02">Hanson Thomas</span>
<div id="control-02" style="display: none;">
<p class="s-desc">Address: 64 Newman Street.</p>
<ul class="s-stats">
<li>Tweets<br><span class="s-count">1337</span></li>
</ul>
</div>
</li>
Now it working with some help from the author
$('.babe-hover').each(function(){
var $this = $(this),
myControlId = $this.attr('data-control'),
htmlForHovercard = $('#'+ myControlId).html();
$this.hovercard({
detailsHTML: htmlForHovercard,
width:278
});
});
anyway thank #egasimus for ur suggest :)
I suppose you're asking: why doesn't this work?
You're trying to call the .html() method on what $(this).attr('data-control') returns. $(this).attr('data-control'), however, only returns a string, and you need to obtain the corresponding element in order to use .html(). The following code works for me:
$("#" + $(this).attr('data-control')).html()
I.e., "select the element whose id equals this element's data-control attribute, and call .html() on it."