Tried the best I could and did some research, I still couldn't figure it out.
My goal is to create an easy coded lightbox for a part of my final examination website that im working on.
Please need help with this annoying problem of mine, would be very appreciated!
$(document).ready(function () {
$('button').click(function() {
$('body').append(' <div id="lb-shadow"><p id="lb-x">[ x ]</p></div> ');
$('body').append(' <div id="lb-container"></div> ');
$('#lb-shadow').fadeIn(6000 );
$('#lb-container').fadeIn(6000);
$('#lb-shadow').click(function(){
$('#lb-container').fadeOut(6000);
$('#lb-shadow').fadeOut(6000);
$('#lb-container').detach();
$('#lb-shadow').detach();
});
});
});
#lb-btn{
position:absolute;
outline:0;
border:0;
padding:5px 10px;
cursor:pointer;
background-color:black;
}
#lb-btn p{
padding:5px;
color:#ccc;
border:1px solid white;
}
#lb-shadow{
position:absolute;
left:0;
right:0;
height:100%;
width:100%;
background-color:rgba(0, 0, 0, 0.7);
}
#lb-x{
color:#ccc;
text-transform:uppercase;
float:right;
margin:15px;
cursor:pointer;
transition: ease .3s;
}
#lb-x:hover{
color:white;
}
#lb-container{
position:absolute;
height:400px;
width:600px;
left:calc(50% - 300px);
top:calc(50% - 200px);
background-color:white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Min hemsida</title>
<link rel="stylesheet" type="text/css" href="css/cindex.css">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="js/cindex.js"></script>
</head>
<body>
<button id="lb-btn"><p> Login / Register </p></button>
</body>
</html>
If the problem is the click handler, try attaching the event listener globally like so, this way should work even if the element is created after the listener. (Otherwise the duplicate comment on your question should solve the issue)
$(document).ready(function () {
$(document).on('click', '#lb-shadow', function(){
$('#lb-container').fadeOut(6000);
$('#lb-shadow').fadeOut(6000);
$('#lb-container').detach();
$('#lb-shadow').detach();
});
$('button').click(function() {
$('body').append('<div id="lb-shadow"><p id="lb-x">[ x ]</p></div>');
$('body').append('<div id="lb-container"></div>');
$('#lb-shadow').fadeIn(6000);
$('#lb-container').fadeIn(6000);
});
});
I solved it!
I just added display:block on the lb-container and lb-shadow. Apperently the fade effects trigger it automatically and I did cut down my js code aswell.
$(document).ready(function () {
$('button').click(function() {
$('body').append(' <div id="lb-shadow"><p id="lb-x">[ x ]</p></div> ');
$('body').append(' <div id="lb-container"></div> ');
$('#lb-shadow').fadeIn();
$('#lb-container').fadeIn();
$('#lb-shadow').click(function(){
$('#lb-container').fadeOut();
$('#lb-shadow').fadeOut();
});
});
});
Related
I have written this code for a marquee effect in CSS and now I am using javascript for changing the image but it is not working even though the code is correct.
please let me know what is the issue.
I have tried all the possible code and also rearrangement of the code but it is not working out.
HTML file
<!DOCTYPE html>
<html>
<head>
<title>Marquee Effect</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/b
ootstrap.min.css">
<link rel="stylesheet" type="text/css"
href="main.css">
</head>
<body>
<div class="marquee">
<img src = "2.jpg" class="img-responsive">
</div>
<script type="text/javascript">
function myTimer() {
var divtag = document.getElementByClass("marquee");
divtag.getElementByClass("img-responsive").src =
"3.jpg";
}
var fun = setInterval(myTimer, 12500);
</script>
</body>
</html>
css file
#-webkit-keyframes scroll{
0% {
-webkit-transform: translate(0,-120%);
}
50%{
-webkit-transform: translate(0,50%);
-webkit-transition-delay(1);
}
100% {
-webkit-transform: translate(0,245%);
}
}
.marquee{
width:100%;
height:100%;
overflow: hidden;
}
.marquee img{
float: right;
width:40%;
height:40%;
position: relative;
-webkit-animation:scroll 12s infinite linear;
opacity: 0.7;
}
html, body{
width:100%;
height:100%;
background-color: black;
overflow:hidden;
}
Help me
If you open up the developer tools (F12) in your browser you will see the following error message repeating:
Uncaught TypeError: document.getElementByClass is not a function at myTimer
Simply put, getElementByClass is a non-existent function. There's a getElementsByClassName function on the document object which you could use.
But, I'd recommend using the document.querySelector function which uses the CSS syntax to select the element you want. It returns a single element node. If you need to operate on multiple elements, then use its counterpart, the document.querySelectorAll function, which will return a collection of element nodes.
So here's the code that you can use in your myTimer function:
document.querySelector(".marquee .img-responsive").src="3.jpg"
This question already has answers here:
JSFiddle code not working in my own page
(3 answers)
Closed 5 years ago.
Sorry, not quite the same as previously asked versions of this. I've tried those solutions to no avail.
I have worked with some folks to iron out some issues with a snippet we were working on. Finally got it working on JSfiddle how we need it, but for whatever reason, it's not working on a plain HTML site. The content looks to load, but the preview doesnt work after choosing an image.
Here is the JSfiddle working here: http://jsfiddle.net/ELcf6/568/
Here is all of the code pieces compiled into a single page for testing. This is the example that seems to not work. Does JSfiddle inject any pre-requisites that I might be missing?
Any help in figuring this out would be greatly appreciated.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
var imageLoader = document.getElementById('filePhoto');
imageLoader.addEventListener('change', handleImage, false);
function handleImage(e) {
var filetype = imageLoader.files[0].type;
var reader = new FileReader();
reader.onload = function (event) {
if(filetype.indexOf("image") > -1){
$('.uploader img').attr('src',event.target.result);
}else if(filetype.indexOf("video") > -1){
$('.uploader video')[0].src =reader.result;
}
}
reader.readAsDataURL(e.target.files[0]);
}
</script>
<style type="text/css">
.uploader {
position:relative;
overflow:hidden;
width:300px;
height:350px;
background:#f3f3f3;
border:2px dashed #e8e8e8;
}
#filePhoto{
position:absolute;
width:300px;
height:400px;
top:-50px;
left:0;
z-index:2;
opacity:0;
cursor:pointer;
}
.uploader img,.uploader video{
position:absolute;
width:302px;
height:352px;
top:-1px;
left:-1px;
z-index:1;
border:none;
object-fit:cover;
}
</style>
<title></title>
</head>
<body>
<div class="uploader" onclick="$('#filePhoto').click()">
click here or drag here your images for preview and set userprofile_picture data
<img src=""/>
<video></video>
<input type="file" name="userprofile_picture" id="filePhoto" />
</div>
</body>
</html>
Your script is running before the DOM has loaded and that's why you are getting the "Cannot read property 'addEventListener' of null" error.
Move the script so that it is just before the close of the body tag.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
.uploader {
position:relative;
overflow:hidden;
width:300px;
height:350px;
background:#f3f3f3;
border:2px dashed #e8e8e8;
}
#filePhoto{
position:absolute;
width:300px;
height:400px;
top:-50px;
left:0;
z-index:2;
opacity:0;
cursor:pointer;
}
.uploader img,.uploader video{
position:absolute;
width:302px;
height:352px;
top:-1px;
left:-1px;
z-index:1;
border:none;
object-fit:cover;
}
</style>
<title></title>
</head>
<body>
<div class="uploader" onclick="$('#filePhoto').click()">
click here or drag here your images for preview and set userprofile_picture data
<img src=""/>
<video></video>
<input type="file" name="userprofile_picture" id="filePhoto" />
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
var imageLoader = document.getElementById('filePhoto');
imageLoader.addEventListener('change', handleImage, false);
function handleImage(e) {
var filetype = imageLoader.files[0].type;
var reader = new FileReader();
reader.onload = function (event) {
if(filetype.indexOf("image") > -1){
$('.uploader img').attr('src',event.target.result);
}else if(filetype.indexOf("video") > -1){
$('.uploader video')[0].src =reader.result;
}
}
reader.readAsDataURL(e.target.files[0]);
}
</script>
</body>
</html>
I found this piece of code on this site and want to use it in my project. However I'm not sure how to change this so it doesn't push the contents off the page when opening the menu. Any help would be greatly appreciated.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
if( $(this).text()=="Open")
{
$(this).text("Hide");
}
else
{
$(this).text("Open");
}
$("#panel").slideToggle("fast");
});
});
</script>
<style>
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
width:90px;
height: 200px
}
</style>
</head>
<body>
<button id="flip">Open</button>
<div id="panel">Menu!</div>
</div>
<p>
Something else on the page
</body>
</html>
Some of you may know those cool audio fades on scroll. i am trying to use that method on a "vimeo iframe". my intention is to let the sound of a video fade scrolling down the page and letting it get louder back again scrolling up. to be honest i am a super newbie at js and not even an advanced user of html and css so i am sorry if i am asking for too much if its not possible at all please tell me.
this is what im working with: (credits to http://codepen.io/envira/pen/AuGKh)
its basicaly a vimeo clip and the script effect for an audio fade
<html>
<head>
<meta charset="utf-8">
<title>soundtest</title>
<link href="soundcss - Kopie.css" rel="stylesheet" type="text/css">
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
var events=["abort","canplay","canplaythrough","durationchange","emptied","ended",
"error","loadeddata","loadedmetadata","loadstart","pause","play","playing",
"progress","ratechange","readystatechange","seeked","seeking","stalled",
"suspend","timeupdate","volumechange","waiting"]
$(document).ready(function() {
var audioElm = $('#scrollaudio').get(0);
audioElm.play();
var height = $(document).height() - $(window).height();
$(window).scroll(function() {
audioElm.volume = 1 - $(window).scrollTop() / height;
console.log(audioElm.volume);
});
});
</script>
<style>
.article1 {
height:800px;
background:#124A70;
color: #fff;
font-size: 2em;
text-align: center;
padding: 10px;
}
.article2 {
height: 900px;
background: #E04006;
color: #fff;
font-size: 2em;
text-align: center;
padding: 10px;
}
p {
font-family: Tahoma, Arial, sans-serif;
text-shadow: 0px 1px 1px #111;
}
#charset "utf-8";
.vimeoFrame {width:638px; height:358px; overflow:hidden; margin:0 auto;} .vimeoFrame .vimeoXtra {margin-top:-100px;}
.vimeo {display:block; width:638px; height:358px; margin:0 auto;}
.vimeoXtra {display:block; width:638px; height:558px; margin:0 auto;}
#wrapper{
height:358px;
width:638px;
background-color:
overflow:hidden;
}
</style>
</head>
<body>
<div class="article1"><p> Scroll Down</p>
<div id=wrapper">
<div class="vimeoFrame"> <iframe class="vimeoXtra" src="https://player.vimeo.com/video/98417189?autoplay=1&loop=1" frameborder="0"></iframe></div>
</div>
<audio loop id="scrollaudio" src="Material/8_Mile_Battle_Instrumental.mp3"></audio>
</div>
<div class="article2">
</div>
</body>
</html>
I am sorry if i am acting stupid and scrub-ish but i hope you can help me
kindest regards
Everything works fine - just mp3 file in your example is not available for direct download. Try other mp3: http://codepen.io/anon/pen/RPMQmq
<div class="article1"><p> Scroll Down</p>
<audio loop id="scrollaudio" src="http://www.stephaniequinn.com/Music/Allegro%20from%20Duet%20in%20C%20Major.mp3"></audio>
</div>
P.S. Use the browser console to debug the application - a great idea!
Ok so I wanted to practice some jQuery and to do it I thought I would make the animation that Jay-Z uses on his new album commercials, he has a bar over his name and it slides left while also disappearing. On top of that I wanted the text to fadeOut, fadeIn, and then fadeOut again to give it a flashing effect before it disappeared. Can someone help me with this :l, I got the layout done but the jQuery just wont work..
<!DOCTYPE html>
<html lang="en">
<head>
<title>Magna Carta</title>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#bar').delay(800).css('padding-left', 0+'px');
$('#main p').fadeOut('slow' function(){
$('#main p').fadeIn('slow' function(){
$('#main p').fadeOut('slow');
});
});
});
</script>
<style type="text/css">
body {
background-color:#f2f2f2;
margin:0px;
padding:0px;
}
#main {
width:300px;
height:200px;
position:absolute;
left:50%;
top:50%;
margin:-150px 0 0 -150px;
text-align:center;
}
#main p {
font-family:Admisi Display SSi;
font-size:64px;
}
#bar {
padding-left:180px;
height:25px;
background-color:black;
position:absolute;
z-index:2;
margin-top:87px;
margin-left:61px;
}
</style>
</head>
<body>
<div id="main">
<center>
<div id="bar"></div>
</center>
<p>JAY-Z</p>
</div>
</body>
</html>
You need to use the animate function here (before you were just setting the padding-left to 0, which happens immediately) and you have to fix your fadeOut and fadeIn callback functions:
$(document).ready(function () {
$('#bar').delay(800).animate({
'padding-left':0
}, 1000, function () {
// Animation complete.
$('#bar').delay(800).css('padding-left', 0 + 'px');
$('#main p').fadeOut('slow', function () {
$('#main p').fadeIn('slow', function () {
$('#main p').fadeOut('slow');
});
});
});
});
Demo: http://jsfiddle.net/BjBry/1/