I'm currently making an mobile web application with next.js boilerplate.
My back button code is this.
import Router from 'next/router'
<button>
<a href="#" onClick={() => Router.back()}>
<span> some back button icon here </span>
</a>
</button>
I don't think there's anything wrong with my html code but when clicking that button on
safari browser, it doesn't work. Anybody had same experience? or know the solution? or know why this is happening?
please share ;
FYI. I've tried major browsers like IE, Chrome, Firefox but only Safari don't work.
this work for me:
import Router from 'next/router'
...
<button>
<a href="#" onClick={(e) => { e.preventDefault(); Router.back(); }}>
<span> some back button icon here </span>
</a>
</button>
A little late, but I'm sure someone needs it.
Related
I realized #dblclick not working on chrome. I tested same code on firefox and it worked OK.
Here is the piece of code
`<Tasks #toggle-reminder="toggleReminder" #delete-task="deleteTask" :tasks="tasks" />`
`toggleReminder(id){
console.log('clicked'+id);
}`
The event was emited like this fro an underlying Component:
`<div #dblclick="$emit('toggle-reminder', task.id)" :class="[task.reminder ? 'reminder' : '', 'task']">
<h3>{{ task.text }}
<i #click="$emit('delete-task', task.id)" class="fas fa-times"></i>
</h3>
<p>{{ task.day }}</p>
</div>`
I am afraid it is navigator problem, as I said, it works good on firefox
I found that when I have the developer tool opened then dblclick event does not work, but when I close the developer tool then event work. Still weird
After a successful login, it is navigated to the dashboard URL. From that menu, links aren't working even though URL is changing in the address bar. router link in the menu is working when we forcefully do a page reload in the browser. otherwise, nothing is happening. There is no error in the console as well. The code is given below.
login navigation which works currently
this.usermanagementService.login('login', {username: userName, password})
.subscribe(message => {
this.jwt.saveToken(message.data.token);
if (window.localStorage.getItem('locale') === null) {
window.localStorage.setItem('locale', 'en');
}
this.router.navigate(['/dashboard']);
// More lines which handles the error section
The app menu html
<div *ngIf="m.submenus?.length > 0" class="collapse" id="{{ m.name }}" aria-expanded="false">
<ul class="flex-column pl-2 nav submenu-dark">
<li *ngFor="let secondlevel of m.submenus" class="nav-item">
<a class="nav-link collapsed text-truncate" routerLink="{{ secondlevel.slug }}"><span>{{ secondlevel.name }}</span></a>
</li>
</ul>
</div>
Currently routerlink works after we do a forceful redirect instead of angular router navigation. how to fix it?
Put the navigation URL in if a condition or in else condition.
Or another problem is your menu component did not get which user is login, so you should try event emit when user login and subscribe into menu component and set condition related to login user.
Fixed the issue with the following changes in app.component
<app-header></app-header>
<div *ngIf="router.url !== '/login'; else loginTemplateName" id="wrapper" class="toggled container-margin-fix">
<app-menu></app-menu>
<router-outlet></router-outlet>
<app-footer></app-footer>
</div>
<ng-template #loginTemplateName>
<app-menu></app-menu>
<router-outlet></router-outlet>
<app-footer></app-footer>
</ng-template>
Inside the app-menu and app-footer there is an *ngIf checking whether it is not the login url. We need to add app-menu container in both cases in the app.component.html then only it will work eventhough it is hidden inside app-menu. Earlier it was just <router-outlet> only for the login route in the aapp.component.html
I cannot make the active button (router-link tag) to light up.
Here is my code:
<div class="bottom-buttons">
<span v-for="button in buttons" class="button" :class="{ 'is-active': $route.path === button.path}">
<router-link :to="button.path">
<i :class="button.iclass"></i>
<p class="button-label">{{button.label}} </p>
</router-link>
</span>
</div>
When I print out $route.path it returns the right path, and button.path is the data I have in the data object, and it works. So the condition should be right. But the 'is-active' class is not activated. (This thread: VueJS exact-active-class)
If I hard-code the 'is-active' class, it works.
When I use a:hover, a:visited, a:link it works, but a:active does not work :D. I have tried a:router-link-active but it does not work. (This thread: How to VueJS router-link active style)
I have tried to add linkActiveClass: 'is-active' in the /router/index.js file as suggested. It does not work. (This thread: Bulma navbar and VueJS router active link)
Anybody knows why? Or have more suggestions? Thank you in advance!
It seems to be that your problem is in the class condition. Maybe try to use == instead of === in your :class?
I would have add a comment instead of an answear if i had enough reputation :)
Unfortunately we have to support IE11.
The following is a snippet of Angular from our app:
<nav class="navbar-menu" fxFill>
<span class="fill-it"></span>
<span class="nav-user-wrap" fxFlexAlign="right">
<button class="nav-user" mat-button [matMenuTriggerFor]="usrmenu">{{ userManager.currentDealer?.name }} <mat-icon class="icon-avatar">person</mat-icon><mat-icon class="icon-arrwdwn">keyboard_arrow_down</mat-icon></button>
<mat-menu #usrmenu="matMenu" class="userdd mmdd" xPosition="after" yPosition="below" [overlapTrigger]="false">
<span mat-menu-item [disabled]="true" [disableRipple]="true">{{ userManager.firstName }} {{ userManager.lastName }}</span>
<mat-divider style="border-color: rgba(255,255,255,0.8); margin: 0 16px;"></mat-divider>
<span mat-menu-item *ngIf="!userManager.isDealerGroupUser" (click)="openSelectDealerGroupDialog()">{{ userManager.dealerGroup?.name }}</span>
<mat-divider *ngIf="!userManager.isDealerGroupUser" style="border-color: rgba(255,255,255,0.8); margin: 0 16px;"></mat-divider>
<button *ngFor="let dealer of userManager.dealers" (click)="userManager.setCurrentDealer(dealer.id)" mat-menu-item>{{ dealer.name }} <span *ngIf="dealer.id === userManager.defaultDealer?.id">(Default)</span></button>
<mat-divider style="border-color: rgba(255,255,255,0.8); margin: 0 16px;"></mat-divider>
<!-- <button mat-menu-item>My Account</button>
<button mat-menu-item>Settings</button> -->
<button mat-menu-item (click)="logOut()">Logout</button>
</mat-menu>
</span>
</nav>
Pretty standard drop-down menu, but in IE11 clicking the button gives the following exception:
Unable to get property 'opacity' of undefined or null reference
I'm pulling my hair out trying to work out why.
Does IE11 do some kind of pseudo-script thing in the background to set the CSS or something? No idea.
All help appreciated!
This error is a result of IE11 lacking the Web Animation API, to fix this You have to import the right polyfill as documented in Angular Docs.
import 'web-animations-js'
Angular docs say that you only need the 'web-animations-js' polyfill for IE if you use the AnimationBuilder, but my project doesn't use AnimationBuilder and I get this error message. There's a possibility one of the libraries I'm using does. But I only started getting this error after I upgraded to Angular 8.
Here's a picture of the problem: http://i55.tinypic.com/29g0izc.jpg
Problem Site: http://windowsphonedaily.blogspot.com/
I have my tweet and like button setup at the header of each new article underneath the title. It works extremely well with Chrome and Firefox. But I noticed that in IE9 both buttons are forced to the left and that the actual tweet button is missing. You can see in the above picture the comparison between FF4, Chrome 11, and IE9.
Does anyone know how to fix this without breaking it in the other browsers? Here is the code I have used to set up the buttons.
<div class='post-header'>
<table>
<div class='post-header-line-1'/>
<!-- Facebook's Like Button -->
<div style='float:right;'>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like font='arial' href='' layout='button_count' show_faces='false' width='10'/></div>
<!-- Twitter's Tweet Button -->
<div style='float:right;'><a class='twitter-share-button' data-count='horizontal' data-via='WinPhoneDaily' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></div>
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span> <span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a>
</b:if>
</b:if>
</span></table>