Show BG On Click Again - javascript

<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script>
var x = 0;
var frameVideo = "<iframe id='videoplayer' frameborder='0' src='https://www.youtube.com/embed/TPWG33dgdK4?autoplay=1&rel=0&controls=0&showinfo=0&modestbranding=1&enablejsapi=1&origin=https%3A%2F%2Fwww.google.com' width='100%' height='100%'></iframe>";
$(document).ready(function () {
$(".wwhowlbg").attr("title", "Play Video");
});
function startVideo() {
x = 1;
document.querySelector(".wwhowlbg").innerHTML=frameVideo;
}
</script>
<style type="text/css">
.wwhowlbg {
width:640px;
height:360px;
background-color:green;
background-image:url(//static1.squarespace.com/static/54f0e2f7e4b0a7bce1ae4ba2/t/5527f82de4b06a8825578580/1428682798191/?format=500w);
background-repeat:no-repeat;
background-size: 640px 400px;
cursor:pointer;
}
.wwhowlbg:hover {
background-image:url(//lifewithzooza.x10host.com/wwhowldark.png);
}
</style>
<div class="wwhowlbg" onclick="startVideo();"></div>
This is my code for a custom video player. I would like to make it so that when I click on the newly-placed iframe, it then disappears and becomes my green start page again. But, I would like it to continue from where I paused. Is this possible? Thanks.

Related

How to use JavaScript to control audio element

Firstly I'm trying not to use the default html5 standard controls and I'd be happy to use jQuery if possible but I've taken it out for now as I was unsure of what the problem is.
At the moment I'm simply trying to have a play button which plays some music once clicked, which will change to a pause button. This pause button will then obviously pause the music once clicked.
I will leave some annotation in so you can see some of the things I have tried. Currently the play button appears but nothing happens when it is clicked.
Any help would be greatly appreciated.
HTML:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="javascript/audio-controls.js"></script>
<link rel="stylesheet" href="css/menu.css">
</head>
<div id="content-container">
<audio id="music">
<source src="media/mexico-music.mp3" type="audio/mpeg"/>
</audio>
<button id="play-music-button" class="play"></button>
</div>
CSS:
#play-music-button {
height:60px;
width: 60px;
border: none;
background-size: 50% 50%;
background-position: center;
}
.play {
background: url("../assets/play.png") no-repeat;
}
.pause {
background: url("../assets/pause.png") no-repeat;
}
JS:
$(document).ready(function() {
var music = document.getElementById("music");
var play_music_button = document.getElementById("play-music-button");
function playAudio() {
if (music.paused) {
music.play();
play_music_button.innerHTML = "Pause";
/*play-music-button.className = "";
play-music-button.className = "pause";*/
} else {
music.pause();
play_music_button.innerHTML = "Resume";
/*play-music-button.className = "";
play-music-button.className = "play";*/
}
music.addEventListener('ended',function() {
play_music_button.innerHTML = "Play";
});
}
play-music-button.addEventListener("click", playAudio);
});
You're calling play_music_button as play-music-button, and you've defined that twice when you only need it inside of your defined function. And you need to add an ended event listener to set the button back to "Play"
$(document).ready(function() {
var music = document.getElementById("music");
var play_music_button = document.getElementById("play-music-button");
function playAudio() {
if (music.paused) {
music.play();
play_music_button.className = 'pause';
} else {
music.pause();
play_music_button.className = 'play';
}
music.addEventListener('ended',function() {
play_music_button.className = 'play';
});
}
play_music_button.addEventListener("click", playAudio);
});
#play-music-button {
height: 60px;
width: 60px;
border: none;
background-size: 50% 50%;
background-position: center;
}
.play {
background: url("https://image.flaticon.com/icons/png/512/0/375.png") no-repeat;
}
.pause {
background: url("http://downloadicons.net/sites/default/files/pause-icon-14021.png") no-repeat;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content-container">
<audio id="music">
<source src="http://skwaat.com/clips/iloveyou.mp3" type="audio/mpeg">
</audio>
<button id="play-music-button" class="play"></button>
</div>

How do i change an image into a different image by clicking on it with onclick?

How do i change an image into a different image by clicking on it with onclick?
#box{ height:200px; width:200px; background-color:gold; }
<body>
<div id="box"></div>
<script type="text/javascript">
document.getElementById("box").onclick = function() {
document.getElementById("box").style.display = ????
}
</script>
</body>
With jQuery:
$('your_image_id_or_selector').click(function(){
$(this).attr('src','new_image_url');
});
Update backgroundImage property in style property of html element
document.getElementById("image1").onclick = function() {
this.style.backgroundImage = 'url(img.jpg)'
}
#box {
height: 200px;
width: 200px;
background-color: gold;
}
<div id="box"></div>
<script type="text/javascript">
document.getElementById("image1").onclick = function() {
this.style.backgroundImage = 'url(img.jpg)';
}
</script>

Fading the background image of the section - only background

I have this section
<section ID="Cover">
<div id="searchEngine">hello</div>
</section>
I want to fade in/out the background image of Cover. I am using the following function to do that but it fades the whole section. Is there a way I can fade the background only? Something like
$("#Cover").css("background-image").fadeOut(); ??
(I am also setting this image for the first time in the below function)
var imageID=0;
var time=0;
function changeimage(every_seconds)
{
//change the image
if(imageID==0)
{
$("#Cover").fadeOut(time, function () {
$("#Cover").css("background-image", "url(images/cover1.jpg)");
$("#Cover").fadeIn(time);});
imageID++;
time=1000;
}
else
{
if(imageID==1)
{
$("#Cover").fadeOut(time, function () {
$("#Cover").css("background-image", "url(images/cover2.jpg)");
$("#Cover").fadeIn(time);});
imageID++;
}
else
{
if(imageID==2)
{
$("#Cover").fadeOut(time, function () {
$("#Cover").css("background-image", "url(images/cover3.jpg)");
$("#Cover").fadeIn(time);});
imageID++;
}
else
{
if(imageID==3)
{
$("#Cover").fadeOut(time, function () {
$("#Cover").css("background-image", "url(images/cover4.jpg)");
$("#Cover").fadeIn(time);});
imageID++;
}
else
{
if(imageID==4)
{
$("#Cover").fadeOut(time, function () {
$("#Cover").css("background-image", "url(images/cover5.jpg)");
$("#Cover").fadeIn(time);});
imageID=0;
}
}
}
}
}
//call same function again for x of seconds
setTimeout("changeimage("+every_seconds+")",((every_seconds)*1000));
}
I agree with TrueBlueAussie, It will be easier, if you are using instead of CSS background-img.
Here is a working sample.
<html>
<head>
<style type="text/css">
#bgImg { position: fixed; width: 100%; height: 100%; top:0; left: 0; z-index: -1;}
#mainContent{width: 960px; margin: 20px auto; padding: 15px; background: #f2f2f2; text-align: center;}
</style>
</head>
<body>
<img src="yourImg.jpg" id="bgImg">
<section id="mainContent">
<h2>Your Heading</h2>
<p>Your content....</p>
<button id="inBtn">Background Image fade in</button>
<button id="outBtn">Background Image fade out</button>
</section>
</body>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
/*
resize function
From Dave Jay's Blog
url: http://davejay.exit42design.com/entry/Design/44/
*/
function resize(){
$("#bgImg")
.width($(window).width())
.height($(window).width() * .67);
if($("#bgImg").height() <= $(window).height()){
$("#bgImg")
.height($(window).height())
.width($(window).height() * 1.5);
}
}
$(document).ready(function(){
resize();
$("#inBtn").on("click",function(){
$("#bgImg").fadeIn();
});
$("#outBtn").on("click",function(){
$("#bgImg").fadeOut();
});
});
$(window).resize(function(){ resize(); });
</script>
</html>

Non maximized browser messes up background image

I'm attempting to create a full screen changeable background image. I've spent a long time perfecting it to work on other PC's. It works perfectly on my screen, but on other monitors it changes.
The problem now is that the image is all over the place if the browser is not maximized.
It works fine once maximized.
The background image changes every 5 seconds, so it's not as simple as just setting the background image. Here is my code:
<head>
<script type='text/javascript'>
var imageID=0;
function changeimage(every_seconds)
{
//change the image
if(!imageID)
{
document.getElementById("myimage").src="Minecraft.jpg";
imageID++;
}
else if(imageID==1)
{
document.getElementById("myimage").src="Minecraft1.jpg";
imageID++;
}
else if(imageID==2)
{
document.getElementById("myimage").src="Minecraft2.jpg";
imageID++;
}
else if(imageID==3)
{
document.getElementById("myimage").src="Minecraft4.jpg";
imageID++;
}
else if(imageID==4)
{
document.getElementById("myimage").src="Minecraft5.jpg";
imageID++;
}
else if(imageID==5)
{
document.getElementById("myimage").src="Minecraft6.jpg";
imageID++;
}
else if(imageID==6)
{
document.getElementById("myimage").src="Minecraft7.jpg";
imageID=0;
}
//call same function again for x of seconds
setTimeout("changeimage("+every_seconds+")",((every_seconds)*3000));
}
</script>
<style>
#myimage {
width: 100%;
height:100%;
position: absolute;
top: 0;
left: 0;
}
</style>
<body>
<body style='background:black; '
onload='changeimage(2)'>
<div style='position:absolute;width:100%;height:100%;left:0px;top:0px;' align='center'><img id='myimage' src='Minecraft.jpg'/>
</div>
</body>
----------Edit--------------
I used your code (Hopefully correctly) but now the image isn't loading at all.
<head>
<script type='text/javascript'>
var imageID=0;
function changeimage(every_seconds)
{
//change the image
if(!imageID)
{
document.getElementByTagName("body").className="pic1";
imageID++;
}
else if(imageID==1)
{
document.getElementByTagName("body").className="pic2";
imageID++;
}
else if(imageID==2)
{
document.getElementByTagName("body").className="pic3";
imageID++;
}
else if(imageID==3)
{
document.getElementByTagName("body").className="pic4";
imageID++;
}
else if(imageID==4)
{
document.getElementByTagName("body").className="pic5";
imageID++;
}
else if(imageID==5)
{
document.getElementByTagName("body").className="pic6";
imageID++;
}
else if(imageID==6)
{
document.getElementByTagName("body").className="pic7";
imageID=0;
}
//call same function again for x of seconds
setTimeout("changeimage("+every_seconds+")",((every_seconds)*3000));
}
</script>
</head>
<body>
<body>
<style>
.pic1 { background-image: 'Minecraft.jpg'; }
.pic2 { background-image: 'Minecraft1.jpg'; }
.pic3 { background-image: 'Minecraft2.jpg'; }
.pic4 { background-image: 'Minecraft5.jpg'; }
.pic5 { background-image: 'Minecraft6.jpg'; }
.pic6 { background-image: 'Minecraft7.jpg'; }
</style>
<body style='background:black; '
onload='changeimage(2)'>
<div style='position:absolute;width:100%;height:100%;left:0px;top:0px;' align='center'><img id='myimage' src='Minecrft.jpg'/>
</div>
</body>
What am I doing wrong?
Using a 100% x 100% absolutely positioned div for your background image is probably what's causing the issue.
Switch to CSS classes on < body >
.pic1 { background-image: '../path/to/image1'; }
.pic2 { background-image: '../path/to/image1'; }
etc
And then instead of changing the src of the image tag you would change the class of < body >. This will allow you to remove the absolute positioning of that div and layout the site "normally".
You can do something like this:
var imageClass = 'pic';
if(imageID) {
imageClass += imageID;
}
document.body.className = imageClass;
imageID++;
And CSS:
.pic {background-image: url(Minecraft.jpg);}
.pic1 {background-image: url(Minecraft1.jpg);}
etc.
To resize the background, you can choose the CSS alternative, which best fits to your site, for example:
body {
background-position: 50% 0%;
background-repeat: no-repeat;
background-size: cover cover;
}
A live demo at jsFiddle.

jQuery fadeOut does not work

trying to create a fancy jQuery banner ad. My content is styled like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Open House : Banner Advertisements</title>
<style type="text/css">
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {display:block;}
body { background:#0D3405; }
#container
{
background:#000;
width:895px;
margin:25px auto;
border:solid 2px #666;
color:#eee;
padding:15px;
min-height:600px;
}
.leaderboard
{
width: 895px;
min-height:150px;
max-height:150px;
background: #FFFFFF; //url('_images/01Slide_600x300.jpg') no-repeat;
overflow:hidden;
position:relative;
top:20px;
}
.skyscraper
{
width: 150px;
min-height:600px;
background:#FFFFFF;
position:fixed;
margin-left:5px;
overflow:hidden;
}
#tiger
{
margin-left:-160px;
}
#banner1 img
{
position:relative;
height:100px;
margin-top:150px;
margin-right:180px;
}
</style>
<script type="text/javascript" src="_scripts/modernizr.min.js"></script>
</head>
<body>
<div id = "banner2" class = "skyscraper">
<img id = "tiger" src = "_images/tiger_2.png" alt = "_images/saveTiger.jpg">
</div>
<div id = "container">
<div id = "banner1" class = "leaderboard">
<h1>free smartphones</h1>
<img id = "android1" src = "_images/android.png">
<img id = "android2" src = "_images/blackberry.png">
<img id = "android" src = "_images/android2.png">
</div> </br>
</div>
</body>
<script type = "text/javascript" src = "_scripts/jquery.min.js"></script>
<script type = "text/javascript" charset = "utf-8">
$(document).ready(function() {
saveTheTiger();
})
function saveTheTiger()
{
$('#tiger').fadeOut(1000);
//animate( {'margin-left':'100px'},1000);
}
function banner1adsequence()
{
smartphones();
}
</script>
</html>
The thing is, the fadeOut does not work. if you notice the animate function that has been commented out, that does work, which I just put out there to test drive and check if the id is being called and that does work.
Can anyone pinpoint what's up here?
Thanks
Your problem is that your CSS #tiger places the img -160px off the screen. Since the class .skyscraber is only 150px in width the img will be 10px outside the screen.
In your animate you correct the margin "error" and that is why it works.

Categories