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
Related
Is it possible autofocus on div by css ?
<div class="form-group" style="margin-left:10px">
<label for="organizationContainer" class="nmc-label">#Res.GroupStrings.CreateNewGroupOrganization</label>
<div id="organizationContainer" class="form-control nmc-select" style="width:100%!important;border:0px!important;box-shadow:none!important" autofocus></div>
</div>
You can do this easily with Jquery put the following tag in your head section
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"
</script>
Jquery
<script>
$('#YourDivID').focus();
</script>
Or On button click
<script>
$('#somebutton').click(function(){
$('#YourDivID').focus();
});
</script>
<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() {...});
i am currently working on making a div clickable, and when clicked it has to follow a link. This is my HTML:
<div class="product">
<form method="post" action="/shop/basket.asp" name="myform260020" id="productlistBuyForm750" onsubmit="return BuyProduct(this,'1','0','False');">
<div class="image">
</div>
<div class="prodinfo">
/* Lots of text here */
<div class="listprodbuy">
<input class="BuyButton_ProductList" style="border:solid 0px black" src="/images/skins/Nordic%20Spring/images/add_basket.png" type="IMAGE"><br>
<input name="AMOUNT" size="3" maxlength="6" class="TextInputField_Productlist TextInputField_ProductList BuyButton_ProductList" value="1" type="TEXT">
</div>
</div>
</form>
</div>
The idea is that when i click the div element with the class "product", it will follow the link wrapped in the div with the class "image". But when clicking the div with the class "listprodbuy", it will not follow that link.
This is my Jquery so far:
$(".product").click(function(){
window.location = $(this).find("a").attr("href");
return false;
});
$("div.listprodbuy").click(function(e){
e.stopPropagation();
});
When the main div is clicked, absolutely nothing happens, i assume that it is because the Jquery does not accurately pinpoint the link, as it is not a direct child element of the div. How would i go about specifying exactly which element it should follow?
While i would love to just wrap the entire div in an anchor, it's not possible because my CMS (DanDomain) wont let me access and edit the above HTML.
Jsfiddle
window.location Should be set to absolute path instead of relative path. Since you are finding the href of anchor tag as $(this).find("a").attr("href"), It will give you the relative path. Just change html from to to get the absolute path.
Use e.preventDefault(); along with e.stopPropagation(); to avoid the postback.
Complete Code:
$(".product").click(function(){
window.location = $(this).find("a").attr("href");
return false;
});
$("div.listprodbuy").click(function(e){
e.preventDefault();
e.stopPropagation();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product">
<form method="post" action="/shop/basket.asp" name="myform260020" id="productlistBuyForm750" onsubmit="return BuyProduct(this,'1','0','False');">
<div class="image">
</div>
<div class="prodinfo">
/* Lots of text here */
<div class="listprodbuy">
<input class="BuyButton_ProductList" style="border:solid 0px black" src="/images/skins/Nordic%20Spring/images/add_basket.png" type="IMAGE"><br>
<input name="AMOUNT" size="3" maxlength="6" class="TextInputField_Productlist TextInputField_ProductList BuyButton_ProductList" value="1" type="TEXT">
</div>
</div>
</form>
</div>
I'm trying to use toggle with jQuery and it's working but just once. If I click on the div again the toggle doesn't work, and I have to refresh de page. And if I try on JSFiddle it works fine, I can´t see my mistake.
$("#search_icon").click(function() {
$("#search").fadeToggle("slow", "linear");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="images/magnifying-glass32.png" height="30px" class="social_icons" id="search_icon" />
<div id="pesquisa">
<input type="text" placeholder="Pesquisar..." id="search" border="0" />
</div>
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