I have a website currently under development.
Issue: When accessing a page, the front page is briefly displayed - and then the current page is shown.
Please try refreshing this link to have better understanding. Notice that while loading, the front page is displayed - and after load completes, then the correct page is displayed.
Question What shall I do to avoid the front page being shown during refresh of a page?
Background: Every page in the website have different header. My approach:
Created header helper service
Header helper service keep watching for route change
Depending on current route it sets different css class on header component template. This works perfect if user navigates through website without refreshing page
Please see html and header helper service code below
<div [ngClass]="{'no-hero': headerType === 400, 'restaurant-page': headerType === 200, 'restaurant-list': headerType === 300}"
class="top-section">
<div class="top-section-bg">
</div>
// Code removed for brevity
</div>
private setHeaderType(): void {
if (this.currentUrl.includes("search-restaurants")) {
this.headerType = HeaderType.restaurantSearch;
} else if (this.currentUrl.includes("profile") || this.currentUrl.includes('faqs') || this.currentUrl.includes('bookings')) {
this.headerType = HeaderType.noHero;
} else if (this.currentUrl === "/") {
this.headerType = HeaderType.home;
} else {
this.headerType = HeaderType.restaurantDetail;
}
this.headerTypeSource.next(this.headerType);
}
My solution here is to have some styles in the index.html as plaintext, hardcoded styles, that hide the front page on reload. Aka.
index.html
<html>
<style>
.loading-overlay {
z-index: 99;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
color: red;
}
.loading-overlay--hide { display: none; }
</style>
<div class="loading-overlay"></div>
</html>
And when angular boots, I just do this to hide the loader
document.getElementById('full-page-loader').className += " full-page-loader--hide";
Related
I want to auto check on Downloadable and Virtual checkbox on Dokan plugin, this my code:
add_action( 'woocommerce_product_options_general_product_data', 'hiding_and_set_product_settings' );
function hiding_and_set_product_settings(){
## ==> Set HERE your targeted user role:
$targeted_user_roles = array( 'administrator', 'shop_manager', 'vendor', 'vendors' );
// Getting the current user object
$user = wp_get_current_user();
// getting the roles of current user
$user_roles = $user->roles;
if ( array_intersect( $targeted_user_roles, $user_roles ) ){
## CSS RULES ## (change the opacity to 0 after testing)
// HERE Goes OUR CSS To hide 'virtual' and 'downloadable' checkboxes
?>
<style>
label[for="_virtual"], label[for="_downloadable"]{ opacity: 0.2 !important; /* opacity: 0; */ }
</style>
<?php
## JQUERY SCRIPT ##
// Here we set as selected the 'virtual' and 'downloadable' checkboxes
?>
<script>
(function($){
$('input[name=_virtual]').prop('checked', true);
$('input[name=_downloadable]').prop('checked', true);
})(jQuery);
</script>
<?php
}
}
This in my function, child theme. I found this code from: https://stackoverflow.com/a/42177288/6574214. But this code only work for backend only, i want on dokan frontend upload form. Anyone know the code? I want comment on https://stackoverflow.com/a/42177288/6574214 but i not have reputation for that... :(
I found a solution for this.
Background : We are developing a website where vendors can sell digital products only. So we got this issue as we need to hide the options and keep downloadable and virtual enabled.
Here is the code you can use :
The above code you are using will work for woocommerce backend but to make it work in the frontend you need to use this hook : dokan_product_edit_after_options.
Ref : https://wedevs.com/docs/dokan/developer-documentation/seller-dashboard-action-hooks/
Solution :
add_action( 'dokan_product_edit_after_options', 'pitby_dokan_preselect' );
function pitby_dokan_preselect(){
?>
<style>
label[for="_virtual"], label[for="_downloadable"]{ opacity: 0; }
</style>
<?php
?>
<script>
(function($){
$('input[name=_virtual]').prop('checked', true);
$('input[name=_downloadable]').prop('checked', true);
})(jQuery);
</script>
<?php
}
Thanks & Regards,
Vamsi.
I'm using w2ui grid, and the template column generated like so:
{ field: 'TableCards', caption: 'Table cards', size: '10%', sortable: true ,
render:function(record, index, column_index) {
let html = '';
if (record.TableCards) {
record.TableCards.forEach(function(card) {
html += `<div class="card-holder" style="width: 12%; display: inline-block; padding: 0.5%;">
<div class="poker-card blah" poker-card data-value="${card.value}"
data-color="${card.color}"
data-suit="&${card.suit};"
style="width: 30px;height: 30px">
</div>
</div>`;
});
}
return html;
}
},
poker-card as u can see is a custom attribute. and it's not get rendered in the grid.
any other way?
You can use the TemplatingEngine.enhance() on your dynamic HTML.
See this article for a complete example: http://ilikekillnerds.com/2016/01/enhancing-at-will-using-aurelias-templating-engine-enhance-api/
Important note: based on how your custom attribute is implemented, you may need to call the View's lifecycle hooks such as .attached()
This happened to me, when using library aurelia-material, with their attribute mdl.
See this source where the MDLCustomAttribute is implemented, and now see the following snippet, which shows what I needed to do in order for the mdl attribute to work properly with dynamic HTML:
private _enhanceElements = (elems) => {
for (let elem of elems) {
let elemView = this._templEngine.enhance({ element: elem, bindingContext: this});
//we will now call the View's lifecycle hooks to ensure proper behaviors...
elemView.bind(this);
elemView.attached();
//if we wouldn't do this, for example MDL attribute wouldn't work, because it listens to .attached()
//see https://github.com/redpelicans/aurelia-material/blob/5d3129344e50c0fb6c71ea671973dcceea14c685/src/mdl.js#L107
}
}
I have a tag (show more) that when user clicks it loads the next 10 results onto what is already there.
I looked around to make this seo friendly but all this talks about is ..
how can i make my relevant for seo next page (really showing more instead of next)
Rather than load with ajax, why not just hide everything after the first 10 and have the next tag show the next 10. See following example.
<style>
.hide{
display: none;
}
</style>
<div id='contain'>
<?php
//Not sure what you are loading but this is a dummy loop done in PHP
$i=0;
while($i<101){
//Set the class based on the result. If greater than 10 then hide this result.
$class = ($i<10 ? "result" : "result hide");
echo"<div class='$class'>
<p>MY CONTENT</p>
</div>";
$i++;
}
?>
</div>
<a href='#' id='showMore'>Show 10 More</a>
<script>
$('#showMore').click(function(e){
e.preventDefault();
var i = 0;
$('.hide').each(function(){
if(i<10){
$(this).removeClass('hide');
}
else{
return;
}
i++;
});
});
</script>
That is the only way I can think of solving the problem. I understand ajax is being used to speed up the query.
PhantomJS is doing a great job of capturing web pages into image files for me. I am using a script based on rasterize.js.
However, for certain web elements of a fixed size, I need the resulting image to match the size of the web element.
e.g. I have a page like this:
<html>
<body>
<div id="wrapper" style="width:600px; height:400px;">
Content goes here...
</div>
</body>
</html>
In this example, I need it to produce an image sized at 600x400. Is thre a way to get the viewport size dynamically based on a web element in the page I am rasterizing.
I know this one is not a easy one... Ideas?
Thanks
Wow. Not that hard after all. Just set the viewport really big and use the cropRect function. What a great tool!
Mods to rasterize.js:
page.open(address, function (status) {
if (status !== 'success') {
console.log('Unable to load the address!');
} else {
var height = page.evaluate(function(){
return document.getElementById('wrapper').offsetHeight;
});
var width = page.evaluate(function(){
return document.getElementById('wrapper').offsetWidth;
});
console.log('Crop to: '+width+"x"+height);
page.clipRect = { top: 0, left: 0, width: width, height: height };
window.setTimeout(function () {
page.render(output);
phantom.exit();
}, 200);
}
});
I'm opening a simple modal and making an Ajax call with the following function.
function TransactionModal($id, $s) {
jQuery("#dialog").load("/chat/rejoin", { 'id': +$id, 's': +$s }, function()
{
jQuery("#dialog").modal({
overlay:80,
autoResize:false,
containerCss: {width: "490px", height: "538px"},
overlayCss: {backgroundColor:"#000"}
});
});
}
Because I have some Javascript running in the page I want to load, I need to use iframes, so the rejoin page has the following in it.
<IFRAME SRC="/chat/join/id/<?php echo $id; ?>/cid/<?php echo $cid;?>" width="500" height="535">
<!-- Alternate content for non-supporting browsers -->
Upgrade Browser to support iframes
</IFRAME>
That all works great.
The problem that I'm having is that when I click on the close button, it is resubmitting form data.
I have no idea why but it's driving me nuts.
If I refresh the page the modal goes away and doesn't resubmit.
If I click the X image to close it it does resubmit.
Please help if you have any idea why it's doing this!
function rejoinModal($id) {
var src = '/chat/join/id/'+$id ;
jQuery.modal('<iframe src="' + src + '" height="555" width="510" style="border:0">', {
containerCss:{
backgroundColor:"#000",
height:555,
width:510,
overFlow: "hidden",
},
});
}
i solved it by not calling the iframe from withing the ajax call.
it is working now.