I am using carousel of bootstrap v4 in a vue webapp. I am using as it is in the sample example, but it is not working in my local, neither it is giving any error.
<div class="col-xs-5 card prod-img">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img src="../../assets/animals/rat.png" alt="First slide">
</div>
<div class="carousel-item">
<img src="../../assets/animals/cat.png" alt="Second slide">
</div>
<div class="carousel-item">
<img src="../../assets/animals/dog.png" alt="Third slide">
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="icon-prev" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="icon-next" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
I am using Vue with Vue-router, however it works well when I try it in jsfiddle: here with vue-router and here without router.
I already have jquery and tether in my index.html along with bootstrap as shown following:
<link rel="stylesheet" href="/static/bootstrap.css" type="text/css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
<script src="https://use.fontawesome.com/89588fe8fc.js"></script>
<script href="/static/bootstrap.js"></script>
Please help what can be the error in my local setup, what other details should I provide which can be helpful to understand this problem.
There are no errors in the console.
I see left and right arrows also on the image, as attached below, but nothing happens when I click on those but URL changes to http://localhost:8080/myUrl#carousel-example-generic from http://localhost:8080/myUrl
Here is my index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Hey</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="/static/bootstrap.css" type="text/css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script> <!-- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script> -->
<script src="https://use.fontawesome.com/89588fe8fc.js"></script>
<script href="/static/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jssor-slider/21.1.5/jssor.slider.min.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
I have put my whole code here, which can be cloned and tested in local.
updated
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Hey</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,700' rel='stylesheet' type='text/css'>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script> <!-- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script> -->
<script src="https://use.fontawesome.com/89588fe8fc.js"></script>
<link rel="stylesheet" href="static/bootstrap.css" type="text/css">
<script href="static/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jssor-slider/21.1.5/jssor.slider.min.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
change these lines
<link rel="stylesheet" href="static/bootstrap.css" type="text/css">
<script href="static/bootstrap.js"></script>
Instead of
<link rel="stylesheet" href="/static/bootstrap.css" type="text/css">
<script href="/static/bootstrap.js"></script>
The error is here.
<script href="/static/bootstrap.js"></script>
HREF, should be SRC, and all works fine :).
Related
I am trying to code a locally saved simple web page. I have implemented the Semantic UI as the css framework. I am Trying to use a similar menu setup as one of their examples. I have the majority coded the same, yet when I click on the menu button the sidebar does not become visible.
var sideBarMenu = $('ui.sidebar');
sideBarMenu
.sidebar({
context: $('.bottom.segment')
})
.sidebar('attach events', '.main .item', 'show');
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" integrity="sha512-8bHTC73gkZ7rZ7vpqUQThUDhqcNFyYi2xgDgPDHc+GXVGHXq+xPjynxIopALmOPqzo9JZj0k6OqqewdGO3EsrQ==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js" integrity="sha512-dqw6X88iGgZlTsONxZK9ePmJEFrmHwpuMrsUChjAw1mRUhUITE5QU9pkcSox+ynfLhL15Sv2al5A0LVyDCmtUw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Rye&display=swap" rel="stylesheet">
<link rel="stylesheet" href="SVGPCGen.css">
</head>
<div class="ui fixed main menu" id="menuButton">
<a href="" class="launch icon item">
<i class="sidebar icon"></i>
</a>
</div>
<div class="ui bottom attached segment pushable">
<div class="ui inverted labeled icon left inline vertical sidebar menu">
<a class="item" id="calculate">
<i class="calculator icon"></i> Calculate
</a>
<a class="item" id="save">
<i class="save icon"></i> Save
</a>
<a class="item" id="load">
<i class="upload icon"></i> Load
</a>
</div>
<div class="pusher">
Never Mind, found the problem was missing a class description in Javascript jquery search
[enter code here][1]I'm trying to map an area on an image.
This image is part of a turn.js code.
It's a magazine flip, but now I want a clickable area on the image.
I can't figure out how to, I feel like the JS code is overwriting the clickable area.
Can somebody help me out? Would be GREAT.
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>turn.js</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body background="BOOKLETS/background.jpg" >
<div id="magazine">
<div>
<span class="text">
<img class="img-fluid" src=BOOKLETS/test1.jpg>
</span>
</div>
<div>
<span class="text">
<a herf="www.youtube.com">
<img class="img-fluid" src="BOOKLETS/test2.jpg" usemap="#image-map">
<map name="image-map">
<area href="www.youtube.com" coords="1430,1440,931,816" shape="rect">
</map>
</a>
</span>
</div>
<div>
<span class="text">
<img class="img-fluid" src=BOOKLETS/test3.jpeg>
</span>
</div>
<div>
<span class="text">
<img class="img-fluid" src=BOOKLETS/test4.jpg>
</span>
</div>
</div>
<script src="js/index.js"></script>
</body>
</html>
I was following this and more articles:
How to display a loading html page while site content loads?
and this here: my favourite:
`https://codepen.io/mimoYmima/pen/fisgL`
My problem is that if I copy and paste it 1:1 my loading page doesn't fade away but if the site is already in cache it doesn't show it.
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="HandheldFriendly" content="True">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="Dexter" content="">
<title>Code-Unknown</title>
<!-- ============ GOOGLE FONTS ============ -->
<link href='font-awesome/fonts/Raleway.css' rel='stylesheet' type='text/css'>
<link href='font-awesome/fonts/Open+Sans.css' rel='stylesheet' type='text/css'>
<link href='font-awesome/fonts/Iceberg.css' rel='stylesheet' type='text/css'>
<!-- CSS -->
<!-- Animate css -->
<link rel="stylesheet" type="text/css" href="css/animate.css">
<!-- Font Awesome CSS -->
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css" />
<!-- Custom styles CSS -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- Bootstrap v3.3.1 -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<!-- Favicons -->
<link rel="shortcut icon" href="images/Code-Unknown.ico">
<!-- Css 2.0 -->
<link rel="stylesheet" href="client-login/assets/css/form-elements.css">
<link rel="stylesheet" href="client-login/assets/css/style.css">
<link rel="stylesheet" type="text/css" href="client-login/assets/css/sweetalert.css">
<link href="assets/css/please-wait.css" rel="stylesheet">
<!-- Favicon and touch icons -->
<link rel="shortcut icon" href="assets/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="client-login/assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="client-login/assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="client-login/assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="client-login/assets/ico/apple-touch-icon-57-precomposed.png">
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="preloader"></div>
<!-- HEADER -->
<header id="top">
<canvas id="constellation"></canvas>
<div class="welcome">
<div class="logo"><img src="images/logo.png" width="190" height="190" alt=""> </div>
<h1>WELCOME</h1>
<div class="row">
<div class="col-sm-6 col-sm-offset-3 social-login">
<div class="social-login-buttons">
<a class="btn btn-link-2" href="">
<i class="fa fa-steam"></i> Steam
</a>
<a class="btn btn-link-2" href="">
<i class="fa fa-server"></i>
</a>
<a class="btn btn-link-2" href="">
<i class="fa fa-list-alt"></i>
</a>
<a class="btn btn-link-2" href="">
<i class="fa fa-list-alt"></i>
</a>
</div>
</div>
</div>
<p> </p>
</div>
</header>
<!-- END HEADER -->
<!-- END FOOTER -->
<!-- Javascript files -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Backstretch -->
<script src="js/jquery.backstretch.min.js"></script>
<!-- CountDown -->
<script src="js/jquery.countdown.js"></script>
<!-- Validate form -->
<script src="js/jquery.validate.js"></script>
<!-- Scroll Reveal -->
<script src="js/scrollReveal.js"></script>
<!-- Youtube Player -->
<!-- Smooth-scroll -->
<script src="js/smooth-scroll.js"></script>
<!-- Ajax chimp -->
<script src="js/jquery.ajaxchimp.js"></script>
<!-- TweenLite -->
<script src="js/TweenLite.min.js"></script>
<!-- EasePack -->
<script src="js/EasePack.min.js"></script>
<!-- rAF -->
<script src="js/rAF.js"></script>
<!-- Constellation -->
<script src="js/constellation.js"></script>
<!-- Custom -->
<script src="js/main.js"></script>
<!-- right click off -->
<script src="js/rightclickoff.js"></script>
<!-- loading -->
<script src="js/loading.js"></script>
</body>
</div>
</html>
Try this one
$(function() { // waiting for the page to bo be fully loaded
$('#preloader').fadeOut('slow', function() { // fading out preloader
$(this).remove(); // removing it from the DOM
});
});
#preloader {
width: 100vw; /* viewport width */
height: 100vh; /* viewport height. You can use percents, though. It requires your html and body to be 100% x 100% too */
position: fixed;
background: #333 url(http://files.mimoymima.com/images/loading.gif) center no-repeat;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="preloader"></div>
We also need your markup to narrow down your issue.
I am trying to display google & facebook sign buttons side by side in a webpage.I'm using bootstrap social to display Facebook button and Google API to display Google button.By default I'm able to display them one below the other but when I try to display them one beside the error I'm not getting the desired output..
HTML Code..
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="google-signin-scope" content="profile email">
<meta name="google-signin-client_id" content="sample_client_id.apps.googleusercontent.com">
<script src="https://apis.google.com/js/platform.js"></script>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Happy+Monkey' rel='stylesheet' type='text/css'>
<link href="css/bootstrap-social.css" rel="stylesheet">
<link href="css/font-awesome.css" rel="stylesheet">
<title>Login Page</title>
</head>
<body>
<div class ="google">
<div class="g-signin2" data-onsuccess="onSignIn"></div> <!--Google signup button-->
</div>
<!--FB signu p button-->
<div class="facebook" style="float: left;">
<a class="btn btn-block btn-social btn-facebook" onclick="facebookSignIn();" style="width:220px;">
<span class="fa fa-facebook"></span> Connect with Facebook
</a>
</div>
</body>
</html>
Current Output..
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="google-signin-scope" content="profile email">
<meta name="google-signin-client_id" content="sample_client_id.apps.googleusercontent.com">
<script src="https://apis.google.com/js/platform.js"></script>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Happy+Monkey' rel='stylesheet' type='text/css'>
<link href="css/bootstrap-social.css" rel="stylesheet">
<link href="css/font-awesome.css" rel="stylesheet">
<title>Login Page</title>
</head>
<body><div class ="google">
<div style="float:left;" class="g-signin2" data-onsuccess="onSignIn">goooogle</div>
</div>
<!--FB signu p button-->
<div class="facebook" style="float: left;">
<a class="btn btn-block btn-social btn-facebook" onclick="facebookSignIn();" style="width:220px;">
<span class="fa fa-facebook"></span> Connect with Facebook
</a>
</div></body>
Remove , to .google and .facebook you can give display: inline-block; or you can give to both float: left;
Use This CSS Style code:
.google{
float:left;
}
.facebook{
float:left;
}
Use css code:
.google, .facebook {
float:left;
}
Or
.google, . facebook{
display:inline-block;
}
It was working fine until a while ago. I did not change anything.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="author" content="">
<title></title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="css/style.css">
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<header>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">11:00 AM</li>
<li role="presentation">4:00 PM</li>
<li role="presentation">9:00 PM</li>
</ul>
</header>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="elevenam">
<div class="row">
<?php include_once 'elevenam.php'; ?>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="fourpm">
<div class="row">
<?php include_once 'fourpm.php'; ?>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="ninepm">
<div class="row">
<?php include_once 'ninepm.php'; ?>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js" ></script>
</body>
</html>
Is there something wrong with twitter bootstrap??
my js used to be link
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
from their site but it stopped working so i tried the downloaded one and it still doesn't work.
I notice in their demo, it wasn't working either.
because
`https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css%22%20integri ty=%22sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7`
is no more public. Upload a file on your server and load the css from there.