So my problem is that when i click on a radiobutton to add the class "completed", it does what is suposed to do, but when i want to remove it, i need to click two times, i don't know why. Any help would be appreciated. Thank you
html
<!DOCTYPE html>
<html>
<head>
<title>Todo App</title>
<link rel="stylesheet" type="text/css" href="TodoApp.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- ------ Meta Tags ------ -->
</head>
<body>
<div id="container">
<div id="topImage">
<h1 id="topImage-title">T O D O</h1>
<img onclick="test()" id="moon" src="images/icon-moon.svg">
<img src="images/bg-mobile-light.jpg" width="100%" height="100%">
</div>
<div class="newToDo">
<input onclick="addTask()" id="ready" type="radio" name="ready">
<input type="text" name="todoTask" id="todoTask" placeholder="Create a new todo...">
</div>
<div id="tasksBox">
<div class="newTasks">
<input onclick="completeTask()" type="radio" class="bttComplete" name="bttComplete">
<span>Complete Online Javascript Course</span>
<div onclick="deleteTask()" class="delete"></div>
</div>
</div>
</div>
<script src="jquery_library/jquery-3.5.1.min.js"></script>
<script src="TodoApp.js"></script>
</body>
</html>
css
.completed{
background-image: url(images/icon-check.svg);
background-position: center;
background-repeat: no-repeat;
}
javascript
function completeTask(){
$(".newTasks").click(function(){
if ($(this).children().hasClass('completed')){
$(this).children().removeClass('completed');
} else {
$(this).children().addClass('completed');
};
});
}
Related
Kindly guide me how to make this heading hover in Bootstrap because I tried css but it isn't working. Thank you in advance.
NOTE. Not included bootstrap links as I am using the downloaded
compiled files.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap-Begining</title>
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet'>
</head>
<body>
<!--TOP BAR THAT GONNA HOLD TITLE AND MENU-->
<div id="top-bar"class="container-fluid"
style="background-color: black;">
<div class="row">
<div id="title"class="col-6 p-5"style=" border: 1px solid white;">
<p id="logo"style="color:white ;font-family: Lato;margin-left: 30%;">
<span style="font-size:45px;">ENERGY FLASH.</span><br> /MUSIC BLOG</p>
</div>
<div id="menu"></div>
</div>
</div>
</body>
</html>
hovering on #logo>spanwhich means direct child inside #logo of type span and changing the color of its text
#logo>span:hover{
color:purple;
cursor:pointer
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap-Begining</title>
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet'>
</head>
<body>
<!--TOP BAR THAT GONNA HOLD TITLE AND MENU-->
<div id="top-bar"class="container-fluid"
style="background-color: black;">
<div class="row">
<div id="title"class="col-6 p-5"style=" border: 1px solid white;">
<p id="logo"style="color:white ;font-family: Lato;margin-left: 30%;">
<span style="font-size:45px;">ENERGY FLASH.</span><br> /MUSIC BLOG</p>
</div>
<div id="menu"></div>
</div>
</div>
</body>
</html>
So if you want to change the color of the text in the two span elements when hovering over them, you will need to use CSS as this cannot be achieved with just Bootstrap. To do this you need to select the div with the id="title" and its children. Your CSS might looks like this:
#title:hover span {
color: "yellow";
}
or
span:hover {
color: "yellow";
}
Also I recommend rearranging the elements in your #title - they probably shouldn't all be wrapped in a p tag. Also look into Flexbox to learn more.
You can look for information about the hover effects in the documentation
https://mdbootstrap.com/docs/standard/content-styles/hover-effects/#docsTabsOverview
Hello everyone i am making drag and drop web application. I am not able to run console.log("Dragging element"); inside addEventListener. Can anyone help me with this.
Below are 2 files that i have made yet
index.js
const dropZone=document.querySelector(".drop-zone");
dropZone.addEventListener("dragover",(e)=>{
console.log("Dragging element");
})
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>inShare - Easy file sharing</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="upload-container">
<div class="drop-zone">
<div class="icon-container">
<img src="./file.svg" alt="File icon" draggable="false" class="center">
<img src="./file.svg" alt="File icon" draggable="false" class="left">
<img src="./file.svg" alt="File icon" draggable="false" class="right">
</div>
<div class="title">Drop your files or,<span class="browseBtn">browse</span></div>
</div>
</section>
<script src="index.js"></script>
</body>
</html>
End trainer I want to build my first blog, I faced a problem I can't control in my header of page can anyone help?
This is my page
<!DOCTYPE html>
<html>
<head>
<html dir="rtl" lang="ar"> <!--<![endif]-->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="myblogspot.css">
<title> مدونة الراقي التقني </title>
</head>
<body>
<header>
<div id="top_header">
<div id="logo">
<img src="D:\only me\work\myblog\logo.png" height="150" width="150"></div>
<div id="main_menu">
<ul>
<li>الربح من الانترنت</li>
<li>تكنلوجيا</li>
<li>تسويق إلكتروني</li>
<li>تصميم</li>
<li>خدمات</li>
</ul>
</div>
</div>
</header>
</body>
</html>
<header>
<div id="top_header">
<div id="main_menu">
<ul >
<li class="logo"><img src="D:\only me\work\myblog\logo.png" height="150" width="150"></li>
<li>الربح من الانترنت</li>
<li>تكنلوجيا</li>
<li>تسويق إلكتروني</li>
<li>تصميم</li>
<li>خدمات</li>
</ul>
</div>
</div>
</header>
css
ul {
width: 100%;
padding: 0;
}
ul>li {
list-style-type: none;
display: inline-block;
vertical-align:middle;
}
I have no idea of your css file.
Here is my working code.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>مدونة الراقي التقني</title>
</head>
<body>
<header>
<div id="top_header">
<div id="logo" style="display: inline">
<img src="D:\only me\work\myblog\logo.png" height="150" width="150" />
</div>
<div id="main_menu" style="display: inline">
<ul style="display: inline-block">
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
</ul>
</div>
</div>
</header>
</body>
</html>
It's not entirely clear what you meant, but I understood your request the way I reflected it in my decision. Also, you did not show your css.
In order to place the menu items on the same line with the logo, just add the flex rule to the #top_neader selector:
#top_header {
display: flex;
}
Also, you have an inconsistent html structure at the beginning. You are specifying the <html> tag twice:
...
<html>
<head>
<html dir="rtl" lang="ar"> <!--<![endif]-->
...
You can also change the order and location of flex objects using many flex rules.
Was it necessary?
#top_header {
display: flex;
}
<html dir="rtl" lang="ar"> <!--<![endif]-->
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="myblogspot.css">
<title> مدونة الراقي التقني </title>
</head>
<body>
<header>
<div id="top_header">
<div id="logo">
<img src="D:\only me\work\myblog\logo.png" height="150" width="150"></div>
<div id="main_menu">
<ul>
<li>الربح من الانترنت</li>
<li>تكنلوجيا</li>
<li>تسويق إلكتروني</li>
<li>تصميم</li>
<li>خدمات</li>
</ul>
</div>
</div>
</header>
</body>
</html>
I want my last div to have an image for a background and fill up the remaining space on the page. I'm not seeing the image, so I'm not 100% sure it's even filling up the page. Does anyone see my error?
css
#uploader {
min-height: 100%;
height: auto;
height: 100%;
background-image: url('hiki.jpg');
}
html
<label for="icon"><b>Upload Your Own!</b></label>
<input type="file" accept="image/*" id="uploadSelector" name="icon">
<button type="submit" onclick="uploadPhoto()">Submit File</button>
</div>
full html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tracks App</title>
<!-- jquery js -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<!-- Custom js -->
<script type="text/javascript" src="./index.js"></script>
<!-- jquery mobile js -->
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<!-- Sytlesheets -->
<link rel="stylesheet" type="text/css" href="./index.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
</head>
<body>
<div data-role="page" id="body-1">
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<div data-role="header" id="mapNinfo">
<div id="googleMap">
<script
src="https://maps.googleapis.com/maps/api/js?key=Redactedcallback=myMap">
</script>
</div>
<div id="showInfo">
<img id="customerIMG">
<p id="customerINFO"></p>
</div>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<!--<ul id="list-1"></ul> -->
</div>
<div data-role="main" id="tableNstuff">
<div id="newCustomer">
Add Location
<div id="popUp" style="background-color: #ffff99; display: none">
<label for="cName">Enter Customer Name :</label><input type="text" id="cName" name="cName"><br>
<label for="cAddress">Enter Address :</label><input type="text" id="cAddress" name="cAddress"><br>
<label for="cCSZ">Enter City, State Zip :</label><input type="text" id="cCSZ" name="cCSZ"><br>
<label for="cAddress">Enter Lat:Lang :</label><input type="text" id="cLatLang" name="cLatLang"><br>
<button class="ui-shadow ui-btn ui-corner-all" onclick="submitCustomer()">Submit</button>
</div>
</div>
Add Current Location
<div id="uploader">
<label for="icon"><b>Upload Your Own!</b></label>
<input type="file" accept="image/*" id="uploadSelector" name="icon">
<button type="submit" onclick="uploadPhoto()">Submit File</button>
</div>
</div>
</div>
</body>
</html>
Thank you very much.
try putting the full path. Not 100% sure it'll work but it's a start.
#uploader{min-height: 100% ;height: auto; width: 100%(add this too); height: 100%; background-image: url('C:\example\hiki.jpg OR https://example.com/hiki.jpg')}
This probably won't completely fix it but it's a start. If it doesn't work you can implement some more JavaScript that will save the dimensions of the image as a variable and then plug it into the CSS.
There are 2 simple solution:
Use calc from CSS3 by adding height: calc(100vh - 100px);. 100px here is the height of the top content above the div.
Best solution is using flexbox. See simple demo https://jsfiddle.net/hhuy424/7a3qm49e/11/
html
<body>
<div>header</div>
<div class="content"></div>
</body>
css
html, body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
.content {
flex-grow: 1;
background-color: #880000;
}
I have a silly problem I think, but I've tried several answers found on the net and nothing works so far.
I'd just like to have an id=modal
Here's the code:
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Le Cabinet</title>
<link rel="shortcut icon" href="img/logo-min.png">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-
awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css">
<link rel="stylesheet" href="css/style-sheet.css">
<link rel="stylesheet" href="css/mystyles.scss">
</head>
<body>
<main>
<div class="container">
<section class="columns">
<div>
<button onclick="toggleClass()" class="button is-rounded is-info is-hidden-tablet section__btn__info">Plus d’infomartions...</button>
<div id="modal" class="modal">
<div class="modal-background"></div>
<div class="modal-card">
<section class="modal-card-body">
<p class="modal-card-title modal__title"></p>
</section>
</div>
</div>
</div>
</section>
</div>
</main>
</body>
<script type="text/javascript" src="js/burger.js"></script>
</html>
script:
const modal = document.getElementById('modal');
console.log('modal', modal);
function toggleClass() {
modal.classList.toggle('is-active');
}
And modal return null,I can't get the id.
I don't see where you inject/insert your script.
You have to inject/insert your script at the bottom of your body, because when you call document.getElementById if the script is at the top, the html is not load so we can't find your id like :
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<!-- My super html -->
<script src="path/to" type="text/javascript"></script>
</body>
</html>