Develop Reference

Change element css styling with js or jquery on the fly

I want to be able to change my navbar position on the fly adjusting remaining content accordingly.
So, I have a functiona website. There is a menu navbar on top by default. What I did is added an 'edit' button to that menu so that when you click it, you get a list of 4 checkboxes with the ability to choose if you want that menu positioned on top (default), left, right or bottom with the other content moving accordingly (e.g menu on the left, content goes slightly right, etc). So basically, I have something like this:
// css for menu positioning to the left
.navbar-left {
width: 25%;
height: auto;
}
.content-right {
position: relative;
left: 200px;
}
// css for menu positioning to the bottom
.navbar-bottom {
position: relative;
bottom: 0;
left: 0;
height: 200px;
}
.content-up {
position: relative;
bottom: 200px;
}
And in JS I do something like this
if($("#left"):checked){
$("#menu-bar").addClass("navbar-left");
$("#content").addClass("content-right");
} else if ($("#bottom"):checked){
$("#menu-bar").addClass("navbar-bottom");
$("#content").addClass("content-up");
}
Now, I have much more styling than this, but it is irrelevant to the issue at hand. The problem is when I choose 'left' it styles properly but when I change it to 'bottom' after that it still uses the styles from 'left' positioning and adds the new ones to it.
Right now I solved the issue by removing the previous classes with .removeClass() method, like that:
if($("#left"):checked){
$("#menu-bar").removeClass("navbar-bottom navbar-right").addClass("navbar-left");
$("#content").removeClass("content-up content-down").addClass("content-right");
} else if ($("#bottom"):checked){
$("#menu-bar").removeClass("navbar-right").addClass("navbar-bottom");
$("#content").removeClass("content-down").addClass("content-up");
}
Basically, right now I have about a hundred lines of just adding classes of the chosen positioning while removing all the classes of 3 other choices that I added each time.
So, finally the question: Is there any other way to strip all the classes that were used before (just set everything to initial values like when the page was loaded) instead of deleting all these classes by hand?

I haven't ever tried resetting the classes to their initial state, but you can certainly clear them all off of a single element in one line of code:
To replace all existing classes with another class, we can use .attr( "class", "newClass" ) instead.
source: https://api.jquery.com/removeclass/
You could probably combine that with the .toggleClass or another method.
If I had to sit down and do it right now, based on my understanding of your question I'd just hide the original elements and add new elements with the classes that you'd like, then to revert delete the new elements and restore the original one.

Animating divs in a set

I currently have a list of objects (projects) that are presented to the user initially as div's that have have a 100px x 200px height/width, position absolute, and float left. This list is contained within an angular ng-repeat method (not sure that makes a difference in the overall question but figured I'd add it in just in case it does). There could be 100s of these divs on the particular project listing page. Currently, I have the page setup so that if you click one of the projects, it's details come up in a modal dialog box. This functionality is fine per the requirements for my project but I'd like to add some "umph" to it by adding in an animation that does the following:
1) If you click on one of the projects, the box expands up to fill the parent container that contains all the projects
2) As the div grows to fill the space or when it's full sized, I want to expose the details of the project itself. Essentially, when the project is unselected, it's just a title/description showing. When it is selected, the project div goes full screen, exposes all of it's details, and shows it's editable fields in the full screen version of the div.
3) When the user closes that full screen div, I'd like it to go back to it's original state in it's original position.
I'm only using the latest version of Chrome for this project so it doesn't need to be a cross browser solution. I'd prefer to keep the animation as close to pure css as possible and would prefer to leave jquery out of it.
I currently have no experience with css3 animations but got a book on it that I hope can teach me about this eventually. However, I figured I would ask in the mean time in case someone can help me out soon so I can put this functionality in while still meeting my deadline for the functionality.
Thanks in advance!

Create a second CSS class that can be added to your div element when it is selected, and removed when it is not. Something like
div {
top: 100px;
bottom: 200px;
left: 100px;
right: 300px;
transition: all 1s; /* animate changes */
}
.active {
top: 0px;
bottom:0px;
left: 0px;
right: 0px;
}
.content {
display: none; /* hide the content unless active */
}
.active .content {
display: block; /* show the content when .active class is added */
}
Make sure that the parent container fills the entire window and is itself set to positiion: absolute or position: relative. There will be a lot more details to work out as you go, but that should give you a framework to get started. You can then add or remove the .active class as needed with JavaScript.

Making DropDown menu 'DropUp'

I am trying to implement a drop up menu. As a starting point I am using an existing drop down menu built using HTML/CSS/jQuery based on CSS trick's Simple jQuery Dropdowns. (As I couldn't get a pure css one to work on touch devices as they relied on hover states.)
I have made a little bit of progress fiddling with ul.dropdown ul {top: -100%; } but this only moves the dropdown up one 'row', I am not convinced that's semantic css.
Any ideas how I could achieve this ?
I have made a jsfiddle of the problem here - http://jsfiddle.net/TTTb6/

Try changing this:
ul.dropdown ul {
bottom: 100%;
}
Updted jsfiddle

Instead of top, use bottom: 100%;:
ul.dropdown ul {
position: absolute;
bottom: 100%;
}

For touch devices you need to write code in click event. please check this one here you will get your answer...
Click to close jQuery dropdown menu on mobile devices while retaining other behavior

Bootstrap button dropdown in btn-container with other buttons

I am create a WYSIWYG editor in my free time. I decided I wanted to use the drop down to allow myself to select formatting. The problem is when I add a dropdown it isnt under the button but at the beginning of the the button container.
here is an image to show what I mean.
The first button looks active because the text is aligned left... Sorry I tried to find a way to fix that but the dropdown is from the last button.
My question is, is there a way to align a Twitter Bootstrap Dropdown, with the button it is supposed to be on or atleast make the dropdown with the width of the button container.

Yes. You can just add a rule, left: auto; right: 0; for the <ul> coming there, by targeting or giving a class, say .right-menu, this way:
.right-menu, .dropdown-menu.right-menu {left: auto; right: 0;}
A working demo of the same would be in jsFiddle.

It's not a bad thing to use .pull-right on the .dropdown-menu to make it stick to the right of the container.
As seen in the source, this class is meant to do that :
// Aligns the dropdown menu to right
&.pull-right {
right: 0;
left: auto;
}
If you prefer to make it as big as the container, you can try applying this to your menu :
.dropdown-menu {
min-width: 100%;
}
You should keep .pull-right in case you have bigger menus.
Check the fiddle demo

Filmstrip Style Image Gallery

I am trying to figure out how to create an image gallery like the one illustrated below so I can place it onto my website. I am wondering if anyone can point me in the right direction for a tutorial? I have found a lot of nice galleries that will display my images, but none of them displays the images like in the filmstrip style I am after.
Requirements of gallery:
When clicking on the arrows, the gallery strip will either shift
left/right by one picture
Hovering over the image will darken the image, and display some
caption about the image

I just answered a question where someone was using carouFredSel. This jQuery plugin looks like it would work pretty well, though I do not think it has the built-in hover effect. To be honest though, that is the easier part.
The trick is to make the width slightly larger than the images to show, which leads to the partial images on each side.
Here is a jsfiddle to illustrate.
UPDATE:
The OP asked if the page nav links could be repositioned. I modified the jsfiddle to work this way. The additions were as follows:
.list_carousel {
position: relative;
}
#prev2 {
position: absolute;
top: 35px;
left: 0;
}
#next2 {
position: absolute;
top: 35px;
right: 0;
}
If you have a relatively positioned container element, you can absolutely position child elements. I added relative positioning to the list_carousel container, then I could absolutely position the nav arrows within the container. Change the top value to position vertically, and left/right to position horizontally.
I also removed the pager all together, as it was not a requirement based on the original example. If you change the page arrows to images it is pretty much what you want.
MORE UPDATES
I decided to take it one step further and make the hover effect work more like the example. See the new jsfiddle. The changes are:
Added span wrappers around all text within list items
Added $(".list_carousel li span").hide(); to hide all the spans
Modified hover event to toggle spans
I also added some CSS to position the span text:
.list_carousel li {
position: relative;
}
.list_carousel li span {
position: absolute;
bottom: 0;
display: block;
text-align: center;
width: 100%;
}
FINAL UPDATE (I PROMISE!)
I decided to go all in and add the transparency layer too: jsfiddle
Hover modifications:
$(this).prepend($("<div class='hover-transparency'></div>")); and $(this).find("div:first").remove(); to add/remove transparency layer on hover in/out.
CSS modifications:
.hover-transparency {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.60);
}
These style the transparency layer. Change to suit your taste.

Something like jCarousel should do the trick. Once you have the carousel functionality in place, you can add in the hover affect via CSS and a span that contains the caption.

I was just looking at ContentFlow Plugin which is JavaScript based.
They include a separate library of additional plugin you can use that takes care of your Slideshow requirements, in particularity this one HERE. When you use the mousewheel over the 3 images, it scrolls by 1. That said, you can mod the plugin to do the same when the arrow buttons are clicked.
Sample plugin markup looks like:
{
shownItems: 3, //number of visible items
showCaption: true // show item caption
width: 100, // relative item width
height: 100, // relative item height
space: 0.4 // relative item spacing
}
To address that the captions should be visible only on mouse hover, I would set showCaption to always be true along with using a jQuery .hover(); Event Listener that will use .show(); and .hide(); on the caption Class Name .caption when required. Also, using jQuery to set the opacity can be done within the .hover(); event too.
The latest version of ContentFlow v1.0.2 supports multiple instances on the same webpage if that's ever required.