I have combined two (did not nest them but bottom one is a nested slider) Jssor sliders and top slider is responsive but not bottom one. I changed variables to unique names in responsive coding for second but still no responsivity only on second slider. Hints?
The following code is to scale slider while window resize.
//responsive code begin
//you can remove responsive code if you don't want the slider scales while window resizes
function ScaleSlider() {
var bodyWidth = document.body.clientWidth;
if (bodyWidth)
jssor_slider1.$ScaleWidth(Math.min(bodyWidth, 980));
else
window.setTimeout(ScaleSlider, 30);
}
ScaleSlider();
if (!navigator.userAgent.match(/(iPhone|iPod|iPad|BlackBerry|IEMobile)/)) {
$(window).bind('resize', ScaleSlider);
}
//if (navigator.userAgent.match(/(iPhone|iPod|iPad)/)) {
// $(window).bind("orientationchange", ScaleSlider);
//}
//responsive code end
Please make a bit change to resize both sliders at the same time.
function ScaleSlider() {
var bodyWidth = document.body.clientWidth;
if (bodyWidth) {
jssor_slider1.$ScaleWidth(Math.min(bodyWidth, 980));
jssor_slider2.$ScaleWidth(Math.min(bodyWidth, 980));
}
else
window.setTimeout(ScaleSlider, 30);
}
Related
In my Xamarin.Forms application I use a custom renderer for entries, since I want them to be made of a single, bottom border. The problem is that I can't find out the right code to make the custom renderer use the element's width. Currently, the situation is like this:
As you can see, the bottom border goes far beyond the real element's width, but I don't understand why. Here I found something, but still I don't understand how to fix this and why this happens. My current code for the renderer class is:
public class CustomEntryRenderer : EntryRenderer
{
protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
{
base.OnElementChanged(e);
if (Control != null)
{
Control.BorderStyle = UITextBorderStyle.None;
var view = Element as CustomEntry;
var borderLayer = new CALayer
{
Frame = new CGRect(0f, Frame.Height + 5, Frame.Width, 1f),
BorderColor = UIColor.Gray.CGColor,
BackgroundColor = UIColor.Magenta.CGColor,
BorderWidth = 13,
MasksToBounds = true
};
Control.Layer.AddSublayer(borderLayer);
}
}
}
The problem seems to be in that Frame.Width. If I set it to 100, for example, the width of the bottom line of the entry is set to 100, but the problem is that, doing so, I'm not able to horizontally center the line. I want this outcome:
I have a slider that fades images.
The transition works, the new image fades it, but the previous image doesn't fade out.
The previous image simply disappears after the next image has fully faded in.
For opaque images this of course is perfectly fine as we don't need to the previous image fade out. It's simply overlaid by the new image.
The problem is that my images have transparent regions, so it would be necessary that the previous image fades out.
How could I achieve this?
My current code is this:
jssor_1_slider_init = function() {
var jssor_1_SlideshowTransitions = [
{$Duration:800,$Opacity:2}
];
var jssor_1_options = {
$AutoPlay: 1,
$LazyLoading: 1,
$SlideshowOptions: {
$Class: $JssorSlideshowRunner$,
$Transitions: jssor_1_SlideshowTransitions
}
};
var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);
/*#region responsive code begin*/
var MAX_WIDTH = 256;
function ScaleSlider() {
var containerElement = jssor_1_slider.$Elmt.parentNode;
var containerWidth = containerElement.clientWidth;
if (containerWidth) {
var expectedWidth = Math.min(MAX_WIDTH || containerWidth, containerWidth);
jssor_1_slider.$ScaleWidth(expectedWidth);
}
else {
window.setTimeout(ScaleSlider, 30);
}
}
Given image with transparent area, to make jssor slider with slideshow, you can use twins transitions.
Open options window, choose one or more twins slideshow transitions.
Followed by documentation and examples on this page
I think you need this {$Duration:700,$Opacity:2,$Brother:{$Duration:700,$Opacity:2}}
Example : Fade Twins
I am developing an app as like rich editor text and as i have wrote the text on editable web view but keyboard hides the lines. I am also using some javascript coding but not succeeded.
this.updateOffset = function() {
try{
var sel = window.getSelection();
range = sel.getRangeAt(0);
if(this.tmpSpan==null){
this.tmpSpan = document.createElement('span');
}
range.insertNode(this.tmpSpan);
this.yOffset = this.tmpSpan.offsetTop;
this.xOffset = this.tmpSpan.offsetLeft;
this.tmpSpan.parentNode.removeChild(this.tmpSpan);
}
catch(exc){
log('updateOffset:' + exc.toString());
}
}
// eContent is the div with 'contenteditable', while visibleHeight is an int, set from objective-c (depending on where the webview is positioned, keyboard height and screen height)
this.scrollToVisible = function(){
try {
if(this.eContent.clientHeight>this.visibleHeight){
this.updateOffset();
if(this.yOffset<window.pageYOffset){
window.scrollTo(0, this.yOffset);
}
else if(this.yOffset-window.pageYOffset>this.visibleHeight){
window.scrollTo(0, this.yOffset-this.visibleHeight);
}
}
}
catch (exc){
log('scrollToVisible: ', exc.toString());
}
}
Please suggest what we should do.
I use this code to show my popup automatically and I want to know how to close it automatically after 5 seconds.
$(document).ready(function() {
var id = '#dialog';
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set heigth and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});
//transition effect
$('#mask').fadeIn(500);
$('#mask').fadeTo("slow",0.9);
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
$(id).css('top', winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);
//transition effect
$(id).fadeIn(2000);
//if close button is clicked
$('.window .close').click(function (e) {
//Cancel the link behavior
e.preventDefault();
$('#mask').hide();
$('.window').hide();
});
//if mask is clicked
$('#mask').click(function () {
$(this).hide();
$('.window').hide();
});
});
Modifying an example from Mozilla's developer page on WindowTimers.setTimeout(), call this function from within your existing document.ready function:
delayedAlertClose();
Add these functions outside your document.ready function:
function delayedAlertClose() {
timeoutID = window.setTimeout(popupClose, 5000);
}
function popupClose() {
$('#mask').hide();
$('.window').hide();
}
I am new to Titanium.
I have taken 3 view and want to hide show that view on button click for iPhone app.
Any idea how to achieve this?
You can hide / show a view very easily, heres a self contained example:
var win = Ti.UI.createWindow();
var view = Ti.UI.createView({
width : 100,
height : 100,
backgroundColor : 'red'
});
var redView = Ti.UI.createView({
title : 'Hide / Show Red View',
bottom : 0,
width : 200,
height : 35
});
var visible = true;
button.addEventListener('click', function(e) {
if(visible) {
redView.hide();
} else {
redView.show();
}
visible = !visible;
});
win.add(redView);
win.add(button);
win.open();
While the other answer is certainly useful, two other (slightly) different methods for doing the same thing, just in case Titanium flips out when you use show() and hide().
//Method 1, using part of Josiah Hester's code snippet
var visible = true;
button.addEventListener('click', function(e) {
if(visible) {
redView.setVisible(false); //This is the exact same thing as hide() method
} else {
redView.setVisible(true); //This is the exact same thing as show() method
}
visible = !visible;
});
You can set opacity to 0 and even if the view's visible property is set to true, it will still be invisible, due to a completely nonexistent level of opacity. This is useful if you want something to be visible, but not clickable (by placing a view behind a view with an opacity of zero.
//Method 2, same code section
var opacity = 0;
button.addEventListener('click', function(e) {
if(opacity) {
redView.setOpacity(0); //This is the NOT the same thing as hide() method
} else {
redView.setOpacity(1); //This is the NOT thesame thing as show() method
}
opacity = Math.abs(opacity - 1);
});