Before I get into this, I'm sure that there is an answer to my question. I am new to coding, so I don't understand how to plug in the information to make it work on my site. I am trying to get a portfolio like this site: http://gomedia.com/our-work/. Here is my site so you can see the code: http://www.mattsusla.graphics. I have tried for an hour with no success. Please Help!
It's best to do this with native css. Simply call the element's hover state with :hover
button { background: blue; }
button:hover { opacity: 0.5; }
<button>Change Opactiy on Hover</button>
Let's look at the code you'd need in JavaScript
var button = document.getElementById("my-button");
button.addEventListener("mouseover", function() {
button.style.opacity = 0.5;
});
button.addEventListener("mouesout", function() {
button.style.opacity = 1.0;
});
You dont need javascript for this.
Its simple done with css:
img:hover {
opacity: 0.5;
}
if you want it to be more smooth, you can add a transition. this is done with css, too. only use javascript if you really need it!
img {
opacity: 1;
}
img:hover {
opacity: 0.5;
-webkit-transition: opacity 1s;
transition: opacity 1s;
}
I am guessing that you are looking for the same functionality that is in the first site? If that is correct this will do it for you. See fiddle: https://jsfiddle.net/8sphkqkn/1/
html
<div id="box">
<div id="overlay">
<span id="text">Boss Dog Brewing Co.</span>
</div>
</div>
css
#box {
width: 300px;
height: 200px;
box-shadow: inset 1px 1px 40px 0 rgba(0, 0, 0, .45);
border-bottom: 2px solid #fff;
border-right: 2px solid #fff;
margin: 5% auto 0 auto;
background: url(http://s3.gomedia.us/wp-content/uploads/2015/03/GO_BossDogBrewery-1-e1430266175600-300x300.jpg);
background-size: cover;
border-radius: 5px;
overflow: hidden;
}
#overlay {
background: rgba(0, 0, 0, .75);
text-align: center;
padding: 45px 0 66px 0;
opacity: 0;
-webkit-transition: opacity .25s ease;
-moz-transition: opacity .25s ease;
width: 300px;
height: 200px;
}
#box:hover #overlay {
opacity: 1;
}
#text {
font-family: Helvetica;
font-weight: 900;
color: rgba(255, 255, 255, .85);
font-size: 16px;
}
Related
I would like to put a link on my webpage that when it first loads is used to scroll the page down by 500px. If the page is scrolled 10px from the top i would like that link to become a back to top link. I have coded what I thought would be correct but the link appears to only link to the top. It changes from a down chevron to an up chevron when the user scrolls but it does not then reset when the page is back to the top. hope this makes sense.
HTML
<a class="w-toplink active" href="#"><i class="fa fa-chevron-down"></i></a>
CSS
.w-toplink {
display: block;
position: fixed;
bottom: -50px;
right: 30px;
text-align: center;
font-size: 14px;
padding:12px;
line-height: 48px;
height: 28px;
width: 35px;
border-radius: 5px;
z-index: 100;
-webkit-transition: background-color 0.3s, opacity 0.3s, bottom 0.3s;
transition: background-color 0.3s, opacity 0.3s, bottom 0.3s;
background-color: #333;
background-color: rgba(0, 0, 0, 0.3);
color: #fff;
opacity:0;
transition: opacity 200ms ease-in;
}
.w-toplink.active {
bottom: 30px;
opacity: 0.7;
}
.w-toplink:hover {
opacity: 1;
}
.down-link {
width:100%;
height:50px;
position:fixed;
}
#w-downlink i {
line-height: 42px;
font-size: 24px;
color: #fff;
display: block;
width: 24px;
margin: 0 auto;
margin-top:10px;
}
#w-downlink {
height: 60px;
width: 60px;
background-color: #191919;
background-color: rgba(20, 20, 20, 0.4);
position:absolute;
bottom:0;
margin-bottom:30px;
right:0;
margin-right:20px;
cursor: pointer;
-webkit-transform: translate3d(0, 0, 0);
opacity: 1;
}
.w-downlink:hover {
height: 60px;
width: 60px;
background-color: #191919;
background-color: rgba(20, 20, 20, 0.4);
position:absolute;
bottom:0;
margin-bottom:30px;
right:0;
margin-right:20px;
cursor: pointer;
-webkit-transform: translate3d(0, 0, 0);
opacity: 0.5;
}
.w-toplink
{opacity:0; transition: opacity 200ms ease-in;}
.w-toplink.active{opacity:0.7;}
.w-toplink:hover{opacity:1;}
JQUERY
$(window).scroll(function() {
var scrollDownLink = $('.w-toplink');
if ($(window).scrollTop() < 5) {
scrollDownLink.attr('href', '#about');
scrollDownLink.find('i').removeClass('fa fa-chevron-down').addClass('fa fa-chevron-up');
} else {
scrollDownLink.attr('href', '#top-anchor');
scrollDownLink.find('i').removeClass('fa fa-chevron-down').addClass('fa fa-chevron-up');
}
});
I decided to test this out and it's quite a simple fix.
This is your code as it is before I made some small change
$(window).scroll(function() {
var scrollDownLink = $('.w-toplink');
if ($(window).scrollTop() < 5) {
scrollDownLink.attr('href', '#about');
scrollDownLink.find('i').removeClass('fa fa-chevron-down').addClass('fa fa-chevron-up');
} else {
scrollDownLink.attr('href', '#top-anchor');
scrollDownLink.find('i').removeClass('fa fa-chevron-down').addClass('fa fa-chevron-up');
}
});
I changed the if block to
if ($(window).scrollTop() < 5) {
scrollDownLink.attr('href', '#about');
scrollDownLink.find('i').removeClass('fa fa-chevron-up').addClass('fa fa-chevron-down');
}
It's all working fine now. Here's a codepen of the working code
Note that for it to be triggered on 10px from the top you'll need to also change the 5 to a 10
Use this jQuery code to have the functionality without the scrolling messing up with the classes.
The first part manipulates the chevron and the second the scrolling upon click.
var scrollDownLink = $('.w-toplink');
$(window).scroll(function() {
if ($(window).scrollTop() < 10) {
scrollDownLink.find('i').removeClass('fa fa-chevron-up').addClass('fa fa-chevron-down');
} else {
scrollDownLink.find('i').removeClass('fa fa-chevron-down').addClass('fa fa-chevron-up');
}
});
scrollDownLink.click(function() {
if($(window).scrollTop()>10){
$('html,body').animate({
scrollTop:$('#top-anchor').offset().top
},500);
}else{
$('html,body').animate({
scrollTop:$('#about').offset().top
},500);
}
});
I have a button that has an arrow appended to it when a user hovers over it. When clicked, a content div slides out in its wrapper using jQuery.slideToggle().
Once the div slides out, I want to make the arrow in the button rotate 180 degrees to signify that pressing it will make the content div go down if clicked again.
I made a JsFiddle to show what I have so far: https://jsfiddle.net/414mwv17/
What would be the best way to make the arrow point down after the button is clicked?
Create a new class for how you want the carat to appear :
#makeGroupButton span.rotate:after
{
transition: opacity 0.5s, top 0.5s, right 0.5s;
transform: rotate(135deg);
}
Note the class addition in the selector.
Then change the javascript/jQuery to just toggle that class:
$('#makeGroupButton').bind('click', function(){
$('#slideout').slideToggle(500);
$(this).children('span').toggleClass('rotate');
});
You can't directly select the :after and :before pseudo selectors with jQuery, so just changing the class, and adding CSS is customarily the easiest method.
Updated fiddle
Have started it for you to build on. Check this out and let me know your feedback. Thanks!
Added the following style:
#makeGroupButton span.open:after {
border: 3px solid #FFF;
border-top: none;
border-right: none;
margin-top: -15px;
}
and some js too:
$('#makeGroupButton').bind('click', function(event) {
event.preventDefault();
$('#slideout').slideToggle(500);
$(this).find('span').toggleClass('open');
});
#wrapper{
height: 500px;
width: 300px;
position:relative;
border: 2px solid blue;
}
#slideout {
height: 95%;
width: 95%;
border: 2px solid red;
position: absolute;
bottom: 0;
left: 2.5%;
}
#makeGroupButton
{
clear: both;
text-align: center;
color: white;
width: 220px;
background:black;
overflow: hidden;
transition: all 0.5s;
}
#makeGroupButton:hover, #makeGroupButton:active
{
text-decoration: none;
background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
}
#makeGroupButton span
{
display: inline-block;
position: relative;
padding-right: 0;
transition: padding-right 0.5s;
}
#makeGroupButton span:after
{
content: '';
position: absolute;
top: 0;
right: -20px;
opacity: 0;
width: 15px;
height: 15px;
margin-top: -5px;
background: rgba(0, 0, 0, 0);
border: 3px solid #FFF;
border-bottom: none;
border-left: none;
transition: opacity 0.5s, top 0.5s, right 0.5s;
transform: rotate(-45deg);
}
#makeGroupButton:hover span, #makeGroupButton:active span
{
padding-right: 30px;
}
#makeGroupButton:hover span:after, #makeGroupButton:active span:after
{
transition: opacity 0.5s, top 0.5s, right 0.5s;
opacity: 1;
border-color: white;
right: 0;
top: 50%;
}
#makeGroupButton span.open:after {
border: 3px solid #FFF;
border-top: none;
border-right: none;
margin-top: -15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div id="slideout" style="display: none;"></div>
</div>
<a href="#" id="makeGroupButton">
<span>New Group</span>
</a>
I would add a class rotate on click then apply the following css :
#makeGroupButton.rotate span:after {
top: 0px;
-webkit-transform: rotate(-228deg) !important;
}
I have update your js fiddle https://jsfiddle.net/414mwv17/2/.
A much cleaner way to do it would be use an arrow icon then just rotate that icon by 180 degrees.
Hope this helps
The idea is to enable those users that browse through on a website with their keyboard, using tab to get some really meaningful feedback of where their focus is currently at, beyond the default blue outline which usually is missed and or break visual design.
You can in fact create an ::after pseudo-element to appear only on focus state, and you can preview the snippet below that it works fantastic (probably not on old browsers).
The problem is, is it possible to hide the arrow so the user doesn't see it when he clicks on the button (which triggers :active state while click is pressed but also :focus from the moment it has been pressed), but still have it there if someone is using tab to browse through the website.
I cannot think of any way of using CSS for achieving this. Would it only be possible through JavaScript? Google is doing it, if you search for something and press tab and browse with your keyboard, you'll see where your focus is with an arrow on the left.
EDIT: I've seen the other question. And it's helpful for a JavaScript approach. But my question is about whether is possible to do it purely with CSS. For example I've just updated chaining :active:focus in the selector and the arrow now appears only once you release the click.
.row{
text-align: center;
margin: 1rem 0;
}
button{
position: relative;
text-shadow: 0 0 0;
box-shadow: 0 0 0;
background: #eee;
border: 0;
margin: 0;
padding: 1rem 2rem;
transition: all 0.2s ease;
}
button:hover{
background: dodgerblue;
color: #fff;
}
button:active{
top: 2px;
background: #eee;
color: #888;
}
button:focus{
outline: none;
}
button:focus::after{
content: "▲";
position: absolute;
bottom: -1.5rem;
font-size: 1.5rem;
font-weight: bold;
color: dodgerblue;
left: 0; right: 0;
margin: auto;
animation: pulsing 1s ease infinite;
}
button:active:focus::after{
content: "";
}
#keyframes pulsing{
0%,
100%{
bottom: -1.5rem;
}
50%{
bottom: -1.75rem;
}
}
<div class="row">
<button>First</button>
<button>Second</button>
<button>Third</button>
<button>Fourth</button>
</div>
I don't think there is a pure CSS solution for this problem. You can try to differ between mouse and keyboard with using the :hover pseudo class, but the result is only fine as long you are not leaving the focused button...
Edit: I added a body:hover workaround, maybe its sufficient for you?
.row{
text-align: center;
margin: 1rem 0;
}
button{
position: relative;
text-shadow: 0 0 0;
box-shadow: 0 0 0;
background: #eee;
border: 0;
margin: 0;
padding: 1rem 2rem;
transition: all 0.2s ease;
}
button:hover{
background: dodgerblue;
color: #fff;
}
button:active{
top: 2px;
background: #eee;
color: #888;
}
button:focus{
outline: none;
}
button:focus::after{
content: "▲";
position: absolute;
bottom: -1.5rem;
font-size: 1.5rem;
font-weight: bold;
color: dodgerblue;
left: 0; right: 0;
margin: auto;
animation: pulsing 1s ease infinite;
}
button:active:focus::after,
button:hover::after,
body:hover button::after{
content: "" !important;
}
body {
height: 100vh;
width: 100vw;
}
#keyframes pulsing{
0%,
100%{
bottom: -1.5rem;
}
50%{
bottom: -1.75rem;
}
}
<div class="row">
<button>First</button>
<button>Second</button>
<button>Third</button>
<button>Fourth</button>
</div>
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 am creating a relationship editor. The user create some elements and is able to link them creating a relationship (bidirectional). I've created the first part (users creating elements). Now I need to create lines connecting two DIVs when users double click an element, for example.
I know that may have a couple of ways to do it, but actually I have no idea how to start it. What would be a starting point?
$(function() {
$("#BtInsert").button()
.click(function() {
var pad = "000000"
var cor = "" + Math.floor(Math.random() * 16777215).toString(16);
cor = "#" + pad.substring(0, pad.length - cor.length) + cor;
var newDIV = document.createElement('div');
$(newDIV).addClass("base")
.appendTo($("#container"))
.html('N')
.dblclick(function() {
alert('Want to start to create a line from this div to another double click');
})
.draggable({
containment: "parent"
})
.css({
left: Math.floor(Math.random() * ($("#container").width() - $(".base").width())),
top: Math.floor(Math.random() * ($("#container").width() - $(".base").width()))
})
.css("background-color", cor);
})
});
#BtInsert {
top: 405px;
width: 400px;
position: absolute;
}
body {
margin: 0px;
padding: 0px;
}
#container {
border: solid 1px #CCC;
width: 400px;
height: 400px;
padding: 0;
margin: 0;
top: 0;
left: 0;
background-color: whitesmoke;
}
.base {
height: 50px;
width: 50px;
top: 30px;
left: 30px;
border-radius: 25px;
box-shadow: 2px 2px 2px #888888;
vertical-alignment: middle;
line-height: 50px;
text-align: center;
margin-bottom: 5px;
font-family: Calibri;
font-weight: bold;
font-size: 2em;
color: white;
background-color: #CCC;
cursor: pointer;
-webkit-transition: width 3s, height 3s, border-radius 3s, line-height 3s, box-shadow 3s;
transition: width 3s, height 3s, border-radius 3s, line-height 3s, box-shadow 3s;
float: left;
position: absolute;
z-index: 0;
}
.base:hover {
z-index: 1000;
color: #333;
width: 80px;
height: 80px;
border-radius: 50px;
line-height: 80px;
box-shadow: 4px 4px 4px #888888;
-webkit-transition: width 1s, height 1s, border-radius 1s, line-height 1s, box-shadow 1s;
transition: width 1s, height 1s, border-radius 1s, line-height 1s, box-shadow 1s;
}
<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/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div id="container">
</div>
<a href="#" id="BtInsert">
Insert an element
</a>
JS Fiddle
Its better to use SVG instead of HTML for this kind of representations. you will have more flexibility in drawing shapes in SVG.
You can take a look at http://d3js.org/ or http://raphaeljs.com/
See this examples:
http://bl.ocks.org/enoex/6201948
http://blog.stephenboak.com/2012/06/15/d3-flow-vis-tutorial.html
-> https://web.archive.org/web/20130108020533/http://blog.stephenboak.com:80/2012/06/15/d3-flow-vis-tutorial.html
it's doing something similar to what you want.