I have this simple html code :
<div class='d'>
<span> 1234567890 </span>
<input type='button' class='b'/>
</div>
When a button is clicked , I apply this style :
.dropped span
{
transform: translateZ(200px ) rotatez(120deg);
color:red;
transition: all 1.3s ease-in;
}
via
$(".b").on('click',function (){
$(".d").addClass('dropped')
})
So here is the result :
Question
I don't want it to be rotated on the 6 digit.
I want it to be rotated on the 1 digit.
How can I do that ?
JSBIN
You need to specify the transform-origin to 0 50%;.
Note that transforms normaly don't apply on inline elements like <span> so I changed it's display property to inline-block; :
$(".b").on('click', function() {
$(".d").addClass('dropped')
})
.d {
font-family: 'Orbitron', sans-serif;
/* font style. Default uses Google fonts */
text-shadow: 2px 2px #B4EAF3, 3px 3px #B4EAF3, 4px 4px #B4EAF3, 5px 5px #B4EAF3, 6px 6px #B4EAF3;
font-size: 4vw;
color: #207688;
letter-spacing: 15px;
font-weight: 800;
position: relative;
}
.d span {
display: inline-block;
transform-origin: 0 50%;
}
.dropped span {
transform: rotate(120deg);
color: red;
transition: all 1.3s ease-in;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='d'>
<span> 1234567890 </span>
<input type='button' class='b' />
</div>
More info on the transform-origin property on MDN
Related
I am roughly new to Vue and Javascript. I have two buttons that should change background colours when clicked. I have added some Javascript code to make them toggle but the issue is that when the Free button is selected the background changes, but when the Paid button is selected it won't change.
If someone could help it would be much appreciated.
function changeType(type) {
var element = document.getElementById("myDIV");
element.classList.toggle("active");
}
Below is the Codepen for what I am trying to do.
https://codepen.io/Aadil_Hafesji/pen/bxZWLg
Many thanks!!!
Edit: Changed function changeType to toggle between two buttons. Also added class button to buttons.
You should pass event parameter to the function and toggle class of event.target.
<button class="buttonCloserGreen button" onclick="changeType(event)">
Free
</button>
<button class="buttonCloserBlue button" onclick="changeType(event)">
Paid
</button>
Then access target element in changeType:
function changeType(e) {
let btns = document.getElementsByClassName('button')
for(let i = 0; i < btns.length; i++) {
btns[i].classList.remove("active")
}
e.target.classList.toggle("active");
}
Demo
You can do like below :
<button class="buttonCloserGreen" onclick="changeType(0)" id="myDIV0">
Free
</button>
<button class="buttonCloserBlue" onclick="changeType(1)" id="myDIV1">
Paid
</button>
In jquery :
function changeType(type) {
var element = document.getElementById("myDIV"+type);
element.classList.toggle("active");
}
I've passed the complete element, so you have not to use the ID/Class.
function changeType(element) {
element.classList.toggle("active");
}
.buttonCloserGreen{
height: 45px;
min-width: 200px;
margin-bottom: 10px;
border: 2px solid #53DD6C;
border-radius: 8px;
background-color: #ffffff;
box-shadow: 4px 4px 20px 0 rgba(35, 31, 32, .05);
transition: opacity 200ms ease;
transition: transform 200ms cubic-bezier(.175, .885, .32, 1.275), opacity 200ms ease;
font-family: Poppins;
color: #53DD6C;
font-size: 14px;
line-height: 40px;
font-weight: 700;
text-align: center;
letter-spacing: 0.5px;
text-transform: uppercase;
cursor: pointer;
outline: none;
}
.buttonCloserBlue{
height: 45px;
min-width: 200px;
margin-bottom: 10px;
border: 2px solid #0491F2;
border-radius: 8px;
background-color: #ffffff;
box-shadow: 4px 4px 20px 0 rgba(35, 31, 32, .05);
transition: opacity 200ms ease;
transition: transform 200ms cubic-bezier(.175, .885, .32, 1.275), opacity 200ms ease;
font-family: Poppins;
color: #0491F2;
font-size: 14px;
line-height: 40px;
font-weight: 700;
text-align: center;
letter-spacing: 0.5px;
text-transform: uppercase;
cursor: pointer;
outline: none;
}
.active{
background-color: black;
}
<button class="buttonCloserGreen" onclick="changeType(this)" id="myDIV">
Free
</button>
<button class="buttonCloserBlue" onclick="changeType(this)" id="myDIV">
Paid
</button>
I'm setting JavaScript class to the p, so it should change a colour when it's clicked, here is <p> element:
<p class="classItem"></p>
Here is classItem css class:
.classItem {
display: block;
width: 90%;
margin: 5px auto 0 auto;
height: 40px;
text-align: center;
color: #fff;
background-color: #3266cc;
border-radius: 2px;
line-height: 40px;
font-size: 14px;
transition: all 0.3s ease-in-out;
box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24);
cursor: pointer;
font-family: Roboto, sans-serif;
}
And there you can see background color(#3266cc) - blue, I want to change it to red on a click, so I created css class
.activeClassItem {
background-color: red!important;
}
And on javascript I said, when I click this item let's apply also activeClassItem class, so it will set a colour of background to red, and class is really applied but colour is not changed:
$("body").on("click", ".classItem", function () {
$(".activeClassItem").removeClass("activeClassItem");
$(this).addClass("activeClassItem");
});
When I inspect window, class is there:
<p class="classItem activeClassItem"></p>
So guys, even if Class is applied I can not see changed background unfortunatelly...
Any kind of help is awesome,
Thanks
Here is a working example , if still the issue persist , please consider testing with another browser or try to update your browser
$("body").on("click", ".classItem", function () {
$(".activeClassItem").removeClass("activeClassItem");
$(this).addClass("activeClassItem");
});
.classItem {
display: block;
width: 90%;
margin: 5px auto 0 auto;
height: 40px;
text-align: center;
color: #fff;
background-color: #3266cc;
border-radius: 2px;
line-height: 40px;
font-size: 14px;
transition: all 0.3s ease-in-out;
box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24);
cursor: pointer;
font-family: Roboto, sans-serif;
}
.activeClassItem{
background-color:red !important
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<p class="classItem"></p>
</body>
Functionality:
The Button should have the following effect when user hover above the button:
The Button should have a pop-up effect.
The Button border should have white shadow effect.
What has been done:
I have made use of
img:hover{
border-color: white;
}
to try to get the effect of the a border shadow of white.
Issue:
I can't really seem to get the said effect. However, I was able to get the effect such as this :
img:hover{
background-color: white;
}
when user hover above the button.
Hence, how am I able to create the css such that when user hover above the button, it will create the said effect.
Thanks.
img:hover {
border-color: white;
}
#Button1 {
position: absolute;
top: 310px;
left: 1550px;
outline: 0px;
z-index: 2;
border: 0;
background: transparent;
}
<button id="Button1" onclick="GreatLoveInSingapore()">
<img src="lib/img/GreatLoveButton.png">
</button>
If you want just to grow up your button you should use transfrom it allow you to scale your button
div{
margin: 50px 200px;
}
button{
border: 0;
padding: 0;
cursor: pointer
}
img {
height: 100px;
width: 100px;
display: block;
transition: 0.7s;
}
img:hover{
transform: scale(1.2);
}
<div>
<button class="container">
<img src="http://i.imgur.com/IMiabf0.jpg">
</button>
</div>
EDIT: another way if you have img not text
div.container {
text-align: center;
margin: 100px auto 0;
}
a {
display: inline-block;
background-color: #1984c3;
color: #fff;
font-size: 1.5em;
font-family: 'Calibri', sans-serif;
font-weight: lighter;
padding: 1em 2em;
text-decoration: none;
text-transform: uppercase;
-moz-transition: 0.3s;
-webkit-transition: 0.3s;
transition: 0.1s;
}
a:hover{
transform: scale(1.2);
}
<div class="container">
Hi Im a Button
</div>
Here's a link that can help you.
http://ianlunn.github.io/Hover/
this page has a collection of over effects.
Example of padding....
button{
transition: padding 1s;
}
button:hover {
box-shadow: 0px 5px 5px #888888;
padding:15px;
}
<button><img src="#"/></button>
Transition is used to give the button an animated stretch and box-shadow for the pop-out effect. This is just a quick example mainly to focus on the padding.
I'm sure you can expand on this applying more styles to fit your needs.
Any questions please leave a comment below and I will get back to you as soon as possible.
I hope this helps. Happy coding!
I have this website which I'm attempting to work on. I've obtained a template, which I'm editing the HTML to customize. There exists a section on the page that has three icons with a "More" button beneath them. I've set the button to link to another webpage, but it only works on IE -- not Chrome. Further, the icons themselves are supposed to change as you hover, which again they do in IE but not in chrome.
I have this code:
.intro3 {
text-align: center;
color: $(intro3.color);
}
.intro3 .row {
width: 90%;
margin: 0 auto;
padding: 120px 0 120px 50px;
}
.images_author {
font-size: 6em;
}
.images_author span {
position: relative;
display: inline-block;
width: 160px;
height: 160px;
line-height: 160px;
color: $(intro3.circle.right);
border-width: 40px;
border-style: solid;
border-radius: 100%;
border-top-color: $(intro3.circle.left);
border-right-color: $(intro3.circle.right);
border-bottom-color: $(intro3.circle.right);
border-left-color: $(intro3.circle.left);
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.authsx:hover .images_author span {
color: $(background.color.all);
border-style: double;
border-top-color: $(intro3.circle.left);
border-right-color: $(intro3.circle.left);
border-bottom-color: $(intro3.circle.right);
border-left-color: $(intro3.circle.right);
}
.intro3 .fourcol div.padd_25 {
padding: 25px;
}
.intro3 .fourcol div strong {
font: normal normal 22px PT Serif,serif;
line-height: 1.8em;
}
.intro3 .fourcol p a.more_aut {
font-size: 12px;
margin: 10px 0 10px 0;
display: inline-block;
padding: 10px 30px;
background: transparent;
color: $(intro3.color);
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
border: 2px solid $(intro3.color);
border-radius: 6px;
opacity: 0.6;
}
Which sets up for the (where the action is executed):
<div class='intro3'>
<div class='row'>
<h2 class='title_s authors'> Explore </h2>
<div class='fourcol authsx'>
<div class='images_author coll_1'>
<span class='icon fa fa-linkedin'/>
</div>
<div class='padd_25'>
<strong>LinkedIn Profile</strong>
<p>Connect via LinkedIn. See my skills, experience, and qualifications.</p>
<p><a class='more_aut' href='http://www.linkedin.com/in/amandabayless'><span>More</span></a></p>
</div>
</div>
<div class='fourcol authsx'>
<div class='images_author coll_2'>
<span class='icon fa fa-user'/>
</div>
<div class='padd_25'>
<strong>About Me</strong>
<p>Learn more about me. </p>
<p><a class='more_aut'>More</a></p>
</div>
</div>
<div class='fourcol last authsx'>
<div class='images_author coll_3'>
<span class='icon fa fa-paperclip'/>
</div>
<div class='padd_25'>
<strong>Samples of Work</strong>
<p>See a small sample of my work. </p>
<p><a class='more_aut'>More</a></p>
</div>
</div>
</div>
I only have very rudimentary skills here, and much internet sleuthing could not show me why there was a difference in the browser. For reference, This is the website. Could anyone offer advice? I don't know where to go from here.
Inside #page-content there is an element with class intro3 which has a pseudo element :after. The pseudo element overlays your links. Give it a lower z-index or remove it if you do not need it.
I am having an issue with some expand/collapse code. I would like the p class="heading" tag in the HTML (which is what toggles my expand/collapse box) to move down with the expanding content. Right now the content is expanding and populating below the toggle.
I tried making a fiddle of the code and the expand function wasn't working, so I apologize for not being able to provide one.
The code in question is below.
CSS
<style>
/* mouse over link */
p {
color: rgb(206, 134, 57);
margin-left: -10px;
margin-right: -10px;
margin-bottom: 0px;
transition: background .75s ease-in-out, box-shadow .5s ease-in-out;
}
p:hover { text-decoration: underline;
cursor: pointer;
color: rgb(206, 134, 57);
-moz-box-shadow: 0 -2px 2px;
-webkit-box-shadow: 0 -2px 2px;
box-shadow: .1px .1px 5px .1px #787878;
}
.heading {
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
text-align: center;
padding:7px 14px 7px 12px;
border-bottom-left-radius:5px;
border-bottom-right-radius:5px;
text-decoration:none;
background: -moz-linear-gradient(top, #dedede, white 75%);
background: -webkit-gradient(linear, 0 0, 0 75%, from(#dedede), to(white));
border-top: 1px solid #A6A6A6;
outline:none;
}
a {
color: rgb(206, 134, 57);
}
.heading:hover {
transition: background .75s ease-in-out, box-shadow .5s ease-in-out;
}
a:hover {
color: rgb(137, 90, 39);
}
.transition {
border: 1px solid #A6A6A6;
border-radius: 5px;
background:white;
padding-top: 7px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 10px;
transition: background .75s ease-in-out, box-shadow .5s ease-in-out;
}
.transition:hover {
background:#e6ebef;
box-shadow: .1px .1px 5px .1px #787878;
transition: background .75s ease-in-out, box-shadow .5s ease-in-out;
}
</style>
JQuery/JavaScript
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".content").hide();
//toggle the componenet with class msg_body
jQuery(".heading").click(function() {
var s = $(this);
jQuery(this).next(".content").slideToggle(500);
s.html(s.text() == 'Click here for less information...' ? 'Click here for more information...' : 'Click here for less information...');
});
});
</script>
HTML
<div class="transition"><span style="font-weight: bold; font-size: 18px; color: rgb(0, 130, 200);"><u>Tree Removal Permit</u><br>
</span> <br>
A tree removal permit is required for removal of any tree on a commercial or multi-family property.<br>
<p class="heading">Click here for more information... </p>
<div class="content">
<div style="height:7px;font-size:7px;"> </div>
<span style="font-size: 14px; color: rgb(6, 78, 137);"><b>Online Application Process</b></span>
<ul>
<li type="square">For an easy, step-by-step permit application process visit our Online Licensing and Permitting Portal</a>.</li>
</ul>
<div style="height:7px;font-size:7px;"> </div>
</div>
</div>
Any help would be greatly appreciated!
You have your <div class="content".. above your less information button. Put that before the <p class="heading".. and change this line
jQuery(this).next(".content").slideToggle(500);
to
jQuery(this).prev(".content").slideToggle(500);
is this what you meant? https://jsfiddle.net/inkedraskal/319j8vwr/
You needed to move the "p" tag to below the "content" div, and then just switch up the js accordingly:
jQuery(document).ready(function() {
jQuery(".content").hide();
//toggle the componenet with class msg_body
jQuery(".heading").click(function() {
var s = $(this);
jQuery(".content").slideToggle(500);
s.html(s.text() == 'Click here for less information...' ? 'Click here for more information...' : 'Click here for less information...');
});
});