Aligning Multiple Instances of JCarouselLite - javascript

I am using JCarouselLite to produce three scroll boxes on a website. 2 of the carousels line up properly (New, Gifts), but a third does not (BestSellers).
The image floats to the left because the plugin keeps calculating the width incorrectly. All three have the same underlying HTML code, but I can't get the BestSeller Carousel to line up properly.
I also tried to run it on window.load. and have init running in the footer.
What am I missing?
Update:
Here's the Code that initalizes the Carousel:
jQuery(document).ready(function($){
$(".rotateNewContent").jCarouselLite({
btnNext: ".next", btnPrev: ".prev",
speed: 800, visible: 1
});
$(".rotateBestsellerContent").jCarouselLite({
btnNext: ".nextBest", btnPrev:
".prevBest", speed: 800, visible: 1
});
$(".rotateGiftContent").jCarouselLite({
btnNext: ".nextGift", btnPrev:
".prevGift", speed: 800, visible: 1
});
});
here is the html of the first and second lists.
<button class="prev"></button>
<div class="rotateWrapper"><div class="rotateNewContent">
<ul class="NewProductList">
<li class="Odd">
<div class="ProductImage">
<a href="#" ><img src="#" alt="" /></a>
</div>
<div class="ProductDetails">
<strong>
Organic Maple Syrup from Mount Cabot
</strong>
</div>
<div class="ProductPriceRating">
<em>$13.00</em>
</div>
</li>
<li class="Even">
<div class="ProductImage">
<a href="#" ><img src="#" alt="" /></a>
</div>
<div class="ProductDetails">
<strong>
<a href="#">Sicilian Marmalades from Marchesi di San
Giuliano</a>
</strong>
</div>
<div class="ProductPriceRating">
<em>$15.00</em>
</div>
</li>
</ul>
</div></div><button class="next"></button>
<button class="prevBest"></button>
<div class="rotateWrapper"><div class="rotateBestsellerContent">
<ul class="NewProductList">
<li>
<div class="ProductImage"><a href="#" alt="" /></a>
</div>
<div class="ProductDetails">
<strong>Farro from Rustichella d'Abruzzo</strong>
<em>$8.75</em>
</div>
</li>
<li>
<div class="ProductImage">
<a href="#" alt="" /></a>
</div>
<div class="ProductDetails">
<strong>Mariage Frères Marco Polo</strong>
<em>$22.00</em>
</div>
</li>
</ul>
NB: This site is not yet live, please do not shop.

The middle instance has a width of 135px, while the left and right instances have a width of 180px.
Left Content:
<div class="rotateNewContent" style="overflow: hidden; visibility: visible; position:
relative; z-index: 2; left: 0px; width: 180px;">
Middle Content:
<div class="rotateBestsellerContent" style="overflow: hidden; visibility: visible;
position: relative; z-index: 2; left: 0px; width: 135px;">
I used Firebug to diagnose the CSS issues.

i narrowed it down to the product names. i believe it has something to do with the foreign characters in the names. when i take those products out, the layout resolves correctly.
--now i have to figure out how to fix that. :-)
the problem was that there were two divs within the li element. i wrapped both within another div and gave it a set width and height. now the plugin uses that div to calculate its size.
thanks for helping me think this through george!

Related

How to change background image to another upon hovering over button?

I have five buttons on one image. Every time you hover over each button, I would like the background image to change according to each button you hover. I tried doing this using CSS, but this doesn't seem to be very effective when applying the "hover" effect. It only works if you hover over the background itself and it will change, but not when you hover over a button.
And if I tried applying the CSS "hover" effect by adding a class in the li section and a sort of image sprite just under the primary background image, the image would only appear within the li itself and not as a background cover.
I figured jQuery/javascript would be better. But, I'm not sure how to apply what I would like. I tried to do a hover action with javascript, but I'm not sure why it isn't working. The following code is snippet from the main code on JSFiddle. Does anyone have suggestions?
$(document).ready(function() {
//Preload
$('<img/>').hide().attr('src', 'http://s3.amazonaws.com/nxs-kxantv-media-us-east-1/photo/2016/03/21/image-jpeg237_35345271_ver1.0_640_360.jpg').load(function() {
$('#primary').append($(this));
});
$('#screenprinting').hover(function() {
$('#primary').css('background-image', 'url("http://s3.amazonaws.com/nxs-kxantv-media-us-east-1/photo/2016/03/21/image-jpeg237_35345271_ver1.0_640_360.jpg")');
}, function() {
$('#primary').css('background', '');
});
});
#mma #primary.hp {
background-image: url(https://static.wixstatic.com/media/75ac83_423a4fd973804ba7b9f918a46481616b~mv2.jpg/v1/fill/w_1567,h_611,al_c,q_85,usm_0.66_1.00_0.01/75ac83_423a4fd973804ba7b9f918a46481616b~mv2.jpg);
background-position: 43% top
}
<div id="mma" data-trackingposition="mma">
<div id="primary" class="hp clearfix" data-speed="6" data-type="background">
<div class="bucket">
<p style="color:white;">Insure the things you love most...</p>
<p class="title" style="color:white">Select a policy to get a quote</p>
<span id="productheader" role="heading">asdf</span>
<ul class="iconlist">
<li class="attached check" data-prod="au">
<span><a id="screenprinting" href="#" aria-expanded="false" aria-label="Auto insurance" style="color:white;"><small><img src="https://static.wixstatic.com/media/75ac83_a3a5ee1aa8d6493abf7e20d1088719d7~mv2_d_1208_1208_s_2.png/v1/fill/w_600,h_600,al_c,usm_0.66_1.00_0.01/75ac83_a3a5ee1aa8d6493abf7e20d1088719d7~mv2_d_1208_1208_s_2.png" class="insurance-img"></small>Auto</a></span>
</li>
<li class="attached property" data-prod="ho">
<span><small><img src="https://static.wixstatic.com/media/75ac83_141f12dd5fc848b08fe41f79eded1260~mv2_d_1208_1208_s_2.png/v1/fill/w_600,h_600,al_c,usm_0.66_1.00_0.01/75ac83_141f12dd5fc848b08fe41f79eded1260~mv2_d_1208_1208_s_2.png" class="insurance-img"></small>Home </span>
<span class="icon close"></span>
</li>
</ul>
</div>
</div>
</div>
You need to import jQuery library to make things work in jQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
$(document).ready(function() {
//Preload
$('<img/>').hide().attr('src', 'http://s3.amazonaws.com/nxs-kxantv-media-us-east-1/photo/2016/03/21/image-jpeg237_35345271_ver1.0_640_360.jpg').load(function() {
$('#primary').append($(this));
});
$('#screenprinting').hover(function() {
$('#primary').css('background-image', 'url("http://s3.amazonaws.com/nxs-kxantv-media-us-east-1/photo/2016/03/21/image-jpeg237_35345271_ver1.0_640_360.jpg")');
}, function() {
$('#primary').css('background', '');
});
});
#mma #primary.hp {
background-image: url(https://static.wixstatic.com/media/75ac83_423a4fd973804ba7b9f918a46481616b~mv2.jpg/v1/fill/w_1567,h_611,al_c,q_85,usm_0.66_1.00_0.01/75ac83_423a4fd973804ba7b9f918a46481616b~mv2.jpg);
background-position: 43% top
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mma" data-trackingposition="mma">
<div id="primary" class="hp clearfix" data-speed="6" data-type="background">
<div class="bucket">
<p style="color:white;">Insure the things you love most...</p>
<p class="title" style="color:white">Select a policy to get a quote</p>
<span id="productheader" role="heading">asdf</span>
<ul class="iconlist">
<li class="attached check" data-prod="au">
<span><a id="screenprinting" href="#" aria-expanded="false" aria-label="Auto insurance" style="color:white;"><small><img src="https://static.wixstatic.com/media/75ac83_a3a5ee1aa8d6493abf7e20d1088719d7~mv2_d_1208_1208_s_2.png/v1/fill/w_600,h_600,al_c,usm_0.66_1.00_0.01/75ac83_a3a5ee1aa8d6493abf7e20d1088719d7~mv2_d_1208_1208_s_2.png" class="insurance-img"></small>Auto</a></span>
</li>
<li class="attached property" data-prod="ho">
<span><small><img src="https://static.wixstatic.com/media/75ac83_141f12dd5fc848b08fe41f79eded1260~mv2_d_1208_1208_s_2.png/v1/fill/w_600,h_600,al_c,usm_0.66_1.00_0.01/75ac83_141f12dd5fc848b08fe41f79eded1260~mv2_d_1208_1208_s_2.png" class="insurance-img"></small>Home </span>
<span class="icon close"></span>
</li>
</ul>
</div>
</div>
</div>

Change size of object when hovering

I am trying to add a hover effect to my object using CSS, but it seems like the html is too complex for it to change. Therefor I ask you for some advice.
The :hover effect is going to change the size and color of the object.
I have tagged jquery and javascript incase it's easier to do the effect in that language.
PHP
<div class="holder forsideikonholder">
<div class="container">
<div class="row">
<ul class="prosess">
<a href="#">
<div class="col-md-4 foto">
<li>
<object data="<?php bloginfo('stylesheet_directory'); ?>/img/ikon-foto.svg" type="image/svg+xml">
<img src="<?php bloginfo('stylesheet_directory'); ?>/img/ikon-foto.png">
</object>
<p class="thin">Fotografering</p>
</li>
</div>
</a>
<a href="#">
<div class="col-md-4 video">
<li>
<object data="<?php bloginfo('stylesheet_directory'); ?>/img/ikon-video.svg" type="image/svg+xml">
<img src="<?php bloginfo('stylesheet_directory'); ?>/img/ikon-video.png">
</object>
<p class="thin">Videoproduksjon</p>
</li>
</div>
</a>
<a href="#">
<div class="col-md-4 web">
<li>
<object data="<?php bloginfo('stylesheet_directory'); ?>/img/ikon-web.svg" type="image/svg+xml">
<img src="<?php bloginfo('stylesheet_directory'); ?>/img/ikon-web.png">
</object>
<p class="thin">Webutvikling</p>
</li>
</div>
</a>
</ul>
</div>
</div>
</div>
CSS
Here is the most important CSS for this question:
.forsideikonholder .prosess {
width: 80%;
margin: auto;
}
.forsideikonholder object {
width: 50%;
}
I have tried to do it like this, but as I mentioned, - it seems like it's to complex and I am not selecting the right object.
.forsideikonholder a:hover {
width: 60%;
}
.forsideikonholder object:hover {
width: 60%;
}
Here is the site: http://goo.gl/kbWlGR
Scroll down till you see the orange part with 3 icons.
A a tag is an inline element and its size can't be modified by default. You have here to transform your a tags into blocks with display: block;. That way you will be able to play with their size (without changing anything in your :hover rule).
Moreover, your markup is wrong: a ul mustn't contain anything else than li tags: move your li tags to make them encapsulate the whole content of your buttons.
.forsideikonholder a {
display:block;
}

Flexslider - Updating Images via ng-repeat - Incorrect Width

I have a page with image scrolling and I'm using Flexslider to do that.
Now the images are based on date sorting - So I click on last 7 days - it displays me last 7 day images (data is sent and received via AngularJS).
Now. The data returned as JSON is received is - Okay.
The problem is when data is returned and updated in the view via FlexSlider - The Flexslider is updated with the new data but the width of the flexslider remains according to the maximum elements that were previously present.
Why is that? Could somebody help?
<div class="recent_uploads mar_btm" ng-controller="recentuploadsController">
<div class="mar_btm titl_img"><h6>Recent Uploads</h6><!--<img alt="recent uploads" src="<?php echo base_url();?>public/image/net03.png">--></div>
<input type="text" ng-model="search.text" class="community-searching hide">
<button ng-click="clearSearch()" class="hide">clear</button>
<div class="rec_uplist_cont">
<div class="rec_uplist_slider">
<div class="flex-viewport" style="overflow: hidden; position: relative;">
<ul class="slides" style="width: 800%; transition-duration: 0.6s; transform: translate3d(-240px, 0px, 0px);">
<div class="recnt_info" ng-if="recentupload!=null"><p> No Data Found</p></div>
<li id="apptest" style="width: 226px; float: left; display: block;" class="animate-repeat" ng-repeat="recentupload in recentuploads | filter:search.text">
<div class="rec_uplist" >
<div class="recnt_info">{{recentupload.user}} <span class="timeago" title="{{recentupload.time}}">{{recentupload.time}}</span></div>
<img width="226" ng-click="showvideo(recentupload.id)" height="127" src="http://img.youtube.com/vi/{{recentupload.embededCode}}/0.jpg" />
<a href="#" ng-click="showvideo(recentupload.id)" >{{recentupload.vtitle}}</a>
</div>
</li>
</ul>
</div>
<ol class="flex-control-nav flex-control-paging"><li><a class="">1</a></li><li><a class="flex-active">2</a></li></ol><ul class="flex-direction-nav"><li>Next</li><li>Previous</li></ul></div>
</div>
</div>
Try to detach or remove flexslider from DOM and after that initialize for the new gallery.
More info on how to remove flexslider HERE

draggable disappears on start dragging

I'm trying to make floating panel with
var self = this;
this.$widget = (function() {
var $panel = $("#tmpl-float-panel").tmpl({
title : title
});
//close on click on cross
$panel.find(".ui-dialog-titlebar-close").click(function() {
self.hide();
});
$panel.draggable({
containment : "parent",
handle : "div.ui-dialog-titlebar",
opacity : 0.75
}).appendTo($container);
return $panel;
})();
later I insert content with
this.$widget.find(".ui-dialog-content").append($content);
And here's jquery template used to build panel:
<script id="tmpl-float-panel" type="text/x-jquery-tmpl">
<div class="ui-widget ui-dialog ui-corner-all ui-widget-content float-panel no-select">
<div class="ui-dialog-titlebar ui-widget-header ui-helper-clearfix">
<span class="ui-dialog-title">${title}</span>
<a class="ui-dialog-titlebar-close ui-corner-all" href="#" role="button">
<span class="ui-icon"></span>
</a>
</div>
<div class="ui-dialog-content ui-widget-content">
</div>
</div>
</script>
Here's the question. When I'm trying to drag the panel (clicking on title bar and moving mouse), the whole widget disappears. Can someone tell me why?
UPD: on chrome it do not disappear on click, but somewhy it takes all possible width.
here's html wrapping floating panel:
<div id="idA">
<div id="idB">
<!-- here I have panels and other divs -->
</div>
</div>
in CSS I have
#idA {
height: auto !important;
min-height: 100%;
}
#idB {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}
In lack of a jsfiddle I've created one, based on the code that you've provided.
Within the jsfiddle, the panel works as expected in all browsers that I've tested with (including FF, Safari, Chrome, Opera).
I think your issue might be related to the fact that you haven't properly defined the jqueryui dialog close button in your jQuery template and a click on the title bar may have been misinterpreted as a click event on ".ui-dialog-titlebar-close".
In my jsfiddle I've defined:
<a class="ui-dialog-titlebar-close ui-corner-all" href="#" role="button">
<span class="ui-icon ui-icon-close"></span>
</a>
which might make the difference.
Here is the link to the jsfiddle.
Try appending first then calling draggable and resizable:
$panel.appendTo($container).resizable().draggable();
I had that once and the problem was that a parent div had the css property position: absolute. The effect was that the item was put on the bottom right screen corner the moment I started to drag it around. So first you thought it had disappeared but if you dragged it towards top-left it would come up.
I solved the problem by adding display: inline-block to float panel
<script id="tmpl-float-panel" type="text/x-jquery-tmpl">
<div style="display: inline-block" class="ui-widget ui-dialog ui-corner-all ui-widget-content float-panel no-select">
<div class="ui-dialog-titlebar ui-widget-header ui-helper-clearfix">
<span class="ui-dialog-title">${title}</span>
<a class="ui-dialog-titlebar-close ui-corner-all" href="#" role="button">
<span class="ui-icon"></span>
</a>
</div>
<div class="ui-dialog-content ui-widget-content">
</div>
</div>
</script>
Any ideas of more elegant solution?

How to make Fancybox work with carousel plugin?

I use Fancybox and Scrolling Carousel.
Try to make : click $(.subject) into Fancybox > show $(.content) > $(.content) scroll use scrollingCarousel.
I did test works fine separate.
But if I put them together (Demo1).
Why the $(.content) won't load scrollingCarousel?
(but if reload $(.content) page, then scrollingCarousel work.)
So I try to wrote in Fancybox callback (Demo2) afterLoad,beforeLoad,beforeShow... I did test too, still does't work.
(I've test other carousel plugin, same problem.)
Demo 1 jsfiddle
$(".subject").fancybox({});
$('.content').scrollingCarousel({});
Demo 2
$(".subject").fancybox({
afterLoad: function(){
$('.content').scrollingCarousel({});
}
});
HTML:
<div class="subject">
<div>
<a class="subjectlist"rel="1" href="#1">
<img class="" src="http://farm7.staticflickr.com/6106/6347065961_bb73745e70_m.jpg">
</a>
</div>
</div>
<div class="content" id="1">
<div><img class="" src="http://farm8.staticflickr.com/7171/6417719753_374653e28c_b.jpg"></div>
<div><img class="" src="http://farm7.staticflickr.com/6106/6347065961_bb73745e70_b.jpg"></div>
<div><img class="" src="http://farm7.staticflickr.com/6106/6347065961_bb73745e70_m.jpg"></div>
</div>​
CSS
.content{
display:none;
width: 200px;
height: 200px;
}
.content img{
width: 200px;
height: 200px;
}​
Any advice or help would be greatly appreciated.
.content is hidden by your CSS with display: none, so you simply have to show it using .show() before invoking the scroller, otherwise it just stays hidden.
http://jsfiddle.net/6VH7w/3/
$(".subjectlist").fancybox({
afterLoad: function() {
$('.content').show().scrollingCarousel({
scrollerAlignment: 'vertical'
});
}
});​
Hellow I made owl carousel 2 and fancybox, added fancybox css, mousewheel and js files. Then I made my items
<div class="owl-carousel owl-theme">
<div class="item">
<a class="fancybox" group="fancybox" href="imagen0.png"><img class="img-responsive img-thumbnail center-block" src="imagen0.png" title="SEJ" /></a>
</div>
<div class="item">
<a class="fancybox" group="fancybox" href="imagen1.png"><img class="img-responsive img-thumbnail center-block" src="imagen1.png" title="titulos_imagen" /></a>
</div>
</div>
I hope this help you.

Categories