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
Related
Video:
https://youtu.be/aOtayR8LOuc
Essential when I click a button on my nav it will go there but since I have the same nav bar on each page it will try to go to pages/about even if im already there (ex. pages/about/pages/about)
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>FFA Website</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script src="app.js"></script>
<div class="topnav">
<a class="active" href="">Home</a>
News
Animals
About Me
Credits
</div>
</body>
</html>
CSS:
/* Add a black background color to the top navigation */
.topnav {
background-color: #333;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Add a color to the active/current link */
.topnav a.active {
background-color: #04AA6D;
color: white;
}
Replace your HTML code like below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>FFA Website</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script src="app.js"></script>
<div class="topnav">
<a class="active" href="">Home</a>
News
Animals
About Me
Credits
</div>
</body>
</html>
this is not working as you expected because you provided false paths since the pages files are in a different folder not the parent so here is what you need to do
for the index.html:
<body>
<script src="app.js"></script>
<div class="topnav">
<a class="active" href="/src/index.html">Home</a>
News
Animals
About Me
Credits
</div>
</body>
for any other page inside the pages folder for example News.html:
<body>
<script src="app.js"></script>
<div class="topnav">
<a class="active" href="../index.html">Home</a>
News
Animals
About Me
Credits
</div>
<h1>News</h1>
</body>
Well there seems no issues with your index.html file except missing the .html extension after each page name, and you just need to fix the redirection in the pages/News , pages/Animals , pages/About, pages/Credits html files, as when you click on any one of them you are no longer in the root of your project instead you are inside pages/ so the redirection changes.
so your other pages(About/Credits/Animals/News) should look like this.
make whatever page you wish to make active.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>FFA Website</title>
<link rel="stylesheet" href="../style.css">
</head>
<body>
<script src="../app.js"></script>
<div class="topnav">
<a class="active" href="">Home</a>
News
Animals
About Me
Credits
</div>
</body>
</html>
Can you try adding "../" before the path? So News ...
Maybe this works?
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');
};
});
}
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<script>
$(".block p").clone().after(".block");
$(".block p").remove();
</script>
</head>
<body>
<div class="block">
<p>text</p>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
</body>
</html>
That's just a simple example summarizing what I'm trying to do. I want to get a clone of an element place it after a block, and then delete the element that I copied.
I've no clue why after() func doesn't work. How can I achieve what I want to do?
after() expects content as argument to be inserted into the matching element(s)
You can simply move the existing one in one step without needing to clone it and then remove the original
const $block = $(".block");
$block.after($block.find('p'));
.block {
border: 1px solid green;
padding: 1em
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="block">
<p>text</p>
</div>
My class fixed-content appears to be stopping onmouseover from changing an images which uses src.this
The html
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Blah</title>
<link href="https://fonts.googleapis.com/css?family=Mada:900" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Karla:400,400i,700,700i" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Francois+One" rel="stylesheet">
<script src="https://use.fontawesome.com/07f9f0d505.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="fixed-content col-md-1 hidden-sm-down">
<div class="row">
<div class="col-md-12 firstSideMenuElement">
<img class="sideMenu" src="images/Desmond_blank-01.png" onmouseover="this.src='images/Desmond_mouseover-01.png'" onmouseout="this.src='images/Desmond_blank-01.png'">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
The css
.fixed-content{
top: 0;
/*bottom:0;*/
right: 0;
position:fixed;
overflow-y:scroll;
overflow-x:hidden;
}
When I remove this class from the html the onmouseover works correctly.
UPDATE:
This code is at https://sonjadorlas.github.io/Website/desmond.html
The sidebar menu, which contains four images should change slightly onmouseover. When I scroll down the page, this menu is fixed as I want. But when I mouseover the icons in the sidebar menu again, they do not change. If I scroll back to the top of the page, the behaviour is correct again on mouseover.
SOLUTION:
/* SIDE BAR */
.fixed-content{
top: 0;
right: 0;
z-index: 100;
position:fixed;
overflow-y:scroll;
overflow-x:hidden;
}
Thanks
I think your problem has to do with the z-index on your .fixed-content. You need to make sure that the z-index puts it's position above the other content.
Try adding something like this:
.fixed-content{
z-index: 10;
}
is there any way to create a text input just like search bar for Jquery Mobile. For example when we type text there should be a cross mark which allows users to clear the field.
Even if I to use search bar as input field there is a search icon showing up and it doesn't seem nice and appropritate for a textbox.
Can someone help me out. Thanks in advance
I think this is what you are looking for.The idea is to hide the icon in the search input.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<style>
.content .ui-icon-searchfield::after{
display:none !important;
}
.content .ui-input-search{
padding:0 10px !important;
}
</style>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Page Title</h1>
</div><!-- /header -->
<div data-role="content" class="content">
<input type="search" name="search" id="searc-basic" value="" />
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
A demo here - http://jsfiddle.net/8sg6M/
Add data-clear-btn="true" to your input TextBox