This question already has answers here:
HTML divs can go outside browser window?
(2 answers)
Closed 8 years ago.
Is it possible to get a new window without the frame outside the window(browser or webkit) like in the image?
I've tried this in the package.json file of new window:
"window": {
"position": "center",
"width": 100,
"height": 50,
"show_in_taskbar": true
}
No, exceptions - only title attribute when hover, as on the screenshot
Related
I am using carousel.js to slide content (manufacturers image).
Currently it is sliding only one image after a few seconds.
I want to know if there is any property in the carousel.js that like I can specify number of images to slide.
The script used to slide:
new Carousel('carousel-wrapper-manuf', $$('#carousel-content-manuf .slide'), $$('a.carousel-control'),
{
duration: 0.2,
visibleSlides : 6,
circular: true,
wheel: true,
auto: true
}
);
I'm using Flexslider for a project of gallery and I want to modify the navigation system.
On keypress/swipe/click on arrows, four images displayed disappear and are replaced by four new.
Is it possible to modify the behavior of the navigation to move images one by one ?
Thank you very much for your help !
Z.
You may want to use property move, which is defined as
//{NEW} Integer: Number of carousel items that should move on
animation. If 0, slider will move all visible items.
So, your code will look like this
$(window).load(function() {
$('.slidewidget1').flexslider({
animation: "slide",
animationLoop: true,
itemWidth: 210,
controlNav: false,
itemMargin: 0,
slideshow: false,
move: 1,
minItems = 4,
maxItems = 4
});
});
plus, of course, your customization of width, etc.
Documentation
I'm building a Flexslider which uses a thumbnail navigation. It's essentially identical to the Flexslider demo seen here http://flexslider.woothemes.com/thumbnail-slider.html. It all works fine, but if I try to use the StartAt property it breaks the directional nav on the thumbnails. It jumps to the wrong place and sometimes kills the directionNav links.
This is my code. There are 5 #carousel items shown on the page at once, and one #slider item, the same as on the Flexslider demo.
$('#carousel').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
itemWidth: 230,
itemMargin: 40,
move: 5,
startAt: 2,
asNavFor: '#slider'
});
$('#slider').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
startAt: 2,
sync: "#carousel"
});
If I run just the #carousel code which shows 5 items at once, I found that 'startAt' talks to one 'run of items' rather than one item. So startAt 0 will show items 1-5, startAt 1 will show items 6-10 and so on.
If there is just one item shown at a time (like on #slider) then the 'run' is 1 item. So startAt 0 is item 1, startAt 1 is item 2 and so on.
I think this is linked to the bug. When these are synced if I hit next on the directionNav of #carousel (when startAt of #carousel is 2), it jumps me to thumbnail items 16-20 (what would be run 3 if not synced). If I were to hit prev instead, it jumps me to items 6-10 (what would be run 1 if not synced).
Has anyone figured out a way around this bug?
Thanks
So i had this same issue, trying to do essentially the same thing.
I haven't found a solution but i have found the issue on github:
https://github.com/woothemes/FlexSlider/issues/277
The issue seems to be that when flexslider is loading, the sync method is not available. So when loading, sync is not possible. I tried calling sync from the start event on the slider, with no luck. This is an issue that needs to be fixed in flexslider itself, which requires a patch.
I'm sorry i couldn't be more helpful, but i hope the work around in the github issue is helpful to you.
Problem
I use the flexslider carousel to a number of images to show. What I want now is, when the browser has a certain width drop a break, which for example is incidental to 768px 2 images are shown. Currently you see an image at a certain width but half and wants to these points with javascript / jquery to give many pictures there must fully show.
So my question is, how I can make an if statement for when the browser width is for example 768px width, is must show two images...
$('.flexslider').flexslider({
animation: "slide",
animationLoop: true,
itemWidth: 320,
itemMargin: 0,
minItems: 2,
maxItems: 5,
start: function(slider){
$('body').removeClass('loading');
}
});
Check code on JSFiddle
You can use an if statement for widths like this:
if ($(window).width() < 960) {
alert('Less than 960');
}
else {
alert('More than 960');
}
... and to contain that, you might like to combine your document ready function with a window resize function.
$(document).ready(myfunction);
$(window).resize(myfunction);
function myfunction() {
// Pace the if/else here, do whatever
}
In terms of showing two images it think you should be able to be achieve that by setting slide widths and offsets in the flexslider function - or with css. here are the options i'm talking about:
itemWidth: 490, // or whatever is 1/2 of your width
itemMargin: 30, // experiment here!
minItems: 1, // or 2
Here's an edited version of your JS fiddle demo! http://jsfiddle.net/tM2a8/
I think it's easy but I don't find the answer. I want to pass some data to a colorbox window and use them it. I did like that to open the colorbox:
$.colorbox({
href:my_target,
iframe: false,
open: true,
width: "830px",
height: "560px",
speed: "0",
transition: "none",
opacity:0.5,
escKey: true,
overlayClose:true,
data: {"test":"123456"}});
The colorbox is opened but I can't acces to the data "test".
How can I do that? Is it possible?
If this is not the right method, what is the good?
Remember the general page model; when you are not using ColorBox's iframe option, the plugin and the content are just ordinary members of the DOM. You can reference any variable from "inside" it just as you would with any javascript loaded by the page.
You would probably use ColorBox's event hooks to run functions that acted on the data.