Does anybody have idea how I can put content (div-menu) INSIDE (over sliding picture) my flex slide (li):
Flex slider default code:
<div class="wrapper_top">
<div class="flexslider">
<ul class="slides">
<li>
<img src="img/s1.jpg" />
</li>
<li>
<img src="img/s2.jpg" />
</li>
</ul>
</div>
</div>
and I want put for example .willbemenu div. This is picture what i want: http://s7.postimg.org/5ul8zk1d7/WILLBE.jpg
.willbemenu{width: 1000px; background-color: orange; padding: 10px; text-align: center;}
I try this way and work, but problem is when flex slider make slide, I need willbemenu div FIXED without sliding.
<div class="flexslider">
<ul class="slides">
<li style="background-image: url(img/s1.jpg);">
<div class="willbemenu">Some option Some option</div>
</li>
</div>
Use a div outside positioned absolute; You can use css tricks to center.
<style>
.willbemenu{ width:1000px; background-color:orange; padding:10px; text-align:center; }
.willbemenu{ position:absolute; top:10px; left:50%; margin-left:-500px; z-index:1; }
</style>
<div class="flexslider">
<div class="willbemenu">Some menu stuff</div>
<ul class="slides">
<li><img src="img/s1.jpg" /></li>
<li><img src="img/s2.jpg" /></li>
</ul>
</div>
Related
i wanted to apply owl carousal to all the images placed in list item i,e li
i want to retain the big background image as it is. on top of that i want to have image carousal of all list images.
at present carousal is not working.
here is jsfiddle: http://jsfiddle.net/eabangalore/s7teyzpL/26/
here is what i have tried:
$(".owl-carousel").owlCarousel();
.service_img{
width:100%;
height:500px;
display: block;
}
.service_img .small-images ul li{
display: inline-block;
/* position:absolute;
top: 33%;*/
}
.small-images{
top: 25%;
left:90px;
opacity: 0.9;
position: absolute;
}
.small-images ul li{
padding-right: 50px;
}
.image-text:hover{
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
<div class="container-fluid">
<div class="col-md-12 col-xs-12 col-sm-12 service_img">
<img src="https://s9.postimg.org/w3pkeix2n/Services.jpg">
<div class="small-images">
<ul>
<li><img src="http://via.placeholder.com/50x50" class="image-text" title="image 1"></li>
<li><img src="http://via.placeholder.com/50x50" class="image-text" title="image 2"></li>
<li><img src="http://via.placeholder.com/50x50" class="image-text" title="image 3"></li>
</ul>
</div>
</div>
</div><br><br>
You can do following changes to obtain the similar result.
HTML
<div class="container-fluid">
<div class="col-md-12 col-xs-12 col-sm-12">
<div class="small-images">
<ul class="owl-carousel">
<li><img src="http://via.placeholder.com/100x100" class="image-text" title="image 1"></li>
<li><img src="http://via.placeholder.com/100x100" class="image-text" title="image 2"></li>
<li><img src="http://via.placeholder.com/100x100" class="image-text" title="image 3"></li>
</ul>
</div>
</div>
</div>
<br><br>
CSS
.small-images{
width:100%;
height:500px;
display: block;
background-image: url('https://s9.postimg.org/w3pkeix2n/Services.jpg')
}
.image-text{
margin: 10px;
}
.owl-carousel{
list-style-type: none;
}
JS
$(".owl-carousel").owlCarousel();
I need to change the background-image for a menu button once it is clicked but CSS :active property doesn't work for it, only for while it is being clicked, I need for it to stay as the image until they click it again.
HTML
<nav class="clearfix">
<div class="menu">
<ul style="list-style-type:none;">
<li>
Home
</li>
<li>
About
</li>
<li>
Before/After
</li>
<li>
Facilities
</li>
<li>
Contact
</li>
<li>
Staff
</li>
</ul>
</div>
<div class="site-wrapper">
<div class="header">
<a><div class="menu-trigger" title="Menu"></div></a>
</div>
</div>
<script src="testing.js" type="text/javascript">
</script>
</nav>
CSS
.menu-trigger {
background-image:url("http://download.seaicons.com/icons/custom-icon-design/flatastic-2/512/usb-icon.png");
background-position:center;
background-size:100% 100%;
background-repeat: no-repeat;
width:50px;
height:50px;
left: -150%;
transform:rotate(-135deg);
position:relative;
}
.menu-trigger:hover{
cursor: pointer;
}
JS
$('a .menu-trigger').on('click', function() {
$('.menu').toggleClass('open', 300, 'easeOutQuad');
});
change button background image on click using jquery-
check Snippet
$(document).ready(function() {
$(".menu-trigger").click(function() {
$(".menu-trigger").toggleClass("open")
})
})
.menu-trigger {
background-image:url("http://download.seaicons.com/icons/custom-icon-design/flatastic-2/512/usb-icon.png");
background-position:center;
background-size:100% 100%;
background-repeat: no-repeat;
width:50px;
height:50px;
left:0%;
transform:rotate(-135deg);
position:relative;
cursor:pointer
}
.open{
background-image:url("http://download.seaicons.com/icons/custom-icon-design/flatastic-2/512/help-desk-icon.png");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="site-wrapper">
<div class="header">
<a><div class="menu-trigger" title="Menu"></div></a>
</div>
</div>
Why not set the background image for each in a class, then just toggle?
.pre_click {
background-image:url(".../image_1.png");
}
.post_click {
background-image:url(".../image_2.png");
}
Then toggle
$('.menu').on('click', function() {
$('.menu').toggleClass('pre_click post_click')
})
Make sure you set the default class that you want applied to the 'menu' item so it will properly toggle.
I want to keep three blocks. the images in the middle blocks should be moving one after the other from right to left. How to achieve that.
<div class="logo-div">
<div class="logo-top">
<img src="{{media url="wysiwyg/logo_garage.png"}}" alt="">
</div>
<div class="logo-middle">
<ul>
<li><img src="{{media url="wysiwyg/logo1.png"}}" alt=""> </li>
<li><img src="{{media url="wysiwyg/logo2.png"}}" alt=""> </li>
<li><img src="{{media url="wysiwyg/logo3.png"}}" alt=""> </li>
<li><img src="{{media url="wysiwyg/logo4.png"}}" alt=""> </li>
</ul>
</div>
<div class="logo-bottom">
<img src="{{media url="wysiwyg/logo_vehicle.png"}}" alt="">
</div>
</div>
.logo-div{
max-width:300px;
margin:0 auto;
& ul li{
float:left;}
}
$(document).ready(function() {
$(".logo-middle li").show( "slide", {direction: "right" }, 2000 );
});
But inspite of above code the images in middle block in listed one below the other as it is given in list and there is no movement in it. Where have I went wrong. Please help me.
You can use the Cycle2-plugin (cycle2) to add a slideshow. There's a Continuous option which doesn't require any code, just add some data tags to your surrounding element. See Continuous on their Demo page.
I included a snippet which does exactly as they say. My styling isn't as fabulous as theirs, but hey. Not what you asked for :)
You could also branch of this fiddle to experiment with the library.
For further documentation about Cycle2, just see their demos
#gallery {
width: 100%;
border: 3px solid gray;
white-space: nowrap;
overflow-y: hidden;
}
#gallery img {
height: 200px;
margin-right: 15px;
display: inline-block;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://malsup.github.io/min/jquery.cycle2.min.js"></script>
<div id="gallery" class="cycle-slideshow cycle-autoinit"
data-cycle-fx="scrollHorz"
data-cycle-speed="3000"
data-cycle-timeout="1"
data-cycle-easing="linear"
>
<img src="http://cdn.sci-news.com/images/enlarge2/image_3725_2e-Jupiters-X-Ray-Aurora.jpg"/>
<img src="http://cdn.sci-news.com/images/enlarge2/image_3725_2e-Jupiters-X-Ray-Aurora.jpg"/>
<img src="http://cdn.sci-news.com/images/enlarge2/image_3725_2e-Jupiters-X-Ray-Aurora.jpg"/>
<img src="http://cdn.sci-news.com/images/enlarge2/image_3725_2e-Jupiters-X-Ray-Aurora.jpg"/>
<img src="http://cdn.sci-news.com/images/enlarge2/image_3725_2e-Jupiters-X-Ray-Aurora.jpg"/>
<img src="http://cdn.sci-news.com/images/enlarge2/image_3725_2e-Jupiters-X-Ray-Aurora.jpg"/>
</div>
I have two "boxes" in a sidebar with responsive widths. I need the headers to be sticky and the content scrollable. If I try to use position:fixed on the headers, I run into the issue where they lose their responsive width/background color.
Here's a jsfiddle of one of the boxes: http://jsfiddle.net/4tadzk7x/
HTML:
<aside class="sidebar col-xs-3 pull-right">
<div class="box-with-header queries">
<div class="header-fixed">
<h5 class="headline">Headline</h5>
</div>
<div class="content">
<ul class="item no-bullets red">
<li>Text Content</li>
<li>Text Content</li>
<li>Text Content</li>
</ul>
<hr />
<ul class="item no-bullets blue">
<li>Text Content</li>
<li>Text Content</li>
<li>Text Content</li>
</ul>
<hr />
<ul class="item no-bullets yellow">
<li>Text Content</li>
<li>Text Content</li>
<li>Text Content</li>
</ul>
<hr />
</div>
</div>
</aside>
Add this two classes:
.header-fixed{
position:fixed;
width:100%;
}
.content{
padding-top:45px;
}
Check JSFiddle Demo
Update:
If width isn't always 100% so you can simply move header div ans and modify your HTML code like this:
<aside class="sidebar col-xs-3 pull-right">
<div class="header-fixed">
<h5 class="headline">Headline</h5>
</div>
<div class="box-with-header queries">
<div class="content">
//content ...
</div>
</div>
</aside>
Check JSFiddle Demo
Use width: 100% and top: 0 on .header-fixed
Then this:
.box-with-header.queries {
max-height: 250px;
height: 250px;
margin-top: 3em;
}
FIDDLE
I am not sure if I understand your problem correctly. But if you want headers to be fixed and responsive. Give it position fixed and width 100%. That should do it.
Updated fiddle : http://jsfiddle.net/4tadzk7x/1/
.headline {
background: red;
padding: 10px;
margin: 0 0 8px 0;
text-transform: uppercase;
font-size: 13px;
position:fixed;
top:0;
width:100%;
}
You also need to add margin-top to content so that it doesn't overlap with the header.
div.content{
margin-top:40px;
}
I'm trying to get the jQuery scrollTo plugin to work horizontally, so I've put together a little jsfiddle.
http://jsfiddle.net/P9B5y/15/
Now, without the javascript, it simply replaces each image (img 1, img 2, etc), but once the jQuery is instituted it doesn't fire.
Any help would be greatly appreciated!
Based on your comment:
I would live each id="image#" to
scroll horizontally, and replace,
rather than just replacing. Like so;
jsfiddle.net/P9B5y, except there would
be a cut-off, that would only allow
one id to be shown at one particular
time, as oppose to some waiting
I don't believe the scrollTo plugin is what you want. I believe what you want is to create a viewport, and animate a list behind the viewport, like this http://jsfiddle.net/7SLrL/1/:
HTML:
<div id="viewport">
<ul>
<li>
<img src="http://www.digital-photography-school.com/wp-content/uploads/2007/11/flower.jpg" />
</li>
<li>
<img src="http://media2.teenormous.com/items/www.uneetee.com/product_images-d-775-HiddenAnimals__39659_std.jpg" />
</li>
<li>
<img src="http://media1.teenormous.com/items/media.80stees.com/images-products-Ladies-Slim-Fit-Animal-Shirt.jpg" />
</li>
<li>
<img src="http://astorenet.com/wp-content/uploads/2011/04/wpid-67-petrol-rc-car.jpg" />
</li>
</ul>
</div>
<div id="nav">
<ul>
<li>
<img src="http://www.digital-photography-school.com/wp-content/uploads/2007/11/flower.jpg" />
</li>
<li>
<img src="http://media2.teenormous.com/items/www.uneetee.com/product_images-d-775-HiddenAnimals__39659_std.jpg" />
</li>
<li>
<img src="http://media1.teenormous.com/items/media.80stees.com/images-products-Ladies-Slim-Fit-Animal-Shirt.jpg" />
</li>
<li>
<img src="http://astorenet.com/wp-content/uploads/2011/04/wpid-67-petrol-rc-car.jpg" />
</li>
</ul>
</div>
JQuery
$('#nav li').click(function(){
var _this = $(this);
$('#viewport ul').animate({
left: -1* _this.index() * $('#viewport ul li').eq(_this.index()).children('img').width()
},500);
});
CSS:
#viewport {
width:350px;
height:350px;
overflow:hidden;
margin-bottom:10px;
border:1px solid #000;
}
#nav {
width:350px;
height:40px;
}
#viewport ul {
padding:0;
margin:0;
width:1400px; /* 350px per photo * 4 photos*/
position:relative;
}
#viewport img {
width:350px;
height:350px;
}
#nav img {
width:40px;
height:40px;
cursor:pointer;
}
li {
float:left;
}