I'm a little new to jQuery and I am having some issue wiring up my click events. If I put an alert(''); I can see that menu.js is referenced properly but when I alert from inside the .ready() function the alert is never triggered...
JSFiddle: Click Here
Could someone be kind enough to point out my issue? Thanks!
HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Menu Demo</title>
<link href="Content/themes/base/minified/jquery-ui.min.css" rel="stylesheet" />
<link href="Content/MenuDemo.css" rel="stylesheet" />
</head>
<body>
<div class="navbar">
<img id="navbar-logo" src="Content/images/ingr_logo.png" class="ui-button-icon-primary">
<img id="navbar-logo" src="Content/images/smaller.png" class="image-right">
</div>
<div id="menu1" class="floating-menu ui-menu">
<div class="floating-menu-header">
<div class="floating-menu-header-text">Example Menu</div>
<div class="grip"></div>
<div><img id="expand1" src="Content/images/Expand.png" class="floating-menu-header-icons"></div>
<div><img id="drag1" src="Content/images/Lock-Add.png" class="floating-menu-header-icons locked"></div>
<div><img id="close1" src="Content/images/Close.png" class="floating-menu-header-icons"></div>
</div>
<div class="floating-menu-body"></div>
</div>
<div id="menu2" class="floating-menu ui-menu">
<div class="floating-menu-header">
<div class="floating-menu-header-text">Example Menu</div>
<div class="grip"></div>
<div><img src="Content/images/Expand.png" class="floating-menu-header-icons"></div>
<div><img src="Content/images/Lock-Add.png" class="floating-menu-header-icons locked"></div>
<div><img src="Content/images/Close.png" class="floating-menu-header-icons"></div>
</div>
<div class="floating-menu-body"></div>
</div>
<div id="menu3" class="floating-menu ui-menu">
<div class="floating-menu-header">
<div class="floating-menu-header-text">Example Menu</div>
<div class="grip"></div>
<div><img src="Content/images/Expand.png" class="floating-menu-header-icons"></div>
<div><img src="Content/images/Lock-Add.png" class="floating-menu-header-icons locked"></div>
<div><img src="Content/images/Close.png" class="floating-menu-header-icons"></div>
</div>
<div class="floating-menu-body"></div>
</div>
<div id="menu4" class="floating-menu ui-menu">
<div class="floating-menu-header">
<div class="floating-menu-header-text">Example Menu</div>
<div class="grip"></div>
<div><img src="Content/images/Expand.png" class="floating-menu-header-icons"></div>
<div><img src="Content/images/Lock-Add.png" class="floating-menu-header-icons locked"></div>
<div><img src="Content/images/Close.png" class="floating-menu-header-icons"></div>
</div>
<div class="floating-menu-body"></div>
</div>
<!-- Scripts-->
<script src="Scripts/libs/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="Scripts/libs/jquery-ui-1.10.4.min.js" type="text/javascript"></script>
<script src="Scripts/site/menu.js" type="text/javascript"></script>
</body>
</html>
menu.js
/// <reference path="../jquery-2.1.1.js" />
/// <reference path="../jquery-ui-1.10.4.js" />
// Make Menus Draggable
function makeMenusDragHandler() {
$('.locked').click(function () {
$('.floating-menu').draggable();
});
}
// Collapse/Expand Height of Navbar
function smallBigNavbarHandler() {
$('.image-right').click(function () {
var navbar = $('.navbar');
navbar.height(navbar.height() === 51 ? 30 : 15);
});
}
$(document).ready(function ($) {
// add handlers
smallBigNavbarHandler();
makeMenusDragHandler();
// setters
});
You have two issues:
You don't have jQuery included
See below
This line:
navbar.height = navbar.height() === 51 ? 30 : 15;
should be:
navbar.height(navbar.height() === 51 ? 30 : 15);
The setter is:
.height(value)
and not
.height = value
Related
I have a problem with Uikit 3 Grid and jQuery and load more function.
The load more script is based on:
https://www.jqueryscript.net/demo/load-more-single-button/
The button hides after load other 3 DIV´s, here is the code pen:
https://codepen.io/joomlaplates/pen/BapvQre
BTW: That happens only when masonry is activated in Uikit: <div uk-grid="masonry: true">...</div>
I would really appriciate some help..
Thanks Peter
I have to be honest, I don't use Uikit much, but inspecting your example code I noticed that Uikit forces you the height of the div contents based on the width of the screen.
so, to solve, just bypass that rule via CSS .. :)
.contents{
height: auto!important;
}
and below I leave you a small demo of the fix .. :)
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.contents{
height: auto!important;
}
</style>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/uikit#3.6.20/dist/css/uikit.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/4.5.2/minty/bootstrap.min.css">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/uikit#3.6.20/dist/js/uikit.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
/* Button Load more - v1.0.0 - 2018-02-28
* Copyright (c) 2018 NTTPS; */
(function ($) {
$.fn.btnLoadmore = function (options) {
var defaults = {
showItem: 6
, whenClickBtn: 3
, textBtn: 'Loadmore ...'
, classBtn: ''
, setCookies: false
, delayToScroll: 2000,
}
, options = $.extend(defaults, options);
this.each(function () {
var $this = $(this)
, $childrenClass = $($this.children());
// Get Element Of contents to hide
$childrenClass.hide(); // nascondi tutti gli elementi
//Show Element from Options
$childrenClass.slice(0, defaults.showItem)
.show(); // mostra il primo
//Show Button when item in contents != 0
if ($childrenClass.filter(":hidden")
.length > 0) {
$this.after('<button type="button" class="btn-loadmore ' + defaults.classBtn + '">' + defaults.textBtn + '</button>')
}
$(document).on('click', '.btn-loadmore', function (e) {
e.preventDefault();
$childrenClass.filter(':hidden').slice(0, defaults.whenClickBtn).slideDown();
if ($childrenClass.filter(":hidden").length == 0) {
$(".btn-loadmore").fadeOut('slow');
}
scrollDown();
});
function scrollDown() {
$('html, body')
.animate({
scrollTop: $childrenClass.filter(":visible")
.last()
.offset()
.top
}, defaults.delayToScroll);
}
});
}
}(jQuery));
$(document)
.ready(function () {
$('.contents')
.btnLoadmore({
showItem: 3,
whenClickBtn: 3,
textBtn: 'Load more...',
classBtn: 'btn btn-danger'
});
});
</script>
</head>
<body>
<div style="max-width:800px;margin-top:20px; margin:0 auto">
<div class="contents uk-child-width-1-2#s uk-child-width-1-3#m" uk-grid="masonry: true">
<div>
<div class="uk-card uk-card-default uk-flex uk-flex-center uk-flex-middle" style="height: 100px">Item</div>
</div>
<div>
<div class="uk-card uk-card-default uk-flex uk-flex-center uk-flex-middle" style="height: 130px">Item</div>
</div>
<div>
<div class="uk-card uk-card-default uk-flex uk-flex-center uk-flex-middle" style="height: 150px">Item</div>
</div>
<div>
<div class="uk-card uk-card-default uk-flex uk-flex-center uk-flex-middle" style="height: 160px">Item</div>
</div>
<div>
<div class="uk-card uk-card-default uk-flex uk-flex-center uk-flex-middle" style="height: 120px">Item</div>
</div>
<div>
<div class="uk-card uk-card-default uk-flex uk-flex-center uk-flex-middle" style="height: 140px">Item</div>
</div>
<div>
<div class="uk-card uk-card-default uk-flex uk-flex-center uk-flex-middle" style="height: 200px">Item</div>
</div>
<div>
<div class="uk-card uk-card-default uk-flex uk-flex-center uk-flex-middle" style="height: 180px">Item</div>
</div>
<div>
<div class="uk-card uk-card-default uk-flex uk-flex-center uk-flex-middle" style="height: 140px">Item</div>
</div>
</div>
</div>
</body>
</html>
I have all the code and seems okay to me but when I click on the navigation links the link is directed to index.html or the landing project. How do I make the links filter the images?
This is the Javascript and html
$(document).ready(function() {
$(".button").click(function() {
var name = $(this).attr("data-filter");
if (name == "all") {
$(".filter").show("2000");
} else {
$(".filter").not("." + name).hide("2000");
$(".filter").filter("." + name).show("2000");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="portfolio">
<div style="text-align: center">
<div class="navigation">
ALL
ONE
TWO
THREE
</div>
<div class="ImageContainer">
<div class="filter one">
<img src="img/beach.jpg" width="400px" height="250px">
</div>
<div class="filter one">
<img src="img/Windows.jpg" width="400px" height="250px">
</div>
I expected my images to filter but they navigation links are not working
You need to prevent the default action of the link and also change your numbers to numbers (remove the quotes around the 2000)
$(document).ready(function() {
$(".button").click(function(e) { // pass the event back into the function
e.preventDefault(); // prevent the link action
var name = $(this).attr("data-filter");
if (name == "all") {
$(".filter").show(2000); // remove quotes
} else {
$(".filter").not("." + name).hide(2000);
$(".filter").filter("." + name).show(2000);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="portfolio">
<div style="text-align: center">
<div class="navigation">
ALL
ONE
TWO
THREE
</div>
<div class="ImageContainer">
<div class="filter one">
<img src="img/beach.jpg" width="400px" height="250px">
</div>
<div class="filter one">
<img src="img/Windows.jpg" width="400px" height="250px">
</div>
This is the site in question: driglight.com/Learn5.html
The purpose of this site is to click the audio and then choose which image you believe to be the correct representation of the note that was played.
I want to randomize the audio and answers every time the page is refreshed.
When the audio is randomized I need to make sure that the audio that is chosen has it's matching correct answer of an image also chosen and placed randomly among the answers. Also,when any possible answer image is clicked, a div will appear that says 'Good Job!' or 'incorrect'. So when the correct answer is randomized it will need to have the 'Good Job' div to follow it.
Here is the code in html:
<!DOCTYPE html>
<head>
<title>Learn</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-responsive.css">
<link rel="stylesheet" href="css/custom-styles.css">
<link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" href="css/component.css">
<link rel="stylesheet" href="css/font-awesome-ie7.css">
<script src="js/stuff.js"></script>
<!-- <script src="js/Timhasnoinput.js"></script> -->
</head>
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please upgrade your browser or activate Google Chrome Frame to improve your experience.</p>
<![endif]-->
<!-- This code is taken from http://twitter.github.com/bootstrap/examples/hero.html -->
<div class="header-wrapper">
<div class="container">
<div class="row-fluid">
<div class="site-name">
<h1>Music Website</h1>
</div>
</div>
</div>
</div>
<div class="container">
<div class="menu">
<div class="navbar">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<i class="fw-icon-th-list"></i>
</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">Home</li>
<li>Learn</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
<div class="mini-menu">
<label>
<select class="selectnav">
<option value="#" selected="">Home</option>
<option value="#">→ Hello</option>
<option value="#">→ Something else here</option>
<option value="#">→ Another action</option>
<option value="#">→ Something else here</option>
<option value="#">About</option>
<option value="#">Learn</option>
<option value="#">Contact</option>
</select>
</label>
</div>
</div>
</div>
<div class="container bg-white">
<div class="row-fluid">
<div class="span12 ">
<div class="main-caption">
<h1>Music Website</h1>
<h6>Learning Music</h6>
</div>
<div class="Timmy2">
<h4>< Lesson 2</h4>
<h6></h6>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container bg-white">
<div class="row-fluid">
<div class="span12">
<div class="banner">
<div class="audiobuttonholder">
<div class="audioholder" style="padding-bottom:24px;">
<audio controls id="audio1">
hello
</audio>
</div>
<div class="buttonholder"; style="position: absolute; left: 10px; top: 40px;">
</div>
<div class = "numberPage">
Pg. 3 Trebble Cleff
</div>
<div class = "control">
<ul>
<div id="div1" style="display:none; float: right; margin-right: 120px;
margin-top: 40px;" >
<img id=div1image imageC="incorrect.png" src="incorrect.png"></img>
</div>
<input type="image" id="myimage1" style="height:200px;width:200px;
onclick="showDivOne()" />
</ul>
<ul>
<div id="div2" style="display:none; float: right; margin-right: 120px;" >
<img id=div2image imageC="incorrect.png" src="incorrect.png" />
</div>
<input type="image" id="myimage2" style="height:200px;width:200px; padding-
top:24px;" onclick="showDivTwo()"/>
</ul>
<ul>
<div id="div3" style="display:none; float: right; margin-right: 120px;
padding-top: 40px;" >
<img id=div3image imageC="incorrect.png" src="incorrect.png"></img>
</div>
<input type="image" id="myimage3" style="height:200px;width:200px;padding-
top:24px;" onclick="showDivThree()"/>
</ul>
<ul>
<div id="div4" style="display:none; float: right; margin-right: 120px;
margin-top: 40px;" >
<img id=div4image imageC="incorrect.png" src="incorrect.png"></img>
</div>
<input type="image" id="myimage4" style="height:200px;width:200px;"
onclick="showDivFour()" />
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="featured-images">
<ul class="grid effect-8" id="grid">
<li>
<div class="block">
<div class="Timmy2">
<h4>< Lesson 2</h4>
<h6></h6>
</div>
</div>
</li>
</ul>
<div class="block-content">
<div class="user-info">
<h4>Home</h4>
<h6> </h6>
</div>
<div class="user-info">
<h4>Learn</h4>
<h6> </h6>
</div>
<div class="user-info">
<h4>Contact</h4>
<h6> </h6>
</div>
</div>
</div>
</div>
</div>
<script src="js/jquery-1.9.1.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/masonry.pkgd.min.js"></script>
<script src="js/imagesloaded.js"></script>
<script src="js/classie.js"></script>
<script src="js/AnimOnScroll.js"></script>
<script>
new AnimOnScroll( document.getElementById( 'grid' ), {
minDuration : 0.4,
maxDuration : 0.7,
viewportFactor : 0.2
} );
</script>
<script>
$('#myCarousel').carousel({
interval: 1800
});
</script>
</body>
</html>
And here is the code in Javascript:
function showDivFour() {
document.getElementById('div4').style.display = "block";
}
function showDiv() {
document.getElementById('welcomeDiv').style.display = "block";
}
function showDivOne() {
document.getElementById('div1').style.display = "block";
}
function showDivTwo() {
document.getElementById('div2').style.display = "block";
}
function showDivThree() {
document.getElementById('div3').style.display = "block";
}
// THIS SHOULD BE THE BETTER ONE
var correctFileC = $('#div1image').attr("div_answer");
var correctFileC = $('#div2image').attr("div_answer");
var correctFileC = $('#div3image').attr("div_answer");
var correctFileC = $('#div4image').attr("div_answer");
var correctFile1 = $('#myimage1').attr("div_if");
var correctFile2 = $('#myimage2').attr("div_if");
var correctFile3 = $('#myimage3').attr("div_if");
var correctFile4 = $('#myimage4').attr("div_if");
var audio_1 = ["LowATrebbleCleffPianoVC.mp3","LowETrebbleCleffPianoVC.mp3",
"LowGTrebbleCleffPianoVC.mp3","MidBTrebbleCleffPianoVC.mp3",
"MidCTrebbleCleffPianoVC.mp3","MidDTrebbleCleffPianoVC.mp3"];
var rand_audio_1 =
audio_1[Math.floor(Math.random()*audio_1.length)].getElementByName.
(audioholder.innerHTML(rand_audio_1);
function div_if(){
if(audio_1[0]){
var R1 = ["myimage1","TrebbleCleffLowA.gif"],["myimage2","TrebbleCleffLowA.gif"],["myimage3","TrebbleCleffLowA.gif"],["myimage4","TrebbleCleffLowA.gif"];
if[R1(var i=0; i<R1.length;i++).length=4];
} else if(audio_1[1]){
var R2 = ["myimage1","LowE.gif"],["myimage2","LowE.gif"],["myimage3","LowE.gif"],["myimage4","LowE.gif"];
if[R2(var i=0; i<R2.length;i++).length=4];
do nothing
} else if(audio_1[2]){
var R3 = ["myimage1","LowG.gif"],["myimage2","LowG.gif"],["myimage3","LowG.gif"],["myimage4","LowG.gif"];
if[R3(var i=0; i<R3.length;i++).length=4];
do nothing
} else if(audio_1[3]){
var R4 = ["myimage1","MidB.gif"],["myimage2","MidB.gif"],["myimage3","MidB.gif"],["myimage4","MidB.gif"];
if[R4(var i=0; i<R4.length;i++).length=4];
do nothing
} else if(audio_1[4]){
var R5 = ["myimage1","MidC.gif"],["myimage2","MidC.gif"],["myimage3","MidC.gif"],["myimage4","MidC.gif"];
if[R5(var i=0; i<R5.length;i++).length=4];
do nothing
{ else if(audio_1[5]){
var R6 = ["myimage1","MidD.gif"],["myimage2","MidD.gif"],["myimage3","MidD.gif"],["myimage4","MidD.gif"];
if[R6(var i=0; i<R6.length;i++).length=4];
do nothing
} else if{
L1.Push(R);
} else if{
L1.Push(R1)
} else if{
L1.Push(R2)
} else if{
L1.Push(R3)
} else if{
L1.Push(R4)
}
function div_answer(){
if(R[0]){
document.getElementById(div1).innerHTML(divC);
divC.src='GoodJob.png'{
else if(R[1]){
document.getElementById(div2).innerHTML(divC);
divC.src='GoodJob.png'
}
else if(R[2]){
document.getElementById(div3).innerHTML(divC);
divC.src='GoodJob.png'
}
else {
document.getElementById(div4).innerHTML(divC);
divC.src='GoodJob.png'
}
}
}
I assume every audio fragment will have an image? So with that in mind, you create a random index to select an audio fragment (which you already do). Why don't you store that index in a variable and associate the image fragment with it?
Another option would be to create an object. So you make your array with audiofragments and then you initialize a new JS object, and assign the names of the images to 'properties' with your audiofragment as key. Like this:
var images = {};
images[audioname] = image-name;
***Do this for each audiofragment of course***
That way you can just ask the image from your images-object, using the property audioname.
When the page renders, place some value inside the attributes for the images or div:
<img id=myimage data-audio-file="xyz123.mp3" src="...." />
<div data-audio-file="xyz123.mp3" src="...." >My Content</div>
Read the attribute out when it's time to take some action:
var correctFile = $('#myimage').attr("data-audio-file");
I am just learning AngularJS. I currently have a simple SPA that loads two containers, switching one after another depending on the URL.
Navigation Links
- Casefilm
- Videos
Using basic Angular Routing, I am able to load both successfully. However, one of the pages (videos.php) contain a slideshow script that is based on jQuery and a simple Bootstrap modal to load fullscreen Youtube videos. When this page is called, Angular loads the view but for some reason does not recognize the jQuery instance.
Here's my Videos view code:
<div id="videos" class="row">
<div class="col-md-12">
<div id="video-carousel">
<div><img ng-src="assets/images/thumb1.jpg" class="img-responsive" alt=""></div>
<div><img ng-src="assets/images/thumb2.jpg" class="img-responsive" alt=""></div>
<div><img ng-src="assets/images/thumb3.jpg" class="img-responsive" alt=""></div>
<div><img ng-src="assets/images/thumb4.jpg" class="img-responsive" alt=""></div>
<div><img ng-src="assets/images/thumb5.jpg" class="img-responsive" alt=""></div>
<div><img ng-src="assets/images/thumb6.jpg" class="img-responsive" alt=""></div>
<div><img ng-src="assets/images/thumb7.jpg" class="img-responsive" alt=""></div>
<div><img ng-src="assets/images/thumb8.jpg" class="img-responsive" alt=""></div>
<div><img ng-src="assets/images/thumb9.jpg" class="img-responsive" alt=""></div>
<div><img ng-src="assets/images/thumb10.jpg" class="img-responsive" alt=""></div>
</div>
</div>
</div><!-- #videos -->
<div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="videoModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<div>
<iframe width="100%" frameborder="0" allowfullscreen=""></iframe>
</div>
</div>
</div>
</div>
</div>
Here's my app.js:
var humanApp = angular.module('humanApp', ['ngRoute']);
humanApp.controller('HumanCtrl', ['$scope', '$http', function (scope, http){
http.get('videos.json').success(function(data){
scope.videos = data;
});
}]);
humanApp.config(function ($routeProvider){
$routeProvider
.when('/casefilm',
{
controller: 'HumanCtrl',
templateUrl: 'assets/partials/casefilm.php'
})
.when('/videos',
{
controller: 'HumanCtrl',
templateUrl: 'assets/partials/videos.php'
})
.otherwise({ redirectTo: '/casefilm' });
});
humanApp.directive('slickSlider',function($timeout){
return {
restrict: 'A',
link: function(scope,element,attrs) {
$timeout(function() {
$(element).slick(scope.$eval(attrs.slickSlider));
});
}
}
});
And lastly, this is what is on my index.php before the </body> tag:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.0/angular-route.min.js"></script>
<script src="assets/scripts/app.js"></script>
<script src="assets/scripts/jquery.js"></script>
<script src="assets/scripts/bootstrap/bootstrap.min.js"></script>
<script src="assets/scripts/slick.min.js"></script>
<!--<script src="assets/js/owl.carousel.min.js"></script>-->
<script>
$(document).ready(function() {
$("#video-carousel").slick(
{
infinite: true,
dots: true,
arrows: false,
slidesToShow: 2,
slidesToScroll: 2
}
);
$(function(){
$('iframe').css({ width: $(window).innerWidth() + 'px', height: $(window).innerHeight() + 'px' });
// If you want to keep full screen on window resize
$(window).resize(function(){
$('iframe').css({ width: $(window).innerWidth() + 'px', height: $(window).innerHeight() + 'px' });
});
});
function autoPlayYouTubeModal(){
var trigger = $("body").find('[data-toggle="modal"]');
trigger.click(function() {
var theModal = $(this).data( "target" ),
videoSRC = $(this).attr( "data-thevideo" ),
videoSRCauto = videoSRC+"?autoplay=1;rel=0;html5=1" ;
$(theModal+' iframe').attr('src', videoSRCauto);
$(theModal+' button.close').click(function () {
$(theModal+' iframe').attr('src', videoSRC);
});
});
}
autoPlayYouTubeModal();
});
</script>
Summary:
Angular routing works.
jQuery is not working when my Video view is called.
Question:
Am I missing something?
Is there a better way to deal with this?
use RequireJS . in requirejs you can set dependency.
Here is some example given :
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="require.js"></script>
<script type="text/javascript">
// override require function, with it's "rebinded" version
window.require = require.bind(this, {
// set baseUrl once and for all
'baseUrl': '/some/absolute/path/and_another_one/'
});
</script>
</head>
<body>
<script type="text/javascript">
require([
"myModule1.js",
"myModule2.js"
], function($myModule1, $myModule2) {
// do something here...
});
</script>
</body>
</html>
You can find more at :
http://www.angrycoding.com/2011/09/managing-dependencies-with-requirejs.html
I have this code, it works for a rotating menu that is obviously a ul> li> Menu.
What I would like to know is how to trigger (onClick, HRef, etc.) the function for a specific list item such as rot7.
I would like to click a line of text and fire the function, is this possible?
Example "Click here to go there" ,
Kinda like the old days -- {a href="some.html"}Click Here{/a} page loads.
In this case I want the text to open the 7th li> menu item using the form and function of the JQuery script.
There, clear as Mud.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Bridgett's Electrolysis</title>
<!-- Favorite Icon --><link rel="shortcut icon" href="images/beLogoColor3D.png" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<link href="css/jquery-ui.css" rel="stylesheet" type="text/css" />
<style>
*{
margin:0;
padding:0;
}
body{
font-family:Arial;
}
#content{
margin:150px auto 10px auto;
}
.reference{
clear:both;
width:800px;
margin:30px auto;
}
.reference p a{
text-transform:uppercase;
text-shadow:1px 1px 1px #fff;
color:#666;
text-decoration:none;
font-size:10px;
}
.reference p a:hover{
color:#333;
}
</style>
<script type="text/javascript">
// EDITED
$(function () {
$('#link6').click(function () {
$('#rotmenu li:nth-child(6)').click();
});
});
</script>
</head>
<body>
<div class="logoback">
<div id="logo">
<img src="images/beWebLogoColor3D.png" height="250">
</div>
</div>
<div id="content">
<div class="rotator">
<div class="myh">STOP TWEEZING UNWANTED HAIR.....FOREVER!!!</div>
<ul id="rotmenu">
<li>
Home
<div style="display:none;">
<div class="info_image">1.jpg</div>
<div class="info_heading">Relax</div>
<div class="info_description">
<div class="myh1">Eliminate Unwanted Hair</div><br />
<div class="col2"><img src="images/page1_img1.png" alt="" width="90%"></div>
<div class="col2">
<span class="myh2">Safe, Permanent Hair Removal<br />
<br />
Electrolysis is:</span><br />
<span class="myh3home">• Still the only true permanent hair removal method and the only
permanent treatment recognized by the FDA<br />
• An excellent solution for those discouraged by the unsuccessful results of temporary
hair removal methods<br />
• For everyone<br />
• The preferred treatment for combating folliculitis<br />
<br />
</span>
</div>
<div id="mycenter" class="myh2"><a id="link6" href="javascript:;">Book now to schedule your Complimentary Consultation</a>
</div>
</div>
</div>
</li>
<li>
News
<div style="display: none;">
<div class="info_image">2.jpg</div>
<div class="info_heading">The Scoop</div>
<div class="info_description">
<div class="col1">
<img src="images/page2_img1.jpg" alt="" />
<img src="images/appointment-request1.png" width="60%" alt="" />
<img src="images/page2_img3.jpg" alt="" />
</div>
<div class="col3">
<div class="mytabs">Open at our new Location!</div>
<span class="myh3">See our Location Section for a Map or Directions.</span><br /><br /><br /><br />
<div class="mytabs">Online Appointment Booking is Now Available!</div>
<span class="myh3">Go to our Appointments Section and schedule your appointment today.</span><br /><br /><br /><br />
<div class="mytabs">All New Equipment!</div>
<span class="myh3">The latest and greatest equipment has been installed to offer you the most comfortable Electrolysis experience.</span>
</div>
</div>
</div>
</li>
<li>
Services
<div style="display:none;">
<div class="info_image">3.jpg</div>
<div class="info_heading">Here to Serve You</div>
<div class="info_description">
<span class="mytabs">Electrolysis</span><br />
<span class="myh3">These are the areas that Electrolysis can be performed on.</span><br />
<img src="images/areas.png" / width="100%" height="350">
</div>
</div>
</li>
<li>
Location
<div style="display:none;">
<div class="info_image">4.jpg</div>
<div class="info_heading">Come and Visit</div>
<div class="info_description">
<span class="mytabs">1003 E. Broad St. Mansfield TX 76063</span>
<iframe width="100%" height="355px" seamless="seamless" frameborder="0" scrolling="no" marginheight="0"
marginwidth="0" src="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=1003+E+Broad+St,+Mansfield,+TX&aq=2&oq=1003+E+Broad&sll=32.800447,-97.289319&sspn=0.966172,1.783905&t=m&ie=UTF8&hq=&hnear=1003+E+Broad+St,+Mansfield,+Texas+76063&ll=32.565228,-97.130527&spn=0.007568,0.013937&z=14&output=embed">
</iframe>
<br />
</div>
</div>
</li>
<li>
Contact Us
<div style="display:none;">
<div class="info_image">5.png</div>
<div class="info_heading">Get in Touch</div>
<div class="info_description">
<div class="col1">
<span class="mytabs">Contact Info:</span><br />
<span class="myh3">Bridgett's Electrolysis<br />
1003 E. Broad St<br />
Mansfield, TX. 76063<br />
Phone:(817)879-7817<br />
email: <a href="mailto:bridgettselectro#gmail.com?subject=Info Request from your site">
bridgettselectro#gmail.com</a><br />
</span>
</div>
<div class="col3">
</div>
</div>
</div>
</li>
<li>
FAQ
<div style="display:none;">
<div class="info_image">6.png</div>
<div class="info_heading">Electrolysis Questions?</div>
<div class="info_description">
<Iframe src="faq/faq.htm" width="100%" height="400" frameborder="0" marginheight="0"></Iframe>
</div>
</div>
</li>
<li>
Appointment
<div style="display:none;">
<div class="info_image">book.jpg</div>
<div class="info_heading">Book It</div>
<div class="info_description">
<Iframe src="webappt/index.php" width="100%" height="405" frameborder="0" marginheight="0"></Iframe>
</div>
</div>
</li>
<li>
FaceBook
<div style="display:none;">
<div class="info_image">like.png</div>
<div class="info_heading">Coment or Like Us</div>
<div class="info_description">
<div class="mycenter"><span class="myh2">Be Sure to Visit our FaceBook FanPage for deals and coupons!</span></div>
<div class="col2">
<div class="fb-like", data-href="http://www.bridgettselectro.com" data-send="false" data-width="450" data-show-faces="true" data-colorscheme="dark" data-font="arial"></div>
</div>
<div class="col2">
<div class="fb-comments" data-href="https://www.facebook.com/BridgettsElectrolysis?fref=ts" data-num-posts="10" data-width="350" data-colorscheme="dark"></div>
</div>
</div>
</div>
</li>
</ul>
<div id="rot1">
<img src="" width="800" height="300" class="bg" alt=""/>
<div class="heading">
<h1></h1>
</div>
<div class="description">
<p></p>
</div>
</div>
</div>
</div>
<!-- The JavaScript -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script src="js/atooltip.jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var current = 1;
var iterate = function () {
var i = parseInt(current + 1);
var lis = $('#rotmenu').children('li').size();
if (i > lis) i = 1;
display($('#rotmenu li:nth-child(' + i + ')'));
}
display($('#rotmenu li:first'));
var slidetime = setInterval(iterate, 3000000);
$('#rotmenu li').bind('click', function (e) {
clearTimeout(slidetime);
display($(this));
e.preventDefault();
});
function display(elem) {
var $this = elem;
var repeat = false;
if (current == parseInt($this.index() + 1))
repeat = true;
if (!repeat)
$this.parent().find('li:nth-child(' + current + ') a').stop(true, true).animate({ 'marginRight': '-20px' }, 300, function () {
$(this).animate({ 'opacity': '0.7' }, 700);
});
current = parseInt($this.index() + 1);
var elem = $('a', $this);
elem.stop(true, true).animate({ 'marginRight': '0px', 'opacity': '1.0' }, 300);
var info_elem = elem.next();
$('#rot1 .heading').animate({ 'left': '-420px' }, 500, 'easeOutCirc', function () {
$('h1', $(this)).html(info_elem.find('.info_heading').html());
$(this).animate({ 'left': '0px' }, 400, 'easeInOutQuad');
});
$('#rot1 .description').animate({ 'bottom': '-425px' }, 500, 'easeOutCirc', function () {
$('p', $(this)).html(info_elem.find('.info_description').html());
$(this).animate({ 'bottom': '0px' }, 400, 'easeInOutQuad');
})
$('#rot1').prepend(
$('<img/>', {
style: 'opacity:0',
className: 'bg'
}).load(
function () {
$(this).animate({ 'opacity': '1' }, 600);
$('#rot1 img:first').next().animate({ 'opacity': '0' }, 700, function () {
$(this).remove();
});
}
).attr('src', 'images/' + info_elem.find('.info_image').html()).attr('width', '1200').attr('height', '500')
);
}
});
(function (d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
} (document, 'script', 'facebook-jssdk'));
</script>
</body>
</html>
<a id="link6" href="javascript:;">click to open menu 6</a>
<script>
// EDITED
$(function() {
$('#link6').click(function(){
$('#rotmenu li:nth-child(6)').click();
});
});
</script>
EDIT:
The code above will not work because each time the menu is changing pages sets the container (.description) content with the original tags get upon initialization, so the page content including our a tag is overriden by a the original content which is same as previous one, but overrides the old one and that's why the click handler doesn't work - because it was set on an item which is overriden.
To not set the click handler each time when the menu changes the pages it should be bind into the link as simple as taht: <a onclick="$('#rotmenu li:nth-child(6)').click();" href="javascript:;">Book now to schedule your Complimentary Consultation</a>.
That's it - works fine.