well heres my problem. Lets say i have 3 div tags, all are 100pixels wide:
<--- DIV WIDTH --->
Text in div 1
Text in div two, it overflows
Text in div three
<--- DIV WIDTH --->
Now, currently i have this css for the divs:
width:100px;
overflow:hidden;
What i want to do is if the text overflows, it scrolls like a marquee so all the text can be seen if you wait a little bit. But i only want the marquee to show if the text overflows.
How would i do this?
Thx, Tony
solving the conditional part
JS
var el = $('your element');
if (el.get(0).scrollWidth > el.width()) {
// Your marquee code here
}
$(function(){
$box = $('div.box');
$box.children().each(function(){
if ($box.width() < $(this).width()) {
$(this).wrap('<marquee>');
}
)};
});
Would work in jQuery (I haven't checked it yet. If you have any problems with it reply). Optionally, you could set a scroll attribute in css.
The conditional part can be resolved easily like rennat proposed.
Is it possible for you to use jQuery? If it is, build your html compatible with jQuery marquee plugin, and just call $(element).marquee(); for the animation. It's better than the '<marquee>' tag since it uses only divs with proper css attributes (avoiding non-standard tags use).
This wouldn't work for your problem as described (plain text in a div), but if that's just a minimal case, you can use overflow: auto, which will add a horizontal scrollbar if it overflows.
(Note also that marquee is a non-standard HTML tag.)
Related
For text editing purposes I use contenteditable divs in a website. When I edit some text the div height is growing dynamically and all other elements on the webiste below shift downwards. That's what I want. Finally I store the content via Ajax on a server. So far everything is working fine.
The problem is when I reload the content from the server the height of the contenteditable divs does not grow automatically to show all it's content. Instead its height stay in the initial size.
BTW, this is true for all browsers.
Does anyone have some hints to overcome this issue ?
EDIT
This is the html and javascript contendeditable relevant code
<div class="editable" contentEditable=true onkeyup="autoGrowSave(this)" onblur="update(this)" ></div>
function autoGrowSave (oField) {
if (oField.scrollHeight > oField.clientHeight) {
oField.style.height = oField.scrollHeight + "px";
}
}
I use above javascript function to auto grow the contenteditable. Actually I do not know if even I need it. The jsFiddle example from Abhitalks below does not need one. Hmm ... I have to try without...
To store content on a sever I use the onblur attribute, which works perfect.
I answer the question myself. Thanks to Abhitaks jsFiddle I found the problem which limited to auto adjust the height. For this I appreciate the answer of course ;-)
In a CSS declaration I gave the class editable an initial height of 20px. Because of this the contenteditable could not adjust its height automatically. In turn I needed the javascript function autoGrow() to compensate this issue. While this "crazy" approach worked when editing the content, it did not work when reloading the content.
So the solution is to eliminate the heightin the CSS declaration and get rid of the javascript function autoGrow(). Now it works perfect !
I'm making a loader for a website. The HTML is as follows:
<div class="loadingContainer">
<div class="greyContainer">
<img class="eggGrey" src="img/egg-grey.png">
<p id="bluePercent">50%</p>
</div>
<div class="blueContainer">
<img class="eggBlue" src="img/egg-blue.png">
<p class="greyPercent">50%</p>
</div>
</div>
When element blueContainer has a height of 2%, I want the text in both paragraphs to be 2%. I want the paragraph text to always show the height in percentage of blueContainer. Height values are applied through an external CSS file, I am not very well versed in the language of Javascript, and I've tried some ways but I cannot figure out how I should do this.
EDIT: Some of the things I've tried (and probably miserably failed at):
function percentages(){
document.getElementByClassName("greyPercent, bluePercent"){
if (document.getElementByClassName("greyContainer, blueContainer"){
}
}
}
This is where I'm stuck at too, because I have no idea how I could tell the javascript to run the function when the element has a certain height.
EDIT: Here is a jsfiddle to illustrate what I'm doing. I gave the containers a background colour because of a lack of images.
https://jsfiddle.net/1s5tw6es/
from https://stackoverflow.com/a/9628472/2818869.
First, There is no such css-changes event out of the box, but you can
create one by your own, as onchange is for :input elements only.
not for css changes.
There are two ways to track css changes.
Examine the DOM element for css changes every x time(500 milliseconds in the example).
Trigger an event when you change the element css.
Use the DOMAttrModified mutation event. But it's deprecated, so I'll skip on it.
Nowadays, there are more solutions.
MutationObserver (If you can drop old IEs)
CSS Element Queries
But in this case, I would create function like setProgress which change both the element height and the paragraph.
Example: http://jsfiddle.net/e59u3p4j/1/
This should work:
$("document").ready(function(){ //In case you didn't use this
$(window).resize(function(){
$('#bluePercent').html($('.blueContainer').css('height')/16.0*100); //Converting height into percentage and adding it to the p tag
});
});
I'm working on an animating text element.
The element changes one work with animation. Much like in this example.
http://www.thepetedesign.com/demos/jquery_super_simple_text_rotator_demo.html
The thing is I don't like that when I change one word, the other words around it shift abruptly. I'm trying to use an effect where the other words that move around shift in a nice way. Like in this example.
http://www.thepetedesign.com/demos/jquery_super_simple_text_rotator_demo.html
Does anyone know how to do this? or link me to a relevant solution?
I'm using HTML, CSS, and JS
There may be other ways of doing it but the most consistent cross browser way of doing it that I can think of is this. This is some guidance but code samples would be helpful.
You'll need to have the animated word wrapped in an extra span. Then you'll want to define the width of the outer span to be the width of the inner span before animation. You can do this with CSS if you know what the width will be or you can do it dynamically like this:
$(outerSelector).width( $(innerSelector).width() + 'px');
Animate the text then animate the width change:
$(outerSelector).animate({width: $(innerSelector).width() +'px'}, 500);
This really only works for making it smaller. You can use this method for making the word bigger but you need to know the final width of the word first. Then you could simply have one span and do this:
$(selector).animate({width:newWidth}, 500);
If you're not worried about cross browser compatibility or if you can assume that everyone using the site will have a CSS 3 enabled browser then you can do it with CSS:
selector {
transition: width 0.5s;
}
Then you for shrinking text you would need to again set the outer span width like above, but after the animation of the text you could simply do this:
$(outerSelector).width( $(innerSelector).width() + 'px');
This has the same problem with needing to know that width in advance for transitioning to longer text. You could find out the width using another span with identical text.
.copy {
position: absolute;
left: -100%;
}
Then you could get the width of the copied version and use that as the new width for animation.
I've tried to find an answer for a long time but I didn't find anything.
I'm using contentEditable div to write a text exactly on 210x297mm page. When page ends javascript adds next one:
if(container.scrollHeight > container.clientHeight)
{
page_number = page_number+1
$('#editor').append('<div id="page_'+page_number+'" class="page" onkeyup="javascript:check_page(this);" contentEditable></div><div class="marginbottom"></div>');
$("#page_"+page_number).attr("tabindex",-1).focus();
}
Everything works fine, unless I paste any longer text inside the div at the end of each page. Then only the part of the text apears and the rest goes outside div (and because of 'overflow: hidden' is invisible).
Is there any javascript/jquery method to detect overflow's content and move it into the next page (I didn't find it) or any CSS style that will allow me to separate the text inside each div?
I've read about CSS3 multi-column and I need sth doing similar operations, but separating rows, not columns.
I think your best bet is to not use overflow: hidden but auto and try to detect with JavaScript if there's an overflow by checking for scroll height.
In this case you can dynamically start moving parts of the text (word by word maybe) until the content can fit the available space.
For some concrete techniques check this thread out for example: detect elements overflow using jquery
I have built a music player which loads songs from a database in a random order. I would like to display track info in an info panel. Because I do not know the length of artist/track names, I would like the info to scroll with a marquee effect if it's too big. I'm told browser implementations of the marquee tag are bad so I have got a jquery plugin to do that for me in a nice smooth way (I assume the auther knows why they're bad and has sorted it).
So far so good.
The trouble is the marquee doesnt work out whether it is needed, so I would like to run a check to see if it is necessary (ie if the length of the text warrants it or not) before calling it.
Now I'm sure the problem here is a simple css one but I cannot for the life of me figure it out - you know when you've been staring at something too long...
What I am attempting to do is call the marquee on an inner div if the contents of the inner div are bigger than the outer div but no matter what I do I can't seem to get my inner div to stretch horizontally beyond my outer div unless I set a fixed width (which isn't very helpful since I don't know the width of the content).
Here is my simplified HTML (wrapper contains some other stuff floated either side):
<div id="mplayerinfo_wrapper"><div id="mplayerinfo_trackinfo"><div id="ti_inner"></div></div></div>
Here is my simplified css:
#mplayerinfo_wrapper{
width:545px;
height:30px;
margin-top:32px;
display:inline-block;
float:left;
}
#mplayerinfo_trackinfo{
height:30px;
width:238px;
display:inline-block;
overflow:hidden;
float:left;
}
#ti_inner{
float:left;
height:30px;
width:auto;
}
I am then hoping to use jquery to get the width of both elements, compare them and if inner is bigger than outer, launch the marquee like so:
var owidth=$('#mplayerinfo_trackinfo').width();
var iwidth=$('#ti_inner').width();
if(iwidth>owidth){$('#ti_inner').marquee();};
If this can't be solved through css, is there away to get content width with jquery/javascript. Any ideas? Thanks in advance
Since you already know the width of the outer div, it may be easier to compare against that measurement rather that ask for that width dynamically. I've tried to re-create your simplified program and the problem I ran into was that the width() function only returned the default width of the div's, not the width as modified by css.
Your CSS looks appropriate for what you are trying to accomplish. I would try this for the comparison:
if ($('#mplayerinfo_trackinfo').innerWidth() < $('#ti_inner').outerWidth()) {
$('#ti_inner').marquee();
}
I have had better results when using JQuery's inner and outer measurements.
the ti_inner CSS needs to have
white-space: nowrap;
to prevent the div just increasing in height,
We can then check the widths to see if a marquee is required.
I prefer to check the scrollWidth and the offsetWidth of the outer mplayerinfo_trackinfo instead of comparing the width of the 2 separate divs, mainly so that and margins,borders or padding dont get in the way, but in this example it doesnt really matter.
Heres a sample on JSFiddle marquee if required
Sorry it's in mootools but I'm new to all this web stuff myself and have not used any JQuery but from what I've read it should be easy to swap.