I have 2 charts(line and bar chart) and I want to change between them every 10 seconds or so. I tried Bootstrap carousel but it doesn't seems to work when I replace the image src with the id of my chart. The id for those 2 charts are:
<div id="SummaryChart"></div>
<div id="DailyBarChart"></div>
Is there a way I could make it work? Thanks!
EDIT:
<!DOCTYPE html>
<html>
<head>
<?php include 'linechart.php'; ?>
<link href="assets/plugins/bootstrap/bootstrap.css" rel="stylesheet" />
</head>
<body>
<div class="cycle-slideshow">
<div id="PieChart"></div>
<div id="DailyBarChart"></div>
</div>
<!-- end page-wrapper -->
<!-- end wrapper -->
<!-- Core Scripts - Include with every page -->
<script src="assets/plugins/bootstrap/bootstrap.min.js"></script>
<script src="assets/scripts/zingchart-html5-min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle2.js"></script>
</body>
</html>
It seems like it could only work on images.
Using jQuery.Cycle2, you could do it this way :
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://malsup.github.io/min/jquery.cycle2.min.js"></script>
<div class="cycle-slideshow" data-cycle-timeout="10000" data-cycle-slides="> div">
<div id="SummaryChart"></div>
<div id="DailyBarChart"></div>
</div>
Related
i've just started learning web dev with bootstrap.
I'm running into a problem i don't understand. When i view my project in IE or edge everything looks as expected (columns side by side):
Internet explorer vs chrome:
https://i.stack.imgur.com/CWe8Y.png
I've checked whether this is due to screen size, but the columns remain stacked vertically no matter how big I make the screen in chrome.
index.html code:
.customDiv{
margin:3px;
min-height:300px;
background-color:silver;
text-align:center;
font-size:large;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS --><link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="CustomStyles.css">
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<div class="row">
<!--Columns must always be the children of a row class-->
<div class="col-2">
<!--Content must always be inside a col class-->
<div class="customDiv">Column 1</div>
</div>
<div class="col-md-8">
<div class="customDiv">Column 2</div>
</div>
<div class="col-md-2">
<div class="customDiv">Column 3</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="bootstrap/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
Would really appreciate any help. Been stuck on this for a while and I can't find anyone else who has had this exact problem.
I downloaded demo version of particles.js and am trying to modify it using basic HTML . But none of the changes are getting reflected on the webpage. Is there any obvious thing which I am missing ? TIA
<!DOCTYPE html> <html lang="en" >
<head><meta charset="UTF-8"> <title>particles.js demo</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- particles.js container --> <div id="particles-js"></div>
<!-- stats - count particles --> <div class="count-particles">
<span class="js-count-particles">--</span> particles </div>
<!--particles.js lib - https://github.com/VincentGarreau/particles.js -->
<script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<!-- stats.js lib -->
<script src="http://threejs.org/examples/js/libs/stats.min.js"></script>
<script src="./script.js"></script>
<h1 class="main-title">Hello all </h1>
<p class="text-content">Welcome to my website! Click on a link to get started.</p>
</body>
</html>
please use position: relative to your overall container
below code will works for you ...
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>particles.js demo</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- particles.js container -->
<div id="particles-js" class="tt"></div>
<!-- stats - count particles -->
<div class="count-particles">
<span class="js-count-particles">--</span> particles </div>
<!-- particles.js lib - https://github.com/VincentGarreau/particles.js -->
<script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<!-- stats.js lib -->
<script src="http://threejs.org/examples/js/libs/stats.min.js"></script>
<script src="./script.js"></script>
<div class="body-container" style="position: relative;">
<h1 class="main-title">Hgdfgdfello all </h1>
<p class="text-content">Welcome to my website! Click on a link to get started.</p>
</div>
</body>
</html>
I can't for the life of me figure out why my jpg image isn't rendering on my local computer. I'm writing a simple web app using AngularJS.
I have the images in an "img" folder within the same directory as the home.html file.
Could it be something wrong with the picture? I'm able to open it and it looks renders fine. I don't see any errors in the console either, just a broken image. Maybe it's the way I'm using bootstrap or angular? I'm relatively new to both.
home.html code:
<!DOCTYPE html>
<html data-ng-app="MainApp">
<head>
<title>FedCup 5k</title>
<!--angular uses this base element which path to use when it gets any front end resource- this is the root b/c of "/"-->
<base href='/'>
<link rel="stylesheet" type="text/css" href="src/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="lib/bootstrap/dist/css/bootstrap.min.css">
</head>
<body>
<div class='container'>
<div class='page-header'>
<h1>FedCup 5k</h1>
<div class="row">
<div class="col-sm-12">
<img src="img/test.jpg"/>
</div>
</div>
</div>
<!--the place holder to render our view dependent on the route-->
<div class="row">
<div class="col-sm-12" data-ng-view>
</div>
</div>
</div>
<script type='text/javascript' src="lib/jquery/dist/jquery.min.js"></script>
<script type="text/css" src="lib/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="lib/angular/angular.min.js"></script>
<script type="text/javascript" src="lib/angular-route/angular-route.min.js"></script>
<script type="text/javascript" src="lib/angular-resource/angular-resource.min.js"></script>
<script type="text/javascript" src="src/app.js"></script>
<script type="text/javascript" src="src/controller.js"></script>
<script type="text/javascript" src="src/factories.js"></script>
<script type="text/javascript" src="src/filter.js"></script>
</body>
</html>
Thanks so much for your help! I'm hoping it's just something stupid I'm overlooking because I've been staring at this for so long and it looks like it should be easy.
You have to access the folder in your local directory where the images are placed
through slashes.i.e if you have folder img then you have to access it in html via
<img src="/img/test.jpg"/>
Sometimes src not work with angular. Use data-ng-src instead.
I am building a huge one-page site, so I wanted to keep my code clean. I decided to part it into several HTML files and include them in one main index.html. So I wrote a snippet of code in index.html and everything worked fine. However, as I tried to include this snippet from another file, my web page did not appear properly.
Here is the snippet I wrote:
<div class="hidden-sm hidden-xs" id="containerStart">
<div id="left" class="start">
<img src="../pics/svg/Logo%20links.svg" class="logoStart hidden img-responsive" id="logoLeft">
</div>
<div id="right" class="start">
<img src="../pics/svg/Logo%20rechts.svg" class="logoStart hidden img-responsive" id="logoRight">
</div>
<div id="captions">
<h3 class="hidden" id="mivalStart">Mival</h3>
<h5 class="hidden" id="mivalMotto">Innovative Vertriebskonzepte</h5>
</div>
</div>
Here is my index.html:
<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=no">
<!--Bootstrap css-->
<link rel="stylesheet" href="../css/bootstrap.min.css">
<!--Start animation css-->
<link rel="stylesheet" href="../css/start.css">
<link rel="stylesheet" href="../css/letterFx.css">
<title>Mival</title>
</head>
<body ng-app>
<!--Intro-->
<div ng-include src="'intro.html'"></div>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/jquery-letterfx.js"></script>
<script type="text/javascript" src="../js/angular.min.js"></script>
<script type="text/javascript" src="../js/start.js"></script>
</body>
</html>
Maybe you know any solutions for my problem?
I am having trouble getting an iFrame to display the first time that my jQuery mobile backed page loads.
I have an iFrame as follows:
<iframe id="manual" src="pdf/manual.pdf" style="width: 100%; height: 100%;"></iframe>
And for some reason, when the page loads, the iFrame fails to load with it. I can only see the PDF file if I REFRESH the page. Why is that?
Why is the PDF file not showing up in the iFrame in the first place without a page refresh?
Thanks everyone for any insight.
EDIT:
When I try to ope the page with safari, I get the following warning:
Resource interpreted as Document but transferred with MIME type application/pdf.
Could that have something to do with why the PDF doesn't load correctly?
i just tried with the rel="external" it works without refreshing.. The first link is ajax call and the second link is not. it was straight forward, not sure if im missing something else you have..
Page1.html
<!DOCTYPE html>
<html>
<head>
<title>Demo Page</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Demo Page</h1>
</div>
<div data-role="content">
Another Page
View User Manual
</div>
</div>
</body>
</html>
Page2.html
<!DOCTYPE html>
<html>
<head>
<title>Another Page</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
<div data-role="page" data-add-back-btn="true">
<iframe id="manual" src="FocusFree.pdf" style="width: 100%; height: 100%;"></iframe>
<div data-role="header" data-theme="none">
<h1>Another Page</h1>
</div>
<div data-role="content" data-theme="none">
<p>This is another page, dude.</p>
</div>
</div>
</body>
</html>
Since it is a ajax call, iframe has to be coded differently.
Check this site, has some solutions...
Site
slight modification to the code in the website to open a pdf.
Page1.html
<!DOCTYPE html>
<html>
<head>
<title>Demo Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Demo Page</h1>
</div><!-- /header -->
<div data-role="content">
<!-- this is a regular page call-->
Another Page
<!-- the functionality for this page is defined in "javascript.js" -->
<!-- we put it in a data attribute to avoid spiders spidering the link and hammering the device -->
Perform Function
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
Page2.html
<!DOCTYPE html>
<html>
<head>
<title>Another Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
<div data-role="page" data-add-back-btn="true">
<div data-role="header">
<h1>Another Page</h1>
</div><!-- /header -->
<div data-role="content">
<p>This is another page, dude.</p>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
main.js
$(document).ready(function(){
$('#perform-function').bind('click', function(){
// we're storing the link in an attribute
// called 'data-link':
var url = $(this).attr('data-link');
// create iframe if not there, comment display none to see it
if ($('#temp-iframe').length === 0) {
$('<iframe />').attr({
id: 'temp-iframe',
name: 'temp-iframe',
height: '100%',
width: '100%'
}).css({
position: 'absolute',
left: '50%',
bottom: 0
}).bind('load', function(){
}).appendTo('body');
}
// call the url into the iframe
$('#temp-iframe').attr('src', url);
// jquerymobile already does this because the link is just "#"
// but if you end up
return false;
});
});