The position:relative bottom: 0 is not working for me. I need to position the button at the bottom of my well and in the center. I also have to place the facebook share link in the left side of it, but untill I don't place this right, I cannot plan for the facebook link now.
Below is my code:
$(document).ready(function() {
var content="";
$("#click").click(function() {
$.getJSON("//quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&_jsonp=?", function(key) {
content=key[0].content + "<p>— " + key[0].title + "</p>";
$("#quote-form").html(content);
console.log(content);
});
$("#quote-form").css({"font-family":"lucida console", "font-size": "20px","color":"rgb(255,255,150)"});
});
});
.position-message{
margin-left: 25%;
margin-right:25%;
margin-top:10%;
}
.background{
background-color: rgba(245,245,245,0.2);
border-radius:10%;
padding-bottom: 10%;
}
#button-shape{
position:relative;
bottom: 0;
padding-left:48%;
padding-right: 48%;
}
.quote-shape{
border-radius: 10%;
width: absolute;
height: absolute;
}
#page{
margin-left: 5%;
margin-right: 5%;
margin-top:2%;
margin-bottom:2%;
}
#page-background{
background-image: url(http://www.wallpapers4u.org/wp-content/uploads/grid_background_line_texture_surface_50781_1920x1080.jpg);
}
#share {
height:30px;
width: 80px;
position:
}
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<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 rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&lang=en" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<Title>Click to get quotes</Title>
</head>
<body id="page-background">
<div class="well background" id="page">
<div class="container-fluid">
<div id="quote" class="position-message">
<span><p id="quote-form"></p></span>
</div>
<div class="row" id="button-shape">
<div id="share" class="col">
<!--<a class="click" href="http://www.facebook.com/dialog/feed?app_id={{fbapp_id}}&link={{link_url}}&message={{share_message|urlencode}}&display=popup&redirect_uri={{link_url}}" target="_blank">
<i class="fa fa-facebook-official"></i> Share
</a> -->
</div>
<div class="col">
<button type="button" id="click button-shape" class="btn btn-outline-secondary btn-circle"><i class="fa fa-refresh fa-2x"></i>
</button>
</div>
</div>
</div>
</div>
</body>
</html>
Unless you have previously set bottom to another value, using position: relative along with bottom: 0 is not going to have any visual effect.
There are multiple ways to solve your problem, one of which is using position: absolute along withtransform as shown below:
#button-prop {
position: absolute;
bottom: 0;
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
}
Also, in order for the above code to work, you need to set the position of the parent to relative.
#page {
position: relative;
}
With your current HTML structure, however, using traditional ways will fail, because you have nested the button very deep inside the container which has a padding set. You need to make some serious changes to your HTML structure in order to achieve an optimal result. Most importantly put the button as an immediate child to the well, #page.
Check out a JSFiddle here or the following snippet.
Snippet:
/* ----- CSS ----- */
div.background {
background-color: rgba(245, 245, 245, 0.1);
border-radius: 10%;
padding-bottom: 5%;
}
.quote-shape {
border-radius: 10%;
}
#page {
margin-left: 5%;
margin-right: 5%;
margin-top: 2%;
margin-bottom: 2%;
width: 1200px;
height: 450px;
max-height: 450px;
}
#page-background {
background-image: url(http://www.wallpapers4u.org/wp-content/uploads/grid_background_line_texture_surface_50781_1920x1080.jpg);
}
/*************** MY CODE ***************/
#page {
position: relative;
/* I change the dimensions to fit in the snippet. */
width: 80%;
height: 150px;
margin: 5% auto;
}
#button-prop {
position: absolute;
bottom: 0;
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
}
<!----- HTML ----->
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body id="page-background">
<div class="well background" id="page">
<div class="fixed-width">
<div id="quote" class="position-message">
<span><p id="quote-form"></p></span>
</div>
</div>
<button type="button" id="button-prop" class="btn btn-outline-secondary btn-circle">
<i class="fa fa-refresh fa-2x"></i>
</button>
</div>
</body>
</html>
Notes:
Don't use space-separated ids such as click button-shape, as you're only making your life more difficult rendering the selector #click button-shape invalid, having to use [id = "click button-shape"] instead.
I have kept only the relevant parts of your code.
Related
I am currently trying to make a board game in the style of memory (I am self taught, and things like that help me great in understanding javascript). My question is probably basic stuff, but I am new to all of this so I appreciate any help.
My problem is that I have two cards with the same class, and with my code, when I click on first or second one, it only works on the first card.
document.querySelectorAll(".first-card").forEach(container => {
container.addEventListener('click', flipCard)
})
function flipCard() {
document.querySelector(".first-card").classList.toggle("flip")
}
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
padding: 100px;
display: flex;
}
.first-card,
.second-card {
width: 100px;
height: 150px;
border: 3px solid black;
border-radius: 10px;
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
margin: 10px;
}
.flip {
transform: rotateY(180deg);
}
.front,
.back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.front {
z-index: 2;
transform: rotateY(0deg);
}
.back {
transform: rotateY(180deg);
}
.first-card .front {
background: lightblue;
width: 100%;
height: 100%;
}
.second-card .front {
background: red;
width: 100%;
height: 100%;
}
.first-card .back,
.second-card .back {
background: black;
width: 100%;
height: 100%;
}
<!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" />
<link rel="stylesheet" type="text/CSS" href="memory.css" />
</head>
<body>
<div class="first-card">
<div class="front">
front
</div>
<div class="back">
back
</div>
</div>
<div class="second-card">
<div class="front">
front
</div>
<div class="back">
back
</div>
</div>
<div class="first-card">
<div class="front">
front
</div>
<div class="back">
back
</div>
</div>
<div class="second-card">
<div class="front">
front
</div>
<div class="back">
back
</div>
</div>
<script src="memory.js"></script>
</body>
</html>
Like I said, I am only beginner, so any help or explanation is welcome.
Thank you
It "doesn't work" because in your flipCard function you're getting the first element that matches with the className fist-card. This element will be always the same one. Just change your function to this:
function flipCard(v){
v.currentTarget.classList.toggle("flip")
}
use below
function flipCard(event){
event.target.classList.toggle("flip")
}
evt.currentTarget, which would refer to the parent in this context. So it would not be handy for you I believe.
see mdn for it
I am trying to create this page where I have different div and buttons that are scattered on the page and connecting them using jquery connections by musclesoft
I have tried this code but it seems that the connection isn't happening at all, I can't figure out what the issue is?
button {
min-width: 120px;
height: 120px;
background: #f56c29;
border-radius: 60px;
}
connection {
border: 30px solid #b51c29;
border-radius: 50px;
}
button.about {
position: absolute;
transition: .5s ease;
top: 50%;
left: 50%;
}
<!DOCTYPE html>
<html lang="en" >
<!-- Include jQuery and the Connections plugin -->
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="jquery.connections.js"></script>
<!-- Connect your elements like in this example -->
<script>
jQuery(document).ready(function() {
$('div').connections();
});
</script>
<head>
<meta charset="UTF-8">
<title>CodePen - A Pen by rasbsal</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div>
<button>
Text
</button>
</div>
<div>
<button class="about">
About
</button>
</div>
</body>
</html>
The connections are not visible because there's actually no space between the div elements (go to Inspect Element in Dev Tools and see for yourself highlighting the two DIV elements).
Use button as your connecting selector
jQuery(($) => {
$('button').connections();
});
button {
min-width: 120px;
height: 120px;
background: #f56c29;
border-radius: 60px;
}
connection {
border: 30px solid #b51c29;
border-radius: 50px;
}
button.about {
position: absolute;
transition: .5s ease;
top: 50%;
left: 50%;
}
<div>
<button>Text</button>
</div>
<div>
<button class="about">About</button>
</div>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/musclesoft/jquery-connections#1.0.1/jquery.connections.js"></script>
I'm looking at the card-reveal component of the materializecss framework shown here: https://codepen.io/JP_juniordeveloperaki/pen/YXRyvZ the official doc is here: http://next.materializecss.com/cards.html
For my application, I have moved the <div class="card-content"> to the top to look like this: https://codepen.io/anon/pen/YaqYOj
So I was wondering whether or not it was possible to make the card-reveal animation go from top to bottom, like the top card-content is a curtain that pulls down to reveal more information.
Thanks
You can achieve this by changing transform property of this element .card .card-reveal {}.
And i add extra class to change the transform property make the top card-content is a curtain that pulls down to reveal more information*
Here is the working code
Note: Also add display: block to .card .card-image img fix the bottom gap in your demo.
$('.card-content').click(()=>{
$('.card-reveal').addClass('card-closing');
});
$('.card-reveal .card-title-custom').click(()=>{
$('.card-reveal').removeClass('card-closing');
});
.main {
width: 450px;
margin: 30px;
}
.card .card-image img {
border-radius: 2px 2px 0 0;
position: relative;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
display: block;
}
.card .card-reveal {
padding: 20px;
position: absolute;
background-color: #fff;
width: 100%;
overflow-y: auto;
top: 100%;
height: 100%;
z-index: 1;
display: block !important;
transform: translateY(-200%) !important;
transition: transform .6s;
will-change: opacity, transform;
}
.card .card-reveal.card-closing {
transform: translateY(-100%) !important;
display: block !important;
}
.grey-text.text-darken-4 {
display: block;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.4/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.4/js/materialize.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="main">
<div class="card">
<div class="card-content">
<span class="card-title activator grey-text text-darken-4">Card Title<i class="material-icons right">more_vert</i></span>
<p>This is a link</p>
</div>
<div class="card-image waves-effect waves-block waves-light">
<img class="activator-custom" src="http://materializecss.com/images/office.jpg">
</div>
<div class="card-reveal">
<span class="card-title-custom grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span>
<p>Here is some more information about this product that is only revealed once clicked on.</p>
</div>
</div>
</div>
Here is the working codepen
I have some issue with jQuery slider when I scale it with css transform: scale(x)
I understand that calculations of pixels on slider drag are not correct while it's scaled, but is there any solution?
Here is the example of my issue:
$('.slider-1').slider();
$('.slider-2').slider();
.wrapper-1,
.wrapper-2
{
padding: 25px;
width: 500px;
}
.slider-2 {
marggin-top: 50px;
transform: scale(0.6);
transform-origin: 0;
}
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="wrapper-1">
<p>Slider normal</p>
<div class="slider-1"></div>
</div>
<div class="wrapper-2">
<p>Slider transformed (scaled)</p>
<div class="slider-2"></div>
</div>
It won't work cause the position changes as a percentage. So its moving correctly but appears to be wrong cause its not at the position of mouse cursor.
For the right result you can set width height and top of slider , handle manually
$('.slider-1').slider();
$('.slider-2').slider();
.wrapper-1,
.wrapper-2 {
padding: 25px;
width: 500px;
}
.slider-2 {
margin-top: 50px;
height: 5px !important;
width: 100px;
}
.slider-2 span {
transform: scale(0.6);
top:-9px !important;
}
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="wrapper-1">
<p>Slider normal</p>
<div class="slider-1"></div>
</div>
<div class="wrapper-2">
<p>Slider transformed (scaled)</p>
<div class="slider-2"></div>
</div>
I don't think you can do that. I also tried using scale and it gave the same behavior. You could just change the width/height of the elements, it's easy to style.
$('.slider-1').slider();
$('.slider-2').slider();
.wrapper-1,
.wrapper-2
{
padding: 25px;
width: 500px;
}
.slider-2.ui-slider-horizontal {
marggin-top: 50px;
transform-origin: 0;
width: 60%;
height: .5em;
}
.slider-2.ui-slider .ui-slider-handle {
width: .8em;
height: .8em;
top: -0.2em;
}
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="wrapper-1">
<p>Slider normal</p>
<div class="slider-1"></div>
</div>
<div class="wrapper-2">
<p>Slider transformed (scaled)</p>
<div class="slider-2"></div>
</div>
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I got a fiddle http://jsfiddle.net/HEue6/1/ that looks good for a start and now I want it to look and feel more like Office 365. I think the font in Office 365 is Segoe UI Semilight but I'm not sure. In the meantime we've used the Google font Raleway but another font that was mentioned is also called Futura. Now I would like to add the effect that also Office 365 has, that a grey rectangular box marks the selected area.
Can you help me? Do you think that the correct font is chosen or can it get more similar to Office 365? How should I add the grey rectangle for a chosen element?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>-Register</title>
<script src="/scripts/jquery/jquery-1.9.1.js" type="text/javascript"></script>
<script src="/scripts/application.js" type="text/javascript"></script>
<link href="/css/style.css" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Raleway:400,200" rel="stylesheet" type="text/css">
</head>
<body>
<div id="header">
<div id="header-title">Account Administration</div>
</div>
<hr />
<div id="navigation-bar">
<div id="navigation-content">
<!-- SINGLE BUTTON MODULE --> <a href="/admin/adduser">
<div class="navigation-button">
<div class="navigation-header">Add new account</div>
<div class="navigation-desc">Add new user account</div>
</div></a>
<!-- SINGLE BUTTON MODULE -->
<a href="/admin/search"><div class="navigation-button">
<div class="navigation-header">Search account</div>
<div class="navigation-desc">Search and manage accounts</div>
</div></a>
<!-- SINGLE BUTTON MODULE -->
<a href="/admin/export"><div class="navigation-button">
<div class="navigation-header">Export</div>
<div class="navigation-desc">Export to Excel and other formats</div>
</div></a>
<!-- SINGLE BUTTON MODULE -->
<form id="inputForm" role="form" class="marg-left" action="/admin/import" method="post" enctype="multipart/form-data">
<input id="upload" name="file" type="file" onchange="this.form.submit();"/><a href="" id="upload_link"><div class="navigation-button">
<div class="navigation-header">Import</div>
<div class="navigation-desc">Import from tab-separated files on disk</div>
</div> </a>
</form>
<!-- SINGLE BUTTON MODULE -->
<a href="/admin/setup"> <div class="navigation-button">
<div class="navigation-header">Setup</div>
<div class="navigation-desc">Setup global parameters</div>
</div></a>
<!-- SINGLE BUTTON MODULE -->
<a href="j_spring_security_logout"><div class="navigation-button" id="logga">
<div class="navigation-header">Logout</div>
<div class="navigation-desc">Exit account administration</div>
</div></a>
</div>
</div>
</div>
</body>
</html>
Its a very quick and dirty implementation, but change your CSS to:
FIDDLE
body {
font-family:'Raleway', sans-serif;
}
#header {
width: 100%;
position: fixed;
height: 45px;
border-bottom: solid 2px #0072c9;
background-color: #FFFFFF;
z-index: 30;
}
#header-title {
left: 250px;
font-size: 22px;
bottom: 7px;
color: #0072c9;
font-weight: 400;
position: absolute;
}
#navigation-bar {
width: 230px;
height: 100%;
box-shadow: 0 0 8px 6px rgba(0, 0, 0, 0.2);
z-index: 20;
position: absolute;
}
#navigation-content {
width: 100%;
height: auto;
position: absolute;
top: 47px;
}
.navigation-button {
position: relative;
width: 100%;
height: 80px;
margin: 15px 0px;
}
.navigation-header {
position: absolute;
top: 15px;
left: 10px;
color: #0072c9;
font-size: 25px;
}
.navigation-desc {
position: absolute;
bottom: 15px;
left: 10px;
font-size: 12px;
color: #0072c9;
}
#logout {
border-top: solid 2px #0072c9;
}
#navigation-content a:hover div.navigation-button {
background:lightgrey;
}
#navigation-content a:hover div.navigation-button:before {
content:' ';
display:block;
position:absolute;
right:-20px;
top:15px;
height:30px;
width:30px;
background:white;
-webkit-transform-origin: 5px 25px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}