Develop Reference

Javascript Mouseover, Opacity Change

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;
}

Switching text content on click. For some reason it takes 2 clicks?

I am attempting to change the text in a <h1> element via jquery.
I am pretty close! For some reason it is taking 2 clicks to toggle the text.
Any idea how I can fix this?
DEMO
HTML
<center>
<div class="contentTab">
<div class="triangle-up"></div>
<h1>CLOSE TOP HEADER</h1>
</div>
</center>
CSS
.contentTab{
width:300px;
height:49px;
background:#f1efef;
border-top-right-radius:12px;
border-top-left-radius:12px;
position:absolute;
margin-left:50%;
left:-150px;
margin-top:23px;
cursor:pointer;
}
.contentTab h1{
color:#a9a9a9;
text-shadow: 1px 1px #fcfcfc;
font-size:12px;
margin-top:3px;
font-weight:bold;
}
.triangle-up {
width: 7px;
height: 0;
padding-left: 7px;
padding-bottom: 7px;
overflow: hidden;
margin-top:8px;
}
.triangle-up:after {
content: "";
display: block;
width: 0;
height: 0;
margin-left:-500px;
border-left: 500px solid transparent;
border-right: 500px solid transparent;
border-bottom: 500px solid #b0b0b0;
}
.triangle-down {
width: 7px;
height: 0;
padding-left: 7px;
padding-bottom: 7px;
overflow: hidden;
margin-top:8px;
-moz-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
transform: scaleY(-1);
filter: flipv; /*IE*/
}
.triangle-down:after {
content: "";
display: block;
width: 0;
height: 0;
margin-left:-500px;
border-left: 500px solid transparent;
border-right: 500px solid transparent;
border-bottom: 500px solid #b0b0b0;
}
.contentTab:hover h1, .contentTab:hover .triangle-up:after{
color:#919191;
border-bottom-color:#919191;
}
.contentTab:hover {
margin-top:18px;
height:54px;
}
.contentTab h1, .contentTab:hover h1, .contentTab:hover .triangle-up:after, .contentTab:hover, .triangle-down:after, .triangle-down, .contentTab {
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.15s ease-out;
-ms-transition: all 0.15s ease-out;
-o-transition: all 0.15s ease-out;
transition: all 0.15s ease-out;
}
JS
$('.contentTab').on('click', function(e) {
$('.mainContent').toggleClass("closeHeader");
$('.contentTab ').toggleClass("contentTabActive");
$('.triangle-up').toggleClass("triangle-down");
$(".triangle-down").insertAfter(".contentTab h1");
$(".triangle-up:not(.triangle-down)").insertBefore(".contentTab h1");
e.preventDefault();
$(".contentTab").click(function () { $(".contentTab h1").text(function(i, v){
return v === 'CLOSE TOP HEADER' ? 'OPEN TOP HEADER' : 'CLOSE TOP HEADER' }) });
});

Yeah, your JS code should avoid nested click event initialization. I suppose you try to do something like that.
js
$('.contentTab').on('click', function(e) {
$('.mainContent').toggleClass("closeHeader");
$('.contentTab ').toggleClass("contentTabActive");
$('.triangle-up').toggleClass("triangle-down");
$(".triangle-down").insertAfter(".contentTab h1");
$(".triangle-up:not(.triangle-down)").insertBefore(".contentTab h1");
var h1 = $(this).find("h1");
var str =h1.text() === 'CLOSE TOP HEADER' ?
'OPEN TOP HEADER' :
'CLOSE TOP HEADER'
h1.text(str);
});

Your text isn't being changed on first click because you defined the function to change that text in an event listener nested to another one. That means there is no event listener to toggle your text when first click is made. Indeed that event listener (to toggle text) is defined after the first click and that's why you need two clicks to toggle your text.
Thus your code will work by just removing that nested event listener and defining your function inside the first onclick.
$('.contentTab').on('click', function(e) {
$('.mainContent').toggleClass("closeHeader");
$('.contentTab ').toggleClass("contentTabActive");
$('.triangle-up').toggleClass("triangle-down");
$(".triangle-down").insertAfter(".contentTab h1");
$(".triangle-up:not(.triangle-down)").insertBefore(".contentTab h1");
$(".contentTab h1").text( function(i, v) {
return v === 'CLOSE TOP HEADER' ? 'OPEN TOP HEADER' : 'CLOSE TOP HEADER'
});
e.preventDefault();
});
JSFiddle: https://jsfiddle.net/99th1w75/5/

Try removing the inner click function from the already click function:
$('.contentTab').on('click', function(e) {
$('.mainContent').toggleClass("closeHeader");
$('.contentTab ').toggleClass("contentTabActive");
$('.triangle-up').toggleClass("triangle-down");
$(".triangle-down").insertAfter(".contentTab h1");
$(".triangle-up:not(.triangle-down)").insertBefore(".contentTab h1");
e.preventDefault();
$(".contentTab h1").text(function(i, v){
return v === 'CLOSE TOP HEADER' ? 'OPEN TOP HEADER' : 'CLOSE TOP HEADER' });
});
.contentTab{
width:300px;
height:49px;
background:#f1efef;
border-top-right-radius:12px;
border-top-left-radius:12px;
position:absolute;
margin-left:50%;
left:-150px;
margin-top:23px;
cursor:pointer;
}
.contentTab h1{
color:#a9a9a9;
text-shadow: 1px 1px #fcfcfc;
font-size:12px;
margin-top:3px;
font-weight:bold;
}
.triangle-up {
width: 7px;
height: 0;
padding-left: 7px;
padding-bottom: 7px;
overflow: hidden;
margin-top:8px;
}
.triangle-up:after {
content: "";
display: block;
width: 0;
height: 0;
margin-left:-500px;
border-left: 500px solid transparent;
border-right: 500px solid transparent;
border-bottom: 500px solid #b0b0b0;
}
.triangle-down {
width: 7px;
height: 0;
padding-left: 7px;
padding-bottom: 7px;
overflow: hidden;
margin-top:8px;
-moz-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
transform: scaleY(-1);
filter: flipv; /*IE*/
}
.triangle-down:after {
content: "";
display: block;
width: 0;
height: 0;
margin-left:-500px;
border-left: 500px solid transparent;
border-right: 500px solid transparent;
border-bottom: 500px solid #b0b0b0;
}
.contentTab:hover h1, .contentTab:hover .triangle-up:after{
color:#919191;
border-bottom-color:#919191;
}
.contentTab:hover {
margin-top:18px;
height:54px;
}
.contentTab h1, .contentTab:hover h1, .contentTab:hover .triangle-up:after, .contentTab:hover, .triangle-down:after, .triangle-down, .contentTab {
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.15s ease-out;
-ms-transition: all 0.15s ease-out;
-o-transition: all 0.15s ease-out;
transition: all 0.15s ease-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<center>
<div class="contentTab">
<div class="triangle-up"></div>
<h1>CLOSE TOP HEADER</h1>
</div>
</center>

Href not working in Chrome, does work in IE

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.

How can I change the pivot on my rotateZ animation?

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

Scripted image won't wrap with text

just trying to align some text with an image on the right, the image is using javascript to transition between 2 images. I need the transitional effects to stay but also be able to have text wrap to the left of it in the same container. Can anyone help please?
HTML
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Kawasaki Motorcycle Club UK</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div id="wrapper">
<div id="header">
</div>
<nav>
<ul class="navbar">
<li>BIKES</li>
<li>NEWS</li>
<li>EVENTS</li>
<li>JOIN</li>
<li>CONTACT</li>
</ul>
</nav>
</div>
<div class="contentbox">
<div id="maincontent">
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENTtestestestest
<img name = "slides" id="slides" src="images/mybike.jpg"/>
<img name = "slides" id ="slides" src="images/racergreen.jpg"/>
<script> //adapted from https://www.youtube.com/watch?v=e1AYSgA57h8
var interval = 4 * 20; // seconds between change
var images = document.getElementsByName("slides");
var imageArray = [];
var imageCount = images.length;
var current = 0;
var randomize = function(){
return (Math.round(Math.random() * 3 - 1.5));
}
for(var i = 0; i < imageCount; i++){
images[i].className = 'fade-out';
imageArray[i] = images[i];
}
imageArray.sort(randomize);
var fade = function(){
imageArray[current++].className = 'fade-out';
if(current == imageCount){
current = 0;
imageArray.sort(randomize);
}
imageArray[current].className = 'fade-in';
setTimeout(fade, interval * 100);
};
fade();
</script>
</div>
</div>
<br>
<div>
<div class="socialcontainer">
<img id="facebookbutton"/>
<img id="twitterbutton"/>
<img id="googlebutton"/>
</div>
</div>
</body>
CSS
body {
font-family: 'Arial', sans-serif;
background-color: #000;
}
#wrapper {
max-width: 1000px;
margin: 0 auto;
background-color: #fff
padding: 32px;
}
#header {
height: 110px;
background: url(images/header.png);
}
header h1 { //NOT NEEDED
text-align: center;
color: #FFF;
}
header h2 { //NOT NEEDED
font-variant: small-caps;
text-align: center;
color: #fff;
}
.navbar {
padding: 5px 0 5px 0;
text-align: center;
line-height: 35px;
background: url(images/navbar.png);
background-size: contain;
}
ul.navbar {
margin-top: 15px;
}
.navbar li {
display: inline;
padding: 0 40px 0 40px;
font-size: 30px;
font-weight: 800;
}
a:hover, a:visited, a:link, a:active {
text-decoration: none;
background: #60bf19;
color: #FFF;
text-shadow:
-5px -5px 0 #000;
}
a:hover {
color:dimgrey;
text-shadow:
-5px -5px 0 #000;
}
a:active {
color: #FFF
text-shadow:
-5px -5px 0 #000;
}
.contentbox {
width: 1000px;
position: relative;
margin: 0 auto;
background-color: #383131;
border-radius: 5px;
height: 1000px;
}
#maincontent {
color: #FFF;
position: relative;
float: left;
}
#slides{
-webkit-transition-property:opacity;
-webkit-transition-duration:3s;
position:absolute;
right: 0
}
#slides.fade-out {
opacity:0;
}
#slides.fade-in {
opacity:1;
}
.socialcontainer {
width: auto;
height: auto;
text-align: center;
}
#facebookbutton {
background-image: url(images/facebook-hover.png);
height: 48px;
width: 48px;
-webkit-transition: all ease 0.3s;
-moz-transition: all ease 0.3s;
-o-transition: all ease 0.3s;
-ms-transition: all ease 0.3s;
transition: all ease 0.3s;
}
#facebookbutton:hover {
background-position: 0px -48px;
box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8);
}
#twitterbutton {
background-image: url(images/twitter-hover.png);
height: 48px;
width: 48px;
-webkit-transition: all ease 0.3s;
-moz-transition: all ease 0.3s;
-o-transition: all ease 0.3s;
-ms-transition: all ease 0.3s;
transition: all ease 0.3s;
}
#twitterbutton:hover {
background-position: 0px -48px;
box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8);
}
#googlebutton {
background-image: url(images/google-hover.png);
height: 48px;
width: 48px;
-webkit-transition: all ease 0.3s;
-moz-transition: all ease 0.3s;
-o-transition: all ease 0.3s;
-ms-transition: all ease 0.3s;
transition: all ease 0.3s;
}
#googlebutton:hover {
background-position: 0px -48px;
box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8);
}

Assuming I understand what you are trying to do..
you could place the text and images inside the #maincontent element within seperate div tags respectively and then align them side-by-side with their own css. Technically they aren't within the SAME container like you said you wanted but they are still both within the #maincontent container.
here is my JSFiddle that hopefully helps. note that I included random images inplace of your ones for the fade effect.
<div id="maincontent">
<div id="content-box">CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENTtestestestest
</div>
<div id="image-box">
<img name="slides" width="500px" id="slides" src="images/mybike.jpg" />
<img name="slides" width="500px" id="slides" src="images/racergreen.jpg" />
</div>
</div>
added css:
#content-box {
width: 500px;
height: 100%;
background-color: '#3e4';
float: left;
overflow: hidden;
}
#image-box {
width: 500px;
height: 100%;
background-color: '#3e4';
float: left;
overflow: hidden;
}