Scribd
Upload
2 views6 pages

JavaScript Mouse Events and Navigation

The document contains HTML and JavaScript code snippets demonstrating mouse event handling, iframe manipulation, and a responsive navigation menu. It includes functions that update text on mouse events and a button that changes the source of an iframe. Additionally, it features CSS styles for a top navigation bar that adapts to different screen sizes.

Uploaded by

Smart Ichalkaranji
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
2 views6 pages

JavaScript Mouse Events and Navigation

The document contains HTML and JavaScript code snippets demonstrating mouse event handling, iframe manipulation, and a responsive navigation menu. It includes functions that update text on mouse events and a button that changes the source of an iframe. Additionally, it features CSS styles for a top navigation bar that adapts to different screen sizes.

Uploaded by

Smart Ichalkaranji
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

text rollover affect

<div onmousemove="myMoveFunction()">

<p>onmousemove: <br> <span id="demo">Mouse over me!</span></p>

</div>

<div onmouseenter="myEnterFunction()">

<p>onmouseenter: <br> <span id="demo2">Mouse over me!</span></p>

</div>

<div onmouseover="myOverFunction()">

<p>onmouseover: <br> <span id="demo3">Mouse over me!</span></p>

</div>

<script>

var x = 0;

var y = 0;

var z = 0;

function myMoveFunction() {

[Link]("demo").innerHTML = z+=1;

function myEnterFunction() {

[Link]("demo2").innerHTML = x+=1;

function myOverFunction() {

[Link]("demo3").innerHTML = y+=1;

}</script>
Windows Frame

The frames property returns an array with all window objects in the window.

The frames property is read-only. The windows can be accessed by index numbers. The first
index is 0.

Program:

<button onclick="myFunction()">Try it</button>

<br><br>

<iframe src="[Link] style="width:100%;height:300px"></iframe>

<iframe src="[Link] style="width:100%;height:300px"></iframe>

<script>

function myFunction() {

[Link][0].location = "[Link]

</script>

Mobile nav menu

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">


<link rel="stylesheet" href="[Link]
[Link]">

<style>

body {

margin: 0;

font-family: Arial, Helvetica, sans-serif;

.topnav {

overflow: hidden;

background-color: #333;

.topnav a {

float: left;

display: block;

color: #f2f2f2;

text-align: center;

padding: 14px 16px;

text-decoration: none;

font-size: 17px;

.topnav a:hover {

background-color: #ddd;

color: black;
}

.topnav [Link] {

background-color: #04AA6D;

color: white;

.topnav .icon {

display: none;

@media screen and (max-width: 600px) {

.topnav a:not(:first-child) {display: none;}

.topnav [Link] {

float: right;

display: block;

@media screen and (max-width: 600px) {

.[Link] {position: relative;}

.[Link] .icon {

position: absolute;

right: 0;

top: 0;
}

.[Link] a {

float: none;

display: block;

text-align: left;

</style>

</head>

<body>

<div class="topnav" id="myTopnav">

<a href="#home" class="active">Home</a>

<a href="#news">News</a>

<a href="#contact">Contact</a>

<a href="#about">About</a>

<a href="javascript:void(0);" class="icon" onclick="myFunction()">

<i class="fa fa-bars"></i>

</a>

</div>

<div style="padding-left:16px">

<h2>Responsive Topnav Example</h2>

<p>Resize the browser window to see how it works.</p>

</div>
<script>

function myFunction() {

var x = [Link]("myTopnav");

if ([Link] === "topnav") {

[Link] += " responsive";

} else {

[Link] = "topnav";

</script>

</body>

</html>

You might also like