im trying to install the universal parallax library, however when i call in my component nothing appear. no error appear also, can anyone help me? i would really appreciate, im not sure what is causing the issue but kindly help.
This is the code:
Can also access the code here:
https://codesandbox.io/s/quirky-paper-b2lm0t
index.html
<!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.0" />
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<title><%= htmlWebpackPlugin.options.title %></title>
<link rel="stylesheet" href="universal-parallax.min.css" />
<script src="https://cdn.jsdelivr.net/npm/universal-parallax#1.3.2/dist/universal-parallax.min.js"></script>
</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>
<script>
new universalParallax().init();
</script>
</html>
App.vue
<template>
<img alt="Vue logo" src="./assets/logo.png" />
<section>
<div
class="parallax"
data-parallax-image="https://marrio-h.github.io/universal-parallax/demo/img/bg1.jpg"
></div>
</section>
</template>
<script>
export default {
name: "App",
components: {},
};
</script>
<style>
.parallax__container {
clip: rect(0, auto, auto, 0);
height: 100%;
left: 0;
overflow: hidden;
position: absolute;
top: 0;
width: 100%;
z-index: -100;
}
.parallax {
position: fixed;
top: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
width: 100%;
/* BG behaviour */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
Main.js
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
Related
I need your help. The following code is a copy of a code in jsfiddle.(https://jsfiddle.net/atfLe15b)
In jsfiddle it works but the following code in my computer doesn't work.
More details, In jsfiddle show all file list in the folder. but in my computer it show only the folder name.
Anybody knows about this? thank you in advance.
here is the code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>ExampleEdit</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="/js/lib/dummy.js"></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style id="compiled-css" type="text/css">
#dropzone {
text-align: center;
width: 300px;
height: 100px;
margin: 10px;
padding: 10px;
border: 4px dashed red;
border-radius: 10px;
}
#boxtitle {
display: table-cell;
vertical-align: middle;
text-align: center;
color: black;
font: bold 2em "Arial", sans-serif;
width: 300px;
height: 100px;
}
body {
font: 14px "Arial", sans-serif;
}
</style>
<script id="insert"></script>
</head>
<body>
<p>Drag files and/or directories to the box below!</p>
<div id="dropzone">
<div id="boxtitle">
Drop Files Here
</div>
</div>
<h2>Directory tree:</h2>
<ul id="listing">
</ul>
<script type="text/javascript">
let dropzone = document.getElementById("dropzone");
let listing = document.getElementById("listing");
function scanFiles(item, container) {
let elem = document.createElement("li");
elem.innerHTML = item.name;
container.appendChild(elem);
if (item.isDirectory) {
let directoryReader = item.createReader();
let directoryContainer = document.createElement("ul");
container.appendChild(directoryContainer);
directoryReader.readEntries(function(entries) {
entries.forEach(function(entry) {
scanFiles(entry, directoryContainer);
});
});
}
}
dropzone.addEventListener("dragover", function(event) {
event.preventDefault();
}, false);
dropzone.addEventListener("drop", function(event) {
let items = event.dataTransfer.items;
event.preventDefault();
listing.innerHTML = "";
for (let i=0; i<items.length; i++) {
let item = items[i].webkitGetAsEntry();
if (item) {
scanFiles(item, listing);
}
}
}, false);
</script>
</body>
</html>
Your code is working for me!
try to change your file name to *.html (index.html)
You need to add /js/lib/dummy.js and /css/result-light.css files.
I am triying to install a floating likebox in prestashop website
<script type="text/javascript">
/*<![CDATA[*/
jQuery(document).ready(function() {jQuery(".abtlikebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);});
/*]]>*/
</script>
<style type="text/css">
.abtlikebox{background: url("http://4.bp.blogspot.com/-mMtB2ANqowQ/T6es-PuSR2I/AAAAAAAAAjM/LDamrUnMJJc/s320/fb1-right.png") no-repeat scroll left center transparent !important; float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.abtlikebox div{ padding: 0; margin-right:-8px; border:4px solid #3b5998; background:#fafafa;}
.abtlikebox span{bottom: 4px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.abtlikebox span a{color: gray;text-decoration:none;}
.abtlikebox span a:hover{text-decoration:underline;}
}
</style>
<div class="abtlikebox" style="">
<div>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fallbloggingtips&width=245&colorscheme=light&show_faces=true&border_color=white&connections=9&stream=false&header=false&height=270" scrolling="no" frameborder="0" scrolling="no" style="border: white; overflow: hidden; height: 270px; width: 245px;background:#fafafa;"></iframe><span></span>
</div>
</div>
The problem that all website break when i add jquery in head
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
How to use this code without jquery.min.js?
I think that jquery are included in prestashop
I am new at this. I have cobbled together code from various examples. I am trying to create a map with a search widget and in which the popup info comes up in the bar at the bottom. I can't seem to do both.
When parser.parse() is commented out:
(1) the search widget appears, but doesn't have full functionality (no popup, no zoom).
(2) the popup information does not appear in the bottom bar
When parser.parse() isn't commented out, the search widget does not appear at all, but the popup information shows in the bottom bar when I click a feature.
What am I doing wrong?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Garbage and Recycling</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.15/dijit/themes/claro/claro.css" />
<link rel="stylesheet" href="https://js.arcgis.com/3.15/esri/css/esri.css" />
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open Sans">
<style>
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
margin:0;
font-family: "Open Sans";
}
#search{
display:block;
background-color: white;
position: absolute !important;
top: 20px;
right: 20px;
}
#container{
width: 100%;
position: absolute;
bottom:0;
background-color:rgba(0,0,0,0.8);
color: white;
}
#instructionDiv{
font-style:italic;
}
#zoneDiv{
font-weight: bold;
padding-bottom:0;
}
#linkDiv{
padding-top:0;
}
#garDiv{
padding-bottom: 0;
}
#recDiv{
padding-top:0;
}
#map {
padding:0;
}
.nav {
padding: 5px 10px;
background: #4479BA;
color: #FFF;
border-radius: 5px;
border: solid 1px #20538D;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
}
</style>
<script src="https://js.arcgis.com/3.15/"></script>
<script>
require([
"dojo/on",
"dojo/_base/connect",
"dojo/dom",
"dijit/registry",
"dojo/dom-construct",
"dojo/parser",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"esri/map",
"esri/arcgis/utils",
"esri/domUtils",
"esri/dijit/Popup",
"esri/dijit/Search"
],
function(
on,
connect,
dom,
registry,
domConstruct,
parser,
BorderContainer,
ContentPane,
Map,
arcgisUtils,
domUtils,
Popup,
Search
)
{
//parser.parse();
//Create a map based on an ArcGIS Online web map id
arcgisUtils.createMap("5cdc921a8e2d4eb08ab64a63d1c46e23", "map").then
(function(response){
var map = response.map;
//set infoWindow to false
map.infoWindow.set("popupWindow", false);
initializeBottomBar(map);
//create Search
var search = new Search({map:map, enableInfoWindow: true, zoomScale: 1000}, "search");
search.startup();
});
//initialize Bottom Bar (bottom)
function initializeBottomBar(map){
var popup = map.infoWindow;
//when the selection changes, update the info bar
connect.connect(popup, "onSelectionChange", function(){
displayContent(popup.getSelectedFeature());
});
connect.connect(popup, "onSetFeatures", function(){
displayContent(popup.getSelectedFeature());
});
}
function displayContent(feature){
if(feature){
var content = feature.getContent();
registry.byId("zoneDiv").set("content", content);
}
}
});
</script>
</head>
<body class="claro">
<div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" style="width: 100%; height: 100%">
</div>
<div id="search" data-dojo-type="dijit/layout/ContentPane"></div>
<div id="container" data-dojo-type="dijit/layout/ContentPane">
<div id="instructionDiv" data-dojo-type="dijit/layout/ContentPane">Click a collection zone on the map for more details.</div>
<div id="zoneDiv" data-dojo-type="dijit/layout/ContentPane"></div>
<div id="linkDiv" data-dojo-type="dijit/layout/ContentPane"></div>
<div id="descDiv" data-dojo-type="dijit/layout/ContentPane"></div>
<div id="garDiv" data-dojo-type="dijit/layout/ContentPane"></div>
<div id="recDiv" data-dojo-type="dijit/layout/ContentPane"></div>
</div>
</body>
</html>
include this at the end of your require array
"dojo/domReady!"
no need to put a matching argument in the function though you can for completeness and to avoid issues when you inevitably add another module to require and forget to re-order the arguments so "dojo/domReady!" comes last.
EDIT:
additionally for any widget code you should include "dojo/ready" in the require array and then wrap the widget code in
ready(function(){..widget code goes here...})
See this codepen for a working example
See my answer to this question for more details
i am new to dojo and i am trying to make a button with an image, but the image does not show, besides, when one clicks the button, it correctly shows the "hi" alert.
the "zoom_in.png" image is right in the same directory with the html. And firebug shows no errors or warnings.
Update. thanks to ed, i managed to get it working via the declarative approach
<!DOCTYPE html>
<html >
<head>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.3/dijit/themes/claro/claro.css">
<script>dojoConfig = {parseOnLoad: true}</script>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.3/dojo/dojo.js"></script>
<script>require(["dojo/parser", "dijit/form/Button"]);</script>
<style>
.zoom_in_icon {
background-image: url('zoom_in.png');
height: 25px;
width: 25px;
text-align: center;
background-repeat: no-repeat;
}
</style>
</head>
<body class="claro">
<button data-dojo-type="dijit/form/Button" data-dojo-props="iconClass:'zoom_in_icon'" type="button">
<script type="dojo/on" data-dojo-event="click" data-dojo-args="evt">
require(["dojo/dom"], function(dom){
alert( "Thank you! ");
});
</script>
</button>
<div id="result2"></div>
</body>
</html>
However, programatically, the problem persists
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Button</title>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.3/dojo/dojo.js" data-dojo-config="async: true"></script>
<style>
.zoom_in_icon {
background-image: url('zoom_in.png');
height: 250px;
width: 250px;
text-align: center;
background-repeat: no-repeat;
}
</style>
<script>
require([
"dijit/form/Button",
"dojo/domReady!"
],
function(Button) {
new Button({
title: 'Zoom in', iconClass:'zoom_in_icon',
onClick: function() { alert("hi"); }}, "zoom_in").startup();
});
</script>
</head>
<body>
<button id="zoom_in" type="button"></button>
</body>
</html>
thanks
If you want to create the button programatically you need to call startup() on the new Button, and you don't need the data-dojo-type="dijit/form/Button" or the parse in the html, if you want to create it declaratively you don't need the new button, but you need to set the icon in the html.
See the Programatic example here:
http://dojotoolkit.org/reference-guide/1.10/dijit/form/Button.html
I'm using iScroll 5 to scroll + zoom an iframe within an asp.net page.
Here is a Demo
In FireFox it seems to be freezing on mouse wheel. In all other browsers its working great. Any idea why this behavior in FF only?
Thanks in advance,
Jake
Edit: Here is the code for the page in question.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Schematic Diagram</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
<base target="_parent" href="PartSchematics3.aspx?id=<%= schematicID.ToString()%>" />
<script type="text/javascript" src="Common/iscroll-zoom.js"></script>
<script type="text/javascript">
var scroll;
function loaded() {
scroll = new IScroll('#wrapper', {
scrollbars: true,
interactiveScrollbars: true,
freeScroll: true,
scrollX: true,
scrollY: true,
zoomMin: 0.37,
zoomMax: 4,
momentum: false,
onBeforeScrollStart: null,
zoom: true,
mouseWheel: true,
wheelAction: 'zoom'
});
scroll.zoom(0.37, 0, 0, 1000);
}
//disables browser mouse scrolling
if (window.addEventListener) {
window.addEventListener('DOMMouseScroll', wheel, false);
}
function wheel(event) {
event.preventDefault();
event.returnValue = false;
}
window.onmousewheel = document.onmousewheel = wheel;
</script>
<style type="text/css">
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html {
-ms-touch-action: none;
}
body {
font-size: 12px;
font-family: ubuntu, helvetica, arial;
padding:0px;
border-spacing:0px;
background-image: none;
margin: 0px;
border: 0;
text-align: left;
overflow: hidden;
}
#wrapper {
position: absolute;
z-index: 1;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
background: #ccc;
overflow: hidden;
}
#scroller {
position: absolute;
z-index: 1;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
</style>
</head>
<body onload="loaded()">
<form id="form1" runat="server">
<div id="wrapper">
<div id="scroller">
<asp:Literal ID="litSchematicImageMap" runat="server"></asp:Literal>
</div>
</div>
</form>
</body>
</html>
Seems like an copy&paste error in iScroll-zoom.js in the _wheelZoom function:
wheelDeltaY = -e.detail / Math.abs(e.wheelDelta);
should be
wheelDeltaY = -e.detail / Math.abs(e.detail);