index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
<script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>
</body>
</html>
App.vue
<script setup lang="ts">
import { Previewer } from 'pagedjs';
</script>
<template>
<div class="pagedjs_pages">
Lorem ipsum dolor, sit amet consec.......
hellllloooooo!!!!!
</div>
<!-- hellllloooooo!!! disappeared -->
css in App.vue
#page {
size: A4 landscape;
// tried size: 297mm 210mm;
}
result:
what I expected is an A4 landscape page, but it seems like, the "page" is landscape, which is correct, but the content is like vertical A4, and not showing my full content, cut the rest content at bottom, which part did I miss?
I found another reference, for anyone who needs it.
// App.vue
<script lang="ts">
import { onMounted } from 'vue';
onMounted(()=>{
let paged = new Previewer();
let flow = paged.preview().then((flow) => {
console.log("Rendered", flow.total, "pages.");
})
});
</script>
<template ref="template">
<div>hello</div>
</template>
<style lang="scss">
#import 'pagedjs.scss';
</style>
// pagedjs.scss
#page {
size: A4 landscape !important;
#top-left {
content: "should be shown on the top-left";
font-size: 15px;
color: #979797;
text-align: left;
}
}
// styling....
Related
I'm trying to get this header component to be recognised and it just isnt. I've tried messing setting eslint to strict, and messing with my syntax to no avail. I don't get it, this should be so simple. ANy help would be appreciated.
App.vue
<template>
<div class="container">
<header />
</div>
</template>
<script>
import header from './components/header'
export default {
name: 'App',
components: {
header,
}
}
</script>
<style>
</style>
main.js
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
index.html
<!DOCTYPE html>
<html lang="">
<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">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app">
</div>
<!-- built files will be auto injected -->
</body>
</html>
header.vue
<template>
<header>
<h1>Component header</h1>
</header>
</template>
<script>
export default {
name: 'header',
};
</script>
<style>
header {
display: flex;
}
</style>
Any help would be awesome. Thankyou.
The main.jsneeds to be imported into the index.html:
<body>
<div id="app"></div>
<script type="module" src="/src/js/main.js"></script>
</body>
(using the correct path)
It is better to rename your header component to another word, because <header> is used as a standard tag name in html
Just wanted to ask a quick question with my jquery code. just started using Jquery/JS and I feel like there is a cleaner way to do this. It does fade to "and much more" but when it goes back, its not a fade its more of a switch.
$(document).ready(function() {
setInterval(swapText, 4000);
function swapText(){
$("#profile-text-fade").fadeOut(500, function() {
$(this).fadeIn(1000).delay(2000);
$(this).html('and much more!');
$(this).fadeIn(2000, function () {
$(this).html('In the making, Soon to show all the work I can crate!');
});
});
}
});
body {
background-color: #FFC85E;
}
.aligh {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.jumbotron_resize {
padding-top: 18%;
padding-bottom: 10em;
margin-bottom: 10em;
background-color: #FFC85E;
font-size: 1.2em;
}
h1, p{
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Profile Test Page">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="Salvador Cervantes">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel='stylesheet' type:'text/css' href='../CSS/main.css'>
<title>
Test page
</title>
</head>
<body>
<div class="align">
<div class="jumbotron jumbotron-fluid jumbotron_resize">
<div class="container">
<h1 class="display-3">test Profile</h1>
<p id='profile-text-fade' class="lead">In the making, Soon to show all the work I can crate!</p>
</div>
</div>
<footer>
<div>
<p>© 2017
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<script src='../js/main.js'></script>
</body>
</html>
Now what I'm trying to do is to fadeout the text that is on the webpage and replace it with "and much more!" and then fade back to the original text of "in the making...". right now, the last part just snaps back to place and dones't fade. Any help would be amazing!
Thank you
Your text is not fading in as you don't fade it out. ie it does: $("#div").fadeIn().fadeIn()
Change your last fadeIn to:
$(this).fadeOut(500, function() {
$(this).fadeIn(2000, function () {
$(this).html('In the making, Soon to show all the work I can crate!');
You might like to consider a refactor to create a list of messages and then simply loop through them. This will also be re-usable and allow you to add more messages without lots of nasty callback-chaining, eg:
var msgs = ["msg1", "msg2"];
var indx = 0;
$("#div").text(msgs[indx]);
setInterval(function() {
$("#div").fadeOut(
500,
function() {
indx++;
if (indx>=msgs.length) indx=0;
$(this).text(msgs[indx]);
$(this).fadeIn(500);
});
}, 3000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='div'>initial message</div>
I think this is what you needed edited your code, you have to fadeOut it before the last fadeIn, (i have slightly increased the interval for some smooth effect)
$(document).ready(function() {
swapText();
setInterval(swapText, 6000);
function swapText(){
$("#profile-text-fade").stop();
$("#profile-text-fade").fadeOut(1500, function() {
$(this).html('and much more!');
$(this).fadeIn(1500);
$(this).fadeOut(1500, function () {
$(this).fadeIn(1500);
$(this).html('In the making, Soon to show all the work I can crate!');
});
});
}
});
body {
background-color: #FFC85E;
}
.aligh {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.jumbotron_resize {
padding-top: 18%;
padding-bottom: 10em;
margin-bottom: 10em;
background-color: #FFC85E;
font-size: 1.2em;
}
h1, p{
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Profile Test Page">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="Salvador Cervantes">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel='stylesheet' type:'text/css' href='../CSS/main.css'>
<title>
Test page
</title>
</head>
<body>
<div class="align">
<div class="jumbotron jumbotron-fluid jumbotron_resize">
<div class="container">
<h1 class="display-3">test Profile</h1>
<p id='profile-text-fade' class="lead">In the making, Soon to show all the work I can crate!</p>
</div>
</div>
<footer>
<div>
<p>© 2017
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<script src='../js/main.js'></script>
</body>
</html>
So I just got comfortable with ReactJS within a few and want to actually start creating things with it. Before starting to really get into coding it, I made a basic test to see if React is doing what it is supposed to, and it's not. It's not rendering at all, and I don't see any Syntax errors in the code.
<style> in the index file is just for test of course, I'll use Sass later in external files of course. What am I missing or doing wrong here? Thank you in advance.
var React = require('react');
var ReactDOM = require('react-dom');
var Box = React.createClass({
render: function () {
return (
<div>
<h1>React</h1>
<h1>React2</h1>
</div>
);
}
});
ReactDOM.render(<Box />, document.getElementById('app'));
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>React App</title>
<script src="https://unpkg.com/react#15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom#15/dist/react-dom.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="app.js"></script>
<style>
body {
height: 100%;
width: 100%;
background-color: rebeccapurple;
}
#app {
height: 100px;
width: 100%;
background-color: rgba(255,255,255,0.1);
}
* {
margin: 0 auto;
padding: 0;
}
h1, h2 {
color: white;
}
</style>
</head>
<body>
<div id="app"></div>
</body>
</html>
Follow these steps it will work:
1. Remove these lines:
var React = require('react');
var ReactDOM = require('react-dom');
2. include the script after the div where you defined the id, like this:
<body>
<div id="app"></div>
<script src="app.js"></script>
</body>
3. Include the reference of babel, it required to transpile the JSX code into plain js code, include this reference in header:
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
4. Define the type of the script, like this:
<script src="app.js" type='text/jsx'></script>
Check the working example:
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>React App</title>
<script src="https://unpkg.com/react#15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom#15/dist/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type='text/jsx'>
var Box = React.createClass({
render: function () {
return (
<div>
<h1>React</h1>
<h1>React2</h1>
</div>
);
}
});
ReactDOM.render(<Box />, document.getElementById('app'));
</script>
</body>
</html>
I really need help with this one. I would like to replace the default scrollbar on my iframe with the "perfect scrollbar".
I have downloaded the perfect scrollbar. I also have included the needed files into my html document. According to the documentation, I set up the style of content container inside my iframe. The result is, that when I load my main page and move the mouse cursor on iframe, the "perfect-scrollbar" appears, but the default scrollbar remains. Next issue is, that the new scrollbar is not functional at all. It starts on the top of the iframe content and it ends at the bottom of the iframe content so I can not scroll with it.
HTML of my iframe content page:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sk" lang="sk">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" type="text/css" media="all" href="../css/iframestyle.css" />
<link rel="stylesheet" type="text/css" media="all" href="../css/perfect-scrollbar-0.4.8.min.css" />
<!-- latest jQuery direct from google's CDN -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="../js/perfect-scrollbar-0.4.8.min.js"></script>
<script type="text/javascript" src="../js/perfect-scrollbar-0.4.8.with-mousewheel.min.js"></script>
<script type="text/javascript" src="../js/scroll.js"></script>
<title>TITLE</title>
</head>
<body>
<div id="amfCont">
..... // content to be scrolled
</div>
</body>
</html>
CSS:
#amfCont {
font-family:"Verdana";
text-align:justify;
position:relative;
overflow:hidden;
}
JS (included scroll.js)
$(document).ready(function() {
"use strict";
$('#amfCont').perfectScrollbar();
});
Can anyone point out what do I have wrong here?
Try jQuery Scrollbar in your iframe.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Scrollbar Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="http://gromo.github.io/jquery.scrollbar/jquery.scrollbar.css">
<script src="//code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
<script src="http://gromo.github.io/jquery.scrollbar/jquery.scrollbar.js"></script>
<script>
jQuery(function($){
$('.page-wrapper').scrollbar();
});
</script>
<style type="text/css">
html, body, .page-wrapper {
border: none;
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}
.page-content {
padding: 10px 20px;
}
</style>
</head>
<body>
<div class="page-wrapper scrollbar-macosx">
<div class="page-content">
[CONTENT HERE]
</div>
</div>
</body>
</html>
In example above I've used scrollbar-macosx class, but you can choose any from predefined styles or make your own custom scrollbar - it's fully CSS customizable.
#amfCont needs a height property for this plugin to work. Here's the example from the docs.
#container {
position: relative;
height: 100%; /* Or whatever you want (eg. 400px) */
}
I just check out the demos for jquery-ui-map here http://jquery-ui-map.googlecode.com/svn/trunk/demos/jquery-google-maps-mobile.html#basic_map
This is exactly what I am trying to implement, its very basic, I just did as they did in the example but it doesn't seems working, I tested it on Chrome Desktop browser.
Here is the source:
<!DOCTYPE html >
<html >
<head>
<title>Map Search Page</title>
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.0.1.min.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.structure-1.0.1.min.css" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map { height: 100%; width:100%; }
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.map.full.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.map.services.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript">
var mobileDemo = { 'center': '57.7973333,12.0502107', 'zoom': 10 };
$('#home').live("pageinit", function () {
$('#map').gmap({ 'center': mobileDemo.center, 'zoom': 17 });
//$('#map').gmap('addMarker', { 'position': mobileDemo.center, 'animation': google.maps.Animation.DROP });
});
$('#home').live('pageshow', function () {
$('#map').gmap('refresh');
});
</script>
</head>
<body>
<section id="home" data-role="page">
<header data-role="header">
<h1>Multi Color Rating</h1>
</header>
<div class="content" style="width:100%; height:100%; " data-role="content">
<div id="map">
</div>
</div>
<footer data-role="footer">
<h2> All Rights Reserved © 2012</h2>
</footer>
</section>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>
This shows only header and footers for now.
There is one important thing, when I give some height to the map div, it shows Static map image.
Just got it working now, Source code is fine. There was a problem because jQuery Mobile Map respond to Touch event.
In Chrome touch event are not enabled by default, so just turn on the Touch event in Chrome Console.