I just started making my first website, and this is the first REAL problem that I have run into. I'm trying to make "Sign in" and "Sign up" buttons that automatically change their text if the user is logged in. To do it, I'm using Javascript to read the localStorage username value, check if it equals null, and then set both button's .innerHTML based on that. The problem? My Javascript won't run. Here's the HTML/Javascript code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Phyre-Home</title>
<link href="Phyre-Home.css" rel="stylesheet">
<script language="javascript">
page.onload function{
var profile = document.getElementById("Profile");
var signout = document.getElementById("SignUpOut");
var username = localStorage.getItem('phyreUsername');
if(username == null) {
profile.innerHTML = "Sign in";
signout.innerHTML = "Sign up";
}else{
profile.innerHTML = username;
signout.innerHTML = "Sign out";
}
}
</script>
</head>
<body>
<header>
<img src="PhyreSiteHeader.bmp" alt="Phyre">
<button id="SignUpOut"></button>
<button id="Profile"></button>
<h1 style="display:none">Fire</h1>
<script language="javascript">
</script>
</header>
<nav>
<ul>
<li><b>Home</b></li>
<li>Profile</li>
<li>Games</li>
<li>Chat</li>
<li>Videos</li>
</ul>
</nav>
<aside>
<h1><b>Page Nav</b><br></h1>
<p><i>This page does not have its own, separate navigation section. Sorry.</i></p>
<h1><b>Ads</b><br></h1>
</aside>
<article>
</article>
</body>
</html>
...And here's the CSS, just in case it matters:
article, aside, figure, figcaption, footer, header, main, nav, section, summary {
display:block;
}
header:img{
max-width:90%;
}
body{
background-color:rgb(75, 75, 75);
margin:0px;
font-family:times new roman, serif;
}
header{
width:100%;
float:top;
}
#SignUpOut{
position:absolute;
top:0%;
right:0%;
}
#Profile{
position:absolute;
top:0%;
right:7.5em;
}
h1{
text-align:center;
font-family:AR BLANCA, times new roman, serif;
}
ul{
list-style-type:none;
margin:0;
padding:0;
}
li{
float:left;
width:20%;
font-size:large;
text-align:center;
border-style:solid;
border-color:rgb(187, 15, 23);
box-sizing:border-box;
background-color:rgb(237, 28, 36);
border-width:2px;
margin-bottom:0.5%;
}
aside{
float:left;
width:20%;
border-style:solid;
border-color:rgb(187, 15, 23);
box-sizing:border-box;
background-color:rgb(237, 28, 36);
border-width:3.5px;
padding:0.5%;
margin-right:0.5%;
}
article{
float:right;
width:79.5%;
border-style:solid;
border-color:rgb(187, 15, 23);
box-sizing:border-box;
background-color:rgb(237, 28, 36);
border-width:3.5px;
padding:0.5%;
}
The culprit is the first Javascript section. Please help if you can, I'm pretty new to HTML5, CSS3, and Javascript.
P.S. I don't have a domain or anything yet, so none of the links are valid.
As far as I know, there's no such thing as page, you probably want window
window.onload = function() {...
or just drop the onload handler and move the script to the bottom, right before </body>
The main issue is that page is not a JavaScript variable.
You could do something like
function myLoadFunction() {
...
}
then
<body onload="myLoadFunction()">
...
</body>
Alternatively you can use window.onload
window.onload = function () {
...
};
I have made you a completely working example here, that does everything you are asking, you may simply click this link to see it in action. You may click the second link in order to see the code and dissect it a bit.
Working Sample (with username)
Just click the link to see it work.
Working Sample (without username)
Just click the link to see it work.
Working Sample (Code)
Just click the link, then click Run with JS to see it work.
Now that I have shown you a completely working solution, allow me to explain why it works.
You do not appear to be using any sort of external library, this means that there is really nothing running overhead to try and help manage when these events fire and such.
You did not declare any kind of id on the elements you were trying to fetch
To demonstrate this, I cite your original code;
var profile = document.getElementById("Profile");
Which was assumed to be functioning on the following <a> tag.
<li>Profile</li>
The problem here is that document.getElementById actually needs an id to get by. This is remedied by ammending the <a> tag with an id, like this.
<li><a id="Profile" href="www.phyregaming.com/profile">Profile</a></li>
The next part of the problem is that you needed this code to run only after the page had loaded. But because you're running just normal javascript, it will run in the order it is seen - unless wrapped inside of a function. Because page.onload is not a valid function, your javascript simply threw an error, and since page.onload is not a real function, it didn't quite understand what its own problem was, so it didn't give you any really useful information.
I fixed this by first wrapping your code in a function, like this.
<script type="text/javascript">
function ready() {
// your javascript code here
}
</script>
What this meant is that when the page hit that part, it created the function, but it did not run it.
Then you needed to run the function, but only once the other parts of the page were ready. We did this using the onload attribute of the <body> tag, like this;
<body onload="ready()">
And that is really all there is to it! From there it was just a matter of assigning the id attributes where needed, and doing a little bit of housekeeping to the HTML and CSS.
I made some changes to help your sample run a bit better, most noticed is that I removed this part of your CSS
#Profile { position: absolute; top: 0%; right: 7.5em; }
I am not sure if you need it to be positioned like that, but from what it looked like, you wanted to make sure that the Profile section is also where the user finds the Login and Logout buttons. I accommodated by moving the <li> that contained those elements to the last ones in the list, this will ensure they are always rendered in the upper right part of the page, for this example.
The first one is just a sample showing how to run the code when the page is loaded. The second shows where you would put your actual code, but I do not know what your specific javascript is aiming to accomplish, so I commented it out.
Here is the complete working code.
You can remove the line localStorage.setItem("phyreUsername", "Ciel"); or comment it out, to see how the behavior changes based on whether or not a username is found.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<script type="text/javascript">
function ready(){
// comment this line out to test different behaviors
localStorage.setItem("phyreUsername", "Ciel");
var username = localStorage.getItem("phyreUsername");
var profile = document.getElementById("SignIn");
var signout = document.getElementById("SignUpOut");
if (username == null) {
profile.innerHTML = "Sign in";
signout.innerHTML = "Sign up";
} else {
profile.innerHTML = username;
signout.innerHTML = "Sign out";
}
}
</script>
</head>
<body onload="ready()">
<nav>
<ul>
<li><b>Home</b></li>
<li>Games</li>
<li>Chat</li>
<li>Videos</li>
<li>
Sign In
Sign Up
</li>
</ul>
</nav>
<aside>
<h1>
<b>Page Nav</b>
</h1>
<p style="font-style: italic">This page does not have its own, separate navigation section. Sorry.</p>
<h1>Ads</h1>
</aside>
</body>
</html>
CSS
article, aside, figure, figcaption, footer, header, main, nav, section, summary {
display:block;
}
body {
margin: 0;
}
nav {
width: 100%;
margin: 0;
padding: 0;
}
ul {
list-style-type:none;
margin:0;
padding:0;
}
li {
float: left;
width: 20%;
font-size: large;
text-align: center;
border: solid rgb(187,15,23) 2px;
margin-bottom: 0.5%;
box-sizing: border-box;
background: rgb(255, 0, 0);
}
body {
background-color:rgb(75, 75, 75);
margin:0px;
font-family:times new roman, serif;
}
header {
width:100%;
float:top;
}
h1 {
font-weight: bold;
}
aside {
float:left;
width:20%;
border-style:solid;
border-color:rgb(187, 15, 23);
box-sizing:border-box;
background-color:rgb(237, 28, 36);
border-width:3.5px;
padding:0.5%;
margin-right:0.5%;
}
article {
float:right;
width:79.5%;
border-style:solid;
border-color:rgb(187, 15, 23);
box-sizing:border-box;
background-color:rgb(237, 28, 36);
border-width:3.5px;
padding:0.5%;
}
I hope that this gives you enough information to really start making some headway. If you have further questions, please ask.
Related
Currently I am working on a sample project which is a single page website where all the details are divided in sections.
I am calling all the section through internal linking and I want to modify the url structure of those links from like "example.com/#section-1" to "example.com/about-us". So, how can I achieve this?
The following is a sample code structure.
<!DOCTYPE html>
<html>
<head>
<style>
html, body, body *{
margin:0;
padding:0;
}
body, html, div{
height:100%;
width:100%;
}
#container-1{
background-color:green;
}
#container-2{
background-color:yellow;
}
#container-3{
background-color:gray;
}
.container p{
padding:10px;
font-size:50px;
}
</style>
</head>
<body>
<div id="main-container">
<div id="container-1" class="container"><p>Container-1</p>To Container-2</div>
<div id="container-2" class="container"><p>Container-2</p>To Container-3</div>
<div id="container-3" class="container"><p>Container-3</p>To Container-1</div>
</div>
</body>
</html>
If I understand you correctly, you can use history.pushState.
So here is the steps:
Get the relative URL from the clicked link.
Use pushState to push the state to the history (so you could use back and forward.
Scroll the page to the selected element.
Keep it in you mind that you need to configure your server that wil transfer (rewrite) any sub page to the main page. So when user will try to go to "sub page" (container2 for example) the server will return the main page, and with the javascript you will scroll to page to the right section.
Array.prototype.forEach.call(document.querySelectorAll('a'), function(a) {
a.addEventListener('click', function(e) {
e.preventDefault();
var link = a.hash.replace('#', '');
history.pushState(null, 'page', link);
scrollToElement();
});
});
function scrollToElement() {
var page = location.pathname.replace('/', ''),
container = document.querySelector('#' + page);
container.scrollIntoView();
}
<!DOCTYPE html>
<html>
<head>
<style>
html, body, body *{
margin:0;
padding:0;
}
body, html, div{
height:100%;
width:100%;
}
#container-1{
background-color:green;
}
#container-2{
background-color:yellow;
}
#container-3{
background-color:gray;
}
.container p{
padding:10px;
font-size:50px;
}
</style>
</head>
<body>
<div id="main-container">
<div id="container-1" class="container"><p>Container-1</p>To Container-2</div>
<div id="container-2" class="container"><p>Container-2</p>To Container-3</div>
<div id="container-3" class="container"><p>Container-3</p>To Container-1</div>
</div>
</body>
</html>
http://output.jsbin.com/zaduqo
I would reccomend using Apache mod_rewrite module
RewriteRule ^/about-us /index.php#container-2 [NE,L,R=301]
RewriteRule ^/contact-us /index.php#container-1 [NE,L,R=301]
and then using
links
I need some help. I have to write a javascript code that will toggle the a element for show more or less. If I click on show more, it should show the more with a link for show less.
Problem I am Having
1. If I click show more About the Author, instead of just showing more info about just that, it will also show more info about the book description, and who this book is for.. I don't want it to do that, I just want it to show me more info about just that specific one.
2. It's also not showing me or giving me the less link option.
Here is my HTML and JavaScript code.
$(document).ready(function() {
$("#jdom").click(function() {
$("a").toggle(function () {
$(this).text("").siblings("div").hide();
}, function() {
$(this).text("Less").siblings("div").show();
});
});
});
article, aside, figure, figcaption, footer, header, nav, section {
display: block;
}
* {
margin: 0;
padding: 0;
}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 87.5%;
width: 650px;
margin: 0 auto;
border: 3px solid blue;
}
section {
padding: 15px 25px;
}
h1 {
font-size: 150%;
}
h2 {
font-size: 120%;
padding: .25em 0 .25em 25px;
}
div.hide {
display: none;
}
ul {
padding-left: 45px;
}
li {
padding-bottom: .4em;
}
p, a {
padding-bottom: .4em;
padding-left: 25px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Expand/Collapse</title>
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="stylesheet" href="index.css">
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="subset_expansion.js"></script>
</head>
<body>
<section id="jdom">
<h1>Murach's JavaScript and DOM Scripting</h1>
<h2>Book description</h2>
<div>
<p>You can read other JavaScript books from start to finish and still not
know how to develop dynamic websites like you want to.</p>
</div>
<div class="hide">
<p>But now, you can go from JavaScript beginner to DOM scripting expert in a
single book! Fast-paced, professional, and packed with expert practices, our
new JavaScript book.</p>
</div>
Show more
<h2>About the author</h2>
<div>
<p>Ray Harris is an expert JavaScript programmer. That will be obvious to you
as soon as you review the 20 complete applications that he presents in this
book.</p>
</div>
<div class="hide">
<p>Ray Harris is much more than a JavaScript programmer.</p>
<p>So when Ray said he wanted to write for us, it didn't take us long to hire
him.</p>
</div>
Show more
<h2>Who this book is for</h2>
<div>
<p>Due to our unique presentation methods and this book's modular organization,
this is the right book for any web developer who wants to use JavaScript effectively.</p>
</div>
<div class="hide">
<p>Here's just a partial list of who can use this book:</p>
<ul>
<li>Web developers who know HTML and CSS and are ready to master JavaScript.</li>
<li>Web developers who program in ASP.NET, JSP, or PHP on the server side and
now want to master client-side coding.</li>
<li>Web developers who have already read 3 or 4 JavaScript or DOM scripting books
but still don't know how to do the type of DOM scripting that's required in
real-world applications</li>
</ul>
</div>
Show more
</section>
</body>
</html>
I don't know what I am doing wrong.
Try This,
$(document).ready(function() {
$(document).on('click','a',function(e){
$(this).text( ($(this).text() == "Show more") ? "Less":"Show more" ) ;
$(document).find($(this).attr('data-target')).toggle();
/*OR WITH ANIMATION*/
/*
if($(this).text() == "Show more"){
$(this).text("Less");
$(document).find($(this).attr('data-target')).slideDown(300);
}else{
$(this).text("Show more");
$(document).find($(this).attr('data-target')).slideUp(300);
}*/
});
/*MORE ACTION*//*
$(document).on('click','#jdom',function(e){
$(document).find('a').each(function(){
$(this).trigger('click');
})
});
*/
});
HTML PART UPDATE AS BELOW
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Expand/Collapse</title>
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="stylesheet" href="index.css">
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="subset_expansion.js"></script>
</head>
<body>
<section id="jdom">
<h1>Murach's JavaScript and DOM Scripting</h1>
<h2>Book description</h2>
<div>
<p>You can read other JavaScript books from start to finish and still not
know how to develop dynamic websites like you want to.</p>
</div>
<div class="hide" id="bookDesc">
<p>But now, you can go from JavaScript beginner to DOM scripting expert in a
single book! Fast-paced, professional, and packed with expert practices, our
new JavaScript book.</p>
</div>
Show more
<h2>About the author</h2>
<div>
<p>Ray Harris is an expert JavaScript programmer. That will be obvious to you
as soon as you review the 20 complete applications that he presents in this
book.</p>
</div>
<div class="hide" id="author">
<p>Ray Harris is much more than a JavaScript programmer.</p>
<p>So when Ray said he wanted to write for us, it didn't take us long to hire
him.</p>
</div>
Show more
<h2>Who this book is for</h2>
<div>
<p>Due to our unique presentation methods and this book's modular organization,
this is the right book for any web developer who wants to use JavaScript effectively.</p>
</div>
<div class="hide" id="bookDet">
<p>Here's just a partial list of who can use this book:</p>
<ul>
<li>Web developers who know HTML and CSS and are ready to master JavaScript.</li>
<li>Web developers who program in ASP.NET, JSP, or PHP on the server side and
now want to master client-side coding.</li>
<li>Web developers who have already read 3 or 4 JavaScript or DOM scripting books
but still don't know how to do the type of DOM scripting that's required in
real-world applications</li>
</ul>
</div>
Show more
</section>
</body>
</html>
I have modified the HTML a bit, and JS as well. Try using like this, it might give you solution.
$(document).ready(function() {
$("a").click(function(e) {
e.preventDefault();
var moreSection = $(this).parents(".section").find(".more-section");
if($(this).text() == "Show more" && moreSection.hasClass("hide")){
$(this).text("Show less");
moreSection.removeClass("hide").addClass("show");
}else{
$(this).text("Show more")
moreSection.addClass("hide").removeClass("show");
}
});
});
article, aside, figure, figcaption, footer, header, nav, section {
display: block;
}
* {
margin: 0;
padding: 0;
}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 87.5%;
width: 650px;
margin: 0 auto;
border: 3px solid blue;
}
section {
padding: 15px 25px;
}
h1 {
font-size: 150%;
}
h2 {
font-size: 120%;
padding: .25em 0 .25em 25px;
}
div.hide {
display: none;
}
div.show {
display: block;
}
ul {
padding-left: 45px;
}
li {
padding-bottom: .4em;
}
p, a {
padding-bottom: .4em;
padding-left: 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section id="jdom">
<h1>Murach's JavaScript and DOM Scripting</h1>
<h2>Book description</h2>
<div class="section">
<p>You can read other JavaScript books from start to finish and still not
know how to develop dynamic websites like you want to.</p>
<div class="hide more-section">
<p>But now, you can go from JavaScript beginner to DOM scripting expert in a
single book! Fast-paced, professional, and packed with expert practices, our
new JavaScript book.</p>
</div>
Show more
</div>
<h2>About the author</h2>
<div class="section">
<p>Ray Harris is an expert JavaScript programmer. That will be obvious to you
as soon as you review the 20 complete applications that he presents in this
book.</p>
<div class="hide more-section">
<p>Ray Harris is much more than a JavaScript programmer.</p>
<p>So when Ray said he wanted to write for us, it didn't take us long to hire him.</p>
</div>
Show more
</div>
<h2>Who this book is for</h2>
<div class="section">
<p>Due to our unique presentation methods and this book's modular organization,
this is the right book for any web developer who wants to use JavaScript effectively.</p>
<div class="hide more-section">
<p>Here's just a partial list of who can use this book:</p>
<ul>
<li>Web developers who know HTML and CSS and are ready to master JavaScript.</li>
<li>Web developers who program in ASP.NET, JSP, or PHP on the server side and
now want to master client-side coding.</li>
<li>Web developers who have already read 3 or 4 JavaScript or DOM scripting books
but still don't know how to do the type of DOM scripting that's required in
real-world applications</li>
</ul>
</div>
Show more
</div>
</section>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I have a very simple website with some menu tabs (i.e. Home, About Me etc.) and few paragraphs. I added click function inside my .JS file so that the clicking on tab can navigate to the desired paragraph (or page). But it's not working.
I should refernce to this post as I posted back.
[NOTE: I have apache running in my computer and xwamp is installed. I have jquery source added into my file and they are accurately saved in correct path or file. Besides I have Bootstrap installed, though I didn't necessarily need to set path for any file to it.]
My code:
main.php:
<!DOCTYPE html>
<html>
<head>
<html lang="en">
<html charset="utf-8">
<title>Welcome to Fatah's world!</title>
<link rel="stylesheet" href="main_design.css"/>
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/main_interaction.js"></script>
<div class="row">
<div id="header" class="col-xs-12">
<h1>Welcome to my green world!</h1>
</div>
<div class="col-xs-4">
<ul>
<li id="home">HOME</li>
<li id="gallery">GALLERY</li>
<li id="about">ABOUT ME</li>
<li id="contact">CONTACT ME</li>
<li id="diary">MY DIARY</li>
<li id="blog">BLOG</li>
</ul>
</div>
<div class="col-xs-8 home">
<p>Thank you for spending your time to visit my website. My name is Jabir Al Fatah. I live in Sweden. I have a lot of interest in web developing and 3d graphics designing. I am a travel addicted guy. I love to travel and have experience about diversity among life and nature. I am passionate. I don't do everything just becuase I am obliged to do,rather I like to take risk to be done with something just because I like.I haven't have a wonderful childhood in my life. But I admit it that my parents were surprisingly aware of my future and even every singlestep in my life. Their love and affection fulfilled all of my demand.Well, I just admired them a little. There are tons of others stuff I can say. However, in my life, changes happen very fast.</p>
</div>
<div class="col-xs-8 gallery hidden">
<p>This is the gallery.</p>
</div>
<div class="col-xs-8 about hidden">
<p>This paragraph should appear while clicking on "About me". Beisides, it's not accurately placed in the window. I need to fix that .Another problem is that this paragraph moves under the menu area by pushing it up when I make the window size smaller.</p>
</div>
<div class="col-xs-8 contact hidden">
<p>Contact me here.</p>
</div>
<div class="col-xs-8 diary hidden">
<p>My diary will be here.</p>
</div>
<div class="col-xs-8 blog hidden">
<p>Blog posts appear here.</p>
</div>
<div id="footer" class="col-xs-12">Developed by Jabir Al Fatah</div>
</div>
</body>
</html>
.JS:
$("li").on('click', function () {
$(".col-xs-8").addClass("hidden");
$("." + $(this).attr("id")).removeClass("hidden");
});
.CSS:
#import url('http://getbootstrap.com/dist/css/bootstrap.css');
.row {
margin: 0;
}
#header {
background-color: mediumturquoise;
text-align: center;
padding: 20px;
border: 4px solid crimson;
}
.col-xs-8 {
text-align: center;
font-family:'Verdana';
color: mediumblue;
font-size: 13pt;
}
.col-xs-4{
border: 4px solid crimson;
background-color: yellow;
line-height: 40pt;
font-family:'Tahoma';
font-size: 15pt;
font-weight: bold;
margin: 0;
padding: 0;
}
.col-xs-4 ul {
list-style-type: none;
}
#footer {
background-color: gray;
border: 2px solid green;
text-align: center;
position: absolute;
bottom: 0;
left: 0;
}
li:hover {
cursor: pointer;
text-decoration: underline;
}
You're including (and thus executing) the JavaScript before the elements exist on the page. HTML/JavaScript is processed in the order in which is exists in the DOM. So when this runs:
$("li")
the parser is only at the top of the HTML body and hasn't loaded any li elements into the DOM yet. Thus, that selector doesn't find anything.
Either put the JavaScript at the end of the DOM or wrap it in a document ready handler:
$(function () {
$("li").on('click', function () {
// etc.
});
});
(or both)
on not support from jquery 1.9, try live
$("li").live("click",function(){});
I looked at your code and was wondering if replacing
$("li").on('click', function () {
with
$("li").click(function() {
would solve the issue. I've used jquery for a while but have never used ".on" but my onclicks work fine. Hope this helps!
I've created a widget in GWT and I would like to be able to give users a small snippet of HTML that they can embed in their website so my widget will be rendered there.
I don't believe an iframe would be appropriate as one requirement is that clicking any links on my widget should take the user to my website (not just change the content of the iframe).
Any help would be greatly appreciated.
P.S. I tried embedding the following, but no luck:
< script src="http://embeddedapptest.appspot.com/embeddedapp/embeddedapp.nocache.js" >< /script >
< div id="foo" / >
It is possible. The snippet will need to be like
<script src="yourmodule.nocache.js"></script>
<div id="foo"/>
Then in your entry point do this:
RootPanel root = RootPanel.get("foo");
// add your things here. root.add(...);
You will need to be careful not to step on the outer page's styling and vice versa but compiled CSS should go a long way to helping that.
This is the technique used to embed an APIs Explorer in Google APIs documentation.
I don't think it's possible to do it now. But in the future you can use Web Components to do that.
But there's the possibility to export a GWT/Java API using gwt-exporter. That makes it possible to automatically create a JavaScript API. gwtchismes uses this to export a JavaScript version of GWT widgets. You can find a tutorial about it in their wiki.
In NetBeans GWT project
mycss.css:
body, html,div.wrap-frame{
margin: 0;
padding: 0;
widht: 100%;
height: 100%;}body{
background: white;
}
.row1or3 {
width: 100%;
height: 10%;
background: blue;
text-align: center;
}
.row2{
width: 100%;
height: 80%;
background: yellow;
text-align: center;
display:flex;
}
.wrapper{
width:100%;
height: 100%;
}
.box{
float:left;
height: 100%;
}
.box:nth-child(1){
width:25%;
background-color:red;
}
.box:nth-child(2){
width:50%;
background-color:green;
}
.box:nth-child(3){
width:25%;
background-color:yellow;
}
welcomeGWT.html
<html>
<head>
<script id=ft type="text/javascript" src="org.yournamehere.Main/org.yournamehere.Main.nocache.js"></script>
<meta name='gwt:module' content='org.yournamehere.Main=org.yournamehere.Main'>
<link rel="stylesheet" href="mycss.css">
</head>
<body>
<div class="row1or3"> Row1
</div>
<div class="row2">
<div class="wrapper">
<div class="box">
Left Side Menu
</div>
<div class="box" id="mydiv">
</div>
<div class="box">
Right Side Menu
</div>
</div>
</div>
<div class="row1or3">
Row3
</div>
</body>
MainEntryPoint.java
public class MainEntryPoint implements EntryPoint {
/**
* Creates a new instance of MainEntryPoint
*/
public MainEntryPoint() {
}
/**
* The entry point method, called automatically by loading a module that
* declares an implementing class as an entry-point
*/
public void onModuleLoad() {
final Label label = new Label("Hello, GWT!!!");
final Button button = new Button("Click me!");
button.addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
label.setVisible(!label.isVisible());
}
});
RootPanel root = RootPanel.get("mydiv");
root.add(button);
root.add(label);
}
}
Now you can name any div element of any html page as id=mydiv and add the compiled GWT jscript.
I have tested.
Is there a more elegant way of creating a JavaScript popup?
<head>
<script>
function myPopup() { window.open( "http://www.google.com", "myWindow", "status=1, height=300, width=300, resizable=0" )
}
</script>
</head>
<body>
<input type="button" onClick="myPopup()" value="popup">
</body>
jQuery UI has a great modal dialog plugin that is easy to use.
<head>
<script>
function myPopup(){
window.open("http://www.google.com", "myWindow",
"status=1,
height=300,
width=300,
resizable=0"
);
}
</script>
</head>
<body>
<input type="button" onclick="myPopup()" value="popup" />
</body>
The simplest, pure html/css.
Using the details element toggling capabilities, and the selector details[open]:
details > p {
padding: 0.5rem;
background: lightcoral;
margin: 0;
display: flex;
flex-direction: column;
}
details[open] {
position: fixed;
width: 33%;
transform: translate(calc(50vw - 50%), calc(50vh - 50%));
outline: 10px #000000d4 solid;
transition: all 2s linear
}
details[open] summary::after {
content: '❌';
float: right;
}
<details>
<summary>Project</summary>
<p>Save project<button>Save to file</button></p>
<p>Publish<button>POST</button></p>
<p>Update<button>Update</button></p>
</details>
<details>
<summary>Another Popup</summary>
<p>Powered by html<input></p>
</details>
Depends what you're trying to achieve... you could look at Modal Dialogue forms.
jQuery does this http://jqueryui.com/demos/dialog/ for examples.
That is how I open a modalDialog
function showModalDialog() {
window.showModalDialog('HizmetSuresiUzatma.aspx',
'',
'resizable: no;
scroll: No;
dialogWidth:640px;
dialogHeight:350px');
}
after a button click on a page called HizmetListesi.aspx.I write the JS code on that aspx file then call it with
ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "hizmetYenileTahsilat", "showModalDialog()", true);
on aspx.cs file.
A GOOD working code with NO crashes.
Simple and what makes this code better is that you can use it in a JavaScript file separately and have it fairing to more then one file with the same popup size even though its different pages on popups.
Javascript
// Popup window code
function MyPopUp(url) {
popupWindow = window.open(
url,'popUpWindow','height=454,width=580,left=0,top=200,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes')
}
HTML
My PopUp
NOTE: You can also use this as onload in body for example <body onload="JavaScript:MyPopUp('MyDirectory/Page.html');"> and it will aslo work on onmouseover and others... though I do not advise this unless you want to piss off the clients visiting your page.