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
Related
So for my slidetoggle function in jquery, when the website runs, I am trying to originally hide my socials from showing up under Contact. When I click contact, what I want to happen is for the socials to slide down underneath the navigation menu (preferrably to the right of the contact button, if anyone knows how to do this I would be greatly appreciated, otherwise it's fine for now). The first time I click contact, the socials show, but jquery is sliding them up. The function works fine afterwards, but I am trying to figure out how to make it scroll down the first time rather than scroll up, with the toggle function still in effect afterwards. I'm still new to jquery, so help would be appreciated.
Here's my code (jquery is below the html):
<!DOCTYPE html>
<html lang="en">
<head>
<title>RE</title>
<meta charset="UTF-8">
<!--UTF = Universal Character Set + Transformation Format. This encodes every character with the ASCII format (EX: 'A' = 65, 'B' = 66, etc.). Encoding is variable length, and uses 8-bit code units.-->
<link rel="stylesheet" href="CSS/style.css">
<link href='https://fonts.googleapis.com/css?family=Faster One' rel='stylesheet'>
<!--First link: Links to CSS file. Second link: Links to a font type unique to Google Fonts.-->
<script src='main.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<canvas class="img" id="myCanvas" width="70" height="50" style="border:2px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<!--This canvas tag displays the logo at the top left, and it allows us to design the size and the borders to the logo.-->
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Helvetica";
ctx.fillText("R E ",9,35);
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
</script>
<!--This script allows us to design the inner portion of the logo at the top left.-->
<nav>
<div style="width: 50%; margin-left: auto; margin-right: auto;">
<!--Width, margin-left, and margin-right are necessary as it centers the Navigation menu.-->
<ul>
<p><a href='index.html'>Home</a> /
<a href='About.html'>About</a> /
<a href='Work.html'>Projects</a> /
<a id="contact" href="javascript:void(0)">Contact</a>
<div class=social1>
<p id="slide">
<a class="socials" href="javascript:void(0)">
<img src="facebook.png" alt="Facebook" style="width:60px;height:60px;border:0">
</a>
<a class="socials" href="javascript:void(0)">
<img src="instagram.png" alt="Instagram" style="width:60px;height:60px;border:0">
</a>
<a class="socials" href="javascript:void(0)">
<img src="github.png" alt="Github" style="width:60px;height:60px;border:0">
</a>
<a class="socials" href="javascript:void(0)">
<img src="LinkedIn.png" alt="LinkedIn" style="width:60px;height:60px;border:0">
</a>
</p>
</div>
</ul>
</div>
</nav>
<hr>
</body>
</html>
JQUERY:
$(document).ready(function(){
$(".socials").hide();
$("#contact").click(function() {
$(".socials").show();
$("#slide").slideToggle("slow");
});
});
Sorry for the bad formatting, I'm new here and I'm just trying to get help. Thanks in advance.
I want to show only one div when the user clicks the links on the icon bar and hide others. When the user clicks home link of the icon bar only 'hoediv'is visible and others hidden.
My work is below please help!!
<!doctype HTML>
<head>
<div class="main-header-div">
<a id="home" href="" > Home</a>
<a id="about" href=""> About us</a>
</div>
</head>
<body>
<script>
$(function(){
$("#home").click(function(){
$("#homediv").show();
$("#aboutus").hide();
return false;
});
});
</script>
<div id="homediv" style="color:white; background-color:red;height:89px;
width:100%;font-size:150%; display:none;">This is my site.
</div>
<div id="aboutus" style="display:none;">
this is about us page
</div>
</body>
</html>
What you need to fix?
Firstly, <head></head> only includes metadata, the rest should be in the <body></body>.
If you're not going to make use <a> anchor tags for hyperlinking, then pass the value href="JavaScript:Void(0);" (The void operator evaluates the given expression and then returns undefined) or better yet, don't use anchor tags better yet span or button.
You didn't import jquery.js in your html file.
You can make this a lot more effecient, but I'd suggest you learn some basic html from the widely available sources and then CSS, Jquery,etc.
Sources to refer:
https://www.w3schools.com/html/html5_intro.asp
https://www.w3schools.com/css/default.asp
https://www.w3schools.com/jquery/default.asp
$(function() {
$("#home").click(function() {
$("#homediv").show();
$("#aboutus").hide();
});
$("#about").click(function() {
$("#homediv").hide();
$("#aboutus").show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-header-div">
<a id="home" href="JavaScript:Void(0);"> Home</a>
<a id="about" href="JavaScript:Void(0);"> About us</a>
</div>
<div id="homediv" style="color:white; background-color:red;height:89px;
width:100%;font-size:150%; display:none;">This is my site.
</div>
<div id="aboutus" style="display:none;">
this is about us page
</div>
If you want to simplify it, you can use classes and data attributes to toggle wanted content:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-header-div">
<a class="header-link" id="home" data-toggle="homediv" href="#" > Home</a>
<a class="header-link" id="about" data-toggle="aboutus" href="#"> About us</a>
</div>
<div class="content" id="homediv" style="color:white; background-color:red;height:89px;
width:100%;font-size:150%; display:none;">
This is my site.
</div>
<div class="content" id="aboutus" style="display:none;">
this is about us page
</div>
<script>
$(document).ready(function() {
$(".header-link").click(function(){
$(".content").hide();
$("#" + $(this).attr("data-toggle")).show();
});
});
</script>
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.
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.
The below tabs works fine with external js file.How to add the links so that when the user click the link www.ll.com/#comments ,he will see the comments..tab
http://www.dynamicdrive.com/dynamicindex17/tabcontent/tabcontent.js
<ul id="countrytabs" class="shadetabs">
<li>Tutorial</li>
<li>Comments</li>
</ul>
<div class="contentbox">
<div id="movies" class="tabcontent">
Download movies here
</div>
<div id="comments" class="tabcontent">
</div>
<script type="text/javascript">
var countries=new ddtabcontent("countrytabs")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()
</script>
Try this, after countries.init():
var tagIndex = window.location.toString().indexOf('#');
if (tagIndex >= 0)
countries.expandit(window.location.toString().substring(tagIndex).toLowerCase());
EDIT: You had a few problems in the example code you provided (You did not wait for the document onload event. You did not follow the naming-conventions of the A links as on the ddtabcontent documentation site, ...)
I have created this example to test its functionality:
<html>
<head>
<script type="text/javascript" src="tabcontent.js"></script>
<script type="text/javascript">
function onload()
{
var countries = new ddtabcontent("countrytabs");
countries.setpersist(true);
countries.setselectedClassTarget("link");
countries.init();
var url = window.location.toString();
var tagIndex = url.indexOf('#');
if (tagIndex >= 0)
countries.expandit(url.substring(tagIndex).toLowerCase());
}
</script>
<style type="text/css">
div.tabcontent
{
display: none;
}
</style>
</head>
<body onload="onload()">
<ul id="countrytabs" class="shadetabs">
<li>Movies</li>
<li>Comments</li>
</ul>
<div class="contentbox">
<div id="movies" class="tabcontent">
Download movies here
</div>
<div id="comments" class="tabcontent">
Put comments here
</div>
</div>
</body>
</html>