Fontawesome arrow will be moved when I hover the button [closed] - javascript

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
.b_btnWrapp .btn.btn_default:after {
content: "\f054";
font-family: 'Font Awesome 5 Free';
font-weight: 900;
position: absolute;
top: 15px;
right: 30px;
}
.b_btnWrapp .btn.btn_default:after:hover {
content: "\f054";
font-family: 'Font Awesome 5 Free';
font-weight: 900;
position: absolute;
top: 15px;
right: 18px;
}
<button class="b_btnWrapp btn btn_default">CLick</button>
I want the arrow to move the right side of the button using CSS AFTER concept.

You have to remove backspace in a style selector, because it's get interpreted as ".btn.btn_default is a child of .b_btnWrapp".
Just use this code and it will work
.b_btnWrapp {
position: relative;
width: 100px;
height: 30px;
}
.b_btnWrapp:after {
font-family: "Font Awesome 5 Free";
content: "\f061";
font-weight: 900;
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 15px;
transition: all .2s;
}
.b_btnWrapp:hover:after {
right: 5px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<script src="script.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
<button class="b_btnWrapp btn btn_default">CLick</button>
</body>
</html>
Also notice, that I simplified your code a bit (removed unnecessary complexity in selectors and removed duplicated code). Don't forget to use position:relative on a parent if you want to use track absolute position of a child in parent "coordinates". And have an attention on order. .element:hover:after is not same to .element:after:hover

Try to add this in your style
.b_btnWrapp.btn.btn_default:after {
content: "\f054";
font-family: 'Font Awesome 5 Free';
font-weight: 900;
position: absolute;
top: 15px;
right: 30px;
cursor:pointer;
}
.b_btnWrapp.btn.btn_default:after:hover {
top: 15px;
right: 18px;
}

I made the toggling of arrow using javascript. Hope it helps!
var icon=document.querySelector("#btn i");
function toggleArrow(){
var isLeftArrow=icon.classList.contains("fa-chevron-left");
if(isLeftArrow){
icon.classList.add("fa-chevron-right");
icon.classList.remove("fa-chevron-left");
}else{
icon.classList.add("fa-chevron-left");
icon.classList.remove("fa-chevron-right");
}
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/solid.css" integrity="sha384-r/k8YTFqmlOaqRkZuSiE9trsrDXkh07mRaoGBMoDcmA58OHILZPsk29i2BsFng1B" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/fontawesome.css" integrity="sha384-4aon80D8rXCGx9ayDt85LbyUHeMWd3UiBaWliBlJ53yzm9hqN21A+o1pqoyK04h+" crossorigin="anonymous">
<button id="btn" class="b_btnWrapp btn btn_default" onclick="toggleArrow()">
Click
<i class="fas fa-chevron-left"></i>
</button>

Related

Burger Button Display Not changing [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I want the burger to show up when my screen size is lesser than 1023px.
It is not happening only when using media query
.burger {
display: none;
position: absolute;
cursor: pointer;
right: 5%;
top: 15px;
font-size: 25px;
background: none;
border: none;
}
#media only screen and (max-width: 1053px) {
.burger {
display: block;
}
}
<button
type="button"
class="burger"
data-toggle="collapse"
data-target="#myNavbar"
>
☰
</button>
But the burger icon is not appearing although I've tried creating burger from span and I tags
This seems to work perfectly for me when testing on codepen. Can you check how your stylesheet is connected in your HTML document, as in this piece of code.
<link rel="stylesheet" href="stylesheet.css"></link>
In the <head> section of your html document. I have a feeling that it might not be connected.
EDIT
html
<button
type="button"
id="burger"
data-toggle="collapse"
data-target="#myNavbar"
>
☰
</button>
CSS
#burger {
display: none;
position: absolute;
cursor: pointer;
right: 5%;
top: 15px;
font-size: 25px;
background: none;
border: none;
}
#media screen and (max-width: 1053px) {
#burger {
display: block;
}
}

I tried to create an overlay with Javascript but the overlay don't show up

I was trying to create an overlay but when I click on the button the overlay don't show up.
In the console log the error 'overlay.js:4 Uncaught TypeError: Cannot read property 'addEventListener' of null' appears. I already tried by myself to solve this problem, I'm just a beginner.. I hope someone can solve the problem for me. Thanks for the effort!
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link
href="style.css" media="screen,projection" rel="stylesheet" type="text/css"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
</head>
<body>
<div id="nav" class="overlay">
<button id="afsluiten" href="#" class="close">Afsluiten</button>
<div class="overlay__content">
Home
Profile
Images
About
Product
</div>
</div>
<button id="open" href="#" class=open"">Open Overlay</button>
<script src="overlay.js"></script>
</body>
</html>
CSS
body{
font-family: sans-serif;
}
.overlay{
position: fixed;
top: 0;
left: 0;
width: 0%;
height: 100%;
background: limegreen;
overflow-x: hidden;
z-index: 5;
}
.overlay__content{
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a{
padding: 10px;
color: black;
font-size: 40px;
text-decoration: none;
display: block;
}
.overlay .close{
position: absolute;
top: 20px;
right: 50px;
font-size: 50px;
}
Javascript
var open = document.querySelector('.open');
var close = document.querySelector('.close');
open.addEventListener('click', function (ev) {
ev.preventDefault();
openOverlay();
}, false);
function openOverlay() {
document.querySelector('.nav').style.width = "100%";
}
Your line <button id="open" href="#" class=open"">Open Overlay</button> has a typo on the class name
<button id="open" href="#" class="open">Open Overlay</button>
The DOM hasn't been loaded yet. You need to put in the handler to the load event

CSS breaks on reload mobile

I'm not very skilled at CSS. I have website that has 4 stylesheets and 3 JS files-using Bootstrap 4 and jQuery. When I deployed it on live and refresh the page, all was working fine.
However, when I go to website from mobile, it works fine the first time but when I refresh, all the CSS and HTML is broken (this usually happens after 1st or 2nd refresh). After it is broken, I refresh it once or twice, it fixes the issue. I searched about it and some say it is happening because of using relative positioning and floating, but when I commented out those lines from my CSS files, I still have the same problem. Does anyone have any idea about how to fix this issue?
index html
**
<!DOCTYPE html>
<html lang="en">
<head>
<title>Landor App</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>
<style></style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" type="text/css"/>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous" type="text/css"/>
<link rel="stylesheet" href="Stylesheets/fonts.css" type="text/css"/>
<link rel="stylesheet" href="Stylesheets/intro.css" type="text/css"/>
<link rel="stylesheet" href="Stylesheets/home.css" type="text/css"/>
<link rel="stylesheet" href="Stylesheets/video.css" type="text/css"/>
<link rel="stylesheet" href="Stylesheets/modals.css" type="text/css"/>
</head>
<body>
<!--INTRO PAGE-->
<div id="intro-page" class="container-fluid" style="display: none">
<div class="row intro-header">
<div class="col-12"><img id="landor-worldmark"></div>
</div>
<div class="row intro-text">
<div class="intro-text col-12">
<h3>Hi Andrew,</h3><br>
<h3>We can't wait to welcome you to Landor London.
Until then please take a few minutes
<span style="white-space: nowrap;">(3, to be exact)to explore more about us...</span></h3><br>
<h3>Regards,</h3>
<h3>Peter</h3><br><br>
<span id="enter-button">Enter</span>
</div>
</div>
<div class="intro-footer row">
<div class="col-12"><img class="img-fluid intro-boat"></img></div>
</div>
</div>
intro.css
html {
height: 100%;
}
.intro-text{
font-family: "apercuBold";
}
#intro-page{
padding-left: 20px;
padding-right: 20px;
}
body {
background-color:black;
}
.container-fluid{
padding-right: 10px;
padding-left: 10px;
}
.intro-text{
position: relative;
top: 5%;
}
#enter-button{
font-family: "timeposRegular";
text-decoration: underline;
font-size: 150%;
cursor: pointer;
position: relative;
top: 20%;
}
.intro-header{
padding-top: 3%;
}
.intro-text{
padding-top: 50px;
padding-bottom: 50px;
}
#landor-worldmark{
content:url("../assets/Landor_Logo.png");
width: 120px;
height: 30px;
}
.intro-boat{
content:url("../assets/boat2.png");
max-width: 400px;
height: auto;
float:right;
}
#media screen and (max-width: 450px) {
.intro-text > h3{
font-size: 100%;
}
.intro-text{
font-size: 100%;
line-height: 1.4;
padding-top: 30px;
padding-bottom: 30px;
}
#enter-button{
font-size: 100%;
}
.intro-boat{
max-width: 200px;
height: auto;
float:right;
}
.intro-header{
padding-top: 5%;
}
}
#media screen and (max-width: 350px) {
.intro-text > h4{
font-size: 90%;
}
.intro-text{
font-size: 94%;
line-height: 1.1;
padding-top: 30px;
padding-bottom: 30px;
}
#enter-button{
font-size: 94%;
}
.intro-boat{
max-width: 200px;
height: auto;
}
.intro-header{
padding-top: 5%;
}
}
.intro-footer{
position: fixed;
bottom: 10%;
width: 100%;
}
**
I just pulled out my phone and went to the site, and used the Browser tools phone emulator option (i don't know if that's what it's called) and it looks just fine on reload. Maybe try restarting your phone or clearing cache.
Is it because you are tilting your phone and switching the view from horizontal and vertical (That still shouldn't change anything)
After a whole day, I finally solved this problem by adding "?" at the end of my stylesheets paths on the link tag. It's a caching issue, although I disabled caching, for some reason it did not work. Now I refreshed the page > 10 times and never experienced any problem! I think, because of the question mark, when it is loading the CSS, first it's checking to see if there is another version available which prevents it from fetching from the cache completely.

Not able to click over icon triangle in a select box

I've done a customized select with Jquery. I've put a triangle FontAwesome icon floating to the right. The problem is when I try to click in the icon the mouse pointer doesn't let me click. The space occupied by the icon is not able to be clicked. I wonder how could I fix this or if is possible with css.
This is my code
$(function() {
$('select').selectmenu();
});
.main-search-results:after {
content: "\f0dd";
font-family: 'FontAwesome';
padding-left: 4%;
border-left: 1px solid $text-color;
position: absolute;
top: 4px;
right: 15px;
z-index: 5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div class="main-search-results">
<select name="" id="select-filter-1">
<option value="default">Cualquier provincia</option>
<option value="a_coruña">A Coruña</option>
</select>
</div>
Here you go,
I have created fiddle for you so take a look what I did here..
http://jsfiddle.net/mkdizajn/jsxuvkn6/
.w{
position:relative;
}
.ui-selectmenu-button::after {
content: "\f0dd";
font-family: 'FontAwesome';
position: absolute;
top: 5px;
right: 15px;
width: 20px;
height: 20px;
}
.ui-icon{
display:none;
}
I attached the FA icon on to generated jqueryUI item..
removed (display: none) the initial dropdown
I now can click on that triangle,, test it to see if that works for you
hth, k

Dead Center for JavaScript Output

I'm going to apologize in advance for how basic this question is, but this is my first time using JavaScript in HTML.
Basically, I have a JavaScript that produces a different bit of random text every time a user loads the page. I'd like to format that text in Helvetica and then display it centred in the middle of the page. I'm attempting to do this with CSS as indicated below, but it is not working for me. Any suggestions much appreciated.
HTML
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>home</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="horizon">
<div id="content">
<script type="text/javascript" src="scripts.js"></script>
</div>
</div>
</body>
CSS
#horizon {
color: white;
background-color: #ffffff;
text-align: center;
position: absolute;
top: 50%;
left: 0px;
width: 100%;
height: 1px;
overflow: visible;
visibility: visible;
display: block
}
#content {
font-family: Helvetica, Geneva, Arial, sans-serif;
font-color: black;
background-color: white;
margin-left: -410px;
position: absolute;
top: -237px;
left: 50%;
width: 825px;
height: 475px;
visibility: visible
}
Well for starters, your missing your HTML tags.
You need to wrap your HTML code between HTML Tags.
Second, you will need to set your text to a different color as the background color. In your CSS, you will need to change the #horizon color to black, or something else.
Other than that, your code works.
try
#content
{
margin: auto;
width: 200px; /* however wide it should be (required) */
}
...
<div id="content">
stuff goes here from js / whatever
</div>
for vertical alignment you are looking at JS and not CSS.
How about using text-align: center?:
#content
{
font-family: Helvetica, Geneva, Arial, sans-serif;
font-color: black;
background-color: white;
text-align: center;
}

Categories