jCarousel + jQuery Accordion + fadeIn - javascript

Please check this link www.aboud-creative.com/demos/mckinley3.
There I have a jQuery Accordion with jCarousel inside "Developments" section of it. I use standard fadeIn function for the logo, accordion and a stag on the bottom right to fade in on page load. So, When you go to "Developments" section, you will see there are no images shown. It's my problem. When I don't use fadeIn function so that all elements show at once on page load, it works fine, but once I make accordion display:none in the stylesheet and then show it using fadeIn, the issue appears.
What can I do about this?

If the carousel is hidden during initialization, jCarousel has problems to do required calculations. The solution is to initialize jCarousel once the container is displayed.
Something like this:
$('container_selector').fadeIn(function() {
var c = $('carousel_selector');
if (!c.data('jcarousel')) {
c.jcarousel({ ... options .. });
}
});

Related

How can I use wow.js and animate.css without affecting SEO?

I'm using wow.js and animate.css for my homepage.
I read a topic from MDBootstrap and others discussions in which people say that it is bad for SEO.
So I checked in the brwoser and saw that everything with the wow class is in "visibiliy : hidden".
When I use the hack:
jQuery(document).ready(function () {
var scrolled = false;
jQuery(window).on('scroll', function() {
if (!scrolled) {
scrolled = true;
new WOW().init();
}
});
});
The visibility proprety disappear until I scroll.. Everything is working, I guess it's better for the google crawls ??
But the problem is that every wow class on the first screen, for example navigation items, site title, are not working because now I have to scroll to make animations work.
How can I make them work again ?? i tried my own jquery animation (fadeIn etc) but it produces some bugs on the page..
Does someone know how what is the logic to make all wow class work?
MDb contains two animation classes. In my case it was ok to use the same scrolling solution as the wow effects below the first screen and set the animated class to the elements at the top of the page. But this will only work if you know the elements on the viewport after loading the page, otherwise I think you can only handle it your self.

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/

Issue related to bootstrap carousel

I am using bootstrap carousel but I need a very simple thing to be done. My carousel is placed in the bottom of the page and I want to stick to the 1st slide of the carousel until the user reaches this section. As soon as the user will reach the section,the carousel will start playing. I do not know how to achieve this. Please help me with ideas.
Thanks in advance!
According to http://www.w3schools.com/bootstrap/bootstrap_carousel.asp
The .slide class adds a CSS transition and animation effect, which
makes the items slide when showing a new item. Omit this class if you
do not want this effect.
So all you need to do is to add that class when the user scrolls to that element...
As in, for the example given on the link I mentioned above, the element with id='myCarousel' must be given the .slide class.
Hence, using the jquery, the code will be as follows:
$(document).ready(function(){
$(window).scroll(function(){
if($(window).scrollTop()>=($("#myCarousel").offset().top){
$("#myCarousel").addClass("slide");
//ANYTHING YOU WANT TO DO WHEN THE USER SCROLLS TO YOUR CAROUSEL.
}
})
});
NOTE: CODE NOT TESTED.
You can do it like that.
After doing quite a lot of research,finally I got this solution.I have mangaged to go back to the first carousel when I reach a specific portion.(Here the section where carousel does exist)
My code is:
$(document).ready(function(){
$(window).scroll(function(){
console.log($("#myCarousel").offset().top);
if($(window).scrollTop()>=$("#myCarousel").offset().top-70 && $(window).scrollTop()<2450 )
{
var index = $('.slides li').index($('.slides li:first'));
console.log(index);
$('.flexslider').data("flexslider").flexAnimate(index);
}
})
});

Creating a preview effect for gallery images that closes when clicked outside

I am making a preview box that pops up when you click a gallery image and need to make it disappear when you click outside of it. I found many solutions but none work with my code. I think the problem is I may need a while loop but I tried several conditions and all were infinite.
This is the last solution I tried. The preview works but I can't get it to close when I click out.
DEMO
$('.portPic').click(function() {
if ($(this).attr('data-src2')) {
$('#clickedImg').attr('src', $(this).attr('data-src2'));
} else {
$('#clickedImg').attr('src', $(this).attr('src'));
}
$('#clickedImg').css('visibility', 'visible');
$('#clickedImg').blur(function() {
$('#clickedImg').css('visibility', 'hidden');
});
});
I've done a similar thing with a pop-out menu, where the user clicks "off" the menu and it closes. The same can be applied here.
I used an overlay div which spans the whole screen (with a translucent opacity - maybe 0.6 black or similar; or whatever colour you want) which gives a nice modal effect. Give it an id - let's say modal-overlay.
You can put it static in your page code, and set the display to none and make it the full-size of the page (through a CSS class).
<div id="modal-overlay" class="full-screen-overlay"></div>
Set the z-index of the overlay to higher than the rest of your page, and the z-index of your popup to higher than the overlay. Then when you show your popup, also set the visibility of the modal-overlay to visible, too.
In your script code, put an event handler for when the modal div is clicked:
$('#modal-overlay').click(function() {
$('#clickedImg').hide();
$('#modal-overlay').hide();
})
I would also use the .hide() jQuery method, which is easier than typing out the visibility.
Better still, if you have more than 1 thing going on (which you would with a modal overlay), wrap your "show/hide" of the popup in a hidePopup() or closePopup() method and call it onClick to save re-using code.
For effects when opening the popup/overlay, you can also use jQuery animations like .fadeIn() or .slideDown(). Use fadeOut and slideUp to hide.
These animations also perform the showing/hiding, so you wouldn't need to call .hide() or .show().
Check out this link to jQuery's API documentation for animations. Very useful and a good read.
Hope this helps!
You'll need to create a seperate div that is most likely fixed position that sits just one step lower (z-index) than your popped-up image. Attach a click handler to this div (overlay) and do your showing/hiding functions in there.
You can use modal photo gallery.
http://ashleydw.github.io/lightbox/
You can use this codepen code, too. SO is not letting me post the link here. So serach using thi "Bootstrap Gallery with Modal and Carousel".
Hope this helps..

Change Icon Direction on Accordion Collapse

I have this JSFiddle which includes a Bootstrap Accordion embedded inside another Accordion, the issue is that the Chevron to the right does not now behave as expected.
As you can see by the code below, the chevron changes direction when collapse is triggered, however, now it is in an embedded accordion this doesn't appear to be the solution.
$('.collapse').on('shown.bs.collapse', function(){
$(this).parent().find(".glyphicon-chevron-down").removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
}).on('hidden.bs.collapse', function(){
$(this).parent().find(".glyphicon-chevron-up").removeClass("glyphicon-chevron-up").addClass("glyphicon-chevron-down");
});
I usually prefer to do this with CSS - less messy than trying to detect which item opened/closed when you are nesting, or have multiple on a page.
1) Add the class 'collapsed' to your accordion headings if they are closed by default (bootstrap toggles this class, but if you don't have it present when the page loads, it doesn't get added until you open and then close an accordion item).
2) Get rid of the JS and add this CSS:
.panel-heading.collapsed .glyphicon-chevron-down {
transform:rotateX(0deg);
}
.panel-heading .glyphicon-chevron-down {
transition:transform .5s;
transform:rotateX(180deg);
}
If you don't like the flip animation, just get rid of the transition rule, but I like to think it adds a little something.
http://jsfiddle.net/rr7oggLv/6/

Categories