Develop Reference

Hide pagination bullets at Full Screen Vertical Scroll (FSVS)

I am creating a web page locally and I have the style from FSVS https://github.com/lukesnowden/FSVS
But because the Top page will be the one that will have my menu and slider, I don't want it to have the pagination bullets. Any suggestion?
I tried using code like
html.fsvs.demo #fsvs-body>.slide.nth-class-1 li{display: none;}
but it won't hide it. Here is the demo page of the FSVS also: http://luke.sno.wden.co.uk/full-screen-vertical-scroll

Try this:
html.fsvs .slide.nth-class-1 #fsvs-pagination li:first-child{
display:none;
}

I found the answer:
html.fsvs .active-slide-1 li { display:none;}
did it!

How to Change div Position in responsive

This is my website which I am working on.
As you can see there is a sidebar in desktop mode. But when you see it in mobile mode the sidebar goes down under the content which is showing on the left side.
Now what I want in mobile view is to make sidebar appear on top, and after that the content should appear. I've tried lots of things like position:absolute; and margin but it's not working for me.
Please suggest what would be the correct way to do this task.
jsFiddle of my code
This works for me
<script type="text/javascript">
var windowWidth = $(window).width();
//window.alert(windowWidth);
if(windowWidth<=767){
$('.wf-span-4').insertBefore('.wf-span-8');
}
</script>

You should probably provide a simplified version of your code, however, here's what I've got.
You have one of two options:
change the structure of the site so that the order is reversed in
the first place.
Use jquery to move the content below a certain
width ex: $('#sidebar').insertBefore('#content')

The correct way imo would be to put your markup in the right order to begin with. Markup is structure and should be independent of styling (as much as possible).
Then your code would look something like this
<section class="main">
<div class="sidebar">Bye</div>
<main class='content'>Hi</main>
</section>
And all you would have to do is remove the floats on mobile, so the content goes back into the default flow. Something like this:
.content {
width:75%;
float:left;
}
.sidebar {
width:25%;
float:right
}
#media screen and (max-width:767px) {
.content, .sidebar {
float: none;
}
}
(note that I updated your class names and markup, just so the code would be a bit better readable)
And here is your updated demo: http://jsfiddle.net/ehozb5v9/2/

Open a new site, scrollbar at the bottom

I will at my forum-system when I'm opening a new site that the scrollbar is at the bottom of the site, so that I don't have to scroll down. I have no ideas how to make a code for this, because I'm not the pro in JavaScript..

One way is to place a bookmark at the bottom of the page. Example:
<a id="bottom"></a>
When you open the page, include the bookmark as hash. Example:
show

You can use css to complete the task:
Use this code in css
<style type="text/css"> body{overflow-x:hidden;} *{ overflow-x:hidden;} html, div, span, p, label, textarea{ overflow-x:hidden; } </style>
You don't need to use JavaScript to hide bottom scrollbar in the html page

loading indicator autocomplete

I have implemented an autocomplete functionality for a textbox in my web application.
The issue here is that my textbox is having width 100px. The loading indicator is a background css added to the textbox when user starts typing into it.
I want the loading indicator to be at the extreme right side of the page.
But since the indicated is appended to the text box(width = 100px), the loading indicator stays within it.
Please let me know how to place the loading indicator to the extreme right.

Demo Jsfiddle
One option is to wrap the elements in a wrapper div then use the :after pseudo selector to add in your loading indicator (simply the text image in the demo, replace this with '' and use a background-image along with height and width). The two examples show justifying within the input to the right, or all the way across the page to the right.
HTML
<div class='wrapper'><input type='text' /></div>
<br>
<div class='wrapper'><input type='text' /></div>
CSS
html, body{
position:relative;
width:100%;
padding:0;
margin:0;
}
input{
width:100px;
}
.wrapper{
display:inline-block;
}
.wrapper:first-child{
position:relative;
}
.wrapper:after{
position:absolute;
content:'Image';
right:0;
}

Menubar like Wordpress admin menu

I'm trying to find a javascript library (better if can be done usiny jquery) to replicate more or less the functionality of the top menubar of wordpress once you are logged. You can add images/links on the left, on the right, or both sides.
The most javascript menus libraries that I've found are not as nice as this one, some of them only add buttons/link on one side or centered ...
See the attached image.
thanks

EDIT:
Bootstrap provides this functionality out of the box. Even if you don't need the entire Bootstrap framework, it's easy to separate what you need from the rest.
For a quick and simple sticky navigation bar (with none of the more involved extras, such as drop-down menus, etc.), you can use the following CSS:
#bar {
position:fixed;
top:0;
left:0;
right:0;
height:36px;
background: black;
}
... and then add whatever you need to it, e.g.
<div id=bar>
<img class=bar-left src=logo.png />
<div class=bar-right>Login button!</div>
</div>
and the CSS:
.bar-left {
float:left;
}
.bar-right {
float:right;
}
This works well enough. As for jQuery, you could use it to dynamically add elements to the navbar with its .append() and .prepend() methods.