I tried to embed facebook post just like in the official doc. However, the post is not showing at all.
index.html
<body>
<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v16.0" nonce="UOlW2bys"></script>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
Home.vue
<div class="wrapper h-400px w-400px">
<div
class="fb-post"
data-href="https://www.facebook.com/20531316728/posts/10154009990506729/"
data-width="500"
data-show-text="true"
>
<blockquote
cite="https://www.facebook.com/20531316728/posts/10154009990506729/"
class="fb-xfbml-parse-ignore"
>
Posted by
Facebook
on <a
href="https://www.facebook.com/20531316728/posts/10154009990506729/"
>Thursday, 27 August 2015</a
>
</blockquote>
</div>
</div>
Other than that, I tried using the iframe and it is working however I would like to use SDK method.
I also tried with normal plain .html file and it is indeed working just fine. So maybe there are some adjustments that I need to make to Vuejs.
Super Thanks in advance.
Context: We can't use the full semantic ui library due to security reason. So I want to try the individual semantic ui dropdown module, because it is very good solution for a lot of data entry scenarios.
The following code works when I reference the full library, but doesn't work when I reference the individual module.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="~/lib/semantic-ui-dropdown/dropdown.css"/>
</head>
<body>
<select class="ui dropdown">
<option value="1">Email</option>
<option value="2">Text</option>
</select>
<script src="~/lib/jQuery/dist/jquery.js"></script>
<script src="~/lib/semantic-ui-dropdown/index.js"></script>
<script src="~/lib/semantic-ui-dropdown/dropdown.js"></script>
<script>
$('.ui.dropdown').dropdown();
</script>
</body>
</html>
I dug into the problem, and find the generated html is like the following:
<div class="ui dropdown selection" tabindex="0">
<select>
<option value="1">Email</option>
<option value="2">Text</option>
</select>
<i class="dropdown icon"></i>
<div class="text">Email</div>
<div class="menu" tabindex="-1">
<div class="item active selected" data-value="1">Email</div>
<div class="item" data-value="2">Text</div>
</div></div>
The result is a big UI box like control showing "Email" and when you click on it, nothing happens.
I think the problem maybe the "selection" class added to the end of the top level div. Just my guess.
Could anyone point out where I did wrong? Really want to get this working. Love the semantic ui dropdown solution.
found the cause of this problem.
semantic-ui-dropdown has an dependency on semantic-ui-transition...
just reference semantic-ui-transition before semantic-ui-dropdown will do.
just add this to the end script in your index.html
<script>
function callDropdown(){
$('.ui.dropdown')
.dropdown();
}
setTimeout(callDropdown, 3000);
Just paid for a commercial licence and trying to follow the docs but can't get the animation to work
I am using Laravel 5.4 and Vue 2
<head>
<link rel="stylesheet" href="/css/animate.min.css" />
</head>
<body>
<div id="app">
#yield('content')
</div>
<script src="/js/app.js"></script> // vue file
<script src="/js/wow.js"></script>
<script>
var wow = new WOW();
wow.init();
console.log(wow); // works fine
</script>
</body>
// content
#extends('layouts.app')
#section('content')
<div class="wow slideInLeft"> // not working
<p>Test</p> // not working when applied here either
</div>
#stop
Where am I going wrong?
update, wow is being applied to my Vue components but not native html tags.
it seems that style="visibility: hidden;" is not being overwritten.
// Vue component with working wow animation
// this component is on the same page where I want to apply wow to native html
<template name="test">
<p class="wow bounceIn>Test</p> // works
</template>
wow.js happens on page load and not on scroll
I was applying height and width constraints with CSS
Removing these made it work
There is a div in my page that for show the error message.When I refresh the page,it will appear for a while then it disappear. I added v-cloak but it doesn't work.
this is the code, showErrorMsg is false
<div v-cloak v-show="showErrorMsg" style="z-index:100" class="h5_tips tips_error">
<i></i>
<p v-text="errorMsg"></p>
</div>
How to fix this?
Just include this code to your css file
[v-cloak] { display:none; }
http://vuejs.org/api/#v-cloak
Usage example:
<div class="xpto" v-cloak>
Hello
</div>
This directive will remain on the element until the associated Vue
instance finishes compilation. Combined with CSS rules such as
[v-cloak] { display: none }, this directive can be used to hide
un-compiled mustache bindings until the Vue instance is ready.
http://vuejs.org/api/#v-cloak
I faced the same issue, and it was due to a conflicting display property on my div. To solve it, I used the !important flag on the [v-cloak] as:
[v-cloak] {
display: none !important;
}
.my-class {
display: table-cell;
}
Vue.js - 2.3.4, I added the v-cloak on the app container, adding this on the parent container, I find your not repeating the code keeping it DRY.
HTML:
<div id="app" v-cloak>
Anything inside gets the v-cloak
</div>
CSS:
[v-cloak] {
display:none;
}
Codepen Example:
https://codepen.io/Frontend/pen/RjoKQm
I fixed this problem by rewriting the CSS and adding a class in the CSS file
CSS:
[v-cloak] .v-cloak--hidden{
display: none;
}
HTML:
<div v-show="showErrorMsg" style="z-index:100" class="h5_tips tips_error v-cloak--hidden">
<i></i>
<p v-text="errorMsg"></p>
</div>
If you are using CDN to get Vue and using Bootstrap CSS then the reason might be you are loading the Bootstrap CSS in the bottom of the body tag, moving it back to the head tag worked for me. Make sure that you keep that vueJS file in the button as it is.
<HTML>
<head>
All link and script tag here
</head>
<body>
<div id='app' v-cloak>
{{ something }}
</div>
<script src="app.js"></script>
</body>
I have a scenario where I've got a search form and below, the results with a v-if block, waiting for submit.
I changed the v-if to v-show, that seemed to help. I tried the v-cloak--hidden class but didn't work either (v-cloak is already styled to display: none). What did work apparently was to set the data results container display style to none and then when submitting the form (in the processForm method), setting the display to block and show all the results.
processForm() {
// reset page number on new search
document.getElementById("data-container").style.display="block"
this.pageNumber = 1;
this.remoteRequest();
},
Without that change, on a full page refresh I could still see the moustaches coming up. Here the full HTML page, simplified.
<div id="app" v-cloak>
<main class="main-section">
<form method="POST" class="p-4 text-center" #submit.prevent="processForm">
<button type="submit" name="button" class="btn btn-primary">
Find
</button>
</form>
<!-- Results -->
<div id="data-container" class="container-fluid pt-2 pb-4" style="display:none">
<div class="row">
<div class="col">
<div id="recordsContainer" v-show="totalInScreen > 0">
<div class="card mt-5" v-for="(result, index) in results" :id="'itm-'+index" :key="result.id">
<div class="card-body">
<div class="row">
<div class="col">
<h2 class="doctor-name">{{ result.doct_name }}</h2>
<h2 class="doctor-bio">Bio</h2>
<p>{{result.doct_bio}}</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
Unfortunately the above 2 answers didn't work for me as the problem was something else. Since this questions pops up #1 on Google, I thought I'd share my solution.
If you've defined a display css rule somewhere that's more specific, it will break the v-cloak functionality. However! Do not despair - simply copy this into your CSS file and it will work!
[v-cloak] .v-cloak--block {
display: block!important;
}
[v-cloak] .v-cloak--inline {
display: inline!important;
}
[v-cloak] .v-cloak--inlineBlock {
display: inline-block!important;
}
[v-cloak] .v-cloak--hidden {
display: none!important;
}
[v-cloak] .v-cloak--invisible {
visibility: hidden!important;
}
.v-cloak--block,
.v-cloak--inline,
.v-cloak--inlineBlock {
display: none!important;
}
I found this page on SO ( Dojo: Select a tab on load depending on url parameter ) but I'm still not very clear on how this opens a tab from a URL call.
Here's my HTML.
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script LANGUAGE="JavaScript1.2" type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js"
djConfig="usePlainJson : true, parseOnLoad: true">
</script>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.form.FilteringSelect");
dojo.require("dijit.form.TextBox");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.TabContainer");
dojo.require("dojo.data.ItemFileReadStore");
</script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/claro/claro.css"/>
</head>
<body class="claro" >
<div dojoType="dijit.layout.BorderContainer" style="width: 100%; height: 100%;">
<div dojoType="dijit.layout.ContentPane" region="top">
HEADER
</div>
<div dojoType="dijit.layout.TabContainer" region="center">
<div dojoType="dijit.layout.ContentPane" title="tab1">
<A NAME="tab1help">TAB 1 HELP</A>
</div>
<div dojoType="dijit.layout.ContentPane" title="tab2">
<A NAME="tab1help">TAB 2 HELP</A>
</div>
</div>
<div dojoType="dijit.layout.ContentPane" region="bottom">
FOOTER
</div>
</div>
<script language="Javascript1.2" type="text/javascript">
SCRIPT HERE TO GENERATE DIV CONTENT
</script>
</body>
</html>
The javascript at the bottom generates DIV content that has anchors in it. The way to get to this page is by simply specifying "help.html".
Question is how do I specify in the URL (help.html) to open this page and open tab 2 (or tab 1, or tab 5?) depending on the URL. Is it even possible to do this?
As background, this is a help page that has about 10 topics (each with a tab) and it opens as a satellite window. I need to be able to open a particular tab and go to the anchor depending on what help function the surfer needs help with in the main web app window.
Many thanks!
Janie
First of all, you need to add query parameter or use hash to specify the topic number to display, for example, you can use help.html?topic=1 or help.html#1. When the page is loaded, you can get the topic number from the URL.
Then get the reference of the tab container and select the corresponding tab according to the topic number. For example:
var tabContainer = dijit.byId("myTab");
var topicNumber = 5; // Get from URL
tabContainer.selectChild(tabContainer.getChildren()[topicNumber - 1]); // Assume that to the topic number starts from 1
You can also try to assign the id to each tab, for example, topic1 for topic number 1. Then
tabContainer.selectChild(dijit.byId("topic" + topicNumber));
You can use php include.
<div dojoType="dijit.layout.ContentPane" title="tab1">
<?php include 'help.php';?>
</div>
All research I have done indicates that this can't be done from a URL call. Turns out that you open a selected tab by adding the parameter selected... example below......
<div dojoType="dijit.layout.ContentPane" title="HELP" selected="true">
Thankfully I don't have static pages (they are generated via Catalyst ) so I can generate the true condition dynamically.
Hopefully this will help if someone else has the same question. JW