I don't think I can explain this very well in words, so here's a gif:
The p is a <p> tag that appears when it's display is changed to block in js (by default it's none).
When this happens, h1 shifts a bit upward. (here it's only one line, it's usually more)
How can I go about animating h1's movement upward?
You can harness display: table and display: table-cell properties to emulate a gravity to the bottom using vertical-align: bottom.
Then with a little bit of jQuery goodness, you should be able to trigger CSS animations on specific events, such as the loading of a new element.
Check out this implementation on JSFiddle
In the snippet, hObj is the h1 tag you wish to move and pObj is the paragraph tag you want to insert later. You can use css transitions to animate objects.
var hObj = document.getElementById("hObj");
var pObj = document.getElementById("pObj");
function move(){
hObj.style.top = "60px";
hObj.addEventListener("transitionend", function(){ pObj.style.visibility = "visible"; });
}
<h1 style="position:absolute; left:100px; top:100px; transition:top 0.5s linear; cursor:pointer; " id="hObj" onclick="move()">h1</h1>
<p style="position:absolute; left:100px; top:100px; visibility:hidden" id="pObj">p</p>
Related
I need to target the last <a> element but with some conditionals.
In this case the text is created through a CMS which limit's me the option to add a class. I created a jsfiddle to show my problem. The last <a> must have an font awesome angle right in it's :after the other <a> elements not. I can't use something like :last-child a because the user/text writer doesn't have to write a link by default. There is also the possibility of another paragraph after the first. So nothing is default but the last <a> element which stands alone from the paragraph with some actual text must have an icon.
It's kinda hard to explain but the jsfiddle will explain itself so please take a look. it would be nice if there was a CSS solution. if not jQuery comes second.
Thanks in advance!
As far as I know it cannot be done using CSS alone.
How about JavaScript:
var element = document.getElementsByTagName("a");
for(var i=0; i < element.length; i++) {
var el = element[i]
var x = el.parentNode.innerText.length;
var y = el.innerText.length
if (x === y) {
el.classList.add('icon');
}
}
CSS:
.icon::after{
content: "\f105";
margin-left:5px;
font-family: FontAwesome;
background-color: transparent;
}
It adds an .icon class to all <a> elements which are not wrapped inline with text in the parent element.
You can target the last p tag.
p:last-of-type a::after{
content: "\f105";
margin-left:5px;
font-family: FontAwesome;
background-color: transparent;
}
I want to seamlessly expand my div (in a non-jarring way) when the text inside it changes:
The CSS transition: all 2s ease; is working great for colour changes, manually setting width, etc (as you can try out in the jsfiddle - click button to toggle width). but when the inner text of the div is changed the div just jumps to the new width without any transition.
How can I get the transition working when the inner text changes?
Thanks!
Because the default width of the div will be auto (100%), it can't transition from auto to a numerical value.
I don't think dynamically changing a width of an element depending on its content is possible, as there is no transition for content. The content of an element changes instantly and the width does not get a numerical value in your case - but adjusts.
A solution that can be sometimes applicable: Using a function to roughly calculate your text's width so that you'll be able to set a numerical width for your element on change.
Here's a simple one that I made.
function getTextWidth(text, css) {
var e = $('<span></span>'); // dummy element
e.css(css); // set properties
e.text(text); // set test
var width = e.appendTo($('body')).width(); // append and get width
e.remove(); // remove from DOM
return width;
}
Put together an example of usage.
Hi abagshaw try this script to solved your problem.
var big = false;
$('#content').on('click', function(e) {
if(!big)
{
$( this).animate({
width: "600px" }, 500 );
this.innerHTML = "MORETEXTMORETEXTMORETEXTMORETEXTMORETEXTMORETEXTMORETEXT";
big = true;
}
else
{
$( this).animate({
width: "200px" }, 500 );
this.innerHTML = "LESSTEXTLESSTEXT";
big = false;
}
});
.ui.transitioning.button{
transition:all 0.5s ease-in-out;-webkit-transition:all 0.5s ease-in-out;
width:200px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.0.7/semantic.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ui transitioning teal button" id="content">LESSTEXTLESSTEXT</div>
I'm looking for a way so that when I hover over an image, the title or alt tag is displayed in the center of the image (fading in/out), with the image also lowered in opacity.
I've looked around quite a bit but most javascript plugins I find create a tool tip and it's not what I'm looking for.
Thanks for any suggestions.
EDIT: Forgot to mention, the images need to stay in a simple ul list, no extra divs or anything wrapping around each image. They will also use the rel attr for shadowbox or similar.
You could do something like this
$('ul li img').hover(
function(){
$(this).css('opacity','.5');
var a = $(this).attr('alt');
$(this).parent().append('<div class="title">' + a + '</div>');
},
function(){
$(this).css('opacity','1');
$(this).next().remove('.title');
}
);
(Quick and dirty jQuery could definitely be improved)
CSS
ul li img{
position:relative;
}
.title{
position:absolute;
z-index:1000;
top:50%;
bottom:50%;
right:50%;
left:50%;
width:100px;
border-radius:5px;
background:red;
}
(CSS could also be improved... but this gives you an idea)
Example: http://jsfiddle.net/dgKne/
This is just a general description of how you can approach in solving this problem using jQuery:
1) Put an image in a div and give this div class (example: altHover)
2) On hover, first pick alt tag and store it in variable: var title = $("em").attr("title");
3) in the same hover function, make new div inside hovered div and print alt tag inside it:
$(".altHover").hover(
function () {
$(this).append($("<div class='altText'>" + title +"</div>"));
},
function () {
$(this).find(".altText").remove();
}
);
You could use what ile has, but instead of adding a div, you could use addClass. Just use li as the hoverable object.
$("li.picture").hover(
function(){
$(".selected_result").removeClass("selected_result");
$(this).addClass("selected_result");
}
);
I am not a pro javascript person, but this would give you an idea.
I have a sortable list of items that returns results based on what the user types in the search box. The results always overflows and here i am using the following css for it:
#list { overflow-x: visible; overflow-y: hidden; }
This allows me to have only a vertical scrollbar. I then drag the individual li's that are in the list over to a droppable area. The sortable functionality is added to the list using the JQuery below:
$("#list").sortable({
connectWith: ".connectedSortable",
helper: 'clone',
appendTo: 'body',
zIndex: 999
});
The reason i use the appendTo: 'body' is to ensure that the item that is being dragged is on top of everything and will not be under the list's other items when being dragged. However, whenever I drag any item from the list, the DIVs that are in the item will have their CSS styling gone.
I understand that this is due to the fact that when the item is dragged, it is appended to 'body' and thus does not have any parent to inherit the original CSS styles.
My question is how do i style the dragged item back to its original styling to make sure it stays the same even if I am dragging/not dragging it? through the events?
EDIT:
Found the reason for the css messing up. It was a random br thrown in between two div's causing it to be interpreted differently when the item was being dragged and appended to the body.
You have two options to sort the problem. One is to create your own helper with the function. This way you can style is any way you want, wrap it in an element, add classes, etc.
The following demo shows the difference, the top one works, the bottom one is broken. http://jsfiddle.net/hPEAb/
$('ul').sortable({
appendTo: 'body',
helper: function(event,$item){
var $helper = $('<ul></ul>').addClass('styled');
return $helper.append($item.clone());
}
});
The other option is not to use append:'body', but to play with zIndex. Your zIndex:999 clearly has no effect, since the default value is 1000. :) The problem with zIndex is that it only matters for siblings, elements within the same parent. So if you have another sortable on your form with a greater zIndex than your current sortable, its items could easily be on top of your dragged one, regardless of the zIndex of your currently dragged item.
The solution is to push your whole sortable on top when dragging starts and restore it when it stops:
$('#mySortable').sortable({
start: function(){
// Push sortable to top
$(this).css('zIndex', 999);
},
stop: function(){
// Reset zIndex
$(this).css('zIndex', 0);
}
});
If the original value matters, you can even save the original zIndex with .data() and retrieve it afterwards.
Thank you DarthJDG. I am aware this thread is a little old but I hope to help others that had the same issue I did.
I had to edit your solution a little bit because the styling was off when appending the item to the helper. I ended up just recreating the list element. Just in case others run into the same issue I did.
I added this into the area where I created the sortable.
I took the text out of the sortable and created a new list item with that as text.
Javascript:
appendTo: 'body',
helper: function(event,$item){
console.log(event);
var $helper = $('<ul class = "styled" id="' + event.originalEvent.target.id + '"><li>' + event.originalEvent.target.innerText + '</li></ul>');
return $helper;
}
I was then able to add custom styling to the draggable object, including custom text with out an issue. The styling I ended up using was that of JQuery Smoothness.
CSS:
.styled li{
margin-left: 0px;
}
.styled{
cursor:move;
text-align:left;
margin-left: 0px;
padding: 5px;
font-size: 1.2em;
width: 390px;
border: 1px solid lightGrey;
background: #E6E6E6 url(https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/smoothness/images/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat-x;
font-weight: normal;
color: #555;
list-style-type: none;
}
I was working on a JavaScript dialog with a transparent background overlay when I ran into a problem on large pages.
If the page was large, the transparent overlay would be a solid colour (i.e. no longer transparent). I did some testing and found this only happened in the overlay was greater than 4096 pixels high (hmmm, suspicious, that's 2^12).
Can anyone verify this issue? Have you seen a work-around?
Here's my test code (I'm using Prototype):
<style>
.overlayA {
position:absolute;
z-index:10;
width:100%;
height:4095px;
top:0px;
left:0px;
zoom: 1;
background-color:#000;
filter:alpha(opacity=10);
-moz-opacity:0.1;
opacity:0.1;
}
.overlayB {
position:absolute;
z-index:10;
width:100%;
height:4097px;
top:0px;
left:0px;
zoom: 1;
background-color:#000;
filter:alpha(opacity=10);
-moz-opacity:0.1;
opacity:0.1;
}
</style>
<div style="width:550px;height:5000px;border:1px solid #808080">
Display A = 4096h
<br />Display B = 4097h
</div>
<div id="overlayA" onclick="Element.hide(this)" class="overlayA" style="display:none"></div>
<div id="overlayB" onclick="Element.hide(this)" class="overlayB" style="display:none"></div>
Since you have an opacity filter on the CSS I believe you are indirectly using DirectShow under the covers for alpha blending and image composition. DirectShow uses DirectX textures, which have a 4096x4096 pixel limit for DX9, which would explain this erratic behavior.
How about making the overlay the size of the window instead of the size of the page, and moving it up or down on scroll.
You are operating at the edge already (that's huge...) so I don't know that MS would classify it as a bug or 'fix' it even if it was.
You might need to break it up into smaller overlay DIVs.
Why wouldn't you postion the overlay fixed?
That way it wouldn't have to be as big as the whole page content.
Simply doing:
#Overlay{
position:fixed;
left:0px;
top:0px;
height:100%;
width:100%;
rest of declarations
}
Just make sure it's parent is the document and the document has a width and height of 100%. That way you should be good with a much smaller overlay.
THe posotion:fixed will make sure the overlay is positioned relative to the viewport. Thus its always displayed in the top left corner.
The position:fixed solution is a spotty solution..It is not well supported in IE.
The best thing is to automatically create and append additional transparent elements (with a max height of 2048px to cover XP DX8 which has this issue as well).
Here's the code I used, assuming you already have a floating div solution.
if(document.getElementById('document_body').scrollHeight > 2048)
{
document.getElementById('float_bg').style.height = "2048px";
document.getElementById('float_bg').style.zIndex = -1;
count=1;
total_height=2048;
while(total_height < document.getElementById('document_body').scrollHeight)
{
clone = document.getElementById('float_bg').cloneNode(true);
clone.id = 'float_bg_'+count;
clone.style.zIndex = -1;
//clone.style.backgroundColor='red';
clone.style.top = (count*2048)+"px";
document.getElementById('float_el').insertBefore(clone,document.getElementById('float_bg'));
count++;
this_add = 2048;
if((total_height + 2048) > document.body.scrollHeight)
{
clone.style.height = (document.body.scrollHeight - total_height);
}
total_height += this_add;
}
}
else
{
document.getElementById('float_bg').style.height = document.body.scrollHeight + "px";
}