Fullpage.js not working when adding a new section - fullpage.js

I was using with no problems fullpage.js when a strange thing happened. I add a section to my page (it was 4 slides, i added a new slide) and fullpage seems not to work anymore.
I tried this code https://codepen.io/alvarotrigo/pen/eNLBXo in a new page and even this doesn't work. This is the code i used to set up my page and online i can add a new section without problems. So i think the problem should be somewhere else.
<div id="enlabs">
<div class="section testo">
LUISS Enlabs è un ecosistema animato da una community in continua evoluzione, è il luogo ideale per trasformare ogni startup digitale in una realtà d’impresa, crea opportunità uniche per
gli investitori. La capacità di avere una visione è il focus del nostro progetto. Con un approccio retrofuturistico abbiamo attinto da un repertorio di immagini che richiama gli anni ’50
e ’60 del secolo scorso, un momento storico in cui grazie al boom economico e ai primi viaggi nello spazio si guardava con grande ottimismo alla tecnologia e al futuro.
</div>
<div class="section">
<div class="slide fullscreen">
<picture><source data-srcset="https://www.spazio.studio/wp-content/uploads/2019/img_nuove/enlabs/SPST_enl_01_low.jpg" media="(max-width: 500px)"> <source data-srcset=
"https://www.spazio.studio/wp-content/uploads/2019/img_nuove/enlabs/SPST_enl_01_low.jpg" media="(max-width: 800px)"><img class="full-bleed-img lazyload" data-sizes="auto" data-src=
"https://www.spazio.studio/wp-content/uploads/2019/img_nuove/enlabs/SPST_enl_01_low.jpg"></picture>
</div>
</div>
<div class="section">
<div class="bordered" style="background-image:url(http://www.spazio.studio/wp-content/uploads/2019/img_nuove/cmp_img_017.jpg)">
</div>
</div>
<div class="section">
Four
</div>
<div class="section">
Five
</div>
</div>
<script async src='https://www.spazio.studio/wp-content/uploads/lazysizes.min.js'>
</script>
<script src='https://www.spazio.studio/wp-content/uploads/easings.min.js'>
</script>
<script src='https://www.spazio.studio/wp-content/uploads/scrolloverflow.min.js'>
</script>
<script src='https://www.spazio.studio/wp-content/uploads/fullpage.js'>
</script>
<script src='https://www.spazio.studio/wp-content/uploads/jquery-3.2.1.js'>
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>
</body>
</html>
<script>
new fullpage('#enlabs', {
anchors: ['page1', 'page2', 'page3', 'page4', 'page5'],
sectionsColor: ['white', 'white', '#FFF', '#ADD8E6', '#ADD8E6'],
autoScrolling: true,
css3: true,
lazyLoading: true,
scrollOverflow: false,
lockAnchors: true,
});
</script>
I see page progress in navbar but browser window is white.

Related

x-text is not working on <H4> tag in Alpine JS. Why?

I just want to know is there an issue with my code or just some alpine js functionality. Here is my code
<div class="d-flex flex-column ml-4" x-data={ data(); }>
<span class="d-flex flex-column">
<h4 class="font-weight-bold" x-text="price"></h4>
</span>
</div>
and my JS code
<script type="text/javascript">
function data()
{
return {
price: 50
}
}
</script>
The output doesn't print anything. But, if I change the line from
<h4 class="font-weight-bold" x-text="price"></h4>
to
<p class="font-weight-bold" x-text="price"></p>
then it works fine and I got the text 50 as output. Why is this happening? Is there anything wrong that I am doing?
I believe your x-data should be x-data="data()" so that { price: 50 } is the Alpine state.
See the following pen with that change https://codepen.io/hugodf/pen/BaLERbe.

Laravel - Public directory outside project folder - Vue not working

I have searched everywhere, and all answers I found only explain how to rename the public folder. In my case, the public folder is outside the Project folder:
basefolder/
Laravel/
public_html/
I have done all changes I found for the renaming folder, and all works except for vue.
In the webpack file i entered this:
mix.setPublicPath('../public_html/');
mix.js('resources/js/app.js', 'js')
.sass('resources/sass/app.scss', 'css');
compiled, and it compiled the css and js file in the proper folder.
In my app.js i Declared this:
Vue.component('set-fav', require('./components/SetFavorite.vue').default);
and the file components/SetFavorite.vue exists and has its content...
<template>
<div>
<input type="image" src="/images/favorite.png" border="0" alt="Favorite" #click="setfavorite" />
</div>
</template>
<script>
export default {
props: ['photogId','galId','photoname'],
mounted() {
console.log('Component mounted.')
},
methods: {
setfavorite(){
axios.get('/' + this.photogId + '/' + this.galId + '/' + this.photoname + '/like')
.then(response => {
alert(response.data);
});
}
}
}
</script>
when i Load the page, i do not see the image. Instead in the developer console I see 2 error messages:
Uncaught SyntaxError: Cannot use import statement outside a module
and
app.js:38062 [Vue warn]: Unknown custom element: <set-fav> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
(found in <Root>)
and if I look at the source of my page, it begins like this:
<script>
import SetFavorite from "../../js/components/SetFavorite";
export default {
components: {SetFavorite}
}
</script>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
...
...
Now, relative to my index.php file, the path ../../js/components/SetFavorite does not exist.. the correct existing path would be ../Laravel/js/components/SetFavorite
What do I need to do in order to fix this?
Thank you
EDIT, code of view
#extends('layouts.client')
#section('content')
<div class="container">
#if($gallery->webgal == 1)
<div class="row d-flex justify-content-around pb-3">
<h1>{{$gallery->galname}}</h1>
</div>
<div class=" row pt-1 card-deck">
#foreach($gallery->photos as $photo)
<div class="col-12 col-md-6 col-sm-12 p-1 " >
<div class="w-100 d-flex shadow justify-content-between card" style="background-color: lightgray">
<div class="w-100 m-0 p-0" style="width: 350px; height: 350px;">
<a data-fancybox="gallery" href="/images/{{auth()->user()->phcode}}/{{$gallery->galcode}}/wm/wm_{{$photo->filename}}">
<img class="card-img" src="/images/{{auth()->user()->phcode}}/{{$gallery->galcode}}/thumb/thumb_{{$photo->filename}}" style="
width:100%;
height:100%;
object-fit: scale-down;">
</a>
</div>
<div class="card-footer w-100 d-flex justify-content-around" style="font-size: smaller;">
<div class="d-flex justify-content-around w-100">
<div>
{{$photo->filename}}
</div>
<div>
<button>Download (Hi-Res)</button>
</div>
<div>
<button>Download (Social Res)</button>
</div>
<div>
<set-fav photogId="{{$gallery->user->phcode}}" galId="{{$gallery->galcode}}" photoId="{{$photo->filename}}" name="fav{{$photo->id}}"></set-fav>
</div>
</div>
</div>
</div>
</div>
#endforeach
</div>
#else
<div class="row d-flex justify-content-around pb-3">
<h1>Nothing here... :)</h1>
</div>
#endif
</div>
#endsection
You have 2 issues:
You should alias your components directory thanks to Webpack, by the way it will always use an absolute path
In your webpack.mix.js:
mix.webpackConfig({
resolve: {
extensions: [ '.js', '.vue' ],
alias : { '#': `${ __dirname }/resources` },
},
output: {
publicPath : '/',
chunkFilename: 'js/[name].[chunkhash].js',
},
});
import SetFavorite from '#/js/components/SetFavorite';
If the last sample is the source code of your HTML document, it doesn't work because import and export are unknown to a web browser. You have to do it from an asset, build it with Laravel Mix and include the output to your HTML thanks to
<script type="text/javascript" src="{{ mix(...) }}"></script>

Seleium/Ruby - can't access save button in a modal popup

For the life of me I cannot get control of anything in this modal. I just want to click on this dang save button.
For all the other modals that are like this I am able to use this code successfully:
#driver.switch_to.frame #driver.find_element(:xpath, "//*[contains(#name, 'modal')]")
I get a not found error this time around though.
Here's the html of the modal i'm trying to access -NOTE the modal number changes so I can't hard code modal3:
and here's the html for the button:
<html class=" ext-strict">
<head>
<body class=" ext-gecko ext-gecko2" keydownhandlerset="true">
<div id="patientChartsContainer">
<div id="patientSearch" style="display:none">
<div class="tooltipWrapper">
<div id="patientPhotoContainer"></div>
<div id="modalWindowContainer" class="">
<div class="axShadowLayer window local" style="display: block; width: 558px; height: 453px; left: 384px; right: auto; top: 228px; z-index: 1010;">
<div class="axShadowTopRow">
<div class="axShadowMiddleRow">
<div class="axShadowBottomRow">
<div class="axShadowContentLayer">
<div class="priModalWrapper">
<ul class="priModalHeader">
<div class="priModalContentBackground"></div>
<ul class="priModalFooter">
<div class="priModalContentWrapper">
<div class="priModalContentContainer">
<iframe id="modal1" class="windowFrame" name="modal1" src="/chart/ui/desktop/patientCharts/chartSummary/chartNote/createChartNote/createNoteModal.html" allowtransparency="true" frameborder="0">
<!DOCTYPE html>
<html class=" ext-strict" xmlns="http://www.w3.org/1999/xhtml">
<head>
<body class=" ext-gecko ext-gecko2" keydownhandlerset="true">
<div id="newNoteContainer" class="newEncounterNote">
<ul class="newNoteOptions">
<div class="axModalButtonsFooter">
<div class="footerButtonsWrapperRight">
<div class="buttonClass axSaveButton">
<span>Save</span>
I've tried a few things and variations of what I have below:
##driver.find_element(:xpath, "//div[#id='modalWindowContainer']/div/div[4]/div/ul/li/div[2]/div[3]").click
##driver.switch_to.frame #driver.find_element(:xpath, "//*[contains(#name, 'modal')]")
##driver.switch_to.default_content
##driver.switch_to.frame(#driver.find_element(:class, 'windowFrame'))
##driver.find_element(:css, "div.buttonClass.axSaveButton").click
##driver.switch_to.frame #driver.find_element(:class, 'windowFrame')
##driver.find_element(:xpath => "//button/span[contains(text(),'Save')]").click
/html/body/div1/div/div/div/span
Try:
##driver.switch_to.default_content
##driver.switch_to.frame #driver.find_element(:class, 'windowFrame')
##driver.find_element(:css, "div.buttonClass.axSaveButton > span").click
This will:
reset the frame context
find the proper iframe
Click on the span (which has the save text, and might hold the listener) element in the <div class="buttonClass axSaveButton"> tag

wechat upload thumb media file issue

I am currently writing the node application using wechat admin platform api. However i am currently stuck when i try to upload the thumb media image file to the tencent server using admin platform api. I have a subscriber account registered with wechat and i am able to get the access token and follower list of my wechat account successfully using admin api platform.
Following is the wechat code i am using to upload to the wechat server :
function uploadThumb(){
console.log('Inside uploadThumb');
var promise = new Promise(function(resolve,reject){
resolve({
then:function(onfullfill,onreject){
fs.readdir(thumb_dir,function(err,files){
if (err){
onreject();
throw err;
}
files.forEach(function(file){
fs.stat(thumb_dir+file, function(err, stats) {
var type = "thumb";
var upload_url = "http://file.api.wechat.com/cgi-bin/media/upload?access_token="+access_token+"&type="+type;
console.log('file name :'+file+': size :'+stats.size);
restler.post(upload_url, {
multipart: true,
data: {
"media['filename']": file,
"media['content type']":"image/png",
"media['file length']": stats.size,
"media['file']": restler.file(thumb_dir+file, null, stats.size, null, "image/png")
}
}).on("complete", function(fdata,response) {
console.log('Status: ' + response.statusCode);
console.log('Thumb image data :'+fdata);
console.dir(response);
//var obj = JSON.parse(fdata);
//saveUploadMediaToDB(obj,file).then(onfullfill());
onfullfill();
});
});
});
});
}
});
});
return promise;
}
When i run the above function in node , i get the HTTP response code as 502. And text/html response below :
Status: 502
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>???</title>
<style type="text/css">
.dn{display:none;}
.db{display:block;}
.dib{display:inline-block;}
.b_dib{display:inline-block;*display:inline;*zoom:1;}
.di{display:inline;}
.vh{visibility:hidden;}
.vv{visibility:visible;}
.rel{position:relative;}
.abs{position:absolute;}
.oh{overflow:hidden;}
.z{*zoom:1;}
.l{float:left;}
.r{float:right;}
.cl{clear:both;}
.group{*zoom:1;}
.group:after{content:"\200B";display:block;height:0;clear:both;}
.tc{text-align:center;}
.tr{text-align:right;}
.tl{text-align:left;}
.tj{text-align:justify;*text-justify:distribute;}
.vt{vertical-align:top;}
.vm{vertical-align:middle;}
.vb{vertical-align:bottom;}
.f0{font-size:0;}
.fa{font-family:Arial;}
.fs{font-family:SimSun;}
.fyh{font-family:"Microsoft YaHei";}
.indent{text-indent:2em;}
.n{font-weight:400;font-style:normal;}
.b{font-weight:700;}
.i{font-style:italic;}
.tdn{text-decoration:none;}
.tdn:hover{text-decoration:none;}
.poi{cursor:pointer;}
.text-hide{line-height:999em;overflow:hidden;}
.drop_hl_extra{padding-left:999em;margin-left:-999em;}
.drop_vb_extra{padding-bottom:999em;margin-bottom:-999em;}
html{-webkit-text-size-adjust:none;}
body,h1,h2,h3,h4,h5,p,ul,ol,dl,dd{margin:0;}
ul,ol{padding-left:0;list-style-type:none;}
a img{border:0;}
body{background-color:#EAEAEA;font-family:"Microsoft YaHei",Helvetica,Verdana,Arial,Tahoma;font-size:14px;color:#222222;}
.logo{padding-top:25px;}
.wrapper{width:960px;margin-left:auto;margin-right:auto;}
.container{margin-top:20px;box-shadow:0 3px 3px #ddd;-moz-box-shadow:0 3px 3px #ddd;-webkit-box-shadow:0 3px 3px #ddd;border-radius:3px;-moz-border-rad
.err_wrapper{overflow:hidden;*zoom:1;padding:100px 260px 100px 260px;}
.err_icon_holder{float:left;}
.err_content{margin-left:180px;margin-top:30px;}
.err_t{font-weight:700;font-size:20px;line-height:30px;}
.err_text{line-height:28px;}
.footer{padding-top:40px;font-size:12px;color:#999999;text-shadow:0 1px 1px #ffffff;text-align:center;}
.page_link a{color:#4d5d2c;text-decoration:none;}
.err_icon{display:inline-block;width:170px;height:130px;background:transparent url("http://res.wx.qq.com/mpres/htmledition/images/icon_page_err.png") n
</style>
</head>
<body>
<div class="header">
<div class="wrapper">
<h1 class="logo"><img src="http://res.wx.qq.com/mpres/htmledition/images/login/logo.png" alt="??????"></h1>
</div>
</div>
<div class="main">
<div class="wrapper">
<div class="container">
<div class="err_wrapper">
<span class="err_icon_holder"><i class="err_icon page_503"></i></span>
<div class="err_content">
<h3 class="err_t">503 : HTTP Error 503</h3>
<p class="err_text">???????,????????</p>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="wrapper">
<p class="page_link">
<a target="_blank" href="http://www.tencent.com/zh-cn/index.shtml">????</a>
|
<a target="_blank" href="http://mp.weixin.qq.com/cgi-bin/readtemplate?t=wxm-agreement&type=info&lang=zh_CN">????</a>
|
<a target="_blank" href="http://kf.qq.com/special_auto/weixin.html">????</a>
</p>
<p class="copyright">
Copyright c 2012-2013 Tencent. All Rights Reserved.
</p>
</div>
</div>
</body>
</html>
Please help me by pointing in correct direction , whether this approach is correct or am i doing something basically wronge.
Based on what I've been able to find in the Restler documentation, and comparing it with the WeChat API documentation, it seems like you might be specifying the incorrect request parameter.
I think you might need to replace
restler.post(upload_url, {
multipart: true,
data: {
"media['filename']": file,
"media['content type']":"image/png",
"media['file length']": stats.size,
"media['file']": restler.file(thumb_dir+file, null, stats.size, null, "image/png")
}
[...]
With something along these lines:
restler.post(upload_url, {
multipart: true,
data: {
"media": restler.file(thumb_dir+file, null, stats.size, null, "image/png")
}
[...]

Google rich snippet - Missing required field "entry-title"

I was trying to see if the microdata was configured well on my website, using the google structured data testing tool and it gives some errors. In this question, I'm asking about the first: Missing required field "entry-title".
I already enclosed the title of the post in entry-title class but it is not working. It is the code of my page that regards the error:
<header itemscope itemtype="http://schema.org/Article">
<figure>
<img width="674" height="250" src="http://www.primapaginaonline.it/wp-content/uploads/2014/07/tagliodiverso-674x250.jpeg?3ef148" class="attachment-topimage wp-post-image" alt="tagliodiverso" itemprop="thumbnailUrl" /></figure>
</figure>
<div itemprop="articleSection" class="single-page-category">Cultura</div>
<h1 itemprop="headline" class="entry-title single-entry-title"> Tagliodiverso, gli appuntamenti della Pietraia dei Poeti</h1>
<div itemprop="description" class="meta-description">Con Tagliodiverso il museo a cielo aperto Pietraia dei Poeti stila un cartellone di incontri culturali incentrati sulla disabilità e l'accessibilità.</div>
<div class="single-post-meta"></div>
</header>
Solved, I must enclose all the article in a <div class="hentry"> tag and all works!

Resources