So this could be a possibly very simple problem but I'm having a mind block at the moment. I'm trying to integrate this code with my website, but due to the image being a background layer I can't have it appear above other elements on the page.
So is there a way to code the background-image within the HTML instead of CSS so it can be given a z-index property so it stacks on-top of other elements?
The code is as follows below in it's simplest form
(Left out something, should work now).
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<link href="home%20css.css" rel="stylesheet" type="text/css"/>
<script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="http://static.tumblr.com/jvojroo/DIamwjvp3/jquery.caroufredsel-6.2.0-packed.js" type="text/javascript"></script>
<script src="https://raw.github.com/jasonenglish/jquery-flex/master/jquery.flex.js"></script>
<script type="text/javascript">
$(function() {
$(".button0").flex();
});
</script>
<style type="text/css">
.button0 {
position:relative;
width:850px;
min-height:300px;
}
.button0 a {
width:100px;
height:100px;
position:absolute;
background-repeat:no-repeat;
background-position:center;
}
[bb=a] {background-image: url(http://farm8.staticflickr.com/7013/6448917381_0b754e86fb_z.jpg);
position: absolute;
z-index: 100;
}
/* [bg=b] {background-image:url(http://farm9.staticflickr.com/8156/7362866426_bf285ebd45.jpg);background-size:300px auto;}
[bg=c] {background-image:url(http://farm6.staticflickr.com/5117/7410370290_0935419fc3.jpg);}
[bg=d] {background-image:url(http://farm8.staticflickr.com/7262/7419245080_bb752ed1d6.jpg);}
[bg=e] {background-image:url(http://farm8.staticflickr.com/7003/6468321069_3375be3073_z.jpg);background-size:auto 280px;}
[bg=f] {background-image:url(http://farm8.staticflickr.com/7220/7342556872_46cddaf9b0.jpg);background-size:auto 280px;}
[bg=g] {background-image:url(http://farm9.staticflickr.com/8021/7322604950_348c535903.jpg);background-size:auto 200px;}
[bg=h] {background-image:url(http://farm8.staticflickr.com/7076/7286717012_6e6b450243.jpg);}
[bg=i] {background-image:url(http://farm8.staticflickr.com/7129/7452167788_a3f6aa3104.jpg);background-size:auto 200px;}
[bg=j] {background-image:url(http://farm8.staticflickr.com/7153/6480022425_a8d419e663_z.jpg);background-size:auto 280px;}
[bg=k] {background-image:url(http://farm8.staticflickr.com/7225/7269592732_c4b7918626.jpg);background-size:auto 280px;} */
</style>
<body>
<div class="button0">
<a bb="a" style="left:0px;top:0px;width:10%;height:140px;" width="145%" height="140"></a>
<!--<a bg="b" style="left:260px;height:100px;top:0px;width:125px;" width="250" height="175">B</a>
<a bg="c" style="left:395px;height:250px;top:0px;width:75px;" width="125" height="350">C</a>
<a bg="d" style="left:480px;height:75px;top:0px;width:75px;" width="175" height="150">D</a>
<a bg="e" style="left:565px;height:125px;top:0px;width:200px;" width="200" height="250">E</a>
<a bg="f" style="left:480px;height:200px;top:85px;width:75px;" width="150" height="225">F</a>
<a bg="g" style="left:0px;height:100px;top:135px;width:75px;" width="305" height="150">G</a>
<a bg="h" style="left:260px;height:75px;top:110px;width:125px;" width="200" height="200">H</a>
<a bg="i" style="left:85px;height:140px;top:135px;width:165px;" width="200" height="140">I</a>
<a bg="j" style="left:565px;height:150px;top:135px;width:75px;" width="125" height="275">J</a>
<a bg="k" style="left:650px;height:75px;top:135px;width:75px;" width="75" height="200">K</a> -->
</div>
</body>
First, set your background using the body background tag:
<body background="http://farm8.staticflickr.com/7013/6448917381_0b754e86fb_z.jpg" id=bkgrnd>
Then, use a script to set the z-index:
<script>
function changeStackOrder()
{
document.getElementById("bkgrnd").style.zIndex="1";
}
</script>
Related
I've downloaded and implemented the Nivo Slider on my website. Since implementing it, I've found a few bugs, but I'm looking for help with getting my caption centered on the screen.
Margin:auto usually works for this to ensure a div is always centered (I think..) - but I can't get it to work with my site..
My HTML:
<!DOCTYPE html>
<html>
<head>
<title>Max Klimmek - Portfolio, Clothing, Travel</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="fonts/font-awesome-4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/nivo-slider.css" type="text/css" />
<script src="script/jquery.nivo.slider.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script>
<script src="script/jquery.nivo.slider.pack.js" type="text/javascript"></script>
<meta name="viewport" content="width=device-width">
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider()
});
</script>
</head>
<body>
<header id="site-header">
<div class="row">
<nav class="nav">
<ul>
<li><i class="fa fa-shield"></i></li>
<li>Home</li>
<li>Portfolio</li>
<li>Clothing</li>
<li>Gallery</li>
<li>Resume</li>
</ul>
</nav>
</div>
</header>
<div class="wrapper">
<div id="slider" class="nivoSlider">
<img src="img/cover.jpg" alt="" title="#htmlcaption1"/>
<img src="img/cover1.jpg" alt="" title="#htmlcaption1"/>
<img src="img/cover.jpg" alt="" title="#htmlcaption1"/>
<img src="img/cover1.jpg" alt="" title="#htmlcaption1"/>
</div>
<div id="htmlcaption1" style="display:none">
<div class="nivo-caption1" >Simple. <br> Clean.</div>
</div>
</div>
</body>
</html>
My CSS for the caption:
.nivo-caption1 {
position: absolute;
margin:auto;
top: 5%;
overflow:hidden;
background:none;
font-family: 'Gotham';
color:#FFF;
font-weight:bold;
font-size:50px;
line-height:44px;
text-align:center;
text-transform:uppercase; /* converts text to UPPERCASE */
}
If I remove the Margin-Top the caption doesn't even appear.. I've added margin:auto to all the other divs that contain this caption/slider.
Anyone got any ideas of how I could ensure the nivo-caption is always centered even when I resize the browser window?
Attached is a photo of how it looks now..
Any help would be great!
Thanks,
Maxenter image description here
The reason margin:auto isn't working for this particular case is two-fold.
You need to have a width set.
The caption is being positioned absolutely and this will override it. Even if you do set a width, it won't matter in this case.
It's ok to position it absolutely for the slider. I don't think it would work out too well if you didn't. All that needs to be done here is to set the left attribute on the caption so that it pushes the caption over to the center of the screen.
In order to do this you would need to calculate the difference between the width of the slider and the width of the caption and divide the result in half. This will give you the correct amount. It looks like the slider spans the full width of the page, so we would need to calculate this difference dynamically because when the window size changes, so does the width of the slider. We'll need a little help from javascript to accomplish this.
Something like this might help:
function centerCaption(){
var caption = $('.nivo-caption');
caption.css('left', ($('#slider').width() - caption.width()) / 2);
}
Here is a slimmed down working example:
https://jsfiddle.net/sm1215/ma645ao8/2/
When you fix your class name, I believe that if you set a width to your div and then use margin-left:auto and margin-right:auto, the element should center.
.nivo-caption {
width:300px;
margin-left:auto;
margin-right:auto;
}
This assumes you don't have other elements that force that element to not be able to move.
So I found a solution to my problem. I'm not sure if it's the correct way things should be coded, but it works.. If anyone can see how my code might cause issues in the future, please let me know.
I added some bits of code to the css and it solved everything.
My HTML is exactly the same as above:
<!DOCTYPE html>
<html>
<head>
<title>Max Klimmek - Portfolio, Clothing, Travel</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="fonts/font-awesome-4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/nivo-slider.css" type="text/css" />
<script src="script/jquery.nivo.slider.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script>
<script src="script/jquery.nivo.slider.pack.js" type="text/javascript"></script>
<meta name="viewport" content="width=device-width">
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider()
});
</script>
</head>
<body>
<header id="site-header">
<div class="row">
<nav class="nav">
<ul>
<li><i class="fa fa-shield"></i></li>
<li>Home</li>
<li>Portfolio</li>
<li>Clothing</li>
<li>Gallery</li>
<li>Resume</li>
</ul>
</nav>
</div>
</header>
<div class="wrapper">
<div id="slider" class="nivoSlider">
<img src="img/cover.jpg" alt="" title="#htmlcaption1"/>
<img src="img/cover1.jpg" alt="" title="#htmlcaption1"/>
<img src="img/cover.jpg" alt="" title="#htmlcaption1"/>
<img src="img/cover1.jpg" alt="" title="#htmlcaption1"/>
</div>
<div id="htmlcaption1" style="display:none">
<div class="nivo-caption1" >Simple. <br> Clean.</div>
</div>
</div>
</body>
</html>
The New CSS for the NivoCaption container:
/* Caption styles */
.nivo-caption {
position: absolute;
justify-content: center;
margin-left: -150px;
margin-top: -200px;
width: 100%;
font-family: 'Gotham', sans-serif;
color:#FFF;
font-weight:bold;
font-size:45px;
line-height:44px;
text-align:center;
text-transform:uppercase; /* converts text to UPPERCASE */
}
.nivo-caption1 {
position: absolute;
margin: auto;
margin-top:5px;
}
The pieces I added to ensure center alignment were:
justify-content: center;
margin-left: -85px;
margin-top: -200px;
width: 100%;
Now I just have to figure out solutions to the other bugs with this slider:
pauseTime not being applied to all slides.
Delay on caption load.
Cheers for your helps guys!
Max
I want to design a page in which contents of page like header,navigation bar, buttons etc should be placed on slideshow. But the problem is when I add contents on div container or body, contents does not appear on slideshow. Can any one please tell me what should I do?Here is the code:
<html>
<head>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
<script type="text/javascript">
$(document).ready(function(){ //This is jquery code for fade slideshow
$('.pics').cycle('fade');
});
</script>
<style type="text/css">
.pics { //this is style of container (div) which contain images
height: 100%;
width: 100%;
position:absolute;
left:0;
top:0;
margin-right:0;
}
.pics img { //style of images
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="pics"> //html code for container
<img src="adv1_wheels_ferrari_f430-HD.jpg" width="100%" height="500" />
<img src="kepler_motion-HD.jpg" width="100%" height="100%" />
<img src="nissan_gt_r_gold-HD.jpg" width="100%" height="100%" />
</div>
</body>
</html>
The slideshow appears properly if you change the height property of pic img in css code.
Check this fiddle - click here
Hope it helped..!
EDIT - With visible heading
click here
I am trying to load a new local html page within a specific div when I click on an object within svg. Here is the code I have.
<html>
<head>
<script>
$("#button").click(function(){
$("#div1").load("1.html");
});
</script>
<svg width="100%" height="95%">
<a xlink:href="#" id="button" class="button">
<text x="150" y="45" fill="red">My Div</text>
</a>
</svg>
<style type="text/css">
#div1 {
position:absolute;
top: 15%;
left: 15%;
width:300px;
height:300px;
margin-top: -9px; /*set to a negative number 1/2 of your height*/
margin-left: -15px; /*set to a negative number 1/2 of your width*/
border: 1px solid #FFFFFF;
background-color: none;
}
</style>
<div id="div1">Div Placement</div>
</body>
</html>
I've fiddled with this for a few days with no avail. I do not want to use the div hide/show method if at all possible.
Many thanks!
~ Leo
EDIT
okie I've tried doing what you did on the fiddle but it still will not change the div.
here is what I have now. Yes an index exists within the pages folder.
<html>
<head>
<script type="text/javascript" src="/js.jquery/jquery-2.1.1.min.js"> </script>
<script>
$("#button").click(function(){
$("#div1").text("Loading...");
$("#div1").load("/pages/");
});</script>
</head>
<body bgcolor="#000000">
<svg width="100%" height="95%">
<a xlink:href="#" id="button" class="button">
<text x="150" y="45" fill="red">My Div</text>
</a>
</svg>
<div id="div1">Div Placement</div>
EDIT
Third iteration of code, still not working
<html>
<head>
<meta charset="UTF-8">
<title>Float Test</title>
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$("#button").click(function(){
$("#div1").text("Loading...");
$("#div1").load("/pages/");
});</script>
</head>
<body bgcolor="#000000">
<svg width="100%" height="95%">
<a xlink:href="#" id="button" class="button">
<text x="150" y="45" fill="red">My Div</text>
</a>
</svg>
<div id="div1">Div Placement</div>
</body>
</html>
It works fine for me.
http://jsfiddle.net/sumzujre/
The main problem seems to be that you aren't including the jQuery library. Add this line to your page:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
Also, make sure that "1.html" exists. If the server returns an error (eg. 404), nothing will be inserted into your div.
Update:
You will need to make sure the elements exist before you try to add event handlers to them. Either move your <script> block to the end of the file, or you can leave it at the top and surround it with $.ready().
<script>
$(document).ready(function() {
$("#button").click(function(){
$("#div1").text("Loading...");
$("#div1").load("/pages/");
});
});
</script>
I always use ajax. Like this
<div id="my-content"></div>
<a id="button">Click to load</a>
<script type="text/javascript">
$('#button').live('click',function(){
$.ajax({
method: 'POST',
url:'yourPage.html',
success:function(data){
$('#my-content').html(data)
}
})})
</script>
<html>
<head>
<title>Float Test</title>
</head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<body bgcolor="#FFFFFF">
<svg width="100%" height="95%">
<a xlink:href="#" id="button" class="button">
<text x="150" y="45" fill="red">My Div</text>
</a>
</svg>
<style type="text/css">
#div1 {
position:absolute;
top: 15%;
left: 15%;
width:300px;
height:300px;
margin-top: -9px; /*set to a negative number 1/2 of your height*/
margin-left: -15px; /*set to a negative number 1/2 of your width*/
border: 1px solid #FFFFFF;
background-color: none;
}
</style>
<div id="div1">Text</div>
Working iteration of code. I had removed the hashtag within
<a xlink:href="#" id="button" class="button">
in my working code. Thank you for your patience with my lack of thoroughness
</body>
</html>
<script>
$("#button").click(function(){
$("#div1").load("1.html");
});
</script>
I was testing out a slider I built on a local connection, and it worked great, but then when I tried to upload it to my server, it just stacks the images on top of one another. What are some reasons as to why it would work locally, but not when I take it live?
<html>
<head>
<title>Test</title>
<link rel="stylesheet"; type="text/css"; href="Snoopz2.css";/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle.all.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow') .cycle({
fx: 'scrollLeft',
delay: -2000,
next: '.button2',
prev: '.button1',
pause: 1
});
});
</script>
<div class="slideshow">
<div class="slide1">
<img src="/Images2/Cavs.jpg" />
</div><!--/slide-->
<div class="slide2">
<img src="/Images2/tiger.jpg" />
</div><!--/slide-->
<div class="slide3">
<img src="/Images2/LandonDonovan.jpg" />
</div><!--/slide-->
</div>
</body>
</html>
here is the CSS:
.slideshow {
width:600px;
height:257px;
margin:0;
padding:0;
position:relative;
overflow:hidden;
}
.slideshow {
margin:0;
padding:0;
width:600px;
height:257px;
float:left;
position:relative;
}
Website that I'm trying to test this on: http://thesnoopz.com/AASliderTest.html
I was able to get the cycle to work by placing the
<script src="http://malsup.github.com/jquery.cycle.all.js"></script>
in the <body> instead of the <head>
unfortunately I'm getting some really weird issues where it only shows up in a small box at the top of screen
http://thesnoopz.com/AASliderTest.html
Im trying to implement a simple plugin that resize image based on a container.
The problem is , I don't understand why it's not resizing my image when I placed it inside a container
This is the simple plugin demo page i'm trying to replicate
https://dl.dropboxusercontent.com/u/6983010/wserv/imgLiquid/examples/imgLiquid.html
This is my Code
<html>
<head>
<link rel="stylesheet" href="css/float.css">
<script type = "text/javascript" src ="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type = "text/javascript" src ="https://raw.github.com/karacas/imgLiquid/master/src/js/imgLiquid-min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".imgLiquidFill").imgLiquid({fill:true, fadeInTime:500});
$(".imgLiquidNoFill").imgLiquid({fill:false});
});
</script>
</head>
<body>
<div class="container" >
<img src="Creek.jpg"/></div>
</div>
</body>
</html>
My CSS
.container {height: 440px; width: 950px; background:#FFFFFF}
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Image</title>
<style>
.container{
background-color:#f7f7f7;
border:2px solid #ccc;
margin:10px;
display:inline-block;
}
.imgLiquid {
display:block;
overflow: hidden;
background:transparent url('http://www.lotienes.com/imagenes/loading.gif') no-repeat center center;
}
.imgLiquid img{
visibility:hidden;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"
type="text/javascript"></script>
<script type="text/javascript"
src="https://raw.github.com/karacas/imgLiquid/master/src/js/imgLiquid-min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".imgLiquidFill").imgLiquid({
fill: true,
fadeInTime:200,
horizontalAlign: "center",
verticalAlign: "top"
});
});
</script>
</head>
<body>
<div class="container">
<span class="imgLiquidFill imgLiquid" style="width:250px; height:250px;">
<a href="/media/Woody.jpg" target="_blank" title="test">
<img alt="" src="/media/Woody.jpg"/>
</a>
</span>
</div>
</body>
</html>
Your changing the codes and you forgot to define the imgLiquidFill and imgLiquid in the class which is very important to make this plugin effective. In modifying the codes make sure you didn't forgot anything. Another thing is you can rename the class but make sure you also rename it in the script to make it the same.