Develop Reference

How to make image upload using jQuery or Javascript

I couldn't do this because my javascript part was not good. I have a design in mind. When you click the button and upload the picture, the picture will appear in that circle. At the same time if you want to remove the cross button.
Theme screenshot
<div class="upload">
<img src="images/upload.png" class="uploadImage" alt="">
<input type="file" class="imageUpload">
<style>
.upload{
width: 130px;
height: 130px;
border-radius: 50%;
border: 3px dashed #ddd;
}
input[type="file"].imageUpload{
cursor: pointer;
font: 300 14px sans-serif;
color:#9e9e9e;
width: 128px;
height: 128px;
border-radius: 50%;
background: rgba(0, 0, 0, 0);
position: relative;
z-index: 2;
display: block;
margin-top: -2px;
}
input[type="file"].imageUpload::-webkit-file-upload-button{
display: none
}
img.uploadImage{
position: absolute;
margin-top: 41px;
z-index: 1;
left: 70px;
width: 39px;
}
</style>
There is a design for the album page. I'm gonna use a design here. Click on the button and the image after the bear will be listed next to the size button. At the same time the cross button can be removed at any time.
Theme screenshot
I would appreciate it if you tell me with a simple design. It's like I can handle it myself if I understand your logic.

Somewhat like you want
<form>
<input required type="file" name="fileToUpload" multiple data-preview-to="#preview" />
<div id=preview></div>
<input type=hidden name="who-sent" value="jake sent me">
<button>submit</button>
</form>
$($(this).data("preview-to")).html($.map(this.files, function(f) {
return `<figure>
<img src="${URL.createObjectURL(f)}">
<figcaption><input type=checkbox checked> ${f.name}</figcaption>
</figure>`
}))
JSFiddle Example

hiding a "No file chosen" tooltip in Javascript

I know there are many question about it, but they don't answer properly.
After readings and looking for, I tried this:
<input id="ext-element-47" class="x-input-file x-input-el" type="file" accept="" style="display:none">
hiding the file-input and then
this.element.down(".x-input-file").dom.click();
this works on Chrome's console but in my JS code it doesn't. It doesn't click.
Anyone knows why? and what can I do for make click?
Notes:
I need to make click because the file element is not visible and so when it clicks it does not show unless I do element.click ().
Here is an example what I'm doing:
document.getElementsByClassName('o-file-field-input')[0].click()
.o-file-field-input {
display: none;
}
.o-big-btn {
background-color: red;
height: 3em;
width: 3em;
}
<div class="x-container x-unsized o-cont-option" data-componentid="ext-container-5" id="ext-container-5">
<div class="x-inner x-align-center x-pack-center x-horizontal x-layout-box" id="ext-element-50">
<div class="x-button x-button-plain open-field-icon o-big-btn x-layout-box-item x-flexed x-stretched" id="ext-OUI_BaseButton-1" data-componentid="ext-OUI_BaseButton-1" tabindex="0" style="-webkit-box-flex: 1;">
<span class="x-button-icon x-shown smf smf-upload-file" id="ext-element-45"></span>
<div class="o-button-bg"></div>
<div class="x-unsized x-field-input x-has-height" id="ext-fileinput-1" data-componentid="ext-fileinput-1" style="height: 38px;">
<input id="ext-element-47" class="x-input-file x-input-el o-file-field-input" type="file" accept="">
<div class="x-field-mask x-hidden-display" id="ext-element-48"></div>
<div class="x-clear-icon" id="ext-element-49">
</div>
</div>
</div>
</div>
</div>
See ya!

Here's what I usually do: Wrap the input inside a <label> element, and then style the element as a button, for example:
.pretty-file {
border: 1px solid #000;
cursor: pointer;
display: inline-block;
padding: 5px 15px;
}
.pretty-file input[type="file"] {
display: none;
}
<label class="pretty-file">
Choose File
<input type="file" />
</label>

This finally works well:
var obElement = document.getElementsByClassName('input-file')[0];
//the title property overrides tooltip's description
obElement.setAttribute('title', ' ');
.flex-style{
display: flex;
}
.input-file{
opacity: 0;
margin-left: -40px;
width: 40px;
height: 45px;
}
.icon{
width: 40px;
height: 45px;
background-color: blueviolet;
}
<div class='flex-style'>
<div class='icon'></div>
<input class='input-file' type='file'>
</div>

HTML layout renders differently on fiddle and on browser

I have made a small web page, the source code of which is available on FIDDLE. It uses a jquery plugin which I made for autocomplete.
The plugin adds a new div (.mridautocomplete-list) after the initialized inputs, which contains the autocomplete list :
<input id="test1">
<div class="mridautocomplete-list" style="display: block; left: 8px; width: 169px; position: absolute; background-color: white; border: 1px solid rgb(221, 221, 221); max-height: 150px; overflow-x: hidden; overflow-y: scroll; font-family: Arial; font-size: 13.3333px; z-index: 8888;">
<p class="mrid-autocomplete-item" style="margin: 0px; padding-left: 2px; text-align: left; font-size: 13.3333px; cursor: default; background-color: white;"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="mridautocomplete-item-image" style="height: 11px; width: 11px;"><span style="color: #4682B4; font-weight: bold;">a</span>aa</p>
<p class="mrid-autocomplete-item" style="margin: 0px; padding-left: 2px; text-align: left; font-size: 13.3333px; cursor: default; background-color: white;"><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="mridautocomplete-item-image" style="height: 11px; width: 11px;">b<span style="color: #4682B4; font-weight: bold;">a</span>b</p>
</div>
<input class="test2">
<div class="mridautocomplete-list"></div>
<input class="test3">
<div class="mridautocomplete-list"></div>
The problem is :
This web page renders perfectly as expected on fiddle
But when I run the same code on my browser ( without fiddle ), it doesn't get displayed properly, shifting all elements ( SHOWN IN SCREENSHOTS ATTACHED )
Can anyone explain what might be causing the problem ?

Your .test2 class is a width of 80%.
The other inputs have a default width of 173px.
If you resize the fiddle window to a larger width, you will see the same issue.
To fix this you could add a display: block to your .test2 class.

Have you already tried the display CSS property? Setting the second input to "display: block" forces the 3rd input to the next line.
Another option is to place the autocomplete Javascript just before the closing body tag. This also worked for me in Chrome, Firefox and Safari.

How can I Validate forms with jquery?

Thanks to some awesome people on stack overflow i was able to get my classes toggled and got my form slide up and down correctly. I'm having issues validating the form before it becomes submitted. Could someone help me with a step in the right direction? I just want the validation to check that the fields have some text in them before allowing the submit.
Assignment 6
<!-- video https://youtu.be/XEoWYcolaEM -->
<style>
body {
background-color: #fff;
font-family: arial, sans-serif;
font-size: 100%;
}
a {
color: blue;
}
#welcome p strong {
color: navy;
font-size: 1.2em;
}
#welcome p:first-of-type {
margin-bottom: 50px;
}
section {
margin-bottom: 50px;
}
/* main container */
#main {
width: 960px;
margin: 50px auto;
border: 2px solid #000;
padding: 20px;
background-color: #e0e0ff;
position: relative;
box-sizing: border-box;
}
/* form container */
#loginDiv {
width: 300px;
position: absolute;
left: 650px;
top: 6px;
z-index: 100;
border: 1px solid navy;
}
/* paragraph that shows the text "Login" which is clicked on to display/remove the form */
#login {
margin: 0;
cursor: pointer;
background-color: rgb(255,255,255);
padding: 5px 0 2px 30px;
}
#login:hover {
background-color: rgb(110,138,195);
}
/* plus sign icon for login form */
.plus {
background: url(img_open.png) no-repeat 8px 7px;
background-color: rgb(110,138,195);
}
/* minus sign icon for login form */
.minus {
background: url(img_close.png) no-repeat 8px 7px;
}
/*form is hidden when the page loads */
#loginDiv form {
padding: 10px 10px 10px 10px;
display: none;
background-color: rgb(255,255,255);
}
#loginDiv label {
display: block;
width: 100px;
margin: 0 15px 0 0;
}
#loginDiv input {
font-size: 1.2em;
border: 1px solid navy;
}
#loginDiv input:focus {
background-color: rgb(110,138,195);
border: 2px solid navy;
}
#loginDiv input[type=button] {
width: 100px;
}
footer {
text-align: center;
margin-top: 50px;
margin-bottom: 10px;
padding: 20px;
border-top: 1px solid #000;
}
/* ad is not shown when the page loads */
#ad {
width: 300px;
height: 300px;
border: 1px solid #000;
background-color: yellow;
position: absolute;
left: 330px;
top: -500px; /* you can change this inbitially for viewing purposes only but be sure to set it back */
box-sizing: border-box;
background-image: url(ad.jpg);
background-repeat: no-repeat;
}
/* close button on ad */
#adbtn {
width: 50px;
height: 50px;
border: 2px solid #000;
border-top-width: 1px;
border-right-width: 1px;
background-color: #fff;
font-size: 3em;
text-align: center;
cursor: pointer;
box-sizing: border-box;
position: absolute;
top: 0px;
right: 0px;
}
</style>
<script src="jquery-1.12.3.min.js" type="text/javascript"></script>
<script>
//Fading in Advertisent
$(document).ready(function(){
$("#ad").animate({
top: '100px',
},(5000));
//Closing The Advertisement
$("#adbtn").click(function(){
$("#ad").fadeOut(5000);
});
$(".plus").click(function(){
$("form").slideToggle(1000); // half second duration
$(this).toggleClass("plus").toggleClass("minus");
$('button').click(function(){
$("form").val(1);
});
}); // end function
}); // end function
</script>
</head>
<body>
<!-- main container -->
<div id="main">
<section id="loginDiv">
<!-- when this is clicked on the below form should be displayed and plus sign should change to minus sign-->
<p id="login" class="plus">Login</p>
<form>
<p>
<label for="username">Username:</label>
<input type="text" name="username" id="username">
</p>
<p>
<label for="pw">Password:</label>
<input type="password" name="pw" id="pw">
</p>
<p>
<input type="button" value="Submit">
</p>
<!-- placeholder for response if form data is correct/incorrect -->
<p id="error"> </p>
</form>
</section>
<section id="welcome">
<h1>Welcome to the Local jQuery User Group Website</h1>
<p> <strong>Click the login button at the top of the page to login. To become a member please Register</strong> </p>
<h2>About this page layout:</h2>
<p> The main container (parent) has 'relative' positioning so that the 'login' container can be absolutley positioned with respect to
that main container. Otherwise, it would default to being absolutley positioned with respect to the window. </p>
<p> In order for the login panel to be placed on top of the page we need to use absolute positioning, otherwise,
it would move the rest of the content down as done in the FAQ assignment. Technically, absolute positioning takes that element out of
the normal flow of the document, so that it is on top of the page. The 'ad' is also absolutely positioned to the same main container. </p>
</section>
<section>
<h2>This week's agenda:</h2>
<p>There will be a live meeting this Tuesday evening from 7:00pm to 8:00pm PST using our WebEx Conferencing Software.
It will be recorded! Please note that the code samples will be available on our GitHub repository. </p>
</section>
<footer> Copyright © Local jQuery User Group </footer>
<!-- ad which is absolutely positioned -500px from the top so you do not see it when page loads-->
<div id="ad">
<div id="adbtn"> X </div>
</div>
<!-- end main container -->
</div>
</body>
</html>

Take a look into jQuery Validate.
This jQuery plugin makes simple clientside form validation easy, whilst still offering plenty of customization options.

I hope you can learn from this. I'll just give you an example with one of your fields and a submit button. Initially the submit button is disabled, then you can use the keypress event to check if 1 or more characters are entered and enable the submit button.
Fiddle: https://jsfiddle.net/stevenng/8w89v3tp/1/
HTML:
<label for="username">Username:</label>
<input type="text" name="username" id="username">
<button class="js-submit">submit</button>
JS:
var $submit = $('.js-submit');
var $username = $('#username');
$submit.attr('disabled', true);
$username.keypress(function() {
if ( $username.val().length > 0 ) {
$submit.attr('disabled', false);
}
});
$submit.on('click', function(){
// do something
});

show hide content on mouseover boxes

Please can someone assist, looks like such a simple function but for the life of me I cannot get it right. I need to have it inserted on my wordpress website.
Its a simple show hide content when mouseover on another block. Exactly like the one on this site, under the heading Solutions. I mouseover the title block and I see the content on the right hand side.
Is there a very simple way to this? Or even a WP plugin?
Thanks in advance.

I just created a simple solution. Check this below or https://jsfiddle.net/oneness/Lotaaxdh/
JS/CSS/HTML RESPECTIVELY
$( ".science" ).mouseover(function() {
$( "#social_display" ).hide("fast");
$( "#science_display" ).show("slow");
});
$( ".social" ).mouseover(function() {
$( "#science_display" ).hide("fast");
$( "#social_display" ).show("slow");
});
.box{
background-color: #37545c;
border:1px solid #000000;
padding:5px 5px 5px 5px;
color:#ffffff;
}
.right{
float:right;
}
.left{
float:left;
}
#science_display, #social_display {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class='left'>
<div class="box science">Science</div><br>
<div class="box social">Social</div>
</div>
<div class='right'>
<div id='science_display'>This is the story behind Science</div>
<div id='social_display'>Social button story and other details </div>
</div>

I made this for you, but if you have no knowlegde of coding it might be hard to add alone.
https://jsfiddle.net/Skaadel/5s7symfe/
Jquery
$('#puppies').hover(function() {
$('.display').html('Puppies'); /** Change ('Puppies') to change text displayed when hover**/
});
$('#kittens').hover(function() {
$('.display').html('Kittens');/** Change ('Kittens') to change text displayed when hover**/
});
$('#aardvark').hover(function() {
$('.display').html('Aardvark');
/** Change ('Aardvark') to change text displayed when hover**/
});
HTML
<div class="container">
<div id ="kittens"></div>
<div id ="aardvark"></div>
<div id ="puppies"></div>
</div>
<br>
<div class="display">Hover on the picture for description.</div>
CSS
body { background: black; }
.display {
font:20pt 'Georgia';
height:50px;
width: 759px;
text-align:center;
background-color: white;
border: 1px solid black;
margin: auto;
}
.container{
height: 250px;
width: 759px;
margin: auto;
border: 3px solid black;
}
#kittens{
background-image: url(http://goo.gl/Ktu3u0);
height: 250px;
width: 250px;
display: inline-block;
}
#aardvark{
background-image: url(http://goo.gl/qQUUff);
height: 250px;
width: 250px;
display: inline-block;
}
#puppies{
background-image: url(http://goo.gl/6gvDn2);
height: 250px;
width: 250px;
display: inline-block;
}
I made it fast, so the design is not that pretty.