Develop Reference

link to section onepage design

I tried to make a link to a section on a one page. It works strangely sometimes, but mostly it gets stuck at the section where you clicked the item and then if you want to scroll manually it does not work at all.
As far as I have seen on the Internet, there is no more to do than creating an a tag with href="#someID" and then clicking it, it should take me to the corresponding id or am I missing something?
<div>
<div class="content-wrapper">
<div class="v-center">
<div class="main-content" style="margin-top: 200px">
<p> Some Text </p>
<ul>
<li>Problem Collection<br></li>
<li>Specific Problem1<br></li>
<li>Specific Problem2<br></li>
<li>Specific Problem3<br></li>
</ul>
</div>
</div>
</div>
<div style="margin-top: 400px">
<div>
<div id="anmeldungsprobleme">
<h2>IDC Anmeldung schlägt generell fehl</h2>
</div>
<div>
<p>Descriptive Text</p>
<p style="color: green"> Username: Placeholder<br> Passwort: *********</p>
</div>
</div>
</div>
<div id="anmeldungJA">
<h3>Anmeldung ist möglich</h3>
<p>Text about the problem</p>
</div>
</div>

Thank you so mcuh for your help #ProEvilz
I tried it outside of my IDE and now it works...
Seems to be a problem inside of brackets.

I'm trying to float a <p> tag in a forum setup

I'm currently making a forum setup where users can view, post and respond to topics. The bit I'm posting here is the "reply to a topic bit". Where the top post is "Topic", and the "reply" bit is at the bottom. Inbetween I have "posted answers" to said Topic.
The problem I'm having is that the "p" tag wont position itself to the right of the user who posted his/her reply, like the replyfield at the bottom does.
I have tried to copy/paste the reply bit on top of each other, and they align nicely, but once I change the textarea tag to a p tag it wont work.
NOTE: The posts will later on be converted to actual posts using PHP, this is just for testing
Thanks
Here is the code:
HTML
<div class=forumListWrap>
<div class="col-1-forum">
<h2>TITLE</h2><!--TITLE-->
<button type="button" class="forumBtn">Add a Reply</button>
<div class="topic">
<h6>Topic</h6>
<div class="reply-wrap">
<div class="col-reply">
<div class="profilePicForum">
<img src="#">
</div>
<div class="profileInfoForum">
<h2>Username</h2>
<h3>Posts: 0</h3>
<h3>View Profile</h3>
</div>
</div>
<div class="col-3-reply">
<div class="postedAnswer">
<p>LOREM</p>
</div>
</div>
</div>
</div>
<div class="reply">
<div class="reply-wrap">
<div class="col-reply">
<div class="profilePicForum">
<img src="#">
</div>
<div class="profileInfoForum">
<h2>Username</h2>
<h3>Posts: 0</h3>
<h3>View Profile</h3>
</div>
</div>
<div class="col-3-reply">
<div class="postedAnswer">
<p>LOREM LOREM</p>
</div>
</div>
</div>
</div>
<div id="horiLine"></div>
<div class="col-2-reply">
<h2>Reply to thread</h2>
<div class="profilePicForum">
<img src="#">
</div>
<div class="profileInfoForum">
<h2>Username</h2>
<h3>Posts: 0</h3>
</div>
</div>
<div class="col-3-reply">
<div class="answerField">
<textarea></textarea>
</div>
<input id="replySubmit" type="submit" value="Submit">
</div>
</div>
</div>
Please see code.

See the updated jsFiddle for a possible Variant.
Explanation of what i did:
i set a width for the column with the username (col-3-reply) to 20% and also made it float left
i set the width of the reply-content to 80%
i added a antifloat div below. This is because floating elements are treated differently, and by adding this, you can have them still inside the box with the grey border of the reply.
Here are the antifloat CSS rules. See the jsFiddle for all details:
.antifloat {
height: 0;
width: 0;
clear: both;
}
As a general hint: Check out the new CSS 3 flexbox ( display:flex; ) it has very good support in all modern browser and is way easier to understand,write and read.

How to use ng-transclude in directives

I have two directives free-form and free-form-canvas
<div ng-repeat="controls in ctrls">
<free-form></free-form>
</div>
free-form.html
<div id="{{controls.uiControlInstanceId}}">
<free-form-canvas data-controls="controls"></free-form-canvas>
</div>
free-form-canvas.html
<div>
<!-- ctrl -->
<div ng-switch on="ctrl.controlProps[1].containerInstance.uiContainerTypeId">
<div ng-switch-when="NAVIGATOR">
<navigation></navigation>
</div>
<div ng-switch-when="CAROUSEL_VIEW">
<carousel></carousel>
</div>
<web-tile ng-switch-when="WEB_TILE" class="drag_tiles" tilegroup="tileGroups">
</web-tile>
<!-- <news-bulletin data-bulletin="" ng-switch-when="WEB_BULLETIN_BOARD"></news-bulletin> -->
</div>
<floating-options></floating-options>
<floating-popup></floating-popup>
</div>
but I need to make transclude free form canvas i.e,
<div ng-repeat="controls in ctrls">
<div id="{{controls.uiControlInstanceId}}">
<free-form-canvas data-controls="controls"></free-form-canvas>
<!-- I need to include free form canvas here it self but nothing gets display -->
<div>
<!-- ctrl -->
<div ng-switch on="ctrl.controlProps[1].containerInstance.uiContainerTypeId">
<div ng-switch-when="NAVIGATOR">
<navigation></navigation>
</div>
<div ng-switch-when="CAROUSEL_VIEW">
<carousel></carousel>
</div>
<web-tile ng-switch-when="WEB_TILE" class="drag_tiles" tilegroup="tileGroups">
</web-tile>
<!-- <news-bulletin data-bulletin="" ng-switch-when="WEB_BULLETIN_BOARD"></news-bulletin> -->
</div>
<floating-options></floating-options>
<floating-popup></floating-popup>
</div>
</div>
</div>
by using ng-transclude I can solve this but I didn't know how to use ng-transclude.

As noted above by New Dev:
You don't need a transclude - <free-form> has the template with <free-form-canvas> and so it will be included as the content of <free-form>. The only difference is that in the output you will have <free-form> <free-form-canvas>....</free-form>, i.e. the output would have a wrapping <free-form>, which you don't have in your example, but that shouldn't matter. If you really care, you could use replace: true (although it is being deprecated).

Function is trying to find a <div> but can't as it is display: none?

I have created a Tabs function below.
//Tabs ///
$('.tabs').each(function() {
var $tabs = $(this);
$tabs.find('.section-body > div:not(:first-child)').hide().end().find('.section-head a:eq(0)').addClass('active').end().find('.section-head a').on('click', function() {
$tabs.find('.section-head a').removeClass('active').end().find('.section-body > div:eq(' + $(this).index() + ')').show().siblings().hide();
$(this).addClass('active');
});
});
Here is the HTML:
<div class="section tabs">
<div class="section-head">
<a>Section A</a>
<a>Section B</a>
</div>
<div class="section-body">
<div>
<p>Section A</p>
</div>
<div>
<p>Section B</p>
</div>
</div>
</div>
This working fine, however, I wanted to use a Grid System plugin inside it, the plugin is here: http://loai.directory/Loai%20Aptana/assets/js/grid-system.js
So in order to use the Grid system plugin, the HTML of the tabs will look as follows:
<div class="section tabs">
<div class="section-head">
<a>Section A</a>
<a>Section B</a>
</div>
<div class="section-body">
<div>
<div class="grid" data-columns><!--Grid-->
<div>Section</div>
<div>Section</div>
<div>Section</div>
</div>
</div>
<div>
<div class="grid" data-columns><!--Grid-->
<div>Section</div>
<div>Section</div>
<div>Section</div>
</div>
</div>
</div>
</div>
Once I do that, I start getting this error: Uncaught TypeError: Cannot read property '1' of null for a live preview, visit http://loai.directory/Loai%20Aptana/profile and inspect the elements / open the browser console to see it.
I spent hours trying to debug this and fix it. One of the things I have tried, is to remove the tabs JS function and then grid system worked!, so I knew it was something to do with both plugins aren't working nicely together.
After farther dubbing, I found that the Grid System is trying to find the <div class="grid" data-columns> so it can apply the effect to it, however, the tabs function has hidden the one that is inside the second tab div:
<div>
<div class="grid" data-columns><!--Grid-->
<div>Section</div>
<div>Section</div>
<div>Section</div>
</div>
</div>
But, I mean the div is still in the DOM and therefor it should be accessible? What is wrong? how can I fix it?

Open div panel inbetween two tweets?

I'm working on a UI that has Twitter feeds. I want to be able to open a panel in the middle of two tweets, pushing the tweet below downwards. This functionality can be seen in tweet clients like TweetBot. As each new tweet in the stream popped up it would push each one below it down as well. Tool bar would be the same for all tweets.
Here is what I have for the JS:
$(document).ready(function() {
hidden = true;
$("div#tweetcontainer").click(function() {
if (hidden == false) {
$("div#toolbar").slideUp('fast');
hidden = true;
} else {
$("div#toolbar").slideDown('fast');
hidden = false;
}
});
});​
Here is the markup of the HTML:
<div id="wrapper">
<!------------- Indivdual Tweet -------------------------->
<div id="tweetcontainer">
<div id="avatarcontainer">
<div id="avatar"></div>
</div>
<div id="content">
<div id="tweetheader">
<div id="name">
<h1>John Drake</h1>
</div>
<div id="tweethandle">
<h2>#Drakejon</h2>
</div>
<div id="tweettime">10m</div>
</div>
<div>
<p>Exceptional Buys Ranger To Give Monitoring Shot In The Arm To Its 'DevOps' Platform http://tcrn.ch/11m3BrO by #sohear </p>
</div>
</div>
</div>
<!------------- Indivdual Tweet 2 -------------------------->
<div id="tweetcontainer">
<div id="avatarcontainer">
<div id="avatar"></div>
</div>
<div id="content">
<div id="tweetheader">
<div id="name">
<h1>John Drake</h1>
</div>
<div id="tweethandle">
<h2>#Drakejon</h2>
</div>
<div id="tweettime">10m</div>
</div>
<div>
<p>Exceptional Buys Ranger To Give Monitoring Shot In The Arm To Its 'DevOps' Platform http://tcrn.ch/11m3BrO by #sohear </p>
</div>
</div>
</div>
<!-------------Tool Bar -------------------------------->
<div id="toolbar">
<div class="toolset">reply</div>
<div class="toolset">Retweet</div>
<div class="toolset">Favorite</div>
<div class="toolset">Track</div>
<div class="toolset">Details</div>
</div>
</div>

Do
$toolbar = $(.toolbar).clone();
$(this).after($toolbar);
I guess you will have to do something like
$(.toolbar).addClass("hidden");
before you appending it to the div, and then do
if ($(.toolbar)).hasClass("hidden"){
...pulldown...
}
or something to keep it disappeared and make it pullDown after appending.