I have used the coin slider in my application.But the coin slider is restricted by the width.In my application ,I have split the document into two columns.The first column only contains coin slider.The second column contains the login panel.According to the width of the second column,the first column was adjust.I need to run my application in various screen size like 1280*768,800*600.is there any image slider in jquery without restrict width of image?Please help me. Thanks in advance.
jQuery(document).ready(function() {
id = '#coin-slider1'.replace(/:/g, "\\:");
var sliderWidth="";
jQuery(id).coinslider({width:sliderWidth,height:screen.height/4,delay:500});
})
Measure the width of the first column before using that value in the options array that you pass into the plugin...
jQuery(document).ready(function() {
id = '#coin-slider1'.replace(/:/g, "\\:");
var sliderWidth = $('#column1').width();
jQuery(id).coinslider({width:sliderWidth,height:screen.height/4,delay:500});
})
I have fix my problem with the help of calumbrodie.Thanks to calumbrodie.
I set the width of the tabPanel(parne to fo div of slider) as width of slider.
i got the width by the below code
document.getElementById('homeContentSubView:homeForm:tabPanel').offsetWidth
And my full code is,
jQuery(document).ready(function() {
id = '#coin-slider1'.replace(/:/g, "\\:");
var sliderWidth = ""; sliderWidth=document.getElementById('homeContentSubView:homeForm:tabPanel').offsetWidth-30; jQuery(id).coinslider({width:sliderWidth,height:screen.height/4,delay:750});
})
Thanks to all.
Related
Can't find any manual about changing width of taglist element size.
Taglist element is wider than icons I had set. It looks really awful =(
Screenshot: http://s12.postimg.org/fkva7xywd/Screenshot_16_02_2014_16_04_07.png
Taglist element consist of icon, text and gap between them. This gap defined in awful.widget.common.list_update function in line
m = wibox.layout.margin(tb, 4, 4)
Despite you have no text, double gap is still here. To solve this problem you can copy list_update function to your rc file, fix it and send as fifth(!) argument in awful.widget.taglist.
just tell your imagebox not to be resizable, example:
wibox.widget.imagebox(beautiful.clock, false)
or you can even resize you wibox:
mywibox[s] = awful.wibox({ position = "top", screen = s, height = 32 })
you just need to modify height value
or another method using wibox.layout.constraint:
clock_icon = wibox.widget.imagebox(beautiful.clock, true)
local const = wibox.layout.constraint()
const:set_widget(clock_icon)
const:set_strategy("exact")
const:set_height(16)
then, instead of adding your icon to the layout, just add the constraint.
I am working on Table view in Titanium iphone.
I tried to add animation style for each row.
That is, when user click on each row , then row height need to increase, So I able to show hided contents in row. And when user click again then the row height need to decrease.
My code is,
for collapsed view,
var animation = Ti.UI.createAnimation({height: 1, duration: 500});
row.animate(animation);
and for expanded view,
row.animate(Ti.UI.createAnimation({ height:200, duration:300 });
but above both code are not working,
If I set row height without using animation then its working fine.
How to apply animation style for table view row...
can any one please.
you can try this
http://developer.appcelerator.com/question/119198/animating-row-height-changes
TableViewRow cannot be animated. It's documentation bug. You need to make your own animation function (ie, setTimeout).
The height of the row is animated by default (on iOS) when you change it, so :
row.height = '40dp';
If you set the row height directly to a numeric value, it will be animated by default on iOS. The default animation will override any custom animations you might come up with for example using the standard setTimeout javascript function.
The difficulty is to make the row content appear animated as well. Let's say row.details points to a container view that holds the hidden row details to be shown on expansion. It's height would be initialy set to zero. The following piece of code will animate the whole row in a smooth way:
var total_height_increase = 260;
var height_step = 5;
var duration = 200;
var time_step = duration * height_step / total_height_increase;
var num_steps = duration / time_step;
var i=0;
var increase_height = function(){
setTimeout(function(){
row.details.height += height_step;
i += 1;
if (i > num_steps) return;
increase_height();
}, time_step);
};
increase_height();
row.height += total_height_increase;
Scrolling a div that is within a .sortable() container will start dragging the div when you release the scrollbar
In the fiddle, there are 3 different sortables, 1 of them is a scrolling one
http://jsfiddle.net/wnHWH/1/
Bug: click on the scrollbar and drag it up or down to scroll through the content, when you release the mouse, the div starts to drag, which makes it follow your mouse around and there is no way to unstick it without refreshing the page.
You can use .mousemove event of jquery like this:
$('#sortable div').mousemove(function(e) {
width = $(this).width();
limit = width - 20;
if(e.offsetX < width && e.offsetX > limit)
$('#sortable').sortable("disable");
else
$('#sortable').sortable("enable");
});
I have create fiddle that works here http://jsfiddle.net/aanred/FNzEF/. Hope it meets your need.
sortable() can specify a selector for a handle much like draggable() does. Then only the matched elements get the click events. You specify the handle selector like this:
$('#sortable').sortable( {handle : '.handle'});
You already have most of what you need for the rest. The inner div on your overflowing element makes a suitable handle, like this:
<div style="height: 200px;overflow:auto">
<div class="handle" style="height: 300;">
blah
blah
blah
Then you need to restore the sortability of everything else. You'd think you could just give those divs the handle class, but it's looking for children, so you need to wrap all of them like so:
<div><div class="handle">asadf</div></div>
Modified fiddle
Supplement to SubRed's answer:
This worked perfectly for my needs. However, rather than rely on the width of the scrollbar being 20 pixels (as above), I used the code from:
How can I get the browser's scrollbar sizes?
This allows the code to handle different scrollbar widths on different setups. The code is pasted here for convenience:
function getScrollBarWidth ()
{
var inner = document.createElement('p');
inner.style.width = "100%";
inner.style.height = "200px";
var outer = document.createElement('div');
outer.style.position = "absolute";
outer.style.top = "0px";
outer.style.left = "0px";
outer.style.visibility = "hidden";
outer.style.width = "200px";
outer.style.height = "150px";
outer.style.overflow = "hidden";
outer.appendChild (inner);
document.body.appendChild (outer);
var w1 = inner.offsetWidth;
outer.style.overflow = 'scroll';
var w2 = inner.offsetWidth;
if (w1 == w2) w2 = outer.clientWidth;
document.body.removeChild (outer);
return (w1 - w2);
}
I've also used the width value for the height of the scrollbar and modified SubRed's code to suit. This now works with one or both scrollbars.
I also used code from:
Detecting presence of a scroll bar in a DIV using jQuery?
To determine the presence of either scroll bar and adapted the turning on/off of the sortable code accordingly.
Many thanks.
I've installed Datepicker for Bootstrap and its working nicely. But I can't figure out how to use the place method to position the datepicker above the element instead of below. I'm guessing it works similiar to the bootstrap popovers, but I haven't been able to figure it out.
Any suggestions?
The place function just auto places the date picker under your input box. Its not a function that lets you select where you want to place it.
However you can easily override the default functionality of that function with your own custom placement.
Here is an example of that http://jsfiddle.net/G7sWL/19/
All i did copy the original function and add an additional vertical offset of 10 and horizontal offset of 50.
$(function() {
var picker = $('.datepicker').datepicker();
var widget = picker.data('datepicker');
widget.place = function(){ //the original place function
var offset = this.component ? this.component.offset() : this.element.offset();
this.picker.css({
top: offset.top + this.height + 10, // change #1 = added "+10"
left: offset.left +50 // change #2 = added "+50"
});
}
});
From the page:
.datepicker('place')
Updates the date picker's position relative to the element
It only says it updates the position of the picker (which is absolutely positioned on the page), not that you can change its placement.
I am implementing drag and drop, user can drag few images and drop them in a div, and I dynamically append a p tag as label to each image once user click on a button.
Currently I meet problem when I have 2 images which is very close to each other (one is on top of another). The appended p tag for the top images will be hidden by the bottom image. I tried to alert the z-index for each dropped image, and found out it is 'auto'. I guess I need to assign a new z-index for each div, but I tried in the function which i append the label, and it dint work as expect:
function generateLabel() {
var current = 5000;
$('#rightframe img').each(function () {
var cImgName = $(this).attr('id');
var width = $(this).width();
// To select the respective div
var temp = "div#" + cImgName;
$.ajax({
url: '/kitchen/generatelabel',
type: 'GET',
data: { containerImgName: cImgName },
async: false,
success: function (result) {
$(temp).append(result);
// I guess the each function loop through each div according to the time it is created, so I try to assign a decreasing z-index
$(temp).css('z-index', current);
current -= 100;
// To select the label for the image
temp += " p";
// Set label width based on image width
$(temp).width(width);
}
});
});
However, what I get is, bottom image which dropped later do NOT hide the label of the image above, but if the above image is dropped after than the bottom image, above image's label is hide by the bottom image.
It's a very specific situation and I hope I do make myself clear...
Hope can get some help here... Appreciate any feedback...
I am so glad that I able to work out a solution for this kinda weird problem. I get to one useful plugin, the jquery-overlaps which check 2 dom whether they are overlapped with each other or not. Then i assign a z-index to the label accordingly.
Just to show my solution here, in case anyone jump into this bottleneck :)
// To assign an increasing z-index to the label
var count = 100;
$('#rightdiv p').each(function () {
// If any label overlaps with the image (used overlaps plugin)
if ($(this).overlaps($('#rightdiv img'))) {
// Increase count (the z-index)
count += 10;
// Set the parent div z-index 1st, if not the label z-index do not have effect
$(this).parent().css('z-index', count);
$(this).css('z-index', count);
}
});
Thanks! :D