On my page I have multiple divs that look like that:
<div v-show="currentPage == 1" class="row">
...
</div>
<div v-show="currentPage == 2" class="row">
...
</div>
<div v-show="currentPage == 3" class="row">
...
</div>
currentPage is a variable defined in the vue script. The value of currentPage could be changed by changing the value after # in the URL. Problem is that when the page is loaded, for a very brief moment, the content of all pages is displayed and then, only the content of the desired page remains. I would like to ask how I could eliminate the initial flashing of all the content when entering the page.
Related
I am getting issue while display another component on click event, here is my code:
<div (click)="showThis = true"></div>
<div class="" [ngClass]="{'hide': showThis}"></div>
<div class="" [ngClass]="{'show': showThis}">
<another-screen></another-screen>
</div>
its displaying both, first should display without any click, if click event then this hide first and another component will display
means hide and show class will apply
any help
Thanks
Why you don't use hidden:
<div (click)="showThis = true"></div>
<div class="" [hidden]="!showThis"></div>
<div class="" [hidden]="showThis">
<another-screen></another-screen>
</div>
*ngIf removes the html element from DOM but [hidden] is use for display none or block html element same as hide and show
Why not use *ngIf
<div (click)="showThis = true"></div>
<div *ngIf="!showThis "></div>
<div *ngIf="showThis ">
<another-screen></another-screen>
</div>
Condider the following snippet:
<template v-if="tryIsMobile" >
<div class='device device-mobile-portrait' :class="deviceClass">
<div class="device-scroller-container">
<div class='device-scroller'>
<img id='tryit-img-mobile' :src="srcUrlMobile" v-on:load="onImgLoad" v-on:error="onImgError"/>
</div>
</div>
</div>
</template>
<template v-else>
<div class='device device-tablet-landscape' :class="deviceClass" >
<div class="device-scroller-container">
<div class='device-scroller'>
<img id='tryit-img-tablet' :src="srcUrlTablet" v-on:load="onImgLoad" v-on:error="onImgError"/>
</div>
</div>
</div>
</template>
This code conditionally renders one of the two images. Some user action results in the actual shown image to be toggled.
What I'm seeing is the following: When toggling from say, tryit-img-mobile to tryit-img-tablet, the image loaded as part of tryit-img-mobile will get displayed with different dimensions instantly. However, during the time the image loads it's new source :src="srcUrlTablet", the image with src :src="srcUrlMobile" still displays.
This is probably due to Vue using the same img-tag for both the templates. How can I prevent Vue from doing this, and instead use seperate img-tags?
In cases such as this, Vue uses a special key attribute that tells it not to reuse the same element. Give each element this attribute with a unique value, and Vue will no longer reuse the same element:
<div v-if="tryIsMobile"
class="device device-mobile-portrait"
:class="deviceClass"
key="mobile"
>
...
</div>
<div v-else
class="device device-tablet-landscape"
:class="deviceClass"
key="tablet"
>
...
</div>
I want to have a page with the following responsive layout:
Image 1) A responsive page layout with 3 boxes (on small/medium screen)
Image 2) A responsive page layout with 3 boxes (on wide screen)
The goal is to make this page responsive so that whenever screen is too wide, box 3 will jump next to box 2 (like image 2). For this I use grid system of Bootstrap with allocating "8" spans for Box 1 and "4" for box 2 and 3. It works the way I described. Now I want to fix the position of Box 2 and Box 3 so when I scroll the page (to see the content of Box 1) I will see Box 2 and 3 in my viewport and I don't want to make Box 1 scrollable! I want the whole page to scroll! Do you know any Bootstrap solution that will handle this situation? (I want to keep the responsive layout of the whole page)
This is the basic code that I have for the page:
<div class=row>
<div class="col-md-8 col-lg-6">Box 1</div>
<div class="col-md-4 col-lg-3">Box 2</div>
<div class="col-md-4 col-lg-3">Box 3</div>
</div>
Right now I can make Box 1 scrollable but it will put the scrollbar next to box 1, but I want it to be at the right side of the page, so the whole page scrolls but box 2 and 3 are fixed. And at the same time, on large screens they will change their position and all 3 boxes will be next to each other!
Is there any suggestions?
FIXED
If i got you right :) Here is a fiddle : https://jsfiddle.net/fL2L0qnj/2/ , just resize the result area to see effect :)
HTML :
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="box0"></div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="row">
<div class="col-xs-6 col-md-12"> <!--do this at your preference, look at example and then
arrange it for your self :)
<div class="box1"></div>
</div>
<div class="col-xs-6 col-md-12">
<div class="box2"></div>
</div>
</div>
</div>
CSS:
.box1,.box2{
width:80%;
height:100px;
margin:10px auto;
}
.box0{
width:80%;
height:220px;
margin:auto;
margin-top:10px;
background:green;
}
.box1{
background:blue;
}
.box2{
background:red;
}
JQUERY:
$(window).scroll(function() {
var y = $(".keeptop").offset().top;
var scrollY = $(window).scrollTop();
if (scrollY > y) {
var padY = scrollY - y;
$(".keeptop").css("padding-top", padY);
}
});
Here's my code:
<div class="tabs">
<ul>
<li>tab1</li>
<li>tab2</li>
<li>tab3</li>
<li>tab4</li>
</ul>
<div id="tabs-1">
tab1
</div>
<div id="tabs-2">
tab2
</div>
<div id="tabs-3">
tab3
</div>
<div id="tabs-4">
tab4
</div>
</div>
<script>$(function() { $( ".tabs" ).tabs(); });</script>
The tab titles are fine however the content is not displayed properly, here's a screenshot
When I viewed firebug's code, I found that the content tabs are loaded but the content is not included in them. How to solve this?
Try the following in your script tag:
$(document).ready(function() {
$("#tabs").tabs();
});
It looks like you are trying to use the class selector with yours script.
I have a dijit that looks fine as far as I can tell, but it is raising Uncaught Error: Invalid template every time. I have not been able to figure out why. All variables (e.g. ${variableName} are defined in the widget correctly.
Here is the widget:
<div class="${classPrefix}-wrapper">
<div class="${classPrefix} flair" dojoAttachPoint="flairNode"></div>
<div class="${classPrefix}-count hidden" dojoAttachPoint="countWrapperNode">
<div class="count" dojoAttachPoint="countNode">0</div>
</div>
<div class="${classPrefix} ${secondaryClass} action hidden" dojoAttachPoint="secondaryClickNode" dojoAttachEvent="onclick:_onSecondaryClick">
<div class="${classPrefix}-inner"></div>
<div class="${classPrefix}-icon"></div>
</div>
<div class="${classPrefix} ${primaryClass} action" dojoAttachPoint="primaryClickNode" dojoAttachEvent="onclick:_onPrimaryClick">
<div class="${classPrefix}-inner"></div>
<div class="${classPrefix}-icon"></div>
</div>
<div class="${classPrefix}-message hidden" dojoAttachPoint="messageNode"></div>
</div>
<div class="${actionPromptNodeClass}" dojoAttachPoint="actionPromptMessageNode">
<span dojoAttachPoint="actionPromptMessage">${actionPromptText}</span>
<span dojoAttachPoint="actionCompletedMessage" class="hidden">${actionCompletedText</span>
</div>
Found the answer to my question. It turns out that you can only have one root node in a Dijit. I missed this in the docs, but it is at the bottom of this tutorial:
Common Pitfalls
Be sure to only have one root node in your template
Don’t start or end your template with a comment because that means you technically have two nodes
Avoid a trailing </div> at the end of your template
There may be only one root element in the template. Wrap your template into <div></div> and it should work.