My project consists of a menubar, and I would like to have the submenus display below when the mouse hovers over each button (hoverIntent). I am using the Wet-Boew (Web Experience Toolkit) (https://github.com/wet-boew/wet-boew) to create these features.
My project workspace consists of a main project php folder, including an index file which calls a jquery.min.js and subsequently the hoverintent.js and menubar.js.
Below is the start of the hoverintent.js:
(function($) {
// Alert Point A
$.fn.hoverIntent = function(f,g) {
// Alert Point B
// default configuration options
var cfg = {
sensitivity: 7,
interval: 100,
timeout: 0
};
// override configuration options with user supplied object
cfg = $.extend(cfg, g ? { over: f, out: g } : f );
etc...
})
My problem is that although I can reach the first alter point A I have in my code (and can generate the alter box), the program won't run the $.fn.hoverIntent = function(f,g){...} (where I have the second Alert Point B). I have a similar problem with my menubar.js (where the main functions of the code won't load).
What is usually the most common source of this problem and the best way to fix it?
It should be noted that I do call a jQuery earlier on in a different php project folder (still inside the project workspace) that has to do with a separate login program for this software. The Index file jumps to the login program to get the user's credentials before returning to the index document to display the main content.
I made sure this was the same jQuery file I later referenced in the index file before the hoverintent.js and menubar.js. Is this what is causing the issue?
Sorry I don't have all the code at this time to share, I will try to get the rest out soon. Thanks in advance.
----------------UPDATE-------------------------------
My main index file includes the head with the following code. Note the "../" are required since the wet-boew project folder is seperate from the main program project folder (index) in the workspace:
<head>
<script src="../wet-boew-master/build/js/jquery.min.js" type="text/javascript"></script>
<script async="async" src="../wet-boew-master/build/js/dependencies/outside-min.js"></script>
<script async="async" src="../wet-boew-master/src/js/dependencies/hoverintent.js"></script>
<script async="async" src="../wet-boew-master/build/js/dependencies/equalheights-min.js"></script>
<script async="async" src="../wet-boew-master/build/js/dependencies/resize-min.js"></script>
<script async="async" src="../wet-boew-master/build/js/i18n/en-min.js"></script>
<script src="../wet-boew-master/src/js/workers/menubar.js" type="text/javascript"></script>
<title>Title of the Project</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="icon" type="image/ico" href="images/icon.ico">
<script src="../wet-boew-master/build/js/settings.js"></script>
<link href="../wet-boew-master/build/grids/css/util-min.css" rel="stylesheet"/>
<link href="../wet-boew-master/build/js/css/pe-ap-min.css" rel="stylesheet"/>
<link href="../wet-boew-master/build/.../css/theme-min.css" rel="stylesheet"/>
<noscript><link rel="stylesheet" href="../wet-boew-master/build/.../css/theme-ns-min.css" /></noscript></head>
Further down, inside the body of the index we have the menubar:
<body>
<div id="wb-body">
<div id="wb-head">
<div id="wb-head-in">
<header>
<div id="wu-bnr" role="banner">
<nav role="navigation">
<div id="wu-psnb" >
<div id="wu-psnb-in">
<div class="wet-boew-menubar mb-mega" data-load="menubar" role="application" style="min-height: 28px;">
<div>
<ul data-ajax-replace="../wet-boew-master/demos/includes/menu-eng.txt" class="mb-menu" role="menubar">
At which point my menubar options and their respective submenus are listed as such:
<li *class=""* role="presentation">
<section role="presentation">
<h3 role="presentation">
<a href="index.php?location=activitiesMenu:index" role="menuitem" class="knav-1-0-0 mb-has-sm" aria-haspopup="true">
<span class="expandicon">
<span class="sublink"><?=$glb_string["activities"]?></span>
</span>
<span class="wb-invisible">(open the submenu with the enter key and close with the escape key)</span>
</a>
</h3>
<div *class="mb-sm"* role="menu" *aria-expanded="false"* *aria-hidden="true"* **id="myHoverIntent"**>
<div class="span-2" role="presentation">
<ul role="presentation">
<li role="presentation"><?=$glb_string["views"]?><?=($language_set_variable == 'fr'?:)?></li>
<li role="presentation"><?=$glb_string["create"]?><?=($language_set_variable == 'fr'?':')?></li>
</ul>
</div>
</div>
</section></li>
Would this be the correct location for my id="MyHoverIntent" (Bold **) in the code above?
It should also be noted that the italic code (*) above isn't changing (I'm assuming because the menubar and hoverIntent main functions aren't running). This would normally auto-update as the user hovers over each menubar option or leaves it. I know this because of the sample file that was included in the WET-BOEW folder that shows a fully functioning page (with a menubar and hoverIntent working) and these changes were observed in Firebug. Although for some reason Firebug showed that the sample never referenced menubar.js.
It's a little hard to tell what exactly you are doing that stops your code from working since we only have half of the code right now but a few things come to mind. First, the hoverIntent function will get called when you actually call it on a jQuery Object like so
$('#myHoverIntent').hoverIntent();
Second, make sure you are not doing that before the hoverIntent function actually gets defined and lastly, make sure you are passing window.jQuery into your immediately-invoked function expression
Here is a fiddle of a working example: http://jsfiddle.net/G3vCS/
Related
I have a slight problem with using simple jQuery, css script (external) in my subpages. It works in index tho. It's supposed to slide menu pannel on left side of the page. Responsive menu basically.
Here is the js.
$("#res_menu").click(function(){
$("#left").css("left", "0px");
$("#left").css("top", "0px");
});
$("#res_menu_close").click(function(){
$("#left").css("left", "-999px");
$("#left").css("top", "-999px");
});
Simple script right ?
It's linked in the bottom of the page.
<script src="menu_res.js"></script>
jQuery script in header
<script
src="https://code.jquery.com/jquery-3.5.0.min.js"
integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ="
crossorigin="anonymous"></script>
Problem is it's not working on the subPages.
I have buttons in the other subPages too.
<a class="menu_button" id="res_menu" href="#"></a>
and
<a class="menu_button" id="res_menu_close" href="#"></a>
Im pretty new to the JS. Is there any way to tell if the script is even conncected ? Also it's a school project so nothing serious.
EDIT 1: There are no errors in the console.
be warned, I do not know what you mean, but i think you mean get the CSS sheet without coding it into HTML
<link rel="stylesheet" href="style.css">
This will import the CSS so all your ATR are in order for you to use.
I am struggling with any task requiring the smallest bit of brain function. The task I'm currently struggling with is adding the AOS library to my site on Wordpress.
I added the following code to my full-width-page.php template in the Wordpress Editor:
<script> AOS.init(); </script>
In addition, I added the following code under Appearance > Theme Settings > Style > External JS field & External CSS field
<script src="uploads/aos-master/dist/aos.js"></script>
<link rel="stylesheet" type="text/css" href="uploads/aos-master/dist/aos.css">
After all of that, I put the data-aos attribute to html element that I want to animate, like so:
<div data-aos="fade-up";>
<h2>TEST TEST TEST</h2>
</div>
But then... nothing happens ;(
Please, if it's possible to set up, share with me what I'm doing wrong.
Are you sure aos stylesheet and javascript file loaded correctly? You can use Chrome's or Firefox's debugger on page (Chrome's Shortcut is Ctrl(or CMD)+Shift+i)
also you can change stylesheet and javascript file codes with code below;
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.2.0/aos.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.2.0/aos.js"></script>
Okay, I have a pretty basic site I'm working on that I'm now modifying to use a MEAN stack and thus I'm getting started with Angular. I'm using Scotch.io's MEAN starter App as a base to get started. So far, it's been pretty easy, I've got key components in templates and added them using ng-include.
HTML
<title>First Angular Page</title>
<!-- CSS -->
<link rel="stylesheet" href="libs/font-awesome/css/font-awesome.min.css"> <!-- Font Awesome -->
<link href='http://fonts.googleapis.com/css?family=Quicksand:700|Montserrat:700|Open+Sans|Sniglet:400,800' rel='stylesheet' type='text/css'> <!-- Google Fonts -->
<link rel="stylesheet" href="css/mainStyles.css"> <!-- Stephie's styles -->
<!-- JS -->
<script src="libs/angular/angular.min.js"></script>
<script src="libs/angular-route/angular-route.min.js"></script>
<!-- ANGULAR CUSTOM -->
<script src="js/controllers/MainCtrl.js"></script>
<script src="js/controllers/NerdCtrl.js"></script>
<script src="js/services/NerdService.js"></script>
<script src="js/appRoutes.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-app="sampleApp" ng-controller="NerdController">
<!-- NAVAGATION -->
<div ng-include='"templates/navagation.html"'></div>
<div id="site-canvas">
<!-- HEADER -->
<div ng-include='"templates/header.html"'></div>
<div id="page-content">
<!-- ANGULAR DYNAMIC CONTENT / UNIQUE PAGE FRAGMENT -->
<div ng-view></div>
</div> <!-- #page-content -->
<!-- FOOTER -->
<div ng-include='"templates/footer.html"'></div>
</div><!-- #site-canvas -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/menu.js"></script>
</body>
</html>
But now I've got problems, my menu.js file isn't working. It consists pretty much entirely of add/removeClass methods using jQuery.
Here's an old Code Pen of the site I'm working on in basic HTML to demostrate how it's supposed to work.
http://codepen.io/StuffieStephie/pen/BNqJVX
function toggleNav() {
if ($('#drawer').hasClass('show-nav')) {
$('#drawer').removeClass('show-nav');
$('#nav-icon').removeClass('open');
$("nav li.gotsMenus").removeClass("showSub");
} else {
$('#drawer').addClass('show-nav');
$('#nav-icon').addClass('open');
$("nav li.gotsMenus").removeClass("showSub");
}
}
$('#closeButton, #site-canvas, nav li li').click(function() {
$('#drawer').removeClass('show-nav');
$('#nav-icon').removeClass('open');
$("nav li.gotsMenus").removeClass("showSub");
});
But this doesn't work with my Angular templates. (Or at least, the click and hover functions don't. The scroll function that auto hides the header still works mysteriously ...? So it's kinda working)
So.. where to begin? I'm sorry if this is a really dumb question but I'm new to Angular and I've been spinning my wheels for a couple of hours now. Do I put this in a directive or controller or module or what? Do I have to rewrite this in vanilla js? And even if I did, I have other jQuery dependencies (I have an image gallery powered by Tumblr's JSON API that uses a jQuery-dependent lightbox, among other things).
If someone can just point me in the right direction I would be so grateful ;_;
Sounds like a race condition, when the script executes, there might not a #menuHeader in the DOM. You may need to add the code to the load callback using a delegate. So like:
$("#menuHeader").on('load', function () {
// Put menu.js code here
});
I would put a break point and figure out what's actually in the DOM when this executes. And basically figure out what it takes to load up the DOM first, then run the script.
Im building a web application that has some server side layouts and partials. I'm trying to insert partials into the dom using javascript depending on which button the user clicks. Below I've included a simple example that shows what I want to do, obviously it doesn't work. I know you can registerPartials by writing them in the same document and so on, but is there a similar function to be able to use a partial from the server? I wish i could call registerPartial and just pass it the url to the partial or something. For the below example, assume the following folder structure, and that I've registered the partials folder accordingly:
-web
L views
L partials
L edit-user.handlebars
L reset-pass.handlebars
L main.handlebars
code:
<script type="text/javascript">
var edit = {{> edit-user}};
var resetPass = {{> reset-pass}};
$(document).ready(function(){
$("#editMenuAction").click(function(e){
e.preventDefault();
console.log(html);
$("#adminChangesDiv").html(edit);
});
$("#resetPassMenuAction").click(function(e){
e.preventDefault();
console.log(html);
$("#adminChangesDiv").html(resetPass);
});
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v3.0.3.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<nav id="menu" class="navbar navbar-default">
<div class="container-fluid">
<!--<div class="navbar-header navbar-brand" id="beingEdited">Admin</div>-->
<ul id="menu-items" class="nav navbar-nav">
<li id="editMenuAction" data-toggle="tooltip" title="Edit this user's profile."><a>Edit Profile <span class="glyphicon glyphicon-edit"></span></a></li>
<li id="resetPassMenuAction" data-toggle="tooltip" title="Reset user's password."><a>Reset Password</a></li>
</ul>
</div>
</nav>
<div id="changesDiv">
</div>
Handlebars won't do http requests for you. I think you have three options:
You could write a small utility function that requests the template, compiles it, and uses it.
Or, if your templates are precompiled, you could consider using requirejs or a similar tool to dynamically load the script.
What I do on my site is precompiled the Handlebars and bundle those functions into my js files which use them, eliminating any latency between when data is ready to be rendered and the actual render.
Hey all I am having a huge problem here evenafter following every step of the tutorial given here to put in a video on a popup greybox ..
The tutorial
now, the only change i have made is i have a folder inside the folder graybox called graybox which holds the JS and css files.
so my script code reads like this ..
<script>var GB_ROOT_DIR = "/greybox/";</script>
<script type="text/javascript" src="greybox/greybox/AJS.js"></script>
<script type="text/javascript" src="greybox/greybox/AJS_fx.js"></script>
<script type="text/javascript" src="greybox/greybox/gb_scripts.js"></script>
<link href="greybox/greybox/gb_styles.css" rel="stylesheet" type="text/css" />
there is a folder called video which has a video called video.flv.
now I have linked a text to open as shown in the tutorial .. the code is
<a title="Noodle Demo" href="player.html?filename=videos/noodle.flv">Demo</a>
when i click on the link on the web page the window opens up right but the window reads page not found .. I have the required player.html too and that is a copy paste from the tutorial, i;ve changed all the required version numbers of flowplayer etc. Please help me.
Use the rel tag. :)
<a rel="gb_page_center[560, 450]" href="player.html?filename=videos/noodle.flv">
God bless tutorials. For better centering you can get the middle of the site by jQuery for example.
<a rel="gb_page_center[560, 450]" id="player" href="player.html?filename=videos/noodle.flv">
<script type="text=javascript">
$(document).ready(function(){
cenx = $(window).width();
ceny = $(window).height();
$("#player").attr("rel", "gb_page_center["+cenx/2+", "+ceny/2+"]");
});
</script>
But it requires jquery from jquery website.