JSFiddle Link
When SVG image is clicked, alert function does not trigger in IPhone. (It works in android).
How can I make this workin IPhone without using z-index and overlay div?
HTML
<div id="svg" style="position: relative; background: green; width: 900px; height: 900px;" >
<object id="object" type="image/svg+xml" data="http://www.useragentman.com/tests/pointerEvents/images/tv-path.svg">
</object>
</div>
CSS
#svg object{
pointer-events: none;
}
Javascript
$('#svg').on('click', function () {
alert('hello');
});
Related
Is it possible to customize the vue components that quasar has?
I want to use the color picker vue component from the quasar framework (this one https://quasar.dev/vue-components/color-picker), but i wanted to remove the header and keep the hexadecimal color input.
I know there is a "no header" version of the component, but that version also removes the color input.
Here an image to exemplify
I want to keep the green part and remove the red part
You can hide the header completely and add a custom header which shows value of the current color.
<link href="https://cdn.jsdelivr.net/npm/quasar#1.8.3/dist/quasar.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar#1.8.3/dist/quasar.umd.min.js"></script>
<div id="q-app">
<div class="q-pa-md">
<div class="container">
<div class="custom-header">{{hex}}</div>
<q-color no-header v-model="hex" dark class="my-picker" ></q-color>
</div>
</div>
</div>
<script>
new Vue({
el: '#q-app',
data () {
return {
hex: '#FF00FF'
}
}
})
</script>
<style>
.my-picker{
width: 150px
}
.container {
width: 180px;
position: relative;
}
.custom-header {
text-align: center;
background: transparent;
position: absolute;
width: 100%;
top: 0;
left: 0;
z-index: 10000
}
</style>
codepen
I want to use an element on the page as the title of the following content, but when the user is scrolling into the content this title-element should be fixed at the header. Similar to the ABC-captions in the iOS music-app.
See here: https://jsfiddle.net/1e7ync4w/
HTML
<div>
<div class="top">
Test
</div>
<div class="content">
<div class="scroller">
</div>
Test
</div>
</div>
CSS
.top {
background-color: yellow;
height: 300px;
}
.content {
position: relative;
height: 600px;
background-color: green;
}
.scroller {
position: absolute;
width: 100%;
height: 10px;
top: 0;
left: 0;
background-color: blue;
}
.scroller.fixed {
position: fixed;
}
JS
$(document).ready(function() {
$(window).on('scroll touchmove', function() {
$('.scroller').removeClass('fixed');
var scrollTop = $(window).scrollTop();
var scrollerOffsetTop = $('.scroller').offset().top;
if(scrollerOffsetTop <= scrollTop) {
$('.scroller').addClass('fixed');
}
});
});
The problem is that the iOS safari seems to have a bug with changing elements to fixed (via JavaScript) while scrolling. As soon as the user scrolls into the content, the title-element becomes invisible but shows after releasing the finger from the display (scroll-end).
I only tested this on the iOS 9.3.2 safari but I think this issue is older.
I found a solution for this problem. It's a little bit hacky but the only workaround I found for this iOS-bug.
The GPU of the browser needs to be "activated" for updating the according element. This can be achieved by setting a transform: translate-style via JS as soon as the positioning jumped to fixed.
The code of the example would look like this:
$(document).ready(function () {
$(window).on('scroll touchmove', function () {
$('.scroller').removeClass('fixed');
var scrollTop = $(window).scrollTop();
var scrollerOffsetTop = $('.scroller').offset().top;
if (scrollerOffsetTop <= scrollTop) {
$('.scroller').addClass('fixed').css({
'transform': 'translate3d(0px,0px,0px)',
'-moz-transform': 'translate3d(0px,0px,0px)',
'-ms-transform': 'translate3d(0px,0px,0px)',
'-o-transform': 'translate3d(0px,0px,0px)',
'-webkit-transform': 'translate3d(0px,0px,0px)'
});
}
});
});
Using the normal implementation of JQuery UI slider with this code:
$(function() {
$('.slider').slider();
});
JQuery UI only creates the surrounding slidable area, and then the handle to drag. Does anyone have experience extending this add an secondary element that shows where the user has dragged to? What I want to achieve is to have a two colour draggable area, either side of the handle.
You can add divs in the slider and update their size on slide event. Like this:
$('.slider').slider({
max: 100,
min: 0,
slide: function (e, ui) {
$('.left-side').css('width', $(ui.handle).position().left)
$('.right-side').css('width', $(e.target).width() - $(ui.handle).position().left)
}
});
$('.left-side').css('width', '0px');
$('.right-side').css('width', $('.slider').width())
.slider div {
position: relative;
height: 100%;
}
.left-side {
background-color: aliceblue;
left: 0px;
width: 200px;
float: left;
}
.right-side {
background-color: bisque;
width:200px;
float: left;
}
<link href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div class='slider'>
<div class="left-side"></div>
<div class="right-side"></div>
</div>
I am having trouble resizing a SVG to fit inside a jQuery Mobile page.
This should work on mobile devices and also in a normal browser.
Please see this example.
<div data-role="content">
<object type="image/svg+xml" data="http://simonamby.dk/wdhtest/img/A_0.svg?id=1"></object>
CSS:
#map .ui-content {
position : absolute;
top : 40px;
right : 0;
bottom : 30px;
left : 0;
}
Bonus: How do I get the fading animation to work in Internet Explorer? Only works in Chrome right now.
You just need to apply the CSS to the object tag:
#map-page object {
position:absolute;
top:0%;
left:0%;
width:100%;
height:100%;
}
Updated FIDDLE
When the dialog is set to modal it should disable all input elements, but I tried a simple example with a textbox and a radiobutton. When the dialog is opened the text-input is disabled as expected, but i still can check the radiobutton.
I used the example from the jQuery-ui demo and a simple html with just a input-textbox and the radio.
<html>
<head>
<title>Test</title>
</head>
<body>
<div id="dialog-message" title="Download complete" style="display:none">
<p>
<span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
Your files have downloaded successfully into the My Downloads folder.
</p>
<p>
Currently using <b>36% of your storage space</b>.
</p>
</div>
<input type="text"/>
<input type="radio" onClick="showDialog();"/>
<input type="radio"/>
</body>
</html>
And the jQuery:
function showDialog(){
jQuery(function() {
jQuery( "#dialog-message" ).dialog({
position: 'center',
zIndex: 4001,
draggable: false,
modal: true,
buttons: {
Ok: function() {
jQuery( this ).dialog( "close" );
}
}
});
});
}
Problem solved. It had to do with the css. Because I didn't use the default css or css created with theme roller I forgot to define the styling for ui-widget-overlay. After I copied the ovelay-styling from the jquery-ui css everything worked fine.
the css:
.ui-widget-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.ui-widget-overlay {
background: #666666 url(ui-bg_diagonals-thick_20_666666_40x40.png) 50% 50% repeat;
opacity: .50;
filter:Alpha(Opacity=50);
}