Prevent Vue.js to display brackets on slow clients [duplicate] - javascript

This question already has answers here:
How do I hide the VueJS syntax while the page is loading?
(12 answers)
Closed 6 years ago.
I just made my first Vue.js app and it is awesome. The only problem that I have had is related to binding values on slow connections.
For example, in my template I have this code:
<div v-for="event in events">
<div class="start_time">
{{ event.start_time_formatted }}
</div>
<div class="icon_placeholder">
<img v-bind:src="event.icon" alt="Sport Image" />
</div>
<div class="event_title">
<a v-bind:href="event.url">
{{ event.title }}
</a>
</div>
<div class="button_placeholder">
<a v-bind:href="event.url" class="btn btn-filled">
Watch
</a>
</div>
</div>
But the problem is that I get this result until all my site's assets are loaded:
For example, in AngularJS example, you can bind values by using directives and prevent the brackets from being displayed.
How can I achieve this effect in Vue.js?

v-text should allow you to render more angular-ish, and and v-cloak can help you hide template content until compilation is finished for situations where you need mustache tags.

Related

Trying to understand the following HTML code [duplicate]

This question already has an answer here:
what are data-* HTML attributes?
(1 answer)
Closed 4 months ago.
<div class="off-canvas-wrap" data-offcanvas>
<div class="inner-wrap home">
<nav class="header row">
</nav>
<!-- Off Canvas Menu -->
<aside class="right-off-canvas-menu">
<!-- close the off-canvas menu -->
<!-- whatever you want goes here -->
<div class="close">
In the first line, I can understand after div the class. Then, data-offcanvas. What is this? I noticed this while viewing the "view source page" of a web page.
Please help me to understand above html code.
data-offcanvas is a non standard or custom attribute which in this case appears to have no value.
You can read more in this here:
https://www.w3schools.com/tags/att_data-.asp

How can I select an Animatedmodal to display different demos using one ID

I have a website that i am trying to personalize and I am trying to use the AnimatedModal.js framework. I have been able to display some content in one modal, but when it comes to make several modal it gets tricky, because there is just one ID. My question i, how can i use the same ID and change the content for other modals(demo03,demo04..etc.), in order to personalize each.
I will put some code in order to understand the problem
I have been reading the documentation but I am still stuck in this problem.
<!-- single work -->
<div class="col-md-4 col-sm-6 ads graphics">
<a id="demo02" href="#animatedModal" class="portfolio_item">
<img src="img/portfolio/03.jpg" alt="image" class="img-responsive" />
<div class="portfolio_item_hover">
<div class="portfolio-border clearfix">
<div class="item_info">
<span>Should open here </span> <em> ads / Graphics </em>
</div>
</div>
</div>
</a>
</div>
<!-- end single work -->
Then I have the demo where it displays the content of the modal, where it has the #animatedmodal ID
<div id="animatedModal" class="popup-modal ">
<!--THIS IS IMPORTANT! to close the modal, the class name has to match the name given on the ID -->
<div id="btn-close-modal" class="close-animatedModal close-popup-modal">
<i class="ion-close-round"></i>
</div>
<div class="clearfix"></div>
<div class="modal-content ">
<div class="container">
<div class="portfolio-padding" >
Hello World
</a>
</div>
</div>
</div>
</div>
this is my Js file where there is just one element assigned to it, to avoid showing the same content into all different classes.
$("#demo02").animatedModal();
I don't think it can be done without hacking the plugin.
As a matter of fact, the script jQuery.animatedModal ALWAYS TARGETS the page element which has id="animatedModal"
You can see the plugin source code here:
https://cdn.jsdelivr.net/npm/animatedmodal#1.0.0/animatedModal.js
...
//Defaults
var settings = $.extend({
modalTarget:'animatedModal',
...
Here is the AnimatedModal reference:
https://joaopereirawd.github.io/animatedModal.js/
At the bottom of the page, I can't see any OPTION regarding how to specify a different target, all options are about styles and animation features.
At this point, I think the only way to allow multiple modals on the same page is to rewrite the plugin, but I'm pretty sure you don't want to choose this way.

Preventing Specific Anchors from Adding Irrelevant Entries to Browser History? [duplicate]

This question already has an answer here:
Is There an Alternative Method to Mimic the Behavior of an Anchor Link/Target Pseudo-Class?
(1 answer)
Closed 5 years ago.
Is it possible to prevent selected anchors from adding to the browser's history?
For a site I am working on now, this is a particular issue when I try to prompt back to a previous page. By doing so the anchors repeat in the order they where activated, and I have to click back more than once before returning back to the previous page.
Here's some code I am currently working with. Is there a function I can implement to achieve this result?
<!-- Image with Anchor to Open Lightbox Window -->
<div class="container">
<a href="#view">
<div class="pic">
<img src="https://URLTOPIC.jpg">
</div>
</a>
</div>
<!-- Lightbox Prompt with Anchor to Close Window -->
<div class="customlightbox lb-animate" id="view">
<div class="customlightbox-imgwrap">
<img class="imgsrc" id="customlightbox-img" src="">
</div>
</div>
<div id="customlightbox-controls" class="lb-animate">
<a id="close-customlightbox" class="lb-animate" href="#!"></a>
</div>
Any help would be much appreciated!
When using a empty anchor, for example <a id="close-customlightbox" class="lb-animate" href="#!"></a> which is used as a button, you can set the href this way that will disable the anchor events <a id="close-customlightbox" class="lb-animate" href="javaScript:void(0);"></a>
You can read more about the javascript URI scheme What does "javascript:void(0)" mean?
For the links you are using to trigger the models, avoid the default behavior for it to be added to the window.history object
document.querySelector('.trigger').addEventLister('click', function(e){
e.preventDefault();
//Do your stuff
});

Avoid repeating html with a directive

I need to start working in a directive.
I have 5 different views where the html is exactly the same, so I need to do the directive in order to minimize my HTML.
<div class="list betslip-item">
<div class="item betslip-header"
ng-class="slip.active == '1' ? 'betslip-header-active' : 'betslip-header-inactive'">
<div class="row">
<div class="col slip-name" ng-click="openMoreInfoSlip(slip)">
{{:: slip.teamName}}
</div>
<div class="col-30">
<a class="button-size select-button"
ng-click="swapLineSelection(slip)">
<i class="fa" ng-class="slip.active == '1' ? 'fa-check-circle' : 'fa-plus-circle'"></i>
</a>
<a class="button-size close-button"
ng-click="removeSlip(slip)"><i class="fa fa-times"></i>
</a>
</div>
</div>
</div>
<div class="item item-input" ng-class="(slip.lines.length > 1) ? 'item-select' : ''">
<div class="input-label">
{{:: slip.nss}} - {{::slip.gameDate}}
</div>
<span class="pick-label"
ng-init="currentLine = getCurrentLine(slip)"
ng-if="slip.lines.length < 2">{{:: currentLine.pick}}</span>
<select
ng-if="slip.lines.length > 1"
ng-init="currentLine = getCurrentLine(slip)"
ng-model="currentLine"
ng-options="line as line.pick for line in slip.lines"
ng-change="updateSelectionLine(slip, currentLine.pointsBought)">
</select>
</div>
</div>
That is the HTML I am talking about, I should include css classes and everything, is that possible?
Any help is very welcome.
You don't need to use a custom directive. If all you want to achieve is to be able to reuse some html you can always put it into another template and use it by ng-include:
<ng-include src="'/templates/reusableComponent.html'"></ng-include>
Reusing the same HTML file as 5 different views is possible but you will need to place all the value or data that you require to show on all the 5 pages in one and use javascript or jquery to display according. so instead of doing this creating 5 views would be better, it isn't using up any server processing time, only memory and since it's just 5 views i dont think it would affect it so much also.
i've also included a link of the Angular project that i was working on below, which had aorund 2-3 views so incase you require as to go about that, with ng-route etc.
GitHub link for AngularJS Project
Hope this helps

How to use Greasemonkey to remove a href block [duplicate]

This question already has answers here:
Greasemonkey, delete <a> element
(2 answers)
Closed 7 years ago.
I'm trying to remove the following line of code from http://trakt.tv/calendars/my/shows/ using Greasemonkey:
<a href="/vip">
<div class="huckster-vip-square">
<div class="inner">
<div class="text">
<h1>Support Trakt & become a VIP!</h1>
<h2>Hide advertising, unlock extended features and help Trakt grow.</h2>
<div class="btn btn-primary">Learn More</div>
</div>
</div>
</div>
</a>
How can I do that?
You may try it with jQuery.
Please refer to this question for using jQuery in Greasemonkey.
The JavaScript code would be like:
$("a[href='/vip']").remove();

Categories