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>
Related
I want to show only one div when the user clicks the links on the icon bar and hide others. When the user clicks home link of the icon bar only 'hoediv'is visible and others hidden.
My work is below please help!!
<!doctype HTML>
<head>
<div class="main-header-div">
<a id="home" href="" > Home</a>
<a id="about" href=""> About us</a>
</div>
</head>
<body>
<script>
$(function(){
$("#home").click(function(){
$("#homediv").show();
$("#aboutus").hide();
return false;
});
});
</script>
<div id="homediv" style="color:white; background-color:red;height:89px;
width:100%;font-size:150%; display:none;">This is my site.
</div>
<div id="aboutus" style="display:none;">
this is about us page
</div>
</body>
</html>
What you need to fix?
Firstly, <head></head> only includes metadata, the rest should be in the <body></body>.
If you're not going to make use <a> anchor tags for hyperlinking, then pass the value href="JavaScript:Void(0);" (The void operator evaluates the given expression and then returns undefined) or better yet, don't use anchor tags better yet span or button.
You didn't import jquery.js in your html file.
You can make this a lot more effecient, but I'd suggest you learn some basic html from the widely available sources and then CSS, Jquery,etc.
Sources to refer:
https://www.w3schools.com/html/html5_intro.asp
https://www.w3schools.com/css/default.asp
https://www.w3schools.com/jquery/default.asp
$(function() {
$("#home").click(function() {
$("#homediv").show();
$("#aboutus").hide();
});
$("#about").click(function() {
$("#homediv").hide();
$("#aboutus").show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-header-div">
<a id="home" href="JavaScript:Void(0);"> Home</a>
<a id="about" href="JavaScript:Void(0);"> About us</a>
</div>
<div id="homediv" style="color:white; background-color:red;height:89px;
width:100%;font-size:150%; display:none;">This is my site.
</div>
<div id="aboutus" style="display:none;">
this is about us page
</div>
If you want to simplify it, you can use classes and data attributes to toggle wanted content:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-header-div">
<a class="header-link" id="home" data-toggle="homediv" href="#" > Home</a>
<a class="header-link" id="about" data-toggle="aboutus" href="#"> About us</a>
</div>
<div class="content" id="homediv" style="color:white; background-color:red;height:89px;
width:100%;font-size:150%; display:none;">
This is my site.
</div>
<div class="content" id="aboutus" style="display:none;">
this is about us page
</div>
<script>
$(document).ready(function() {
$(".header-link").click(function(){
$(".content").hide();
$("#" + $(this).attr("data-toggle")).show();
});
});
</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() {...});
here is my code:
$(document).ready(function(){
$('#next').click(function() {
$('.current').removeClass('current').hide()
.next().show().addClass('current');
if ($('.current').hasClass('last')) {
$('#next').attr('disabled', true);
}
$('#prev').attr('disabled', null);
});
$('#prev').click(function() {
$('.current').removeClass('current').hide()
.prev().show().addClass('current');
if ($('.current').hasClass('first')) {
$('#prev').attr('disabled', true);
}
$('#next').attr('disabled', null);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!doctype html>
<html lang="en">
<head>
<title>javascript problem</title>
</head>
<body>
<div id='div1' class="first current">
<p>
here the content of div 1
</p>
</div>
<div id='div2'>
<p>
here the content of div 2
</p>
</div>
//then another 9 divs
<div id='div12' class="last">
<input type="submit" value="submit" onclick="submit()">
</div>
<div class="buttons">
<button id="prev" disabled="disabled">Prev</button>
<button id="next">Next</button>
</div>
</body>
</html>
what i want to do is have the buttons (in the div 'buttons') in every div and not below. because i want them not to show up at the end, and i want to change the value of it on the first page.
but when i do this, they dont work anymore.
the codesnippet does not work
but what it does is, when you click 'next' the next div will be shown.
here is how i want it:
<div id='div1' class='first current'>
<p>here the content of div 1</p>
<button id="next">Start</button>
</div>
hope its clear
The id attribute in HTML should always be unique. Instead of using the same id on all your next/prev buttons, you should use a class instead. You can then bind the click event using the class instead and it will apply to all the elements with that class.
<button class="next">Start</button>
$('.next').click(function() { ... });
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
$(window).load(function () {
var divs = $( #add_new, #details");
$("li a").click(function () {
$(divs).hide();
$("#" + $(this).attr("class")).show();
});
});
<ul>
<li><a class="add_new" href="javascript:void(0);" >Add new</a></li>
<li><a class="details" href="javascript:void(0);" >details</a></li></ul>
<div id="add_new">
<p>ADD NEW</P>
<input type="button" id="addsettings" value="Add Informations">
</DIV>
<div id="details">
<p>detailssss</p>
</div>
<script>
$(function () {
$("#addsettings").click(function () {
$.ajax({
url: "manage.php",
success: function (html) { // this happens after we get results
$(".result").empty();
$(".result").show();
$(".result").append(html);
}
});
});
});
</script>
manage.php
<div id="div1">
pppppp
lll
kkk
</div>
<div id='div2'>
tttttt
gg
mm
</div>
<script>
$("#add_new").hide();
</script>
I need the page to get refreshed and then show the particular div tag. Now it is showing the div without page reload. For example, if i click the button inside add_new, it will take me to another page via ajax. In that another page, i have many divs (div1, div2) shown and I hide the add_new div here. Then if I click the 'details' link, and then go back to add_new again, it is still showing that divs which are in ajax page (div1, div2) not `add_new.
Please help me. I need the add_new div here.
Thanks
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script>
$(window).load(function () {
var divs = $('#add_new,#details');
$("li a").click(function () {
divs.css('display','none');
$("#" + $(this).attr("class")).css('display','block');
});
});
</script>
<ul>
<li><a class="add_new" href="javascript:void(0);" >Add new</a></li>
<li><a class="details" href="javascript:void(0);" >details</a></li></ul>
<div id="add_new" style="display: none">
<p>ADD NEW</P>
<input type="button" id="addsettings" value="Add Informations">
</DIV>
<div id="details" style="display: none">
<p>detailssss</p>
</div>
I'm trying to convert this lightbox code to being able to open on load, not on click of the link (which I would want to remove).
I can't seem to get it working. Any ideas?
<a href="javascript:void(0)" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">
Show PopUp</a>
<div class="white_content" id="light">
<a class="textright" href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">
Close</a>
<div id="lbcontent">
<p>THIS IS MY LIGHTBOX CONTENT</p>
</div>
</div>
<div class="black_overlay" id="fade"></div>
<script>
document.addEventListener('load', function() {
document.getElementById('light').style.display='block';
document.getElementById('fade').style.display='block'
}, false);
</script>
create a js function loadLightBox and call it onload of body tag
<script language="javascript">
function loadLightBox()
{
document.getElementById('light').style.display='block';
document.getElementById('fade').style.display='block';
}
</script>
<body onload = "loadLightBox()">
...