I'm not talking about floating, nor z-index (which is used to put one above the other). I'm talking about changing the order that a DIV is displayed through Javascript.
For example, I have:
<div id='bottom'></div>
<div id='header'></div>
I want to change the order so the 'header' will be displayed above the 'bottom', but not "overlaying" it, neither "floating". Just:
<div id='header'></div>
<div id='bottom'></div>
It is a simple question that haven't been asked before, I guess.
You could work with this Remove element by id where you remove the first one (save it to some variable first) and then append it using appendChild() in JS or append() in jQuery if you're using the framework. That should effectively swap places of the two.
EDIT: Take a look at this it basically is the same question you asked for, with an answer containing code and everything else you might need. Seems like you didn't search good enough.
Perhaps this previous answer: Reordering of Divs, which shows a pure-Javascript way and a jQuery way to re-arrange the divs. Googling "rearrange div" also proves fruitful.
It depends on the javascript library you use but if you use jquery, this can easily be done. Just type the following:
var header = $('#header');
$('#bottom').next().remove;
$('#bottom').before(header);
You can do this with CSS only using flexbox depending on the browsers you want to support. Otherwise you can go for the javascript solution like mentioned by others already.
Related
Preamble: Possible duplicate to my question can be found found here, although for me, this question was not sufficiently answered. A work-around is given, but a definitive answer to the question of whether or not it is possible, is not provided.
The question:
On my website, when a user clicks a button (or area of screen), I want that area to "flash" a couple of times before returning to its original state. (I think this gives the user a reassuring feel of something having been activated, as in some circumstances, they may have short delay before the feedback is given.)
Anyway, I've managed to get this working using a bit of JavaScript and jQuery, and you can see the results here >>.
As you may notice, the problem is that after the flashing is done, the element doesn't return to its original state. Rather, it keeps its last "flash" state, and overrides the underlying CSS styling which originally styles the object when the page loads.
I style the element with the following jQuery:
$jq_obj.css('background-color',flash_fg_color_).css('color',flash_bg_color_);
And I 'attempt' to un-style it with:
$jq_obj.removeAttr('background-color').removeAttr('color');
I've also tried:;
$jq_obj.css('background-color','').css('color','');
Despite the documentation saying that this should remove styling, it doesn't.
Is there a solution, or do I have to revert to the work-around solution referred to in my preamble? The nice thing about the JavaScript option is that it becomes a lot more versatile when you want to play around with the animations a bit.
Thanks,
===EDIT 2014-06-28===
As a demonstration of why the class solution is untidy, please see this fiddle: http://jsfiddle.net/Y9L4x/ (inspired by #BiffMaGriff 's proposed solutin here: http://jsfiddle.net/rte3G/)
The problem is that the elements being flashed could already be CSS-ed up to the hilt with multiple classes.
I recognise that I can remove styling classes first, before applying the "flash" classes, complicate the JavaScript and/or the CSS rules, etc. etc.
But the whole point of looking for a non-class-solution is that this option becomes extremely verbose in a real world situation, and you tend to have to program each flashing object individually, rather than the tidy one-JavaScript-function-fits-all that I'm searching for.
You are going to want to do your styles as classes.
.activated{
background-color: red; //or whatever else
}
and then with your jquery you can just toggle them a few times with the delays I assume you already have in your javascript.
$jq_obj.toggleClass('activated');
Try this:
$jq_obj.attr('style','');
The direct answer to the question appears to be a simple "No".
You cannot tell JavaScript to style an object, and then at a later stage, ask JavaScript to give styling responsibility back to CSS.
However, another messy work-around is to re-draw the HTML inside the element which contains your flashing-object.
$jq_flashing_obj.parent().html(original_html_);
This has the slight overhead of having to wrap your flashing object inside a div or span element, to ensure that the parent element contains nothing but your flashing element.
<div class="multiple-children">
link 1
<span class="wrapper">Click me to watch me flash</span>
link 3
</div>
You then, of course, have to capture the outerHTML of your flashing-object before the flashing starts.
original_html_ = $jq_obj[0].outerHTML;
The resulting JavaScript is a little bit verbose, as you see here: http://jsfiddle.net/CgsLs/ . However, it does have the following benefits:
Reusable on all clickable elements regardles of CSS :hover and other messy styling
Can optionally define the flash-color of the element inside the JS
Independent of CSS, meaning that the code is in one file, and therefore more maintainable
There are down-sides too
Requires the use of JQuery on() function (as opposed to simple click event handler)
Anyhoo... it may not be a solution for everyone. In some cases (maybe even most cases) the class option might be simpler.
But this is one other possible method of tackling this inherent shortcoming in JavaScript/Browser technology.
I have a ul>li structure with a list of file paths. It's in a container about 200px wide, so it wraps longer paths down a line which works fine but isn't desireable.
I can use text-overflow: ellipses which works well except my main concern is being able to see the file name, so it would be better to have it cut off the beginning and show the end.
I'm pretty sure this isn't possible with CSS, so I'm assuming I'll need to use JS, the only issue is I need it to be as unobtrusive as possible - the text in the li is referenced when the object is clicked on.
Any ideas on a good way to approach this?
I know people always want code, so here's what I'm doing: http://jsfiddle.net/qbvcn/
A simple solution would be something like this (assuming you'd be willing to use jQuery):
$('li').each(function() {
var $this = $(this);
if ($this.text().length > 20) {
$this.html($this.text().replace(/^(.*)(.{17})$/, '<span style="display:none">\$1</span><span class="ellipsis">...</span>\$2'));
}
});
This is really only going to work if you know the number of characters your element can hold. Although you can overcome this by adding some javascript to calculate this value you for you, see this question.
text-overflow is a nice CSS feature to have, but it is somewhat limited to the features it offers. All it does is truncate and add an ellipsis to the end of the text; it doesn't have the options or flexibility to do what you're asking for here.
Many people (including myself) kicked up a fuss when Mozilla refused to support it in Firefox until FF7, but the reasons given by Mozilla for not supporting it sooner, because of its lack of flexibility, were right.
The simple fact is that if you want anything more than a simple trailing ellipsis, you'll need to do it in Javascript. The ThreeDots jQuery plugin pointed out by #GolezTrol in the comments may be useful. There are other options, though.
I am working with a joomla plugin that generates some html for a form. The problem I have is with the css.
The script generates several divs of varying height, all of which are stacked into a two column layout. The problem is that since they are all floated left, sometimes a second column tall div can block the next div from floating under the adjacent short first column div. Without further hand waving, here is a jsfiddle
What reasonably browser compatible css can I use to stack the floats correctly? Note that the second column divs have essentially no classes or ids to distinguish them from the first column divs.
Here are things I would preferably avoid:
Non compatible solutions like nth-child()
Changing the script to generate css hooks with the html
Javascript is sort of okay
EDIT: It seems the javascript comment is not prominent enough. As the jsfiddle stands, everything is working correctly. This is what I want the layout to look like. Unfortunately, I cannot use a correctfloat classname on the div, because I am not the one generating it. Remove the correctfloat classname to see what the problem is.
http://masonry.desandro.com/
Is this what you're looking for?
You use this style code in css file
#yourdiv{
float:left;
height:yoursizepx;
width:yoursizepx;
overflow:hidden;
}
using clear: left on the short class solves the issue in the example you've given:
.short{
height:100px;
clear:left;
}
See: http://jsfiddle.net/U5FV9/2/ and
http://jsfiddle.net/U5FV9/3/
However I can't help but feel that it may not solve the issue always, based on the information you've given about dynamically a created form. For example, what if a short element needs to be on the right?
I think a better solution for you would be to have two column containers that are floated and contain your short and tall elements. That way you can always ensure they appear correctly.
Here's an example of how you could implement that:
http://jsfiddle.net/U5FV9/5/
As per Mladen's request, I am posting the approach that worked best for me. I used an unobtrusive javascript library called selectivizr that enables cross browser support for the latest css in, get this, all browsers.
I then proceeded to use:
someclassname:nth-child(2n){
float:right;
}
to align every second column div to the right, without the actual need for a second column container. It is still not a perfect solution, since theoretically it is still possible for divs to pile up on one side, but I haven't seen it happening so far.
Thanks for your help folks.
If I am understanding correctly, have you tried modifying or adding an overflow property on the block?
overflow:hidden;
Basically, it is quite hard to explain but I have two Imageslider's that are using the same code? However the first one work's perfect, the second one is displaying a list of images, I figured this might be to do with a DIV ID? Or something that only allows you to use it once...
I am new to this and the problems can be found at this link:
www.steveatattooartist.com
Basically when you click 'sketchbook' the images are all over the place, but when you use Tattoo's they are all perfect.
I am using exactly the same code, why is that a problem? :?
Any help is help, or if you can't help direction usually is a big helping hand!
looks like the main problem you're going to have is lack of uniqueness in your id's. change the id="gallery" to class="gallery" and change the javascript to look at $('.gallery').
jQuery expects id uniqueness and will only select the first element with a given id.
I have some jQuery code that finds elements with the shaded CSS class and adds a div element after it. It is run in the document ready event handler.
$(".shaded").after("<div class='shader'></div>");
The shader class provides styling to make the above element look raised.
My problem is that we started using Ajax to populate content, so now I need to run the code above each time new content is retrieved using Ajax.
What I want to know is how I can detect if this dynamically added "shader" div has previously been added. I know I can find those next elements using this:
$(".shaded").next("div").hasClass("shader")
But how do I elegantly add the "shader" only to the elements that have not been shaded yet?
Thanks in advance.
$(".shaded + :not(.shader)").prev().after("<div class='shader'></div>");
works and tested
First of all, you should really solve this with CSS. But I can imagine situations where that is hard to do (*cough*IE6*cough*).
You could do it the nasty jQuery way and derive which elements already have a shader, like Mrchief's solution.
Or you take the responsible solution and keep a list of elements that have been shaded, and even better, a list of elements that still need to be shaded.
jQuery encourages you to 'abuse' your DOM for storing information about your model, while you really should just make a model and use jQuery based on the information in the model. This is exactly the reason why I'm no longer using jQuery for anything that doesn't involve very complex tasks (I still use it for animations and fancy plugins like lightboxes).
You can try something like this (untested though):
$(".shaded + :not('div.shader')").prev().after("<div class='shader'></div>");
It finds all divs with class shaded and filters out the ones that do not have a div with class .shader after them.
Thanks to #Joseph for pointing out the .prev()