We Keep Coding

CSS: How to place a <script> element on the page

I am developing a web application using AngularJS.
I have a problem: in an HTML page I needed to show a table that dynamically show the number of rows based on a user's choice. I achieved this effect using a script and bootstrap rules.
I won't go into details, but I just show you the high-level code and a screenshot of the result:
HTML code:
<script type="text/ng-template" id="custom/pager">
<ul class="pager ng-cloak">
<!-- Code of the element drop down menu.....-->
</ul>
</script>
<div>
<ng-form >
<div class="panel panel-default table-panel noborder">
<div class="table-responsive">
<table ng-table-dynamic="$ctrl.tableParams with $ctrl.cols" class="table" template-pagination="custom/pager">
<!-- Code of the table.......-->
</table>
</div>
</div>
</ng-form>
</div>
The result is something like that:
My problem is that no type of CSS code seems to work to move the dropdown menu position to this position:
I tried to use position (relative, absolute, fixed) and also to encapsulate the <script> element inside <div> or <span> and refer it with CSS rules. But nothing seems to work! The dropdown menu always remains at the bottom and center of the page. I guess it's bootstrap's fault. Can you tell me how I can resolve this issue?

The pagination buttons are working. If the css should also work. You can place the below code into the codepen to see the effect.
Codepen
.table{
position:relative;
}
.ng-table-counts{
position:absolute;
top:0;
right:0;
}

fadeIn of an element after fading out another one isn't really working

I've created a website called "Pumpn Records" and it's almost finished. On the website there is a section called "Releases". It is divided in two sections, but only one is visible.
So this is the website: http://s448350928.online.de/pumpn/records/index3
The Releases Section there has this html code (simplified):
<div class="container1" id="releases">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script>
<script>
function hide2014and2016show2015()
{
$("#2014").fadeOut(4000);
}
</script>
<script>
$(document).ready(function(){
$("#2015").hide();// hide it initially
$('#forward2014').click(function(){
$("#2015").delay(4000).fadeIn(4000); });
});
</script>
<h2>Releases</h2>
<div id="yearcontainer">
<div id="back2014" style="display:inline-block">
<img id="back2014img" src="..."/>
</div>
<h2 id="year">2014</h2>
<div id="forward2014" onclick="hide2014and2016show2015();" style="display:inline-block">
<img id="forward2014img" src="..."/>
</div>
</div>
<div id="2014">
<div class='container3' style="overflow:visible;">
<h2>EPs</h2>
<div class='row2'>
<a href="...">
<img width="300px" src="..."/>
<h2>Nano Miratus</h2>
<h3>Ganz Okay EP (Instrumental)</h3>
</a>
</div>
<div class='row2'>
<a href="...">
<img width="300px" src="..."/>
<h2>Nano Miratus</h2>
<h3>Ganz Okay EP</h3>
</a>
</div>
<div class='row2'>
<a href="...">
<img width="300px" src="..."/>
<h2>Nano Miratus</h2>
<h3>Viernacheins EP</h3>
</a>
</div>
</div>
</div>
<div id="2015">
<div class='container3' style="overflow:visible;">
<h2>Alben</h2>
<div class='row2'>
<a href="...">
<img width="300px" src="..."/>
<h2>Nano Miratus</h2>
<h3>Larmoyanz</h3>
</a>
</div>
</div>
<div class='container3' style="overflow:visible;">
<h2>EPs</h2>
<div class='row2'>
<a href="...">
<img width="300px" src="..."/>
<h2>Nano Miratus</h2>
<h3>Mrs. EP</h3>
</a>
</div>
</div>
</div>
</div>
If you look at the Releases Section, you will see there is this title ("2014"). Left and right to this titles are arrows, or carets I think they are called. :D
What I wanted to code is:
When someone clicks on the right arrow, the div with the id "2014" should fade out in 4000 milliseconds, then the div with the id "2015" should fade in in 4000 milliseconds. I put a delay before the fade in of that "2015" div. It's also 4000 milliseconds, so the fade in of "2015" should start right after the fade out of "2014" has finished.
What really happens is: http://i.stack.imgur.com/hxLVB.gif
So why isn't it working? I googled and stackoverflowed so much in the last hours and changed that code so often, but it still doesn't work. :(
UPDATE:
Now I know what the problem is, but I can't solve it. This website is a single page website, so I have a javascript plugin. It's called fullpage.js and I know how it works. When you scroll with your mouse, it adds an "transform: translate3d(x, y, z);" property to the "page-container fullpage-wrapper", and changes the y-value, so the page goes down. So I made two fiddles for a demonstration of the problem:
NOT WORKING FIDDLE (with the transform property in it):
jsfiddle.net/ktf9onjo/ (sorry, I'm not allowed to post more then two clickable links...)
WORKING FIDDLE:
jsfiddle.net/rant5af9/
You see that the problem is the transform property.
WHY???
I need an alternative. I cannot just remove it, the script will
be readd it every time I scroll.
Yeah, I could just change the translate3d(x, y, z) to a translateY(y), but nooo, that isn't working, I tried it. :D
INFO: You can find the fullpage.js in the javascript box in both fiddles.
PS: The website isn't finished yet. A lot of links and other things aren't working at the moment.
Please help, fanx! :)

Why the problem happens
As explained by #kosmos in comment:
Because the queue for animations is for every element animation itself. a won't wait for b to make its animation, but if you try to animate a two times, the second animation will wait for the end of the first one.
Solution
jQuery fadeOut function accepts a complete callback function (source).
This callback function is executed once the fade-out is complete. You don't need to use delay anymore this way, and your animations chaining will keep in sync.
html:
<div id="forward2014" style="display:inline-block">
javascript:
$('#forward2014').click(function(){
$("#2014").fadeOut(4000, function(){
// this starts when the fadeOut is finished
$("#2015").fadeIn(4000);
})
});
demo in this snippet
(click the >> as forward button)
$(document).ready(function(){
$("#2015").hide();
$('#forward2014').click(function(){
$("#2014").fadeOut(4000, function(){
// this starts when the fadeOut is finished
$("#2015").fadeIn(4000);
})
});
});
<div id="2014"style="display:inline-block">
2014
</div>
<div id="2015"style="display:inline-block">
2015
</div>
<div id="forward2014">
>>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Further remarks:
You may want to use jQuery's .on function for event listeners (reference). You can replace the onclick= and the .click by it. This should make your code easier to manage and more performant.
The ids in your html are supposed to contain at least a letter (source). Replace id="2014" by id="year-2014" or something like that.

i didn't got what you need exactly but to make to jquery actions going sequences you must call the second action with call back like this
$('#whatever').fadeOut('slow', function() {
$('#whatever').delay(4000).fadeIn('slow');
});
See This

Trying to traverse the DOM so unique video will play when certain div is clicked

So, I have a requirement for dynamically generated content blocks on a page. These blocks have a thumbnail and when it is clicked, it should open a modal, and display an unique overlay window, as well as as the unique associated video.
I am trying to write some generic JavaScript that will traverse the DOM tree properly, so that when any particular thumbnail is clicked, a modal, the associated overlay, and the associated video will open.
Here is an example of what I have now (there are many of these, dynamically added):
<div class="block">
<div class="thumbnail">
//Thumbnail image
</div>
<p>Video Description</p>
<div class="window hide">
<div class="video hide">
//Video content
</div>
</div>
</div>
<div id="modal" class="hide"></div>
and after attempting to do a bunch of different things, I ended up trying to do something like this for the JavaScript, which doesn't work:
$(".thumbnail").on("click",function(){
$("#modal").removeClass("hide").addClass("show");
$(this).closest(".window").removeClass("hide").addClass("show");
$(this).closest(".video").removeClass("hide").addClass("show");
});
CSS is very basic:
.hide { display: none; }
.show { display: block; }
Trying to make the click function generic as possible so it would work on any .thumbnail that was clicked. I've also interchanged find(".window") and children(".window") but nothing happens. Any ideas on what I'm doing wrong? Thanks!

Depending on what you actually want your classes to be, I'd use this code:
$(".thumbnail").on("click", function () {
var $block = $(this).closest(".block");
$block.find(".window, .video").add("#modal").removeClass("hide").addClass("show");
});
DEMO: http://jsfiddle.net/gLMSF/ (using different, yet similar code)
It actually finds the right elements, based on the clicked .thumbnail. It finds its containing .block element, then looks at its descendants to find the .window and .video elements.
If you actually want to include . in your attributes, you need to escape them for jQuery selection.
As for styling, you should probably just have the styling be display: block; by default, and then toggle the hide class. It's less work, and makes more sense logically.

You have a huge issue with your class names in HTML:
<div class=".block">
it should be
<div class="block">
Your modal is the only one that has the class properly named. Your DOM traversals will not work because they are looking for "block" but it's called ".block"
So fix it all to this and you should find more success:
<div class="block">
<div class="thumbnail">
//Thumbnail image
</div>
<p>Video Description</p>
<div class="window hide">
<div class="video hide">
//Video content
</div>
</div>
</div>
<div id="modal" class="hide"></div>

Your code won't work because your selectors have periods (.) in your classes if that's actually what you want, you should try it like this:
$(".\\.thumbnail").on("click",function(){
$("#modal").removeClass("hide").addClass("show");
$(this).closest("\\.window").removeClass("hide").addClass("show");
$(this).closest("\\.video").removeClass("hide").addClass("show");
});
Otherwise just try removing the periods from the classes...
Also, you're using .closest() incorrectly, as it looks up through ancestors in the DOM tree...
You should change your code to:
$(".\\.thumbnail").on("click",function(){
$(this).next("\\.window").children(".video")
.addBack().add("#modal").removeClass("hide").addClass("show");
});

fadeOut not working

I am new to web design. I am making my resume now. I have navigation div like this:
<div id="nav" class="grid_12">
<div id="Home" class="grid_3">
<div class="button">
Home
</div>
</div>
<div id="Life" class="grid_3">
<div class="button">
Life
</div>
<img src="img/someimg.jpg">
</div>
<div id="Portfolio" class="grid_3">
<div class="button">
Portfolio
</div>
</div>
<div id="Contact" class="grid_3">
<div class="button">
Home
</div>
</div>
</div>
Then I have a script for the navigation:
<script type="text/javascript>
$("#nav img").hide();
$(".button").focus(function() {
$(this).next("img").fadeIn("slow");
}).blur(function() {
$(this).next("img").fadeOut("slow");
});
</script>
I want it so when someone holds the mouse over the button the image will appear under it. It is properly hiding the image, but fadeIn not working. I have no idea why it is not working.

.focus is bound to the "focus" event (I linked to a description of what it is rather than the event standard). This is most common when you tab to or click on text inputs, but it can apply to other elements as well.
The mouseenter (also mouseover, but the former is not triggered repeatedly when child elements are also hovered) event occurs when a mouse enters an element. The opposite is mouseleave (mouseout). http://api.jquery.com/mouseenter/

try putting your script inside a ready event of the document :
<script type="text/javascript>
$(document).ready(function(){
$("#nav img").hide();
$(".button").focus(function() {
$(this).next("img").fadeIn("slow");
}).blur(function() {
$(this).next("img").fadeOut("slow");
});
});
</script>

I believe you're using the 960gs, and one thing I have noticed is this: your four grid_3 divs are nested within your grid_12. The 960gs includes two classes called .alpha and .omega to fix the nested margins when a grid is inside a parent grid. You need to put the .alpha class on the first child div - which in this case is your <div id="#home"> and the .omega class on the last child div which is your <div id="Contact">. This will fix the margins you will have on the internal nested four grid_3's.

jquery double function each

I have the following block of HTML code more than once
<div id="page_1" class="page">
<div class="imageDetail_bg">
<img src="../_img/detail_car.jpg" alt="" id="car_detail" class="car_detail"/>
</div><!-- imageDetail-->
<div id="listThumbs">
<div id="thumbsContainer_1" class="thumbsContainer">
<div id="areaThumb" class="areaThumb">
<div id="posThumb_1" class="posThumb">
<img src="../_img/detail_car.jpg" class="detail_img" alt="">
</div>
</div><!--areaThumb-->
<div id="areaThumb" class="areaThumb">
<div id="posThumb_2" class="posThumb">
<img src="../_img/detail_car.jpg" class="detail_img" alt="" />
</div>
</div><!--areaThumb-->
...
...
...
</div><!--listThumbs-->
</div><!--page-->
and the following jQuery code:
$('.page').each(function(i) {
$('.areaThumb').each(function(j) {
$('.detail_img').eq(j).click(function(){
$('.car_detail').eq(i).attr('src', $(this).attr('src'));
});
});
});
What I want to do is: For each page there's a block of thumbs, and when I click in any thumb, the image in #car_detail is replaced by the image of the thumb I clicked. At this moment I can do this, BUT the #car_detail image is replaced in all pages. I'm not getting individually actions for each page. Every click make the action occurs in all pages.
Can anyone tell me what I'm doing wrong?
Thanks

You need not iterate through each element of the jquery selector result to bind a click event.
And you are missing a closing div for thumbsContainer div, add that before each .
Also if you have an element with id car_detail then you should use #car_detail instead of .car_detail
Working example # http://jsfiddle.net/2ZQ6b/
Try this:
$(".page .areaThumb .detail_img").click(function(){
$(this).closest("div.page").find('.car_detail').attr("src", this.src);
});
If the .detail_img elements are being used for the car_detail image then you can simplify the above code to:
$(".detail_img").click(function(){
$(this).closest("div.page").find('.car_detail').attr("src", this.src);
});

You need to give context to your children nodes:
$('.page').each(function(i) {
$('.areaThumb', this).each(function(j) {
$('.detail_img', this).eq(j).click(function(){
$('.car_detail', this).eq(i).attr('src', $(this).attr('src'));
});
});
});
Every this is pointing to the current element given by the jquery function that called it.
[edit] Cybernate found a better way to do what you wanted to. My answer mostly explains why your code did not work as you wanted

I think you have the wrong approach about this,
You should just use cloning and you will be fine...
HTML
<div class="holder">Replace Me</div>
<div>
<div class="car"><img src="img1" /></div>
<div class="car"><img src="img2" /></div>
</div>
JS
$('.car').click(function(){//when you click the .car div or <img/>
var get_car = $(this).clone();//copy .car and clone it and it's children
$('.holder').html('').append(get_car);//put the clone to the holder div...
});
I think this is what you should be doing, simple and elegant... do not understand why you complicate as much :)