We Keep Coding

Bootstrap - Switching between Div with Jquery

So I'm using bootstrap as my responsive framework and I have a container, row I also have two div's that I'm going to be switching between using a button. So I setup my HTML and my second div I set the display to "none" to hide it. However when using Jquery fadeIn/fadeOut you can see there is some shifting/expanding in terms of the Height.
Now I think to get around this I have to set the position to Absolute and also change the z-index of the first and second div so one is hidden behind the other. Using absolute however breaks the bootstrap container... So is there a way to switch the Div without the shifting in height when the button is clicked. Added some source so you can see what happens when to buttons are clicked.
http://www.bootply.com/hBNIHfCpxR

Try this:
http://www.bootply.com/PIG2icyErI
Relevant CSS:
.row {
position: relative;
padding-top: 50px;
}
#content-one, #content-two {
position: absolute;
width: 100%;
top: 0;
}

How to use angularjs $anchorScroll on div only if div is hidden?

I'm using angularjs to develop a web application. I have several nested div. Each of them correspond to an item that the user can select.
A good example of my div display is in the official angularJs documentation :
http://plnkr.co/edit/qncMfyJpuP2r0VUz0ax8?p=preview
In my code each div have a ng-click="gotoAnchor(x)" event so when I click on a div if it is partially hidden, it pull it up on the page and the user can see all the clicked div.
But I have a header in my page so the first div with an anchor and a click event is not directly at the top of the page. And if I click on the first div, it will scroll and the header won't be visible.
So my question is, is there a way to activate the anchor only if the div isn't fully displayed on the screen ?
If you have an other solution than anchors, I take it.
Thank you in advance.

If I understand your question correctly the issue is that when using $anchorScroll your header is either
a: Being covered up by the div scrolled into frame,
or
b Partially covering up the div that is scrolled into frame.
Either way there are two solutions you should review:
First
make sure you're employing CSS to properly layer your elements, your header (if fixed) should have a z-index that supersedes your divs.
.header { position: fixed; top:0; width: 100%; z-index: 99}
.content { position: relative; margin-top: 10px; z-index: 1;}
REMEMBER Z-index only works on positional elements (See ref)
Second
Employ $anchorScroll.yOffset to make sure your scroll distance is bumped down to compensate for the header height. As seen in the Angular docs, you can use this method in your application:
.run(['$anchorScroll', function($anchorScroll) {
$anchorScroll.yOffset = 50; // always scroll by 50 extra pixels
}])
Update 50 to be the pixel height of your header.
Regarding visibility
There are a few great libraries and directives for checking the visibility of an element - try https://github.com/thenikso/angular-inview as you can specify whether you want to enable an action when only the top, bottom or none of the div is visible.
Note Posistioning the first div correctly on the page will prevent any scroll from being necessary as seen in this plunkr.

Fixed div as background on mobile devices

I want to use a div as a background for a website.
If I use position:fixed and set the width & size to the viewport size the design breaks on mobile devices/tablets as they do not support the fixed position.
What's the best way to set a div as a static background, so that it works on mobile devices too?

I'm not entirely sure how you intend to use the background, but I created a loose way to do this here. The tacky background is applied to a div the size of the screen, and it will not move (as long as you're careful with what you put inside it). However, the same effect could be done just by direct styles on the body - I'm not sure what exactly you need the div for, so I can't guarantee this technique will work for your use case.
How it Works
With disclaimers out of the way, here are a few details on how it works. All content will have to appear within two divs: one outer one that has the background, and an inner one to hold all of the content. The outer one is set to the size of the page and can have the background applied to it. The inner one then is set to the size of the parent, and all overflow is set to scroll. Since the outer one has no scrollbar, any interior content that exceeds the size of the background tag will cause a scrollbar to appear as though it were on the whole page, not just on a section of it. In effect, this then recreates what the body is on the average web page within the "content" div.
If you have any specific question on the styles, let me know and I'll flesh out the mechanics in more detail.
With jQuery
I suppose there's still one remaining option: use similar style rules, but absent the ability to nest everything within the background, instead prepend it, and change it's position whenever the user scrolls, like so.
Then, just inject this code:
<style>
#bg {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
background-image: url(http://cdn6.staztic.com/cdn/logos/comsanzenpattern-2.png:w48h48);
margin: 0px;
padding: 0px;
overflow: hidden;
}
</style>
<script>
$("body").prepend("<div id='bg'></div>");
$(document).on("scroll", function () {
$("#bg").css("top", $(document).scrollTop())
.css("left", $(document).scrollLeft());
});
</script>
modifying the style rules for the background div accordingly, and you should be good. It will not have a good framerate since this will always appear after the scroll paint, but you're running low on options if you have so little control over the rest of the document structure and style.

You don't have to use jquery. I was able to get this effect with just CSS.
You set the div just below the initial tag. Then apply the image to the html within the div. Give the div and id attribute as well (#background_wrap in this case).
...I tried this without applying the actual image link within the html and it never worked properly because you still have to use "background-image:" attribute when applying the image to the background within css. The trick to getting this to work on the mobile device is not using any background image settings. These values were specific for my project but it worked perfectly for my fixed background image to remain centered and responsive for mobile as well as larger computer viewports. Might have to tweak the values a bit for your specific project, but its worth a try! I hope this helps.
<body>
<div id="background_wrap"><img src="~/images/yourimage.png"/></div>
</body>
Then apply these settings in the CSS.
#background_wrap {
margin-left: auto;
margin-right: auto;
}
#background_wrap img {
z-index: -1;
position: fixed;
padding-top: 4.7em;
padding-left: 10%;
width: 90%;
}

Wrapping content elements causes inline scripts to fire

I am writing a jQuery plugin. In this plugin I wrap the existing BODY contents in a DIV and hide them.
var $originalBodyContents = $('body').wrapInner('<div>').children('div').hide();
The plugin then appends its own overlay DIV to the BODY and does it's plugin magic. When the user exits the plugin removes its overlay DIV, and unwraps them.
$originalBodyContents.children().unwrap();
This is working great, as you can see in this demo:
http://jsfiddle.net/vKddB/1/
However, if there are content scripts on the page then they are all reloaded when the wrap occurs and they run their code again. This is causing a lot of unexpected behavior, as you can see in this demo:
http://jsfiddle.net/vKddB/3/
In the above demo you'll see that the "Show Alert" button shows an alert that says "hello!" when clicked. If you fire the plugin and close the plugin you'll notice that the "Show Alert" button now has two click handlers tied to it so it shows two alerts when clicked.
My plugin will not have control over the contents of the page it is running on. Is there a way I can prevent the inline scripts from re-running when I wrap the body contents in a DIV?

$('script', $('body')).remove(); before your code

If you want your plugin to work on arbitrary pages, you might want to consider an alternative approach where your overlay just covers the original contents. I believe this would be more reliable than tricks such as wrapping and hiding, moving/deleting script nodes, etc.

I just want to share my aproach in bulding an overlay maybe it will help someone.
It's a little different, the div is added on the page and does not hide the existing div elements. Maybe a little faster as the script does not search all div dom elements.
first
//create the overlay with
$('<div class="overlay" />').appendTo('body').show();
//close the overlay with
$('.overlay').remove();
//css used for overlay
.overlay
{
background-color: #363636;
background-image: url('a_nice_bg_image.png');
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
display: none;
z-index: 1000;
opacity: .55;
filter:alpha(opacity=55);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=55)";
}

Append the div to the body, set its position to absolute, set a high z-index and resize it to cover the whole content.
var $overlay = $('<div>')
.css({
position: 'absolute',
top: 0,
left: 0,
width: $(document).width() + 'px',
height: $(document).height() + 'px',
backgroundColor: '#f00',
'z-index': 10000
})
.appendTo('body');
Like this (your original code with minimal modifications): http://jsfiddle.net/Ya3DG/4/ :)

Rotating images based on CSS nth-child

I was able to write a JavaScript carousel and thought it might be more compact to use CSS transitions with nth-child selectors like this:
img {
transition: all 1s linear; /* or corresponding vendor prefixes */
position:absolute;
}
img:nth-child(1) {
top: 0%;
left: 0%;
}
img:nth-child(2) {
top: 0%;
left: 50%;
}
/*and so on...*/
The items would then be rotated by appending the first child or prepending the last child of the container:
parent.appendChild(parent.children[0]);
This approach works well for all but the appended element. It is removed entirely and then reattached, so it ends up in the right spot but does not use the transition effect. Is there a way to use CSS transitions even when relocating an element in the DOM?
jsFiddle Demo - Click the document to advance the images.

What you can do is you can add or remove a class name from an element. Example you have a div element. And its class value is class="item". If you add another class name which has animation to that element's class name list, then that div element will show that animation at that moment immediately.
eg. div.className += " animatedClass";

A very interesting issue indeed. And here is the solution I came up with. Adds some markup and some CSS, but accomplishes it while still using nth-child. Honestly, I may work on this some more later and see if I can't come up with a more elegant solution, but for now, I forked off a jsFiddle.
The core of it is switching a class on a wrapper div, and using that to rotate through the styles.
However, as far as your actual question of can you animate an append image, you can, but not in the way you're thinking here. It would be an initial append animation, which would mean when the page first loaded it will animate. You can do this using #keyframes, and set it so that the image you want slides into place from a starting position of where it would be. But, again, this will happen on first load as well. You can fake it by 'spinning into place' for the first load. So, have all images spin once on load.

I ended up using a data-* attribute and selector. It is a little more verbose than nth-child, but has the advantage of working. It is also cleaner than parsing through class lists.
Each element has a data-order attribute, which can be assigned with HTML or JavaScript:
<img src="http://placekitten.com/203/203" data-order=0 />
Replace nth-child with the attribute selector:
img[data-order="1"] {
top: 0%;
left: 50%;
}
When rotating, increment the order in the dataset. This seems to update the attribute, even though we are modifying the property:
var forEach = [].forEach,
nodes = document.body.children,
length = nodes.length;
//On rotate:
forEach.call(nodes, function(node) {
node.dataset.order++;
node.dataset.order %= length;
});
Here is the final result.