Develop Reference

Sidenav bar should open from the right instead of from the left

I have this simple javascript that opens a sidebar for me but I want it on the right side and not on the left side. Refer to the gif and code below. Anyone knows what I need to do to fix this? Any explanation that you might add would be very much appreciated so I can better understand this code. I tried to fix it myself but I haven't been able to find what exactly determines on which side of the screen it appears.
.user-menu
{
padding: 0px 10px;
vertical-align: middle;
height: 100%;
color: white;
font-family: 'Segoe UI','Helvetica Neue',Helvetica,Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans',sans-serif;
font-size: 15px;
cursor: pointer;
display: block;
float: right;
}
.user-menu li
{
padding: 10px;
}
.user-menu:hover
{
color:white; background:#292929;
-o-transition:color .25s ease-out, background .25s ease-in;
-ms-transition:color .25s ease-out, background .25s ease-in;
-moz-transition:color .25s ease-out, background .25s ease-in;
-webkit-transition:color .25s ease-out, background .25s ease-in;
/* ...and now override with proper CSS property */
transition:color .25s ease-out, background .25s ease-in;
background-color: #185886;
}
.button
{
background: none;
color: inherit;
border: none;
padding: 0;
font: inherit;
cursor: pointer;
outline: inherit;
}
.navigationR
{
float: left;
position: absolute;
width: 6%;
height: calc(10vh);
background: #333;
top: 40px;
left: -100%;
transition: .25s;
display: grid;
}
.navigationR span
{
display: block;
text-align: center;
border-bottom: 1px solid rgba(0,0,0,.2);
}
.navigationR.active
{
left: 0;
}
.navigationR li
{
height: 100%;
display: block;
float: left;
padding: 10px 10px;
vertical-align: middle;
height: 100%;
color: white;
font-family: 'Segoe UI','Helvetica Neue',Helvetica,Roboto,Oxygen,Ubuntu,Cantarell,'Fira Sans','Droid Sans',sans-serif;
font-size: 15px;
}
.navigationR span:hover
{
color:white; background:#292929;
-o-transition:color .25s ease-out, background .25s ease-in;
-ms-transition:color .25s ease-out, background .25s ease-in;
-moz-transition:color .25s ease-out, background .25s ease-in;
-webkit-transition:color .25s ease-out, background .25s ease-in;
/* ...and now override with proper CSS property */
transition:color .25s ease-out, background .25s ease-in;
background-color: #185886;
}
<ul class="navigationR">
<span>
<form action="/ucp/includes/logout.inc.php" method="post">
<button class="button" type="submit" name="logout-submit">
<li><i class="fa fa-sign-out"></i> Log out
</button>
</form>
</li>
</span>
<span>
<form action="/ucp/includes/logout.inc.php" method="post">
<button class="button" type="submit" name="logout-submit">
<li><i class="fa fa-sign-out"></i> Log out
</button>
</form>
</li>
</span>
</ul>
<div class="user-menu">
<li> <?php echo '<i class="fa fa-user"></i>' . ' ' . $_SESSION["userUid"]; ?> </li></div>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.user-menu').click(function(){
$('.navigationR').toggleClass('active')
})
})
</script>

Resolved this by putting float: right instead of left on the following CSS classes:
.navigationR {
float: right;
right: -100%; }
.navigationR li {
float: right; }
.navigationR.active {
right: 0; }
Thanks a lot everyone for pointing it out, simple issues like these take me way too long to discover.

Main reason is the following class. needs to be right instead of left.
.navigationR.active
{
right: 0;
}
Also you might need float:right on .navigationR li too.

Change background-image on li hover; how to change back when I get of the li? [duplicate]

This question already has answers here:
Removing Class with Mouse Exit
(7 answers)
Closed 5 years ago.
I want to change the background image of a div when I hover over a li element. This I have figured out, as you can see in this https://jsfiddle.net/7zpt7g6b/! :) The only thing is that I want to change the pic back to the original CSS when I hover of the li element (hope I'm being clear). Now the div of the background-image keeps having the image of the last li I have hovered on. I want this to change back
My HTML
<section class="content">
<div class="projects">
<ul>
<li data-background="https://static.pexels.com/photos/7045/pexels-photo.jpeg">CASE I</li>
<li data-background="https://static.pexels.com/photos/132037/pexels-photo-132037.jpeg">CASE II</li>
<li data-background="https://iso.500px.com/wp-content/uploads/2016/11/stock-photo-159533631-1500x1000.jpg">CASE III</li>
<li data-background="https://static.pexels.com/photos/7045/pexels-photo.jpeg">CASE IV</li>
</ul>
</div>
<div id="background">
<h1 style="color:#fff;">RICHIE / WEB DESIGN / UI / UX / BLABLABLA</h1>
</div>
</section>
My CSS
.projects ul{
list-style-type:none;
}
.projects a{
display:inline-block;
padding:10px;
text-decoration: none;
color:#434343;
font-size: 20px;
text-transform: uppercase;
font-family: 'Sorts Mill Goudy', serif;
line-height: 20px;
text-indent: -50px;
}
.projects a:hover{
}
.projects ul:hover li {
opacity: .5;
transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-webkit-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
}
.projects ul li:hover {
opacity: 1;
transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-webkit-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
}
#background {
background: url("https://www.aviary.com/img/photo-landscape.jpg");
width: 50%;
height: 100%;
position: fixed;
background-size: cover;
padding:50px;
background-position: center 30%;
}
My JS
var links = $(".projects li");
links.on("mouseover",function(){
var url = $(this).attr("data-background");
$("#background").css("backgroundImage","url("+url+")");
});
It's probably just a simple edit on the Jquery, but I can't seem to find out what I have to add/change.
Thank you! I hope I'm being clear (if not I'd love to explain more)

You can add this mouseout function to the JS, using the URL of the background-image in your original CSS rule:
links.on("mouseout",function(){
var url = $(this).attr("data-background");
$("#background").css("backgroundImage","url('https://www.aviary.com/img/photo-landscape.jpg')");
});
https://jsfiddle.net/t0n0u5yv/

Here you go! use .mouseleave()
var links = $(".projects li"),
sDefaultUrl = 'https://www.aviary.com/img/photo-landscape.jpg';
links
.mouseover(function(){
var sUrl = $(this).attr("data-background");
$("#background").css("backgroundImage","url(" + sUrl + ")");
})
.mouseleave("mouseover",function(){
var url = $(this).attr("data-background");
$("#background").css("backgroundImage","url(" + sDefaultUrl + ")");
});
.projects ul{
list-style-type:none;
}
.projects a{
display:inline-block;
padding:10px;
text-decoration: none;
color:#434343;
font-size: 20px;
text-transform: uppercase;
font-family: 'Sorts Mill Goudy', serif;
line-height: 20px;
text-indent: -50px;
}
.projects a:hover{
}
.projects ul:hover li {
opacity: .5;
transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-webkit-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
}
.projects ul li:hover {
opacity: 1;
transition: all 0.3s ease-in-out 0s;
-moz-transition: all 0.3s ease-in-out 0s;
-webkit-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
}
#background {
background: url("https://www.aviary.com/img/photo-landscape.jpg");
width: 50%;
height: 100%;
position: fixed;
background-size: cover;
padding:50px;
background-position: center 30%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="content">
<div class="projects">
<ul>
<li data-background="https://static.pexels.com/photos/7045/pexels-photo.jpeg">CASE I</li>
<li data-background="https://static.pexels.com/photos/132037/pexels-photo-132037.jpeg">CASE II</li>
<li data-background="https://iso.500px.com/wp-content/uploads/2016/11/stock-photo-159533631-1500x1000.jpg">CASE III</li>
<li data-background="https://static.pexels.com/photos/7045/pexels-photo.jpeg">CASE IV</li>
</ul>
</div>
<div id="background">
<h1 style="color:#fff;">RICHIE / WEB DESIGN / UI / UX / BLABLABLA</h1>
</div>
</section>

You can use jQuery's mouseleave event.
https://api.jquery.com/mouseleave/
links.mouseleave(function(){
var url = $(this).attr("data-background");
$("#background").css("backgroundImage","url("+[your-original-url]+")");
});

How to make one item selected at a time?

At the default state I want 'ALL' to be selected. Click on another item will change all other classes so that 'this' has the class and the others don't. My problem is why can't 'ALL' be re-selected?
jsFiddle: http://jsfiddle.net/u5g9vLkx/
HTML:
<ul class="nav2">
<li>ALL</li>
<li>PERSONAL</li>
<li>PHOTOGRAPHY</li>
<li>WORK</li>
</ul>
CSS:
body{
background: #000000;
}
.nav2{
float: none;
list-style-type:none;
overflow: hidden;
clear: both;
text-align: left;
display: inline-flex;
}
.nav2 li{
clear: both;
overflow: hidden;
margin-left: 10px;
}
.orange{
opacity: .5;
color: #FF9000;
text-decoration: none;
display: block;
text-align: center;
padding: 8px;
border: 1px solid #000;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
.orange:hover{
opacity: 1;
color:#000000;
background: #FF9000;
}
.orange2{
color: #FF9000;
text-decoration: none;
display: block;
text-align: center;
padding: 8px;
border: 1px solid #FF9000;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
}
.orange2:hover{
color:#000000;
background: #FF9000;
}
Javascript:
$('a.orange').click(function(){
$('a.orange2').addClass('orange');
$('a.orange').removeClass('orange2');
$(this).removeClass('orange');
$(this).addClass('orange2');
});

In your Javascript code you are applying the onClick listener only to a.orange (a elements with the class orange)
$('a.orange').click(function(){ ... });
Since the "ALL" menu entry does not have orange, but orange2 as its class, it is not affected by that.
You can fix this by including a.orange2 in the selector:
$('a.orange, a.orange2').click(function(){ ... });

Maybe something like that :
<ul class="nav2">
<li>ALL</li>
<li>PERSONAL</li>
<li>PHOTOGRAPHY</li>
<li>WORK</li>
</ul>
$('a.orange2').click(function(){
$('a.orange2').removeClass('orange2').addClass('orange');
$(this).addClass('orange2').removeClass('orange');
});
http://jsfiddle.net/khzehpfx/

jQuery sub-menu Accordion

I'm having a bit of difficulty trying to isolate quite a few things with this accordion. One, I can't seem to get anything other than 'slideToggle' to work, which seems odd to me. I have one ul and a sub ul. I want only the active instance of the sub-menu to be viewable when the parent ul li is clicked.
Here's my CSS
.ca-menu {
padding: 0;
margin-bottom:1px;
width: 300px;
}
ul.ca-menu li {
width: 300px;
overflow: hidden;
display: block;
background: #001e47;
-webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
margin-bottom:0px;
border-left: 10px solid #cfcfcf;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
ul.ca-menu li:last-child {
margin-bottom: 0px;
}
ul.ca-menu li a {
text-align: left;
display: block;
width: 100%;
height: 100%;
color: #cfcfcf;
position:relative;
}
ul.ca-icon {
font-family:'FontAwesome';
font-size: 25px;
text-shadow: 0px 0px 1px #333;
line-height: 40px;
position: absolute;
top:10px;
width: 90px;
left: 0px;
text-align: center;
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
transition: all 300ms linear;
}
.ca-content {
position: relative;
left: 70px;
width: 230px;
height: 20x;
top: 5px;
line-height:6px;
}
.ca-main {
font-size: 12px;
font-family: Century Gothic;
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
transition: all 300ms linear;
line-height:4px;
}
.ca-sub {
font-size: 16px;
color: #666;
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
transition: all 300ms linear;
font-family:myriad pro;
}
ul.ca-menu li:hover {
border-color: #001e47;
background: #cfcfcf;
}
ul.ca-menu li:hover .ca-icon {
color: #001e47;
text-shadow: 0px 0px 1px #001e47;
font-size: 30px;
}
ul.ca-menu li:hover .ca-main {
color: #001e47;
font-size:20px;
}
ul.ca-menu li:hover .ca-sub {
color: #fff;
font-size: 12px;
}
ul.ca-menu ul.sub-menu li {
background:#fff;
width:100%;
position:relative;
left:-50px;
display:block;
}
ul.ca-menu ul.sub-menu {
background:#fff;
width:100%;
}
And the jquery
$(document).ready(function () {
$('.sub-menu li').hide();
$(".ca-menu li").click(function () {
$(this).next(".sub-menu").siblings("li").slideUp();
});
});
And here's a js fiddle link: http://jsfiddle.net/fsew7sh1/

i correct your code, just put:
$(document).ready(function () {
$('.sub-menu li').hide();
$(".ca-menu li").click(function () {
$(this).find(".sub-menu").slideDown();
$(this).siblings("li").find(".sub-menu").slideUp();
});
});
Or, put the slideUp in the slideDown callback:
var l;
$('.sub-menu li').hide();
$(".ca-menu li").click(function () {
l = $(this).siblings("li").find(".sub-menu");
$(this).find(".sub-menu").slideDown(function(){
l.slideUp();
});
});
Here the examples: jsfiddle or jsfiddle with callback.

Hide a div on load and showing it on hover of another div

I have a div that have img with id and another div inside it
I want to hide the info div (you can see in code) on load of the page and then show it again on hover of the img - I also want the info div to slide right nicely..
Thanks in advance for helping :)
the HTML
<div class="wrapper">
<img id="logo" src="img/logo.png" alt="logo">
<div id="info">
info- blah <br>
blah & blah .<br>
email#gmail.com
</div>
</div>
The CSS
.wrapper{
float: left;
opacity: 0.4;
margin-top: -30px;
margin-left: 5px;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
#logo {
width: 39px;
}
.wrapper:hover{
opacity: 0.6;
}
#info {
margin-left: 2px;
margin-top: 5px;
float:right;
font-size: 9px;
}
What is the jQuery I need for this?

Here's one way to do it.
I don't know if that's what you wanted, but since you're already using CSS3, you don't need jQuery for that:
.wrapper {
float: left;
opacity: 0.4;
margin-left: 5px;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
overflow:visible;
position:relative;
}
.wrapper:hover {
opacity: 0.6;
}
#info {
margin-left: 2px;
margin-top: 5px;
float:right;
font-size: 9px;
opacity:0;
transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
left:50%;
position:absolute;
top:0;
}
.wrapper:hover #info {
left:100%;
opacity:1;
}
http://jsfiddle.net/Y2B2v/

Place your .wrapper with the same image height. Place an overflow:hidden to hide text which is under.
After you must just change height in .wrapper:hover to show the text.
If you want a nice transition, you can adjust that with
.wrapper:hover{
opacity: 0.6;
height:100px;
transition: height 1;
-webkit-transition: height 1s; /* Safari */
}
like this : http://jsfiddle.net/AW9qh/2/