How would you sequentially activate CSS3 transforms?
I'm trying the following:
<script type="text/javascript">
var sample = $('<div style="text-align:center;">hello</div>');
sample.appendTo($('body'));
sample.css('transform', 'scale(1.0)');
sample.css('transition', 'all 1s ease-in-out');
sample.css('transform', 'scale(2.0)');
</script>
It ignores the transition completely and just sets the scale.
From Mozilla's docs:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions
Care should also be taken when using a transition immediately after
adding the element to the DOM using .appendChild() or removing its
display: none; property. This is seen as if the initial state had
never occured and the element was always in its final state. The easy
way to overcome this limitation is to apply a window.setTimeout() of a
handful of milliseconds before changing the CSS property you intend to
transition to.
So the solution ends up being:
<script type="text/javascript">
var sample = $('<div style="text-align:center;">hello</div>');
sample.appendTo($('body'));
sample.css('transform', 'scale(1.0)');
sample.css('-moz-transition', 'all 1s ease-in-out');
setTimeout(function () {
sample.css('transform', 'scale(2.0)');
}, 10);
</script>
Related
I have two divs I want to transition across the screen to make it look like an infinite loop. I have worked with adjusting setTimeouts and setting an event listener (transitionend), but I keep getting a huge gap between the divs. Here is a link to the js fiddle using the event listener. Below is code I used without using the event listener.
Javascript
var boxWrap = $('#one');
var boxWrap2 = $('#two');
boxWrap.addClass('start')
boxWrap2.addClass('start')
setInterval(function () {
boxWrap.removeClass('start')
boxWrap[0].offsetTop
boxWrap.addClass('start')
}, 35000)
setInterval(function () {
boxWrap2.removeClass('start')
boxWrap2[0].offsetTop
boxWrap2.addClass('start')
}, 35000)
CSS
.boxWrapper.start {
transition: right linear 35s;
right: calc(-144vmin - 80vmin - 200vmin);
}
.boxWrapper.boxWrapper2.start {
transform: translateX(-224vmin);
transition: right linear 35s;
right: calc(-144vmin - 80vmin - 200vmin);
}
Tell me if there is anything you need.
Looking to use this cross browser grayscale filter and had it working on all images, but I want to restrict the effect to the images within a single div.
In function.js I changed all instances of the selector from grayscale($('img'));
to grayscale($('#grayscale-div img')); and did so in all instances. It's adding the CSS class, but in IE11 the effect doesn't work anymore.
I'm trying to see if this is a mistake I'm making with the jQuery selector. Thanks for in advance for pointing me in the right direction.
Code Excerpt:
if (getInternetExplorerVersion() >= 10){
$('#grayscale-div img').each(function(){
var el = $(this);
el.css({"position":"absolute"}).wrap("<div class='img_wrapper' style='display: inline-block'>").clone().addClass('img_grayscale').css({"position":"absolute","z-index":"5","opacity":"0"}).insertBefore(el).queue(function(){
var el = $(this);
el.parent().css({"width":this.width,"height":this.height});
el.dequeue();
});
this.src = grayscaleIE10(this.src);
});
// Quick animation on IE10+
$('#grayscale-div img').hover(
function () {
$(this).parent().find('img:first').stop().animate({opacity:1}, 200);
},
function () {
$('.img_grayscale').stop().animate({opacity:0}, 200);
}
);
The getInternetExplorerVersion() conditional check is failing in IE11. The following change:
if(getInternetExplorerVersion() >= 10 || !!window.MSInputMethodContext)
will fix it in the code shown above. Here are some unrelated questions which explain the problem and the solution:
How to detect IE11?
Detecting IE11 using CSS Capability/Feature Detection
A friend and myself are trying to workaround IE (7/8). We have built a canonical example here:
http://www.mathgladiator.com/share/ie-select-bug-hover-css-menus.htm
Using a CSS menu, we would like to have selects in them. However, in IE, the menu goes away when you interact with the select box. We believe this has to do with a bug in how selects affect events.
Is there a workaround? At least with pure CSS or DOM hacks?
I do not think there is a pure CSS way around this. This is due to a very common bug to the way IE handles events on select elements.
You can however work around it with Javascript:
<script type="text/javascript">
$(document).ready(function () {
$('.nav_element a').mouseover(function() {
$('.submenu').hide();
$(this).parent().find('.submenu').show();
});
$('.submenu').mouseover(function() {
$(this).show();
});
$('.submenu').mouseout(function (e) {
// Do not close if going over to a select element
if (e.target.tagName.toLowerCase() == 'select') return;
$(this).hide();
});
});
</script>
The code above uses jQuery.
Here is a way to improver select behavior in IE7/8, but it does not fix the issue
Change DOCTYPE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
Add script
<script>
function ddlOut(e) {
setTimeout(function() { e.className = e.className.replace(' over', ''); }, 1000)
}
</script>
Add css
#nav .over div.submenu
{
display: block;
}
#nav .nav_element{
behavior: expression(
this.onmouseover = new Function("this.className += ' over'"),
this.onmouseout = new Function("ddlOut(this)"),
this.style.behavior = null
);
}
It will work better at least but of course not perfect.
My advice is to change select control to html equivalent. I use OboutDropDown that has a nice view. There are many implementations that can suite you needs.
First you need to expand the :hover surface underneath your menu.
So in your css add width:310px;height:220px to #nav .nav_element a.
(also add a class or an id on the second div styled with top:220px)
Now you just need to simulate a mousedown triggered when you click on the select which will halt when the selection between the options is done - you can probably do the last part if you check for the onfocus state of the select which will stop the mousedown.
Edit : Problem wasn't related Event Propagation, if you want to know how to stop propagation in jQuery, then use event.stopPropagation();
When user moves his/her mouse over <span> element my jQuery code appends an <img>into this <span> element and when he moves out his mouse off <span> than the element appended is removed. It helps people to edit the field when clicking on the appended <img> element.
The reason I used append() method to add <img> into <span> is because I want to keep <img> element visible when user moves his mouse over to appended <img> element (<img> is becoming <span>'s child element) But it didn't happen and when user moves his mouse over it <img> is being deleted. I am thinking it is because event propagation but I couldn't find how to activate it in jQuery as we do with addEventListener in Firefox based browsers.
Here is the code :
JQuery Code :
$(document).ready(function() {
$('.EditEnabled').bind("mouseover", ShowEditFields);
$(".EditEnabled").bind("mouseout", HideEditFields);
});
function ShowEditFields(event) {
$(event.target).append(" <img id='editImg' src='images/edit.png' style='margin-bottom:-3px'/>");
}
function HideEditFields(event) {
$(event.target).children("#editImg").remove();
}
Simple HTML :
<span id="something" class="EditEnabled">Something Here</span>
Can you explain my how to solve it.
Thank you.
You want to use the jQuery mouseenter and mouseleave events, not mousover and mouseout. The reason is that mouseout will fire when you move the mouse over the img.
Thankfully, jQuery combines this into a hover method:
$(document).ready(function() {
$('.EditEnabled').hover(ShowEditFields, HideEditFields);
});
However I agree with the other answer that you should use CSS to do this vs. manipulating the DOM. I would just use the :hover pseudo selector, and then add special support for IE6.
CSS
span.EditEnabled img { display: none }
span.EditEnabled:hover img,
span.EditEnabled.hover img { display: block }
Make sure you have the img in the span in your HTML to begin with, and that is all you need for most browsers and IE7+
To support IE6 add:
<!--[if lte IE 6]>
<script type="text/javascript">
$(function(){
$(".EditEnabled").hover(
function(){ $(this).addClass('hover') },
function(){ $(this).removeClass('hover')}
);
});
</script>
<![endif]-->
Firstly, I would avoid as much DOM manipulation as you can. The ideal scenario is to construct your markup like this:
<span class="editEnabled">Some data<img ...></span>
with CSS:
span.editEnabled img { display: none; }
span.editEnabled img.visible { display: inline; }
and Javascript:
$(function() {
$("span.editEnabled").hover(function() {
$(this).children("img").addClass("visible");
}, function() {
$(this).children("img").removeClass("visible");
});
});
That should pretty much do it.
I would avoid the jQuery effects as making things visible will make them block level elements rather than inline like you want.
I've found another answer actually, the way I am looking for. It might not be a best practice but at least I've found out how to solve that.
$(document).ready(function() {
// $('.EditEnabled').bind("mouseenter", ShowEditFields);
// $(".EditEnabled").bind("mouseleave", HideEditFields);
$(".EditEnabled").hover(ShowEditFields, HideEditFields);
});
function ShowEditFields(event) {
var target = $(event.target);
if (target.is(":has(#editImg)") == false)
target.append(" <img id='editImg' src='images/edit.png' style='margin-bottom:-3px;display:inline'></img>");
}
function HideEditFields(event) {
// event.stopPropagation();
// if ($(event.relatedTarget).is("#editImg") == false)
$(event.target).children("#editImg").remove();
}
I'm having a hard time picking up how to grab the dimensions of an element with jQuery. Here is my sample code:
$(document).ready(function() {
var width = $("#image_1").width();
var height = $("#image_1").height();
document.write(width);
document.write(height);
});
Now of course I have an image with an id of #image_1. What happens when I try to run it is that it outputs two zeros. Not null twice, or undefined twice.
Thanks for the help from a javascript newb.
Even though you've already chosen an answer, I am typing this one so you understand why your prior code did not work.
jQuery's document.ready function fires before images are loaded. Use window.load instead...
$(window).load(function() {
var width = $("#image_1").width();
var height = $("#image_1").height();
document.write(width);
document.write(height);
});
For what it's worth, I think it is better to use jQuery for this task because of the inherent cross-browser functionality.
Perhaps this was a typo in your question, but is the ID of your image really "#image_1"? For your code to work, it should be just "image_1". The "#" is only used in the jquery selector to specify that the text following it is an ID.
You may get 0 for the width and height if the image is not visible. (That's what just happened to me.)
Updated: You can confirm that the image is added to the DOM by checking the length property of the jQuery object:
var inDOM = ($('#image_1').length > 0);
This works for me:
<head>
<script type="text/javascript">
function foo() {
var image = document.getElementById("the_image");
alert(image.offsetWidth);
alert(image.offsetHeight);
}
</script>
</head>
<body onload="foo();">
<img src="img.png" id="the_image">
</body>
This works as long as the image is not set to display: none; Using offsetWidth and offsetHeight also has the advantage of not requiring jQuery, at all.