java script image rollover issues - javascript

I have an assignment due tomorrow.. I'm stuck on on particular requirement. I need to do a java script image rollover I'm my HTML using a separate Script page. and then linking the page to the Html Head tag.
Here is my java script page than I'm using the functions in the tags and its still not calling it over.. are there any suggestions?
This is the javascript file:
// Pre load images for rollover
function imgOver()
{
document.getElementById('logo').src="images/logo1.jpeg";
}
function imgOut()
{
document.getElementById('logo').src="images/logo.jpeg";
}
onclick=”window.print( ); return false;”
This is the HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta name="author" content="Teancum Clark" />
<meta name="class" content="INFO 2450 - Web Content Design" />
<meta name="section" content="001" />
<meta name="project" content="expresswebpractice2a" />
<meta name="due_date" content="11/07/2012" />
<meta name="instructor" content="Kim Bartholomew" />
<meta name="description" content="Description of the project here..." />
<meta name="keywords" content="expweb2a" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Home</title>
<link href="mystyles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="MyScript.js"></script>
</head>
<body>
<div class="fl" id="wrapper">
<div class="fl" id="content">
<div class="fl" id="header">
<div class="fl" id="leftImage">
<a href="#" onmouseover="imgOver();" onmouseout="imgOut()">
<img id="logo" alt="logo" height="150" src="images/logo1.jpeg" width="110" />
</a>
</div>
<div class="fl" id="rightImage">
<img class="rightImage"src="Images/banner.png" alt="Pets R Us banner"/>
</div>
</div> <!--header-->
<div class="fl" id="left">
<a class="buttons fl" href="index.htm">Home</a>
<a class="buttons fl" href="AboutUs.htm">About</a>
<a class="buttons fl" href="Tributes.htm">Tributes</a>
</div><!--left-->
<div class="fl" id="right">
right
</div><!--right-->
<div class="fl" id="footer">
The great Pets R Us staff came and picked her up two hours later and I didn't even have to worry about feeding or watering "Sophie".
We now have a regular appointment every Saturday...
<br/>
<br/>
Yours,
<br/>
Jewel Anderson,
<br/>
Centerville, UT
<br/>
<a class="buttons fl" href="Tribute.htm">Read More?</a>
<img class="center" src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" height="31" width="88" />
</div><!--footer-->
<br style="clear:both; font-size:1px;" />
</div><!--content-->
</div><!--wrapper-->
</body>
</html>

onclick=”window.print( ); return false;”
that line is illegal, and causing your script file to be ignored, remove that and your mouseover/out will begin to work

The problem is here:
onclick=”window.print( ); return false;”
You're using fancy quotes which will cause a mess.
Try this:
onclick="window.print( ); return false;";

Related

Why after first click, i need to click two times to reverse

So my problem is that when i click on a radiobutton to add the class "completed", it does what is suposed to do, but when i want to remove it, i need to click two times, i don't know why. Any help would be appreciated. Thank you
html
<!DOCTYPE html>
<html>
<head>
<title>Todo App</title>
<link rel="stylesheet" type="text/css" href="TodoApp.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- ------ Meta Tags ------ -->
</head>
<body>
<div id="container">
<div id="topImage">
<h1 id="topImage-title">T O D O</h1>
<img onclick="test()" id="moon" src="images/icon-moon.svg">
<img src="images/bg-mobile-light.jpg" width="100%" height="100%">
</div>
<div class="newToDo">
<input onclick="addTask()" id="ready" type="radio" name="ready">
<input type="text" name="todoTask" id="todoTask" placeholder="Create a new todo...">
</div>
<div id="tasksBox">
<div class="newTasks">
<input onclick="completeTask()" type="radio" class="bttComplete" name="bttComplete">
<span>Complete Online Javascript Course</span>
<div onclick="deleteTask()" class="delete"></div>
</div>
</div>
</div>
<script src="jquery_library/jquery-3.5.1.min.js"></script>
<script src="TodoApp.js"></script>
</body>
</html>
css
.completed{
background-image: url(images/icon-check.svg);
background-position: center;
background-repeat: no-repeat;
}
javascript
function completeTask(){
$(".newTasks").click(function(){
if ($(this).children().hasClass('completed')){
$(this).children().removeClass('completed');
} else {
$(this).children().addClass('completed');
};
});
}

Can't transfer an image element from one file to another

I'm trying to transfer an image element, which is hosted on the cloud, from one file to another but it's not working.
I tried to insert the image in the HTML when it loads but it's telling me that the image variable is null.
MY FIRST HTML FILE(source file)
<div class="card">
<img src="https://res.cloudinary.com/mo1/image/upload/v1564584621/kobe_lq48jt.jpg" id="mentorPicOne" alt="">
<strong><p>Kobe Bryant </p></strong>
<div class="mentor-info">
<input type="checkbox" id="check_id">
<label for="check_id"></label>
<ul>
<li><strong>Bio: </strong> A 44-year old husband and father of 2.</li><br>
<li><strong>Occupation: </strong> Retired professional basketball player</li><br>
<li><strong>Expertise: </strong> 5 years</li><br>
<button class="reach-btn" onclick="openPage()"> Reach Out</button>
</ul>
</div>
</div>
MY SECOND HTML FILE (destination file)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="shortcut icon" type="image/x-icon" href="../images/accusoft.png">
<link rel="stylesheet" href="../assets/css/all.css">
<link rel="stylesheet" href="../css/my_mentor.css">
<title>Free Mentors | My Mentor </title>
</head>
<body onload="onload()">
<div class="main-container">
<header class="header">
<a class="logo" href="/">
<span id="logo-icon">
<i class="fab fa-accusoft"></i>
</span>
<h3>Free<span id="free-mentors">Mentors</span></h3>
</a>
<div class="register-buttons">
<button class="button">Back</button>
<button class="button" id="admin-dash">Log Out</button>
</div>
</header>
<h2>My Mentor</h2>
<main class="content-container">
<div class="selected-mentor">
</div>
</main>
<footer class="footer">
<p>© Free Mentors 2019</p>
</footer>
</div>
</body>
<script src="../js/my_mentor.js" type="text/javascript"></script>
</html>
JavaScript File (my_mentor.js)
const mentorPicOne = document.getElementById('mentorPicOne'); ;
const selectedMentor = document.querySelector('.selected-mentor')
console.log('The selected', mentorPicOne)
openPage = async ()=>{
window.location.assign('./my_mentor.html');
}
function onload(){
selectedMentor.innerHTML = mentorPicOne;
}
I want to be able to click the React Out button, hence executing the openPage function, and then go the my_mentor page having the image inside of it.
I'd really appreciate your help. Thanks.
what do you mean by transferring from one file to other? its just a url, it can be placed in both pages. the image is not really on the page, its requesting it from your url and showing it in your html.

How can I block hidden button on HTML

I am working on a html which already works integrated on a application. On this html there was 3 buttons and I add new one. This 3 button showen together when you click anyone on screen but new one do not seem. How can its possible. How can I solve this problem.
This is what I want:
(When I click Navigation button all buttons seen, but when I click another button new button do not seem which named 180 day Documents)
This situation valid for all button without "Navigation" but I could not load picture. I mean when You click to second button too, New button do not seem.
When you click Third button:
(Same problem valid too when click view button)
For this html there was a ready html and I add new button on it.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<link rel="stylesheet" type="text/css" href="css/pwietp.css" media="screen" id="screenCSS" />
<link rel="stylesheet" type="text/css" href="css/print.css" media="print" id="printCSS" />
<link rel="stylesheet" type="text/css" href="css/evoslider/evoslider.css" />
<script type="text/javascript" src="js/jquery.combined.js"></script>
<script type="text/javascript" src="js/ietp-common.js"></script>
<script type="text/javascript" src="js/ietp-nav.js"></script>
<script type="text/javascript" src="js/ietp-search.js"></script>
</head>
<body>
<div id="wrapper"><div id="bar">
<div id="menu">About</div>
<div id="logoDiv"><img id="logo" src="images/logo.png" /></div>
<form id="search_toolbar" method="get" action="/solr/select">
<input id="searchinput" type="text" name="q" value="search" size="28" maxlength="140" onfocus="searchBarOnFocus(this)" onblur="searchBarOnBlur(this)" />
</form>
</div>
<div id="tabcontainer">
<div id="tabs" class="nav">
<span><a id="navtab" href="#" class="btn-highlight">Navigation</a></span>
<span><a id="searchtab" href="/solr/select" class="btn">Search</a></span>
<span><a id="viewtab" href="#" class="btn">View</a></span>
<span><a id="180DayDocumentstab" href="#" class="btn">180 Day Documents</a></span>
<div class="outer-container"><div class="container">
<div id="navigationContainer"><div class="navSection">
<div class="outer-container"><div class="container">
<div class="header navigationPMTitle"><span class="crumb" id="crumb">
Home
<span>|</span>Issue No: 013<span>|</span>Issue Date:
2017-02-01</div></div><div id="navSortButtons" class="header navSortButtons">Sort by:
Tile
Techname
Infoname
DMC</div></div>
<div class="navSection"><div id="navigationFolders">
<div class="navTitleDiv"><h3 class="removeBottomPadding">Contents</h3></div>
<div id="navigationFoldersDiv">
<ul class="treeView" name="treeView">
</ul>
</div></div>
<div id="navigationDocuments">
<div id="navDocumentsTitleSection" class="navTitleDiv hide"><h3 class="removeBottomPadding" id="navDocumentsTitle"></h3></div>
<div id="navigationDocumentsDiv"></div></div></div></div></div></div>
<div id="footer">
International Aero Engines Proprietary Information © 2014 - 2017.
EAR Export Classification: Not subject to the EAR per 15 C.F.R. Chapter 1, Part 734.3(b)(3).</div></div>
</body>
</html>
Actually, if i copy your code (only the span tags) and i remove the closing span after the <a id="180dayDocumentsTab"> all the span tags show up on my screen. Remove the </span> after this anchor tag and you'll be good to go.
<span><a id="180DayDocumentstab" href="#" class="btn">180 Day Documents</a></span>
Close the <span class="crumb" id="crumb"> because it's ruining your divs after that. Use fiddle Tidy option to help you get a nicer code and it will help you get a look on missing closing tags or any other small code errors. A clear code will make you spot any mistake much faster.

I'm unable to right-click my webpage in Chrome after including Angularjs code

I have a mock website that I'm working on as a proof of concept. I'm using a mixture of HTML5, Bootstrap, and AngularJS.
Everything was going well until I added some AngularJS code, then the right-click menu stopped working in Chrome. (I tested it and its working in IE.) Otherwise the page is working exactly as expected.
I've included the HTML and the Angular-related JS below. Any searches I can think to do for a solution bring up totally unrelated answers. Any help would be much appreciated.
<DOCTYPE html>
<head>
<meta charset="utf-8">
<title>
Hello World
</title>
<META NAME="ROBOTS" CONTENT="NOINDEX,NOFOLLOW"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="public/css/bootstrap.min.css">
<script src="public/js/jquery.min.js"> </script> <script src="public/js/bootstrap.min.js"> </script> <script src="public/js/angular.min.js"> </script> <script src="public/js/dragdrop.js"> </script>
</head> <body data-ng-app="testapp" data-ng-controller="testappCtrl"> <div class="container-fluid">
<div class="col-md-2 ">
<img src="http://th07.deviantart.net/fs70/PRE/i/2014/004/5/3/battle_power_sword_by_ittoogami-d70wvph.jpg" class="img-responsive img-rounded" draggable="true" ondragstart="drag(event)" id="1">
</img>
</div>
<div class="col-md-2 ">
<div style="border: 5px solid" ondragover="allowDrop(event)" ondrop="drop(event)">
</div>
</div>
<div class="col-md-4 ">
<p>
Name:
<input type="text" class="form-control" data-ng-model="name">
</p>
<p>
{{name}}
</p>
</div>
</div>
<script src="public/js/testapp.js">
</script>
</body>
</html>
Here's the AngularJS code:
var app = angular.module('testapp', []);
app.controller('testappCtrl', function($scope){
$scope.name = "";
});
I made the changes to the tags suggested by Semicolon and everything is working again.

view the login page when user click back button after logout in struts

I am doing my project in struts2 and i have created the login pages and logout pages successfully in my project. But when a user logout and he clicks the back button on the browser user can view the logged in page. How can i avoid that?
Here is my html of login page
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<%#taglib prefix="s" uri="/struts-tags" %>
<% /*
<s:if test="#session.Salesman.username != ''" >
<script type="text/javascript" >
top.location.href = "salesmanHome" ;
</script>
</s:if>
<s:else>
*/%>
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Cache-control" content="no-cache">
<!--++++++DEVELOPED BY WWW.ZOONDIA.IN AND WWW.ZOOCRE8IVE.COM+++++-->
<title>DrDirect</title>
<script src="js/scripts.js" type="text/javascript"></script>
<style type="text/css">#import url("css/styles.css");</style>
<meta http-equiv="Pragma" content="no-cache"/>
<meta http-equiv="Cache-Control" content="no-cache"/>
<meta http-equiv="Expires" content="-1"/>
</head>
<body>
<div class="drDirectHomeWrapper">
<div id="wrapper" class="drSalesBottomSection innerBotSec">
<div class="drLoginWrapper overview">
<div class="drLoginCont">
<div class="drLoginHolder">
<img src="images/drHomeLogo.png" width="203" height="41" alt="" />
<form action="salesManLogin" method="post">
<div class="drLoginField">
<s:if test="hasActionErrors()">
<div class="loginErrorHolder">
<s:actionerror />
</div>
</s:if>
<input type="hidden" name="urlPath" value="<%=request.getServletPath()%>" />
<div class="drLoginNameHolder queryInput">
<label for="userName">User Name</label>
<%--<s:textfield id="userName" theme="simple" name="userName"/>--%>
<input type="text" id="userName" name="userName" autocomplete="off"/>
</div>
<div class="drLoginNameHolder queryInput">
<label for="password">Password</label>
<%-- <s:password theme="simple" name="password" id="password"/> --%>
<input type="password" name="password" id="password" autocomplete="off"/>
</div>
<!-- <input type="submit" class="btnHomeLogIn" value="Login" /> -->
<button type="submit" class="btnHomeLogIn" >Login</button>
<div class="clear"></div>
<p class="homeLoginPassword">
Lost Your Password?
</p>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
and here is my login Success page
<%#taglib prefix="s" uri="/struts-tags" %>
<s:include value="/WEB-INF/salesMan/salesManheader.jsp"/>
<%#page import= "com.myDrDirect.common.MyBase64"%>
<div id="container">
<!--Header-->
<div id="pageHeader">
<s:a action="gotosalesManLogout" >Logout</s:a>
<img src="images/pageLogo.png" width="166" height="36" alt="DrDirect" />
</div>
<s:include value="/WEB-INF/salesMan/salesManLeftMenu.jsp" />
<!--Right Col-->
<%
Integer docid = null;
String did = null;
try {
//docid =0;
did = "0";
MyBase64 Base64 = new MyBase64();
byte[] bytedocid = did.getBytes();
did = Base64.encode(bytedocid);
} catch (Exception e) {
e.printStackTrace();
}
%>
<%-- <div id="rightCol" class="tablecell3">
<!--<iframe src="text.html" height="100%" width="100%" frameborder="0" scrolling="no" allowtransparency="yes"></iframe>-->
<div class="drHomeSignUpWrapper">
<div class="drHomeSignUpCont">
<div class="drHomeSignUpHolder">
<img src="images/drHomeLogo.png" width="203" height="41" alt="" />
<a class="btnDrSignUp" title="Presentation">Presentation</a>
Templates
<s:form action="" method="post" name="signUpformDoctor" >
<s:hidden name="ID" value="" id="doctorID"/>
Sign Up Doctor
</s:form>
</div>
</div>
</div>
</div>--%>
<!--End Right Col-->
<div id="rightCol" class="tablecell3">
<!--<iframe src="text.html" height="100%" width="100%" frameborder="0" scrolling="no" allowtransparency="yes"></iframe>-->
<div class="rightWrapper removeClass">
<iframe src="salesManhomePage" height="100%" width="100%" id="frameCont" frameborder="0" scrolling="no" name="iframeCenter" allowtransparency="yes"></iframe>
<!-- <div class="bgLeftShadow removeClass"></div>-->
<div class="bgRightShadow removeClass"></div>
</div>
<div class="bgRightWrapBot removeClass"><div class="bgBotRight"><div></div></div></div>
</div>
<%--<s:include value="/WEB-INF/salesMan/salesmanDoctorsList.jsp" />
<s:include value="/WEB-INF/salesMan/salesmanIframe.jsp" />--%>
<s:include value="/WEB-INF/salesMan/salesManFooter.jsp" />
and my salesManHeader.jsp is
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"/>
<!--++++++DEVELOPED BY WWW.ZOONDIA.IN AND WWW.ZOOCRE8IVE.COM+++++-->
<title>DrDirect - Template</title>
<script src="js/scripts.js" type="text/javascript"></script>
<style type="text/css">#import url("css/styles.css");</style>
<script type="text/javascript">contactScroll="yes";</script>
<meta http-equiv="Pragma" content="no-cache"/>
<meta http-equiv="Cache-Control" content="no-cache"/>
<meta http-equiv="Expires" content="-1"/>
</head>
<body style="min-width: 1024px;">
Please check. Is include page will cause a problem here.
Well what #Jordan Arsenault has already said in the comment is fully applicable to your question.This is an issue related to the browser cache and if you have already invalidated the session, so clicking the link will not let user to do anything till he/she log-in to the system
Some of the other work you can do is set HTTP header either in your logout Action class or can create a custom Interceptor with following code something like
HttpServletResponse response=null;
response=ServletActionContext.getResponse();
response.setHeader("Pragma", "no-cache");
response.setHeader("Cache-Control", "no-cache");
response.setHeader("Expires", "0");
Additionaly you can add these headers to your JSP pages also, but its not 100% sure that server will respect your header untill you are browsing in secure mode (https).
Read the following thread from mailing list for similar issue
Browser-Back-Forward-Button-in-Struts2
Browser_Cache
Long time(better) solution :
You should implement something like session in your application.Also you may use struts interceptors to filter out any request that goes to server.So when user logs out, session will be destroyed.
Short time solution :
In your login page, paste this code in onload event:
window.history.forward(1);
Update
In your login page :
<body onload="window.history.forward(1);"> //// to disable back button
I assume that you have authorization control (with session) on your password protected area. Then you can simply add meta tag for no cahce in your head tags.
<meta http-equiv="Cache-control" content="no-cache">
Hope this works..
The content is probably just cached.
If your application is not super data-heavy just add non-caching headers before any HTML output :
header('Cache-Control: no-cache, no-store, must-revalidate'); // HTTP 1.1.
header('Pragma: no-cache'); // HTTP 1.0.
That'll be a quick fix.
I have tried
<%
response.setHeader("Cache-Control","no-cache"); //HTTP 1.1
response.setHeader("Pragma","no-cache"); //HTTP 1.0
response.setDateHeader ("Expires", 0); //prevents caching at the proxy server
%>
in my jsp page and
HttpServletResponse response=null;
response=ServletActionContext.getResponse();
response.setHeader("Pragma", "no-cache");
response.setHeader("Cache-Control", "no-cache");
response.setHeader("Expires", "0");
in my java page and
write script
window.history.forward(1)
scrips in my pages but unfortunately any of these script do nothing on my

Categories

Resources