I created a fiddle but the image doesn't display in firefox. Why not? The html is
<div id="message1" class="alert alert-warning alert-dismissable flyover flyover-centered">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">x</button>
<strong></strong> User added
</div>
<!-- Menubar -->
<div id="menubar">
<div id="menubarcentercontainer">
<div id="menubarleft">
</div>
<div id="menubarright">
<div id="menubaruserinfo" class="menubaritem">
<p>Sign In or Sign Up</p>
</div>
<div class="menubaritem">
<p>Get Onacci</p>
</div>
</div>
</div>
</div>
<img id="top-header" src="https://wwwe.onacci.com/onacci.png">
<form id="searchbox" action="connect.php" method="POST">
<div class="control-group" style="float:left;">
<div class="controls" style="float:left;">
<input type="text" id="email" name="email" placeholder="Enter your email" class="input-xlarge">
<p class="help-block">Please provide your E-mail</p>
</div>
</div>
<div style="float:left;">
<!-- Button -->
<button type="submit" class="btn btn-success">Add me to waiting list</button>
</div>
</form>
Because you have an "e" on your www url request(image path).
Also, the image URL is untrusted and firefox will keep blocking the image source url.
Try requesting the image URL in a new window.
It's classed as an untrusted connection by default in Firefox and therefore the image won't download and display.
It is showing up on Firefox v40. However, if it is an issue of "This Connection is Untrusted" error, then better you refer to this solution at official Firefox support forum: https://support.mozilla.org/en-US/kb/connection-untrusted-error-message
Related
I made a login page on my computer but I don't know how to make it react after login. I am trying to make a website that people can send messages to each other.
I typed in this:
<html>
<!-- Button to open the modal login form -->
<button onclick="document.getElementById('id01').style.display='block'">Login</button>
<!-- The Modal -->
<div id="id01" class="modal">
<span onclick="document.getElementById('id01').style.display='none'"
class="close" title="Close Modal">×</span>
<!-- Modal Content -->
<form class="modal-content animate" action="/action_page.php">
<div class="imgcontainer">
<img src="https://clipground.com/images/img_avatar2-png-2.png" alt="Avatar" class="avatar">
</div>
<div class="container">
<label for="friends"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="friends" required>
</div>
<label for="keep secrets"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="keep secrets" required>
<div class="container">
<button type="submit">Login</button>
<label>
<input type="checkbox" checked="checked" name="remember"> Remember me
</label>
</div>
<div class="container" style="background-color:#f1f1f1">
<button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button>
<span class="keep secrets">Forgot password?</span>
</div>
</form>
</div>
</html>
This type of application, a lot more complicated than a single page, i recommend you search for some tutorias like on youtube .-.
This is a good link https://jasonwatmore.com/post/2017/09/16/react-redux-user-registration-and-login-tutorial-example
I am trying to use GWTootstrap3 with the following html:
<div class="row myheader">
<div class="col-md-4">
<img class="myimg" alt="Bootstrap Image Preview" src="logo.png" />
</div>
<div class="col-md-4">
<h2> Welcome to the Award Tracker Login Page. </h2>
</div>
<div class="col-md-4">
<img class="myimg pull-right" alt="Bootstrap Image Preview" src="1stER_icon_256.png" />
</div>
</div> <!-- /row -->
<div class="row">
<div class="col-md-12" style="text-align: center;">
<h3> Instructional videos </h3>
</div>
</div> <!-- /row -->
<div class="row">
<div class="col-md-12" style="text-align: center;">
<h3> Proudly supported by Metawerx - Specialising in Java hosting since 1997. </h3>
</div>
</div> <!-- /row -->
<div class="row">
<div class="col-md-12" style="text-align: center;">
<button id="privacyPolicy" class="btn btn-large btn-primary" type="submit">Privacy and Security Policy</button>
</div>
</div> <!-- /row -->
<div class="row">
<div class="col-md-12">
<form class="form-signin">
<h2 class="form-signin-heading">Please sign in</h2>
<input id="accountName" type="text" class="input-block-level" placeholder="Email address">
<input id="enterPassword" type="password" class="input-block-level" placeholder="Password">
<button id="submit" class="btn btn-large btn-primary" type="submit">Sign in</button>
</form>
</div>
</div> <!-- /row -->
<div class="row">
<div class="col-md-12" style="text-align: center;">
<button id="createAccount" class="btn btn-large btn-primary" type="submit">Create an Account</button>
<button id="updateAccount" class="btn btn-large btn-primary" type="submit">Update Account</button>
<button id="forgotPassword" class="btn btn-large btn-primary" type="submit">I forgot my password <img src="sadFace.jpg" width="10" /></button>
</div>
</div> <!-- /row -->
Whenever I press the Signin button (or hit enter) the page refreshes and I loose the information entered. This is also resulting in an error:
"Throwable value =
com.google.gwt.user.client.rpc.StatusCodeException: 0" being returned
to the program. How do I stop the page refreshing please? I use the
following to call:
btnSignIn.addClickHandler(new ClickHandler() { public void onClick(ClickEvent event) {
Because you are using a form the page is refreshing.
You can just do this:
1) switch the <form> to <div>
2) remove the type="submit" from the button
That's it your all done.
GwtBootstrap Form widget creates a bona fide <form> tag which attempts to submit your form data to the form target upon pressing the submit button or ENTER. To prevent this behavior, indicate so to the form widget:
<b:Form submitOnEnter="false">
I have an issue when trying to check a checkbox inside a form inside a modal.
Here the code
<div id="modal-new-bill" class="modal">
<form action="NewBill" method="post">
<div class="modal-content">
<div class="row">
<div class="checkbox">
<input type="checkbox" value="remender" name="remender">
<label for="remender">Create Remender?</label>
</div>
</div>
</div>
<div class="modal-footer center">
Cancel
<button type="submit" class="btn waves-effect waves-light">Insert</button>
</div>
</form>
</div>
The problem is that i can't check that checkbox but if i came to it by tab clicks and then space it, it gets checked. anyone know how to made it checked by mouse click?.
Thanks.
It is working as you posted so you most likely have some JavaScript attached to it causing your issue.
<div id="modal-new-bill" class="modal">
<form action="NewBill" method="post">
<div class="modal-content">
<div class="row">
<div class="checkbox">
<input type="checkbox" value="remender" name="remender">
<label for="remender">Create Remender?</label>
</div>
</div>
</div>
<div class="modal-footer center">
Cancel
<button type="submit" class="btn waves-effect waves-light">Insert</button>
</div>
</form>
</div>
Currently, I am using angular 2.0. In one of my HTML files I have code like
<div class="row">
<button class="btn btn-primary" (click)="addExtra">Add Extra </button>
</div>
How to add a div on click of this Add Extra Channel button.I need to have a div as mentioned below. Do I need add this HTML using typescript code?
<div class="row">
<div class="col-md-2">
<label for="title">Title</label>
</div>
<div class="col-md-8">
<input type="text" id="title" style="width:100%" class="form-control" />
</div>
</div>
You would wire the click to a function that adds to a list in the controller. You would then use an ngFor (docs https://angular.io/docs/ts/latest/api/common/index/NgFor-directive.html)` to loop through this list and add that template.
If at all both of the Htmls are in the same page.In the typescript file declare the variable addExtra and set it as false by default.And on click of button make it true.
<div class="row">
<button class="btn btn-primary" (click)="addExtra=true">Add Extra</button>
</div>
<div class="row" *ngIf="addExtra">
<div class="col-md-2">
<label for="title">Title</label>
</div>
<div class="col-md-8">
<input type="text" id="title" style="width:100%" class="form-control" />
</div>
</div>
For some reason.. the button in the input-group keeps wrapping to the 2nd line.. the only way I can force it to stay on the 1st line is to use CSS to make the width 80% for example. But then the spacing seems off between the 4 elements..
Is there a cleaner way of doing this? I dont even know why it's wrapping to the 2nd line.. maybe because I'm using this in a Modal?
EDIT: how it looks like http://imgur.com/sfWqATl
<!--3rd row-->
<div class="row form-group">
<div class="col-md-2">
stuff...
</div>
<div class="col-md-4">
<div class="input-group">
<small>Logo 1 ID / File Path</small>
<br />
<div>
<input type="file" data-file="headline.contents.logo1path" id="logoPath1" class="hidden" />
<input type="text" class="form-control" />
<span class="input-group-btn">
<button class="btn btn-default glyphicon glyphicon-folder-open" type="button"></button>
</span>
</div>
</div>
</div>
<div class="col-md-4">
stuff...
</div>
<div class="col-md-2">
stuff...
</div>
</div>
I think you may have gotten a little mixed up in setting up the classes and elements to chain correctly based on the documentation. I re-wrote some of the code to model it from the bootstrap website, and it appears to work fine:
<div class="col-md-4">
<small>Logo 1 ID / File Path</small>
<input type="file" data-file="headline.contents.logo1path" id="logoPath1" class="hidden" />
<div class="input-group">
<input type="text" class="form-control" />
<span class="input-group-btn">
<button class="btn btn-default" type="button"><i class="glyphicon glyphicon-folder-open"></i></button>
</span>
</div>
</div>
You can see the example here: http://www.bootply.com/EHvB2rn9YW