Im trying to use the jQuery plug in videoBG to have a video fill a top div of 100% width and height. I'd like the #top-video to fill the #top-content. The issue is that nothing is showing up. Any suggestions? Thanks!
<!DOCTYPE html>
<html>
<head>
<title>Dupont Studios</title>
<link href= 'style.css' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Oxygen:300' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script type="text/javascript" src="waypoints.js"></script>
<script type="text/javascript" src="jquery.videoBG.js"></script>
<script>
$(function() {
// Do our DOM lookups beforehand
var nav_container = $(".nav-container");
var nav = $("nav");
nav_container.waypoint({
handler: function(direction) {
nav_container.toggleClass('sticky', direction=='down');
}
});
});
$('#top_video').videoBG({
mp4:'test.mp4',
scale:true,
zIndex:0
});
</script>
</head>
<body>
<div id = 'top-container'>
<div id = 'top-content'>
<div id = 'top-video'>
<span>Here is some text</span>
</div>
<div id = 'top-text'>
<div id = 'top-img'>
<img src='top-img.png' width = "600" height = '115'>
</div>
<h1 id = 'top-slogan'>A Video Production Studio</h1>
</div>
</div>
<div class = 'nav-container'>
<nav>
<div id = 'header-img'>
<img src='top-img.png' width = "450" height = '86.25'>
</div>
<div id = 'nav-items-container'>
<ul class = 'nav-items'>
<li class = 'nav-item'><a href='#'><b>w</b>hat</a></li>
<li class = 'nav-item'><a href='#'><b>h</b>ow</a></li>
<li class = 'nav-item'><a href='#'><b>w</b>hy</a></li>
<li class = 'nav-item'><a href='#'><b>w</b>here</a></li>
<li class = 'nav-item'><a href='#'><b>w</b>ho</a></li>
</ul>
</div>
</nav>
</div>
</div>
<div id = 'main-container'>
<div id = 'main-content'>
<div id = 'main-content1'>
<section>
<h2>what we do</h2>
<p>We have built a boutique full service video producton studio quite literally in the heart of Dupont Circle.
Yes, our address is 21 Dupont Circle- we're racross from the south end of the dupont metro stop, right near the Krispy Kreme...mmm,good!</p>
<p>Unlike other video production studios, we have an exclusive focus on subscription based filming that
allows for organizations to build their brand and convey their ideas on a weekly, bi-weekly, or monthly basis.</p>
<p>
The benefits of subscription based video production allows us to more <mark class = 'blue-me'>deeply partner</mark> with our clients
and align interest for long term <mark class = 'blue-me'>strategic communication goals</mark>.
</p>
</section>
</div>
<div id = 'main-content2'>
<section>
<div id = 'video-text'>
<p>We have built a boutique full service video producton studio quite literally in the heart of Dupont Circle.
Yes, our address is 21 Dupont Circle- we're racross from the south end of the dupont metro stop, right near the Krispy Kreme...mmm,good!
</p>
</div>
<div id = 'video'>
<iframe src="http://player.vimeo.com/video/69176991?title=0&byline=0&portrait=0" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
</section>
</div>
<section>
<div id = 'picture'>
<img src='test.jpg' width = "1200" height = '800'>
</div>
</section>
</div>
</div>
</body>
</html>
shouldn't you be using #top-video as your selector instead of #top_video ?
Related
I've been trying to create a function that allow to move around a website without leaving the same page, just loading different contents on click.
<!DOCTYPE html>
<html>
<head>
<title>Freud Got Lynched</title>
<link rel="stylesheet" type="text/css" href="site.css">
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght#200;300;400;500;523;600;700;800&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script type="text/javascript" src="site.js"></script>
<meta charset="UTF-8">
</head>
<body>
<div id="abertura" class="page0">
<video autoplay muted loop>
<source src="assets/fundo1.webm" type="video/webm">
</video>
<div class="info">
<img src="assets/logo.png" alt="logo" class="logobig">
<p class="texto">Um documentário interativo inspirado nas obras do realizador David Lynch...
ou uma viagem pelo subconsciente incomum de pessoas comuns enquanto dormem.</p>
<p class="sonhar">Sonhar</p>
<img src="assets/botao2.png" alt="botao" class="botao">
</div>
</div>
<div id="segunda" class="page1">
<img src="assets/fundo.png" class="fundo">
<div class="container">
<div id="myNav" class="overlay">
×
<div class="overlay-content">
<ul><li>Episódios</li>
<ul><li>Episódio 1</li>
<li>Episódio 2</li>
<li>Episódio 3</li>
<li>Episódio 4</li>
<li>Episódio 5</li>
<li>Episódio 6</li>
</ul>
<li>Sobre</li>
<li>Autores</li>
<li>Créditos</li>
</div>
</div>
<div class="botaomenu" onclick="myFunction(this); openNav();">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<img src="assets/logo.png" alt="logo" class="logomedium" onclick="showPage('page0')"></div>
</div>
I have this function on Javascript
function showPage(id) {
if (id=="page1") {
var pages = document.querySelectorAll("div");
for (var i = 0; i < pages.length; i++) {
pages[i].style.display = "none";
}
var le = document.getElementById('segunda');
le.style.display = "block";
}
The problem is that not all of the contents in the div#segunda are being loaded after the click triggers the function. All the elements of the div#abertura are removed, as it's supposed to do, but the only element that shows from the div#segunda is the img.fundo.
Any ideas? Please keep in mind that i'm a beginner in JavaScript.
The problem here is that you have divs inside segunda div. A better way to approach this would be to assign a class to the top-level divs, and then hide them using that class. For example here's an abridged version of the code.
<body>
<div id="1" class="container">...</div>
<div id="2" class="container">...</div>
</body>
Along with JS like
function showPage(id) {
if (id=="page1") {
var pages = document.document.getElementsByClassName("container");
for (var i = 0; i < pages.length; i++) {
pages[i].style.display = "none";
}
var le = document.getElementById('segunda');
le.style.display = "block";
}
Your html is missing some closing tags, so it is invalid. I have also fixed that.
Now, the changes:
It is a good idea to give your "pages" a common way to identify them so that you can query the DOM only for them. In this case, I have given them the class page. Your problem was that by doing var pages = document.querySelectorAll("div"); you were basically selecting all the divs on the page and then hide them, which has an undesired effect.
Next, it is also a good idea to uniquely identify the page containers somehow. This can be achieved by giving them an id. It is a good idea to have a format for these ids so you can easily work with them. In this case, I have given them the id page_x, where x is a number.
Going to the showPage function, we are now able to pass just the number of the page we want, e.g. showPage(1). Because we have a certain format for the ids, it is now more elegant to work with them. As you can see in the function, I used the .page class and then I compared the ids in the loop to determine what is to be shown and what to hide.
Another option would be to have display: none; on the .page class in css and have another class called active with display: block; and then just add this class to the div you wish to show and remove it from the others
Here's the updated html:
<!DOCTYPE html>
<html>
<head>
<title>Freud Got Lynched</title>
<link rel="stylesheet" type="text/css" href="site.css">
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght#200;300;400;500;523;600;700;800&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script type="text/javascript" src="site.js"></script>
<meta charset="UTF-8">
</head>
<body>
<div id="page_0" class="page">
<video autoplay muted loop>
<source src="assets/fundo1.webm" type="video/webm">
</video>
<div class="info">
<img src="assets/logo.png" alt="logo" class="logobig">
<p class="texto">Um documentário interativo inspirado nas obras do realizador David Lynch...
ou uma viagem pelo subconsciente incomum de pessoas comuns enquanto dormem.
</p>
<p class="sonhar">Sonhar</p>
<img src="assets/botao2.png" alt="botao" class="botao">
</div>
</div>
<div id="page_1" class="page" style='display: none;'>
<img src="assets/fundo.png" class="fundo">
<div class="container">
<div id="myNav" class="overlay">
×
<div class="overlay-content">
<ul>
<li>Episódios</li>
<ul>
<li>Episódio 1</li>
<li>Episódio 2</li>
<li>Episódio 3</li>
<li>Episódio 4</li>
<li>Episódio 5</li>
<li>Episódio 6</li>
</ul>
<li>Sobre</li>
<li>Autores</li>
<li>Créditos</li>
</ul>
</div>
</div>
<div class="botaomenu" onclick="myFunction(this); openNav();">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<img src="assets/logo.png" alt="logo" class="logomedium" onclick="showPage(0)">
</div>
</div>
</body>
</html>
And js function:
function showPage(id) {
let pages = document.querySelectorAll(".page");
for (var i = 0; i < pages.length; i++) {
if(pages[i].id !== `page_${id}`) {
pages[i].style.display = "none";
} else {
pages[i].style.display = "block";
}
}
}
I have a container holding four divs. After I click on one div, the remaining three neeed to be appended to another div. How can I achieve this?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Week 4 Game</title>
<link rel = "stylesheet" type = "text/css" href = "assets/css/reset.css">
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<!-- Added link to the jQuery Library -->
<script src="https://code.jquery.com/jquery-2.2.3.js" integrity="sha256-laXWtGydpwqJ8JA+X9x2miwmaiKhn8tVmOVEigRNtP4=" crossorigin="anonymous"></script>
<script type="text/javascript" src = "assets/javascript/game.js"> </script>
</head>
<body>
<div class = "characters">
<div class="charContainer darth">
<h2 id="c1"></h2>
<img class="vade" src="assets/images/vader.jpg">
<p id="c1hp" data-hp = "120"></p>
</div>
<div class="charContainer luke">
<h2 id="c2"></h2>
<img class="skywalker" src="assets/images/luke.jpg">
<p id="c2hp" data-hp = "100"></p>
</div>
<div class="charContainer won">
<h2 id="c3"></h2>
<img class="obi" src="assets/images/obiwan.jpg">
<p id="c3hp" data-hp = "150"></p>
</div>
<div class="charContainer maul">
<h2 id="c4"></h2>
<img class="dmaul" src="assets/images/maul.png">
<p id="c4hp" data-hp = "180"></p>
</div>
</div>
<div id="your">
<h2>Your Character</h2>
<!-- <img class="dmaul" src="assets/images/maul.png"> -->
</div>
<div id="enemies">
<h2>Enemies</h2>
<!-- <img class="dmaul" src="assets/images/maul.png"> -->
</div>
</body>
</html>
JQuery
$(document).ready(function(){
var yourCharacter;
var enemy1;
var enemy2;
var enemy3;
$('#c1').text("Darth Vader");
$('#c2').text("Luke Skywalker");
$('#c3').text("Obi Won");
$('#c4').text("Darth Maul");
var health = $('#c1hp').data('hp');
$('#c1hp').html(health);
var health = $('#c2hp').data('hp');
$('#c2hp').html(health);
var health = $('#c3hp').data('hp');
$('#c3hp').html(health);
var health = $('#c4hp').data('hp');
$('#c4hp').html(health);
$('.charContainer').on('click', function(){
yourCharacter = $(this);
$('#your').append(yourCharacter);
enemy1 = $('.vader');
$('#enemies').append(enemy1);
})
});
I need to append the remaind charContainers that were not clicked to the enemies container div
This works for me. You may want to add a check for equality, since the chosen div will be initially appended to enemies, then moved:
$('.charContainer').on('click', function(){
$('.charContainer').each(function() {
$('#enemies').append($(this));
})
yourCharacter = $(this);
$('#your').append(yourCharacter);
})
Since "your character" has already been moved by the time the rest of the characters need to be moved, the selector '.characters>.charContainer' (all the "charContainer" children of "characters") will not select your character (since it's already moved) - just the remaining characters
$('.charContainer').on('click', function() {
$('#your').append($(this));
$('.characters>.charContainer').each(function() {
$('#enemies').append($(this));
});
})
Alternate version using arrow function:
$('.charContainer').on('click', function() {
$('#your').append($(this));
$('.characters>.charContainer').each( (undefined, char) => { $('#enemies').append($(char)) } );
})
Or borrowing Tekebo's use of appendTo:
$('.charContainer').on('click', function() {
$(this).appendTo('#your');
$('.characters>.charContainer').appendTo('#enemies');
})
Note: the main advantage of using the children selector as opposed to the siblings of the clicked div or all divs of the 'charContainer' class is that it doesn't matter which order it's done in - the result will be the same. (However, moving the clicked div last will cause more work to be done)
You could simply use siblings(), like this:
$(document).ready(function(){
$(".charContainer").on("click",function(){
$(this).siblings().appendTo("#enemies");
$(this).appendTo("#your");
});
});
How would i do that in JavaScript or j Query? I have been trying to do this for ages but couldn't so it would really be appreciated if you could help! :) Also if you have any tips or tricks or anything that i may have done wrong then it would be nice if you could also mention that!
<html>
<head>
<title>Redirected</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<font face="verdana" />
</head>
<body>
<div class = "title">
<h1>Redirected.</h1>
</div>
<div class = "title-mobile">
<h1>☰ Redirected.</h1>
</div>
<div class="title-solgan">
<p>THE HOME OF GAMING</p>
</div>
<div class="nav-bar">
<ul>
<li>HOME</li>
<li>NEWS</li>
<li>REVIEWS</li>
<li>PLAYSTATION</li>
<li>XBOX</li>
<li>PC</li>
</ul>
</div>
<div class = "main-story">
<h1>14 Things Every Steam User Should Know </h1>
</div>
<div class = "trending-games">
<h1> Games Trending </h1>
<li>Destiny</li>
<li>Fallout 4</li>
<li>Mad Max </li>
<li>Metal Gear Solid </li>
</div>
<div class="latest-game-news">
<h1>Latest Game News </h1>
<li>Minecraft Will Support Oculus VR Next Year</li>
<li>Fallout 4 Meets Grand Theft Auto 5 in Latest PC Mod</li>
<li>Halo 6: 343 Says Sequel is in the 'Planning' Stage</li>
<li>The Sims Boss Leaves EA</li>
</div>
<div class="more-game-news">
<h1>More Game News</h1>
<li>Xbox Free Games With Gold October 2015</li>
<li>EA Working on Netflix for Games</li>
<li>Assassin's Creed Syndicate's New Story Trailer</li>
<li>Uncharted 4 Delayed</li>
</div>
<footer>This is a sticky footer</footer>
</body>
</html>
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
How can I use the HTML5 canvas element in IE?
I'm not sure what I'm doing wrong. I did what it said to do but nothing works. I'm using a grid system, but I don't think that's the problem. And I don't think it's my security settings either. Here's my HTML and Javascript if that helps.
HTML
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Zack Vivier</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!--[if IE]><script type="text/javascript" src="js/excanvas.js"></script><![endif]-->
<!-- enable HTML5 elements in IE7+8 -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
<!-- 1140px Grid styles for IE -->
<!--[if lte IE 9]><link rel="stylesheet" href="styles/ie.css" type="text/css" media="screen" /><![endif]-->
<link href="styles/styles.css" rel="stylesheet" type="text/css">
<link href="styles/1140.css" rel="stylesheet" type="text/css">
<!--css3-mediaqueries-js - http://code.google.com/p/css3-mediaqueries-js/ - Enables media queries in some unsupported browsers-->
<script type="text/javascript" src="js/css3-mediaqueries.js"></script>
<script src="js/js.js"></script>
</head>
<body>
<header>
<h1 class="hidden">Zack Vivier Home</h1>
<div class="container">
<div class="row">
<div class="fivecol">
<div class="logo"><img src="images/logo.png" alt="zack vivier logo"></div>
</div>
<div class="sevencol last">
<nav>
<h2 class="hidden">Site Navigation</h2>
<ul>
<li>Home</li>
<li>Information</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
</div>
</header>
<div class="container">
<div class="row">
<div class="twelvecol last">
<div class="lineone"></div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="twelvecol last">
<div class="caption">
<h4 id="tagLine">Image Number</h4>
</div>
<div class="slideshow">
<canvas id='showCanvas' width='1022' height='397'>Canvas Not Supported</canvas>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="threecol last">
<div class="about"><h2>About Me</h2></div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="twelvecol last">
<div class="linetwo"></div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="sevencol last">
<div class="contenthome">
<p> My Name is Zack Vivier; currently I am 19</p>
<p>years old and attend Fanshawe College for Interactive</p>
<p>Media Design and Production. I am a Designer,</p
<p>Programmer, Musician, Video Editor, and Animator.</p>
</div>
</div>
</div>
</div>
<h1 class="hidden">footer</h1>
<div class="container">
<div class="row">
<div class="twelvecol last">
<div class="footer">
<h3>Copyright © 2012 Zack Vivier. All Rights Reserved.</h3>
</div>
</div>
</div>
</div>
</body>
</html>
Javascript
// JavaScript Document
var imagePaths = new Array("images/photo_1.png", "images/game_web.jpg", "images/tattoo.jpg");
var whichImage = new Array("Graffti Project", "Game WebSite", "Tattoo Project");
var showCanvas;
var showCanvasCtx;
var imageText;
var currentImage = 0;
var currentImageText = 0;
var img = document.createElement("img");
function init() {
imageText=document.getElementById('tagLine');
showCanvas = document.getElementById('showCanvas');
showCanvasCtx = showCanvas.getContext('2d');
img.setAttribute('width','1022');
img.setAttribute('height','397');
switchImage();
setInterval(switchImage, 2500);
}
function switchImage() {
imageText.innerHTML = whichImage[currentImageText++];
img.setAttribute('src',imagePaths[currentImage++]);
img.onload = function() {
if (currentImage >= imagePaths.length) {
currentImage = 0;
currentImageText = 0;
}
showCanvasCtx.drawImage(img,0,0,1022,397);
}
window.onload = init();
Canvas is a HTML5 element which IE8 doesn't supports.
Your doctype is also wrong since you're using HTML5 set it to: "".
As said in the comments: IE8 won't support the canvas tag. However there are some plugins that mimic it's behavior. I've used this one once: http://flashcanvas.net/ and it does the job, there's another called http://code.google.com/p/explorercanvas/. but i have no comment on that one, never used, don't know what to expect.
Just one note: the fallbacks will have their limitations, but as far as 2D drawing concerns, I think these will work out for you
I have an ASP.Net with C# application.I want to have a menu and when i am with the mouse on a menu i want to show a div where i have some informations:a title,and some other options on two columns .
I wrote a Javascript method from where I want to make visible the corresponding div ,but it doesn't find my div section (it's always null) .
Can somebody tell me what's the problem ?
Below is the code.
I am begginer in ASP.Net,Javascript.Do you know an other method,better , for doing that ?(with an example please if you have)
My asp.net page :
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="Sales_Site.SiteMaster" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
<title></title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<link href="~/Styles/Menu.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form runat="server">
<div class="page">
<div class="header">
<div class="menu" >
<ul id="main-nav">
<li>Books
<div class="main-nav-sectionBooks" style="width:400px;height:250px;border-color:Blue;display:none;visibility:hidden;">
<div class="main-nav-section-left" style="float:left;width:200px;height:100px">
Books Categories :
<ul><li>Subcateg1</li></ul>
<ul><li>Subcateg2</li></ul>
<ul><li>Subcateg3</li></ul>
</div>
<div class="main-nav-section-right" style="float:right;width:200px;height:100px"></div>
Test 123
</div>
</li>
<li>Music
<div class="main-nav-sectionMusic" runat="server" style="width:400px;height:250px;border-color:Blue;display:none;visibility:hidden;">
<div class="main-nav-section-left" style="float:left;width:200px;height:100px">
Music Categories :
<ul><li>Subcateg Music 1</li></ul>
<ul><li>Subcateg Music 2</li></ul>
<ul><li>Subcateg Music 3</li></ul>
</div>
<div class="main-nav-section-right" style="float:right;width:200px;height:100px"></div>
Test 123
</div>
</li>
<li>Clothing
<div class="main-nav-sectionClothing" runat="server" style="width:400px;height:250px;border-color:Blue;display:none;visibility:hidden;">
<div class="main-nav-section-left" style="float:left;width:200px;height:100px">
Clothing Categories :
<ul><li>Subcateg Clothing 1</li></ul>
<ul><li>Subcateg Clothing 2</li></ul>
<ul><li>Subcateg Clothing 3</li></ul>
</div>
<div class="main-nav-section-right" style="float:right;width:200px;height:100px"></div>
Test 123
</div>
</li>
</ul>
</div>
</div>
<div class="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server"/>
</div>
<div class="clear">
</div>
<div class="footer">
</div>
</div>
<script type="text/javascript" language="javascript">
function Show(type) {
HideControl("main-nav-sectionBooks");
HideControl("main-nav-sectionMusic");
HideControl("main-nav-sectionClothing");
var ControlName = "main-nav-section" + type;
alert(ControlName);
var control = document.getElementById(ControlName);
if (control) {
control.style.display = 'block';
control.style.visibility = 'visible';
}
else
alert("null");
}
function HideControl(controlName) {
var control = document.getElementById(controlName);
if (control) {
control.style.display = 'none';
control.style.visibility = 'hidden';
}
}
</script>
</form>
I would just do this with CSS:
EXAMPLE
http://jsbin.com/oreqew/1/edit
HTML:
<div class="page">
<div class="header">
<div class="menu" >
<ul id="main-nav">
<li>Books
<div class="main-nav-sectionBooks" style="width:400px;height:250px;border:1px solid Blue;">
SOMETHING
</li>
</ul>
</div>
</div>
</div>
CSS:
.main-nav-sectionBooks{
display:none;
}
#main-nav li:hover div.main-nav-sectionBooks{
display:block;
}
Your problem is very simple, you do not have any "id" value with your elements, you have class attribute like class="main-nav-sectionBooks". if you add id attribute to your elements you will succeed.
Best Regards,
You should give the divs you want to show the ID isntead of class you did now.
<div class="main-nav-sectionClothing" runat="server" style...
to
<div id="main-nav-sectionClothing" runat="server" style...
That is because with your Javascript code you are trying to fetch an element of the page by id with getElementById().