I am trying to add a rhino slider to my website which will fade in and out of multiple images at full screen size. The rhinoslider I am using is: Rhinoslider I can get this so the slider works but in doing so it pushes the other divisions underneath the slider further down the page where they shouldn't be.
The code:
HTML:
<head>
<link rel="stylesheet" href="css/main.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/rhinoslider-1.05.css" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="js/rhinoslider-1.05.min.js"></script>
<script type="text/javascript" src="js/mousewheel.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#slider').rhinoslider({
effect: 'fade',
controlsMousewheel: false,
controlsKeyboard: false,
controlsPrevNext: false,
controlsPlayPause: false,
autoPlay: true,
pauseOnHover: false,
showBullets: 'never',
showControls: 'never'
});
});
</script>
</head>
<body>
<div class="CVHeader">
<ul id="slider">
<li><img src="images/CVHeader.jpg"/></li>
<li><img src="images/hmb-header-image.jpg"/></li>
</ul>
</div>
<div id="expertisediv">
<div class="largeshape1">
<img src="images/largeshape1.jpg"/>
</div>
</div>
</body>
main CSS:
.CVHeader {
width:100%;
height:auto;
}
#slider li {
list-style:none;
}
#slider{
width:100%;
height:auto;
padding:0;
margin:0;
}
#expertisediv {
width:100%;
height:auto;
background-color:#FFFFFF;
padding-bottom:8%;
float:left;
}
.largeshape1 {
width: 19.3%;
height:auto;
min-height: 120px;
max-height:auto;
padding-top:4.5%;
float:left;
}
Any help appreciated.
Here is a quick Fiddle of your code above, obviously using some different images.
I can only assume either your slider or other code somewhere in your page is breaking the site, because you can see here, the lower DIV is not being pushed down that far, just the padding % that is specified in your CSS.
padding-top:4.5%;
http://jsfiddle.net/1g8gha62/
Maybe try to edit that padding value to a specific pixel value instead of percent? just a thought.
Related
I am currently creating my webpage using HTML/CSS with the addition of Javascript slick slider. I am currently using the regular slider code for my gallery tab, however, my previous arrow button (.slick-prev:before) is submerged behind my div class "slider_1", with my .slick-next:before arrow working how it should be comfortably sitting outside of the div.
I have added margin and padding to .slick-prev:before however it only pushes the arrow further out of sight within the div.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Photography</title>
<link href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah" rel="stylesheet">
<link href="styles.css" type="text/css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
<style type="text/css">
html, body
{
margin: 0;
padding: 0;
}
.slick-slide
{
margin: 0px 0px 0px 60px;
}
.slick-prev:before,
.slick-next:before
{
color: black;
}
</style>
</head>`
`<div class="slider_1">
<div><img src="twitter.png" width="400px" height="400px">Photo1</div>
<div><img src="twitter.png" width="400px" height="400px">Photo2</div>
<div><img src="twitter.png" width="400px" height="400px">Photo3</div>
<div><img src="twitter.png" width="400px" height="400px">Photo4</div>
</div>
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="./slick/slick.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.slider_1').slick({
dots: true,
infinite: true,
slidesToShow: 3,
slidesToScroll: 3
});
});
</script>
I would like to be able to have my previous arrow outside of the slider div to become operable. as currently the arrow simply sits behind my images inside the slider not serving any purpose.
Understanding:
Having read your question, I feel your experiencing layer problems, in that your next and previous buttons are hidden behind other web elements.
Solution:
We can write some CSS that tells it to alter the layer position to a higher layering number, to do this we use CSS using the Z-Index property and assign a high number such as 99 to ensure it sits above all other elements on the webpage.
To use z-index we must specify a position property with the value of fixed, absolute or relative.
In my example, I have used the relative value, so that it doesn't tamper with where the arrows were originally positioned.
Code to try:
.slick-prev, .slick-next{
position: relative;
z-index:99 !important;
}
However, if you find that the code only affects 1 of your sliders, then you might want to add an ID to the sliders HTML and write your CSS as follows:
#slider_1.slick-prev, #slider_1.slick-next{
position: relative;
z-index:99 !important;
}
Then alter the affected slider's HTML to have the ID in it also
<div class="slider1" id="slider1">
jQuery functions like .hide(),.fadeIn(),.fadeOut() are not properly working after giving the transition duration property.
example : hide(2000) then after 2 second it is hiding but the animation is not getting applied and it is the common problem i am having with all the jQuery functions
if i delete the transition-duration then all working with animation. Why this is happening? Someone explain it to me and also give solution to solve this problem
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> Opening Sequence </title>
<link rel="stylesheet" href="open.css">
<script src="jquery.js"></script>
<script src="open.js"></script>
</head>
<body>
<br><br>
<section id="container">
<p id="content"> This is cool </p>
</section>
</body>
</html>
CSS
#charset "utf-8";
/* CSS Document */
#container
{
width:600px;
height:600px;
margin:0 auto;
border:1px solid red;
line-height:500px;
}
#content
{
font-weight:bold;
font-family:Verdana, Geneva, sans-serif;
font-size:20px;
text-align:center;
transition-duration:3s;
}
JS
$(document).ready(function()
{
//alert("Application has been started");
$i=0;
var ob=$('#content');
ob.slideUp(4000);
//ob.hide(2000);
});
problem is after 4 seconds it is hiding but not sliding up, in the sense not animating like hiding from the down to the top
I'm trying to create a full width, fixed-height, carousel image-slider for the home page of a website that I'm working on.
That is, where the images are scaled to a fixed-height (matching the carousel height (the width doesn't matter)) which scales responsively as the page itself does.
However, I want my slider to be of lighter weight/ greater simplicity.
Here is my code thus far:
(here is the head)
<head>
<!-- Flex Slider API JS -->
<link rel="stylesheet" href="flexslider.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="jquery.flexslider.js"></script>
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide",
animationLoop: false,
itemWidth: 360,
itemMargin: 5,
minItems: 2,
maxItems: 4
});
});
</script>
<!-- End of FlexsliderAPI JS -->
</head>
Here is the body:
<body>
<!-- Placement of Flex Slider -->
<div class="flex-container">
<div class="flexslider">
<ul class="slides">
<li>
<img src="../../local/images/slide1.JPG" />
</li>
<li>
<img src="../../local/images/slide2.JPG"/>
</li>
<li>
<img src="../../local/images/slide3.JPG" />
</li>
<li>
<img src="../../local/images/slide 5.jpg" />
</li>
</ul>
</div>
</div>
<!-- End placement of FlexSlider -->
</body>
And here is the CSS:
.flex-container {
width: 100%;
height: 300px;
}
background-color: red;
.flex-container ul {
margin: 0px;
padding: 0px;
}
.flex-container li {
list-style: outside none none;
display: inline;
}
.flexslider .slides img {
width: inherit;
max-height: inherit;
}
Thanks a ton for the help. - Cody
not snapping to height bounds
I don't see anything in flexslider that does anything with the height. Make sure all the elements are the same height, either by creating similarly sized thumbnails or enforcing a height with CSS. You might need to remove the itemWidth configuration to avoid stretching.
not displaying navigation
Your HTML is missing the navigation elements. I think you need to configure it; pass the navigation options:
controlNav: true,
directionNav: true,
prevText: "Previous",
nextText: "Next",
The configuration offercard uses is:
slideshowSpeed:7000,
animation:'slide',
controlNav:true,
directionNav:true,
pauseOnHover:true,
direction:'horizontal',
reverse:false,
animationSpeed:2000,
prevText:"< PREV",
nextText:"NEXT >",
easing:"linear",
slideshow:true,
itemWidth:800,
minItems:1,
itemMargin:0
i have the following code using which i implement effects on an image using javascript.
the effect is like when an user hovers on the main image then the over1 and over2 are the two images which gets overlayed on it providing decent information.
now my problem is-- the code i got is for only single images.
when i am implementing it on gallery of images then even i hover on only one image still all images get overlayed with their information.
i need help regarding that if i hover on then other images shouldn't be displaying their info only one should be active.
i also need to know how should i store my images in folders. so far i had decided to make one for main images and other for overlaying images.
my code is
<html>
<head>
<link href="css/overlaycss.css" rel="stylesheet" />
<script src="js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".main").mouseenter(function() {
$(".overlay").show();
});
$(".main").mouseleave(function() {
$(".overlay").hide();
});
$(".main").mouseenter(function() {
$(".overly").show();
});
$(".main").mouseleave(function() {
$(".overly").hide();
});
});
</script>
</head>
<body style="margin:0px; padding-top:0px">
<ul>
<li>
<a href="">
<img class="main" src="image/productold.JPG" />
<img class="overlay" src="image/overlay/over1.jpg"/>
<img class="overly" src="image/overlay/over2.jpg"/>
</a>
</li>
<li>
<a href="">
<img class="main" src="image/productold.JPG" />
<img class="overlay" src="image/overlay/over1.jpg"/>
<img class="overly" src="image/overlay/over2.jpg"/>
</a>
</li>
</ul>
</body>
</html>
css is--
li{
position:relative;
float:left;
padding-left:5px;
}
.main {
width:200px;
height:200px;
}
.overlay
{
position:absolute;
height:50px;
width:150px;
top:0;
left:0;
display:none;
}
.overly
{
position:absolute;
height:50px;
width:150px;
bottom:0;
right:0;
display:none;
}
For displaying hover images on individual images try this:-
$(document).ready(function() {
$("ul li").mouseenter(function() {
$(this).find(".overlay").show();
$(this).find(".overly").show();
});
$("ul li").mouseleave(function() {
$(this).find(".overlay").hide();
$(this).find(".overly").hide();
});
});
I have a design in mind that involves a split panel view in html, similar to a winforms split panel. I've been expirimenting with jQuery UI - Resizable and I like the function, I just can't seem to co-ordinate the resizing of the two divs. The problem with the current code is that the two divs resize away from each other, not with one following the other. How can I make the two divs work together?
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="css/custom.css" />
<link rel="stylesheet" type="text/css" href="css/superfish.css" media="screen">
<link rel="stylesheet" type="text/css" href="css/jquery-ui-1.8.10.custom.css" media="screen">
<script type="text/javascript" src="script/jquery-1.5.1.js"></script>
<script type="text/javascript" src="script/superfish.js"></script>
<script type="text/javascript" src="script/jquery-ui-1.8.10.custom.min.js"></script>
<script type="text/javascript">
// initialise plugins
$(function(){
try {
$('ul.sf-menu').superfish();
//set up divs
$('#Content').resizable({ handles: 'e', alsoResize: $('#Attributes')});
}catch(ex){
alert(ex.message);
}
});
</script>
</head>
<body>
<div id="Header">
<div id="Menu">
<ul class="sf-menu" id="nav">
<!-- Snip menu -->
</ul>
</div>
</div>
<div id="Middle">
<div id="Content" class="ui-widget-content">This is where the view is.<br/>
Imagine an image here ...
<br/>
<br/>
<br/>
</div>
<div id="Attributes" class="ui-widget-content">
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</div>
</div>
<div id="FootBreak"/>
<div id="Footer">
Help
</div>
</body>
</html>
I have worked out a reasonable hack, using the resize event.
<script type="text/javascript">
var WIDTH_ATTR = 'initWidth';
// initialise plugins
$(function(){
try {
$('#Content').resizable({ handles: 'e', resize: resizeAttr });
$('#Content').attr(WIDTH_ATTR, $('#Content').width());
$('#InfoPanel').attr(WIDTH_ATTR, $('#InfoPanel').width());
}catch(ex){
alert(ex.message);
}
});
function resizeAttr(event, ui){
var change = ui.size.width - $('#Content').attr(WIDTH_ATTR);
$('#InfoPanel').width($('#InfoPanel').attr(WIDTH_ATTR) - change);
};
</script>
I'm still open to cleaner answers from others...
I am not sure if this meets the requirements, but ExtJS handles split panes with ease and works cross-browser. For example, see this RSS feed client in ExtJS. Be aware the ExtJS has commercial licensing restrictions if your intent is to sell your product.
Here is an example with a horizontal split (one top div, one bottom div), maybe slightly more minimalistic:
HTML:
<html>
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div id="div1">1st</div>
<div id="div2">2nd</div>
</body>
</html>
CSS:
#div1, #div2 {
position: absolute;
left: 0;
right: 0;
outline: solid 1px #ccc; /* just for making the divs visible */
margin: 5px; /* just for making the divs visible */
}
#div1 {
height: 100px;
top: 0;
}
#div2 {
top: 110px;
bottom: 0;
}
JavaScript:
$('#div1').resizable({
handles: 's',
resize: resizeEventHandler
});
function resizeEventHandler(event, ui){
var new_height = ui.size.height;
$('#div2').css('top', new_height + 10);
}
See demo here.