First slide doesnt show in jQuery Royal Slider within tabs - javascript

I am trying to integrate Royal Slider within my website. However I am having trouble with the first slide when the slider is within tabs on my page.
For example, you can see at http://christierichards.co.uk/slidertest/newtemplatefix.php that the slider is working perfectly (there is no styling as of yet).
On this page http://christierichards.co.uk/slidertest/newtemplate.php when you click on before and after (this is the tab I want the slider appearing in) the first slide does not show until you click tab 2 and then the height seems to appear.
I have managed to fix it within the tabs but this is only by adding a fixed height onto .rsOverflow. I cannot use a fixed height as I need the auto-height feature to work for clients to add their own photos. So I need a different way around it.
There must be a piece of conflicting code somewhere however I am stumped! Any help would be appreciated.
Thanks

The slider is being initialised while it is hidden behind a tab. Because of this, it cannot calculate its height and width, and is invisible. When you change to the next item in the slider, the heights and widths are recalculated, which is why you can see it again.
You can either add an initial height to .rsOverflow, or (re)initialise the slider when the tab is clicked, and the contents are made visible.
For example:
var sliderInitialised = false;
$j( "#tabs" ).tabs({
activate: function( event, ui ) {
// Check the activated tab, is the one that contains the slider
if(!sliderInitialised) {
// Initialise slider ...
sliderInitialised = true;
}
}
});
Alternatively, the slider could be initialised before all the tab contents are hidden.

Related

How to do an element that is toggable on small screen sizes but always visible on big

I want to have a menu that is toggable in small screen sizes and always visible on medium sizes upwards.
The behavior should be (basically) exactly like this demo here.
The steps are:
Go to a small screen size (til the body outline is gold)
Check that it's toggable
When the menu is hidden and you get a bigger screen size, the menu should appear
When the menu is not hidden, go to a bigger screen size and it should remain shown
When on a big screen size, and element was hidden, you should see it but when you drag to a smaller size, it should get hidden
When on a big screen size, and element was NOT hidden, you should see it but when you drag to a smaller size, it should get hidden
To achieve this is very easy with:
$(".click").click(function() {
$(".menu").toggleClass("hidden-md-down");
});
My problem now is that I want to animate this show and hide and I can't do it with the class toggle.
So I have to rely on for example slideToggle() and here is where my problem lies, see demo here.
If you now go to a small screen size, hide the menu and make the window size bigger, the menu won't appear because of the hide() function.
I know this could be solve with a $(window).resize but I definitely don't want that solution since it's terrible for performance for such a small feature.
So how can I either have this toggle class with an animation or do it with js without the resize method?
I've put my comment into an answer instead: "For best performance wire your window size check to only the end of the browser resize, not to every stage."
This code works and it only runs .5 sec after the end of the window resize event rather than during (better performance). Run the code full page and squeeze your browser window to see it in action.
Instead of sending the text values #width and #height you can elect to run your menu toggle or deactivate it; I'd do this by removing the js class you're using to activate the menu initially.
And make your menu an unordered list and set it to be inline on desktop and an unbulleted list on mobile using css.
$(window).resize(function() {
if(this.resizeTO) clearTimeout(this.resizeTO);
this.resizeTO = setTimeout(function() {
$(this).trigger('resizeEnd');
}, 500);
});
$(window).bind('resizeEnd', function() {
var widthReport = $("#width").text($(this).width());
var heightReport = $("#height").text($(this).height());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="width"></div>
<div id="height"></div>

Jquery drag and drop on tabs

I have 4 tabs and a products list. What I need is to be able move those items from the list to each one of those tabs. The problem I have is that when I start dragging and hover over tab 1 it shows up the domId of the 3rd tab or 4th sometimes even its own domId too and if I drag and hover over 2nd tab, it shows the 4th tab id. Not sure why this is happening. I tried it on a completely separate html page too.
Here is the jsfiddle sample code url
You need to move the code that changes width to 50px into the start function instead of the drag function.
start: function (event, ui) {
$(this).css({
'width':'50px',
'z-index': '50'
});
}
The create method, drag method, and rel_left and rel_top variables aren't needed either. The reason is that draggable needs a width when it starts, by the time it runs the draggable method its still thinking that width is 100%, which is throwing things off.
http://jsfiddle.net/3em7obvL/2/

How could a make Fluidbox.js work with tabs

I try to use the Fluidbox script with the bootstrap tab plugin. When I click on a tab, new images appear. They are in a container and the opacity goes from 0 to 1.
By default the first container opacity is set to 1.
Fluidbox works well with that container but not with the other. I suspect that it has a link with opacity change. Any ideas?
Page with the problem: http://urlgone.com/2d0035/
It seems Fluidbox does not work on any images that are set to display none. And in your case inside of a parent element that is set to display none.
The way you get around this is to get fluidbox to fire before the image or element is hidden. I was using easytabs, so I placed it's call inside of a window load function which gave fluidbox enough time to fire before easytabs hid the photos.
$(window).load(function() {
$("#tab-full-container").easytabs();
});

How to properly initialize the jQuery Tools' Scrollable component for a single item?

I have created a web page which uses the jQuery Tools' Scrollable component, and the page is based on the minimal setup demo. As in this demo my page also uses scrollable items with room for five thumbnail images, but when my page loads for the first time I want only a single scrollable item containing only three thumbnail images, with the remaining two image slots empty. I assumed that I could simply replace the three scrollable item divs from the demo with a single scrollable item div and everything would look fine, however when I do that I end up seeing inoperable left/previous and right/next icons, even though there are no previous or next scrollable items to scroll to.
I have an example of what I'm trying to do on the jsfiddle site here. It's essentially the above referenced demo with the non-applicable scrollable item divs and child imgs commented out.
How can I initialize the scrollable such that I only have a single scrollable item on the page without having the non-applicable left/previous and right/next icons appear?
Thanks in advance for your help, suggestions, etc.
best I can come up with is
if($(".scrollable .items div").length < 2) $("a.browse").hide();
after the initialization.
I wanted the browse buttons to be hidden by default, then only display them if needed.
In the css, default the a.browse to visibility: hidden
Then in the initialization:
$(".scrollable").scrollable().each( function() {
var scroller = $(this).data("scrollable");
scroller.getNaviButtons().css('visibility', 'visible');
if (scroller.getSize() <= 1) {
scroller.getNaviButtons().addClass('disabled');
}
});
This seems a bit hacky, but avoids temporarily displaying the browse buttons if they are not going to be seen.

Help needed centering thumbnail based on class name - Jquery

I have a slide show component I've been working on that is a mash up of jcycle and jcarousel. It works rather well, yet there is one last feature I'd to add that I cannot figure out. Right now if you click on a thumbnail it will center it in the carousel as long as it's not the first 2 or last 2 thumbs. This works great and I like centering the active thumbnail of the slide show.
The problem I'm running into is if the user hits the play button on the slide show or the next and previous slide buttons, the slide show cycles, yet the active slide thumbnail does not center in the carousel. I've tried unsuccessfully to check if the thumbnail anchor has class, activeSlide, and if so to center it, yet cant seem to get it to work.
Here is a link to the demo page I've been working on.
http://brettjankord.com/standards/slideshows/jslideshow-test2.php
Any help is greatly appreciated!
Put the following at the end of your onBefore method
var carousel = $('#mycarousel').data('jcarousel');
var activeIdx = $('#mycarousel img[src="'+next.src+'"]').closest('a').data('index') -2;
if (carousel)
{
carousel.scroll(activeIdx);
}
Demo at http://jsfiddle.net/JupPn/1/

Categories