We Keep Coding

Flexslider continue on pop up

How do i make the flexslider continue to rotate on any screen pop up or when browser not in focus?
My code used:
// Flex Slider for Homepage
$('#home-flexslider .flexslider').flexslider({
animation: "fade",
slideshowSpeed: 5000,
animationSpeed: 1500,
pauseOnHover: false,
directionNav: true,
controlNav: false,
keyboardNav: true,
start: function (slider) {
slider.removeClass('loading');
}
});

Get current image data Flexslider

Is it possible to extract data from the current Flexslider image, like image ID, URL and name? I need to print the current image URL outside the flexslider div.
The code I'm using now:
jQuery('#slider').flexslider({
animation: "fade",
animationSpeed: 0,
controlNav: false,
animationLoop: false,
smoothHeight: true,
slideshow: false,
keyboard: true,
touch: true,
directionNav: true
});
Many thanks in advance

You can use the after trigger which triggers after the slide changes:
jQuery('#slider').flexslider({
after: function { // Code that fetches the needed data goes here },
animation: "fade",
animationSpeed: 0,
controlNav: false,
animationLoop: false,
smoothHeight: true,
slideshow: false,
keyboard: true,
touch: true,
directionNav: true
});
A functioning demo is found here: Jsfiddle

How to set default tab for initial load

Currently this webpage opens to the tab, "Freebies & Extras." I want it to open to the first tab, "Commonwealth & Council." I believe, by default, it will open to the first tab. I tried to locate where it is telling the browser to open it on the third tab but couldn't find it.

I think this is the code you are looking for:
$('div#Panels').tabs({
active: 2,
The active option tells the tab control which tab to display.
If you change the active value to 0 (or remove it altogether), it should display the first tab on page load.
Since the activtate event is not triggered for the initially displayed tab, you could move the code from the activate event handler into a separate function, and then call that function both in the activate event handler and when the page first loads.
<script>
$(document).ready(function() {
function activateTab(index) {
switch (index) {
case 0:
$('#carousel').flexslider({
animation: "slide",
controlNav: false,
animationLoop: true,
slideshow: false,
itemWidth: 80,
itemMargin: 5,
asNavFor: '#slider'
});
$('#slider').flexslider({
animation: "slide",
controlNav: false,
animationLoop: true,
slideshow: false,
sync: "#carousel"
});
//-----------------
$(window).resize();
//-----------------
break;
case 1:
$('#carousel2').flexslider({
animation: "slide",
controlNav: false,
animationLoop: true,
slideshow: false,
itemWidth: 80,
itemMargin: 5,
asNavFor: '#slider2'
});
$('#slider2').flexslider({
animation: "slide",
controlNav: false,
animationLoop: true,
slideshow: false,
sync: "#carousel2"
});
//-----------------
$(window).resize();
//-----------------
break;
}
}
$('div#Panels').tabs({
active: 0,
collapsible: false,
activate: function(event, ui) {
activateTab(ui.newPanel.index());
}
});
activateTab(0);
});
</script>

You need to set the active to 0 in the code
$(document).ready(function() {
$('div#Panels').tabs({
active: 2,
collapsible: false,
activate: function(event, ui) {...
UPDATE
When you click the tab 0, then the page runs this code:
$('#carousel').flexslider({
animation: "slide",
controlNav: false,
animationLoop: true,
slideshow: false,
itemWidth: 80,
itemMargin: 5,
asNavFor: '#slider'
});
$('#slider').flexslider({
animation: "slide",
controlNav: false,
animationLoop: true,
slideshow: false,
sync: "#carousel"
});
//-----------------
$(window).resize();
//-----------------
Since you are not clicking this tab to start, this code is not running when the tab opens. You need to run the code by yourself. I suggest create a function and call it right after defining the tabs.
The full script would be (maybe something is misplaced, because I haven't run it):
function ClickedTab(carousel, slider){
$(carousel).flexslider({
animation: "slide",
controlNav: false,
animationLoop: true,
slideshow: false,
itemWidth: 80,
itemMargin: 5,
asNavFor: slider
});
$(slider).flexslider({
animation: "slide",
controlNav: false,
animationLoop: true,
slideshow: false,
sync: carousel
});
//-----------------
$(window).resize();
//-----------------
}
$(document).ready(function() {
$('div#Panels').tabs({
active: 0,
collapsible: false,
activate: function(event, ui) {
switch (ui.newPanel.index()) {
case 0:
ClickedTab("#carousel", "#slider"); break;
case 1:
ClickedTab("#carousel2","#slider2"); break;
}
}
});
ClickedTab("#carousel", "#slider")
})

Javascript slider jquery

<script type="text/javascript">
$(window).load(function() {
$('.flexslider').flexslider({
controlNav: false,
animation: "fade",
startAt: 0,
slideshow: true,
slideshowSpeed: 7000,
});
});
</script>
Why doesn't my slider work? I copy pasted it from an other script so I am clueless where to start.

Delete the comma after slideshowSpeed: 7000, and you are good to go ;)

Specify options for jquery UI Dialog animations?

I know when you call the dialog you can use
.dialog({
show: 'fade',
hide: 'fade'
});
But is there any support for options?
e.g.
.dialog({
show: {effect: 'fade', speed: 1000},
hide: {effect: 'fade', speed: 500}
});
or even
.dialog({
show: {effect: 'fade', {speed: 1000}},
hide: {effect: 'fade', {speed: 500}}
});
I am using 1.8.14

Try duration instead of speed. Like this...
.dialog({
show: {effect: 'fade', duration: 1000},
hide: {effect: 'fade', duration: 500}
});
You can also include options like easing, queue, and even a complete callback function. It looks like most of the options accepted by the .animate() function are accepted in the show and hide properties.