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;
}

highlight the selected tab

I am working on angularJs and bootstrap application.
Currently working on creating a tabs using angularJS, i want to highlight the selected tab so that users can easily recognize that the tab highlighted is selected. Please suggest how to highlight the selected tab with color #FBDFD9.
Please find the exisiting working code to display tabs : http://plnkr.co/edit/CAlrAzHO2THuglQrsTIi?p=preview
sample html code:
<div ng-controller="TabsParentController">
<tabset>
<tab ng-repeat="workspace in workspaces"
heading="{{workspace.name}}"
active=workspace.active>
<div ng-controller="TabsChildController">
<div>
{{$parent.workspace.id}} : {{ $parent.workspace.name}}
</div>
<input type="text" ng-model="workspace.name"/>
</div>
</tab>
<tab select="addWorkspace()">
<tab-heading>
<i class="icon-plus-sign"></i>
</tab-heading>
</tab>
</tabset>
</div>
--EDIT--
Please suggest how to show the outline of the tabs. If there are many tabs, its appearing just like a text without any outline indicating that as a tab. If noticed the output in http://plnkr.co/edit/CAlrAzHO2THuglQrsTIi?p=preview , outline of the tab is shown only for the selected tab. Please advice how to show the outlines of all the tabs(active tab and inactive tabs). I tried to find the solution but could not find the appropriate ID or classname of the tab to write the css code to show the outer line of the tabs.

I inspected the HTML with Chrome to see which CSS selector is being used in Bootstrap to style active tabs. Modify your CSS to add this rule:
.nav-tabs>.active>a, .nav-tabs>.active>a:hover, .nav-tabs>.active>a:focus {
background-color: #FBDFD9;
}

Bootstrap adds active class to the active tab, so just target it in your css:
.nav-tabs>.active>a {
background-color: #FBDFD9;
}
Since the specificity of the selector .nav-tabs>.active>a is the same as the specificity of bootstrap's selector, to have your styles override either use !important
.nav-tabs>.active>a {
background-color: #FBDFD9; !important;
}
or place your custom styles after bootstrap's in index.html:
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
<link rel="stylesheet" href="index.css">
Here is working example.

How to make JQuery UI Layout Plugin work inside Boostrap body-content div

We have been using JQuery UI Layout Plugin for most of our projects. We have started a new project that uses Bootstrap as the framework. We attempted a simple layout example, using Bootstrap containers, but the layout will not render, in fact no html is rendered. My feeling is that somehow Bootstrap and JQuery UI Layout are not playing nicely. Now, for the code:
This is what we are trying to do for HTML:
<div class="container body-content">
<div class="ui-layout-west">
<div>West</div>
</div>
<div class="ui-layout-center">
<div>Center</div>
</div>
</div>
This is what we are trying to do for Javascript:
$(document).ready(function(){
var globalLayout = $('div.body-content').layout();
});
However, the HTML doesn't render at all (we don't see the 'West' or 'Center' text). But if I change the HTML to no longer use the body-content div and use 'body' to create the layout, we are fine.
Working HTML:
<div class="container body-content"></div>
<div class="ui-layout-west"><div>West</div></div>
<div class="ui-layout-center"><div>Center</div></div>
Working JS:
$(document).ready(function(){
var globalLayout = $('body').layout();
});
Here is a JSFiddle of it not working and here is a JSFiddle of it working.

The issue seems to be with height calculations.
The following CSS adjustment helps in your demo although is not a perfect fix. With some additional CSS inspection I'm sure you will find the proper final adjustments to make
html,body, .container{height:100%}
http://jsfiddle.net/25m9qsar/1

This page at Bootstrap's site tells you how to circumvent the issue.
In short, box-sizing:border-box messes around some calculations.
If you want to test this quickly, go to your bootstrap css file and comment the lines that modify box-sizing, then refresh the page -- this worked well for me.
Just add this CSS snippet:
.ui-layout-container, .ui-layout-pane {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}

CSS3 Transitions: replace them entirely on mobile?

I am building a responsive web site and would like to use this effect for desktop versions only (where the screen is big enough).
The code looks like this:
<div class="block_holder">
<div class="hover_block block_4">
<img src="images/thumbnail.png" />
<div class="top_half">Top Div that slides down on hover</div>
<div class="bottom_half">Bottom Div that slides up on hover</div>
<div class="hover_info">Caption text content</div>
</div>
</div>
Transitions take place in these classes: .block_4 .top_half .block_4 .bottom_half and all content in .hover_info to produce the hover effect.
For mobile, I would just like the photo to just be clickable, without any transitions since there is no hover. Is there a way to replace the entire block of code with something like this:
<p>
<a id="fancybox-manual-b" href="javascript:;" class="link"><img src="images/patterns_thumb.png" alt="pattern" class="portfolio"/></a>
Patterns made in Adobe Illustrator
</p>
I've tried setting .top_half .bottom_half and .hover_info to "display: none;" in the #media section designated for mobile and tablet and then making the img a link, but the image is not clickable using the first code provided. Why is this?
I apologize if there is an obvious solution for this, I have not found or thought of any.

You might be better off using modernizer for this.
if ( Modernizr.touch ) {
$('.top_half,.bottom_half,.hover_info').hide();
$('.hover_block img').click(function() {
alert('I was clicked');
}).css('cursor','pointer');
}
Here is a fiddle to demonstrate the functionality. http://jsfiddle.net/LHLHG/

Full Screen image slider with jquery

I have to make a demo website somewhat similar to http://issuu.com/eb_magazine/docs/ebmag_31/1. The website is coded in flash but I want to do it using javascript and jQuery.
I think I need to do this in two parts, first is a simple image slider to slides between images. I think I can use any jQuery Image slider plugin for that.
The second part where we click on the image and it opens in full screen image slider with a zoom option. I don't know which plugin can be used for that. Is that even possible to do with jQuery? Please suggest any plugins for that

I think http://www.turnjs.com/ is the best solution for your query.
Turn.js is a JavaScript library that will make your content look like
a real book or magazine using all the advantages of HTML5. The web is
getting beautiful with new user interfaces based in HTML5; turn.js is
the best fit for a magazine, book or catalog based in HTML5.
Here's a sample code:
<div id="flipbook">
<div class="hard"> Turn.js </div>
<div class="hard"></div>
<div> Page 1 </div>
<div> Page 2 </div>
<div> Page 3 </div>
<div> Page 4 </div>
<div class="hard"></div>
<div class="hard"></div>
</div>
<script type="text/javascript">
$("#flipbook").turn({
width: 400,
height: 300,
autoCenter: true
});
</script>