I am starting completely with html and javascript and coding in general.
I want to bild a website as part of my learning. The website will be about wedding films and clips.
I want to have a side menu which menu button (three horizontal lines) in top left corner. When the menu button is 'clicked' the side menu will roll out and menu button will change to cross. When the menu button is a cross, it should have a function of hiding the side menu.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Wedding Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Dancing+Script:700">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script src="main.js"></script>
</head>
<body>
<div id="side-menu" class="side-nav">
×
<ul class="fa-ul">
<li><img id="icon" src="/mnt/120AA1F00AA1D0D1/Programming/Wedding-Web-Page/Icons/youtube32.png"></img> Home</li>
<li>Book a date</li>
<li>Portfolio</li>
<li>Check</li>
</ul>
</div>
<div>
<span class="open-slide">
<a href="#" onclick="toCross(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</a>
</span>
</div>
<p class="quote">One video, <br> thousands memories.</p>
</body>
</html>
The connected javascript file is here:
var nav = false;
function openSideMenu(){
document.getElementById('side-menu').style.width = '250px';
document.getElementById('main').style.marginLeft = '250px';
nav = true;
}
function closeSideMenu(){
document.getElementById('side-menu').style.width = '60px';
document.getElementById('main').style.marginLeft = '60px';
nav = false;
}
function toCross(x){
x.classList.toggle("change");
nav ? closeSideMenu() : openSideMenu();
}
I have found similar question asked here: JavaScript Toggle between 2 Functions but for some reason the code stops after the first openSideMenu() is executed and the nav variable does not change from false to true.
I am stuck here hating my life and I will be so grateful for a help!
As far as I can see you haven't provided a HTML markup containing the element #main. It seems document.getElementById('main') is what causes the code to not work:
var nav = false;
function openSideMenu() {
document.getElementById('side-menu').style.width = '250px';
//document.getElementById('main').style.marginLeft = '250px';
nav = true;
}
function closeSideMenu() {
document.getElementById('side-menu').style.width = '60px';
//document.getElementById('main').style.marginLeft = '60px';
nav = false;
}
function toCross(x) {
console.log(nav)
x.classList.toggle("change");
nav ? closeSideMenu() : openSideMenu();
}
<div id="side-menu" class="side-nav">
×
<ul class="fa-ul">
<li>
<img id="icon" src="/mnt/120AA1F00AA1D0D1/Programming/Wedding-Web-Page/Icons/youtube32.png"> Home
</li>
<li>Book a date</li>
<li>Portfolio</li>
<li>Check</li>
</ul>
</div>
<div>
<span class="open-slide">
<a href="#" onclick="toCross(this)">x
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</a>
</span>
</div>
<p class="quote">One video, <br> thousands memories.</p>
Related
Full Code at Last/end
I have been working on a project,
So for landing page I wanna make a hero i.e. fade in and out slideshow using JavaScript.
BRIEF:
What I want:-
I have set a variable to get a random number between 1 and 3, so after depending upon the random number, the image of hero, the quote inside the hero and author name would change using Js!
Problem:-
<div class="hero-1" >
<img class="hero-img-1" id="slideshow_background" alt="slideshow photo" src="images/hero-1.jpg" >
<h2 id="quote_h2" >
<span class="quotation" >“</span>
Don't worry about people stealing your design work.
Worry about the day they stop.
<span class="quotation" >”</span>
</h2>
<span class="author" >
<h4 id="author_h4" >–Sohel Shekh</h4>
</span>
</div>
I want to change the text of quote depending upon the random number (i.e. 1-3)
But as the span element is there, which is for "
So if I
quote_txt.innerHTML = "New Quote";
It removes / cancels the <span> element which contains the " quotation marks!
What should I do now so that it only changes the actual text not the <span> present inside the <h3>??????
Please answer if anybody finds solution:
Full HTML Code:
var slideshow_timing = 4000;
var quote_txt = document.getElementById("quote_h2");
var author_name = document.getElementById("author_h4");
var starting_Status = Math.floor((Math.random() * 3) + 1);
var slideshow_Background = document.getElementById("slideshow_background");
if (starting_Status == 1) {
slideshow_Background.src = "images/hero-1.jpg";
} else {
alert("t")
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="viewport" content="width=device-width" , initial-scale="1.0" user-scalable="no" />
<title>Sohel Editz : Home</title>
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat:wght#300;400;500;600;700&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght#0,400;0,700;1,400;1,700&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bellota:ital,wght#1,700&display=swap">
<link rel="stylesheet" href="css/slick-theme.css">
<style type="text/css">
* {
margin: 0px;
padding: 0px;
background-color: #fff;
font-family: 'Montserrat', sans-serif;
;
}
</style>
</head>
<body>
<!-- Main div element for all the page elements -->
<div class="main_Top">
<div class="nav" id="nav">
<img class="nav-cont nav-menu" alt="menu" src="images/menu.svg" id="menu" onclick="menuOpt()">
<!-- <img class="nav-img" alt="logo" src="images/logo.png" id="logo" > -->
<h2 class="nav-cont nav-logo">Sohel Editz</h2>
<img class="nav-cont nav-account" alt="account" src="images/account.svg" id="account" onclick="accountOpt()">
</div>
<div class="navbar" id="navbar">
<ul>
<li>Apply for logo</li>
<li>Login</li>
<li>About Us</li>
<li>Contact</li>
</ul>
</div>
<div class="account-bar" id="account-bar">
<img id="profile_img" src="images/defaultProfileImg.svg">
<i class="fa fa-edit" id="edit_pencil"></i>
<div id="details" class="details">
<h2 id="user_name">Example Name</h2>
<h5 id="useremail">someone#example.com</h5>
</div>
</div>
<!-- Span element for reserving space-->
<div class="headerSpace">
</div>
<div class="hero">
<!-- Hero 1 -->
<div class="hero-1">
<img class="hero-img-1" id="slideshow_background" alt="slideshow photo" src="images/hero-1.jpg">
<h2 id="quote_h2">
<span class="quotation">“</span> Don't worry about people stealing your design work. Worry about the day they stop.
<span class="quotation">”</span>
</h2>
<span class="author">
<h4 id="author_h4" >–Sohel Shekh</h4>
</span>
</div>
</div>
</div>
<script type="text/javascript">
</script>
</div>
</body>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="js/index.js"></script>
<script src="js/slick.min.js"></script>
</html>
Yes, the problem you have with using .innerHTML is that it will clear the element. It doesn't matter what's inside it, it will be overwritten with what you set it to.
In your case, you have a couple of options:
Move your text into a container so you can select it and update it
After you get your h2 element, find the exact Text Node you want to update and use .replaceWith
Example with replaceWith:
const h2Quote = document.getElementById('quote_h2');
// Find the Text Node you want to update, in this case, index 2
h2Quote.childNodes[2].replaceWith('Test');
<h2 id="quote_h2">
<span class="quotation">“</span>
Don't worry about people stealing your design work. Worry about the day they stop.
<span class="quotation">”</span>
</h2>
The key thing is to keep in a variable the related <span> element which represents the quote.
I think the following can work for you:
const quotation = '<span class="quotation">“</span>';
const quote_txt = document.getElementById('quote_h2');
const quote = 'New Quote';
quote_txt.innerHTML = `${quotation}${quote}${quotation}`;
// or: quote_txt.innerHTML = quotation + quote + quotation;
<h2 id="quote_h2" >
<span class="quotation" >“</span>
Don't worry about people stealing your design work.
Worry about the day they stop.
<span class="quotation" >”</span>
</h2>
I hope that helps!
I am a new learner in HTML5, CSS and Javascript. So my apologies if my question is very basic. I am working on a responsive navigation menu. When the width of the browser is greater than 500 a vertical navigation bar is present. Once the size of the screen page is less than 500(on mobile phone for example) the horizontal navigation bar should be hidden and instead the hamburger icon shows up. When clicked on the hamburger menu a vertical navigation bar will be shown underneath of the hamburger icon.
But the problem is when I call setAttribute("visibility", "visible") or setAttribute("visibility", "hidden") on navigation bar it does not work. I am not sure why. setAttribute is called either the time of load of the screen or when the hamburger icon is clicked.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./css/normalize.css">
<link rel="stylesheet" href="./css/page-main.css">
<link rel="stylesheet" href="./css/master.css">
<link rel="stylesheet" href="./css/footer.css">
<!-- fonts -->
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans:300" rel="stylesheet">
<!-- fonts -->
<title>Home Page</title>
</head>
<body onload="hideORShow()">
<header>
<nav id="navigation-links" class="navbar navigation-box">
<div class="col-1of6 nav-item">
<a class="main-nav-item-page-index" href="./index.html">Home</a>
</div>
<div class="col-1of6 nav-item" >
<a class="main-nav-item-page-index" href="./spring-summer.html">Fall</a>
</div>
<div class="col-1of6 nav-item">
<a class="main-nav-item-page-index" href="./fall-winter.html">Winter</a>
</div>
<div class="col-1of6 nav-item">
<a class="main-nav-item-page-index" href="./leather.html">Leather</a>
</div>
</nav>
<div class="open-slide">
<a href="#">
<svg id="hamburgur-icon" onClick="openSlideMenu()">
<path d="M0,5 30,5" stroke="#000" stroke-width="5"/>
<path d="M0,14 30,14" stroke="#000" stroke-width="5"/>
<path d="M0,23 30,23" stroke="#000" stroke-width="5"/>
</svg>
</a>
</div>
<div id="side-menu" class="side-nav" >
×
<a class="main-nav-item-page-index" href="./index.html">Home</a>
<a class="main-nav-item-page-index" href="./spring-summer.html">Fall</a>
<a class="main-nav-item-page-index" href="./fall-winter.html">Winter</a>
<a class="main-nav-item-page-index" href="./leather.html">Leather</a>
</div>
</header>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
here is my javascript file:
var hamburgerMenu = document.getElementById('hamburgur-icon');
var slidingMenu = document.getElementById('side-menu');
var navigationBox = document.getElementById('navigation-links');
function hideORShow(){
if(width > 500){
console.log("Inside of hideOrShow function - Window width is greater than 500px, hiding hamburger");
hamburgerMenu.setAttribute("visibility","hidden");
slidingMenu.setAttribute("visibility","hidden");
}
else{
console.log("Inside of hideOrShow function - Window width is less than 500px, hiding hamburger");
navigationBox.setAttribute("visibility","hidden");
hamburgerMenu.setAttribute("visibility","visible");
}
}
function openSlideMenu(){
console.log("hamburger btn clicked");
slidingMenu.setAttribute("visibility","visible");
slidingMenu.setAttribute("background-color","red");
}
function closeSlideMenu(){
console.log("close btn clicked");
slidingMenu.setAttribute("visibility","hidden");
}
I see in the chrome debugger that the visibility attribute is changed after the event being fired, but I still don't see visual change in the browser. For example the vertical nav bar underneath of the hamburger icon is still present when I click the close button.
I would appreciate any tip.
But the problem is when I call setAttribute("visibility", "visible") or setAttribute("visibility", "hidden") ...
Visibility is a CSS style, not an element attribute. That's why it's not working. Try replacing any lines that look like:
navigationBox.setAttribute("visibility","hidden");
hamburgerMenu.setAttribute("visibility","visible");
With:
navigationBox.style.visibility = "hidden";
hamburgerMenu.style.visibility = "visible";
The latter actually sets the visibility CSS style for the element, whereas the former sets an attribute on the element (and visibility as an attribute does nothing on it's own).
What you're trying to change are CSS styles, not HTML attributes. The attribute in question is the style attribute, but there's an easy way to do this in JS:
For example,
slidingMenu.style.visibility = "visible";
slidingMenu.style.backgroundColor = "red";
I have an MVC app that uses the _Layout page to render a header and a sidebar in every page. I am trying to use Angular's Accordion for the menus. However, as soon as I try to place a controller in my _Layout page all of my angular code stops working (I have angular in the Index.cshtml which displays via RenderBody()).
Here is my _Layout page code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/jquery")
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/angular-sanitize.js"></script>
<script src="~/Scripts/ui-bootstrap-custom-tpls-0.13.3.js"></script>
<link href="~/Content/Layout.css" rel="stylesheet" />
<script src="~/Scripts/app/app.js"></script>
<script src="~/Scripts/app/LayoutCtrl.js"></script>
<script src="~/Scripts/app/generalsearchService.js"></script>
</head>
<body>
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title">
</div>
<div class="float-right">
<nav>
</nav>
</div>
</div>
</header>
<div ng-app="myModule" ng-controller="LayoutCtrl">
<nav class='sidebar sidebar-menu-collapsed'>
<a href='#' id='justify-icon'>
<span class='glyphicon glyphicon-triangle-right'>
</span>
</a>
<ul>
<li class='active'>
<a class='expandable' href='#' title='Dashboard'>
<div id="myTab" class='vertical-text collapsed-element' style="color:blue; width:300px">Expand For Menu Options
</div>
<span class='expanded-element'>Dashboard</span>
</a>
</li>
<li>
<a class='expandable' href='#' title='APIs'>
<span class="collapsed-element"></span>
<span class='expanded-element'>APIs</span>
</a>
</li>
<li>
<a class='expandable' href='#' title='Settings'>
<span class="collapsed-element"></span>
<span class='expanded-element'>Settings</span>
</a>
</li>
<li>
<a class='expandable' href='#' title='Account'>
<span class="collapsed-element"></span>
<span class='expanded-element'>Account</span>
</a>
</li>
</ul>
<a href='#' id='logout-icon' title='Logout'>
<span class="collapsed-element"></span>
<span class='glyphicon glyphicon-off'></span>
</a>
</nav>
<nav>
<accordion close-others="oneAtATime">
<accordion-group is-open="status.open">
<accordion-heading>
</accordion-heading>
</accordion-group>
</accordion>
</nav>
</div>
<div id="myBody" style="margin-top:50px; margin-left:320px; width:80%; position:absolute">
#RenderBody()
</div>
#Scripts.Render("~/bundles/jquery")
#RenderSection("scripts", required: false)
<script type="text/javascript">
(function () {
$(function () {
var collapseMyMenu, expandMyMenu, toggleGlyphCollapse, toggleGlyphExpand, hideMenuTexts, showMenuTexts;
expandMyMenu = function () {
document.getElementById('myBody').style.width = '80%';
document.getElementById('myBody').style.marginLeft = '320px';
document.getElementById('myTab').style.color = '#E6E7E8';
return $("nav.sidebar").removeClass("sidebar-menu-collapsed").addClass("sidebar-menu-expanded");
};
collapseMyMenu = function () {
document.getElementById('myBody').style.width = '99%';
document.getElementById('myBody').style.marginLeft = '70px';
document.getElementById('myTab').style.color = 'blue';
return $("nav.sidebar").removeClass("sidebar-menu-expanded").addClass("sidebar-menu-collapsed");
};
showMenuTexts = function () {
return $("nav.sidebar ul a span.expanded-element").show();
};
hideMenuTexts = function () {
return $("nav.sidebar ul a span.expanded-element").hide();
};
return $("#justify-icon").click(function (e) {
if ($(this).parent("nav.sidebar").hasClass("sidebar-menu-collapsed")) {
expandMyMenu();
showMenuTexts();
$(this).css({
color: "#000"
});
} else if ($(this).parent("nav.sidebar").hasClass("sidebar-menu-expanded")) {
collapseMyMenu();
hideMenuTexts();
$(this).css({
color: "#FFF"
});
}
$(this).find('span').toggleClass('glyphicon-triangle-right').toggleClass('glyphicon-triangle-left');
return false;
});
});
}).call(this);
</script>
</body>
</html>
here is my Angular controller for the _Layout:
angular.module('myModule').controller('LayoutCtrl', function ($scope, generalsearchService) {
getmenuItems();
function getmenuItems() {
generalsearchService.GetMenuItems()
.success(function (data) {
$scope.menuItems = data;
});
};
});
The Angular in my Index.cshtml page works fine until I add the above to the _Layout page.
Can anyone tell me what I am missing? I've been working on this for hours and just can't seem to figure it out.
Any assistance is greatly appreciated!
I found a workaround for my issue, although it is not the best solution because it will require that I put everything in one controller. The workaround is to put a div around everything in the body of my _Layout page(which includes the "#RenderBody" which renders my Index page) and include the ng-app and ng-controller in that div on the _Layout page. If anyone knows of a better solution..I'm all ears. Thanks to those who took the time to try to help thus far.
I'm creating vertical menu for my asp.net mvc 4 web application.
so I referred this Link to integrate to my matter .
so I edited my _HECLayout.cshtml (that contains in “~/Views/Shared/”) file Like this
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src='~/Scripts/jquery-2.0.0.min.js'/></script>
<link href="~/Content/font-awesome.min.css" rel="stylesheet" />
<link href="~/Content/font-awesome.css" rel="stylesheet" />
<link href="~/Content/css.css" rel="stylesheet" />
<script>
$(document).ready(function () {
$('ul.formxd li a').click(
function (e) {
e.preventDefault(); // prevent the default action
e.stopPropagation; // stop the click from bubbling
e.stopPropagation; // stop the click from bubbling
$(this).closest('ul').find('.selected').removeClass('selected');
$(this).parent().addClass('selected');
});
});
</script>
<meta charset="utf-8" />
<title>#ViewBag.Title - Higher Education Council</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
<div id="header">
<div id="top-area">
<div id="logo-area">
<img src="~/Images/hec-logo.png" />
</div>
</head>
<body>
<header>
<div class="content-wrapper">
<div class="float-right">
<section id="text-view" style="display: inline; width: 100%; text-align: right;" >
<p><i>Higher Education Institutes </i></p>
</section>
</div>
</div>
</header>
#RenderSection("featured", required: false)
<div id="menu_area">
<div class="hec_admin_menu" >
<ul class="formxd">
<li class="welcome"><a class="welcome"><i class="icon-fa-university"></i>Welcome HEC</a></li>
<li ><a class="dashboard" href="#"><i class="icon-dashboard"></i>Dashboard</a></li>
<li ><a class="reports" href="#"><i class="icon-file"></i>Reports</a></li>
<li><a class="administrator" href="#"><i class="icon-user"></i>Administrator</a></li>
<li><a class="search" href="#"><i class="icon-search"></i>Search</a></li>
<li><a class="logout" href="#Url.Action("Login", "HECAccount")"><i class="icon-signout"></i>Logout</a></li>
</ul>
</div>
<div class="hec_admin_body">
<section class="content-wrapper main-content clear-fix">
#RenderBody()
</section>
</div>
</div>
<footer>
</footer>
#Scripts.Render("~/bundles/jquery")
#RenderSection("scripts", required: false)
</body>
</html>
It's giving smooth view like the demo which I mentioned HERE , but logout url action not working properly.And all the urls not working properly ,
Any suggestion to overcome with his probblem
<li><a class="logout" href="#Url.Action("Login", "HECAccount")"><i class="icon-signout"></i>Logout</a></li>
I got same error when I trying to insert jquery reference like above , links doesn't working
So I referred This Link
That's an approach to give jquery reference to HTML Page , but in CSHTML when you insert #Scripts.Render("~/bundles/jquery") you don't need add one by one references like you done here ,
So remove <script type="text/javascript" src='~/Scripts/jquery-2.0.0.min.js'/></script>
keep #Scripts.Render("~/bundles/jquery") under the code
If your project doesn't have the "jquery-2.0.0.min.js" file , manually insert into "~/Script" Folder
I'm tying to implement Twitter-Bootstrap Scrollspy on a menu so that when the user scrolls to a section of the page the css class is changed. This proven to be beyond frustrating. I'm already using the affix code from the code which works great.
So from my code below when a user scrolls to the LI element of #ScrollSpyContent I want to change the class of .product_submenu_image to .product_submenu_active.
How can I do this?
(I'm using jsp's in java so their might be some java code in here. I tried to strip out most of it.)
Thanks.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="/css/bootstrap.css"/>
<link rel="stylesheet" href="/css/bootstrap-responsive.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
</head>
<body>
<header></header>
<div class="row-fluid product_submenu">
<nav class="span10 offset1">
<ul class="productmenus">
<li><div class="product_submenu_image"><img src="../img/product_computer.png" alt=""/> Product Features</div></li>
<li><div class="product_submenu_image product_submenu_border"><img src="../img/product_people.png" alt=""/> Getting Started</div></li>
<li><div class="product_submenu_image product_submenu_border"><img src="../img/product_phone.png" alt=""/> Product Support</div></li>
</ul>
</nav>
</div>
<div class="container-fluid">
<nav class="row-fluid" >
<ul class="span10 offset1" data-spy="scroll">
<li class="row-fluid" id="product_features"></li> <!-- End Product Features -->
<li class="row-fluid" id="gettingstarted"></li> <!-- End Getting Started -->
<li class="row-fluid" id="product_support"></li><!-- End Product support -->
</ul>
</nav>
</div>
<footer></footer>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="/js/bootstrap.js"></script>
<script>
$(function() {
var $spy = $('.productmenus');
$spy.scrollspy({offset: 20});
$spy.bind("activate", function(e) {
//e.target is the current <li> element
var header = $(e.target).find(".product_submenu_image");
$(header).addClass('active');
});
});
</script>
</body>
</html>
CSS:
.product_submenu_image
{
background: url('../img/product_tab_default.gif');
max-height: 100%;
padding: 18% 0 18% 0;
border: none;
}
.product_submenu_image.active
{
background: blue;
/*background: url('../img/product_tab_selected.gif');*/
}
So you need to use the scroll spy activate event described here:
http://twitter.github.com/bootstrap/javascript.html#scrollspy
Basically you need some code like so:
$(function() {
var $spy = $('.nav.nav-pills');
$spy.scrollspy({offset: 20});
$spy.bind("activate", function(e) {
// do stuff here when a new section is in view
});
});
Here is a working example:
http://jsfiddle.net/hajpoj/f2z6u/3/
please ignore the fact that it starts at the bottom... not sure if that a unrelated or related bug, but the main point is you can see how the activate event works