I have the following node structure in my HTML:
<div id="widget1" class="dojoxFloatingPane dijitContentPane dojoxFloatingPaneFg" title="" role="group" style="position: absolute; top: 82px; left: 231px; width: 984px; height: 276px; z-index: 102;" widgetid="widget1">
<div class="dojoxFloatingPaneTitle" dojoattachpoint="focusNode" role="button" tabindex="0">
<div class="dojoxFloatingPaneCanvas" dojoattachpoint="canvas" style="left: 0px; top: 0px; width: 984px; height: 249px;">
<iframe class="dijitBackgroundIframe" src="javascript:""" role="presentation" style="opacity: 0.1; width: 100%; height: 100%;" tabindex="-1">
I'm trying to set the size of this FloatingPane with Dojo with the following peace of code. First I read in the nodes, the widget1 node and then I look for the dojoxFloatingPaneTitle class and store these nodes in variables. Then I read the cookie and it successfully sets the style on the paneNode.
var paneNode = dom.byId("widget1");
var canvasNode = query(".dojoxFloatingPaneCanvas", paneNode);
function(){
var wid1saved = dojo.fromJson(cookie("widget1"));
domStyle.set(paneNode, {
left: wid1saved.x + "pt",
top: wid1saved.y + "pt",
width: wid1saved.w + "px",
height: wid1saved.h + "px",
position: "absolute"
});
domStyle.set(canvasNode, {
width: wid1saved.w + "px",
height: wid1saved.h + "px",
backgroundColor: "black"
});
}
It does set the size of the outer node (paneNode) but the canvas inside (canvasNode) is unchanged. In the debugger I can see that the query does find the proper node.
Any ideas why the canvasNode style is not set?
Many thanks
dojo.query usually returns an array of the objects found.
Have you tried:
var canvasNode = query(".dojoxFloatingPaneCanvas", paneNode)[0];
Related
I have an Iframe
<iframe v-show="this.$store.getters['rackStore/getIframe'].show === 'iframe'" ref="iframe_3d" :src="this.$store.getters['rackStore/getIframe'].ref" id="iframe_3d" allowfullscreen="true" style="width: 100%; height: 100%; z-index: -1; position: fixed; top: 0px; left: 0px; border: 1px solid #00f; "></iframe>
And it displays the data perfectly.
Src I take from Vuex
Then I want to change the src value:
let iframe_param = this.$store.getters['rackStore/getIframe'];
this.$store.commit('rackStore/setIframe', { ...iframe_param, show: 'iframe', ref: model.ref } );
And I mean in the console that the src value of the iframe is changing!
But the iframe itself is not updated in the browser for some reason.
I tried to force update it: this.$ForceUpdate ();
This does not work.
I've tried changing the src in the usual way without Vue, this also doesn't work:
<iframe v-show="this.$store.getters['rackStore/getIframe'].show === 'iframe'" ref="iframe_3d"
src="" id="iframe_3d"
allowfullscreen="true" style="width: 100%; height: 100%; z-index: -1; position: fixed; top: 0px; left: 0px; border: 1px solid #00f; ">
</iframe>
var iframe = document.getElementById('iframe_3d');
iframe.src = model.ref;
src changes but no data refresh occurs, the previous site is still open in the iframe
What to do?
Thank you in advance!
Try update the element using key attribute:
<template>
<!-- ... -->
<iframe v-show="this.$store.getters['rackStore/getIframe'].show === 'iframe'" ref="iframe_3d" :src="this.$store.getters['rackStore/getIframe'].ref" id="iframe_3d" allowfullscreen="true" style="width: 100%; height: 100%; z-index: -1; position: fixed; top: 0px; left: 0px; border: 1px solid #00f; " :key="iframeUpdate"></iframe>
<!-- ... -->
</template>
<script>
export default {
// ...
data() {
return {
iframeUpdate: false
}
},
}
</script>
When your value in Vuex changes, simultaneously change iframeUpdate variable value like this:
this.iframeUpdate = !this.iframeUpdate;
I'm trying to display a one line list of elements.
This list is browsed using the scrollbar.
Each element can be removed on click with a transtion making it go up and fade.
I came up with the following code:
new Vue({
el: '#container',
data: { blocks: [1, 2, 3, 4, 5, 6, 7] }
})
#container {
position: relative;
height: 100px;
width: 200px;
border: 1px solid black;
overflow-x: scroll;
}
.block {
position: absolute;
bottom: 0px;
height: 40px;
width: 40px;
background-color: blue;
cursor: pointer;
}
.rise-fade-leave-active,
.rise-fade-move {
transition: all 0.5s ease;
}
.rise-fade-leave-to {
transform: translateY(-40px);
opacity: 0;
}
<script src="https://unpkg.com/vue#2.6.11/dist/vue.min.js"></script>
<div id="container">
<transition-group name="rise-fade" tag="div">
<div v-for="(b, i) in blocks"
v-bind:key="b"
v-bind:style="{ left: i*50 + 'px' }"
v-on:click="blocks.splice(i, 1)"
class="block">
</div>
</transition-group>
</div>
But if I scroll to the most right and click on any visible element except the last one, the element seems to be pushed to the right during the list move transition.
Is there a way to prevent this?
I would like to have my element rising just vertically no matter the scroll value.
I want to create two divs and make them re-sizable with respect to each others width in VueJS
$(function() {
var A = parseInt($('#A').width(), 10),
B = parseInt($('#B').width(), 10),
Z = parseInt($('#Z').width(), 10),
minw = parseInt((A + B + Z) * 10 / 100, 10),
offset = $('#container').offset(),
splitter = function(event, ui) {
var aw = parseInt(ui.position.left),
bw = A + B - aw;
//set widths and information...
$('#A').css({
width: aw
}).children().text(aw);
$('#B').css({
width: bw
}).children().text(bw);
};
$('#Z').draggable({
axis: 'x',
containment: [
offset.left + minw,
offset.top,
offset.left + A + B - minw,
offset.top + $('#container').height()
],
drag: splitter
});
//information...
$('#width').text(A + B + Z);
$('#A div').text(A);
$('#B div').text(B);
});
#container {
width: 90%;
height: 100px;
margin: 0 auto;
position: relative;
}
#A,
#B,
#Z {
position: absolute;
top: 0;
height: 100%;
}
#A {
left: 0;
width: 39%;
background-color: #ccffcc;
}
#B {
right: 0;
width: 59%;
background-color: #ccccff;
}
#Z {
left: 39%;
width: 2%;
background-color: #cc0000;
cursor: move;
}
#A div,
#B div {
position: absolute;
top: 40%;
left: 0;
width: 100%;
text-align: center;
}
#info {
text-align: center;
line-height: 2em;
}
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div id='info'>container width : <span id='width'></span></div>
<div id='container'>
<div id='A'>
<div>a</div>
</div>
<div id='B'>
<div>b</div>
</div>
<div id='Z'></div>
</div>
You are mixing Vue with jQuery, so when your jQuery code runs the Vue app might not be ready.
A solution could be to wrap the draggable library in a <Draggable> component and use refs to access the DOM nodes from the mounted hook in the Vue component.
I have been unable to get this code to work on IE11 - it works fine on Chrome and Firefox, Android Chrome, Opera, just not IE. In IE11, I can actually see the images pile in on top of one another until it reaches the last image, then it just stops. The last image is distorted (as if $FillMode is set to 0). However, while clicking on the image makes no difference, dragging it even the slightest amount triggers it into operation. It's as if the auto-start is ignored, but once nudged, the function works. If I do nothing, it sits on the last image loaded indefinitely.
The head:
<script type="text/javascript" src="css/jssor.slider.js"></script>
<script async>
jQuery(document).ready(function ($) {
var _SlideshowTransitions = [{$Duration:700,$Opacity:2,$Brother:{$Duration:1000,$Opacity:2}} ];
var _CaptionTransitions = [];
var startImgNumber =Math.floor((Math.random()*16)+1);
var options = {
$CaptionSliderOptions: {
$Class: $JssorCaptionSlider$,
$CaptionTransitions: _CaptionTransitions,
$PlayInMode: 1,
$PlayOutMode: 3},
$AutoPlay: true,
$DragOrientation: 1,
$AutoPlayInterval: 5000, // ADJUST!!!!
$FillMode: 1,
$SlideHeight: 260,
//$PauseOnHover: 0,
$StartIndex: startImgNumber,
$SlideshowOptions: {
$Class: $JssorSlideshowRunner$,
$Transitions: _SlideshowTransitions,
$TransitionsOrder: 1,
$ShowLink: true
}
};
var jssor_slider1 = new $JssorSlider$("slider1_container", options);
function ScaleSlider() {
var parentWidth = $('#slider1_container').parent().width();
if (parentWidth) {
jssor_slider1.$ScaleWidth(parentWidth);
}
else
window.setTimeout(ScaleSlider, 30);
}
//Scale slider after document ready
ScaleSlider();
//Scale slider while window load/resize/orientationchange.
$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);
//responsive code end
});
</script>
HTML code is:
<div id="PhotoShow" >
<div id="slider1_container" style="position: relative; top: 0px; left: 0px width: 332px; height: 260px; ">
<!-- Slides Container -->
<div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 330px; height: 260px; overflow: hidden;">
<div><img data-u="image" src="photos/pic1.jpg" title="Photo By me ©2015" alt=""/><div u="caption" t="transition_name1" style="position: absolute; top: 245px; left: 100px; width: 200px;height: 30px; color:#FFFBF0; font-size:x-small" >Courtesy of me © 2015</div></div>
<div><img data-u="image" src="photos/pic2.jpg" title="Photo By me ©2015"alt=""/><div u="caption" t="transition_name1" style="position: absolute; top: 245px; left: 125px; width: 200px;height: 30px; color:#ffffff; font-size:x-small" >me © 2015</div></div>
.
.
. 16 images total
</div>
</div>
</div>
(Possible I have extra /div tags - that is not the issue, just a typo), I am completely at a loss as to why this works on everything except IE11. It appears that the function simply does not execute. I've tried window.onload and a few other things - changes nothing.
Thanks for any clues or suggestions
A semicolon is missing in your html code.
Please replace
<div id="slider1_container" style="position: relative; top: 0px; left: 0px width: 332px; height: 260px; ">
with
<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 332px; height: 260px; ">
I have not been able to render some images stored in my server properly using phantomjs. If I use any other image stored on the internet in works fine. So I was wondering if someone out there can tell me some server configuration I should've set up.
I have this phantomjs script:
page.open(html, function () {
window.setTimeout(function( status ) {
page.clipRect = { left: 0, top: 0, width: 640, height: 800 };
page.render(outputFolder + htmlBaseName + '.png');
console.log('rendered');
phantom.exit();
}, 2000);
});
And a html file containing a table and these images:
<img src="http://myServerURL/image1.png" style="width: 198px; min-height: 181px; max-height: 181px; height: 181px; max-width: 198px;" width="198" height="181">
<img src="http://myServerURL/image2.png" style="width: 198px; min-height: 181px; max-height: 181px; height: 181px; max-width: 198px;" width="198" height="181">
<img src="http://phantomjs.org/img/phantomjs-logo.png" style="width: 198px; min-height: 181px; max-height: 181px; height: 181px; max-width: 198px;" width="198" height="181">
And I'm getting this in return:
My images can be viewed from the internet
If you want to render local Images in PDF, you have to convert that image to base-64 and pass this value in src attribute of img tag.