I am working on a website for a project of mine, and I am trying to incorporate some simple jQuery commands. They don't seem to be working. Please read through and let me know if I am missing something.
HTML Code:
<div class="button"> Home</div>
<div class="button"> About us</div>
<div class="button"> Contact us</div>
<div class="button-right" id="businesses"> <a href="forbusinesses.htm" class="a-top">For
businesses</a></div>
<div class="button-right"> For users</div>
<div class="fluid-margin">
<div class="orange-body">
<div class="fake-header">
<img src="http://i879.photobucket.com/albums/ab358/dylanhusted/bulletnlogotranssmall_zpsa04c3fed .png" id="logo"/>
</div>
</div>
</div>
<div id="landing-page">
<div id="call-to-action">
<img src="https://scontent-b-lga.xx.fbcdn.net/hphotos-prn1/v/1608452_3821343707689_2110853534_n.jpg?oh=ab5ebfd5dce574e97a43e9a7c0739583&oe=52D0F2AC" id="learn-button"/>
</div>
<img src="https://scontent-b-lga.xx.fbcdn.net/hphotos-prn1/v/1551908_3821359708089_1101636385_o.jpg?oh=aa19a9ac5f5b5e4f3cf704858482803d&oe=52D11726"id="line"/>
</div>
<div class="footer">
Home
About Us
Contact Us
</div>
</body>
</html>
CSS Code:
body {
background-color: #ffffff;
}
#landing-page {
width: 100%;
position:relative;
width:100%;
padding-bottom: 40%;
height:0;
overflow:hidden;
z-index: -1;
}
#line {
margin-left: 0;
margin-bottom: 0;
width: 100%;
}
.orange-body {
width: 70%;
z-index: -3;
border-radius: 5px;
margin: auto;
}
.fluid-margin {
position:relative;
width:100%;
padding-bottom:8%;
height:0;
overflow:hidden;
}
.fake-header {
width: 70%;
position: absolute;
border-radius: 5px;
margin-top: 1%;
margin-left: 15%;
z-index: -0;
}
#logo {
width: 28%;
height: 63%;
margin-top: .7%;
margin-left: 14%;
z-index: 1;
}
.button {
display: inline-block;
font-family: Trebuchet MS;
color: #8d8d8d;
font-size: 110%;
padding: 5px;
}
jQuery Code:
$(document).ready(function() {
$('a').mouseover(function() {
(this).css("color", "#dfdbd8");
});
});
Thanks!
Try:
$('a').mouseover(function() {
$(this).css("color", "#dfdbd8");
});
So I am an idiot!
In your css add:
a:hover{color:#dfdbd8}
I didn't read close enough, and you dont actually require JS to do it!
Related
I'd like to know how to close multiple popup boxes by clicking close buttons with Pure Javascript.
I tried the code below, but it didn't work.
JavaScript
const buttons = document.querySelectorAll('.button');
buttons.forEach((button) => {
button.addEventListener('click', () => {
this.parentElement.querySelector('.popup').style.display = 'none';
});
});
HTML
<div class="popup">
<span class="button">×</span>
<div class="content-wrapper">
<div class="content">
No.1
</div>
</div>
</div>
<div class="popup">
<span class="button">×</span>
<div class="content-wrapper">
<div class="content">
No.2
</div>
</div>
</div>
<div class="popup">
<span class="button">×</span>
<div class="content-wrapper">
<div class="content">
No.3
</div>
</div>
</div>
CSS
.popup {
border: 3px solid gray;
}
.button {
position: absolute;
left: -15px;
top: -15px;
display: block;
border: 1px solid #000;
width: 30px;
height: 30px;
background-color: #fff;
border-radius: 50%;
text-align: center;
line-height: 30px;
}
.content-wrapper {
max-height: 50vh;
overflow-y: auto;
padding: 20px;
}
.content {
overflow: hidden;
}
.popup {
width: 300px;
position: relative;
position: fixed;
right:30px;
}
.popup:nth-child(1) {
bottom:30px;
}
.popup:nth-child(2) {
bottom:130px;
}
.popup:nth-child(3) {
bottom:230px;
}
const buttons = Array.prototype.slice.call(document.querySelectorAll('.button'));
buttons.forEach((button) => {
button.addEventListener('click', () => {
button.parentElement.style.display ='none';
});
});
.popup {
border: 3px solid gray;
}
.button {
position: absolute;
left: -15px;
top: -15px;
display: block;
border: 1px solid #000;
width: 30px;
height: 30px;
background-color: #fff;
border-radius: 50%;
text-align: center;
line-height: 30px;
}
.content-wrapper {
max-height: 50vh;
overflow-y: auto;
padding: 20px;
}
.content {
overflow: hidden;
}
.popup {
width: 300px;
position: relative;
position: fixed;
right:30px;
}
.popup:nth-child(1) {
bottom:30px;
}
.popup:nth-child(2) {
bottom:130px;
}
.popup:nth-child(3) {
bottom:230px;
}
<div class="popup">
<span class="button">×</span>
<div class="content-wrapper">
<div class="content">
No.1
</div>
</div>
</div>
<div class="popup">
<span class="button">×</span>
<div class="content-wrapper">
<div class="content">
No.2
</div>
</div>
</div>
<div class="popup">
<span class="button">×</span>
<div class="content-wrapper">
<div class="content">
No.3
</div>
</div>
</div>
Try this
<!DOCTYPE html>
<html>
<head>
<style>
.popup {
border: 3px solid gray;
}
.closePopup{
display:none;
}
.button {
position: absolute;
left: -15px;
top: -15px;
display: block;
border: 1px solid #000;
width: 30px;
height: 30px;
background-color: #fff;
border-radius: 50%;
text-align: center;
line-height: 30px;
}
.content-wrapper {
max-height: 50vh;
overflow-y: auto;
padding: 20px;
}
.content {
overflow: hidden;
}
.popup {
width: 300px;
position: relative;
position: fixed;
right:30px;
}
.popup:nth-child(1) {
bottom:30px;
}
.popup:nth-child(2) {
bottom:130px;
}
.popup:nth-child(3) {
bottom:230px;
}
</style>
</head>
<body>
<div class="popup">
<span class="button">×</span>
<div class="content-wrapper">
<div class="content">
No.1
</div>
</div>
</div>
<div class="popup">
<span class="button">×</span>
<div class="content-wrapper">
<div class="content">
No.2
</div>
</div>
</div>
<div class="popup">
<span class="button">×</span>
<div class="content-wrapper">
<div class="content">
No.3
</div>
</div>
</div>
<script>
const buttons = document.querySelectorAll('.button');
const popups = document.querySelectorAll('.popup');
buttons.forEach(function(button,index){console.log('index:',index);
let newIndex =index; button.addEventListener('click', () => {
console.log('newIndex: ',popups[newIndex]);
popups[newIndex].classList.add("closePopup");
});
});
</script>
</body>
</html>
I have an issue with jquery toggle, it does not toggle the current div but instead the next div of the current one, when I try to change the class of the toggle div it doesn't work at all. Can anyone help me please ?
P.S: I'm toggling the SITES block, I wrapped it's content (background: yellow) in the class="clsDashRegion_sitesBloc", when I put this class in my JS it does not work.
Here is my code
(function zipContentBloc($) {
$('.clsDashRegion_levelOne').on('click', '.clsDashRegion_catgBloc', function() {
// Toggle the panel next to the item that was clicked
$(this).toggleClass('clsDashRegion_catgBloc--active').next().toggle();
});
})(jQuery);
/* Plus and Minus Signs */
.clsDashRegion_zipIndicator {
position: absolute;
top: 6%;
right: 0.5rem;
transform: translateY(-50%);
font-size: 1.8rem;
}
/* Plus */
.clsDashRegion_zipIndicator::after {
content: '\002B';
}
/* Minus */
.clsDashRegion_catgBloc--active .clsDashRegion_zipIndicator::after {
content: '\002D';
font-size: 3rem;
}
.clsDashRegion_levelOne {
width: 25rem;
/* height: 100%; */
background: #3c4647;
position: relative;
}
.clsDashRegion_catgBloc {
position: relative;
left: 2%;
width: calc(100% - 1rem);
height: 12.6rem;
}
.clsDashRegion_catgBlocBackground {
width: 100%;
height: 100%;
background-color: rgba(255,255,255,0.9);
opacity: 0.6;
}
.clsDashRegion_catgHeaderBloc {
height: 2.5rem;
background: aqua;
}
.clsDashRegion_catgLogoBloc {
width: 2.5rem;
height: 2.5rem;
float: left;
}
.clsDashRegion_catgTitleBloc {
float: left;
width: calc(100% - 5.5rem);
height: 2.5rem;
color: #000000;
font-weight: bold;
font-size: 1.4rem;
text-align: center;
line-height: 2.5rem;
}
.clsDashRegion_catgReduceBloc {
float: right;
width: 3rem;
height: 2.5rem;
text-align: center;
line-height: 2.5rem;
}
.clsDashRegion_catgTNTFMBloc {
/* position: absolute; */
/*float: none;*/
display: block;
float: right;
width: 10rem;
height: 2.5rem;
}
.clsDashRegion_catgTitleTNTFM {
float: left;
width: 5rem;
height: 2.5rem;
color: #000000;
text-align: center;
font-weight: bold;
}
.clsDashRegion_catgInfoBloc {
position: relative;
float: right;
display: block;
width: 100%;
height: 2.5rem;
}
.clsDashRegion_infoTitleBloc {
float: left;
width: 50%;
height: 2.5rem;
font-weight: bold;
margin-left: 1rem;
}
.clsDashRegion_infoValueBloc {
float: right;
width: 5rem;
height: 2.5rem;
text-align: center;
}
.clsDashRegion_wrapbuttonBlocTicket {
position: relative;
float: left;
display: block;
width: 100%;
height: 4rem;
}
.clsDashRegion_wrapbuttonBlocGE {
position: relative;
float: left;
display: block;
width: 100%;
height: 5rem;
}
.clsDashRegion_catgbuttonBloc {
position: relative;
float: left;
top: 1rem;
text-align: center;
}
.clsDashRegion_buttonValue {
width: 5rem;
height: 1.5rem;
margin-left: 2rem;
border: 1px solid;
line-height: 1.4rem;
background: chartreuse;
border-style: groove;
}
.clsDashRegion_buttonTitle {
margin-left: 1.5rem;
line-height: 1.4rem;
font-weight: bold;
}
.clsDashRegion_catgInfoBlocSite {
position: relative;
float: right;
display: block;
width: 100%;
top: 0.5rem;
text-align: center;
font-weight: bold;
}
.clsDashRegion_valueTech {
float: left;
width: calc(100% - 4rem);
margin-bottom: 0.5rem;
border-style: groove;
letter-spacing: 2px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="clsSubPageArea">
<div class="clsDashRegion_levelOne">
<div class="clsDashRegion_catgBloc">
<div class="clsDashRegion_catgBlocBackground">
<div class="clsDashRegion_catgHeaderBloc">
<div class="clsDashRegion_catgLogoBloc"><img src="../../Standard/Images/ICO/twcAlarmeOn.svg"></div>
<div class="clsDashRegion_catgTitleBloc">ALARMES</div>
<div class="clsDashRegion_catgReduceBloc">
<img src="../../Standard/Images/ICO/twcHaut.svg" style="width:1rem">
<img src="../../Standard/Images/ICO/twcBas.svg" style="width:1rem">
</div>
</div>
<div class="clsDashRegion_catgTNTFMBloc">
<div class="clsDashRegion_catgTitleTNTFM">TNT</div>
<div class="clsDashRegion_catgTitleTNTFM">FM</div>
</div>
<div class="clsDashRegion_catgInfoBloc">
<div class="clsDashRegion_infoTitleBloc">Critique</div>
<div class="clsDashRegion_infoValueBloc">V1</div>
<div class="clsDashRegion_infoValueBloc">V2</div>
</div>
</div>
</div>
<div class="clsDashRegion_catgBloc" style="height:8em;">
<div class="clsDashRegion_catgBlocBackground">
<div class="clsDashRegion_catgHeaderBloc">
<div class="clsDashRegion_catgLogoBloc"><img src="../../Standard/Images/ICO/twcPreventive.svg"></div>
<div class="clsDashRegion_catgTitleBloc">TICKETS</div>
<div class="clsDashRegion_catgReduceBloc">
<img src="../../Standard/Images/ICO/twcHaut.svg" style="width:1rem">
<img src="../../Standard/Images/ICO/twcBas.svg" style="width:1rem">
</div>
</div>
<div class="clsDashRegion_wrapbuttonBlocTicket">
<div class="clsDashRegion_catgbuttonBloc">
<div class="clsDashRegion_buttonValue">V1</div>
<div class="clsDashRegion_buttonTitle">En cours</div>
</div>
</div>
</div>
</div>
<div class="clsDashRegion_catgBloc" style="height:20rem;">
<div class="clsDashRegion_catgBlocBackground">
<div class="clsDashRegion_catgHeaderBloc">
<div class="clsDashRegion_catgLogoBloc"><img src="../../Standard/Images/ICO/twcSite.svg"></div>
<div class="clsDashRegion_catgTitleBloc">SITES</div>
<div class="clsDashRegion_zipIndicator"></div>
</div>
<div class="clsDashRegion_sitesBloc" style="background:yellow;height: 17.5rem;position: relative;">
<div class="clsDashRegion_catgTNTFMBloc">
<div class="clsDashRegion_catgTitleTNTFM">TNT</div>
<div class="clsDashRegion_catgTitleTNTFM">FM</div>
</div>
<div class="clsDashRegion_catgInfoBloc">
<div class="clsDashRegion_infoTitleBloc">-3dB</div>
<div class="clsDashRegion_infoValueBloc">V1</div>
<div class="clsDashRegion_infoValueBloc">V2</div>
</div>
<div class="clsDashRegion_catgInfoBloc">
<div class="clsDashRegion_infoTitleBloc">Rx</div>
<div class="clsDashRegion_infoValueBloc">V1</div>
<div class="clsDashRegion_infoValueBloc">V2</div>
</div>
<div class="clsDashRegion_catgInfoBloc">
<div class="clsDashRegion_infoTitleBloc">Perte HF</div>
<div class="clsDashRegion_infoValueBloc">V1</div>
<div class="clsDashRegion_infoValueBloc">V2</div>
</div>
<div class="clsDashRegion_catgInfoBloc">
<div class="clsDashRegion_infoTitleBloc">Décrochage HS</div>
<div class="clsDashRegion_infoValueBloc">V1</div>
<div class="clsDashRegion_infoValueBloc">V2</div>
</div>
<div class="clsDashRegion_wrapbuttonBlocGE">
<div class="clsDashRegion_catgInfoBlocSite">GE Actif</div>
<div class="clsDashRegion_catgbuttonBloc">
<div class="clsDashRegion_buttonValue">V1</div>
<div class="clsDashRegion_buttonTitle">En cours</div>
</div>
<div class="clsDashRegion_catgbuttonBloc">
<div class="clsDashRegion_buttonValue">V2</div>
<div class="clsDashRegion_buttonTitle">- 10 jrs</div>
</div>
</div>
</div>
</div>
</div>
<div class="clsDashRegion_catgBloc" style="height:18rem;">
<div class="clsDashRegion_catgBlocBackground">
<div class="clsDashRegion_catgHeaderBloc">
<div class="clsDashRegion_catgLogoBloc"><img src="../../Standard/Images/ICO/user-7.svg"></div>
<div class="clsDashRegion_catgTitleBloc">TECHNICIENS</div>
<div class="clsDashRegion_catgReduceBloc">
<img src="../../Standard/Images/ICO/twcHaut.svg" style="width:1rem">
<img src="../../Standard/Images/ICO/twcBas.svg" style="width:1rem">
</div>
</div>
<div class="clsDashRegion_catgbuttonBloc">
<div class="clsDashRegion_buttonValue clsDashRegion_valueTech">Astreinte</div>
<div class="clsDashRegion_buttonValue clsDashRegion_valueTech">Services</div>
</div>
</div>
</div>
</div>
</div>
Happens because you use extra selector with on('click', '.clsDashRegion_catgBloc',...
Try this:
$('.clsDashRegion_levelOne').on('click', '.clsDashRegion_catgBloc', function(event) {
// Toggle the panel next to the item that was clicked
$( event.target ).toggleClass('clsDashRegion_catgBloc--active').next().toggle();
});
$(this) = $('.clsDashRegion_levelOne'); - block which you add .on();
$( event.target ) =$('.clsDashRegion_catgBloc'); - block which was exactly clicked
Fiddle example: https://jsfiddle.net/z4tdxmbk/
Check this also
I'm trying to create a material design Stepper using Materializecss and I'm almost there, but I'm having some strange issue with the slideUp animation on each step.
When it's just about to end, there is an abrupt jump. I prepared a jsFiddle for you to see, but I'm also writing the code in here:
https://jsfiddle.net/c3xLwzru/
HTML:
<div class="row">
<div class="col l8 m10 s12 offset-l2 offset-m1">
<h3 class="light center-align purple-text text-darken-4">Subscription</h3>
<div class="card">
<div class="card-content">
<ul class="stepper">
<li class="step">
<div class="step-title waves-effect waves-dark"><div class="number">1</div>Step 1</div>
<div class="step-content">
Example 1
<div class="step-actions">
<button class="waves-effect waves-dark btn" type="submit">SEGUINTE</button>
</div>
</div>
</li>
<li class="step">
<div class="step-title waves-effect waves-dark"><div class="number">2</div>Step 2</div>
<div class="step-content">
Example 2
</div>
</li>
<li class="step">
<div class="step-title waves-effect waves-dark"><div class="number">3</div>Step 3</div>
<div class="step-content">
Example 3
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
CSS (adding to Materializecss):
ul.stepper {
max-width: 800px;
}
.step:not(:last-child) {
position: relative;
margin-bottom: 24px;
}
.step:not(:last-child).active {
margin-bottom: 36px;
}
.step-title {
margin: 0 -20px;
cursor: pointer;
margin-bottom: 8px;
padding: 12px 44px 24px 20px;
display: block;
}
.step-title:hover {
background-color: #F0F0F0;
}
.step.active .step-title {
font-weight: 500;
}
.step-title .number {
margin-right: 10px;
display: inline-block;
height: 28px;
width: 28px;
color: white;
background-color: rgba(0,0,0,0.3);
border-radius: 50%;
text-align: center;
line-height: 28px;
font-weight: 400;
}
.step.active .number {
background-color: #9C27B0;
}
.step-content {
display: none;
height: calc(100% - 132px);
width: inherit;
overflow: auto;
margin-left: 41px;
margin-right: 24px;
}
.stepper>.step:not(:last-child)::after {
content: '';
position: absolute;
top: 50px;
left: 13.5px;
width: 1px;
height: calc(100% - 24px);
background-color: rgba(0,0,0,0.1);
}
.stepper>.step.active:not(:last-child)::after {
height: calc(100% - 12px);
}
.step-actions {
display: none;
padding-top: 16px;
margin-right: 24px;
}
.step.active .step-actions {
display: block;
}
And JS, using jQuery:
$(document).on("click", '.stepper .step-title:not(.active)', function () {
$(this).parent().addClass('active');
$(this).next().stop().slideDown('slow');
$(".step.active").not($(this).parent()).find(".step-content").stop().slideUp('slow');
$(".step.active").not($(this).parent()).removeClass('active');
});
I don't know what to do anymore. I tried everything and I couldn't find a reason for them to jump, man.
Could you help me?
Remove margin-bottom: 8px on .step-title and add margin-top: 8px to .step-content.
It should stop abrupt jump
The inner Java script is override the CSS property on this HTML code initially I set the value of ID bad as none using CSS. However it is not working on the code example below. The Java script is not working properly if you look at the ID bad, initially it's value is none but it shown the data before clicking on the image.
How can I fix it?
function myFunction(){
document.getElementById("bad").style.display="block";
}
#good{
width: 100%;
height: 100%;
}
#bad{
position:absolute;
width: 15%;
height: 100%;
background-color: #023b3b;
top:0%;
display: none;
}
#vahid{
float: left;
width: 7%;
height: 100%;
background-color: #023b3b;
}
#isnani{
float: left;
width: 93%;
height: 100%;
background-color: bisque;
}
#one {
display:block;
background-color: #023b3b;
/* width:60px;
height: 867px;*/
}
#boom{
margin-top: 30%;
height: 5%;
width: 35%;
float: left;
padding-left: 20px;
}
.local img {
height: 2.5%;
width:30%;
margin :10px 0px 10px 20px;
}
/*isnani starts here*/
#third{ float:left;
width:100%;
height: 15%;
border-color:white;
border-style : solid;
background-color : white;
}
.fourth{
margin-left: 2%;
margin-top: 5%;
font-family: sans-serif;
}
.fifth{
color: #808080;
font-size: 80%;
font-weight: 800;
font-family: arial,sans-serif;
margin-left: 1%;
}
#sixth{
font-family: sans-serif;
font-size:150%;
color:#666666;
margin-top: 4%;
margin-left: 2%;
/*top: -2%;/
/* line-height: 3%; */
}
#seventh{
position: absolute;
top: 11%;
color: #808080;
font-family: sans-serif;
font-size: 80%;
margin-left: 1.8%;
margin-top: 1.5%;
/*line-height: 3%;*/
}
#fort{
float: right;
margin-top: -65px;
margin-right: 80px;
}
#button{
margin-left: 80%;
width: 20%;
hyphens: 20%;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="rise.css">
</head>
<body>
<div id="good">
<div id="vahid">
<div id="one">
<img src="image1.jpg" id="boom"><br><br><br><br><br>
<!--button-->
<img src="button.jpg" onclick="myFunction()" id="button"><br><br><br><br>
<!--icons-->
<span class="local">
<img src="img.jpg">
<img src="img1.jpg">
<img src="img2.jpg">
<img src="img3.jpg">
</span><br><br><br><br>
<span class="local">
<img src="img4.jpg">
<img src="img5.jpg">
<img src="img6.jpg">
<img src="img7.jpg">
</span>
</div>
</div>
<div id="isnani">
<div id="third">
<p >
<span class="fourth">Dashboard</span>
<span class="fifth"> + New</span>
</p>
<!--<p class="fourth"> </p>
<p id="fort"><input type="text" placeholder="search your project here..." ></p>
<div id="jump"><img src="search.jpg" height="20px" width="10px"></div>-->
<p id="sixth"> Welcome to Flatkit</p>
<p id="seventh"> Bootstrap 4 Web App Kit With Angular js</p>
</div>
</div>
</div>
<div id="bad">
</div>
</body>
</html>
function myFunction(){
document.getElementById("bad").style.display="block";
}
#good{
width: 100%;
height: 100%;
}
#bad{
position:absolute;
width: 15%;
height: 100%;
background-color: #023b3b;
top:0%;
display: none;
}
#vahid{
float: left;
width: 7%;
height: 100%;
background-color: #023b3b;
}
#isnani{
float: left;
width: 93%;
height: 100%;
background-color: bisque;
}
#one {
display:block;
background-color: #023b3b;
/* width:60px;
height: 867px;*/
}
#boom{
margin-top: 30%;
height: 5%;
width: 35%;
float: left;
padding-left: 20px;
}
.local img {
height: 2.5%;
width:30%;
margin :10px 0px 10px 20px;
}
/*isnani starts here*/
#third{ float:left;
width:100%;
height: 15%;
border-color:white;
border-style : solid;
background-color : white;
}
.fourth{
margin-left: 2%;
margin-top: 5%;
font-family: sans-serif;
}
.fifth{
color: #808080;
font-size: 80%;
font-weight: 800;
font-family: arial,sans-serif;
margin-left: 1%;
}
#sixth{
font-family: sans-serif;
font-size:150%;
color:#666666;
margin-top: 4%;
margin-left: 2%;
/*top: -2%;/
/* line-height: 3%; */
}
#seventh{
position: absolute;
top: 11%;
color: #808080;
font-family: sans-serif;
font-size: 80%;
margin-left: 1.8%;
margin-top: 1.5%;
/*line-height: 3%;*/
}
#fort{
float: right;
margin-top: -65px;
margin-right: 80px;
}
#button{
margin-left: 80%;
width: 20%;
hyphens: 20%;
}
.icon{
color :red;
background-color:yellow;}
<html>
<head>
<link rel="stylesheet" type="text/css" href="rise.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
</head>
<body>
<div id="good">
<div id="vahid">
<div id="one">
<img src="image1.jpg" id="boom"><br><br><br><br><br>
<!--button-->
<i class="icon fa fa-anchor" onclick="myFunction()" id="button"></i>
<!-- <img src="button.jpg" onclick="myFunction()" id="button">--><br><br><br><br>
<!--icons-->
<span class="local">
<img src="img.jpg">
<img src="img1.jpg">
<img src="img2.jpg">
<img src="img3.jpg">
</span><br><br><br><br>
<span class="local">
<img src="img4.jpg">
<img src="img5.jpg">
<img src="img6.jpg">
<img src="img7.jpg">
</span>
</div>
</div>
<div id="isnani">
<div id="third">
<p >
<span class="fourth">Dashboard</span>
<span class="fifth"> + New</span>
</p>
<!--<p class="fourth"> </p>
<p id="fort"><input type="text" placeholder="search your project here..." ></p>
<div id="jump"><img src="search.jpg" height="20px" width="10px"></div>-->
<p id="sixth"> Welcome to Flatkit</p>
<p id="seventh"> Bootstrap 4 Web App Kit With Angular js</p>
</div>
</div>
</div>
<div id="bad">
</div>
</body>
</html>
Your issue shows when you load the page:
VM748:162 Uncaught SyntaxError: Unexpected token {
And in the console when you try to click the button:
VM851:178 Uncaught ReferenceError: myFunction is not defined
The problem is that your function is missing parentheses. Change it to:
function myFunction() {
document.getElementById("bad").style.display = "block";
}
Example fiddle.
It seems to be a syntax error. Look at the way you have deifned the function.
function myFunction{
document.getElementById("bad").style.display="block";
}
it should be
function myFunction**()**{
document.getElementById("bad").style.display="block";
}
so I found this cool JQuery fader which does exactly what I wanted. The background fades, but when the transistion from image to image occurs all my other divs hide and then show basically.
I want to make it so only the background image will fade and the divs won't essentially flicker. I can produce a short video if need be.
HTML and JQuery:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
function fader() {
$("img").first().appendTo('#wrap').fadeOut(3000);
$("img").first().fadeIn(3000);
setTimeout(fader, 4200);
}
</script>
</head>
<body onLoad="fader();">
<div id="wrap">
<img src="images/Blue.png">
<img src="images/Green.png">
<img src="images/Orange.png">
<img src="images/Pink.png">
<img src="images/Purple.png">
<img src="images/Red.png">
<img src="images/Yellow.png">
<div id="wrapper">
<div id="header">
<div id="sv_title">Title</div>
<div id="sv_subtitle">Subtitle</div>
</div>
<div id="content_left">
<div id="text">
Lorem ipsum
</div>
</div>
<div id="content_right">
<div id="text">
Lorem ipsum
</div>
</div>
<div id="footer">
</div>
</div>
</div>
</body>
CSS:
html { overflow-x: hidden; overflow-y: hidden; }
img{
position:absolute;
top:0;
display:none;
width:1920px;
height:1080px;
border: none;
}
body{
margin: 0;
padding: 0;
}
#wrap {
margin: 0;
padding: 0;
}
/* End Setup */
/* Detail */
#wrapper {
height: 700px;
width: 900px;
opacity: 1.0;
bottom: 0;
left: 0;
margin: auto;
position: absolute;
top: 0;
right: 0;
}
#header {
height: 100px;
width: 900px;
background-color: #000000;
opacity: 0.7;
}
#content_left {
height: 500px;
width: 445px;
background-color: #000000;
opacity: 0.7;
display: inline;
float: right;
margin-top: 10px;
}
#content_right {
height: 500px;
width: 445px;
background-color: #000000;
opacity: 0.7;
display: inline;
float: left;
margin-top: 10px;
}
#footer {
height: 50px;
width: 900px;
background-color: #000000;
opacity: 0.7;
position: absolute;
bottom: 0;
margin-bottom: 30px;
}
this should do the job:
function fader() {
$("#background img:first").appendTo('#background').fadeOut(3000);
$("#background img:first").fadeIn(3000);
setTimeout(fader, 4200);
}
and the fix in the html
<div id="wrap">
<span id="background">
<img src="images/Blue.png">
<img src="images/Green.png">
<img src="images/Orange.png">
<img src="images/Pink.png">
<img src="images/Purple.png">
<img src="images/Red.png">
<img src="images/Yellow.png">
</span>
<div id="wrapper">
<!-- and the rest of the markup -->
it's not tested, I'm to lazy at the moment to create a fiddle and mock your images.