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.
Related
I have got a "Flight Booking System" in HTML and CSS & JS. But the problem is when the person books a flight it is supposed to update the text in their dashboard, but it just won't work. The "onclick function" of my button does just not connect to the JS function. Please help?
HTML For The Page:
<!DOCTYPE html>
<html lang="en">
<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">
<title>S.B.S Booking System</title>
<link rel="stylesheet" href="./style.css">
<script src="./script.js"></script>
</head>
<body>
<div class="sidenav">
Home
Booking
Dashboard
Contact
</div>
<h1 id="booktitle">Book A New Flight</h1>
<h2 id="booktitle2">To Book A New Flight, Please Fill In The Form Below</h3>
<form id="bookform" action="./contact.html">
<label style="font-weight: 700;" for="ftakeoff">Where Will You Be Taking Off From?</label> <br>
<input type="text" id="ftakeoff"><br>
<label style="font-weight: 700;" for="fland">Where Will You Be Landing?</label> <br>
<input type="text" id="fland"><br>
<label style="font-weight: 700;" for="fname">What Is Your First - And Last - Name(s)?</label> <br>
<input type="text" id="fname"><br>
<label style="font-weight: 700;" for="fphone">What Is Your Phone Number?</label> <br>
<input type="text" id="fphone"><br>
<label style="font-weight: 700;" for="fextra">Any Extra Info (E.G: Time Of Flight, Accocomadtion, etc)</label> <br>
<input type="text" id="fextra"><br>
<button id="fsubmit" type="submit" onclick="cbookings()">Submit Flight Booking</button>
</form>
<button onclick="cbookings()">Submit</button>
</body>
</html>
HTML For The Dashboard Page:
<!DOCTYPE html>
<html lang="en">
<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">
<title>S.B.S Booking Dashboard</title>
<link rel="stylesheet" href="style.css">
<script src="./script.js"></script>
</head>
<body>
<div class="sidenav">
Home
Booking
Dashboard
Contact
</div>
<h1 id="title1">Your Booking Dashboard</h1>
<h2 id="title2">Check Up On Your Flights</h2> <br> <br>
<h2 id="bstatus">No Bookings...</h2>
</body>
</html>
JS:
var statustext = document.getElementById("bstatus")
function cbookings() {
statustext.innerHTML = "1 Booking"
alert("Worked")
}
When I click "fsumbit" it should change "bstatus" to "1 Booking". It just doesnt work. My JS is connected to my pages because when I do a JS command outside of the function it works probably. I'm using basic JS and code.
Heres my github rep:
https://github.com/samykcodes/sbsystem
Any my website:
samsbookingsystem.netlify.app
You're trying to use JS code to modify other pages of the website, which is not possible. When you click the button on the Booking page, document.getElementById("bstatus") is going to return a null value, since there is no element that has the ID 'bstatus' on the Booking page.
This is fundamentally not how JavaScript works -- you cannot reference an element of a page that is not loaded. In order to click a button on one page, and have a value change on a different page, you would need to use far more complex methods than are relevant for your skill level.
In the short term, you can simply copy the button onto your dashboard page, and you will see that it works there.
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.
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.
Well, I have this slider wich is workin' with parallax content slider! And I would like to have the image at the place of the text and vice versa! I've come to change it but as soon as I pass to the next slider it returns to it initial position!
.da-slide-current .da-img {
left: 10%;
opacity: 1;
}
jsfiddle
Any way I can achieve that? Much appreciated.
You can play with the div positions:
<html lang="en" class=" js cssanimations csstransitions"><head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Parallax Content Slider with CSS3 and jQuery</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Parallax Content Slider with CSS3 and jQuery">
<meta name="keywords" content="slider, animations, parallax, delayed, easing, jquery, css3, kendo UI">
<meta name="author" content="Codrops">
<base href="http://tympanus.net/Development/ParallaxContentSlider/" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/demo.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/modernizr.custom.28468.js"></script>
<link href="http://fonts.googleapis.com/css?family=Economica:700,400italic" rel="stylesheet" type="text/css">
<noscript>
<link rel="stylesheet" type="text/css" href="css/nojs.css" />
</noscript>
</head>
<body>
<div class="container">
<div id="da-slider" class="da-slider" style="position:relative;">
<div class="da-slide da-slide-current" >
<h2 style="position:absolute;top:50%;">Warn WWelcome</h2>
<p style="position:absolute;top:25%;">When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane.</p>
<div class="da-img"><img src="images/1.png" alt="image01"></div>
</div>
<div class="da-slide" >
<h2 style="position:absolute;top:50%;">Easy management</h2>
<p style="position:absolute;top:25%;">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
<div class="da-img"><img src="images/2.png" alt="image01"></div>
</div>
<div class="da-slide" >
<h2 style="position:absolute;top:50%;">Revolution</h2>
<p style="position:absolute;top:25%;">A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
<div class="da-img"><img src="images/3.png" alt="image01"></div>
</div>
<div class="da-slide" >
<h2 style="position:absolute;top:50%;">Quality Control</h2>
<p style="position:absolute;top:25%;">Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
<div class="da-img"><img src="images/4.png" alt="image01"></div>
</div>
<nav class="da-arrows">
<span class="da-arrows-prev"></span>
<span class="da-arrows-next"></span>
</nav>
<nav class="da-dots"><span class="da-dots-current"></span><span></span><span></span><span></span></nav></div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.cslider.js"></script>
<script type="text/javascript">
$(function() {
$('#da-slider').cslider();
});
</script>
</body></html>
http://jsfiddle.net/YakV7/36/
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;";