I am writing an update to my personal website where I remove duplicate html code. I am running into an error when I try to dynamically set the path to the href element.
Error: "ERROR TypeError: Cannot set property href of [object SVGImageElement] which has only a getter"
All other {{var}} instances work as expected
code that throws error:
<div class="row featurette" *ngFor="let row of json" >
<div class="col-md-7 {{row.textSpacing}}">
<h2 class="featurette-heading">{{row.title}}</h2>
<p class="lead">{{row.subTitle}}</p>
</div>
<div class="col-md-5 {{row.photoSpacing}}">
<svg class="bd-placeholder-img bd-placeholder-img-lg featurette-image img-fluid mx-auto" width="500" height="500" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" >
<image href={{row.src}} height="100%" width="100%"/>
</svg>
</div>
</div>
working code:
<div class="row featurette" *ngFor="let row of json" >
<div class="col-md-7 {{row.textSpacing}}">
<h2 class="featurette-heading">{{row.title}}</h2>
<p class="lead">{{row.subTitle}}</p>
</div>
<div class="col-md-5 {{row.photoSpacing}}">
<svg class="bd-placeholder-img bd-placeholder-img-lg featurette-image img-fluid mx-auto" width="500" height="500" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" >
<image href="/assets/images/hiking.JPG" height="100%" width="100%"/>
</svg>
</div>
</div>
Data Structure:
json = [
{
src: "/assets/images/hiking.JPG",
textSpacing:"",
photoSpacing:"",
title:"Hiking",
subTitle:"I love exploring with friends. The ability to be in untouched protected nature is something I value deeply. Most recent trip: Yosemite and Sequoia national parks. Hiker Pro Tip: Drop a GPS pin on your phone at the trailhead"
},
{
src: "/assets/images/Skiing.png",
textSpacing:"order-md-2",
photoSpacing:"order-md-1",
title:"Skiing",
subTitle:"I recently picked up skiing as an adult. This past winter I was able to go to Colorado to Ski in the mountains. Amazing!"
}
]
I believe you would need to do the [attr.href] for this to work. Example shown below.
<image [attr.href]="row.src" height="100%" width="100%"/>
or
<image attr.href={{row.src}} height="100%" width="100%"/>
You need quotes around your value {{row.src}}
<image href="{{row.src}}" height="100%" width="100%"/>
Related
I am new to the whole coding topic. For my first "big" project I want to build a simple website with some functionality. I tried to implement an Image slider with Tailwind and JS. But the Code won't work. Thank you for all your help in advance <3screen
HTML and Tailwind:
<section>
<div>
<div class="relativ h-50 relative">
<ul id="slider">
<li class="relativ scale-50">
<img class="h-full w-full object-fill" src="./img/test.png" alt="" />
</li>
<li class="relativ hidden h-[50vh]">
<img class="h-full w-full object-fill" src="./img/logo1.png" alt="" />
</li>
<li class="relativ hidden h-[50vh]">
<img class="h-full w-full object-fill" src="./img/test.png" alt="" />
</li>
</ul>
<div class="absolute top-1/2 -translate-y-1/2 w-full px-5">
<div class="my-auto flex w-full justify-between ">
<button onclick="prev()" class="rounded-full bg-slate-500 bg-opacity-80 p-3 shadow-lg">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-6 w-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
</svg>
</button>
<button onclick="next()" class="rounded-full bg-slate-500 bg-opacity-80 p-3 shadow-lg">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-6 w-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
</svg>
</button>
</div>
</div>
</div>
</div>
</section>
JS:
// Image slider
currentSlideId = 1;
sliderElement = document.getElementById('slider');
totalSlides = sliderElement.childElementCount;
function next (){
if(totalSlides<currentSlideId){
currentSlideId++;
showSlide();
}
}
function prev(){
if(currentSlideId > 1){
currentSlideId--;
showSlide();
}
}
function showSlide(){
slides = getElementById('slider').getElementsByTagName('li');
for (let index = 0; index < totalSlides; i++){
const element = slide[index];
if(currentSlideId===index+1){
element.classList.remove('hidden')
}else{
element.classList.add('hidden')
}
}
}
I tried to edit my code but it won't work :/
First, welcome to stack overflow.
I think the problem is in the showSlide function inside the for loop, wherein the 'element' variable you wrote:
slide[index]
But I think it should be:
slides[index]
Because there is no variable in that name.
And also like #BestCoderBoy commended, it's always good to initialize a variable before using it, and it looks like you're using getElementByID without the document.
I am retrieving the links in YT via JavaScript like this:
function GetTheLinks()
{
var linksArray = [];
for(var i = 0; i < document.links.length; i++)
{
var link = document.links[i];
linksArray.push( link.innerHTML );
linksArray.push( link.innerText );
linksArray.push( link.href );
}
return linksArray;
}
Since some time, I am now retrieving links that have the innerText e. g. "Just playing 0:27".
However, I do not see these links in the YT page.
So I wonder what they are and how to filter them out.
I have added such a link below to show what I mean.
Thank you!
link.innerText:
20:05
Läuft gerade (<-- German for "Just Playing")
link.href:
https://www.youtube.com/watch?v=k_2cSmg2ha4
link.innerHtml:
<yt-image alt="" ftl-eligible="" notify-on-loaded="" notify-on-unloaded="" class="style-scope ytd-thumbnail" disable-upgrade="" hidden="">
</yt-image>
<yt-img-shadow ftl-eligible="" class="style-scope ytd-thumbnail no-transition empty" style="background-color: transparent;"><!--css-build:shady--><img id="img" class="style-scope yt-img-shadow" alt="" width="9999"></yt-img-shadow>
<div id="overlays" class="style-scope ytd-thumbnail"><ytd-thumbnail-overlay-time-status-renderer class="style-scope ytd-thumbnail" overlay-style="DEFAULT"><!--css-build:shady--><yt-icon class="style-scope ytd-thumbnail-overlay-time-status-renderer" disable-upgrade="" hidden=""></yt-icon><span id="text" class="style-scope ytd-thumbnail-overlay-time-status-renderer" aria-label="20 Minuten, 5 Sekunden">
20:05
</span></ytd-thumbnail-overlay-time-status-renderer><ytd-thumbnail-overlay-now-playing-renderer class="style-scope ytd-thumbnail"><!--css-build:shady--><span id="overlay-text" class="style-scope ytd-thumbnail-overlay-now-playing-renderer">Läuft gerade</span>
<ytd-thumbnail-overlay-equalizer class="style-scope ytd-thumbnail-overlay-now-playing-renderer"><!--css-build:shady--><svg xmlns="http://www.w3.org/2000/svg" id="equalizer" viewBox="0 0 55 95" class="style-scope ytd-thumbnail-overlay-equalizer">
<g class="style-scope ytd-thumbnail-overlay-equalizer">
<rect class="bar style-scope ytd-thumbnail-overlay-equalizer" x="0"></rect>
<rect class="bar style-scope ytd-thumbnail-overlay-equalizer" x="20"></rect>
<rect class="bar style-scope ytd-thumbnail-overlay-equalizer" x="40"></rect>
</g>
</svg>
</ytd-thumbnail-overlay-equalizer>
</ytd-thumbnail-overlay-now-playing-renderer></div>
<div id="mouseover-overlay" class="style-scope ytd-thumbnail"></div>
<div id="hover-overlays" class="style-scope ytd-thumbnail"></div>
I have problem with triggering next or previous item in vue-owl-carousel package in Vue with javascript.
Can anybody help?
Carousel code :
<carousel id="newGamesCarousel" :items="1" :dots="false" :nav="false" :margin="10" :key="refresh">
<div class="newGames-item" v-for="item in newProducts">
<div class="details">
<div class="labels flex-wrap">
<span class="mb-1" v-for="platform in item.platforms">{{platform.name}}</span>
<span class="mb-1" v-for="region in item.regions">ریجن {{region.name}}</span>
</div>
<h2 class="gameTitle">{{item.name}}</h2>
<div class="priceBox">
<router-link class="add-to-cart" :to="{path: '/game/'+item.id+'/'+stringToSlug(item.title)+''}">+</router-link>
<div class="price">
<div class="former" v-if="item.sale_percent !== false">
<span class="percent">%{{item.sale_percent}}</span>
<span class="total">{{item.price}}</span>
</div>
<div class="later">
{{item.regular_price}}
<span class="unit">تومان</span>
</div>
</div>
</div>
</div>
<figure class="image">
<img v-bind:src="item.thumbnail_url" v-bind:alt="item.name">
</figure>
</div>
</carousel>
And the next and previous buttons:
<div class="arrows">
<svg class="nextCarousel" id="newGamesNext" viewBox="0 0 24 24">
<use xlink:href="/src/assets/imgs/sprite.svg#arrow"></use>
</svg>
<svg class="prevCarousel" id="newGamesPrev" viewBox="0 0 24 24">
<use xlink:href="/src/assets/imgs/sprite.svg#arrow"></use>
</svg>
</div>
as per documentation described here : https://www.npmjs.com/package/vue-owl-carousel
Custom prev and next buttons using slot, the buttons will be hidden
while start and end in non-loop mode
<carousel>
<template slot="prev"><span class="prev">prev</span></template>
<template slot="next"><span class="next">next</span></template>
</carousel>
within the carousel tag after adding all your slides
you can add <template slot="{{prev/next}}">{{add your icon image here }}</template> and it should take care of the previous and next events on its own
<template slot="prev">
<svg class="nextCarousel" id="newGamesNext" viewBox="0 0 24 24"><use xlink:href="/src/assets/imgs/sprite.svg#arrow"></use></svg>
</template>
this is what I feel should solve your issue. If Im missing something feel free to add urls of documentations/ tutorials that you followed to get your code here. please let me know if the solution worked or not
<v-flex>
<span #click="$refs.prev.click()">
PREVIOUS
</span>
<span #click="$refs.next.click()">
NEXT
</span>
</v-flex>
<v-flex>
<carousel>
<template slot="prev"><span hidden ref="prev" class="prev">prev</span></template>
<template slot="next"><span hidden ref="next" class="next">next</span></template>
</carousel>
</v-flex>
I'm dynamically creating a list of fonts that are stored on my server. I want to ng-repeat through the list of fonts and apply each font to a new element.
So this is what I'm doing:
<div class="row">
<div class="col-xs-12 col-sm-4 col-md-4" ng-repeat="font in ctrl.fontList">
<style>
#font-face {font-family:"{{font.family}}"; src: url({{font.url}});}
</style>
<svg height="100%" width="100%" position>
<rect x="0" y="0" width="100%" height="100%" fill="#288feb"></rect>
<g class="groupLayer">
<text fill="#ffffff" x="0" y="0" font-size="48" font-family="{{font.family}}"
>{{ctrl.text}}</text>
</g>
</svg>
</div>
</div>
This might be a big no-no in html but I have my style within my div as I wasn't trying to get this to work any way possible.
Anyway, this isn't working for me.
The {{font.family}} outputs OstrichSans-Black and the {{font.url}} is locally hosted on my localhost and the url is valid.
Any ideas why this isn't working? What should I do?
Try applying the font via style instead:
<text style="font-family: '{{font.family}}';">
What version of you angularjs ? while test you code, i using 1.2.x and doesn't work with you code. After update to angular 1.4.8 this works:
var app = angular.module('myApp',[]);
app.controller('MyController', function($scope) {
var ctrl = this;
ctrl.fontList = [
{
"family": "Abhaya Libre",
"url": "https://cdn.rawgit.com/mooniak/abhaya-libre-font/gh-pages/fonts/AbhayaLibre-Regular.otf"
},
{
"family": "Gemunu Libre",
"url": "https://cdn.rawgit.com/mooniak/gemunu-libre-font/gh-pages/tests/fonts/GemunuLibre-Regular.otf"
},
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div class="row" ng-app="myApp" ng-controller="MyController as ctrl">
<div class="col-xs-12 col-sm-4 col-md-4" ng-repeat="font in ctrl.fontList">
<style>
#font-face {font-family:{{font.family}}; src: url({{font.url}});}
</style>
<svg height="100%" width="100%" position>
<rect x="0" y="0" width="100%" height="100%" fill="#288feb"></rect>
<g class="groupLayer">
<text fill="#ffffff" x="0" y="50" font-size="48" style="font-family:{{font.family}}"
>{{font.family}}</text>
</g>
</svg>
</div>
</div>
I found out what the issue was.. and it's really frustrating that this was the problem...
Very simply, I forgot to put quotation marks around my url parameter within the #font-face. That was literally the reason!
I would like to target an <a> tag's ID inside an inline SVG that is being used as a responsive image map. I don't need to manipulate the SVG, just launch a modal with fancybox by that ID if someone clicks on that <a href...>. (launch an iframe of a local page in this case)
I have read a dozen threads related to this and understand there is a namespace issue but I'm a JS noob and cant quite put it together - thank you for taking a look!
I did try the $('a[xlink\:href=#shows]’) but no joy.
<div id="inline-svg">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1920 1280" preserveAspectRatio="xMidYMin slice" width="100%" height="100%">
<a xlink:href="http://www.facebook.com/" xlink:title="Facebook" xlink:show="new" id="facebook">
<rect x="1102" y="392” width="102" height="104" style="fill:#ec2024;opacity:0.5”/>
</a>
<a xlink:href="http://twitter.com/" xlink:title="Twitter" xlink:show="new" id="twitter">
<rect x="1102" y="520" width="102" height="104" style="fill:#ec2024;opacity:0.5”/>
</a>
<a xlink:href="#" xlink:title="Mailing List" id=“mlist">
<rect x="1215" y="392" width=“102” height="104" style="fill:#ec2024;opacity:0.5”/>
</a>
<a xlink:href="shows.html" xlink:title=“Shows” id="shows" >
<rect x="1215" y="520” width=“102” height="104" style="fill:#ec2024;opacity:0.5”/>
</a>
<rect width="1920" height="1280" style="fill:none"/>
</svg>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#shows”).fancybox({
maxWidth : 400,
maxHeight : 300,
type : 'iframe',
});
});
</script>
changing:
$("#shows”).
to:
$("#shows").
Should work fine.