I created a paintable canvas as suggested in here
<!-- Part 1: Works -->
<canvas id='paint' width={250} height={250}/>
Then I moved it into a container
<!-- Part 2: Offset! -->
<div class="container">
<p class="notification is-info">Draw on the box provided</p>
<canvas id='paint' width={250} height={250}/>
</div>
This creates offset problems:
JSFiddle here: (Please View results in fullscreen to see the offset)
Is it a bulma issue or am I doing something wrong?
I found a fix:
add this css rule:
.container {
position: static
}
I simulated the effect in this JSFiddle by adding a margin of 20px, it would offset the pointer by 20px. The problem seems to be that container is position: relative. If changed to static the issue disappears.
Hope it helps!
https://jsfiddle.net/9qxoa32y/
And here you can see it in action:
https://jsfiddle.net/woyvbe5L/embedded/result/
Related
We upgraded from JSSOR 26.5.2 to 27.5.0, and found that we are no longer able to use "link slides" as described in the JSSOR documentation here:
https://www.jssor.com/development/define-slides-html-code.html
The issue seems to be a DOM change in JSSOR 27. Now there is a new DIV element, the one with data-events=auto and data-display=block, that acts as a kind of "glass" in front of the actual image (the one with u=image). As a result, any ... that surrounds the actual IMG can never be clicked, because the z-index of this "glass" prevents the click on the .
In our case, we've always been using a construct like this:
<a u="image" href="..." style="display: block;">
<img src="..." alt="..."/>
</a>
It's always worked until now. Is this a bug in JSSOR?
Your code is correct.
Anyway, here is an example, hope this helps.
https://www.jssor.com/jssordev/problems/image-slider.slider
https://www.jssor.com/jssordev/problems/image-slider.slider/=edit
The output code is as below,
<a href="#">
<img data-u="image" src="//jssorcdn7.azureedge.net/demos/img/gallery/980x380/004.jpg" />
<div data-t="0" style="position:absolute;top:30px;left:30px;width:500px;height:40px;font-family:Oswald,sans-serif;font-size:32px;font-weight:200;line-height:1.2;text-align:center;background-color:rgba(255,188,5,0.8);">responsive, scale smoothly</div>
</a>
Edit
I got the problem, the new version improved to use <a> element as whole slide.In this manner, you can add anything inside without hiding the link area.
That's to say, as <a> is a slide, you can remove the parent <div> element.
I experience an issue with nested views in my Ionic app. I have a custom tab
navigation which is placed within my parent ion-view. The tab navigation is intended to scroll together with the content, which is located in an ion-nav-view underneath. For that I put the scroll="false" onto the child's ion-content.
The problem is, that my content won't expand the parent's height to fit the content's height. It has a height of 100%, which is fixed to the view's initial height. So at the end of the page there is content left, which is never displayed. Here is the template code (I am sorry, I cannot provide a plunkr example):
<ion-view>
<ion-content on-swipe-left="tabs.goToNext()" on-swipe-right="tabs.goToPrevious()">
<div class="tabbed-slidebox">
<div class="tsb-icons">
<div class="tsb-ic-wrp" style="">
Was
Wer
Wo
Wann
</div>
</div>
</div>
<ion-nav-view name="stepContent">
<!-- For illustration I copied ion-view from the template which will be rendered into this ion-nav-view -->
<ion-view view-title="Schadenmeldung">
<ion-content class="step step-what padding" scroll="false">
<!-- CONTENT -->
</ion-content>
</ion-view>
</ion-nav-view>
</ion-content>
<div class="fab-sticky">
<!-- some sticky button here -->
</div>
</ion-view>
See a demo here
My view hierarchy looks somehow like this:
app view (mainly ion-nav-bar)
tabs view (mainly tab navigation)
content view (content intended to expand the ion-view's height)
(I can provide the state config if that helps)
I already played around with the CSS a lot. But since I am no CSS Mastermind, I did not find a solution.
The problem seems to come from the position: absolute of the ion-nav-view. It prevents the height to
adapt to the content.
Can anyone help?
you can add style into ion-nav-view
for example：
<ion-nav-view name="stepContent" style="height: 380px"></ion-nav-view>
I have the following code set up on my page used to display the facebook plugin:
<div class="fb-page" data-hide-cover="true" data-href="https://www.facebook.com/bikefinders" data-show-facepile="false" data-show-posts="true" data-width="280" style="float: left; margin: 10px;">
This worked fine until a couple of days ago. Now for some reason it is stuck on width 180px it seems - yet in the code it says 280px. Anyone know why this is? Check it out here: www.bikefinder.no (Plugin left side of pic).
Thanks for input!
As the documentation on Page Plugin doc says under the heading Adaptive Width:
Probably your container is 0 px or display: none at the time of page load.
The plugin tries to get to a minimum width, 180px in this case
So, if you ensure your container has wdith >= configured_width, it should work.
Code:
<div style="min-width: 180px">
<div class="fb-page" data-hide-cover="true" data-href="https://www.facebook.com/bikefinders" data-show-facepile="false" data-show-posts="true" data-width="180" style="float: left; margin: 10px;">
</div>
// min-width would ensure its 180px or greater
It checks parent (container) width, which overrides data-width attribute.
You can wrap it inside a fixed-width div, for example.
<div style="width:300px">
<!--Page plugin's width will be 300px no matter what you set in data-width-->
<div class="fb-page" ...
</div>
By the way, the container and its parents should be visible during page loading otherwise it will be read as 0.
You can read more details here
Right now on my website I have the following JavaScript that shows and hides a
<div class="commentBox"></div>
when user clicks a
Show Comments
Full Code:
<script type="text/javascript">
function toggleSlideBox(x){if($('#'+x).is(":hidden")){$(".comentBox").slideUp(200);$('#'+x).slideDown(200)}else{$('#'+x).slideUp(200)}}
</script>
Show Comments
<div class="commentBox">Content</div>
The effect can be illustrated like this:
I wanted to modify this function to act differently, but I couldn't figure it out. Basically what I wanted was to show content that is at the bottom once it starts expanding and have a fade in effect.
This is what I was hoping to achieve:
Could anyone suggest how to achieve the slide / toggle effect that is shown in image 2? so when user clicks a link it expands like that and when link is clicked again it shrinks.
The effect you describe looks just like the JQuery UI slide effect to me (rather than the blind effect that you have at present). This doesn't provide the opacity animation but provides a very simple solution otherwise. Or maybe I am misunderstanding you?
(The method accepts a parameter to slide down, rather than right-to-left of course)
$("#test").show("slide", {direction: "up"}, 1000);
JSFiddle here
If you are just animating a background image, like that rabbit just set the background position like this:
background-position: 0 100%;
This will align the background to the bottom edge rather than the top.
For text content the same principle applies. You just have to position the content absolutely to the bottom edge. For example:
<div class="container">
<div class="content">
<p>Text</p>
</div>
</div>
Then use this CSS:
.container {
position: relative;
overflow: hidden;
}
.content {
position: absolute;
bottom: 0; left: 0;
}
The only issue with this is that you need to find the height of the content so that you know how much to expand the container.
To do this, you can use this jQuery:
var height = $('.content').outerHeight();
Then on the click event just animate to the correct height:
$('.container').animate({
'height': height
});
Hope that helps :)
http://api.jquery.com/animate/
On this page, they give a demo where they have a gray div move across the screen with the click of a button.
Notice that if you click the right button enough times and the DIV block reaches the end of the container it creates horizontal and vertical scrollbars.
I downloaded and modified the code to get rid of the overflow property and what I have so far works BEAUTIFULLY in desktop browsers.
However, Safari on the iPhone handles things a little bit differently. For some reason, Safari completely ignores the overflow property and instead expands the browser window to show you where the block moved to.
I don't want you to be able to see the block. I want it hidden until you hit button again.
Anyone know what the heck is going on?
Here is a pic of the issue:
Here is my code:
div {
position:absolute;
background-color:#abc;
width:100%;
height:100%;
margin:0px;
max-width:100%;
}
body {
margin:0px;
padding:0px;
}
* {
overflow:hidden;
clip:rect(auto, auto, auto, auto);
}
</style>
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
</head>
<body>
<button id="left">«</button> <button id="right">»</button>
<div class="block"></div>
<script>
$("#right").click(function(){
$(".block").animate({"left": "+=110%"}, "medium");
});
$("#left").click(function(){
$(".block").animate({"left": "-=110%"}, "medium");
});
</script>
Even though I have moved the DIV block off the screen and I have overflow:hidden as a global style, the iPhone will make room for it in the browser window to show you where the DIV has moved to. ANNOYING!
Thank you in advance!
Not completely sure I understand what you want to accomplish here. But if you want to make the gray box disappear as it leaves towards the end of the document, then I would suggest that you wrap the div inside another div, and set the width of the wrapping element to 100% and overflow: hidden;
Like this:
<div class="wrapper">
<div class="block"></div>
</div>
Also add the appropriate styling:
<style type="text/css">
...
.wrapper {
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
}
</style>
Note that you need to absolute position the wrapper as well, otherwise the gray block will still be visible outside it. You'll also need to give it some height (I used 100% in my example) or it will be 0px high (due to the absolute positioned child) and nothing will be visible.
Hope that helps.
Alternative to
overflow:hidden
HTML:/<div class="clear"></div>
CSS:.clear {clear:both;}