We Keep Coding

can someone help me to fix my code

i have this code for floating banner on the bottom side by side left and right , nothing is happend when i clicked the left banner , but when i click the right banner, the banner on the left side was automatically closed , and when i click the right banner again it will direct you to other website BUT the banner will disappear.
And my question is :
how to make left and right work properly ,left banner can be click and direct to target website and when i click right banner does not close the left banner
after banner clicked banner doesnt automatically closed
This is the code i have on my site :
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#bottomads").click(function(){
$(this).hide();
});
});
</script>
<script>
$(document).ready(function(){
$("#bottomads2").click(function(){
$(this).hide();
});
});
</script>
<div style='width:100%;margin:auto;text-align:center;display:scroll;position:fixed;bottom:5px;right: 270px;z-index:999;-webkit-transform:translateZ(0);' id="bottomads">
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png" height="60px" width="468px" />
<img src="https://drive.google.com/uc?export=download&id=0B_YE_mOyP6psSG5qQk9yRG5hcWs" style="margin-left: -520px;margin-top: 45px;position: absolute;middle: 20px;top: 0;" border="0">
</div>
<div style='width:100%;margin:auto;text-align:center;display:scroll;position:fixed;bottom:5px;left: 270px;z-index:999;-webkit-transform:translateZ(0);' id="bottomads2">
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png" height="60px" width="468px" />
<img src="https://drive.google.com/uc?export=download&id=0B_YE_mOyP6psSG5qQk9yRG5hcWs" style="margin-right: 25px;margin-top: 45px;position: absolute;middle: 20px;top: 0;" border="0">
</div>
I hope i can explain well , and thank you for all the answer.

Your problemis shown in this image. bottomads2's div is on bottomads.
The solution to this problem is :
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#bottomads").click(function() {
$(this).hide();
$("#bottomads").style('width', '100%');
});
$("#bottomads2").click(function() {
$(this).hide();
});
});
</script>
<div style='width:100%;margin:auto;text-align:center;display:scroll;position:fixed;bottom:5px;right: 270px;z-index:999;-webkit-transform:translateZ(0);' id="bottomads">
<a target="_blank" rel="nofollow"><img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png" height="60px" width="468px" /></a>
<img src="https://drive.google.com/uc?export=download&id=0B_YE_mOyP6psSG5qQk9yRG5hcWs" style="margin-left: -520px;margin-top: 45px;position: absolute;middle: 20px;top: 0;" border="0">
</div>
<div style='text-align:center;display:scroll;position:fixed;bottom:5px;left: 700px;z-index:999;-webkit-transform:translateZ(0);' id="bottomads2">
<a target="_blank" rel="nofollow"><img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png" height="60px" width="468px" /></a>
<img src="https://drive.google.com/uc?export=download&id=0B_YE_mOyP6psSG5qQk9yRG5hcWs" style="margin-right: 25px;margin-top: 45px;position: fixed;middle: 20px;top: 0;" border="0">
</div>
Also try to code clean. you will found a lot of blogs out there regarding how to write clean code. i.e try to make classes for same type of styling :
.bottomads{
text-align:center;
display:scroll;
position:fixed;
bottom:5px;
z-index:999;
-webkit-transform:translateZ(0);
}
Then the line will be like this :
<div style='width:100%;margin:auto;right: 270px;' id="bottomads" class="bottomads">

Your bottomads2 has overlayed on bottomads
Same reason as above
Suggest you to do more test in https://jsfiddle.net before asking your next question.

Embed YouTube Playlist plugin with sidebar list visible

I know that the YouTube API does not provide functionality to display a playlist sidebar similar to the native YouTube playlist at this time.
Through searching I found a promising plugin to imitate this behavior. https://github.com/jakiestfu/Youtube-TV
Unfortunately, this plugin no longer works with YouTube's API v.3, however, Giorgio003 created a fork with API v.3 support.
https://github.com/Giorgio003/Youtube-TV
I have followed all the installation instructions, but cannot seem to get it to work.
This is my page:
<!DOCTYPE html>
<html>
<head>
<link href="src/ytv.css" type="text/css" rel="stylesheet" />
<script src="src/ytv.js" type="text/javascript"></script>
</head>
<body>
<div>
Testing YouTube Playlist
</div>
<div id="YourPlayerID"></div>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
var controller = new YTV('YourPlayerID', {
channelId: 'UCBSvZIJlXJR7SE_KNvOiiGg'
});
});
</script>
</body>
</html>
In ytv.js I included my API key
(function(win, doc) {
'use strict';
var apiKey = 'ThisIsARealKeyForMyChannel';
var YTV = YTV || function(id, opts){...
The ytv.js script seems to be running fine. It correctly finds my channel and the two sample videos I have uploaded. The rendered HTML for #YourPlayerID looks like this:
<div id="YourPlayerID" class="ytv-canvas">
<div class="ytv-relative">
<div class="ytv-video">
<iframe id="ytv-video-playerYourPlayerID0" class="ytv-video-playerContainer" frameborder="0" allowfullscreen="1" title="YouTube video player" width="640" height="360" src="https://www.youtube.com/embed/VqWWn-NrebU?enablejsapi=1&origin=http%3A%2F%2Fdevcf9.acm.org&controls=1&rel=0&showinfo=0&iv_load_policy=3&autoplay=0&theme=dark&wmode=opaque&widgetid=1"></iframe>
</div>
<div class="ytv-list">
<div class="ytv-list-header">
<a href="//youtube.com/channel/UCBSvZIJlXJR7SE_KNvOiiGg" target="_blank">
<img src="https://yt3.ggpht.com/-IGpxPi95eQQ/AAAAAAAAAAI/AAAAAAAAAAA/z-D0JYX_Wog/s88-c-k-no-mo-rj-c0xffffff/photo.jpg">
<span><i class="ytv-arrow down"></i>My Name</span>
</a>
</div>
<div class="ytv-list-inner">
<ul>
<li class="ytv-active">
<a href="#" data-ytv="VqWWn-NrebU" class="ytv-clear">
<div class="ytv-thumb">
<div class="ytv-thumb-stroke"></div>
<span>00:42</span>
<img src="https://i.ytimg.com/vi/VqWWn-NrebU/mqdefault.jpg">
</div>
<div class="ytv-content">
<b>Skin 4144</b>
<span class="ytv-views">1 Views</span>
</div>
</a>
</li>
<li>
<a href="#" data-ytv="bAWFo5ur9fc" class="ytv-clear">
<div class="ytv-thumb">
<div class="ytv-thumb-stroke"></div>
<span>00:16</span>
<img src="https://i.ytimg.com/vi/bAWFo5ur9fc/mqdefault.jpg">
</div>
<div class="ytv-content"><b>Nebula 6044</b>
<span class="ytv-views">0 Views</span>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
But no video or playlist appears on the page. Can anyone see what I am missing?

I was able to solve the problem. All the elements created from the plugin set the height to 100%. The element <div id="YourPlayerID"></div> had a height of 0, therefore, all its children had a height of 0. Once I gave the #YourPlayerID element a height the playlist appeared.

JavaScript animate function doesn't work

This is what the code looks like.
<head>
<link type="text/css" rel="stylesheet" href="C:\Users\User\Desktop\css1.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="C:\Users\User\Desktop\js.js"></script>
</head>
<body>
<div id="header_wrap">
<div id="header">
<div id="logo">
LOGO
</div>
<div class="nav">
<a href="http://www.google.se">
Stuff
</a>
<a href="javascript:void(0)">
Other stuff
</a>
<a href="javascript:void(0)">
More stuff
</a>
</div>
<div class="mobile_nav"></div>
<div class="mobile_nav_menu">
<div class="mobile_menu">
<span>Stuff</span>
<span>Other stuff</span>
<span>More stuff</span>
</div>
<div class="mobile_close">
</div>
</div>
</div>
</div>
<div class="image_container">
<div class="inner_content" id="slide1">
<h2>
CONTENTS
</h2>
</div>
<a class="button" href="javascript:void(0)"></a>
</div>
</body>
the .js file contains this code
setTimeout(function(){
$("#slide1").css('opacity', '1');
},800);
setInterval(function(){
$(".button").toggleClass("opacity");
},1000);
//Navigation
$(".mobile_nav").click(function() {
$(".mobile_nav_menu").animate({right: 0});
})
$(".mobile_close").click(function() {
$(".mobile_nav_menu").animate({right: -270});
})
Can anyone help me out with what I'm doing wrong and how it can be fixed?
Thank you! /AJ
UPDATE: The .js loads (tried the alert function), but does not fill the function it should. Original pen can be found on http://codepen.io/yuriylianguzov/pen/qjwEe

One of the problems is that you are trying to reference a javascript file from a physical file path, and not a url (or relative path). You can't use your harddrive path in an html file to include javascript.
<script src="C:\Users\User\Desktop\js.js"></script>
If your javascript is in the same folder as your html, try something like this:
<script src="js.js"></script>
I'm not exactly sure what the expected behavior for the JavaScript is, because it appears to be doing what it is intended to do. If you look at the DOM in the codepen link that you provided the element with the id of 'slide1' has its opacity style set to 1 (see below) and the anchor tag with class of 'button' is getting the class 'opacity' toggled on and off every second (not depicted below, but you can see it happening in firebug).
<div class="image_container">
<div id="slide1" class="inner_content" style="opacity: 1;">
<h2>
We are who we choose to be.
</h2>
</div>
</div>
The other two click handler's are targeting empty elements (the element with class of 'mobile_nav', and the element with class of 'mobile_close') so they aren't going to do anything.
$(".mobile_nav").click(function() {
$(".mobile_nav_menu").animate({right: 0});
})
$(".mobile_close").click(function() {
$(".mobile_nav_menu").animate({right: -270});
})
<div class="mobile_nav"></div>
<div class="mobile_nav_menu">
<div class="mobile_menu">
<span>Projects</span>
<span>Profile</span>
<span>Contact</span>
</div>
<div class="mobile_close"></div>
</div>
I hope this helps!

1) Some of the elements your javascript is acting on don't have any content
2) Change the line $(".mobile_nav_menu").animate({right: 0}); to: $(".mobile_nav_menu").animate({"right": "0"}); and do the same with the other one, though it won't have any functionality, really.
3) your class mobile_nav_menu needs to have css that says position:relative for the attribute "right" to work.
4) I'd recommend moving your mobile_close div outside the mobile_nav_menu div so it doesn't move when you click it
If anyone has stuff to add, please do so.

jQuery distanceTo() not working

I wrote a code to try and find the distance between two elements: <div class='feature'> and <div class='social'> and if the value is less than 0, then <div class='social'> will be hidden.
I cannot see why it doesn't work so I'm asking your help.
Here is the code:
<!doctype html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
<script>
var distance = $(.feature).distanceTo($(.social));
if (distance < 0) {
$(".social").css("display","none");
}
</script>
</head>
<body>
<div class='feature' style='width:500px;height:200px;background-color:#333333'>
<!--a lot of content in here-->
</div>
<div class='social'>
<a href='https://www.facebook.com/vosocks'><img id='facebook' width='50' height='50' class='social' src='http://www.vosocks.co.uk/facebook%20logo.png'/></a> <a href=''><span class='socialtxt'>Like us on Facebook!</span></a><br>
<a href='https://twitter.com/vosocks'><img id='twitter' class='social' width='50' height='50' src='http://www.vosocks.co.uk/twitterlogo.png'/></a> <a href='https://twitter.com/vosocks'><span class='socialtxt'>Follow us on Twitter!</span></a><br>
<a href='http://instagram.com/VoSock'><img id='instagram' width='50' height='50' class='social' src='http://www.vosocks.co.uk/instagramlogo.png'/></a> <a href=''><span class='socialtxt'>Follow us on Instagram!</span></a><br>
</div>
</body>
</html>

If you want to find distance between two elements, use Jquery's .offset().
Here is the working demo
I have added an id to your div with social class to make it unique and here is the example code.
var distance = $('#social_buttons').offset().top;
alert(distance);
Hope it helps

Using easySlider1.7, Hindering another JavaScript Function

I am using easyslider1.7 jquery plugin to produce the scrollable slider effect. Below is my HTML in which I am using the plugin to produce the effect.
<html>
<head>
<link rel="stylesheet" type="text/css" href="/NotificationLayout/css/CSS1.css"/>
<link rel="stylesheet" type="text/css" href="/NotificationLayout/css/screen.css"/>
<script type="text/javascript" src="../JS/Base.js"></script>
<script type="text/javascript" src="../JS/jquery.js"></script>
<script type="text/javascript" src="../JS/easySlider1.7.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#slider").easySlider({
continuous: true
});
});
</script>
<title>Realtime Notification Panel</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body class="bodycustom1">
<iframe id="NotificationIframe" name="NotificationIframe" src="Notifications.html" seamless>
</iframe>
<br>
<div id="content">
<div id="slider">
<ul>
<li> <font onclick="changeIframeSrc('Notifications.html')">All</font>  
<img src="../icons/Alfresco.png" id="Alfresco" alt="Alfresco" onclick="changeIframeSrc('AlfrescoNotificationDeck.html')"/>  
<img src="../icons/GoogleCalendar.png" id="GoogleCalendar" alt="GoogleCalendar" onclick="changeIframeSrc('GCalNotificationDeck.html')"/>  
<img src="../icons/Linkedin.png" id="Linkedin" alt="LinkedIn" onclick="changeIframeSrc('LinkedInNotificationDeck.html')"/>  
<img src="../icons/Rss.png" id="Rss" alt="RSS" onclick="changeIframeSrc('RSSNotificationDeck.html')"/>
<br>
   
<img src="../icons/On.png" alt="On" id="one" onclick="toggleType('Alfresco','one');"/>  
<img src="../icons/On.png" alt="On" id="two" onclick="toggleType('GoogleCalendar','two');"/>  
<img src="../icons/On.png" alt="On" id="three" onclick="toggleType('Linkedin','three');"/>  
<img src="../icons/On.png" alt="On" id="four" onclick="toggleType('Rss','four');"/>
</li>
<li >
<img src="../icons/Salesforce.png" id="Salesforce" alt="Salesforce" onclick="changeIframeSrc('SFNotificationDeck.html')"/>  
<img src="../icons/Sharepoint.png" id="Sharepoint" alt="Sharepoint" onclick="changeIframeSrc('SPNotificationDeck.html')"/>  
<img src="../icons/Connections.png" id="Connections" alt="IBM Connections" onclick="changeIframeSrc('IBMConnNotificationDeck.html')"/>
<br>
<img src="../icons/On.png" alt="On" id="five" onclick="toggleType('Salesforce','five');"/>  
<img src="../icons/On.png" alt="On" id="six" onclick="toggleType('Sharepoint','six');"/>  
<img src="../icons/On.png" alt="On" id="seven" onclick="toggleType('Connections','seven');"/>
</li>
</ul>
</div>
</div>
</body>
I have written a javascript method to toggle the images from on to off and vice versa, and also changing the image of particular notification type. By clicking on the On button in the above HTML, two changes should happen On button should change to Off button. And the border of image above it should changes to a red border image. VIce Versa for Off button.
function toggleType(channelType,button){
var type=document.getElementById(channelType);
var polarity=document.getElementById(button);
var situation=polarity.alt;
if(situation=="On"){
type.src="../icons/"+channelType+"RB.png";
type.style.cursor="auto";
polarity.src="../icons/Off.png";
polarity.alt="Off";
}else if(situation=="Off"){
type.src="../icons/"+channelType+".png";
type.style.cursor="pointer";
polarity.src="../icons/On.png";
polarity.alt="On";
}
}
The problem is my javascript function produce desirable results for the first 4 images that are in first li element. But when I slide to the next set of images in the other li element, my javascript function stops working. It does not changes image and toggles on and off button.
Please help me with it. I am new to jquery.

The problem is with the elements in the last <li> element. I commented the line given below from easySlider1.7.js and the problem vanished.
$("ul", obj).prepend($("ul li:last-child", obj).clone().css("margin-left","-"+ w +"px"));
I don't know the exact reason why it happened though.