I followed the examples that I found but for some reason clicking on the above div won't trigger a click on the below input. Can someone tell me where I'm going wrong?
$(document).on('click', '#uploader', function(event) {
$("#url").click();
});
#uploader {
width: 480px;
height: 100px;
line-height: 100px;
border: 2px dashed #443d66;
cursor: pointer;
color: #777;
font-family: 'Arial';
font-weight: bold;
text-align: center;
margin-bottom:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<div id="uploader">
Click
</div>
<input type="text" name="url" id="url">
</body>
</html>
If you need the click to focus on the #url element, use .focus() instead of .click():
$(document).on('click', '#uploader', function(event) {
$("#url").focus();
});
#uploader {
width: 480px;
height: 250px;
line-height: 250px;
border: 2px dashed #443d66;
cursor: pointer;
color: #777;
font-family: 'Arial';
font-weight: bold;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<div id="uploader">
Click
</div>
<input type="text" name="url" id="url">
</body>
</html>
$(document).on('click', '#uploader', function(event) {
$("#url").click();
});
#uploader {
width: 480px;
height: 250px;
line-height: 250px;
border: 2px dashed #443d66;
cursor: pointer;
color: #777;
font-family: 'Arial';
font-weight: bold;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<div id="uploader">
Click
</div>
<input type="file" name="url" id="url" onclick="console.log('clicked!!')">
</body>
</html>
I guess you want to open native file browser window on click. Check the snippet, there in an click handler attached to the input too.
You can use this for further processing.
I hope on click of div you want to show file upload window.
For that Convert type="text" to type="file" and it will work fine.
Working snippet:-
$(document).on('click', '#uploader', function(event) {
$("#url").click();
});
#uploader {
width: 480px;
height: 250px;
line-height: 250px;
border: 2px dashed #443d66;
cursor: pointer;
color: #777;
font-family: 'Arial';
font-weight: bold;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<div id="uploader">
Click
</div>
<input type="file" name="url" id="url">
</body>
</html>
Note:-
Your code is working fine, but there is no click handler written to catch that event. So notting happening
You can assure by adding click handler to your code like below:-
$(document).on('click', '#uploader', function(event) {
$("#url").focus(); // you can apply .click() too
});
/* for click add the even handler like below
$('#url').click(function(){
$(this).val('Hey click worked!').focus();
});
*/
#uploader {
width: 480px;
height: 250px;
line-height: 250px;
border: 2px dashed #443d66;
cursor: pointer;
color: #777;
font-family: 'Arial';
font-weight: bold;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<div id="uploader">
Click
</div>
<input type="text" name="url" id="url">
</body>
</html>
Instead of this
$(document).on('click', '#uploader', function(event) {
$("#url").click();
});
Use like this
$(document).on('click', '#uploader', function(event) {
$("#url").trigger('click);
});
Are you missing an click event for the #url element?
When triggering a click event for an element using .click() you have to define an actual click event for it.
$(document).on('click', '#uploader', function(event) {
$("#url").click();
});
$("#url").click(function(){
alert('asd');
});
This could be the only reason, unless the scripts aren't loaded properly, or you are getting some errors while running your JS.
See: JSFiddle
In case you want the click event to focus on your input element, you'd use .focus(), as described in a previous answer written by Alive to Die.
See: JSFiddle
Click & Focus, just modify few code
$('#uploader').on('click', function(event) {
$("#url").click().focus();
});
#uploader {
width: 480px;
height: 100px;
line-height: 150px;
border: 2px dashed #443d66;
cursor: pointer;
color: #777;
font-family: 'Arial';
font-weight: bold;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<div id="uploader">
Click
</div>
<br>
<input type="text" name="url" id="url" onclick="alert('clicked!!')">
</body>
</html>
Related
After doing some research I came to this code shown below. If you try the code yourself you notice the variable is used for every div with a button and text (the whole site). I tried several other codes but I like the slideDown/Up feature.
var status = "less"
$(document).on("click", ".toggle-text-button", function() {
if (status == "less") {
$(this).parent().children(".toggle-text").slideDown();
status = "more";
} else if (status == "more") {
$(this).parent().children(".toggle-text").slideUp();
status = "less";
}
});
.toggle-text-button {
background-color: #000000;
color: yellow;
cursor: pointer;
padding: 18px;
width: 100%;
border: 25%;
text-align: middle;
outline: none;
font-size: 15px;
font-family: verdana, geneva;
font-weight: bold;
}
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit-icons.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit.min.js"></script>
<div>
<button class="toggle-text-button">Title</button>
<div class="uk-text-justify toggle-text" style="display: none; margin-bottom: 2px;">
<p>The text that is hidden.</p>
</div>
</div>
<div>
<button class="toggle-text-button">Title Two</button>
<div class="uk-text-justify toggle-text" style="display: none; margin-bottom: 2px;">
<p>The text that is hidden two.</p>
</div>
</div>
If somebody knows how I can rearrange this code to make it work for every different div that would be fantastic.
Thank you in advance!
Variable status is "global", it's not unique for your toggle texts. There are various methods of doing this. The easiest is to check, if your .toggle-text class element is visible or not, and slide up/down accordingly.
$(document).on("click", ".toggle-text-button", function() {
var toggleText = $(this).parent().children(".toggle-text");
if (toggleText.is(':visible')) { // when toggleText is visible
toggleText.slideUp();
} else { // when it's not visible
toggleText.slideDown();
}
});
.toggle-text-button {
background-color: #000000;
color: yellow;
cursor: pointer;
padding: 18px;
width: 100%;
border: 25%;
text-align: middle;
outline: none;
font-size: 15px;
font-family: verdana, geneva;
font-weight: bold;
}
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit-icons.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit.min.js"></script>
<div>
<button class="toggle-text-button">Title</button>
<div class="uk-text-justify toggle-text" style="display: none; margin-bottom: 2px;">
<p>The text that is hidden.</p>
</div>
</div>
<div>
<button class="toggle-text-button">Title Two</button>
<div class="uk-text-justify toggle-text" style="display: none; margin-bottom: 2px;">
<p>The text that is hidden two.</p>
</div>
</div>
I have a div I would like to show when a customer enters into a form. I originally though a z-index solution would fix this but a display/show option seems better.
However, it doesn't seem to work. Can this be shortened or done in a better way?
$(document).ready(function(){
if ($("input#poundprice").text().length > 0) {
$('.pence-sign').show();
//$('.pence-sign').addClass('display:block;');
}
});
Here is the JSFiddle
You need to be checking for when something is actually typed into the box. What you are currently doing only runs once when the page loads.
$(document).ready(function(){
$("#poundprice").on("change keydown paste",function(e) {
$('.pence-sign').show();
});
$("button").click(function(e){
e.preventDefault();
});
});
.pence-sign {
position: absolute;
top: 23%;
left: 30%;
text-transform: lowercase;
font-family: arial;
display: none;
}
input, button {
appearance: none;
border: none;
font-size: inherit;
background: #eee;
border-radius: 3px;
padding: 1rem;
width: 100%;
max-width: 280px;
margin-bottom:1rem;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form style="position:relative">
<div class="poundinput" style="position:relative;">
<p class="pence-sign">pence</p>
<input id="poundprice" name="price" type="currency" placeholder="Enter p value" required="">
</div>
<button type="submit">Submit</button>
</form>
This code removes div containing ad according to set time:
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
setTimeout(function(){
$('#adbox').remove();
}, 5000);
</script>
This code hides ad after button click:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("#adbox").hide();
});
});
</script>
<button id="hide">skip ad ❌</button>
<div id="adbox"> ad code goes here </div>
Is it possible to make a script to remove or hide div containing ad after ad click?
With jQuery you can do:
$('#adbox').on('click', function() {
$(this).hide();
});
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="adbox"> ad code goes here </div>
Widhout jQuery:
document.querySelector('#adbox').onclick = function() {
this.style.display = 'none';
};
<div id="adbox"> ad code goes here </div>
You can use $(this) with your hide() function. Inside a Jquery callback, the $(this) value stand for the current element, so if you write $('#ads').on('click', function(item) {}); the $(this)variable will point to the $('#ads') element, that's why we can call Jquery function on it.
$('#ads').on('click', function(item) {
$(this).hide();
})
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
#banner-message {
background: #fff;
border-radius: 4px;
padding: 20px;
font-size: 25px;
text-align: center;
transition: all 0.2s;
margin: 0 auto;
width: 300px;
}
button {
background: #0084ff;
border: none;
border-radius: 5px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
}
#banner-message.alt {
background: #0084ff;
color: #fff;
margin-top: 40px;
width: 200px;
}
#banner-message.alt button {
background: #fff;
color: #000;
}
#ads {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="banner-message">
<p>Hello World</p>
<div id="ads"></div>
</div>
Note here that most of the code is irrelevent, only the Javascript part is important.
I'm trying to create a program where the user will input some text in a field and when pressing "Start" the text will go to a paragraph but it will be shown backwards.
Trying to do this with Html,jquery and Css.
How can I do this?
Here's the Html:
<!DOCTYPE html>
<html id="head">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="BackTalk.js"></script>
<link rel="stylesheet" type="text/css" href="BackTalk.css">
<title>BackTalk</title>
</head>
<body id="body">
<div id="Main">
<form>
<input id="input" type="number" value="Start">
<button id="input2" onclick="">Start</button>
</form>
</div>
<form id="frm">
<p id="para"></p>
</form>
</body>
</html>
And the $/javascript (Main part I need help with as you can see):
$(document).ready(function () {
$('#input2').click(function () {
});
});
Css (Don't know if needed):
#head {
}
#body {
background-image: url('stardust.png');
}
#Main {
width: 230px;
padding: 10px;
border: 1px double #ffffff;
border-radius: 10px;
margin: auto;
}
#frm {
width: 230px;
height: 500px;
padding: 10px;
border: 1px double #ffffff;
border-radius: 10px;
margin: auto;
}
#input {
border-radius: 10px;
}
#input2 {
border-radius: 10px;
}
Try this http://jsfiddle.net/Tushar490/th778nfs/
$('#input2').click(function () {
var value=$('#input').val();
console.log($('#para').text(value.split("").reverse().join("")));
});
Not sure if this is exactly what you're looking for:
$(document).ready(function () {
$('#startbutton').click(function () {
$('#para').text($('#input').val().split('').reverse().join(''));
});
});
JSFiddle
Here's a quick background on what I'm trying to do. I have a contact form on my website, and when the user clicks on 'Submit', I want it to do this:
User clicks submit
Confirmation box opens, asking user to agree or disagree to the
disclaimer
if agrees = submit form
if disagrees = close confirmation box
Here is what I want to know. I don't necessarily want to style the actual alert box, since I know that is not possible, what I want to do is style the text inside the alert box; the "disclaimer". I tried just adding header tags and bold tags to it, but those just generate the text and not the actual styles.
Here's the code I'm using, its just a very simple alert box script.. if you have a better idea, please let me know.
<SCRIPT language="JavaScript">
<!--
function go_there()
{
var where_to= confirm("DISCLAIMER TEXT WILL GO HERE");
if (where_to== true)
{
window.location="http://mcgehee.ace-onecomputers.com/nlphpmail.php";
}
else
{
}
}
//-->
HTML:
<button class="button" id="submit" value="send" type="submit" name="submit" onClick="go_there()">Send</button>
Also, another issue i'm having with this is that instead of it just closing the dialog box, it still continues the script.
You cannot style alert or confirm box. You have to use DHTML box.
Using Impromptu
Try this, I used jQuery Impromptu plugin http://trentrichardson.com/Impromptu/
Demo: http://jsfiddle.net/muthkum/4h8cX/6/
For full code, check out page source on http://fiddle.jshell.net/muthkum/4h8cX/6/show/
Using smoke.js
Demo: http://jsfiddle.net/muthkum/8qXsv/3/
UPDATE:
Here is the full code using jQuery Impromptu
You can see, I've included jquery-1.8.2.js and jquery-impromptu.4.0.min.js. Also styles are included in the below codes. I hope this helps.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo by muthkum</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.2.js'></script>
<script type='text/javascript' src="http://trentrichardson.com/Impromptu/scripts/jquery-impromptu.4.0.min.js"></script>
<style type='text/css'>
/*
------------------------------
Impromptu
------------------------------
*/
.jqifade{
position: absolute;
background-color: #777777;
}
div.jqi{
width: 400px;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
position: absolute;
background-color: #ffffff;
font-size: 11px;
text-align: left;
border: solid 1px #eeeeee;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
padding: 7px;
}
div.jqi .jqicontainer{
font-weight: bold;
}
div.jqi .jqiclose{
position: absolute;
top: 4px; right: -2px;
width: 18px;
cursor: default;
color: #bbbbbb;
font-weight: bold;
}
div.jqi .jqimessage{
padding: 10px;
line-height: 20px;
color: #444444;
}
div.jqi .jqibuttons{
text-align: right;
padding: 5px 0 5px 0;
border: solid 1px #eeeeee;
background-color: #f4f4f4;
}
div.jqi button{
padding: 3px 10px;
margin: 0 10px;
background-color: #2F6073;
border: solid 1px #f4f4f4;
color: #ffffff;
font-weight: bold;
font-size: 12px;
}
div.jqi button:hover{
background-color: #728A8C;
}
div.jqi button.jqidefaultbutton{
background-color: #BF5E26;
}
.jqiwarning .jqi .jqibuttons{
background-color: #BF5E26;
}
</style>
<script type='text/javascript'>//<![CDATA[
function go_there(){
$.prompt('<b>DISCLAIMER</b> <span style="font-weight:normal">TEXT WILL GO HERE</span>',{
buttons: { Ok: true, Cancel: false},
callback: function(e,v,m,f){
if(v){
window.location="http://mcgehee.ace-onecomputers.com/nlphpmail.php";
}else{
}
}
});
}
//]]>
</script>
</head>
<body>
<button class="button" id="submit" value="send" type="submit" name="submit" onClick="go_there()">Send</button>
</body>
</html>