Develop Reference

Use the transition-delay option (css) and JS to make a div move

I want to create a function that moves a block smoothly. I prefer to use the CSS option 'transition-duration' for this, but it doesn't seem to work for the position. I checked, and it does work for background-color...
CSS file
#cart {
position: relative;
transition-duration: 0.5s;
background-color: green;
}
JS file
function start() {
document.getElementById("cart").innerHTML = "test2";
document.getElementById("cart").style.left = "100";
document.getElementById("cart").style.background = "gray";
}
So the background-color does change in 2 seconds instead of instantly while the position just changes the instant you use the function. Is there a way to use the 'transition-duration' for the style.left in JS? Or do I have to use something else to make the div move smoothly?
Answer:
The solution is that for transition-duration to do anything, it has to be declared beforehand. This means that because I didn't specify a position in a non-animated state, the movement is done instantly. Another solution is to use transition: left 0.5s since this doesn't require any CSS-styling of the sort.

The CSS for "left" isn't declared in the CSS before it's added in the JS. Also "100" is an invalid value for CSS position (note the added "px" in the following example).
JSFiddle: https://jsfiddle.net/MissionMike/adj4j6tr/
HTML:
<div id="cart">TEST</div>
CSS:
#cart {
position: relative;
transition-duration: 0.5s;
background-color: green;
left: 0;
}
JS:
document.getElementById("cart").innerHTML = "test2";
document.getElementById("cart").style.left = "100px";
document.getElementById("cart").style.background = "gray";

Use transition: left 0.5s linear; as you haven't said what property you're transitioning.
Also, put the styles you want to change to in a class and apply the class with js instead.
Also, you probably want to transition an absolute item inside a relative container, not apply 'left' to a relative element.

How to prevent div:hover transitions from being disabled by javascript div style attributes alterations

Here's the jsfiddle that I've been trying to debug:
http://jsfiddle.net/Neoheurist/x57fkzng/
HTML
<div id="birthday">Surprise Party</div>
<p></p>
<button onclick="blue()">Blue</button>
<button onclick="red()">Red</button>
<script>
function blue()
{
element=document.getElementById("birthday");
element.innerHTML="Happy";
element.style.background="blue";
element.style.width="150px";
element.style.opacity="1.0";
element.style.transition="width 2s,background 15s,opacity 2s";
}
function red()
{
element=document.getElementById("birthday");
element.innerHTML="Birthday";
element.style.background="red";
element.style.width="300px";
element.style.opacity="0.0";
element.style.transition="width 2s,background 4s,opacity 6s";
}
</script>
CSS
div
{
width:100px;
height:50px;
background:blue;
transition:width 2s,opacity 2s,background 15s;
}
div:hover
{
width:200px;
background:green;
opacity:0.25;
transition-timing-function:linear;
transition:width 2s,background 4s,opacity 6s;
}
Questions:
Why does clicking a button disable div:hover?
How can I prevent this from happening?

It's because HTML style attributes override element selectors in a css file. Any property set directly in an HTML style attribute will automatically be used over any property set in any css selector declaration.
Style attributes are much more specific than tag selectors (that's why they aren't recommended for use in fact).
According to the inspector in webkit this also includes the :hover state, so any inline style will stop a hover state from working.
You could use important, tempting as it might be, but that's not a good idea, because it takes the current problem with specificity that you're having and amplifies it even further, leading to a specificity nightmare. The only way to over-ride !important is with more !important, further down the document, or by using more specific selectors (like IDs) or longer chains of selectors and !important and so on, you can see how this can be horrible to maintain. Also any js that adds style to the HTML directly won't work either.
The best solution is to use javascript to add and remove css classes to trigger your changes. This will solve your problem as all your classes will have manageable specificity.
#birthday.blue {
background: blue;
width: 150px;
opacity: 1.0;
transition: width 2s,background 15s,opacity 2s;
}
#birthday.red {
background: red;
width: 300px;
opacity: 0.0;
transition: width 2s,background 4s,opacity 6s;
}
Then make sure the hover state is defined for all the combinations, so any class will :hover. This is not possible with inline styles.
#birthday:hover,
#birthday.blue:hover,
#birthday.red:hover
{
width: 200px;
background: green;
opacity: 0.2;
transition-timing-function: linear;
transition: width 2s,background 4s,opacity 6s;
}
I've put together a jsfiddle that demos this. I've used JQuery, for the sake of getting a demo together quickly and their addClass() method is great. Good effort to use pure js, it's a good habit to get into; this question will elaborate on how to add and remove classes in javascript
Plus; as an added bonus, you'll also have all your style in your style file and all your functionality in your javascript, which is better separation of concerns and makes the site styling DRYer and easier to re-use elsewhere in the project (you don't have styles stuck is js that you can't easily add elsewhere, which you copy instead, then try to change in one place and not the other ... we all do it, or our colleagues do!).
[Seen as I've brought up the subject of specificity you might also be interested to know that IDs are also pretty bad for that and unnecessary in style files]

You could make the div:hover attributes all !important like so:
div:hover{
width:200px !important;
}
However I've heard you'd want to avoid !important if possible, but this does what you want...

You can also use
document.addEventListener('DOMContentLoaded', function () {
var storedStyles;
var elem = document.getElementById("birthday");
elem.addEventListener('mouseenter', function () {
if (elem.hasAttribute('style')) {
storedStyles = elem.attributes.style.value;
elem.removeAttribute('style');
}
});
elem.addEventListener('mouseleave', function () {
if (storedStyles) {
elem.setAttribute('style', storedStyles);
} else {
storedStyles = null;
}
});
});
and clear all styles on mouse enter restoring hover styles precendence and setting back your inline styles on mouse leave

hide/unhide HTML portions by hovering?

more precisely, I've seen websites where there's a kind of header image, which loops through 3-4 different images, and each image is referenced by a dot, and you can pick the image you want by clicking the dot as well. I'm sure everyone has seen this somewhere.
as an example, go to http://www.tsunamitsolutions.com/
my question is, how do I make these dots appear/disappear when I hover on the image (like on the site I shared above) is it javascript or can this be accomplished just in the CSS with the "hover" style.
In other words, can hovering over one html portion/div/section make another div/section appear/disappear just by using CSS?

It can be done in the CSS.
Assuming the dots/arrows are child elements of banner container, you can do something like:
.bannerContainerClass .dotClass {
display: none;
}
.bannerContainerClass:hover .dotClass {
display: block;
}
You can also do it in jQuery if you need effects like fade:
$(".bannerContainerClass").hover(function() {
$(this).children(".dotClass").fadeIn(500);
}, function() {
$(this).children(".dotClass").fadeOut(500);
});
The jQuery method can be modified to work even if the dots aren't children of banner container.

You can accomplish it using Jquery and javascript. As in any website header images there is a tag for image one tag for collection of those points.
Suppose.
<div id="header_image">
..code for header image..
</div>
which is header tag. and there is a tag which cointains the points.
<div id="points_container">
..code for points...
</div>
Now in its javascript code if you want to disappear "points_container" tag when mouse is hovered over "header_image".and appears again when mouse is hovered out, you can write in its Javascript code.
$(document).ready(function(){
$("#header_image").hover(function(){
$("#points_container").hide();
},function(){
$("points_container").show();
});
});

You can use css on hover with either the visibility attribute or opacity attribute to hide an object, the full implementation of a gallery widget like this is somewhat more complicated though. CSS solution:
.dots:hover
{
opacity:0;
}
Makes anything with the dots class invisible on mouse over.
Or if you don't want it to take up any space when invisible:
.dots:hover
{
display:none;
}

Try this with simple CSS transitions, like this
HTML
<div id="parent"><br/><span class="bullets">* * * *</span></div>
CSS
.bullets{
opacity:1;
}
#parent:hover > .bullets{
opacity:0;
transition: opacity .2s ease-out;
-moz-transition: opacity .2s ease-out;
-webkit-transition: opacity .2s ease-out;
-o-transition: opacity .2s ease-out;
}
FIDDLE HERE>>

How Does CSS Opacity Work When Adding Class?

I'm trying to get something to fade in using Jquery. I am gathering the info via scrollTop(). So, when the scroll top equals the offset().top of the div, it will fadein. Or just appear.
#myDiv {
background: #990000;
height: 500px;
width: 100%;
overflow: hidden;
opacity: 0;
}
.fade-in {
opacity: 1.0;
}
There's my CSS.
var winHeight = $(window).height();
$(window).scroll(function() {
var scrollTop = $(window).scrollTop();
$("#myDiv").each(function() {
var $this = $(this);
var trigger = $(this).offset().top;
if (scrollTop >= trigger) {
$this.addClass("fade-in");
}
});
});
And there is my Jquery. The funny thing is that if I use $this.css it works fine.
I am just wondering how CSS and Jquery interact when it comes to opacity.

The id-selector(#myDiv) class gets more priority than the class-selector(.fade-in) in css. So the opacity property in the #myDiv gets more priority when your div has both the classes added. Just changing the .fade-in class a bit, your code should work fine.
.fade-in {
opacity: 1.0 !important;
}
Hope it helps :)

The jQuery .addClass() method just instantly adds the specified class to the element, and once it's added, the css rules are instantly applied just like they would be if you had added the class in the HTML. There's absolutely nothing special or jQuery-specific about how the rules are applied, so opacity shouldn't be applied any differently than any other CSS rule would be. If you believe you're getting a different result when applying the rule via $(this).addClass("fade-in") rather than using $this.css, I'd suggest setting up a jsFiddle to show the issue so folks can take a look at it for you.

Dynamically repeat/tile div and child(s)?

I've been doing some searching on here and Google and I can't seem to find an answer that quite fits what I'm trying to do. I have a single div with some text in it that does a fade effect by transitioning to a different background image on mouse hover. What I want to do is to tile/repeat that same div dynamically so it fills the entire body (or parent div). Kind of like using background-repeat:repeat but with a div instead of a background image. I like to see what kind of cool visual effects I can achieve with elements across the entire page fading in and out as the mouse moves over them.
Of course I could just copy and paste the same div in the code a bunch of times but there must be a better solution. I'm thinking javascript is needed, but the only things I've been able to find about cloning divs look to be a bit over my head and I'm wondering if there is a more simple solution.
The CSS and HTML that I'm using as an example is from menu links on a site I'm working on. It may not be the best example but I'm a bit new to CSS. Basically I want to tile the below div across an entire page.
Here is the css:
#fadediv {
background-image:url(images/buttonback.png);
transition: background-image 0.5s linear;
-moz-transition: background-image 0.5s linear;
-webkit-transition: background-image 0.5s linear;
}
#fadediv:hover {
background-image:url(images/buttonback2.jpg);
}
.fadedivtext {
display:block;
width:320px;
height:138px;
float:left;
font-size:30px;
color:#FFF;
text-align:center;
line-height:138px;
}
And the HTML snippet:
<div id="fadediv" class="fadedivtext">about me</div>
EDIT: Looks like there's a PHP example here that could work, in addition to the javascript example given below.

I think clone should work well for you -- it's not that complicated, especially when you're talking about a basic div. Just make sure to target classes instead of IDs (you're not supposed to have multiple elements with the same ID).
Here's a basic example using JQuery's clone:
var numberOfClones = 20;
var el = $("#fadediv");
for (i=0 ; i<numberOfClones ; i++) {
var newEl = el.clone();
$("#container").append(newEl);
}​
http://jsfiddle.net/9P7bY/2/
Edit
This is a comment left by aug:
Or if you want to for some reason give each clone a unique id you can access the attribute field and change the id to something else
newE1.attr("id", newId);