slide show in div in specific size - javascript

I have div and i add some images to it to slide show but part of image appear not all image,i change the width and height for image but still probleme what is the reasone this is snippt from my code:
<link href="./CSS/js-image-slider.css" rel="stylesheet" type="text/css" />
<script src="./js/js-image-slider.js" type="text/javascript"></script>
<div id="slider" width=100px height=100px>
<img src="./images/Health Care 2.jpg" alt="Health" width: 100px;
height: 100px; />
<img src="./images/war.jpg" alt="War" width: 100px;
height: 100px;/>
<img src="./images/food.jpg" alt="Food" width: 100px;
height: 100px; />
<img src="./images/education-it-hardware-579.jpg" alt="Education" width: 100px;
height: 100px;/>
<img src="./images/sport.jpg" alt="Sport" width: 100px;
height: 100px; />
<img src="/images/technology.jpg" alt="Technology" width: 100px;
height: 100px;/>
</div>
this css:
/* http://www.menucool.com */
#sliderFrame {position:relative;width:700px;margin: 0 auto;} /*remove the "margin:0 auto;" if you want to align the whole slider to the left side*/
#ribbon {width:111px;height:111px;position:absolute;top:-4px;left:120px;background:url(ribbon.png) no-repeat;z-index:7;}
#slider {
width: 250px;
height: 170px;/* Make it the same size as your images */
background:#fff url(loading.gif) no-repeat 50% 50%;
position:relative;
margin:0 auto;/*make the image slider center-aligned */
box-shadow: 0px 1px 5px #999999;
}
#slider img {
position:absolute;
border:none;
display:none;
}
/* the link style (if an image is wrapped in a link) */
#slider a.imgLink {
z-index:2;
display:none;position:absolute;
top:0px;left:0px;border:0;padding:0;margin:0;
width:100%;height:100%;
}
/* Caption styles */
div.mc-caption-bg, div.mc-caption-bg2 {
position:absolute;
width:100%;
height:auto;
padding:0;
left:0px; /*if the caption needs to be aligned from right, specify by right instead of left. i.e. right:20px;*/
bottom:0px;/*if the caption needs to be aligned from top, specify by top instead of bottom. i.e. top:150px;*/
z-index:3;
overflow:hidden;
font-size: 0;
}
div.mc-caption-bg {
background-color:black;
}
div.mc-caption {
font: bold 14px/20px Arial;
color:#EEE;
z-index:4;
padding:10px 0;/*Adding a padding-left or padding-right here will make the caption area wider than its background. Sometimes you may need to define its width again here to keep it the same width as its background area (div.mc-caption-bg).*/
text-align:center;
}
div.mc-caption a {
color:#FB0;
}
div.mc-caption a:hover {
color:#DA0;
}
/* ------ built-in navigation bullets wrapper ------*/
div.navBulletsWrapper {
top:460px; left:180px; /* Its position is relative to the #slider */
width:150px;
background:none;
padding-left:20px;
position:relative;
z-index:5;
cursor:pointer;
}
/* each bullet */
div.navBulletsWrapper div
{
width:11px; height:11px;
background:transparent url(bullet.png) no-repeat 0 0;
float:left;overflow:hidden;vertical-align:middle;cursor:pointer;
margin-right:11px;/* distance between each bullet*/
_position:relative;/*IE6 hack*/
}
div.navBulletsWrapper div.active {background-position:0 -11px;}
/* --------- Others ------- */
#slider
{
transform: translate3d(0,0,0);
-ms-transform:translate3d(0,0,0);
-moz-transform:translate3d(0,0,0);
-o-transform:translate3d(0,0,0);
}

You're syntax is wrong.
It's either:
width="100px" height="100px"
or
style="width:100px; height:100px;"

Initially you have to remove both (width and height) as "menucool" scripts smart enough to normalize images, now in the css// he provided you that
/* Make it the same size as your images */ ,,
because if you follow the js you will find that all the animation calculations depends on the width and height ,,
so try to use images with 100px * 100px without manual css and update #slider css
#slider {
width: 100px;
height: 100px;/* Make it the same size as your images */
background:#fff url(loading.gif) no-repeat 50% 50%;
position:relative;
margin:0 auto;/*make the image slider center-aligned */
box-shadow: 0px 1px 5px #999999;
}
look this is the orginal html you used
<div id="sliderFrame">
<div id="ribbon"></div>
<div id="slider">
<img src="jsImgSlider/images/image-slider-1.jpg" alt="Welcome to Menucool Image Slider" />
<img src="jsImgSlider/images/image-slider-2.jpg" alt="" />
<img src="jsImgSlider/images/image-slider-4.jpg" alt="Pure Javascript. No jQuery. No flash." />
<img src="jsImgSlider/images/image-slider-5.jpg" alt="#htmlcaption" />
</div>
</div>

Related

HTML Split SINGLE BACKGROUND IMAGE into two equal links (top and bottom)

I am just learning HTML. Is there a way without using image mapping to split a background image into 50-50%, with each half linking to an external link? I put style=0% and 50% to split the links into the top 50% and bottom 50%, but it doesn't split the image in two.
This is what I have:
<!DOCTYPE html>
<html>
<head>
<title>Page 2</title>
<link href="https://fonts.googleapis.com/css?family=Proxima+Nova" rel="stylesheet">
</head>
<body>
<div class="image">
<center><img src="{% static 'picture.png' %}" alt="image" /></center>
</div>
</body>
</html>
Thanks in advance!
Just put the img as a background-image via css, then position the links on top of a container with that background-image:
.split-link-image {
height: 400px;
background: transparent url(http://placekitten.com/400/400) no-repeat 0 0;
background-size: cover;
width: 400px;
position: relative;
}
.split-link-image a {
position: absolute;
left: 0;
right: 0;
height: 50%;
display: block;
}
.split-link-image a:first-child {
top: 0;
}
.split-link-image a:last-child {
bottom: 0;
}
<div class="split-link-image">
</div>
This is a simple sample:
<div style="position: relative; width:500px; height:500px; background-color: #667799">
<a style="display: inline-block; position: absolute; top:0; left:0; height:50%; width:100%; box-sizing: border-box; border:solid 1px red" href="addr1"></a>
<a style="display: inline-block; position: absolute; top:50%; left:0; height:50%; width:100%; box-sizing: border-box; border:solid 1px orange" href="addr2"></a>
</div>
My wrapper is div and i use background-color for wrapper of links ;you must use background-image:url(imageAdress);
Also you don't need border of a tags.
I have created something that does what you are looking for. It has the following limitations:
You need to know the height of the image you are using in pixels and code the top half to be exactly half that many. When I use % instead, I wind up with the top link being bigger than the bottom. I didn't do much playing around to try and get around that.
The image actually is loaded twice, so if your images are very big, this may be a concern for you.
* {
margin: 0px;
padding: 0px;
}
.top {
height: 200px;
overflow: hidden;
position: absolute;
z-index: 2;
}
.bottom {
position: absolute;
}
<a class="top" href="https://www.google.com"><img src="https://placeholdit.co//i/400x400" /></a>
<a class="bottom" href="https://www.cnn.com"><img src="https://placeholdit.co//i/400x400" /></a>

Centering link with image that have 100% height in a table cell (navigation buttons)

I'm trying to make classic navigation bar that takes 20% of screen width with 3 buttons. I want an icon on every button that should be centered vertically and horizontally. Also, this button should be clickable on 100% its size. Here is how my design looks:
But when I set height of <a> tag to 100% my icons are shifted to the upper border of the button. When <a> tag doesn't have height:100% it doesn't takes 100% of my table cell. Here is my HTML:
<div id="vertical-navigation">
<table class="navigation-table">
<tbody data-bind="foreach: router.navigationModel">
<tr>
<td class="navigation-item">
<img class="navigation-image" src="http://jsfiddle.net/img/logo.png"/>
</td>
</tr>
<tr>
<td class="navigation-item">
<img class="navigation-image" src="http://jsfiddle.net/img/logo.png"/>
</td>
</tr>
<tr>
<td class="navigation-item">
<img class="navigation-image" src="http://jsfiddle.net/img/logo.png"/>
</td>
</tr>
</tbody>
</table>
</div>
and CSS:
html, body, #vertical-navigation {
height: 100%;
}
#vertical-navigation
{
width:19%;
float:left;
min-height: 100%;
border-right: 2px solid #082037;
background-color: #023a6f;
}
.navigation-table{
height: 100%;
width: 100%;
}
.navigation-image{
display: block;
margin: 0 auto;
width:67%;
}
table{
border:0px; /* border="0" */
border-collapse:collapse; /* cellspacing="0" */
}
.navigation-button
{
background:none;
border:none;
font-size:1em;
color:blue;
}
a {
display:block;
}
.active {
background-color: #044889;
}
.navigation-item
{
box-shadow: inset 0px 0px 11px -1px rgba(0,0,0,0.7);
background-position: center;
background-repeat: no-repeat;
background-size: 67%;
}
Here is my shortened code in jsfiddle - http://jsfiddle.net/638DL/
But somewhy in jsfiddle height:100% for <a> doesn't works. Anyway, what can I try to do this?
If you need to to have the icons as inline images and want vertical align, you can do this:
FIDDLE
css
.navigation-image{
display:inline-block;
margin: 0 auto;
width:67%;
vertical-align:middle;
}
.navigation-item a {
float:left;
height:100%;
width:100%;
text-align:center;
}
.navigation-item a:before {
content:"";
display:inline-block;
height:100%;
vertical-align:middle;
}
** What I did was basically vertical align the IMG with a pseudo element so it will always center.
How about this:
http://jsfiddle.net/UjLq2/
Basically I removed the image tags, set the A to block and it's width/height to 100%:
This makes the link use the full space - you can click anywhere to trigger it.
Then set the image from the removed image-tag as background-image:
a {
display: block;
height: 100%;
width: 100%;
box-shadow: inset 0px 0px 11px -1px rgba(0,0,0,0.7);
background-image: url(http://jsfiddle.net/img/logo.png);
background-position: center;
background-repeat: no-repeat;
background-size: 67%;
}
Edit:
On your question:
"But somewhy in jsfiddle height:100% for doesn't works. Anyway, what can I try to do
this?"
This is because A is an inline element. As such, you cannot set neither width nor height. If you convert it to a block element, using "display: block", you can then set width/height along with everything else that can be set on block-elements only.

How to make slider take 100% of container with JavaScript?

I've taken the slider from here: http://projects.craftedpixelz.co.uk/craftyslide/
And I want the slider to take 100% width of its container instead of the set pixel amount it allows for. How would I accomplish this?
More preferably it would just be bound by its container, so if its container had a width or height of 300 it could have no more than that.
As ProllyGeek said you may do what he said ..... or do the other way around like this changing many things in ur downloaded files
In the css do this
Craftyslide CSS Styles
#container{
position:absolute;
width:80%;
height:60%;
top:10%;
left:10%;
}
#slideshow {
width:100%;
height:100%;
margin:0;
padding:0;
position:absolute;
border:15px solid #fff;
-webkit-box-shadow:0 3px 5px #999;
-moz-box-shadow:0 3px 5px #999;
box-shadow:0 3px 5px #999;
}
#slideshow ul {
width:100%;
position:relative;
overflow:hidden;
margin:0;
padding:0;
}
#slideshow ul li {
position:absolute;
width:100%;
top:0;
left:0;
margin:0;
padding:0;
list-style:none;
}
#pagination {
clear:both;
width:75px;
margin:25px auto 0;
padding:0;
}
#pagination li {
list-style:none;
float:left;
margin:0 2px;
}
#pagination li a {
display:block;
width:10px;
height:10px;
text-indent:-10000px;
background:url(../images/pagination.png);
}
#pagination li a.active {
background-position:0 10px;
}
.caption {
width:100%;
margin:0;
padding:10px;
position:absolute;
left:0;
font-family:Helvetica, Arial, sans-serif;
font-size:14px;
font-weight:lighter;
color:#fff;
border-top:1px solid #000;
background:rgba(0,0,0,0.6);
}
in the craftyslide js change
var defaults = {
"width":"100%",
"height":"100%",
"pagination": true,
"fadetime": 350,
"delay": 5000
};
In your html
<div id="container">
<div id="slideshow">
<ul>
<li>
<img src="http://farm6.static.flickr.com/5270/5627221570_afdd85f16a_z.jpg" alt="" title="Light Trails" />
</li>
<li>
<img src="http://farm6.static.flickr.com/5146/5627204218_b83b2d25d6_z.jpg" alt="" title="Bokeh" />
</li>
<li>
<img src="http://farm6.static.flickr.com/5181/5626622843_783739c864_z.jpg" alt="" title="Blossoms" />
</li>
<li>
<img src="http://farm6.static.flickr.com/5183/5627213996_915aa49939_z.jpg" alt="" title="Funky Painting" />
</li>
<li>
<img src="http://farm6.static.flickr.com/5182/5626649425_fde8610329_z.jpg" alt="" title="Vintage Chandelier" />
</li>
</ul>
</div>
</div>
in your craftyslide min
var defaults={"width":"100%","height":"100%","pagination":true,"fadetime":350,"delay":5000}
Cant get exactly what you want but hope this helps .....
// Width
$this.width(options.width);
$this.find("ul, li img").width(options.width);
// Height
$this.height(options.height);
$this.find("ul, li").height(options.height);
after you download the files , open the Source js , scroll to end of file
change this line:
$this.width("100%");
Edit:
Actually if you try :
$("#slideshow").craftyslide({ 'width': '100%'});
it will work , i dont get what exactly is your problem , maybe you need to review the options :
width (number)
Set a custom width for your slideshow.
height (number)
Set a custom height for your slideshow
pagination (true/false)
Select whether to display pagination or not. Setting to false hides
pagination and enables auto mode.
fadetime (number)
Define the fade animation speed of slides.
delay (number)
Used during auto mode (pagination set to false). Defines the delay
between each slide being shown.
Options example:
Example showing multiple options
$("#slideshow").craftyslide({ 'width': 640, 'height': 400,
'pagination': false, 'fadetime': 500, 'delay': 2500 });

css position tricks for website header

please check this:
i am doing responsive web design and i have 100% with image slider. if i re-size my browser slider image height will change.
both slider and navigation wrap in my header, so i need to get header height when i responsive.
and also i need to both (navigation , and slider ) top:0px;
i think you can get some idea what i try to say.
<header>
<nav> <!-- my header main menu goes here --> </nav>
<div class="slider">
<!-- slider images goes here -->
</div>
</header>
<div class="content">
</div>
<footer>
</footer>
do this in css:
html,body{
height:100%;
}
header{
background:blue;
height: 100%;
/*padding-bottom: 120px;*/ //<---remove this
}
nav{
position:relative;
top: 0;
width: 960px;
margin: 0 auto;
z-index: 2;
background: red;
height: 50px;
}
.slider{
width:98%
position:absolute;
top: 0;
margin: 0 auto;
z-index: 1;
background: green;
height: 100%;
}
Try this

How to insert slideshow controllers into a div properly using DOM

I'm trying to insert the left and right controllers on the two ends of my slideshow div via the DOM such that they are on the opposite ends of the slideshow div
So far I've only gotten them either to display in the top corners of the browser window (Using top: 0; left: 0 and top: 0; right: 0 for the right and left controller id's style formatting) or where the left controller displays where it should, but the right controller displays directly below the left controller rather than on the opposite side of the slideshow div (I did this by changing the right and left controller styles to float in place of the previous formatting that I just mentioned)
I feel like it might have something to do with the styling, but I could be horribly wrong.
Anyone have any ideas?
HTML:
<div id="pageContainer">
<!-- Slideshow HTML -->
<div id="slideShow" style="border-style: solid; border-color: red; border-width: 1px;">
<div id="slidesContainer" style="border-style: solid; border-color: yellow; border-width: 1px;">
<div class="slide">
<h2>Web Development With PHP</h2>
<p><img src="newphp.JPG" alt="Screen capture of PHP built website" width="215" height="145" /></p>
</div>
<div class="slide">
<h2>Database Design with MySQL Workbench</h2>
<p><img src="Patient_Database_Snapshot.JPG" width="215" height="145" alt="MySQL Workbench Database Design Snapshot" /></p>
</div>
<div class="slide">
<h2>Web Design With CSS and HTML</h2>
<p><img src="webdesign.JPG" width="215" height="145" alt="Screen capture of Brian Houlhan's CSS webpage" /></p>
</div>
</div>
</div>
<!-- Slideshow HTML -->
</div>
CSS:
/*
* Slideshow style rules.
*/
#slideShow {
margin:0 auto;
width:640px;
height:263px;
background:transparent url(bg_slideshow.jpg) no-repeat 0 0;
position:relative;
}
#slideShow #slidesContainer {
margin:0 auto;
width:560px;
height:263px;
overflow:auto; /* allow scrollbar */
position:relative;
}
#slideShow #slidesContainer .slide {
margin:0 auto;
width:540px; /* reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */
height:263px;
}
/**
* Slideshow controls style rules.
*/
.control {
display: block;
width: 39px;
height:263px;
text-indent:-10000px;
position: absolute;
cursor: pointer;
}
#leftControl {
float: left;
/*
top: 0;
left: 0;
*/
background:transparent url(control_left.jpg) no-repeat 0 0;
}
#rightControl {
float: right;
/*
top: 0;
right: 0;
*/
background:transparent url(control_right.jpg) no-repeat 0 0;
}
Javascript (Running in HTML document):
// Insert controls in the DOM
$('#slideShow')
.prepend('<span class="control" id="leftControl">Clicking moves left</span>')
.append('<span class="control" id="rightControl">Clicking moves right</span>');
This should work just fine:
#slideshow{
position:relative;
}
#leftControl{
float:none;
top:0;
left:0;
}
#rightControl{
float:none;
top:0;
left:0;
}
of course you dont need to add the float none, you could just simply remove the float:left and float:right that is currently on those elements.
When the controls are positioned with absolute positioning -
.control {
display: block;
width: 39px;
height:263px;
text-indent:-10000px;
position: absolute;
cursor: pointer;
}
#leftControl {
top: 0;
left: 0;
background:#ff0000;
}
#rightControl {
top: 0;
right: 0;
background:#ffcc00;
}
I am not seeing an error in how it is being displayed. If you look here http://jsfiddle.net/CERFY/ it looks correct. Is there some other markup that could be affecting this, that maybe you had a live example to show?

Categories