I know there are many great helpers on this site, I am still learning jquery, but I love the functionality behind it. Recently I created a megadrop down menu, but I started getting a lot of recommendations to use the hoverintent plugin instead of using show/hide. I am lost trying to change my coding around to get it to work...PLEASE HELP...THANKS AS ALWAYS GUYS AND GALS!!!
OH and I think that changing to hoverintent will stop the overflows from building up too, but I do not think my code is working to stop that from happening?
My site...only the About DKE dropdown works...
http://www.nestudiosonline.com/test.php
my jquery script...
$(document).ready(function() {
// shows the hidden div in the list
$('#dave').mouseover(function() {
$('#aboutdke').show('slow');
});
// hides the hide the div again for that list item
$('#dave').mouseleave(function() {
$('#aboutdke').hide('slow');
});
});
Here is my html....
<div id="pagelinks">
<ul id="menu">
<li class="mega"><a class="dkeorg" href="#">DKE.ORG</a></li>
<li class="megamenu" id="dave"><a class="links" href="#">ABOUT DKE</a><div id="aboutdke">
(about dke div content)
</div>
</div></li>
<li class="megamenu"><a class="links" href="#">ALUMNI</a></li>
<li class="megamenu"><a class="links" href="#">UNDERGRADUATES</a></li>
<li class="megamenu"><a class="links" href="#">EVENTS</a></li>
<li class="megamenu"><a class="links" href="#">MULTIMEDIA</a></li>
<li class="megamenu"><a class="links" href="#">SHOP DKE</a></li>
</ul>
</div>
Two things before I get to the real answer:
You're missing the opening body tag after your doctype.
Only lowercase tags are valid in XHTML.
The events are only triggered for #aboutdke because that's the one element you have hardcoded into the event callback functions. Try something more abstract:
$('#menu > li').mouseover(function() {
$(this).children().is('div').show('slow');
});
$('#menu > li').mouseleave(function() {
$(this).children().is('div').hide('slow');
});
This should (if memory serves) work for every menu item.
Related
I'm working in kendo UI & I'm facing an issue while I give an ng-click option on the HTML content which was loaded later.
Here I'm adding a few codes related to what I have did:
HTML:
<div ng-controller="KendoCtrl">
<div class="show_html_here"><!-- Ajax inserts HTML here --></div>
</div>
HTML & ng-click in RED box & which is working:
<div ng-model="open_Filter" ng-click="onClick('open_Filter')">
<span>Total Open</span>
<span>0</span>
</div>
HTML & ng-click in ajax HTML & which is not working:
<ul>
<li ng-model="stageFilter" ng-click="onClick('stageFilter')">PRT - 1</li>
<li ng-model="stageFilter" ng-click="onClick('stageFilter')">PRT - 2</li>
<li ng-model="stageFilter" ng-click="onClick('stageFilter')">PRT - 3</li>
<li ng-model="stageFilter" ng-click="onClick('stageFilter')">PRT - 4</li>
</ul>
While clicking in any of the li which has ng-click, the alert is not working.
I have also tried by adding the ajax HTML section directly to my view page without the ajax and at that point, the click was working fine.
Ajax:
$('body').on('change', '#dropdown_id', function(){
$.post('controller/htmlsection', {'id': $this.val()}, function(data) {
$('.show_html_here').html(data.html);
});
});
Kendo/Angular Codes:
angular.module("KendoApp", ["kendo.directives"]).controller("KendoCtrl", function ($scope, $http) {
...
$scope.onClick = function(param) {
alert(param); // Not working while we click in a section which is loaded in ajax(eg.: PRT-4)
}
...
});
alert(param); inside $scope.onClick not working while we click in a section which is loaded in ajax(eg.: PRT-4) to div with class show_html_here. I think that it is because of the reason that the ajax section is loaded later the Kendo/Angular code is initiated.
If you know some solution for this please help me.
I do not get a solution from Stack & need to find a way to solve my issue. I found a solution for the issue, do not know whether its a proper way or not, but it solved my issue.
Update in HTML:
<ul>
<li class="customFilter" ng-model="stageFilter">PRT - 1</li>
<li class="customFilter" ng-model="stageFilter">PRT - 2</li>
<li class="customFilter" ng-model="stageFilter">PRT - 3</li>
<li class="customFilter" ng-model="stageFilter">PRT - 4</li>
</ul>
Kendo/Angular Codes:
// Custom Click
$('body').off('click', '.customFilter').on('click', '.customFilter', function () {
if ($(this).hasClass('active')) {
$(this).removeClass('active');
active = 0;
} else {
$(this).addClass('active');
active = 1;
}
$scope.onClick('stageFilter', active); // Click was working as required
});
The custom click was working properly as I required because of the reason that the click was happening only after the HTML from ajax is loaded.
I do not say that this solution is a proper way, but it's my issue for this time.
Open to new or a proper solution
Building a jQuery Mobile app in DreamweaverCS6. Have a an ul with multiple links calling html pages each hold a quiz. The "quiz" page is a jqm page with a javascript file doing all the work of the quiz. Everything works fine, but when you click on the li quiz button to load the page it takes a little while to load and the ajax loading spinner is not showing up. This is a problem because you don't know if the app has frozen or not. Any thoughts on how to force the spinner to show while loading the page?
<div data-role="content">
<ul data-role="listview">
<ul data-role="listview" data-inset="true">
<li data-role="list-divider">Quizzes</li>
<li>Quiz 1</li>
<li>Quiz 2</li>
<li>Quiz 3</li>
You can use the
$.mobile.showPageLoadingMsg();
and
$.mobile.hidePageLoadingMsg();
You can refer http://jquerymobile.com/demos/1.2.1/docs/config/loadingMessageTextVisible.html for proper usage.
You can reduce the page loading speed by actually writing the contents of each pages in particular div tags like :
<div data-role="page" id="quiz1">
<div data-role="header">...</div>
<div data-role="content">...</div>
<div data-role="footer">...</div>
</div>
You can load this page as :
<ul data-role="listview" data-inset="true">
<li data-role="list-divider">Quizzes</li>
<li>Quiz 1</li>
<li>Quiz 2</li>
<li>Quiz 3</li>
</ul>
This will greatly reduce the page loading time and speed up your app.
The way you have your code, those links will do a full refresh, abd not showing the jqm spinner.
What you can do is change a page programatically, which uses the jqm spinner for transitioning pages. More info http://jquerymobile.com/demos/1.2.1/docs/api/methods.html - changePage ($.mobile.changePage())
The idea is to have yours as follows:
<li><a class="quiz1">Quiz 1<a><li>
<script>
$(document).on('pageinit', '.quiz1', function() {
$.mobile.changePage('quiz1.html');
});
</script>
hope you get the idea...
Is there some built in functionality to open a tab pages(kendoUI TabStrip) based on the url? or do I have to write some custom function to read the url and do some work based on that?
I think you would have to parse the URL, then call the activateTab() function on the tab strip to open the tab you want.
Check if this is what you are looking for:
HTML:
<div id="tabstrip">
<ul>
<li class="k-state-active">Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
JavaScript:
$(document).ready(function () {
$("#tabstrip").kendoTabStrip({
contentUrls:[
"page1.html",
"page2.html",
"page3.html"
]
});
});
It creates a 3 tabs kendoTabStrip and the content of each of the tabs is page1.html, page2.html and page3.html.
Solution if you want to set the active tab in the rendering state (not with Js at the page load)
if you use a templete system (like groovy for play framework 1.x) you can write something like this:
<ul>
<li class="#{if params.get('ref') == 'application'}k-state-active#{/if}">Application</li>
<li class="#{if params.get('ref') == 'payment'}k-state-active#{/if}">Payment</li>
</ul>
<div>
content for tab application
</div>
<div>
content for tab payment
</div>
Note: params.get('ref') means the requests's get param with the name: 'ref'
And if you open this page with the url:
someting.dev/dashboard?ref=payment
you will get the payment tab as the active
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')
}
});
I have a menu like this, but the mark-up doesn't have to stay this way.
<div id="menu">
<ul>
<li>Item 1</li>
<ul>
<li>Subitem 1</li>
</ul>
<li>Item 2</li>
</ul>
</div>
And each time one of these menu items is clicked I want to load different content in a div - let's call it #content.
$(document).ready(function() {
$('#menu li').click(function(){
$('#content').load('content.txt');
});
});
Now, how do I pass which content page I want to load into #content? Thanks in advance!
Prevent the click from going to the page with the event's preventDefault() method, use the link's href that actually goes to that page loaded into the #content div.
$(document).ready(function() {
$('#menu a').click(function(e){
$('#content').load($(this).attr('href'));
e.preventDefault();
});
});
<div id="menu">
<ul>
<li>Item 1</li>
<ul>
<li>Subitem 1</li>
</ul>
<li>Item 2</li>
</ul>
</div>
You can do this in numerous ways. Essentially, you need to associate a URL with each <li> item.
To name a few ways, you could have them stored in a JavaScript array, in the jQuery cache i.e. $(selector).data, in a hidden input inside each <li> element, as an attribute on the <li> element.
I'd use something like jQuery UI's tab feature to handle this. It will probably degrade better.
If you need to do this manually, your easiest route may be to add an ID or rel attribute to the anchors, and then use that to determine the content page you want to load.
You can use "$(this).attr('blah');" within your function to access these properties.
in the realms of progressive enhancement - you should make the links point to another page with their respective content.
then you can load not just the entire contents of the page into your content div but a specified element. So if its the contents of the #content div in the other page is required something like:
$('#menu a').click(function(){
$('#content').load($(this).attr('href') + ' #content');
});
should do the trick.
only problem with joelpittets solution is that it would load the ENTIRE contents of the other page which may not be what is desired. He did however remember to cancel the default behaviour of clicking a link...