i'm facing a problem in my web application with routerLink. I created a card (div) and I d'like to click on it and open another component on the same page.
Here is my code:
<a class="app-card" [routerLink]="['/', '#app=5h3kemncnri4i3nf']">
<div class="app-card__header">
<h2>{{'HOME.APPLICATION.APP_ONE'|translate}}</h2>
</div>
</a>
This part #app=5h3kemncnri4i3nf is an ID which opens the app on the same page. But wit the code above it didn't work - nothing happen when I click on it .
If I hover the <a> in the browser, I get the following output:
localhost:4200/%23app%5h3kemncnri4i3nf
I'm expecting to open the link:
http://localhost:4200/home#app=5h3kemncnri4i3nf on the same page.
Thanks in advance!
Related
I'm triggering Fancybox popup automatically when the page is loaded.
Inside that popup there's a HTML content with link to other page.
That link doesn't work when it's loaded with Fancybox.
Here's my code:
<div class="popup">
<div class="container">
<h4>Description text...</h4>
<a class="btn btn-green" href="/the_url_of_the_page">View more</a> //this link is not working
</div>
</div>
<script>
$(document).ready(function() {
$('.popup').fancybox({
transitionEffect : "zoom-in-out",
}).trigger('click');
});
</script>
How can I set that link to work?
I'm using Fancybox v3.1.28
First, links, buttons, etc are working perfectly fine in fancybox.
The problem in your example is caused by the fact that you have used .popup selector to initialize fancybox, but that matches element containing your link. So, your code can be translated to 'start fancybox when user clicks on element having class ".popup"'. But, your link is inside element with class name ".popup", therefore it starts fancybox.
Finally, your code does not make any sense. If you wish to immediately start fancybox, then use $.fancybox.open() method, see https://fancyapps.com/fancybox/3/docs/#api for samples
I have 2 components in Vue.js :
Accordion header which open it's content after clicking on it.
Cog icon which open mini-modal menu.
Problem is that when I'm clicking on cog, I don't want accordion to open it's content.
Before click on cog:
After click on cog:
I thought about checking modal menu display status in Accordion (parent component) but I'm not sure it's good approach.
<i class="fa fa-cog" #click="toggleSettings"/>
<div
class="order-settings"
:class="{'order-settings__show':isSettingsOpen}">
<div class="order-settings__option"><p>Re-order</p></div>
<div class="order-settings__option"><p>Convert to subscription</p</div>
<div class="order-settings__option"><p>Download invoice</p></div>
<div class="order-settings__option"><p>Export to CSV</p></div>
</div>
Actual results: Accordion open after clicking on cog (wrong)
Expected results: Accordion doesn't open after clicking on cog
add the stop modifier to the cog click event like so
#click.stop="toggleSettings"
It's how you do event.stopPropagation() in Vue.js
I am trying to implement a click event to get the details of every entry from this page: https://www.mrlodge.de/wohnungen/
The Html markup of the button which links to the Details looks like this:
<li class="action mrl-list__item details-bt">
<button>
<span class="icon icon-arrow-right">
::before
</span>
"Details"
</button>
</li>
I have some experience with LUA and Splash but have no idea how to attack this problem since there is no actual href link given in the html markup. I have read about the Splash method mouseclick(), which needs pixel directions. However I am looking for a more generic solution with Splash.
Please help
This page doesn't use javascript. Try disabling javascript and the page still works. The page works with forms instead.
>>> fetch('https://www.mrlodge.de/wohnungen/')
2019-07-10 14:56:41 [scrapy.core.engine] INFO: Spider opened
>>> response.xpath('//form/input[#name="name_url"]/#value').extract()
[u'/wohnen-auf-zeit/2-zimmer-wohnung-muenchen-maxvorstadt-11609/', u'/wohnen-auf-zeit/4-zimmer-haus-muenchen-fuerstenried-10756/', u'/wohnen-auf-zeit/3-zimmer-wohnung-muenchen-lerchenau-11653/', u'/wohnen-auf-zeit/2-zimmer-wohnung-muenchen-glockenbachviertel-4180/', u'/wohnen-auf-zeit/2-zimmer-wohnung-muenchen-berg-am-laim-11625/']
I am having some issues using Buefy and Vue. I have a simple SPA (Single Page Application), that uses vue-router. I have a dropdown that looks like this:
<b-dropdown class="user-dropdown" v-model="navigation" position="is-bottom-left">
<a class="navbar-item" slot="trigger">
<span class="tag is-rounded has-text-weight-semibold avatar">OB</span>
</a>
<div class="columns is-marginless">
<div class="column has-text-centered">
<router-link to="home">
<b-icon class="is-large is-size-4" icon="ion-ionic ion-ios-search"></b-icon>
</router-link>
</div>
<div class="column has-text-centered">
<router-link to="dashboard">
<b-icon class="is-large is-size-4" icon="ion-ionic ion-ios-contact"></b-icon>
</router-link>
</div>
</div>
</b-dropdown>
Getting the dropdown to show works fine. It also hides if I click anywhere on the page, outside of the visible dropdown.
My problem is, that I have a single page application, so when I "change" page (click a link), the dropdown is still visible when the page changes.
Example:
On below page:
www.example.com/#/home
I click on the dropdown, which opens, and then click on the dashboard link, which gives me:
www.example.com/#/dashboard
But the dropdown is still visible.
Anyone know how I can do, so the dropdown will toggle when I click on the links inside it?
Update:
I use the Vue Dev tools in Chrome, and I can see that when I click on the dropdown so it toggles to active, I see this:
name:"active-change"
type:"$emit"
source:"<BDropdown>"
payload:Array[1]
0:true
And when I click anywhere on the page, to close the dropdown, it looks like this:
name:"active-change"
type:"$emit"
source:"<BDropdown>"
payload:Array[1]
0:false
Whatever the drop-down is watching for state isn't changing, because in a SPA it's just javascript. I don't know about the specifics regarding Buefy, but you'll have to set the state variable on router load, or watch some kind of variable to tell the menu that something in another part of your app is different.
This used to be my (working) code:
<div onclick="location.href='http://somewebsite.com/';">
Link
</div>
If I'd click the link, I would be taken to http://someotherwebsite.com/. If I'd click somewhere else in the div, I would be taken to http://somewebsite.com/. Perfect.
Then, I decided that I wanted to open http://someotherwebsite.com/ in a new tab upon clicking the link, so I changed my code to this:
<div onclick="location.href='http://somewebsite.com/';">
Link
</div>
However, if I'd click the link now, I would be taken to http://somewebsite.com/ instead of http://someotherwebsite.com/! Apparently, adding target="_blank" to my anchor tag caused my onclick method to override my anchor tag's href. What's going on?
Edit: It turns out, my code does function properly in Chrome, but not in Safari 7.0.5. What can I do to add Safari support?
Try
<div onclick="location.href='http://somewebsite.com/';" target="_self">
Link
</div>
jsfiddle http://jsfiddle.net/guest271314/8deea/