I have fancybox that has a width of 800px. It contains a button that redirects to a form when clicked. What I want to do is to resize the width of the fancybox to 400px when I click that button.
Here's the fancybox code for the first fancybox.
$("#fancybox-iframe").fancybox().click(function(){
$.fancybox({
href : 'user.php',
type : 'iframe',
scrolling: 'no',
width: 800px,
margin: 0,
padding: [0, 0, 10, 0],
closeBtn: false
});
return false;
});
For the form, I did this.
<body style="height: 400px; width: 400px; overflow: hidden;">
The height works fine but the width is still 800px. How should I do it? Thank you for your help.
Related
I'm using some echarts in my Vue application with vue-echarts. All charts have :autoresize="true".
My problem is, that if I try to print the page, the width of the charts are set to match the width of the browser. If browser is full screen then some charts get clipped.
CSS:
.echarts {
width: 100%;
min-height: 200px;
}
#media print {
#page { margin: 1cm }
body {
width: 110mm;
height: 297mm;
margin: 25mm 25mm 25mm 25mm;
}
.echarts {width: 600px !important;} /* This does not work! */
}
In the generated DOM there is a container, and inside that another div with the style: position: relative; width: 567px; height: 400px; padding: 0px; margin: 0px; border-width: 0px; cursor: pointer;
Width of the inner container is updated when browser is resized.
Yes, I have faced the same problem. I have also tried before print and after print and call function to redraw the chart but some times its break when Brower gets a zoom out and zoom in.
I say it's not the best solution but it works perfectly.
Solution -
Overwrite the window.print method in mounted.
window.print = function () {
setTimeout(function () {
_print();
}, 500);
};
use flag print_mode for printing.
let self = this;
window.addEventListener('afterprint', function () {
self.print_mode = false;
});
user ref of the chart instance to get base64 data. call getDataURL() to get image data.
chart = echarts.init(chart_dom);
chart_img = chart.getDataURL()
<img v-if="print_mode" class="print-only" :src="chart_img"></img>
so while printing it display image and print and in normal mode, it shows a chart.
jquery file
above is my jquery code. I want every time I click the frog image, it will move to the left 50 pixels. but when I run the code, it keeps saying "Invalid keyframe value for property left: +=50px"
google console
Here's a working example.
$("#clickme").click(function(){
$(this).animate({ "left": "-=50px" }, "slow" );
});
#clickme {
position: absolute;
background: red;
width: 100px;
left: 0;
right: 0;
margin: 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="clickme">Click me</div>
Am creating an image editor library with the support of KinetiJS.
In my html,
<div id="editorarea" class="fill">
<div id="imageContainerDiv" class="imageContainerDiv" >
<div>....</div>
<div>....</div>
<div id='rotateouterDiv' class='rotateouterDiv' >
<textarea placeholder='Enter You Text here' id='inputField' name='graffiti' class='textContainerMob'></textarea>
</div>
<div id='imageContainer'></div>
</div>
</div>
Then creating a stage
_kineticStage = new editor._Stage({
container : 'imageContainer',
width : $('#editorarea').width(),
height : $('#editorarea').height()
});
Kinetic.Util.extend(editor._Stage, Kinetic.Stage);
And adding an image,
_kineticImage = new editor._Image({
x : 0,
image : img,
y : 0,
draggable : true,
});
layer.add(_kineticImage);
The CSS applied is,
#editorarea {
width: 100%;
height: 80%;
margin-top: .1%;
min-height: 70%%;
display: block;
border-width: 2px;
border-style: solid;
}
.fill {
min-height: 85%;
height: 90%;
}
.imageContainerDiv {
width: 100%;
height: 100%;
z-index: 0;
left: 0;
right: 0;
background-color: #FFF;
display: block;
background-image: url(../images/back_pattern.png);
background-repeat: repeat;
overflow: hidden;
}
The textarea should be on the top of the image. In this case, I placed that div containing the textarea using the #media queries, for supporting different screen size and orientation.
The issue occurs when following the steps: load the page in portrait, then change the device orientation to landscape. Then the position of textarea is not correct. This is because the kinetic stage is not properly resizing on orientation change (only the area with image).
Can anyone help me to resize it properly? This should work in touch devices.
Thanks...
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 am trying to mimic the Nested Slider from the link below.
The only way I was able to do this was copy the Source Code and trim the banners etc.
Couple Questions:
Is there a way to locate the source code for this specific example with CSS and JS?
I am trying to add another nested section....right now the example has 3...and have been unsuccessful...
I added anohter sliderh4_container here
$Jssor$.$Each(["sliderh1_container", "sliderh2_container", "sliderh3_container", "sliderh4_container"], function (containerId) {
But cant seem to get this to work...
And then added slider container in HTML....
http://www.jssor.com/index.html
ANY IDEAS....help? thanks in advance...
You can adjust thumbnail size.
For example, to resize thumbnail from 200 x 100 to 150 x 100, please replace,
<div u="slides" style="cursor: move;">
<div u="prototype" class=p style="POSITION: absolute; WIDTH: 200px; HEIGHT: 100px; TOP: 0; LEFT: 0;">
<thumbnailtemplate style="WIDTH: 200px; HEIGHT: 100px; border: none; position: absolute; TOP: 0; LEFT: 0; "></thumbnailtemplate>
</div>
</div>
with
<div u="slides" style="cursor: move;">
<div u="prototype" class=p style="POSITION: absolute; WIDTH: 150px; HEIGHT: 100px; TOP: 0; LEFT: 0;">
<thumbnailtemplate style="WIDTH: 150px; HEIGHT: 100px; border: none; position: absolute; TOP: 0; LEFT: 0; "></thumbnailtemplate>
</div>
</div>
Also, you need to change $DisplayPieces from 3 to 4,
$ThumbnailNavigatorOptions: {
$Class: $JssorThumbnailNavigator$, //[Required] Class to create thumbnail navigator instance
$ChanceToShow: 2, //[Required] 0 Never, 1 Mouse Over, 2 Always
$ActionMode: 1, //[Optional] 0 None, 1 act by click, 2 act by mouse hover, 3 both, default value is 1
$AutoCenter: 3, //[Optional] Auto center thumbnail items in the thumbnail navigator container, 0 None, 1 Horizontal, 2 Vertical, 3 Both, default value is 3
$Lanes: 1, //[Optional] Specify lanes to arrange thumbnails, default value is 1
$SpacingX: 0, //[Optional] Horizontal space between each thumbnail in pixel, default value is 0
$SpacingY: 0, //[Optional] Vertical space between each thumbnail in pixel, default value is 0
$Cols: 4, //[Optional] Number of pieces to display, default value is 1
$Align: 0, //[Optional] The offset position to park thumbnail
$Orientation: 1, //[Optional] Orientation to arrange thumbnails, 1 horizental, 2 vertical, default value is 1
$DisableDrag: false //[Optional] Disable drag or not, default value is false
}