We Keep Coding

How do I reuse an HTML element on the same page using jQuery?

I created a div element called main-middle-column-container in my HTML and styled it with CSS. Basically, main-middle-column-container will create a twitter-like message box that will have a name, date/time, and the message.
I want to reuse main-middle-column-container and all the code inside of it with jQuery so that when new data comes in, it will use a fresh main-middle-column-container as a template to add in the new values (like how twitter would work). When new data comes in, #username, date/time, and This is a random message. #random will be replaced with the incoming data or leave the elements empty and have the new data fill it in.
I thought about using $('.main-middle-column-container').clone().appendTo('.main-middle-column-wrapper'); but that will keep double cloning it (1 box -> 2 box -> 4 box -> 8 box...) instead of cloning it once. I also have an issue of getting rid of main-middle-column-container before I receive any data because I don't want an empty box on the website I am trying to create. I want main-middle-column-container to be created right when I get some kind of data/message.
CSS and HTML (message box)
.main-middle-column-wrapper{
display: flex;
flex-direction: column;
width: 49%;
}
.main-middle-column-container{
width: 100%;
}
.main-middle-column{
font-family: "Helvetica Neue", Helvetica, Arial ,sans-serif;
font-size: 14px;
height: auto;
width: 100%;
background-color: white;
padding: 9px 12px;
z-index: -2;
box-shadow: 0 0 2px 0 lightgray;
position: relative;
}
.main-middle-column:hover{
background-color: hsl(200, 23%, 96%);
}
.tweet-pic-wrapper{
position: absolute;
top: 5px;
}
.tweet-pic-container{
position: relative;
height: 48px;
width: 48px;
border: 3px solid transparent;
border-radius: 100%;
overflow: hidden;
z-index: 1;
display: inline-block;
}
.tweet-pic{
position: absolute;
margin: 0 auto;
height: 100%;
left: -6px;
width: auto;
}
.title-account-time{
margin-left: 55px;
}
.msg-title{
font-weight: bold;
}
.msg-acc-name{
color: #657786;
}
.msg-acc-name:hover{
cursor: pointer;
}
.msg-date{
color: #657786;
margin-top: 1px;
}
.tweet-msg{
margin-left: 55px;
margin-top: 5px;
}
<div class="main-middle-column-wrapper">
<div class="main-middle-column-container">
<div class="main-middle-column">
<div class="tweet-pic-wrapper">
<div class="tweet-pic-container">
<img src="Picture of the Moon.jpeg" class="tweet-pic" alt="Picture of the moon.">
</div>
</div>
<div class="title-account-time">
<span class="msg-title">My Twitter</span>
<span class="msg-acc-name">#username</span>
<div class="msg-date">date/time</div>
</div>
<div class="tweet-msg">
This is a random message. #random
</div>
</div>
</div>
</div>

I think i have a solution for you, you can create a 'template' and retrieve that template with jquery.
If you put this in your main html file
<script id="hidden-template" type="text/x-custom-template">
<div class="main-middle-column-wrapper">
<div class="main-middle-column-container">
<div class="main-middle-column">
<div class="tweet-pic-wrapper">
<div class="tweet-pic-container">
<img src="Picture of the Moon.jpeg" class="tweet-pic" alt="Picture of the moon.">
</div>
</div>
<div class="title-account-time">
<span class="msg-title">My Twitter</span>
<span class="msg-acc-name">#username</span>
<div class="msg-date">date/time</div>
</div>
<div class="tweet-msg">
this is a story all about how my life got flipped turned upside down and id like to take a minute and just sit right there id like to tell you how i became a prince in a town called belair.
</div>
</div>
</div>
</div>
</script>
You can get the content with jquery like this
var template = $('#hidden-template').html();
Now you have your html 'template' in your javascipt, now your can create more than one of these elements.
$('#target').append(template);
Or you can use a better/simpler method with plain javascript
const card = ({ img_alt, img_src, title, username, date, msg }) => `
<div class="main-middle-column-wrapper">
<div class="main-middle-column-container">
<div class="main-middle-column">
<div class="tweet-pic-wrapper">
<div class="tweet-pic-container">
<img src="${img_src}" class="tweet-pic" alt="${img_alt}">
</div>
</div>
<div class="title-account-time">
<span class="msg-title">${title}</span>
<span class="msg-acc-name">#${username}</span>
<div class="msg-date">${date}</div>
</div>
<div class="tweet-msg">${msg}</div>
</div>
</div>
</div>
`;
You can use this as a function to create your elements dynamically with all kinds of data.

Create a function that returns a Template Literal with the desired HTML markup structure. Map your tweets and insert them into a target parent:
const tweets = [
{
_id: 321,
pic: "https://placehold.it/80x80/0bf",
title: "My Twitter",
name: "#username",
date: "2020-01-18",
msg: "this is a story"
},
{
_id: 231,
pic: "https://placehold.it/80x80/f0b",
title: "My alter Twitter",
name: "#user",
date: "2020-01-19",
msg: "Again, another story"
}
];
const newTweet = tweet => `<div class="main-middle-column">
<div class="tweet-pic-wrapper">
<div class="tweet-pic-container">
<img src="${tweet.pic}" class="tweet-pic" alt="${tweet.title}">
</div>
</div>
<div class="title-account-time">
<span class="msg-title">${tweet.title}</span>
<span class="msg-acc-name">${tweet.name}</span>
<div class="msg-date">${tweet.date}</div>
</div>
<div class="tweet-msg">${tweet.msg}</div>
</div>`;
const populateNewTweets = (tweets, parent) => {
if (!tweets.length) return;
$('<div>', {
class: 'main-middle-column-container',
appendTo: parent,
append: tweets.map(newTweet)
});
};
populateNewTweets(tweets, '.main-middle-column-wrapper');
.main-middle-column-wrapper{
display: flex;
flex-direction: column;
width: 49%;
}
.main-middle-column-container{
width: 100%;
}
.main-middle-column{
font-family: "Helvetica Neue", Helvetica, Arial ,sans-serif;
font-size: 14px;
height: auto;
width: 100%;
background-color: white;
padding: 9px 12px;
z-index: -2;
box-shadow: 0 0 2px 0 lightgray;
position: relative;
}
.main-middle-column:hover{
background-color: hsl(200, 23%, 96%);
}
.tweet-pic-wrapper{
position: absolute;
top: 5px;
}
.tweet-pic-container{
position: relative;
height: 48px;
width: 48px;
border: 3px solid transparent;
border-radius: 100%;
overflow: hidden;
z-index: 1;
display: inline-block;
}
.tweet-pic{
position: absolute;
margin: 0 auto;
height: 100%;
left: -6px;
width: auto;
}
.title-account-time{
margin-left: 55px;
}
.msg-title{
font-weight: bold;
}
.msg-acc-name{
color: #657786;
}
.msg-acc-name:hover{
cursor: pointer;
}
.msg-date{
color: #657786;
margin-top: 1px;
}
.tweet-msg{
margin-left: 55px;
margin-top: 5px;
}
<div class="main-middle-column-wrapper"></div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

The best solution to this would be to use some kind of templating engine, for example Mustache. If that however is out of the question, the solution to your problem would be something like this:
jQuery(document).ready(function() {
/* this should store the container templates clone in a variable */
mainMiddleContainerTemplate = jQuery(".main-middle-column-container").get(0).clone();
/* this should remove every main middle container from the view, in case
you have multiple containers that are not templates, consider adding
an additional class to your template container */
jQuery(".main-middle-column-container").remove();
});
function addNewContainer(containerData) {
var newContainer = mainMiddleContainerTemplate.clone();
/** add and replace all the data needed on the newContainer **/
newContainer.find('.message-title').html(containerData.title);
newContainer.find('.msg-acc-name').html(containerData.accountName);
....
jQuery(".main-middle-container-wrapper").append(newContainer);
}
But still, I would advice you, to use a templating engine for these kinds of stuff.

$('.main-middle-column-container').first().clone().appendTo('.main-middle-column-wrapper');
The key is to select only one element to be cloned. First is as good as any other.

Issue showing a selected id

I am having an issue getting tabs to open based on the selection I am choosing. In the snippet you will see 4 boxes. If you click on box 1, I am wanting #marketing1 to open below it and so on.
The method I am using is to get the specific id of the button selection (the 1,2,3,4 box) and then declare a variable to just get the number. Then to add that number to the id of #marketing to show the appropriate section. I am not sure what I am doing wrong. No errors are showing.
Ps - I am also trying to add an .active class to the #marketing-service for when one of the selection boxes is clicked on to show my the active class (it creates a down arrow under the box. Am I implementing the .active wrong to the :before and :after?
//For tabs to stay active
$('.marketing-service').click(function() {
$('.marketing-service.active').removeClass('active');
$(this).toggleClass('active');
//To get the service display box to show
var item_number = $(this).attr('id').replace('marketing-tab', '');
/* $('html, body').animate({
scrollTop: $("#service-display-box").offset().top
}, 1500);*/
$('#marketing'+item_number).show().siblings('.marketing-section-wrap').hide();
});
.marketing-section-wrap, .marketing-section-wrap-main {
width: 100%;
height: auto;
padding: 80px 0;
border-bottom: 1px solid #EBEBEB;
}
.marketing-section-wrap {
display: none;
}
#marketing-services {
width: 95%;
margin: 0 2.5%;
}
.marketing-service {
display: inline-block;
width: 22%;
margin: 0 1%;
height: 400px;
background: #F0F0F0;
position: relative;
cursor: pointer;
}
.marketing-service:first-child {
margin-left: 0;
}
.marketing-service:last-child {
margin-right: 0;
}
.marketing-service:hover {
background: rgba(0, 255, 170, .4);
z-index: 1;
}
/*-- Down Arrow for boxes --*/
.marketing-service:after.active, .marketing-service:before.active {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
}
.marketing-service:after.active {
border-width: 0px;
margin-left: 0px;
border-color: rgba(136, 183, 213, 0);
border-right-color: #88b7d5;
margin-top: -30px;
}
.marketing-service:before.active {
border-color: #FFF;
border-top-color: #88b7d5;
border-width: 36px;
margin-left: -36px;
margin-top: 0;
}
.marketing-service-wrap {
padding: 10%;
width: 80%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="marketing-services">
<div class="marketing-service" id="marketing-tab1">
<div class="marketing-service-wrap total-center">
<h2 class="marketing-service-title">1</h2>
</div>
</div>
<div class="marketing-service" id="marketing-tab2">
<div class="marketing-service-wrap total-center">
<h2 class="marketing-service-title">2</h2>
</div>
</div>
<div class="marketing-service" id="marketing-tab3">
<div class="marketing-service-wrap total-center">
<h2 class="marketing-service-title">3</h2>
</div>
</div>
<div class="marketing-service" id="marketing-tab4">
<div class="marketing-service-wrap total-center">
<h2 class="marketing-service-title">4</h2>
</div>
</div>
</div>
<div id="marketing1">
<div class="marketing-section-wrap">
1
</div>
</div>
<div id="marketing2">
<div class="marketing-section-wrap">
2
</div>
</div>

Quite simple just try $('#marketing'+item_number).children().show() because marketing-section-wrap is display:none;
first run this to hide all marketing-section-wrap
$('.marketing-section-wrap').hide();
then this will show only the one which corresponds to this click.
$('#marketing'+item_number).children().show();

Swapping an image when a toggle has been clicked on

I have the following code where I added a plus symbol to one of my service titles. I was informed by someone that when that service is clicked on I should have a minus sign take its place to show that it can be minimized. I am unsure of how to swap out the plus sign when the description has been expanded. Does anyone have any ideas of how I could do that?
Here is a snippet. Click on one of the service names to see the description expand.
$('.service_wrapper').click(function() {
var thisDescription = $('.service_description', $(this));
// Hide all other descriptions
$('.service_description').not(thisDescription).hide();
// Toggle (show or hide) this description
thisDescription.slideToggle(500);
});
.service_wrapper {
border: 1px solid black;
margin: 15px;
width: 20%;
}
.service_list {
margin-left: 20%;
}
.service_title {
padding: 15px 12px;
margin: 0;
font-weight: bold;
font-size: 1em;
}
.service_title:hover {
background-color: gray;
color: blue;
cursor: pointer;
}
.service_description {
display: none;
padding: 8px 14px;
width: 100%;
margin-top: 10px;
font-size: .9em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="service_list">
<div class="service_wrapper">
<div class="service_title">
<img src="http://realtorcatch.com/icons/plusSymbol.png" alt="Service" style="width:10px;height:10px;">Floors</div>
<div class="service_description">The best floors!</div>
</div>
<div class="service_wrapper">
<div class="service_title">Roofs</div>
<div class="service_description">Your roof will be perfect!</div>
</div>
<div class="service_wrapper">
<div class="service_title">Siding</div>
<div class="service_description">mmmm siding.</div>
</div>
<div class="service_wrapper">
<div class="service_title">Paint</div>
<div class="service_description">Fabulous paint!</div>
</div>
<div class="service_wrapper">
<div class="service_title">Kitchen Remodels</div>
<div class="service_description">Pretty kitchen.</div>
</div>
</div>

Here is the working example, i change a little de html and Js
$('.service_wrapper').click(function() {
var thisDescription = $('.service_description', $(this));
var t = $(this);
if(t.hasClass('open'))
{
t.removeClass('open');
t.find('.status').html("+");
}else {
t.addClass('open');
t.find('.status').html("-");
}
// Hide all other descriptions
$('.service_description').not(thisDescription).hide();
// Toggle (show or hide) this description
thisDescription.slideToggle(500);
});
the working example

I'd suggest simply toggling a class to achieve this.
You can add the icon as a background image of a pseudo element inserted into the .service_title element. Then you can simply toggle a class in order to change the icon. Update the background image URLs accordingly. See the updated example for the modified jQuery; it's still only 5 lines.
The relevant CSS:
.service_title:before {
content: '';
background: url('http://i.stack.imgur.com/GC7i2.png') 0 0 / 10px 10px no-repeat;
width: 10px;
height: 10px;
display: inline-block;
vertical-align: middle;
}
.closed .service_title:before {
background-image: url('http://i.stack.imgur.com/ma4L4.png');
}
Updated Example:
$('.service_wrapper').click(function() {
var thisDescription = $('.service_description', $(this));
$('.service_description').not(thisDescription).hide().parent().removeClass('closed');
thisDescription.slideToggle(500).parent().toggleClass('closed');
});
.service_wrapper {
border: 1px solid black;
margin: 15px;
width: 20%;
}
.service_list {
margin-left: 20%;
}
.service_title {
padding: 15px 12px;
margin: 0;
font-weight: bold;
font-size: 1em;
}
.service_title:before {
content: '';
background: url('http://i.stack.imgur.com/GC7i2.png') 0 0 / 10px 10px no-repeat;
width: 10px;
height: 10px;
display: inline-block;
vertical-align: middle;
}
.closed .service_title:before {
background-image: url('http://i.stack.imgur.com/ma4L4.png');
}
.service_title:hover {
background-color: gray;
color: blue;
cursor: pointer;
}
.service_description {
display: none;
padding: 8px 14px;
width: 100%;
margin-top: 10px;
font-size: .9em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="service_list">
<div class="service_wrapper">
<div class="service_title">Floors</div>
<div class="service_description">The best floors!</div>
</div>
<div class="service_wrapper">
<div class="service_title">Roofs</div>
<div class="service_description">Your roof will be perfect!</div>
</div>
<div class="service_wrapper">
<div class="service_title">Siding</div>
<div class="service_description">mmmm siding.</div>
</div>
<div class="service_wrapper">
<div class="service_title">Paint</div>
<div class="service_description">Fabulous paint!</div>
</div>
<div class="service_wrapper">
<div class="service_title">Kitchen Remodels</div>
<div class="service_description">Pretty kitchen.</div>
</div>
</div>

You could just change it within your click binding...
Let's say your using images, just add a data-attribute you can query when you need to, like this...
HTML
<div class="service_wrapper">
<img data-state="plus" class="state" src="plus.png" alt="More"/>
<div class="service_title">Paint</div>
<div class="service_description">Fabulous paint!</div>
</div>
JS
$('.service_wrapper').click(function() {
var state = $(this).find('.state');
if(state.data('state') == 'plus')
state.attr({ 'src': 'minus.png', 'alt': 'Less' }).data('state', 'minus');
else
state.attr({ 'src': 'plus.png', 'alt': 'More' }).data('state', 'plus');
});

How to position images in a slider using js

I am creating a slideshow with 3 images of width 700px and I want to set the image 'left' position of each image from jquery, so that the images slide in, showing the current image and hiding the other images.
Here is the code.
$(document).ready(function() {
//calculating the no. of photos using each funct. Each func will detect the total imgs.
$('.marquee_container .slide').each(function(index) {
//setting the photowidth according to the container width
var photoWidth = $('.marquee_container').width();
//calculating the photoposition
var photoPosition = index * photoWidth;
//setting the left position of the photos
$('.slide').css({
'left': photoPosition
});
//caculating the width of the div depending on the photos
$('.holder').css({
'width': photoWidth + photoPosition
});
});
//generating navigation links
//calculating the no. of marquee_photos divs using the each func
//appending html code inside the marquee_nav
//the marquee_nav links will appear according to the number of marquee_photos divs, using the each function
$('.slide').each(function(index) {
$('.marquee_nav').append('');
});
});
.marquee_container {
width: 700px;
height: 350px;
overflow: hidden;
margin: 0px 0px 30px 0px;
padding: 0px;
}
.holder {
overflow: hidden;
position: relative;
width: 700px;
height: 350px;
}
.slide {
position: absolute;
top: 0px;
left: 0px;
}
.marquee_photos {
overflow: hidden;
}
.marquee_photos img {
display: block;
}
.marquee_caption {
width: 700px;
margin: 0px;
padding: 15px 0px 10px 0px;
color: #fff;
position: absolute;
top: 350px;
left: 0px;
background: url(images/template/marquee_caption.png) 0px 0px;
}
.marquee_caption_content {
width: 410px;
padding: 0px 0px 0px 25px;
}
.marquee_nav {
position: absolute;
bottom: 5px;
right: 0;
}
.marquee_nav .marquee_nav_item {
color: #fff;
text-decoration: none;
background: url(images/template/nav_buttons.png) no-repeat;
text-indent: -9999px;
overflow: hidden;
display: block;
width: 17px;
height: 18px;
float: left;
margin: 0 4px;
}
.marquee_nav .marquee_nav_item:hover {
background: url(images/template/nav_buttons.png) no-repeat -25px 0;
}
.marquee_nav .marquee_nav_item:selected {
background: url(images/template/nav_buttons.png) no-repeat -50px 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="marquee_container">
<div class="holder">
<div class="slide">
<img class="marquee_panel_photo" src="images/photos/london.jpg" alt="London" />
<div class="marquee_caption">
<div class="marquee_caption_content">
<p>Content goes here</p>
</div>
</div>
</div>
<div class="slide">
<img class="marquee_panel_photo" src="images/photos/milan.jpg" alt="milan" />
<div class="marquee_caption">
<div class="marquee_caption_content">
<p>Content goes here</p>
</div>
</div>
</div>
<div class="slide">
<img class="marquee_panel_photo" src="images/photos/staugustine.jpg" alt="staugustine" />
<div class="marquee_caption">
<div class="marquee_caption_content">
<p>Content goes here</p>
</div>
</div>
</div>
</div>
<div class="marquee_nav">
</div>
</div>
I am able to add the width dynamically but all the images left position are equal to the last image i.e. left:1400
From js you can see that I have calculated each photo position using index but I am still not able to get the result.

TLDR
You are misusing .each() loop.
To access a value inside of .each() loop you have to use value argument.
$('.marquee_container .slide').each(function (index, value) {
console.log($('.slide')); // All slides on the page.
console.log($(value)); // A value for current iteration
});
Detailed explanation
Sizzle selector engine, used in jQuery returns a collection of matched elements, when you specify a class, and your DOM contains multiple elements with this class.
By calling .each(callback) on a jQuery Collection, you basically tell JavaScript to call callback function for every element in collection. The callback function accepts two arguments: index, value
Where index — current index in array or object, value — a single value from your collection.
By applying $('.slide').css(), you change CSS properties of all elements from collection. To assign a specific position for each element, you need to interact with every separate element by accessing $(value).
Fixing
Please try this demo with your images:
$(document).ready(function() {
//calculating the no. of photos using each funct. Each func will detect the total imgs.
$('.marquee_container .slide').each(function(index, value) {
//setting the photowidth according to the container width
var photoWidth = $('.marquee_container').width();
//calculating the photoposition
var photoPosition = index * photoWidth;
//setting the left position of the photos
$(value).css({
'left': photoPosition
});
//caculating the width of the div depending on the photos
$('.holder').css({
'width': photoWidth + photoPosition
});
});
//generating navigation links
//calculating the no. of marquee_photos divs using the each func
//appending html code inside the marquee_nav
//the marquee_nav links will appear according to the number of marquee_photos divs, using the each function
$('.slide').each(function(index) {
$('.marquee_nav').append('');
});
});
.marquee_container {
width: 700px;
height: 350px;
overflow: hidden;
margin: 0px 0px 30px 0px;
padding: 0px;
}
.holder {
overflow: hidden;
position: relative;
width: 700px;
height: 350px;
}
.slide {
position: absolute;
top: 0px;
left: 0px;
}
.marquee_photos {
overflow: hidden;
}
.marquee_photos img {
display: block;
}
.marquee_caption {
width: 700px;
margin: 0px;
padding: 15px 0px 10px 0px;
color: #fff;
position: absolute;
top: 350px;
left: 0px;
background: url(images/template/marquee_caption.png) 0px 0px;
}
.marquee_caption_content {
width: 410px;
padding: 0px 0px 0px 25px;
}
.marquee_nav {
position: absolute;
bottom: 5px;
right: 0;
}
.marquee_nav .marquee_nav_item {
color: #fff;
text-decoration: none;
background: url(images/template/nav_buttons.png) no-repeat;
text-indent: -9999px;
overflow: hidden;
display: block;
width: 17px;
height: 18px;
float: left;
margin: 0 4px;
}
.marquee_nav .marquee_nav_item:hover {
background: url(images/template/nav_buttons.png) no-repeat -25px 0;
}
.marquee_nav .marquee_nav_item:selected {
background: url(images/template/nav_buttons.png) no-repeat -50px 0;
}
<div class="marquee_container">
<div class="holder">
<div class="slide">
<img class="marquee_panel_photo" src="images/photos/london.jpg" alt="London" />
<div class="marquee_caption">
<div class="marquee_caption_content">
<p>Content goes here</p>
</div>
</div>
</div>
<div class="slide">
<img class="marquee_panel_photo" src="images/photos/milan.jpg" alt="milan" />
<div class="marquee_caption">
<div class="marquee_caption_content">
<p>Content goes here</p>
</div>
</div>
</div>
<div class="slide">
<img class="marquee_panel_photo" src="images/photos/staugustine.jpg" alt="staugustine" />
<div class="marquee_caption">
<div class="marquee_caption_content">
<p>Content goes here</p>
</div>
</div>
</div>
</div>
<div class="marquee_nav">
</div>
</div>

The logo become pixelated after animating its siblings

I'm working on a project, and its thin header is animated, the animation is: when the user expand the side panel, it takes the half of the screen and the header shrink to the second half.
Now the issue is, when I animate the header to be the half of the screen, the logo become pixelated, and I don't why!
This issue in webkit browsers only [chrome/Safari].
This is a video shows the problem
https://www.dropbox.com/s/b9hopzqc4cpdfz6/logo-issue.mkv?dl=0
The HTML
<div id="topBar" class="clearfix">
<a class="logo pull-left" href="index.html"><img src="images/logo.png" alt=""/>Three.js Project</a>
<ul class="topControls clearfix pull-right">
<li class="pull-left"><i class="fa fa-camera-retro"></i>View
<select name="" id="">
<option value="">Normal</option>
<option value="">Back</option>
<option value="">Inside</option>
</select>
</li>
<li class="pull-left"><i class="fa fa-gear"></i>Settings</li>
<li class="pull-left"><i class="fa fa-floppy-o"></i>Save</li>
<li class="pull-left"><i class="fa fa-calculator"></i>Calculator</li>
<li class="pull-left"><i class="fa fa-lightbulb-o"></i>Help</li>
</ul>
</div>
The CSS
#topBar {
position: fixed;
height: 40px;
left: 0;
top: 0;
right: 0;
z-index: 950;
background: $sceneSectionsBg;
border-bottom: 1px solid $sceneSectionsBorderColor;
.logo {
margin: 10px 0 0 10px;
display: block;
height: 20px;
img {
margin-right: 7px;
height: 20px;
}
}
.topControls {
list-style: none;
padding: 0;
position: absolute;
top: 10px;
right: 430px;
li {
margin-right: 22px;
color: lighten($controlsActiveColor, 10%);
&:last-child {
margin-right: 15px;
}
.fa {
margin-right: 5px;
}
select {
color: $controlsActiveColor;
font-size: 12px;
height: 20px;
position: relative;
top: -1px;
margin-left: 3px;
}
a {
color: lighten($controlsActiveColor, 10%);
text-decoration: none;
}
&:hover a {
color: lighten($controlsActiveColor, 20%);
}
}
}
}
The JS
$(document).on('click', '#sceneCategoriesToggle', function () {
var $sceneCategories = $('#sceneCategories'),
sceneCategoriesWidth = $sceneCategories.outerWidth(),
isExpanded = $sceneCategories.hasClass('expanded'),
$relativePanel = $('#bottomPanel, #topBar .topControls');
if (isExpanded) {
$sceneCategories.animate({right: -sceneCategoriesWidth}, function () {
$sceneCategories.removeClass('expanded');
});
$relativePanel.animate({right: 0});
$('.detailsContent .closeBtn').click();
} else {
$sceneCategories.animate({right: 0}, function () {
$sceneCategories.addClass('expanded');
});
$relativePanel.animate({right: sceneCategoriesWidth});
}
});
Thanks.

I solved this issue by using another small image for the logo, the original image is 200px X 200px, and the logo is 20px X 20px, So I used a small image, and this solved the problem.