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
Related
I am new to jquery. I have a simple project. Two pictures stacked on top of each other. I want the page to show the second picture first (so the page needs to start at a certain scroll point) and then the user can scroll up to the first picture. So the code would go something like that
html:
!DOCTYPE html>
<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div id="mainPage" width="100%">
<img id="top" src="pic1.jpg" width="100%">
<img id="bottom" src="pic2.jpg" width="100%">
</div>
</body>
<script type="text/javascript" src="script.js"></script>
</html>
CSS:
body {
margin: 0px;
padding: 0px;
}
#top {
display: block;
}
#bottom {
display: block;
}
JavaScript
window.onload = function() {
scroll(0, 2300);
}
This works when I first load the page, but it doesn't work if I refresh the page (I assume because of something to do with cache?). How can I make the onload function work also when the page is refreshed? Thanks for your time.
If you are using jq why don't you use this type of function on $(document).ready()
$(document).ready(function(){
$(window).scrollTop( 3000 );
});
$(window).unload(function(){
$(window).scrollTop( 3000 );
})
body {
margin: 0px;
padding: 0px;
}
#top {
display: block;
}
#bottom {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="mainPage" width="100%">
<img id="top" src="http://drkeyurparmar.com/wp-content/uploads/2015/02/dummy-article-img-1.jpg" width="100%">
<img id="bottom" src="http://drkeyurparmar.com/wp-content/uploads/2015/02/dummy-article-img-1.jpg" width="100%">
</div>
load is page load moment and beforeunload is refresh page moment
$(window).on("load",function() {
scroll(0, 2300);
});
$(window).on("beforeunload",function() {
scroll(0, 2300);
});
So if it's working first time, your code is ok. But seems you have to force to delete page cache.
Try this options:
Add this meta tags to your head and give it a try.
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Expires" content="-1">
If you want to control by js the delete of the cache, you can try making a simple js function:
deleteCache(){
window.location = window.location.href+'?eraseCache=true';
}
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>
Given the following code:
function move()
{
dom = document.getElementById('image');
dom.style.top=event.clientY+"px";
dom.style.left=event.clientX+"px";
}
<!DOCTYPE html>
<html>
<head>
<title>Program 3</title>
<script type="text/javascript" src="pr3.js"></script>
</head>
<body onmousedown="move();">
<img src="image.jpg" id="image" width="300px" height="200px" style="position:absolute; left:100px; top:100px;"/>
</body>
</html>
Edit
The image only moves when clicked on the image. But when clicked outside the image, it does not move.
However, without <!DOCTYPE html>, it moves wherever clicked inside the browser window and not explicitly on the image.
The problem is that in "quirks mode" body height is set to 100%, while in "standards mode" it is determined by its content. So without doctype(rendering in quirks mode) whole page area is body - so it is clickable, but in "standards mode" it is only image...
if you want you can also do this in "standards mode", by applying following css:
html, body {
height: 100%;
}
working example:
http://plnkr.co/edit/wrHS3b8nQ9tfi5AMWqoE?p=preview
Absolutely-positioned elements to not affect the size of their containing element. Consider a case where we use a red-colored <div> instead of <body> as the clickable element:
function move() {
dom = document.getElementById('image');
dom.style.top=event.clientY+"px";
dom.style.left=event.clientX+"px";
}
div { background-color: red; }
<!DOCTYPE html>
<html><body>
<div onmousedown="move();">
<img src="image.jpg" id="image" width="300px" height="200px" style="position:absolute; left:100px; top:100px;"/>
</div>
</body></html>
This snippet should contain a red-colored <div>, but it doesn't, because the <div> is empty or anything that would cause it to have a size greater than 0. The image it contains is absolutely-positioned, which does not affect the size.
Now consider a similar <div> with a CSS-specified size:
function move() {
dom = document.getElementById('image');
dom.style.top=event.clientY+"px";
dom.style.left=event.clientX+"px";
}
div {
background-color: red;
width: 400px;
height: 400px;
}
<!DOCTYPE html>
<html><body>
<div onmousedown="move();">
<img src="image.jpg" id="image" width="300px" height="200px" style="position:absolute; left:100px; top:100px;"/>
</div>
</body></html>
Now the div is larger than zero, and clicking inside produces the expected result.
this is why your <body> clicks don't work: the <body> has a width and height of 0. If you instead place the onclick listener on the <html> element (which is full-width and full-height by default) or on an element with non-zero dimensions, you'll see your code works. I'm not sure I'd advise putting binding click listeners on the <html> element; I would advise using a CSS-sized <div>.
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>
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.