We Keep Coding

Bootstrap v4 Carousel Not Initializing

Im trying to get a Bootstrap v4 Slider to work.
Its supposed to have text to the right of the slider and this text is meant to change with each slide.
I have added in the required CSS/JS but the slider will not initialize.
Link to JS FIDDLE
My JS:
<script>
$( document ).ready(function() {
//set here the speed to change the slides in the carousel
$('#features').carousel({});
//Loads the html to each slider. Write in the "div id="slide-content-x" what you want to show in each slide
$('#carousel-text').html($('#slide-content-0').html());
// When the carousel slides, auto update the text
$('#features').on('slid.bs.carousel', function (e) {
var id = $('.item.active').data('slide-number');
$('#carousel-text').html($('#slide-content-'+id).html());
});
});
</script>

looks like your markup in the example is not sufficient.
you have one .carousel-inner div container without .carousel-item inside.
which of course is just one slide.
try to follow the example provided by the bootstrap documentation
put your #slide-content-x containers inside several .carousel-inner div's and remove your JS workaround for that.
you do not need any JS. it's self-initializing.
see my working example here: https://jsfiddle.net/y8h5oqfw/2/

First slide doesnt show in jQuery Royal Slider within tabs

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.

Jquery UI Accordion collapse before open

I have a simple Jquery UI accordion with 3 sections. All 3 sections are collapsed in the beginning. When I click on a section header, the section content should show (slide) up. The special thing is now that the section content divs are positioned absolutely over each other.
To make it look good I want that the current opened section toggles completely before the animation of showing the next section begins.
This is what I have made to toggle the section it right now:
$(function () {
$("#accordion").accordion({
create: function (event, ui) {
ui.oldPanel.slideToggle("slow");
},
collapsible: true,
active:false
});
});
You can see how it looks like on:
http://jsfiddle.net/kqMAR/
It appears that the toggle and show up animation start at the same time. But what I want is to toggle it completely before starting the next slide up.

New Answer :
Try this
http://jsfiddle.net/6QJJp/1/
This is what you exactly need
you will need to fix CSS according to you requirement.

$(function () {
$("#accordion").accordion({
animate:{duration:5000},
collapsible: true,
active:false
});
});
Use above function to understand what is happening actually, new section starts opening as soon as the old section starts closing that's why its giving an illusion of incomplete animation. for complete animation place the buttons one below another then you will be able to see proper animation. If you require horizontal arrangement then you can possibly use fading effect that also looks cool.

Repositioning jQuery UI Autocomplete on browser resize

There is an issue if you open up an autocomplete drop down and also resize your browser window the autocomplete drop down does not reposition. Highlighted in this video: http://www.youtube.com/watch?v=d7rZYH0DgWE
I have looked at the documentation and cannot find a reposition method (in the jquery-ui documentation http://jqueryui.com/demos/autocomplete) that can be called within a $(window).resize() function call.
Is there an elegant soultion to this?

I would suggest just closing the results on a page resize.
$(window).resize(function() {
$(".ui-autocomplete").css('display', 'none');
});
When a use changes the width of the window it will disappear and if they type again it will re-appear as it should, positioned correctly.

Looking at this again one way to solve this problem is just to call the autocomplete field to search on resize:
e.g
$(window).resize(function() {
$( "#autocomplete-field" ).autocomplete( "search" );
});
This will reposition the autocomplete dropdown.
You may also wish to make sure autocomplete caches the results so it doesn't hit the database when searching again. And another thing to consider is calling autocomplete( "search" ) within a timeout function to improve ui responsiveness Cross-browser window resize event - JavaScript / jQuery

Here is another solution if you don't want to redo the search or close the window.
$(window).resize(function() {
var position = $("#autocompleteField").offset();
var properties = { left: position.left,
top: position.bottom };
$(".ui-autocomplete").css(properties);
});

Yes it is possible, but it's very tricky. You must alter both the css and plugin. It's default functionality sets the top and right attributes. You must alter the plugin to position the div ( or ul ) relatively to the document's width and height. (ie top:50%, right:50%; margin-left:-500px; margin-top:-100px).
You can also destroy the division on resize if you don't want to mess it up. It will reappear on change based on the document's new width and height

Calling the autocomplete field to search on resize works for me. One thing to add: Make sure that search is only performed on resize when a search result is visible. Otherwise, search is executed even after having selected one item from the result box.

How do I put a slide counter in nivo slider?

I am building a website with nivo slider image gallery. Its a briliant slider, but i need a slider counter like 1/6 (slide 1 of 6). I searched in the support page and google but all what i have found was the same question unanswered...

Use one of the nivo callback options.
$('#slider').nivoSlider({
afterChange: function(){
$('#counter').text( $('.controlNav .active').text() );
}
});
After each slide change it will take the text contents of the active nav control and use it to populate your counter. If you would like to provide a more specific context I could offer an explicit solution.