I have a list where each item contains a text and an image:
<div class="slider">
<ul>
<li>
<div class="txt"><p>First slogan</p></div>
<div class="img"><img src="http://placehold.it/800x180" /></div>
</li>
<li> ... </li>
</ul>
</div>
I need it to be responsive ... the img and txt divs scale on window resize.
After a certain point the img div becomes under the txt div as seen in codepen:
SLIDE EXAMPLE
This is working fine ... But now I need to make it work as a slider.
I am trying to make it using Cycle2 JQuery plugin:
SLIDE EXAMPLE WITH CYCLE 2
The height does not adapt to the slide content.
Could someone please help me out?
Thank you,
Miguel
If you take a look at their documentation here it has plenty of options to adapt the height like adding
<div class="slider" data-cycle-auto-height="1:1">
Hope that helps.
Related
I have a simple nav-bar designed with flexbox like this :
<div id="nav-bar">
<div class="nav-left">
<div class="logo-contain">
<img class="red visible" src="image01">
<img class="white transparent" src="image02">
</div>
</div>
<div class="nav-center">
<ul>
<li class="color01">01</li>
<li class="color02">02</li>
<li class="color03">...</li>
</ul>
</div>
<div class="nav-right">
<div class="box-panier"></div>
</div>
</div>
I made a pretty simple script that change the color of my nav-bar when scrolling and it's working fine. The problem is that when that script is called, the nav-bar does change like it's supposed to do but the img element move to the wrong place. It's supposed to be centered in the nav-left block but it's jumping to the right of the block. But if I open the chrome devtools and just change anything in the css like unchecking/cheking any css propretie, my img element is updating and go back in the right place, centered. So it looks like chrome isn't updating css well when my script is called.
Here is the exact same code in jsfiddle, exept it's working well here. I really don't know what's wrong because with the exact same code on my site is not working well.
> JSfiddle code
In my web page I have an anythingsider running. Which looks like this
<ul id="slider-main">
<li>
<div class=" right-2 up-3 ">
<div>
<img src="http://i.picresize.com/images/2015/08/10/zrsLx.jpg" class="img-responsive" width="1600" height="1070">
</div>
</div>
</li>
<li>
<div class=" right-2 up-3">
<div>
<img src="http://i.picresize.com/images/2015/08/10/zrsLx.jpg" class="img-responsive" width="1600" height="1070">
</div>
</div>
</li>
And My Slider Image looks like this
But when the screen resolution is low like 1366x768 Image does not act as responsive. Only few part of the image is shown in web. Can any one please tell me what I am doing wrong here?
Note: CodePen Link to my demo source
One quick solution: update the image height to fit the height of the viewport.
$(".img-responsive").height($(".anythingWindow").height())
Now this still needs some tweaking because as specified in the question comments:
If the screen width is larger than the picture width, then a blank space will be shown to the right of the image.
As there is a footer, the bottom part of the image is still hidden by it, so you'll need to adjust the picture height to the view area height - the footer height.
In the end the code would be like this:
$(".img-responsive").height($(".anythingWindow").height() - $("footer > div").height())
.width("100%");
And that code must be called when the page loads and when the page resizes. You can see it working on this Codepen.
I'm using HTML, CSS and Jquery and I did a image hover effect with the watch image and I want to be able to add the same image and effect with multiple images vertically down the center of the page but it wont let me, here's the site in question! any help would be great!
<div id="header">
<h1></h1>
</div>
<div class="center12">
<img src="image/logocenter1.png" alt="** PLEASE DESCRIBE THIS IMAGE **">
</div>
<div id="nav">
<h2>
Home / Styles & Sizes /
Brands & Prices /
Watch Straps / Tips on buying used
</h2>
</div>
<div class="fadehover">
<img src="image/test1.png" alt="" class="a"> <img src="image/test1bw.png" alt="" class="b">
</div>
It seems like it should be simple, but it wont work.
Instead of using jquery and two images for gray scale effect, use the following:
By adding an css you can bring the same effect using a single image(no need of jquery and hover image).
Add this css:
<pre>
img.a:hover {
filter: url("");
}
</pre>
and remove the jquery and another gray scale image. If you don't want hover effect and the images are needs to be shown one by one down, remove one of the images inside the div and put it into a separate Div'
I'm using the simple.carousel.js for a simple small slider, where there is an image and some text. As you may know, this plugin uses the <ul> tag to slide the <li> elements. You can set the width and height of the carouselslider in javascript like
> $("ul.homecarouselslider").simplecarousel({
> height:200,
> width:160,
> visible: 1,
> auto: 25000,
> next: $('.offerright'),
> prev: $('.offerleft') });
If you dont set those dimensions in javascript, the .js file has default sizes to set. But i want this plugin to have different dimensions for each <li> element, because there is a larger image in it, or bigger text. If you exceed this height because the text has 250px height instead of 200px which is the limit for the slider, it doesnt display it. Any ideas how in this slider, the <li> elements can get the dimensions of the inner divs? Thank you in advance :)
PS. The html code is something like this:
<div id="offers">
<ul id="homecarouselslider" class="homecarouselslider" style="list-style-type:none;overflow:hidden;width:600px;height:190px;">
<li style="float:left;width:160px;height:190px;">
<div id="offer1">
<div id="offertitle"><?php echo $row['title']; ?></div>
<img id="offerimg" src="<?php echo $row['picture1']; ?>">
<div id="offerdesc">
<div id="offerdesctext"><?php echo $row['full_description']; ?> </div>
<div class="offerleft" id="offerleft"><img src="images/offerleft.png"> </div>
<div class="offerleft" id="offerright"><img src="images/offerright.png"></div>
<div id="offerbook">BOOK NOW</div>
</div>
</div>
</li>
</ul>
</div>
Why won't you use a maximum height for the carousel? The maximum height of a li element. Because I'm assuming that there is content under the carousel, and if you would implement it as you say, the content at bottom of the carousel would 'bounce' when you hva different heights.
If you still want that behavior, I recomand you to see if there is an overflow:hidden set to ul element, that I thinks that i set by carousel.js, and change it in your css file with overflow:visible !important.
Just remove the overflow:hidden for slider and use a bigger image.
Updated fiddle
I've got a page with a three column layout (main nav on the left, center console in the middle and specific page options/navigation on the right). Until now I've been using jQuery UI's Tabs widget in the center console area for one of my pages.
What I'd like to do is separate the tabs (putting them in the right hand column) whilst maintaining the contents position in the middle. Like this:
<div id="center_console">
<div class="tabs_container" id="pets"></div>
<div class="tabs_container" id="family"></div>
<div class="tabs_container" id="bio"></div>
</div>
<div id="right_options">
<div id="tabs">
<ul>
<li>Pets</li>
<li>Family</li>
<li>Bio</li>
</ul>
</div>
</div>
So far however I've been unable to find a way to use jQuery UI to do this (it seems to require that tabs and content be placed within the same container).
I think what you need to do is use the 'select' method
So you would bind your links to the tab you want to click
<div id="center_console">
<div class="tabs_container" id="pets"></div>
<div class="tabs_container" id="family"></div>
<div class="tabs_container" id="bio"></div>
</div>
<div id="right_options">
<div id="tabs">
<ul>
<li id="pets">Pets</li>
<li id="family">Family</li>
<li id="bio">Bio</li>
</ul>
</div>
</div>
$(function(){
//set-up your tabs as normal first
$('#bio').click(function(){
$('#center_console').tabs("select", '#bio');
});
});
You may need to have some links set-up as tabs in the center_console as well, but you could use CSS to hide these. I'm not 100% sure on how tabs() works under the hood. I managed to get this working by hacking around the jqueryui demo with firebug, but for some reason I couldn't get the tabs to work in jsfiddle. If you can set-up an example in that I'm happy to edit it to show you what I did
Thanks to a useful comment below, I realised that I'm not following best practice here. I've set-up a fiddle that should achive what you want ( all be it you will need to style it correctly). It can be found here http://jsfiddle.net/GKNC9/1/
thanks