<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$('#sql').on ('click',function() {
$('#loaderImg').show();
});
</script>
And html
<div class="container">
<h1 class="text-center"></h1>
<div id="loaderImg" style="display:none;background-color:white;width:100%;height:660px;">
<img src="25.gif" alt="loader1" style="height:100px; width:100px;position:relative;left:500px;top:300px"></div>
<input type="submit" name="sql" id="sql" onclick="myFunction1()" value="Import Database" class="btn btn-danger"">
I have a button 'import database'.When i clicks the button the loader should be shown until the loading complete.But my problem is the loader image disappear suddenly after displays for a second.How can i solve this??
Remove onclick from button.
code need to be:-
<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<div class="container">
<h1 class="text-center"></h1>
<div id="loaderImg" style="display:none;background-color:white;width:100%;height:660px;">
<img src="25.gif" alt="loader1" style="height:100px; width:100px;position:relative;left:500px;top:300px"></div>
<input type="submit" name="sql" id="sql" value="Import Database" class="btn btn-danger">
<script type="text/javascript">
$('#sql').on ('click',function() {
$('#loaderImg').show();
});
</script>
Working example:-
$('#sql').on ('click',function() {
$('#loaderImg').show();
});
#loaderImg{
display:none;
background-color:white;
width:100%;
height:100px;
}
img{
height:100px;
width:100px;
position:absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<h1 class="text-center"></h1>
<div id="loaderImg">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/b1/Loading_icon.gif" alt="loader1">
</div>
<input type="submit" name="sql" id="sql" value="Import Database" class="btn btn-danger">
</div>
Weird, I tried your code on Codepen and it worked well. The only problem is, there is no closing on your html. And after you close your container div, loading gif should play until you hide it again.
So my suggestions are, remove onclick from button because you are not using it, add closing </div> at the end of your code.
I have no idea how big your project is but just in case if another plugin or javascript code interfers with your <input id='#sql'> element,
you may try to use $(document).on ('click', '#sql' ,function() {.....})
instead of $('#sql').on ('click',function() {...});
Related
I am trying to change a play button to be a pause button using Font Awesome 5. I don't understand why it seems to just not toggle on click. It recognizes the clicks (I tried with an alert, so it recognizes when I press the button itself) but it will just not find the element inside and change it.
This is my code:
$(".startButton").click(function() {
$(this).find("i").removeClass("fa-play-circle").addClass("fa-pause-circle")
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
</head>
<div id="timerWrapper">
<div class="valuesWrapper">
<div class="values"> 00:00:00</div>
</div>
<div id="buttonWrapper">
<button class="startButton"><i class="fas fa-play-circle"></i></button>
<button class="stopButton">Stop</button>
<button class="clearButton">Clear</button>
</div>
</div>
The main issue with your code is that you are using Font Awesome 5 that changes the i element to svg so your code won't work.
You have two solution:
The easiest one is to use the CSS version of Font Awesome 5 and you will be able to keep your code as it is:
$(".startButton").click(function() {
$(this).find("i").removeClass("fa-play-circle").addClass("fa-pause-circle");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" rel="stylesheet">
<div id="timerWrapper">
<div class="valuesWrapper">
<div class="values"> 00:00:00</div>
</div>
<div id="buttonWrapper">
<button class="startButton"><i class="fas fa-play-circle"></i></button>
<button class="stopButton">Stop</button>
<button class="clearButton">Clear</button>
</div>
</div>
The other solution is to change your code in order to handle the SVG. So you may change the data-icon attribute of the generated svg with the needed icon:
$(".startButton").on('click',function() {
$(this).find('svg').attr("data-icon",'pause-circle');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.2.0/js/all.js"></script>
<div id="timerWrapper">
<div class="valuesWrapper">
<div class="values"> 00:00:00</div>
</div>
<div id="buttonWrapper">
<button class="startButton"><i class="fas fa-play-circle"></i></button>
<button class="stopButton">Stop</button>
<button class="clearButton">Clear</button>
</div>
</div>
i write this code in my site. And the hidden function well perform but when i click on link to show, then it show only for 0.5 sec and then hide this. Please tell me where i mistake.
<script>
$(document).ready(function(){
$("div").click(function(){
$("a:contains('Show content')" ).hide("none");
});
$("div:contains('Show map')").click(function(){
$("a:contains('Show content')" ).show("none");
});
});
</script>
<a href="#" class="btn btn-danger btn-sm btm-zindex " id="Show_cont" >Show content</a>
<div class="col-md-12 profile profile_closed btn1" id="profile"></div>
This $("div").click( is wrong because you do not have a div with that content, your element is an a tag, but even using that is unadvised (its not likely to be the only a tag)
You have an ID on the element so you might want something like this:
$('#Show_cont').click(function() {
$("a:contains(Show content)").hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Show content
when you click on div:contains('Show map') run both show and hide function Because both function react to click the div.
for fix it,give on class to tag `div'.
<div class="hid">
Show content
</div>
and change jQuery like this :
$(".hid").click(function(){
$("a:contains('Show content')" ).hide("none");
})
Final code :
<html>
<title>This is test</title>
<head>
<style>
.hid a{
display: none;
}
</style>
</head>
<body>
<div class="hid">
<a href="#" class="btn btn-danger btn-sm btm-zindex " id="Show_cont" >Show content</a>
</div>
<div class="col-md-12 profile profile_closed btn1" id="profile">Show map</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".hid").click(function(){
$("a:contains('Show content')" ).hide("none");
});
$("div:contains('Show map')").click(function(){
$("a:contains('Show content')" ).show();
});
});
</script>
</body>
</html>
I have responsive Html website
I want to hide and show on click of next in simple html
DEMO PAGE
Q1.WHAT IS YOUR NAME
ANS - JAMES
Q2.WHAT IS YOUR ADDRESS
ANS- PUNE
here Q1 and Q2 are on the same page but
I want to show only one question at a one time but do not want to create multiple physical pages.
I tried using hide and show trick of css but I want to do it on simple html button click NEXT
want output like following
Q1.WHAT IS YOUR NAME
ANS- JAMES
[CLICK NEXT]
it will load Q2 on same page.
I tried not using one page with different pages like below.
<link rel='stylesheet' type='text/css' href='css/style.css' />
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
<script type='text/javascript' src='js/jquery.ba-hashchange.min.js'></script>
<script type='text/javascript' src='js/dynamicpage.js'></script>
<nav>
<ul class="group">
<li>Q1</li>
<li>Q2</li>
</ul>
</nav>
<section id="main-content">
<div id="guts">
Q1.WHAT IS YOUR NAME
ANS - JAMES
</div>
</section>
Using just Javascript you can do this fairly easily. Something like this should work:
HTML
<label id="name">What is your name?<input type="text" /></label>
</br>
<label id="address">What is your address?<input type="text" /></label>
</br>
<button id="next">Next</button>
CSS
#address {
display: none;
}
Javascript
document.getElementById('next').onclick=function(){
document.getElementById('address').style.display='block';
};
Here is a fiddle: http://jsfiddle.net/YJRbE/
Or, if you'd prefer to use jQuery, something like this:
$('#next').on('click', function() {
$('#address').show();
});
Here is a fiddle for the jQuery version: http://jsfiddle.net/XyNXq/
Here some example with jQuery which supports more than two questions:
Try to wrap all your questions in a div and use jquery for the click event so each time you click the button a next question will appear.
In this method you should include all your questions inside the wrapper div and set their display to none.
http://jsfiddle.net/ZFZfY/1/
Edit: http://jsfiddle.net/ZFZfY/3/
HTML:
<div class="questionWrapper">
<div class="question show" id="questionOne">
<label>foo bar?</label>
<input type="text">
</div>
<div class="question" id="questionTwo" style="display: block;">
<label>foo bar?</label>
<input type="text">
</div>
</div>
<a class="NextQuestion" href="#">Next Question</a>
CSS:
.question{ display: none;}
.show{ display: block;}
jQuery:
$('.NextQuestion').click(function(e){
e.preventDefault();
loadNext();
});
$('.PrevQuestion').click(function(e){
e.preventDefault();
loadPrev();
});
function loadNext(){
// loop to verify what is visible
$('.questionWrapper').children().each(function(i){
if($(this).css('display') === 'block' && $(this).next().length > 0){
$(this).css('display','none');
$(this).next().fadeIn();
return false;
}
});
}
function loadPrev(){
// loop to verify what is visible
$('.questionWrapper').children().each(function(i){
if($(this).css('display') === 'block' && $(this).prev().length > 0){
$(this).css('display','none');
$(this).prev().fadeIn();
return false;
}
});
}
here is script
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/1.2.1/jquery-migrate.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.content').each(function() {
var $this = $(this);
$this.find(':not(.col:first,.active)').hide();
$('.col').children().removeAttr('style');
});
$("#add").click(function() {
$(".col:hidden:first").show("slow");
$('.col').prev().hide();
});
});
</script>
here demo html
<div class="content">
<div class="col">
<h3>What Is Your Name</h3>
<input type="text">
</div>
<div class="col">
<h3>What Is Address</h3>
<input type="text">
</div>
<button id="add" class="active">Add</button>
</div>
Hope this helps.
You can change the visibility of elements on button click like this.
document.getElementById('name').style.display='none';
document.getElementById('address').style.display='block';
Here is the working demo
I am trying to toggle showing something on my page, but it will show up but won't hide after I click the button again. When I click the button, the part I want to show shows up just fine, but when I click it again, it does not hide. Here is my code.
<head>
<script src="JQ.js"></script>
<script>
$(document).ready(function() {
$(".thingy").hide();
$(".show_button").click(function() {
$(".thingy").toggle();
});
});
</script>
</head>
<body>
<div class="show_button_box">
<div class="menu">
<div class="show_button" style="color:black;font-weight:bold;text-decoration:underline;position:relative;top:-8px;left:15px;">Show</div>
</div>
</div>
</body>
/* My php is here*/
echo"
<div class='thingy' onclick='$(\"thingy\").hide();'>
<div id=\"container\">
<div class=\"menu\">
<div class=\"button\" onclick=\"loadpage('bots','Bot Creator');\"><b style='color:black'>Create Bot</b></div><br /><br />
<div class=\"button\" onclick=\"loadpage('close','Emergancy Close Client');\" style=\"background-color:red;color:black;font-weight:bold;border-radius:6px;\">Emergency Close.</div><br /><br />
<div class=\"button\" onclick=\"loadpage('news','Spark News.');\" style=\"background-color:lime;color:black;font-weight:bold;border-radius:6px;\" >Spark News.</div></div><br /><br />
<div id=\"addedcontent\">
<div id=\"b-header\"> header </div>
<div id=\"b-content\"> content </div> </div></div></div>";
}
in your php
you have missed a . in css selector
<div class='thingy' onclick='$(\".thingy\").hide();'>
I use pageslide.js and I have this html code
EDIT:
<body>
Click me!
<div id="modal">
<div id="search">
<img class="icon-search" src="imgs/search.png" onClick= "parse_search();" style="cursor:pointer;">
<input id="query" name="q" type="text" size="40" placeholder="Search..." />
</div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="js/jquery.pageslide.min.js"></script>
<script >
function parse_search(){
alert(document.getElementById("query").value)}
/* Slide to the left, and make it model (you'll have to call $.pageslide.close() to close) */
jQuery(".second").pageslide({ direction: "right", modal: true });
</script>
</body>
Then the alert window doesn't give me the value of the input field. It gives nothing for value like that ""
Where is the problem?
This is a good example why inline script makes troubles.
Try this:
jQuery(document).ready(function(){
jQuery('img.icon-search').click(function(){
var inputValue = jQuery(this).parent().find('input').val();
alert(inputValue);
});
and remove the inline script from your img element. Use just:
<img class="icon-search" src="imgs/search.png" style="cursor:pointer;">
Fiddle