My issue is that when I click on the button, the div container wouldn't fade in. Can anyone help?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="stlye1.css">
<title>Document</title>
<script src="myscripts.js"></script>
</head>
<script>
$("#header1").click(function () {
$("#section_one").fadeIn('fast');
});
</script>
<body>
<button type="button" id="header1">div 1</button>
<div id="section_one" class="parallax1">
<div>
<h1>text</h1>
</div>
</div>
</body>
</html>
Your problem is that you don't tell the div to hide with the style="display: none".
There is you code back
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="stlye1.css" />
<title>Document</title>
<script src="myscripts.js"></script>
</head>
<body>
<button type="button" id="btn1">div 1</button>
<div id="div1" class="parallax1" style="display: none">
<div>
<h1>text</h1>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function () {
$("#btn1").click(function () {
$("#div1").fadeIn("fast");
});
});
</script>
Related
Hope you're all fine.
What I'm trying to do is when I over button, there'll be an image which will be displayed from this button.
Here is the code :
$('a[rel=popover]').popover({
html: true,
trigger: 'hover',
placement: 'bottom',
content: function(){return '<img src="'+$(this).data('img') + '" />';}
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Test</title>
</head>
<body>
<div class="container" >
<a class="btn" rel="popover" data-img="https://mdbootstrap.com/img/logo/mdb192x192.jpg"> ABC TEST </a>
</div>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
Cordially
This should work perfectly fine, you can adjust the positioning of the image by changing style property.
$('#myBtn').hover(function(){
$("#myImage").css("display", "block")
}, function(){
$("#myImage").css("display", "none")});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Test</title>
</head>
<body>
<div class="container" >
<div class="btn" id="myBtn" > ABC TEST </div>
<img style="display:none;" id="myImage" src="https://mdbootstrap.com/img/logo/mdb192x192.jpg"></img>
</div>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
Try the following:
$( document ).ready(function() {
$('.my-button').hover(
function() {
$('.my-img').show();
},
function() {
$('.my-img').hide();
}
)
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Test</title>
</head>
<body>
<div class="container" >
<a class="btn my-button" rel="popover" data-img="https://mdbootstrap.com/img/logo/mdb192x192.jpg"> ABC TEST </a>
</div>
<img class="my-img" style='display:none;' src="https://mdbootstrap.com/img/logo/mdb192x192.jpg" />
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
please help to resolve the following issue.
I am trying to display multiple tooltips on button click and hide them on second button click. For some reason I cannot do it in IE 11. In the example that i provide I can perfectly display them on page load by default. Once I try to do it on click (code commented out) nothing happens.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>Demo</h3>
Tooltip will be visible here
Tooltip will be visible here
<div>
<button type="button" class="btn btn-primary">Show Tooltip</button>
<button type="button" class="btn btn-default">Hide Tooltip</button>
</div>
</div>
<script>
//works fine I can see tooltips by default
$("[data-toggle='tooltip']").tooltip();
$("[data-toggle='tooltip']").tooltip('show');
$(document).ready(function () {
$(".btn-primary").click(function () {
// doesn't work for some reson
// $("[data-toggle='tooltip']").tooltip();
// $("[data-toggle='tooltip']").tooltip('show');
});
$(".btn-default").click(function(){
$("[data-toggle='tooltip']").tooltip();
$("[data-toggle='tooltip']").tooltip('hide');
});
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>Demo</h3>
Tooltip will be visible here
Tooltip will be visible here
<div>
<button type="button" class="btn btn-primary">Show Tooltip</button>
<button type="button" class="btn btn-default">Hide Tooltip</button>
</div>
</div>
<script>
//make sure to comment this lines
//works fine I can see tooltips by default
// $("[data-toggle='tooltip']").tooltip();
// $("[data-toggle='tooltip']").tooltip('show');
$(document).ready(function () {
$(".btn-primary").click(function () {
// works fine on IE11
$("[data-toggle='tooltip']").tooltip();
$("[data-toggle='tooltip']").tooltip('show');
});
$(".btn-default").click(function(){
$("[data-toggle='tooltip']").tooltip();
$("[data-toggle='tooltip']").tooltip('hide');
});
});
</script>
</body>
</html>
Question:
why I am not seeing the image appear when I click on the checkbox?
Problem:
I get no errors with Inspect Tools. Does anyone see something I am missing? Thank you.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style>
#your_img {
display: none;
}
</style>
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<script type="text/javascript">
$('#show_image').on("click", function() {
if ($('#your_img').is(':hidden')) {
$('#your_img').show();
} else {
$('#your_img').hide();
}
});
</script>
</head>
<input type="checkbox" id="show_image">Show Image</input>
<div id="your_img">
<img src="https://saltwx.com/images/chloro/chloro_bar.png" alt="A image" style="height:
485px;width:71px">
</div>
<body>
</body>
</html>
The problem is your click event is getting registered before the checkbox is rendered in dom. Your click event should get registered after the checkbox is rendered in dom.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style>
#your_img {
display: none;
}
</style>
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
</head>
<input type="checkbox" id="show_image">Show Image</input>
<div id="your_img">
<img src="https://saltwx.com/images/chloro/chloro_bar.png" alt="A image" style="height:
485px;width:71px">
</div>
<body>
<script type="text/javascript">
$('#show_image').on("click", function() {
if ($('#your_img').is(':hidden')) {
$('#your_img').show();
} else {
$('#your_img').hide();
}
});
</script>
</body>
</html>
I see a clear mistake with the body tag! You opened it after all the div and stuff.
Here's the fixed code:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style>
#your_img {
display: none;
}
</style>
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<script type="text/javascript">
$('#show_image').on("click", function() {
if ($('#your_img').is(':hidden')) {
$('#your_img').show();
} else {
$('#your_img').hide();
}
});
</script>
</head>
<body>
<input type="checkbox" id="show_image">Show Image</input>
<div id="your_img">
<img src="https://saltwx.com/images/chloro/chloro_bar.png" alt="A image" style="height:
485px;width:71px">
</div>
</body>
</html>
Please add your div elements and logic code in the body section. All the logic code is placed before the ending of the body section. The last script section containing your logic compiles after the dom is ready.
You can use the below code. Hope it helps!!!
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style>
#your_img {
display: none;
}
</style>
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
</head>
<body>
<input type="checkbox" id="show_image">Show Image</input>
<div id="your_img">
<img src="https://saltwx.com/images/chloro/chloro_bar.png" alt="A image" style="height:
485px;width:71px">
</div>
<script type="text/javascript">
$('#show_image').on("click", function() {
if ($('#your_img').is(':hidden')) {
$('#your_img').show();
} else {
$('#your_img').hide();
}
});
</script>
</body>
</html>
Is there an other way to link to an element on the same page without using anchor URLs?
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Alternative to anchor URL</title>
</head>
<body>
<input type="button" value="Go there »" />
<div style="height:1280px;"></div>
<div id="goHere" style="width:360px;height:240px;background-color:#61b2cc"></div>
</body>
</html>
There is! Look at the code below:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Alternative to anchor URL</title>
<script type="text/javascript">
function scrollWindow() {
{
var top = document.getElementById('goHere').offsetTop;
window.scrollTo(0, top);
}
}
scrollWindow();
</script>
</head>
<body>
<input type="button" onclick="scrollWindow()" value="Go there »" />
<div style="height:1280px;"></div>
<div id="goHere" style="width:360px;height:240px;background-color:#61b2cc"></div>
</body>
</html>
With jQuery:
$("button").click(function(){
window.scrollTo($("#goHere").offset().top);
});
I have code to fade in fade out on button click but i want that when the text loads it should fade in or fade how to do this instead of button click
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fading JavaScript Example</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="wrapper">
<div id="fade">Fading JavaScript Example</div>
<div id="buttons">
<div class="button" onclick="fadeEffect.init('fade', 1)">Fade In</div>
<div class="button floatright" onclick="fadeEffect.init('fade', 0)">Fade Out</div>
</div>
<p>For more information visit leigeber.com. </p>
</div>
</body>
</html>
You can use <body onload="">:
...
</head>
<body onload="fadeEffect.init('fade', 1)">
...
Read more here
Or same with jQuery $(document).ready();:
...
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#fademein').fadeIn( 1000 );
});
</script>
</head>
<body>
...
<span id="fademein" style="display: none">Will fade in smoothly</span>
Read more here