Home » Jquery » javascript – Problems with jQuery plugin and jQuery social media buttons

javascript – Problems with jQuery plugin and jQuery social media buttons

Posted by: admin February 24, 2020 Leave a comment

Questions:

I have problems with jQuery plugin, which doesn’t work. I also have problems with social media buttons, which also doesn’t work (if you click the buttons, it will not open the pages which they should open, social media pages of our UAS like Facebook etc.).

The source of jQuery plugin is here (this is only plugin of this page) http://responsiveslides.com/

Sorry for my bad english, and also for my long coding, but I’m just a complete beginner with programming, especially jQuery, and therefore, pretty stupid. Hope you can help me with this mess.

Thanks awfully, if you find anything that is wrong with my code (probably there’s lot’s of mistakes) and if you can send me suggestions how to fix it. Thanks again!

HTML first page

  <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Etusivu, pohja LayoutItista!</title>
<meta name="description" content="Source code generated using layoutit.com">
<meta name="mr nothing" content="LayoutIt!">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style1.css" rel="stylesheet">
</head>
<body>
<div class="container1">
<h1><b>Tervetuloa varausjärjestelmäämme!</b></h1>
<ul class="rslides">
<li><img src="./images/1.jpg" alt=""></li>
<li><img src="./images/2.jpg" alt=""></li>
<li><img src="./images/3.jpg" alt=""></li>
</ul>        
<div class="wrapper">
<div class="oma2">
<button type="button" id="facebutton"><img src="images/fb.png" width="50" height="50">
</button>
<button type="button" id="twitbutton"><img src="images/twitter.png" width="50" height="50">
</button>
<button type="button" id="instabutton"><img src="images/insta.jpeg" width="50" height="50"></button>
<button type="button" id="tubebutton"><img src="images/tube.png" width="50" height="50">
</button>
</div>
<div class="oma3">
<img src="images/lapinamk.jpg" width="auto" height="100" class="center">
</div>
</div>
<br><br><br>
<div class="tekstikentta2">
<h4>Tämä on Lapin ammattikorkeakoulun varausjärjestelmä <span class="rese">Rese</span>!</h4><h6>(eikö olekin mielikuvituksellinen nimi...)</h6>
</div>
<div class="tekstikentta2">
<h3 class="tekstikentta2">
Eikö sinulla ole tunnuksia? Rekisteröidy alhaalla olevan lomakkeen kautta?
</h3>
</div>
<br><br>
<form role="form">
<div class="form-group">
<label for="exampleInputUsername1">Syötä käyttäjätunnus</label>
<input type="username" class="form-control" id="exampleInputUsername1">
<label for="exampleInputEmail1">
Syötä sähköpostiosoitteesi
</label>
<input type="email" class="form-control" id="exampleInputEmail1">
<label for="exampleInputPassword1">
Syötä salasanasi
</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<div class="checkbox">
</div>
<button type="button" id="registerbutton">
Rekisteröidy
</button>
<br>
<a href="./login1.html"><button type="button" id="loginbutton">
Kirjaudu sisään
</button></a>
</form>
<br>
<footer id="loppuosa">
<h6 class="copyright">Eihän näitä sivuja nyt herranjumala oikeasti kukaan kopioisi, mutta ollaan nyt olevinaan tärkeitä ja laitetaan © 2020 A L</h6>
</footer>
</div>
<script>window.Tether = {};</script>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/scripts1.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="./js/responsiveslides.min.js"></script>
</body>
</html>
HTML second page (login)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Kirjaudu sisään!</title>    
<meta name="mr nothing" content="nothing!">    
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style1.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<div class="container1">
<div class="login"><b>Login</b></div>
<div class="lapinamklogo">
<img src="images/lapinamk.jpg" width="150" height="100" class="center"></div>
<br>
<div class="ktunnus">
<form action="/action_page.php">
<br>
<input class="loginuser" type="text" value="Syötä käyttäjätunnus"></div>
<div class="ktunnus">
<input class="loginuser" type="string" value="Syötä salasana"></div>     
<div class="rememberme">
<label><input type="checkbox" name="remember"> Muista minut</label>
</div><div class="login grid-item2">
<button class="loginbutton"><b>Kirjaudu sisään</b></button></div>
<div class="signup">
<span class="psw"><a href="#">Rekisteröidy</a></span>
</div>
<div class="forgotpassword">
<span class="psw"><a href="#">Unohtuiko salasana?</a></span>
<span class="psw"><a href="./index1.html">Etusivulle</a></span>
</form>
</div>
<h6 class="copyright">Eihän näitä sivuja nyt herranjumala oikeasti kukaan kopioisi, mutta ollaan nyt olevinaan tärkeitä ja laitetaan © 2020 A L</h6>
</div>
</body>
</html>
CSS page
.container1
{
border: solid 5px darkviolet;
float:center;
display:grid;
background-color: darkturquoise;
height:100%;
width:550px;
margin: 0 auto;
text-align:center;
}
.rslides {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
}
.rslides li {
-webkit-backface-visibility: hidden;
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
}
.rslides li:first-child {
position: relative;
display: block;
float: left;
}
.rslides img {
display: block;
height: auto;
float: left;
width: 100%;
border: 0;
}
.tekstikentta1
{
display:grid;
background-color: darkturquoise;
text-align:center;
}
.wrapper
{
height: 240px;
width:300px;
}
.oma2
{
margin-top:10px;
height: 230px;
width: 140px;
float:left
}
.oma3
{ margin-top:10px;
padding-left:20px;
height: 230px;
width: 140px;
float:left
}
#facebutton
{
float:left;
display:grid;
height:50px;
width:50px;
clear:both;
}
#twitbutton
{
float:left;
display:grid;
height:50px;
width:50px;
clear:both;
}
#instabutton
{
display:grid;
height:50px;
width:50px;
clear:both;
}
#tubebutton
{
float:left;
display:grid;
height:50px;
width:50px;
clear:both;
}
.lapinamklogo
{
float:left;
display:block;
margin-top:50px;
margin-left: auto;
margin-right: auto;
width:200px;
height:100px;
}
.tekstikentta2
{
float:left !important;
margin-left: auto;
margin-right: auto;
display:grid;
height:100%;
width:500px;
background-color:darkturquoise;
clear:both;
}
.form-group
{
background-color:lightgray;
margin-left: auto;
margin-right: auto;
}
.rese
{
color:darkviolet;
}
#registerbutton
{
margin-left: auto;
margin-right: auto;
display:grid;
width:300px;
background-color:orange;
}
#loginbutton
{
margin-left: auto;
margin-right: auto;
display:grid;
width:300px;
background-color:red;
}
.login
{
display:grid;
background-color:forestgreen;
color:white;
text-align:center;
}
.rememberme
{
display:grid;
background-color:darkturquoise;
}
.signup
{
display:grid;
background-color:lightgray;
color:black;
}
.login grid-item2
{
display:grid;
background-color:lightgray;
}
.loginbutton
{
display:grid;
background-color:forestgreen;
color:white;
}
.forgotpassword
{
display:grid;
background-color:lightgray;
color:black;
width:100%;
}
.psw
{
display:grid;
}
.loginuser
{
display:grid;
float:left;
}
#loginlapinamklogo
{
float:left;
display:block;
margin-left: auto;
margin-right: auto;
width:200px;
height:100px;
}
.form-group
{
border:5px solid darkviolet;
height:250px;
width:500px;
}
#exampleInputUsername1
{
width:300px;
margin-left: auto;
margin-right: auto;
}
#exampleInputEmail1
{
width:300px;
margin-left: auto;
margin-right: auto;
}
#exampleInputPassword1
{
width:300px;
margin-left: auto;
margin-right: auto;
}
.loppuosa
{
margin-left: auto;
margin-right: auto;
}
.copyright
{
color:darkviolet;
font-size:10px;
}
.ktunnus
{
margin-left: auto;
margin-right: auto;
}
JS (and jQuery) page
$(document).ready(function() {
$(".rslides").responsiveSlides();
auto: true,             // Boolean: Animate automatically, true or false
speed: 500,            // Integer: Speed of the transition, in milliseconds
timeout: 4000,          // Integer: Time between slide transitions, in milliseconds
pager: false,           // Boolean: Show pager, true or false
nav: false,             // Boolean: Show navigation, true or false
random: false,          // Boolean: Randomize the order of the slides, true or false
pause: false,           // Boolean: Pause on hover, true or false
pauseControls: true,    // Boolean: Pause when hovering controls, true or false
prevText: "Previous",   // String: Text for the "previous" button
nextText: "Next",       // String: Text for the "next" button
maxwidth: "",           // Integer: Max-width of the slideshow, in pixels
navContainer: "",       // Selector: Where controls should be appended to, default is after the 'ul'
manualControls: "",     // Selector: Declare custom pager navigation
namespace: "rslides",   // String: Change the default namespace used
before: function(){},   // Function: Before callback
after: function(){}     // Function: After callback
});
$("#facebutton").click(function() {
faceOpen();
$("#twitbutton").click(function() {
twitOpen();
$("#instabutton").click(function() {
instaOpen();
$("#tubebutton").click(function() {
tubeOpen();
});
});
});
});
function faceOpen() {
window.open("https://www.facebook.com/LapinAMK/");
}
function twitOpen() {
window.open("https://twitter.com/LapinAMK");
}
function instaOpen() {
window.open("https://www.instagram.com/lapinamk/");
}
function tubeOpen() {
window.open("https://www.youtube.com/user/LapinAMK");
}
How to&Answer: