Is there a way to make mouseover work with v-system-nav? I have the following fiddle which demonstrates my issue:
https://jsfiddle.net/6dqfz3j2/1/
<div>
<div id="content">
<v-card #mouseover="abc">Mouseover this and look at the console. Mouseover works!</v-card>
<v-system-bar #mouseover="abc">Mouseover this and look at the console. Mouseover does not work!</v-system-bar>
</div>
</div>
...
methods: {
abc() {
console.log('hi');
},
},
Is it a bug? Is there some property I can overwrite to make it work?
Thanks!
Got it. It needs to be #mouseover.native="abc" for the v-system-nav
Related
Vue version:
3.2.39
While click on the button, the focus does not bubble to the wrapper, and that is why it does not show the "wrapper focus". How to fix this?
<template>
<div tabindex="-1" #focus="onWrapperFocus" #blur="onWrapperBlur">
<button #focus="onInnerFocus" #blur="onInnerBlur">Hello</button>
</div>
</template>
<script >
export default {
setup() {
return {
onWrapperFocus() {
console.log("wrapper focus");
},
onWrapperBlur() {
console.log("wrapper blur");
},
onInnerFocus() {
console.log("inner focus");
},
onInnerBlur() {
console.log("inner blur");
},
};
},
};
</script>
Expected behavior:
inner focus
wrapper focus
There is another phase of event called "capturing". It is rarely used in real code, but can be usefull in this case.
You can add the capturing phase by adding .capture after the event name like shown below:
<div tabindex="-1" #focus.capture="onWrapperFocus" #blur.capture="onWrapperBlur">
<button #focus="onInnerFocus" #blur="onInnerBlur">Hello</button>
</div>
As it turned out, this is not related to vue. 😆 Just needs to read the documentation time to time. About focusin/focusout -
https://developer.mozilla.org/en-US/docs/Web/API/Element/focusin_event
Instead focus/blur, I use focusin/focusout and it's work how I wanted.
I've run into an extremely strange problem while developing a Vue SPA in Firefox (v89.0.1). Reactive data will not render on the page when it is contained within columns. Here is an example:
<template>
<div style="column-count: 2">
<div style="break-inside: avoid;">
Column 1
</div>
<div style="break-inside: avoid;">
Column 2
<div v-if="test">{{ test }}</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
test: ''
};
},
mounted() {
setTimeout(() => {
this.test = 'tested';
}, 2000);
}
};
</script>
In Chrome, the word "tested" is correctly rendered in the second column. In Firefox the word "tested" does not immediately appear, but it will appear later if the window is resized. The issue is resolved if the column-count style is removed.
Is this a known issue and, if so, does anyone have a suggested work around? Really scratching my head on this. (Note: I'm using column-count to create a masonry layout, so I can't easily substitute another grid solution.)
The <button> tag seems to mess up Firefox's implentation of Selection.getRangeAt.
Consider the following snippet:
<div>
Hello,
</div>
<button>
A button
</button>
<div>
how are you?
</div>
and this JS:
$(document).bind('cut copy', function() {
let sel = window.getSelection();
let range = sel.getRangeAt(0);
sel.removeAllRanges();
sel.addRange(range);
});
(https://jsfiddle.net/n9r46o5c/18/)
Now, if you select all the text you see, and then copy, it will only have "Hello," selected. Get rid of the button and it works fine. Other browsers work fine. Any ideas?
I found a work-around to what seems to be a Firefox bug. Setting in the CSS:
button { -moz-user-select: text; }
solved it.
I have the following code and would like to hide the label:
<div>
<input type="checkbox" data-filter-value="17_72" class="attrib filterselector unav_option" name="filter[17]" id="filter_17_72" value="72" disabled="">
<label class="optionvalue" for="filter_17_72"> Some Text</label> </div>
There are several of these in my code and I'd like to have all the labels hidden where their input has the state disabled=""
Any help would be fantastic.
You can use jQuery to achieve this. So it can be something like this
$(function () {
if ($('input[type=checkbox]').prop('disabled')) {
var hide = $('label').hide();
}
});
Jsfiddle
I didn't get managed via JS so I tried via CSS and it works:
#filterForm input.unav_option + label {display:none !important;}
I have added this scroll feature with no plugins to scroll up and down a gallery of large images on a single page. My code is not very elegant but the scroll basically repeats itself from image to image on action of click on arrows.
<script>
$(document).ready(function (){
$("#click4").click(function (){
$('html, body').animate({
scrollTop: $("#image2").offset().top
}, 600);
});
});
</script>
<script>
$(document).ready(function (){
$("#click5").click(function (){
$('html, body').animate({
scrollTop: $("#image4").offset().top
}, 600);
});
});
</script>
<div id="top">
<class id="image3"><img src="images/blank.png" alt=""/></class></div>
<div id="gallery">
<img src="images/image3.jpg" alt=""/>
</div>
<div id="title">
Untitled<br>2013<br>size<br>Archival pigment print<br>
Edition of <br></div>
<div id="arrows">
<class id="click4"> <span class="arrow-n"></span> </class>
</div>
<div id="arrows">
<class id="click5"> <span class="arrow-s"></span> </class>
</div>
<script>
$(document).ready(function (){
$("#click6").click(function (){
$('html, body').animate({
scrollTop: $("#image3").offset().top
}, 800);
});
});
</script>
<script>
$(document).ready(function (){
$("#click7").click(function (){
$('html, body').animate({
scrollTop: $("#image5").offset().top
}, 800);
});
});
</script>
<div id="top">
<class id="image4"><img src="images/blank.png" alt=""/></class> </div>
<div id="gallery">
<img src="images/image4.jpg" alt=""/>
</div>
<div id="title">
Untitled<br>2013<br>size<br>Archival pigment print<br>
Edition of <br></div>
<div id="arrows">
<class id="click6"> <span class="arrow-n"></span> </class>
</div>
<div id="arrows">
<class id="click7"> <span class="arrow-s"></span> </class>
</div>
The problem I am having is the images seem to flicker as you move up and down. Two questions.
Is there a simple way to avoid flickering with large images when scrolling.
Can I add a fade in fade out as you scroll into each image and how do I add this to the script. I think this will reduce the amount of flickering and add a nice effect.
Thanks for any advice.
Ive taken a look at what you have posted but I'm not able to get your code working as-is.
firstly, you should try to combine your scripts into 1. for example, you have a function for each click to scroll to 1 image. What you should do is create just 1 function then have that check the image to scroll to. There are many ways that you can do this but here is an example:
$(".clk").click(function () {
var $this = $(this),
img = $this.data('img');
$('html, body').animate({
scrollTop: $("#"+img).offset().top
}, 600);
});
Along with this function, you would need to change your markup like this:
<div id="Div6">
<div id="click7" data-img="image5" class="clk"> <span class="arrow-s"></span>
</div>
</div>
so, I have added a class of clk, this is what is going to call the function now, not clicking on the ID so that we can add this class to as many images as we want. Next, in your functions you are scrolling to the top of an image which is hard coded into each ID function... I have added an HTML Data attribute "data-" and have called it img ("data-img"). So now, when you click on class, you will call the function which will read the attribute and know where to scroll to.
Once you have got this working, please create a jsFiddle (jsfiddle.net) where you paste your html, jquery and css into the boxes and you can run the code there. Then save it and post the link back here for me so that I can see a working version and I'll take another look for you. ;-)