can you tell me how to fix it on this code exactly? here I have two internal codes and two external (to youtube)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>LS_model</title>
<link href="ls.css" rel="stylesheet">
<link href="index.css" rel="stylesheet">
</head>
<body>
<div id="space"><br></div>
<div id="container">
<div id="wb_Image1" style="position:absolute;left:62px;top:291px;width:876px;height:524px;z-index:0;">
<img src="images/Background.png" id="Image1" alt=""></div>
<div id="wb_Image2" style="position:absolute;left:75px;top:31px;width:840px;height:260px;z-index:1;">
<img src="images/ads.gif" id="Image2" alt=""></div>
<div id="wb_Image3" style="position:absolute;left:126px;top:343px;width:140px;height:57px;z-index:2;">
<img src="images/videoss-b.gif" id="Image3" alt=""></div>
<div id="wb_Image4" style="position:absolute;left:723px;top:344px;width:140px;height:56px;z-index:3;">
<img src="images/Photos-b.gif" id="Image4" alt=""></div>
</div>
</body>
</html>
Try this
Use window.open to open two pages and remove return false from your code.
<img src="images/Photos-b.gif" id="Image4" alt="">
For opening in a new tab, use:
window.open('https://www.youtube.com/watch?v=5u7ytZmxstY', '_blank');
And for opening internal, use:
window.open('https://www.youtube.com/watch?v=5u7ytZmxstY');
Related
Hoping to have two buttons, one to "Pause" one to "Play" the MP3 audio file. Buttons show but do not pause/play the audio, Aswell as the audio does not play whatsoever. Here's my code I'm using. Thanks.
HTML
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Loadingscreen</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="script.js"></script>
</head>
<body>
<audio controls id="song">
<source src="audio/music.mp3" type="audio/mpeg">
</audio>
<button onclick="playAudio()" type="button">Play</button>
<button onclick="pauseAudio()" type="button">Pause</button>
<div class="slides slowFade">
<div class="slide">
<img src="img/image1.jpg" alt="img"/ height="100%" width="100px">
</div>
<div class="slide">
<img src="img/image2.jpg" alt="img"/ height="100%" width="100px">
</div>
<div class="slide">
<img src="img/image3.png" alt="img"/ height="100%" width="100px">
</div>
<div class="slide">
<img src="img/image4.jpg" alt="img"/ height="100%" width="100px">
</div>
</div>
</body>
</html>
JavaScript
var x = document.getElementById("song");
function playAudio() {
x.play();
}
function pauseAudio() {
x.pause();
}
You have to load your js file after loading the document.
You should put the script at the end of the HTML file. You use var x = document.getElementById("song"); to get the DOM element but the element is not loaded yet as your script is on the top of the page so you can change the code this way:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Loadingscreen</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<audio controls id="song">
<source src="audio/music.mp3" type="audio/mpeg">
</audio>
<button onclick="playAudio()" type="button">Play</button>
<button onclick="pauseAudio()" type="button">Pause</button>
<div class="slides slowFade">
<div class="slide">
<img src="img/image1.jpg" alt="img"/ height="100%" width="100px">
</div>
<div class="slide">
<img src="img/image2.jpg" alt="img"/ height="100%" width="100px">
</div>
<div class="slide">
<img src="img/image3.png" alt="img"/ height="100%" width="100px">
</div>
<div class="slide">
<img src="img/image4.jpg" alt="img"/ height="100%" width="100px">
</div>
</div>
<!-- the DOM will be available here -->
<script src="script.js"></script>
</body>
</html>
It's a good practice to load JS file at the end of the file that makes the user see HTML faster.
If for any reason you cant load the js file at the end of the page you can change your JS file this way:
function playAudio() {
const x = document.getElementById("song");
x.play();
}
function pauseAudio() {
const x = document.getElementById("song");
x.pause();
}
have you tried using javascript for audio?
such as
var myAudio = new Audio(myAudioLink)
then doing
function playMyAudio() {
myAudio.play()
}
function pauseMyAudio() {
myAudio.pause()
}
i am glad to help.
I am using swup for page transitions but nothing ever happens for my specific website. I got it to work on a simple two-page HTML example website, but doing the exact same thing for my portfolio is not working. I have been trying to figure this out for days now and I'm getting desperate.
What I've Tried
Using the script link from unpkg.
Creating a full start-up document to install Node on my website itself.
Putting the single const variable in a separate document and in the HTML file itself.
Putting the 'main id="swup" class="transition-fade' tag only on a portion of my website where I want it to point.
Checked to make sure there are no typos on my CSS classes.
Changing the file source to start with ./or/or none.
What I Need
I want to make a page transition from the portfolio part of my website to make a fade-in to the next page.
Relevant code
.transition-fade {
opacity: 1;
transition: .5s;
}
html.is-animating .transition-fade {
opacity: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght#500&family=Russo+One&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/CSS/style.css">
<link id="theme-style" rel="stylesheet" href="">
<script defer src="/app.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.13.1/js/all.js"></script>
<script defer src="/index.js" type="text/javascript"></script>
<script defer src="/node_modules/swup/dist/swup.min.js"></script>
<script defer>
const swup = new Swup();
</script>
<title>Kim Lachance</title>
</section>
<main id="swup" class="transition-fade">
<section id="post-section" class="s1">
<div class="main-container">
<h3 style="text-align: center;">Some of my projects</h3>
<div class="post-wrapper">
<div>
<div class="post">
<img class="thumbnail" src="./images/tindog.sr.png" alt="">
<div class="post-preview">
<h6 class="post-title">Tindog</h6>
<p class="post-intro">Fictional dog dating app website made with a Bootstrap framework</p>
Visit
</div>
</div>
</div>
<div>
<div class="post">
<img class="thumbnail" src="./images/omnifood.sr.png" alt="">
<div class="post-preview">
<h6 class="post-title">Omnifood</h6>
<p class="post-intro">Fictional food delivery app website made with HTML, CSS and jQuery</p>
Visit
</div>
</div>
</div>
<div>
<div class="post">
<img class="thumbnail" src="./images/klmedia.sr.png" alt="">
<div class="post-preview">
<h6 class="post-title">KL Media</h6>
<p class="post-intro">Website for my own freelancer marketing company</p>
Visit
</div>
</div>
</div>
<div>
<div class="post">
<img class="thumbnail" src="./images/drumkit.sr.png" alt="">
<div class="post-preview">
<h6 class="post-title">Drumkit Javascript</h6>
<p class="post-intro">An exercise I built to flex my javascript muscles</p>
Visit
</div>
</div>
</div>
<div>
<div class="post">
<img class="thumbnail" src="./images/dicee.sr.png" alt="">
<div class="post-preview">
<h6 class="post-title">Dicee Game Javascript</h6>
<p class="post-intro">An exercise I built to flex more javascript muscles</p>
Visit
</div>
</div>
</div>
</div>
</div>
</section>
</main>
My next page also has all of these tags and scripts on them.
Thank you!
Below is the code of the first picture (the green one). I want to modify the boxes to look like the boxes in the picture 2 (the one with the red in the middle).
Should I add another class to the img or `id? How can I modify the boxes in first pic so they will look like the ones in the second pic?
What kind of code I am supposed to write in CSS file to change the look of them?
$(document).ready(function() {
$('.carousel').carousel();
});
.carousel-item{
position: absolute;
background:green;
}
img {
width: 150px;
position: relative;
border-radius: 10px;
}
<html lang="">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="{% static 'functionality/imageslider.js' %}"></script>
<link rel="stylesheet" type='text/css' href="{% static 'blog/imageslider.css' %}">
</head>
<body>
<div class="carousel">
<div class="carousel-item" id="one"
><img src="/media/carousel-pics/photo-1454942901704-3c44c11b2ad1.jpg" alt="">
</div>
<div class="carousel-item" id="two"
><img src="/media/carousel-pics/photo-1454942901704-3c44c11b2ad1.jpg" alt="" />
</div>
<div class="carousel-item" id="three"
><img src="/media/carousel-pics/photo-1454942901704-3c44c11b2ad1.jpg" alt=""/>
</div>
<div class="carousel-item" id="four"
><img
src="/media/carousel-pics/photo-1454942901704-3c44c11b2ad1.jpg"
alt=""/>
</div>
</div>
</body>
</html>
I was doing a simple design for a mobile phonegap application and i just wanted to change the src of an image in a div according to a certain click event but this src is in another div and when the src changes according to the click the transition between the previous src of the image and the next src appears for the user and i just dont want such Defoe in the application..
So all what i need is to make the src change while moving to the other div of the app without letting the user notice such a thing
....Here are my html,css,javascript
document.getElementById("Golds").addEventListener('touchstart', function(){
window.location.href='#loginpage';
var x= document.getElementById("GymLogin");
x.src="goldsgymlogo.png";
x.style.display = "inline";
});
document.getElementById("Titans").addEventListener('touchstart', function(){
window.location.href='#loginpage';
var x= document.getElementById("GymLogin");
x.src="Titans.jpg";
x.style.display = "inline";
});
document.getElementById("Smart").addEventListener('touchstart', function(){
window.location.href='#loginpage';
var x= document.getElementById("GymLogin");
x.src="smart.png";
x.style.display = "inline";
});
document.getElementById("SamiaAllouba").addEventListener('touchstart', function(){
window.location.href='#loginpage';
var x= document.getElementById("GymLogin");
x.src="Samia-Allouba.jpg";
x.style.display = "inline";
});
document.getElementById("Fibers").addEventListener('touchstart', function(){
window.location.href='#loginpage';
var x= document.getElementById("GymLogin");
x.src="fibers.jpg";
x.style.display = "inline";
});
/*
Thats My CSS
*/
#GymLogin{
display: none;
margin-left:30%;
margin-top:15%;
max-width:135px;
max-height:135px;
}
<!--HTML CODE HERE-->
<!DOCTYPE html>
<html>
<head>
<title>Phone Gap trial</title>
<link rel= 'stylesheet' href='css/bootstrap.css' />
<link rel= 'stylesheet' href='css/font-awesome.min.css' />
<link rel= 'stylesheet' href='css/style.css' />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8" src="childbrowser.js"></script>
<script type="text/javascript" charset="utf-8" src="Torch.js"></script>
</head>
<body>
<div id="start" class="ourteam text-center">
<!--start container-->
<div class="team">
<section class="header">
<div>
<h1>Train & Game</h1>
</div>
</section>
<div class="container">
<div class="row">
<div class="col-xs-4">
<div class="person">
<img id="Golds" class="teamphotos img-circle" src="img\goldsgymlogo.png"/>
<h6>Gold's Gym</h6>
</div>
</div>
<div class="col-xs-4">
<div class="person">
<img id="Titans" class="teamphotos img-circle" src="img\Titans.jpg"/>
<h6>Titans Gym</h6>
</div>
</div>
<div class="col-xs-4">
<div class="person">
<img id="Smart" class="teamphotos img-circle" src="img\smart.png"/>
<h6>Smart Gym</h6>
</div>
</div>
</div>
<br>
<div class="row">
<div class="col-xs-6">
<div class="person">
<img id="SamiaAllouba" class="teamphotos img-circle" src="img\Samia-Allouba.jpg"/>
<h6>Samia Allouba</h6>
</div>
</div>
<div class="col-xs-6">
<div class="person">
<img id="Fibers" class="teamphotos img-circle" src="img\fibers.jpg"/>
<h6>Fibers Gym</h6>
</div>
</div>
</div>
</div>
<!--end container-->
</div>
<!--end team-->
</div>
<!--Our team div end-->
<!-- Start Login Page -->
<div data-role="page" id="loginpage" onblur="deletesrc()">
<img id="GymLogin" class="img-circle" src=""/>
<input type="text" size="15" id="Usernameinput" placeholder="Username">
<span id="asterisk1" class="asterisk"> </span>
<input type="password" id="Passwordinput" placeholder="Password">
<span id="asterisk2" class="asterisk"> </span>
<button class="btn btn-danger" id="GymName">Omar</button>
</div>
<!-- End Login Page -->
<script src="js/jquery-2.1.4.min.js"> </script>
<script src="js/jquery.mobile-1.4.5.min.js"> </script>
<script src="js/bootstrap.min.js"> </script>
<script src="js/index.js"></script>
</body>
</html>
Although there's much better ways to do what you're trying to do, you can try this it might help
Instead of changing the ".src" of the images, just have multiple images loaded and hidden, and change the the display of the one you want.
So your HTML becoms
<img id="golds" class="GymLogin img-circle" src="golds..."/>
<img class="GymLogin img-circle" src="titans..."/>
<img class="GymLogin img-circle" src="samia..."/>
<img class="GymLogin img-circle" src="fibers..."/>
Your css
.GymLogin{
opacity: 0;
}
Your javascript
document.getElementById("Golds").addEventListener('touchstart', function(){
$('.GymLogin').hide();
$('#golds').show();
});
Haven't tried it but you get the idea.
I am trying to code a carousel image slider in MVC using cshtml, the pictures are only displaying in one vertical row and isn't populating into the Carousel slider itself?
Here is what I have attempted so far:
Html.Raw("<link href='../../Content/Site.css' rel='stylesheet'>")
#Html.Raw("<script src='../../Scripts/jquery-1.5.1.min.js'></script>")
Products
<script src="Scripts/jquery.cycle.all.js"></script>
<script src="Scripts/jquery.cycle.all.js"></script>
<script type="text/javascript"> $('#slider').cycle({ fx: 'fade', speed: 'fast', timeout: 0, next: '#next2', prev: '#prev2' });
</script>
<link rel="stylesheet" href="Content/css/feature-carousel.css" charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="Content/css/feature-carousel.css" charset="utf-8" />
<script src="~/Scripts/jquery-1.10.2.js" type="text/javascript" charset="utf-8"></script>
<script src="Content/js/jquery-1.7.min.js"></script>
<script src="Content/js/jquery.featureCarousel.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function ()
{
var carousel = $("#carousel").featureCarousel({
// include options like this:
// (use quotes only for string values, and no trailing comma after last option)
// option: value,
// option: value
});
$("#but_prev").click(function () {
carousel.prev();
});
$("#but_pause").click(function () {
carousel.pause();
});
$("#but_start").click(function () {
carousel.start();
});
$("#but_next").click(function () {
carousel.next();
});
});
</script>
<center>
<div class="carousel-container"></div>
<div id="carousel">
<div class="carousel-feature">
<img class="carousel-image" alt="Image Caption" src="~/Images/1.jpg" />
<div class="carousel-caption">
</div>
</div>
<div class="carousel-feature">
<img class="carousel-image" alt="Image Caption" src="~/Images/2.jpg">
<div class="carousel-caption">
</div>
</div>
<div class="carousel-feature">
<img class="carousel-image" alt="Image Caption" src="~/Images/3.jpg">
</div>
<div class="carousel-feature">
<img class="carousel-image" alt="Image Caption" src="~/Images/4.jpg">
<div class="carousel-caption">
</div>
</div>
<div class="carousel-feature">
<img class="carousel-image" alt="Image Caption" src="~/Images/5.jpg">
<div class="carousel-caption">
</div>
</div>
<div id="carousel-left"><img src="~/Content/images/arrow-left.png" /></div>
<div id="carousel-right"><img src="~/Content/images/arrow-right.png" /></div>
</div>
</center>
I found there are multiple jQuery references in view.
<script src='../../Scripts/jquery-1.5.1.min.js'></script>
<script src="~/Scripts/jquery-1.10.2.js" type="text/javascript" charset="utf-8"></script>
<script src="Content/js/jquery-1.7.min.js"></script>
Remove multiple jQuery references from the view.
Only one is enough.
<script src="~/Scripts/jquery-1.10.2.js" type="text/javascript" charset="utf-8"></script>