Just finishing a site and I am having trouble with the jQuery Cycle2 slider not working correctly in Firefox. It is totally responsive in Safari and Chrome and displays correctly.
In Firefox the images do not size down properly and stay full-sized as the window is reduced.
Here is the code for the slider:
<div class="cycle-slideshow" data-cycle-fx=fade data-cycle-timeout=5000 data-cycle-slides="div.slide" >
<div class="slide">
<img src="http://dev.savannah100foundation.org/images/uploads/slide-1.jpg" class="img-responsive" alt="" >
<div class="text-overlay hidden-xs">We make it easy for people to make a difference</div>
</div>
<div class="slide">
<img src="http://dev.savannah100foundation.org/images/uploads/slide-2.jpg" class="img-responsive" alt="" >
</div>
<div class="slide">
<img src="http://dev.savannah100foundation.org/images/uploads/slide-3.jpg" class="img-responsive" alt="" >
</div>
<div class="slide">
<img src="http://dev.savannah100foundation.org/images/uploads/slide-4.jpg" class="img-responsive" alt="" >
</div>
<div class="cycle-pager"></div>
</div><!-- /.cycle-slideshow -->
Related
I'm developing a project with VueJS. Now I am only including a ready-made template in the Vue project. I haven't written any vue code yet. But I keep getting compile errors. I am sure there is no error in my code. But the error just doesn't go away. I share with you my codes and error message in the component I got an error.
<div class="infotechno-hero infotechno-bg">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-lg-6 col-md-6">
<div class="infotechno-hero-text wow move-up">
<h6>IT Design Consulting </h6>
<h1 class="font-weight--reguler mb-15">Facilitate All <br> Local IT-related Service Providers </h1>
<p>Highly Tailored IT Design, Management Support Services. </p>
<div class="hero-button mt-30">
Get details
</div>
</div>
</div>
<div class="col-lg-6 col-md-6">
<div class="infotechno-hero-inner-images">
<div class="infotechno-inner-one">
<img class="img-fluid" src="assets\images\hero\home-infotechno-main-slider-slide-01-image-01.png" alt="" />
</div>
<div class="infotechno-inner-two wow move-up">
<img class="img-fluid" src="assets\images\hero\home-infotechno-main-slider-slide-01-image-02.png" alt="" />
</div>
</div>
</div>
</div>
</div>
</div>
Where is your template tags? You have to write your divs in a template in vue files.
You can look at there for more info: https://v2.vuejs.org/v2/guide/syntax.html
<template>
<div class="infotechno-hero infotechno-bg">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-lg-6 col-md-6">
<div class="infotechno-hero-text wow move-up">
<h6>IT Design Consulting</h6>
<h1 class="font-weight--reguler mb-15">
Facilitate All
<br />Local IT-related Service Providers
</h1>
<p>Highly Tailored IT Design, Management Support Services.</p>
<div class="hero-button mt-30">
Get details
</div>
</div>
</div>
<div class="col-lg-6 col-md-6">
<div class="infotechno-hero-inner-images">
<div class="infotechno-inner-one">
<img class="img-fluid" src="assets\images\hero\home-infotechno-main-slider-slide-01-image-01.png" alt />
</div>
<div class="infotechno-inner-two wow move-up">
<img class="img-fluid" src="assets\images\hero\home-infotechno-main-slider-slide-01-image-02.png" alt />
</div>
</div>
</div>
</div>
</div>
</div>
</template>
I have a sidebar which is col-md-2. now I need to put 4 thumbnail next to each other on this sidebar that picture of them would be responsive. whith this code image become bigger when I resize the window (make window smaller)
<div class=col-md-2>
<div class=row>
<div class=col-md-3>
<div class="thumbnail>
<a href="#">
<img srcset="address" class="img-responsive">
<div class="caption">
a
</div>
</a>
</div>
</div>
<div class=col-md-3>
<div class="thumbnail>
<a href="#">
<img srcset="address" class="img-responsive">
<div class="caption">
a
</div>
</a>
</div>
</div>
<div class=col-md-3>
<div class="thumbnail>
<a href="#">
<img srcset="address" class="img-responsive">
<div class="caption">
a
</div>
</a>
</div>
</div>
<div class=col-md-3>
<div class="thumbnail>
<a href="#">
<img srcset="address" class="img-responsive">
<div class="caption">
a
</div>
</a>
</div>
</div>
<div><!--end of row>
<div>
The bootstrap carousel is working and looping around images. However, when you first open the web page, the carousel slider displays a empty background for a split-second. Afterwards, it is working properly.
I tried to solve it through this css but does not work.
.carousel-control {
background-color: transparent;
}
There are some questions related to preload whole carousel. What kind of jquery code is needed to do that?
Do you know how to get rid of the split-second empty background?
<div class="carousel slide" id="myCarousel" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="first-slide" src="{% static 'img/img1.jpg' %}" alt="First slide" />
</div>
<div class="item">
<img class="second-slide" src="{% static 'img/img2.jpg' %}" alt="Second slide">
</div>
<div class="item">
<img class="third-slide" src="{% static 'img/img3.jpg' %}" alt="Third slide">
</div>
</div>
<a class="left carousel-control" data-slide="prev" href="#myCarousel"></a>
<a class="right carousel-control" data-slide="next" href="#myCarousel"></a>
</div>
This worked for me.
CSS:
.preload{ display: none; }
HTML
<div class="preload">
<img src="img/img1.jpg" />
<img src="img/img2.jpg" />
<img src="img/img3.jpg" />
</div>
I am using Bootstrap 3. I have one row that will hold a variable amount of columns, ranging from 1-let's say 9.
The are currently set to col-lg-4, so three should display on one row. I would normally create a new row, but since I am dynamically adding columns, I cannot do this, or at least do no know how.
When my client adds a post, it automatically creates a column with content.
The problem lies only in Firefox & IE, in both desktop and mobile views. The 4th item (or 1st item that should go to the next row) gets pushed to a new line and is offset. See screenshot below.
I am using ExpressionEngine as my CMS.
It displays perfectly in Chrome.
Code Below
<div class="container">
<div class="row">
{exp:channel:entries channel="plans" orderby="title" sort="asc"}
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 centered">
<div class="grid mask">
<figure>
<img class="img-responsive" src="{plan_main_image}">
<figcaption>
<h5>{title}</h5>
<a data-toggle="modal" href="#{url_title}" class="btn btn-primary btn-lg">View Floor Plan</a>
</figcaption>
</figure>
</div>
</div>
<div class="modal fade" id="{url_title}" tabindex="-1" role="dialog" aria-labelledby="{url_title}" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">{title}</h4>
</div>
<div class="modal-body text-left">
<div class="row">
<div class='list-group gallery'>
<div class="col-lg-4">
<a class="thumbnail fancybox-effects-d" data-fancybox-group="" href="{plan_main_image}">
<img class="img-responsive" alt="" src="{plan_main_image}" />
</a>
</div>
<div class="col-lg-4">
<a class="thumbnail fancybox-effects-d" data-fancybox-group="" href="{plan_first_level}">
<img class="img-responsive" alt="" src="{plan_first_level}" />
</a>
</div>
<div class="col-lg-4">
<a class="thumbnail fancybox-effects-d" data-fancybox-group="" href="{plan_second_level}">
<img class="img-responsive" alt="" src="{plan_second_level}" />
</a>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
{plan_description}
</div>
</div>
<!--<div class="row">
<div class="col-lg-12">
<b>Download the floor plan</b>
</div>
</div>-->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
{/exp:channel:entries}
</div><!-- /row -->
<br>
<br>
</div><!-- /row -->
</div><!-- /container -->
Thanks
The reason for this is because the first image is slightly taller than the other images. You need to use a responsive column reset for this. See Responsive Column Resets in the doc.
The basic concept is to add a div after the each horizontal grouping that contains a clearfix so that the next horizontal grouping is cleared before and aligns correctly.
For more complex scenarios you can see my answer here: Gap in Bootstrap stacked rows.
I want to combine coda slider with a jquery scrollbar. Does anybody knows how to do that?
http://www.tradinx.com/codatest
$(function(){
$(".scroll-bar").slider({
slide: function( event, ui ) {
// Code for triggering coda slider .. ??
}
});
});
--
<div id="slider">
<div class="scroll">
<div class="scrollContainer">
<div class="panel" id="image1"><img src="data/8f8bc5cb2fdac666c9534f7c4b78c010.jpg" alt="" /></div>
<div class="panel" id="image2"><img src="data/42a4c582d65e46dda4ddcde70a5b2afc.jpg" alt="" /></div>
<div class="panel" id="image3"><img src="data/30c32091eb1121f630c48016b04a6f04.jpg" alt="" /></div>
<div class="panel" id="image4"><img src="data/31f3ae0aac735d2b9432e88108e75b86.jpg" alt="" /></div>
</div>
</div>
<div class="scroll-bar"></div>
<div class="photo-thumb-block">
<div class="photo-thumb"><img src="small/8f8bc5cb2fdac666c9534f7c4b78c010.jpg" style="width:159px;height:119px;" alt="" /></div>
<div class="photo-thumb"><img src="small/42a4c582d65e46dda4ddcde70a5b2afc.jpg" style="width:159px;height:119px;" alt="" /></div>
<div class="photo-thumb"><img src="small/30c32091eb1121f630c48016b04a6f04.jpg" style="width:159px;height:119px;" alt="" /></div>
<div class="photo-thumb last"><img src="small/31f3ae0aac735d2b9432e88108e75b86.jpg" style="width:159px;height:119px;" alt="" /></div>
</div>
</div>
Does anyone have an idea?
Thanks.
If you were to turn off the css div overflow of the mail images container (the long one) you'd see that there is already a scroll bar.
So my question to you is, what exactly is the scrollbar supposed to do?