I'm trying to change the bxslider height adjustment for percentage rather than pixel, but I'm a bit lost about it.
I found in the code line that makes this adjustment:
slider.viewport.css('height', getViewportHeight());
and here, set the viewport height
slider.viewport.height(getViewportHeight());
accurate results in css percentage because used responsive layout
thanks.
When I was encountering problems with bxSlider's height being cutoff at loading, I wrote a quick patch that basically removes the height property and attribute of .bx-viewport which allowed my CSS rule to override the height to whatever I wanted. That script is the last block. I commented it out because you may not need it.
I didn't know if you wanted a carousel of multiple slides or whether you wanted it to slide horizontally or vertically since the demo wasn't functioning. So I made it a 1 slide vertical carousel.
I enabled adaptiveHeight to show you it's dynamic capabilities with height, by default bxSlider just stays at the size of the tallest slide.
All of these features are options and as they are options that makes them optional...optionally.
There's 2 styles included but disabled. The first one is used if you want to use that height fix script. The second rule id to move the control arrows to the top. If you like the slider in vertical mode then you'll most likely want have your arrow controls at the top. If set at the default position in the middle, it'll jump every time there's a change in height.
Fiddle
Snippet
$(document).ready(function() {
var bx = $('.bxslider').bxSlider({
mode: 'vertical',
adaptiveHeight: true,
adaptiveHeightSpeed: 750,
slideWidth: 400,
minSlides: 1,
maxSlides: 1,
moveSlides: 1
});
});
/*
document.documentElement.addEventListener('DOMContentLoaded', function(event) {
event.stopPropagation();
var tgt = document.querySelector('.bx-viewport');
//tgt.removeProperty('height');
//tgt.removeAttribute('height');
//tgt.setAttribute('height', '100%');
}, false);
*/
img {
display: block;
margin: 0 auto
}
/*
.bx-viewport {
height:90vh !important;
}
*/
/*
.bx-controls a {
top:.05% !important;
}
*/
<link rel="stylesheet" href="http://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.min.js"></script>
<div class="bxslider">
<div>
<iframe src="//www.youtube.com/embed/wBdvEdWx2iU" height="200" width="400" id="video1"></iframe>
</div>
<div>
<img src="http://placehold.it/350x666?text=350x666.png" id="image2">
</div>
<div>
<iframe src="//www.youtube.com/embed/wBdvEdWx2iU" height="200" width="400" id="video3"></iframe>
</div>
<div>
<img src="http://placehold.it/350x350?text=350x350.png" id="image4">
</div>
</div>
Related
I have 2 vertical div: left and central panel.
I use the left div like a sidebar menu and I would like to implement a drag&drop to move the left sidebar to a new right sidebar (to move the menu from left to right side).
When the user start to drag, I would like to show where is possible to drop the panel (so I need to show a right empty sidebar) and when the user drop the panel from left to the right destination I need to hide the left panel. Same situation when the user start to drag from right to left panel.
I have see some possible ways to implement this using jQuery UI or directly DnD integrated of HTML5 (example).
Do you know which one is the best solution (also as speed of implementation of it)?
I think that to get exactly what I want (also with the show/hide of the three panels), I need to write some code.. Do you know any tutorial / example very close to what I would like to do?
Here is an example with animation: https://jsfiddle.net/Twisty/jf6urpep/
As you did not provide an example of the HTML, script, or concept, I created a basic example.
HTML
<!-- Sidebar Left -->
<div class="sidebar-l" style="height:100%; position: relative;">
<div class="w3-sidebar w3-light-grey w3-bar-block" style="width:25%; position: absolute;">
<h3 class="w3-bar-item">Menu</h3>
Link 1
Link 2
Link 3
</div>
</div>
<!-- Sidebar Right -->
<div class="sidebar-r" style="margin-left: 75%; width:0; height:100%; position: relative;">
</div>
<!-- Page Content -->
<div class="content" style="margin-left:25%">
<div class="w3-container w3-teal">
<h1>My Page</h1>
</div>
<img src="https://www.w3schools.com/w3css/img_car.jpg" alt="Car" style="width:100%">
<div class="w3-container">
<h2>Sidebar Navigation Example</h2>
<p>The sidebar with is set with "style="width:25%".</p>
<p>The left margin of the page content is set to the same value.</p>
</div>
</div>
JavaScript
$(function() {
$(".w3-sidebar").draggable({
handle: "h3.w3-bar-item",
drag: function(e, ui) {
if (ui.position.left > $(window).width() / 2) {
$(".sidebar-l").css({
"width": 0
});
$(".sidebar-r").css({
"width": "25%"
});
$(".content").css({
"margin-left": 0,
"margin-right": "25%"
});
} else {
$(".sidebar-l").css({
"width": "25%"
});
$(".sidebar-r").css({
"width": 0
});
$(".content").css({
"margin-left": "25%",
"margin-right": 0
});
}
},
stop: function(e, ui) {
var side, pos, center;
pos = ui.position;
center = $(window).width() / 2;
console.log(pos, center);
if (pos.left > center) {
side = "r";
} else {
side = "l";
}
console.log("target", side);
var sidebar = $(".w3-sidebar").detach();
console.log("detach", sidebar);
sidebar.appendTo($(".sidebar-" + side)).position({
my: "left top",
at: "left top",
of: $(".sidebar-" + side),
using: function(css, calc) {
$(this).animate(css, "fast");
}
})
console.log("append to", $(".sidebar-" + side));
}
});
$("h3.w3-bar-item").disableSelection();
});
Depending on where the item is dragged, we swap which side has the margin space. This helps indicate to the user where the sidebar will land. The user can basically drop the sidebar on either side and it will snap to position.
Hope that helps.
Psuedo code based on your example link:
Put both sidebar elements in your HTML as sidebar sidebar--left and sidebar sidebar--right
Fill one with the actual sidebar content.
Add the class sidebar--hidden to the other. Style that to hide the element.
On dragstart, remove the class sidebar--hidden and add a class to both sidebars like sidebar--droppable. Style them appropriately
On drop, remove sidebar--droppable from both and add sidebar--hidden to the other
Don't forget to accommodate for drops that do not fall on a sidebar drop target. You can use dragend for that case and just put it back to where it started (or maybe test the position and if >50%, make it a right sidebar...)
Though, if this is really just a choice between left and right sidebars, probably easier to have a button/checkbox type control on the sidebar and simply move it in the DOM when toggled (and on page load via some persistence mechanism). Or have both sidebars in the DOM and move the innerHTML. If you don't use padding or borders on the sidebars elements themselves they should collapse to hidden when they have no content.
I have created a image slider in WordPress using slick slider. I am using center mode I want one image centered with one on each side slightly showing. But I am having a few problems. Firstly when I resize the window slick slider doesn't calculate the new image widths until I interact with the slider, this is problem is not present in the demo. Secondly the images on each side aren't showing like they should.
https://codepen.io/Reece_Dev/pen/xLQwEb
$('.carousel').slick({
centerMode: true,
centerPadding: '0px',
slidesToShow: 1,
});
#container{
width: 100%;
}
.slick-slide img{
width: 80%;
height: auto;
max-width: 2000px;
}
<script src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<link href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div class="carousel">
<div><img src="http://fyberproperty.co.uk/wp-content/uploads/2017/04/stairs_one2200.png"></div>
<div><img src="http://fyberproperty.co.uk/wp-content/uploads/2017/04/stairs_two2200.png"></div>
<div><img src="http://fyberproperty.co.uk/wp-content/uploads/2017/04/stairs_one2200.png"></div>
</div>
</div>
codepen look for the window resize event an add this
$(window).resize(function(){
$('.my-slider')[0].slick.refresh();
});
Answer from slick creator, Ken Wheeler, himself:
$('.slider-class').slick('setPosition');
https://stackoverflow.com/a/32107099/3396866
Run the slick method on window resize to recalculate the image dimensions.
$(window).on('resize orientationchange', function() {
$('.carousel').slick('resize');
});
Turns out that all I needed was some css styles and to add the latest jQuery to wordpress. Check my codepen to see the css if you're have the same problem
Here's the code I use to resize my slack carousel, whenever the browser window changes height.
var MARGIN_TOP_BOTTOM = 15;
$(window).on('init resize', function () {
var newWindowHeight = $(this).height();
newWindowHeight -= (MARGIN_TOP_BOTTOM * 2);
$(".cssCarousel").css("margin", MARGIN_TOP_BOTTOM + "px 0px");
$(".slick-slide").css("height", newWindowHeight + "px");
$(".slick-slide img").css("height", newWindowHeight + "px");
});
As you can see, I leave a small (15px) gap at the top & bottom.
Im having trouble with the latest version of LayerSlider. I have used everything from the full-width responsive demo and read through all the options but when I resize my browser, the height does not update. To make this clearer the image itself scales but the container's height stays the same. In the documentation it says that you must give the container a height.
My code below:
HTML:
<div id="LayerSlider" class="Slider">
<div class="ls-slide" data-ls="transition2d:1;timeshift:-1000;">
<img src="/Assets/Images/Layerslider/Banner1.jpg" class="ls-bg" alt="Slide background"/>
</div>
<div class="ls-slide" data-ls="transition2d:1;timeshift:-1000;">
<img src="/Assets/Images/Layerslider/Banner2.jpg" class="ls-bg" alt="Slide background"/>
</div>
</div>
jQuery
$(document).ready(function () {
$('#LayerSlider').layerSlider({
responsive: false,
layersContainer : 1178,
responsiveUnder : 1500
});
});
In the documentation is says you must use responsive: false if you want to use responsiveUnder which makes it responsive under a specified width.
Link to LayerSlider http://kreaturamedia.com/layerslider-responsive-jquery-slider-plugin/
All you need to do is put the container css inline.
<div id="LayerSlider" class="Slider" style="width:100%; height:427px;">
use jquery to change the #layerslider height when window resize.
<script type="text/javascript">
$(window).resize(function() {
var newHeight;
newHeight = $(window).width();
newHeight = newHeight / 2.25
newHeight = parseInt(newHeight);
// alert(newHeight);
$('#layerslider').css('height', newHeight);
});
</script>
I had the exact same problem. In my case, it was due to a duplicate of css styles, when we migrated the site to liferay cms (which adds all sorts of html). We restructured some of site and copied and pasted the layerslider.css into the document (so we could edit it without having to deploy the theme) - but never removed the original css file. Removing the styles is what fixed the height calculation. Apparently the javascript uses the css styles you set for height and width to calculate the image, text, and parent container sizes.
Hope this helps.
I used css break point to fix this height issue of the layer Slider. Use the layer slider's css editor.
#media only screen and (min-width:800px) and (max-width:960px) {
.ls-wp-fullwidth-container {
height: 65vh!important;
}
#media only screen and (min-width:768px) and (max-width:800px) {
.ls-wp-fullwidth-container {
height: 50vh!important;
}
}
#media only screen and (min-width:600px) and (max-width:768px) {
.ls-wp-fullwidth-container {
height: 42vh!important;
}
}
#media only screen and (min-width:480px)and (max-width:600px) {
.ls-wp-fullwidth-container {
height: 33vh!important;
}
}
-icodefy
I'm trying to calculate width and height of elements, to set precise position in CSS with jQuery, but for some reason calculation for some IDs doesn't work (alert shows 0 or nothing) while working for other IDs and classes. Here's the jQuery code:
$(document).ready(function () {
$("#img1").each(function () {
var maxtop = $('.pattern').outerHeight() - $('#mimg1').outerHeight() - 20,
maxleft = $('.pattern').outerWidth() - $('#mimg1').outerWidth() - 20,
randomtop = getRandomInt(20, maxtop),
randomleft = getRandomInt(20, maxleft),
randomzindex = getRandomInt(1, 30);
$(this).css({
"top": randomtop,
"left": randomleft,
"z-index": randomzindex
});
});
$("#img13").each(function () {
var maxtop = $('.pattern').outerHeight() - $('#mimg13').outerHeight() - 20,
maxleft = $('.pattern').outerWidth() - $('#mimg13').outerWidth() - 20,
randomtop = getRandomInt(20, maxtop),
randomleft = getRandomInt(20, maxleft),
randomzindex = getRandomInt(1, 30);
alert ($('#mimg13').outerHeight());
$(this).css({
"top": randomtop,
"left": randomleft,
"z-index": randomzindex
});
});
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
});
CSS:
html {width:100vw; height:100vh;}
body {margin:0; width:100vw; height:100vh; overflow:hidden;}
.pattern {width:100%; height:100%; margin:0; padding:0;}
.drag {overflow: visible; padding-bottom: 0px; cursor: move; position: absolute;}
.mood-img {position:absolute; display:none; margin:0; padding:0;}
HTML:
<body class="pattern-2">
<div class="pattern"></div>
<div id="img1" class="drag mood-img">
<img class="shadow moodimg1" src="mood/brick-mood-1.png">
<span class="mood-name shadow">
<nobr>A. Brickwork I</nobr>
</span>
</div>
<div id="img13" class="drag mood-img">
<img id="moodimg13" class="shadow moodimg" src="mood/brick-graphic-4.png">
<span class="mood-name shadow">
<nobr>6. Untitled</nobr><br>
<small>digital</small>
</span>
</div>
</body>
I have tried lot of different options but none of them worked and the problem is always (as it seems) is that JS doesn't calculate elements' sizes, so positions are also calculated wrong.
And also may be there's some more simple way to make all these calculation, cause I have 13 elements with different IDs (from img1 to img13 and from mimg1 to mimg13. May be I could use JS to get IDs by itself, with no need for me to write all IDs into JS?
IDEA
I have a page with a few div elements, one of them is visible, others are set to display:none. When particular span element is clicked, JS sets certain hidden div visible, changing its CSS to display:block. The div I have this problem with at first was an invisible container for several other divs with images and text elements and I wanted to position these contained elements against the container div (which had width and height set to 0 and margin top and left set to 50%) with margin-top and margin-left. Then I set the container to have 100% width and height and tried to position container's content with top and left. Then I removed the container and set its former inner elements to have position:absolute and tried to still position it with top and left properties calculated and set with jQuery. Actually those elements are images with some pop-up text, which should be randomly placed all over the page (overflow:hidden), and have z-index set randomly as well. I've spent three days trying to find the solution, but got no result — either it's not working at all (elements are placed all on top of one another in the same position (top left corner) either calculations are done wrong and some (or all) divs are positioned out of the page which creates scroll or hiding images when overflow is hidden. Hope I'm explaining it fine, so anyone could be able to understand what have I wanted to do.
You're calculating dimensions on page load - $(document).ready(... but unfortunately it doesn't mean the images are ready at this point. It's a common issue.
Since you already have your images wrapped with .each function, simply replace it with the load event handler
$("#img1").on('load', function () {
...
});
http://jsbin.com/iLIWOfa/2/edit
If the CSS of a parent element of a image is display: none, the image is not loaded and there is no width or height.
Just set opacity: 0 instead.
I'm trying to create a simple website that only consists of background images inside a carousel that will move from left to right, with directional arrows. I have found one resources that provides a simple example however when I tried to reproduce their model, the script doesn't seem to define itself. Also, there is the second issue with actually making it full-screen since the demo is only 700x500.
Here is a link to the resource: Dynamic Drive.
Also, here is my HTML
<!DOCTYPE html>
<head>
<title>Hit Heavy</title>
<link rel="shortcut icon" href="favicon.ico" type="image/ico" />
<style type="text/css">
div.bgcarousel { /* CSS for main carousel container */
background: black center center no-repeat;
width: 100%;
}
img.navbutton { /* CSS for the nav buttons */
margin: 5px;
opacity: 0.7;
}
div.slide{ /* CSS for each image's DIV container within main container */
background-color: black;
background-position: center center; /* center image within carousel */
background-repeat: no-repeat;
background-size: cover; /* CSS3 property to scale image within container? "cover" or "contain" */
color: black;
}
</style>
<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/bgcarousel.js" script type="text/javascript"></script>
<script type="text/javascript">
var firstbgcarousel=new bgCarousel({
wrapperid: 'mybgcarousel', //ID of blank DIV on page to house carousel
imagearray: [
['bg.jpg'], //["image_path", "optional description"]
['bg.jpg'],
['bg.jpg'],
['bg.jpg'] //<--no trailing comma after very last image element!
],
displaymode: {type:'manual', pause:3000, cycles:2, stoponclick:false, pauseonmouseover:true},
navbuttons: ['left.png', 'right.png'], // path to nav images
activeslideclass: 'selectedslide', // CSS class that gets added to currently shown DIV slide
orientation: 'h', //Valid values: "h" or "v"
persist: true, //remember last viewed slide and recall within same session?
slideduration: 500 //transition duration (milliseconds)
})
</script>
</head>
<body>
<div id="mybgcarousel" class="bgcarousel"></div>
</body>
</html>
As for the javascript that backs the scripting within the html, you can view it here
The problem is in the following line you have set the width to 100%
div.bgcarousel{ /* CSS for main carousel container */
background: black ;
width:700px; /* default dimensions of carousel */
height:500px;
}
#user2122160 Height is Important change the css like this
div.bgcarousel { /* CSS for main carousel container */
background: black center center no-repeat;
width: 100%;
height:100%;
}
i created Slider based Your Code its Working Well without Error Link below:
http://www.fileconvoy.com/dfl.php?id=g7d74fb2c3b904c6a99923428881a8f81443981afd
I think you need to add a $(document).ready() handler around that code, I think it's running BEFORE jquery and bgcarousel gets loaded, change the script to
<script type="text/javascript">
$(document).ready(function(){
var firstbgcarousel=new bgCarousel({
wrapperid: 'mybgcarousel', //ID of blank DIV on page to house carousel
imagearray: [
['bg.jpg'], //["image_path", "optional description"]
['bg.jpg'],
['bg.jpg'],
['bg.jpg'] //<--no trailing comma after very last image element!
],
displaymode: {type:'manual', pause:3000, cycles:2, stoponclick:false, pauseonmouseover:true},
navbuttons: ['left.png', 'right.png'], // path to nav images
activeslideclass: 'selectedslide', // CSS class that gets added to currently shown DIV slide
orientation: 'h', //Valid values: "h" or "v"
persist: true, //remember last viewed slide and recall within same session?
slideduration: 500 //transition duration (milliseconds)
})
})
</script>
the $(document).ready part makes your code wait for the document to be loaded before executing your script