We Keep Coding

How can I position a generated element beside the original button/link?

I would like to show the three social elements generated by the "social" link on the left of the same "social" link after clicking on it.
So, I would like to get this IN THE SAME LINE like after clicking on "social":
FACEBOOK TWITTER EMAIL SOCIAL
Thank you in advance for your help!
$(document).ready(function () {
$(".icon-social-1", this).on("click", function (e) {
e.preventDefault();
$(this).siblings(".subicons").toggle();
});
});
a.trigger {
color:#000;
cursor:pointer;
display:block;
margin-bottom:10px;
text-decoration:none;
}
.subicons
{
display:none;
}
li.list{
display:inline;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><strong>Show/hide on click:</strong></p>
<div class="socials click">
<ul>
<li>
<i>Social</i>
<ul class="subicons">
<li class="list">Facebook</li>
<li class="list">Twitter</li>
<li class="list">e-mail</li>
</ul>
</li>
</ul>
</div>

jQuery's toggle() function show element with the CSS display: block property, which will not achieve what you want. Use the css() function or toggleClass() function instead.
JavaScript:
$(this).siblings(".subicons").toggleClass('hide');
CSS:
.subicons{
display:inline;
padding-left:0;
}
.subicons.hide {
display:none;
}
$(document).ready(function () {
$(".icon-social-1", this).on("click", function (e) {
e.preventDefault();
$(this).siblings(".subicons").toggleClass('hide');
});
});
a.trigger {
color:#000;
cursor:pointer;
display:block;
margin-bottom:10px;
text-decoration:none;
}
.subicons
{
display:inline;
padding-left:0;
}
.subicons.hide
{
display:none;
}
li.list{
display:inline;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><strong>Show/hide on click:</strong></p>
<div class="socials click">
<ul>
<li>
<ul class="subicons hide">
<li class="list">Facebook</li>
<li class="list">Twitter</li>
<li class="list">e-mail</li>
</ul>
<i>Social</i>
</li>
</ul>
</div>

Try this:
$(document).ready(function () {
$(".icon-social-1", this).on("click", function (e) {
e.preventDefault();
$(this).siblings(".subicons").toggle();
});
});
a.trigger {
color:#000;
cursor:pointer;
display:block;
margin-bottom:10px;
text-decoration:none;
}
.subicons
{
display:inline-block;
}
li.list{
display:inline;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><strong>Show/hide on click:</strong></p>
<div class="socials click">
<i>Social:</i>
<div class="subicons" style="display:none">
Facebook
Twitter
e-mail
</div>
</div>

.subicons {
display: none;
padding-left: 0;
}
I think he wants to remove the padding caused by ul tag. UL tags have padding left by default.

.subicons {
padding-left: 0;
}
The above code will solve your issue.

Just move sublist before the hyperlink so they're in the correct order already and then set display: inline-block on the subicons list.
.subicons {
display: inline-block;
}
<li>
<ul class="subicons">
<li class="list">Facebook</li>
<li class="list">Twitter</li>
<li class="list">e-mail</li>
</ul>
<i>Social</i>
</li>

If you don't want to change the order of the html and want the "social" link to stay in one place you can use absolute positioning for the social links. Ensure there's a parent that's positioned, in this case I chose .socials. Also, a.trigger wasn't doing anything.
$(document).ready(function() {
$(".icon-social-1", this).on("click", function(e) {
e.preventDefault();
$(this).siblings(".subicons").toggle();
});
});
a.icon {
color: #000;
cursor: pointer;
display: block;
margin-bottom: 10px;
text-decoration: none;
padding-left: 170px;
}
.socials {
position: relative;
}
ul.subicons {
display: none;
position: absolute;
left: 0;
top: 0;
}
li.list {
display: inline;
}
li {
list-style: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><strong>Show/hide on click:</strong></p>
<div class="socials click">
<ul>
<li>
<i>Social</i>
<ul class="subicons">
<li class="list">Facebook</li>
<li class="list">Twitter</li>
<li class="list">e-mail</li>
</ul>
</li>
</ul>
</div>

Jquery .slideToggle navigation menu. All menus slide and I only want one to

I am trying to make a dropdown navigation and right now I am trying to get just one menu to dropdown but they all do. Here is all my code:
HTML:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Ramabhadra' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Khand:700' rel='stylesheet' type='text/css'>
<link rel='stylesheet' href='style.css'/>
<script src='script.js'></script>
</head>
<body>
<div class="header">
<ul class="cats">
<li class="listItems" id="home">Home</li>
<li class="listItems" id="dashboard">Dashboard</li>
<li class="listItems" id="contactUs">Contact Us</li>
</ul>
</div>
<div class='dropdownHome'>
<ul class="catLists">
<li class="catListItem">Event Calender</li><br>
<li class="catListItem">Bookings</li><br>
<li class="catListItem">Picture Gallery</li><br>
<li class="catListItem">Login</li><br>
<li class="catListItem">Sign Up</li>
</ul>
</div>
<div class="dropdownDashboard">
<ul class="catLists">
<li class="catListItem">Saved Info</li><br>
<li class="catListItem">Friends</li><br>
<li class="catListItem">Document</li><br>
<li class="catListItem">Profile</li><br>
<li class="catListItem">Account</li>
</ul>
</div>
<div class="dropdownContactUs">
<ul class="catLists">
<li class="catListItem">Email</li><br>
<li class="catListItem">Forum</li><br>
<li class="catListItem">Phone-numbers</li><br>
<li class="catListItem">Facebook</li><br>
<li class="catListItem">Twitter</li>
</ul>
</div>
</body>
</html>
CSS:
.header {
background-color:black;
height:50px;
border-radius:10px;
z-index:1;
}
li {
color:white;
display:inline;
width:100%
}
.cats {
padding:6px;
width:100%;
font-size:29px;
font-family: 'Khand', sans-serif;
}
.cats .listItems:hover {
width:100px;
font-size:29px;
font-family: 'Khand', sans-serif;
color:#96F29C;
display:inline;
position:relative;
padding-left:70px;
}
.cats .listItems:active {
width:100px;
font-size:29px;
font-family: 'Khand', sans-serif;
color:#318A29;
display:inline;
position:relative;
padding-left:70px;
}
.listItems {
padding:70px;
}
.dropdownHome {
height:200px;
width:180px;
background-color:#9E9E9E;
position:relative;
left:18px;
bottom:10px;
border:2px solid black;
z-index:-1;
border-radius:13px;
}
.dropdownDashboard {
height:200px;
width:180px;
background-color:#9E9E9E;
position:relative;
right:290px;
bottom:214px;
border:2px solid black;
z-index:-1;
float:right;
border-radius:13px;
}
.dropdownContactUs {
height:200px;
width:180px;
background-color:#9E9E9E;
position:relative;
left:140px;
bottom:214px;
border:2px solid black;
z-index:-1;
float:right;
border-radius:13px;
}
.catLists {
font-size:18px;
text-align:center;
position:relative;
right:20;
font-family: 'Ramabhadra', sans-serif;
}
.catListItem {
color:black;
}
Javascript:
$(document).ready(function(){
$('#home').click(function(){
$('.dropdownHome').slideToggle('slow');
});
});
My question was originally something different but now that I fixed my other problem I need to know how to fix this. Another thing that I assume will get fixed with my original problem is that when the other two dropdown menus slide up (the ones that are not supposed to) they go above the header div. It is hard to explain but you will notice what I mean if you put it in a text editor and run it then click the home option. If this is something I have to fix separately please tell me how. Thank you.

If you can find a way to position .dropdownContactUs and .dropdownDashboard without using floats, they'll stop moving up and down with the dropdownHome. The reason they're scrolling up now is because with them being floated and them being relatively position to their container (body), the container only goes down far enough to contain .dropdownHome which means when it moves up, they have to move up too. Remember, when using floats, it takes the elements out of the flow of the document which means they don't effect the size of any elements on the page. In turn, they can be effected by where everything else is positioned.

How to change visibility with onclick

Hi I'm new to Javascript and since there is no onclick for css I need a little help.
This is my html:
<div id="dropnav">
<ul>
<li><a>Navigation</a>
<ul>
<li>Home
</li>
<li>Paintings
</li>
<li>Contact
</li>
<li>Bio
</li>
</ul>
</li>
</ul>
</div>
and this is my css:
#dropnav {
position:relative;
z-index:100;
top:-60px;
left:18%;
background-size:18%;
}
#dropnav ul {
padding:0px;
margin:0px;
}
#dropnav ul li {
display:inline;
float:left;
width:68.5%;
list-style-type:none;
border-style:solid;
border-width:1px;
font-family:arial;
height:50px;
}
#dropnav ul li a {
background-color:#808080;
color:#FFFFFF;
text-decoration:none;
line-height:50px;
display:block;
padding-left:36.2%;
width:63.8%;
}
#dropnav ul li a:hover {
background-color:#666666;
}
#dropnav ul li ul li {
width:99.8%;
}
#dropnav ul li ul li a{
background-color:#666666;
}
#dropnav ul li ul li a:hover {
background-color:#333333;
}
#dropnav ul li ul {
visibility:hidden;
}
#dropnav ul li:onclick ul {
visibility:visible;
}
Now I need the :onclick to work so if you could fix it that would be great. Thanks for your help

One way to change visibility onclick is by adding an event attribute to your html tag:
onclick="this.style.visibility='hidden';"
For example, here is your navigation bar with disappearing links:
<div id="dropnav">
<ul>
<li><a>Navigation</a>
<ul>
<li>Home
</li>
<li>Paintings
</li>
<li>Contact
</li>
<li>Bio
</li>
</ul>
</li>
</ul>
</div>

Drop this (it's useless):
#dropnav ul li:onclick ul {
visibility:visible;
}
Add This:
#dropnav ul li.open ul {
visibility:visible;
}
JS:
$('#dropnav ul li').click(function(){
$(this).addClass('open');
});
Just adding a class, which can be further dealt with in plain CSS. This way your application won't be bound by any strict laws.

You can do this with pure css3 by abusing the :not pseudo class. For example you can trigger an animation after an onclick has happened.
Click
<style>
#btn:not(:active) {
/* now keep red background for 1s */
transition: background-color 1000ms step-end;
}
#btn:active {
background: red;
}
</style>
Try it - http://jsfiddle.net/WG4Sf/
Here is a good article on CSS click events and if you should use them. http://www.vanseodesign.com/css/click-events/

You can do something like this
<html>
<head>
<script type="text/javascript">
function change()
{
document.getElementById("d").style.visibility="hidden";
}
</script>
</head>
<body>
Click Me<br/>
<div id="d">This is just example</div>
</body>
</html>

Try this:
$('#dropnav ul li').click(function() {
$(this).parent().css('visibility','visible');
})

try this.
:active is ur required css property
WORKING SAMPLE
I have just changed the visibility property for my convinience. U can change it to what u need exactly.

How to auto-scroll images horizontally in responsive design

So i have this site: http://onthemouse.com/. I have my portfolio images in a grid like formation using the <li> tag on the front page. I need them to align side by side and scroll horizontally automatically, maybe using javascript or jquery (no other libraries, please). It's fine if it has a scrollbar as well. I've tried something like this:
.portfolio li {
width: 438px !important;
display:inline !important;
}
and then
<ul id="thumbs" style="width:100%;list-style:none;display:block;white-space:nowrap;">
<li class="portfolio" style="width: 438px; opacity: 1;display:inline;">
<a href="BLAHBLAH" title="BLAHBLAH">
<img src="BLAHBLAH" alt="" title="" >
</a>
</li>
that's basically just a stripped down version if you vist the page theres a lot more tags associated. but even this code alone (with all the tags closed obviously) didn't seem to work..

You could consider using Flexislider for your problem here. It's a responsive slider.
http://www.woothemes.com/flexslider/

remove display:inline, width from style attr of your li
<ul id="thumbs" style="list-style:none;">
<li class="portfolio" style="opacity: 1;">
<a href="BLAHBLAH" title="BLAHBLAH">
<img src="BLAHBLAH" alt="" title="" >
</a>
</li>
#works, #wrapper {
overflow: visible;
}
body {
overflow-x:auto;
}
#thumbs .portfolio {
display:inline-block;
width: 438px !important;
float:none !important;
}
#thumbs {
white-space:nowrap;
}
/* for ie 7*/
*:first-child+html #thumbs .thumb {
display:inline;
zoom:1;
}
/* for ie 6*/
*html #thumbs .thumb {
display:inline;
zoom:1;
}

Vertical sliding / toggle menu

I'd like to use the vertical sliding/toggle menu, please see my code below, at the moment the menu toggles only when you click on the + sign, please see the code below.
I'm trying to work out a way when you click on the category name eg Posts and the sub menu would open (same functionality with the +) and the page would go to Posts page. And when you click on the + sign, the function and the page stay the same.
How can I target this task? Your help / suggestion is appreciated.
Thank you!
<html>
<head>
<style type="text/css">
body{background:#CCC;}
#container{margin:0 auto; background:white; border:1px solid #999; width:400px; padding:20px; -moz-border-radius:10px;-webkit-border-radius:10px; overflow:hidden;}
#menu {text-align:left;}
/*Toggle Area*/
#menu .toggle {float:right;width:9px; padding:5px; cursor:pointer; border-top:1px solid white; border-left:1px solid #E0E0E0; color:#999;}
#menu ul.navmenu li:first-child .toggle{border-width:0 0 0 1px;}
/*Menu Setup*/
#menu ul{padding:0; margin:0; width:150px;}
#menu ul ul{border:1px solid #CCC;overflow:hidden;}
#menu ul.navmenu li {margin:0; list-style:none;float:left;}
#menu ul.navmenu li li {float:none;}
/*Links*/
#menu ul.navmenu a, #menu ul.navmenu a:visited {text-decoration:none; padding:5px; display:block; color:#008FDD;}
#menu ul.navmenu ul.submenu a:hover{background:#FFF4D2; color:#333;}
/*Heading Outer div*/
#menu ul.navmenu .menutop{border:1px solid #CCC; border-width:0 1px; overflow:hidden; width:150px; background:#F9F9F9; }
/*Header Links*/
#menu ul.navmenu .menutop a{width:120px;float:left;margin:0 0 1px 0; border-top:1px solid white;}
/*Header Link Hover*/
#menu ul.navmenu .menutop a:hover{color:#333;}
/*Removes white border for the first header*/
#menu ul.navmenu li:first-child .menutop a {border-width:0px;}
/*Single Menu Width Fix*/
#menu ul.navmenu .menusingle a{width:140px;}
/*Border Radius and Special Border Width*/
#menu ul.navmenu li:first-child .menutop{border-width:1px 1px 0 1px; -moz-border-radius:5px 5px 0 0;-webkit-border-top-left-radius:5px;-webkit-border-top-right-radius:5px;}
#menu ul.navmenu li:last-child .menutop{border-width:0px 1px 1px 1px; -moz-border-radius:0 0 5px 5px; -webkit-border-bottom-left-radius:5px;-webkit-border-bottom-right-radius:5px;}
#menu ul.navmenu li:last-child ul.submenu{-moz-border-radius:0 0 5px 5px;-webkit-border-bottom-left-radius:5px;-webkit-border-bottom-right-radius:5px;}
#menu ul.navmenu li:last-child .menutop-open{-moz-border-radius:0;-webkit-border-radius:0px; border-width:0 1px;}
</style>
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript">
</script>
<script type="text/javascript">
$(document).ready(function(){
hideMenus();
$('.toggle').click(function(){
var menu = $(this);
hideMenus();
if (menu.hasClass('toggle-open')) {
menuHide(menu);
}else{
menuShow(menu);
}
});
});
function hideMenus(){
$('.toggle').each(function(){
menuHide($(this));
});
}
function menuHide(menu){
menu.removeClass('toggle-open').addClass('toggle-closed').empty('').append('+').parents('li').children('ul').slideUp(250);
menu.parent('.menutop').removeClass('menutop-open').addClass('menutop-closed');
}
function menuShow(menu){
menu.parent('.menutop').removeClass('menutop-closed').addClass('menutop-open');
menu.removeClass('toggle-closed').addClass('toggle-open').empty('').append('–').parents('li').children('ul').slideDown(250);
}
</script>
</head>
<body>
<div id="container">
<div id="menu">
<ul class="navmenu">
<li><div class="menutop">Posts<div class="toggle">+</div></div>
<ul class="submenu">
<li>Add New</li>
<li>Tags</li>
</ul>
</li>
<li><div class="menutop">Pages<div class="toggle">+</div></div>
<ul class="submenu">
<li>Add New</li>
<li>Edit</li>
</ul>
</li>
<li><div class="menutop menusingle">Comments</div></li>
<li><div class="menutop">Users<div class="toggle">+</div></div>
<ul class="submenu">
<li>Manage</li>
<li>Add New</li>
<li>Profile</li>
</ul>
</li>
</ul>
</div></div>
</body>
</html>

This is code I have used to do exactly that, except I used arrow images instead of + and - but you should be able to modify it. Hope it helps!
Edit:
I've put the code below onto JSFiddle so you can try it out: http://jsfiddle.net/CrxAg/3/
HTML:
<div id="menu">
<div class="submenublock" id="submenu1"><h3>Category1</h3>
<ul>
<li>option1</li>
<li>option2</li>
</ul>
</div>
<div class="submenublock" id="submenu2"><h3>Category2</h3>
<ul>
<li>option1</li>
<li>option2</li>
</ul>
</div>
</div>
JS:
$(document).ready(function(){
$('div.submenublock > ul').hide();
$("div.submenublock > h3").css("background", "url(images/menuarrowdown.gif) no-repeat right bottom");
$('div.submenublock > h3').click(function() {
$(this).next().slideToggle('fast',function(){
//set arrow depending on whether menu is shown or hidden
if ($(this).is(':hidden')) {
$(this).prev().css("background", "url(images/menuarrowdown.gif) no-repeat right bottom");
} else {
$(this).prev().css("background", "url(images/menuarrowup.gif) no-repeat right bottom");
}
return false;
});
});
/* change appearance of h3 element on hover to make it look like a link */
$('div.submenublock > h3').hover(over, out);
function over(event) {
$(this).find("a").css("color", "#663");
$(this).css("cursor", "pointer");
}
function out(event) {
$(this).find("a").css("color", "");
$(this).css("cursor", "default");
}
/*end hover code*/
});