jssor slider leaving line on side and scaling when not needed - css

I am using jssor slider for a slideshow which works fine in IE11 and Firefox. However in Chrome, it leaves a dark vertical line on the right edge of some (but not all) of the images. It also, on random startups, resizes the pictures to make them too large. The pictures are are stored at 335x260 px and the width of the slider is set at 335px. This is crazy, I don't see where the problem is coming from and I am using their code for most of it. My guess is a simple error, but I can't see it, and have been looking for literally days while doing other parts. Here is the code and the css:
#PhotoShow {
clear: both;
float: left;
height: 260px;
width: 335px;
display: block;
margin-left: 0;
}
<div id="PhotoShow" >
<div id="slider1_container" style="position: relative; width: 335px;">
<!-- Slides Container -->
<div data-u="slides" style="cursor: move; position: absolute; width: 335px; height: 260px; overflow: hidden;">
<div><img data-u="image" src="photos/4JoeBonamassa.jpg" </div>
<div><img data-u="image" src="photos/4WarrenHaynes.jpg" ></div>
<div><img data-u="image" src="photos/4JeffBeck.jpg" ></div>
<div><img data-u="image" src="photos/4LeePomeroy.jpg"></div>
</div>
<!-- --------------------- -->
</div>
</div>
<script type="text/javascript" async>
jQuery(document).ready(function ($) {
var _SlideshowTransitions = [{$Duration:700,$Opacity:2, $Brother:{$Duration:1000,$Opacity:2}} ];
var _CaptionTransitions = [];
var startImgNumber =Math.floor((Math.random()*16)+1);
var options = {
$CaptionSliderOptions: {
$Class: $JssorCaptionSlider$,
$CaptionTransitions: _CaptionTransitions,
$PlayInMode: 1,
$PlayOutMode: 3},
$AutoPlay: true,
$DragOrientation: 1,
$AutoPlayInterval: 5000, // ADJUST!!!!
$FillMode: 1,
//$SlideHeight: 260,
$LazyLoading: 2,
//$PauseOnHover: 0,
$StartIndex: startImgNumber,
$SlideshowOptions: {
$Class: $JssorSlideshowRunner$,
$Transitions: _SlideshowTransitions,
$TransitionsOrder: 1,
$ShowLink: true
}
};
var jssor_slider1 = new $JssorSlider$("slider1_container", options);
function ScaleSlider() {
var parentWidth = $('#slider1_container').parent().width();
if (parentWidth) {
jssor_slider1.$ScaleWidth(parentWidth);
}
else
{window.setTimeout(ScaleSlider, 30);}
}
//Scale slider after document ready
ScaleSlider();
//Scale slider while window load/resize/orientationchange.
$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);
//responsive code end
});
</script>

Not sure what's the exact problem yet.
Please always keep 'top: 0px; left: 0px; width: ...px; height: ...px;' of the container.
And then try to set $HWA option to false.

Related

Getting Google Map to fill main container that contains content

I have a solution with Bootstrap 3. I have a header and footer with a full-width container in between. In this full width container I need to embed a Google Map full height of the browser but above the map is some content e.g a heading or a toggle switch.
[Edit] The header and footer are fixed height and fixed to the top and bottom of the browser. The middle part of the browser I wish to fill the remaining space.
I have found this solution which fills the page nicely but I can't get a heading above the map.
https://stackoverflow.com/a/27301088/285457
Thanks in advance.
$(function() {
var mapDiv = document.getElementById("map_canvas");
/// Set control options for map
var zoptions = {
position: google.maps.ControlPosition.TOP_RIGHT,
style: google.maps.ZoomControlStyle.SMALL
};
/// Position of map using coord that were passed else do nothing.
var pos = new google.maps.LatLng(40.716948, -74.003563);
/// Set basic map options using above control options
var options = {
zoom: 10,
zoomControlOptions: zoptions,
mapTypeId: google.maps.MapTypeId.TERRAIN,
center: pos
};
this.map = new google.maps.Map(mapDiv, options);
})
html,body,.container-fluid,#map_canvas {
height: 100%;
}
.container-fluid {
width: 100%;
position: absolute;
top: 0;
padding: 0;
}
#map_header {
height:50px;
}
#map_canvas {
border-top: 50px solid #fff;
border-bottom: 20px solid #fff;
bottom:50px;
}
header {
height: 50px;
}
footer {
height: 20px;
}
#map-container {
position: fixed;
top: 50px;
left: 0;
bottom: 50px;
right: 0;
}
<header class="hidden-print">
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">menus etcs</div>
</div>
</header>
<div class="container-fluid" id="map-container">
<div id="map_header">This is part of the map content</div>
<div id="map_canvas" class="map_canvas"></div>
</div>
<footer class="navbar-default navbar-fixed-bottom">
<div class="row">footer stuff</div>
</footer>
Here's the fiddle > https://jsfiddle.net/johnny5a/vnr03ufs/6/
Based on the info I got from comments here is a solution
When you put position fixed on the map it is removed from the flow of the document and it won't be attached to anything but the browser itself. You need to modify your CSS a bit
body {
position: relative;
overflow: hidden;
}
Also your container-fluid needs this CSS
.container-fluid{
position: absolute;
top: 0;
padding: 0;
width: 100%;
height: 100%;
}
This should fix the problem.
You can read about positioning here and here

Enlarge image when hovering over parent element

Like many others I wanted to show an enlarged image when hovering over a thumbnail. I used a hover selector to enlarge the image which worked fine.
Instead of having the image shrink when I moved off the image, I wanted the image to shrink when I moved off area that was occupied by the original thumbnail which was 100px X 100px.
I put a div around it, sized it and put the :hover on it rather then the image. I thought because the enlarged image was positioned absolute it wouldn't enlarge the div.
The image still enlarges but it does not shrink unless the cursor moves off the enlarged image.
div.hov:hover >.thumbnail {
position:fixed;
top:100px;
left:50px;
width:800px;
height:auto;
display:block;
z-index:999;
}
div.hov{
width:101px;
height:101px;
float:left;
overflow:visible;
margin: 10px;
}
<p>
<div class="hov"><img src="./gm1.png" class="thumbnail" height="100" width="100" /></div>
<div class="hov"><img src="./gm2.png" class="thumbnail" height="100" width="100" /></div>
</p>
Is there any way to achieve this? The hosted version is here.
one way to do this is to show a new modal div on top of the original image. that way your original div doesn't enlarge. however, you'll need to use some javascript or jQuery
heres a fiddle to demonstrate: http://jsfiddle.net/k3oq1899/1/
don't mind the code, I put it together very quickly for you, but you can clean it up a bit.
html
<div class='image'>
<img src='http://www.online-image-editor.com//styles/2014/images/example_image.png'/>
</div>
<div id='modal'></div>
css
.image {
display: inline-block;
width: 100px;
height: auto;
}
img {
width: 100%;
height: 100%;
display: inline-block;
}
#modal {
display: none;
position: absolute;
top: 0;
left: 0;
}
jquery
$(function() {
var currentMousePos = { x: -1, y: -1 };
$(document).mousemove(function (event) {
currentMousePos.x = event.pageX;
currentMousePos.y = event.pageY;
if($('#modal').css('display') != 'none') {
$('#modal').css({
top: currentMousePos.y,
left: currentMousePos.x + 12
});
}
});
$('.image').on('mouseover', function() {
var image = $(this).find('img');
var modal = $('#modal');
$(modal).html(image.clone());
$(modal).css({
top: currentMousePos.y,
left: currentMousePos.x + 12
});
$(modal).show();
});
$('.image').on('mouseleave', function() {
$(modal).hide();
});
});
Instead of enlarging the image, think of actually creating two images, one big and one small one. Once you hover over the small one, you can make the big image visible or invisible when moving out of it.
use absolute positions, display:block and display:none and check if the z-index is right.
But is this really necessary?
The hovering does not seem convenient to me....
You can put an invisible DIV with same dimensions over the thumbnail, put it on top with z-index and use it for the hover-event. But you need a few lines of javascript (with jQuery in my example).
HTML
<div class="box">
<div class="thumbnail">
<img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437" alt="">
<div class="overlay"></div>
</div>
<div class="large-image">
<img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437" alt="">
</div>
</div>
Javascript (jQuery)
$('.overlay').hover(
function () {
$(this).closest('.box').addClass('show-large-image');
},
function () {
$(this).closest('.box').removeClass('show-large-image');
});
CSS
.box {
padding: 200px;
}
.thumbnail {
position: relative;
display: inline-block;
border: 1px solid #888;
}
.overlay {
z-index: 1;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.large-image {
display: none;
position: absolute;
top: 0;
left: 0;
width: 500px;
}
.large-image img {
width: 100%;
}
.box.show-large-image .large-image {
display: block;
}
Example: http://jsfiddle.net/dx0d1ceh/

How to position bootstrap tooltip correctly next to a partially hidden image

I have the folowing page using bootstrap tooltip that I can't position correctly
The page has the following characteristics:
#outer-container is my page. It has fixed width.
There are many .inner-container. They have fixed width and overflow-x: auto.
.inner-containers are dynamically generated. (Not sure if it's relevant, so the following sample code is static)
Inside .inner-container divs there is arbitrary HTML that could include many <img> tags
Each <img> has a tooltip with it's alt text as title.
Images can be wider than their .inner-container div
Here is the snippet, you can see the problem when running the snippet in full page.
$("#outer-container").tooltip({
selector: "img",
placement: "right",
title: function () { return $(this).attr("alt"); },
});
#outer-container
{
border: 1px solid;
padding: 10px;
width: 960px;
margin-left: auto;
margin-right: auto;
overflow: auto;
}
.inner-container
{
width: 600px;
overflow-x: auto;
border: 1px solid;
margin-bottom : 10px;
float: right;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div id="outer-container">
<div class="inner-container">
<figure>
<img src="http://i.imgur.com/mrXWW8S.png" alt="Man ALL IS LOŚ͖̩͇̗̪̏̈́T ALL I​S LOST the pon̷y he comes he c̶̮omes he comes the ich​or permeates all MY FACE MY FACE ᵒh god no NO NOO̼O​O NΘ stop the an​*̶͑̾̾​̅ͫ͏̙̤g͇̫͛͆̾ͫ̑͆l͖͉̗̩̳̟̍ͫͥͨe̠̅s ͎a̧͈͖r̽̾̈́͒͑e n​ot rè̑ͧ̌aͨl̘̝̙̃ͤ͂̾̆ ZA̡͊͠͝LGΌ ISͮ̂҉̯͈͕̹̘̱ TO͇̹̺ͅƝ̴ȳ̳ TH̘Ë͖́̉ ͠P̯͍̭O̚​N̐Y̡ H̸̡̪̯ͨ͊̽̅̾̎Ȩ̬̩̾͛ͪ̈́̀́͘ ̶̧̨̱̹̭̯ͧ̾ͬC̷̙̲̝͖ͭ̏ͥͮ͟Oͮ͏̮̪̝͍M̲̖͊̒ͪͩͬ̚̚͜Ȇ̴̟̟͙̞ͩ͌͝S̨̥̫͎̭ͯ̿̔̀ͅ" />
<figcaption>
Image originally posted by Travis J
</figcaption>
</figure>
</div>
<div class="inner-container">
<figure>
<img src="http://i.stack.imgur.com/CThCe.png" alt="Sanely-sized stackoverflow logo" />
<figcaption>Sanely-sized stackoverflow logo</figcaption>
</figure>
</div>
<div class="inner-container">
<figure>
<img src="http://i.stack.imgur.com/MvHsz.jpg" alt="Insanely-long-sized stackoverflow logo" />
<figcaption>Insanely-long-sized stackoverflow logo</figcaption>
</figure>
</div>
</div>
The above code works fine showing the tooltips but there is a little problem.
The tooltip does not appear immediately positioned after the truncated image but after the place where the part of the image that is hidden ends so it appears too far form the image.
As you scroll .inner-containerto the right the tooltip gets closer to the img until it's next to it.
The situation becomes even worse when the image is wider that the whole screen because now the tooltip is too far to the right and now it generates not only the expected scrollbar in .inner-container but also one on the whole page.
The tooltip now is impossible to see because as soon as you try to scroll the tooltip fades.
Now the question is.....
Is there any way to configure the bootstrap tooltip or to style it with css to make it always appear at the edge of the cropped image as in the second image as opposed to the "actual" but hidden edge?. Also when the image is shorter than the .inner-container the tooltip should appear next to the image and not at the right edge of the container
#outer-container .tooltip { left: calc(50% + 480px)!important; }
Thanks to #y34h for the idea, but I had to calculate the correct value of left property specifically by overriding the actual bootstrap js code.
Here is the new Tooltip.getCalcultedOffset which is the function that calculates the absolute position of the tooltip:
$.fn.tooltip.Constructor.prototype.getCalculatedOffset = function (placement, pos, actualWidth, actualHeight) {
return placement === 'bottom' ? {
top: pos.top + pos.height,
left: pos.left + pos.width / 2 - actualWidth / 2 } :
placement === 'top' ? {
top: pos.top - actualHeight,
left: pos.left + pos.width / 2 - actualWidth / 2 } :
placement === 'left' ? {
top: pos.top + pos.height / 2 - actualHeight / 2,
left: pos.left - actualWidth } :
/* placement == 'right' */ {
top: pos.top + pos.height / 2 - actualHeight / 2,
left:
/* begin fix */
Math.min(
pos.left + pos.width, //original left
$(".inner-container").offset().left + $(".inner-container")[0].clientWidth //max left
)
/* end fix */
};
};
The actual change is enclosed in /* begin fix */ and /* end fix */
Here is the complete working code:
$.fn.tooltip.Constructor.prototype.getCalculatedOffset = function (placement, pos, actualWidth, actualHeight) {
return placement === 'bottom' ? {
top: pos.top + pos.height,
left: pos.left + pos.width / 2 - actualWidth / 2 } :
placement === 'top' ? {
top: pos.top - actualHeight,
left: pos.left + pos.width / 2 - actualWidth / 2 } :
placement === 'left' ? {
top: pos.top + pos.height / 2 - actualHeight / 2,
left: pos.left - actualWidth } :
/* placement == 'right' */ {
top: pos.top + pos.height / 2 - actualHeight / 2,
left:
/* begin fix */
Math.min(
pos.left + pos.width, //original left
$(".inner-container").offset().left + $(".inner-container")[0].clientWidth //max left
)
/* end fix */
};
};
$("#outer-container").tooltip({
selector: "img",
placement: "right",
title: function () { return $(this).attr("alt"); },
});
#outer-container
{
border: 1px solid;
padding: 10px;
width: 960px;
margin-left: auto;
margin-right: auto;
overflow: auto;
}
.inner-container
{
width: 600px;
overflow-x: auto;
border: 1px solid;
margin-bottom : 10px;
float: right;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div id="outer-container">
<div class="inner-container">
<figure>
<img src="http://i.imgur.com/mrXWW8S.png" alt="Man ALL IS LOŚ͖̩͇̗̪̏̈́T ALL I​S LOST the pon̷y he comes he c̶̮omes he comes the ich​or permeates all MY FACE MY FACE ᵒh god no NO NOO̼O​O NΘ stop the an​*̶͑̾̾​̅ͫ͏̙̤g͇̫͛͆̾ͫ̑͆l͖͉̗̩̳̟̍ͫͥͨe̠̅s ͎a̧͈͖r̽̾̈́͒͑e n​ot rè̑ͧ̌aͨl̘̝̙̃ͤ͂̾̆ ZA̡͊͠͝LGΌ ISͮ̂҉̯͈͕̹̘̱ TO͇̹̺ͅƝ̴ȳ̳ TH̘Ë͖́̉ ͠P̯͍̭O̚​N̐Y̡ H̸̡̪̯ͨ͊̽̅̾̎Ȩ̬̩̾͛ͪ̈́̀́͘ ̶̧̨̱̹̭̯ͧ̾ͬC̷̙̲̝͖ͭ̏ͥͮ͟Oͮ͏̮̪̝͍M̲̖͊̒ͪͩͬ̚̚͜Ȇ̴̟̟͙̞ͩ͌͝S̨̥̫͎̭ͯ̿̔̀ͅ" />
<figcaption>
Image originally posted by Travis J
</figcaption>
</figure>
</div>
<div class="inner-container">
<figure>
<img src="http://i.stack.imgur.com/CThCe.png" alt="Sanely-sized stackoverflow logo" />
<figcaption>Sanely-sized stackoverflow logo</figcaption>
</figure>
</div>
<div class="inner-container">
<figure>
<img src="http://i.stack.imgur.com/MvHsz.jpg" alt="Insanely-long-sized stackoverflow logo" />
<figcaption>Insanely-long-sized stackoverflow logo</figcaption>
</figure>
</div>
</div>

wow.js happens only when scroll down once

I'm using wow.js, and it works only on page load and one time when scroll,
I would like it to trigger each time when I scroll to the div position and not only once when page is load.
<div class="wow rotateIn animated" data-wow-delay="0.3s" data-wow-duration="0.5s"></div>
Try this
// Repeat demo content
var $body = $('body');
var $box = $('.box');
for (var i = 0; i < 20; i++) {
$box.clone().appendTo($body);
}
// Helper function for add element box list in WOW
WOW.prototype.addBox = function(element) {
this.boxes.push(element);
};
// Init WOW.js and get instance
var wow = new WOW();
wow.init();
// Attach scrollSpy to .wow elements for detect view exit events,
// then reset elements and add again for animation
$('.wow').on('scrollSpy:exit', function() {
$(this).css({
'visibility': 'hidden',
'animation-name': 'none'
}).removeClass('animated');
wow.addBox(this);
}).scrollSpy();
.box {
display: block;
width: 200px;
background: rgba(255, 255, 255, 0.7);
color: #eb3980;
font-family: "Comic Sans MS", "Comic Sans";
border: 3px dashed pink;
margin: 30px auto;
text-align: center;
}
.doge {
display: block;
width: 200px;
height: 200px;
position: fixed;
bottom: 10px;
right: 10px;
background: url(http://mynameismatthieu.com/WOW/img/wow-8.gif) no-repeat;
}
body {
background: url(http://mynameismatthieu.com/WOW/img/wow-logo.jpg) #fff fixed no-repeat center center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css" rel="stylesheet"/>
<div class="box">
<h1 class="wow slideInLeft">Hello</h1>
<h1 class="wow slideInRight">World</h1>
<h2>🤗 🌎 </h2>
</div>
<div class="doge wow bounceIn"></div>
<!-- First load wow.js and other libraries -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<!-- scrollSpy plugin see https://github.com/thesmart/jquery-scrollspy -->
<script src="https://gitcdn.xyz/repo/thesmart/jquery-scrollspy/0.1.3/scrollspy.js"></script>
<!-- Modify after -->
<script>
</script>
WowJs not provide functionality every time scroll animation is apply. In WowJs Animation apply once's when first time you scroll page. if you want to apply that type of functionality instead of WowJs you can used ScrollRevealJs library. ScrollRevealJs have reset option that provide every time you scroll page animation is apply.
Refer this link :- http://scrollrevealjs.org/
try this
window.addEventListener('scroll', function(e) {
if( $(window).scrollTop() <= 50) {
$('.wow').removeClass('animated');
$('.wow').removeAttr('style');
new WOW().init();
}
});

How do I properly add a scrollbar to a jQuery Mobile popup using iScrollview?

I am working on a webpage using jQuery Mobile, iScrollview, and Google Maps. When the map gets initialized, it will load a set of markers with infowindows containing an image. When the image gets clicked, it will load the content of a jQM popup with a list and show the popup.
I am having 2 problems:
1) How can I set a height (e.g. 150px) for my jQM popup's content? Using iScrollview, the content's height becomes overridden and becomes large. Using the refresh() as specified in the documentation has no effect (or am I using it wrong?).
2) Is there a way for me to show a scrollbar only if the list exceeds the height of the content? Currently, it always shows a scrollbar.
HTML
<div style="display: none;">
<div class="popup">
<div class="header" data-role="header">
<h1>Products</h1>
</div>
<div class="content" data-role="content" data-iscroll>
</div>
<div class="footer" data-role="footer">
<a class="close" href="#" data-rel="back" data-role="button">Close</a>
</div>
</div>
</div>
CSS
.popup {
width: 175px;
}
.popup .content {
height: 150px; /* has no effect */
padding: 10px;
}
.popup .content ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
.popup .content ul li {
height: 23px;
line-height: 23px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
JavaScript
var markers = [];
function addMarker(i, retailer) {
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(retailer.lat, retailer.lng),
products: retailer.products // array of strings of unknown length
});
var infobox = new InfoBox({
boxClass: 'infobox',
closeBoxURL: '',
content: '\
<img class="detail" src="img/arrow_light.png" alt="" onclick="openPopup('+ parseInt(i) +');" />\
<div class="name"><span>' + retailer.name + '</span></div>\
<div class="address"><span>' + retailer.address + '</span></div>\
<div class="arrow"></div>',
maxWidth: 500,
pixelOffset: new google.maps.Size(0, -110)
});
markers.push(marker);
}
function openPopup(i) {
var items = [];
// create list
$.each(markers[i].products, function(i, name) {
items.push('<li>' + name + '</li>');
});
// set popup's content
$('.popup .content')
.empty()
.append('<ul class="list">' + items.join('') + '</ul>')
.iscrollview('refresh');
// show popup
$('.popup').popup({ history: false, transition: 'pop' }).popup('open');
}
Only thing you need to do is override popup content height and inforce it like this:
.ui-popup .ui-content {
height: 150px !important;
}
Remember to use !important if you want to override class css. !important is only needed when working with classes. For example if you initialize your css through id (#) !important is not needed.
Working example: http://jsfiddle.net/Gajotres/N28Vg/

Resources