I want to design a page in which contents of page like header,navigation bar, buttons,headings, paragraphs 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 properly. 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>
<h3>This is heading</h3>//It is not appearing properly
<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%" />
<p>This is paragraph</p>// this is insides div and also not appearing properly
</div>
</body>
</html>
Try This
<html>
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/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:relative;
left:0;
top:0;
margin-right:0;
}
.pics img { //style of images
width: 100%;
height: 100%;
}
.content{
position:absolute;
top:10;
left:10;
color:#fff;
padding:10px;
background: rgba(45, 195, 89, 0.57);
z-index:99
}
</style>
</head>
<body>
<div class="pics"> <!--Slider images goes here-->
<img src="http://dummy-images.com/abstract/dummy-480x270-Stripes.jpg" width="100%" height="500" />
<img src="http://dummy-images.com/abstract/dummy-454x280-Glass.jpg" width="100%" height="100%" />
<img src="http://dummy-images.com/abstract/dummy-576x1024-Bottles.jpg" width="100%" height="500" />
</div>
<div class="content"> <!--Slider content goes here-->
<h3>This is heading</h3>
<p>This is paragraph This is paragraphThis is paragraphThis is paragraphThis is paragraphThis is paragraphThis is paragraphThis is paragraphThis is paragraphThis is paragraph This is paragraph</p>
</div>
</body>
Check this out http://jsfiddle.net/xfawfyaw/1/
CSS:
.pics {
height: 500px;
width: 100%;
position:relative;
left:0;
top:0;
margin-right:0;
overflow:hidden;
}
.slide div, .slide img {
height:500px;
}
.slide p {
position:absolute;
bottom:-12px;
}
.slide h3 {
position:absolute;
top:-20px;
}
.slide h3, .slide p {
background:rgba(0,0,0,0.5);
color:#fff;
left:0;
right:0;
padding:10px;
}
HTML:
<div class="pics">
<div class="slide">
<h3>This is heading</h3>
<p>This is paragraph</p>
<img src="http://www.mundologia.de/wp-content/uploads/raemisgummen_0188-1080x500.jpg" width="100%" height="500" />
</div>
<div class="slide">
<h3>This is heading</h3>
<p>This is paragraph</p>
<img src="http://www.cycletrailsaustralia.com/images/832.jpg" width="100%" height="100%" />
</div>
<div class="slide">
<h3>This is heading</h3>
<p>This is paragraph</p>
<img src="http://www.webidesigns.com/wp-content/uploads/2015/03/nature-background-cities-flowers-papel-images-wallwuzz-hd-wallpaper-18115-1080x500.jpg" width="100%" height="100%" />
</div>
</div>
Related
The idea is that all iframes show the end of the page, where the pressure map is. But when they are created, iframes don't appear in the same starting position, so when I try to scroll them all down, some cross the threshold!
<html>
<head>
<style>
iframe {
height: 200px;
width: 100%;
border: none;
}
.iframe-container {
height: 120px;
width: 700px;
overflow: auto;
overflow: hidden;
float: left;
}
</style>
</head>
<body style="background-color:black;">
<div class="grid games" id="jogos-sofascore">
<div id="select-box-5" style="width: 100%;">
<div class="iframe-container" >
<iframe id="iframe" src="https://www.sofascore.com/event/9985319/attack-momentum/embed"></iframe>
</div>
<div class="iframe-container">
<iframe id="iframe" src="https://www.sofascore.com/event/9985309/attack-momentum/embed"></iframe>
</div>
<div class="iframe-container">
<iframe id="iframe" src="https://www.sofascore.com/event/9992075/attack-momentum/embed"></iframe>
</div>
</div>
</div>
<script>
function atualizar() {
document.querySelectorAll('.iframe-container').forEach(e => e.scrollTop = e.scrollHeight)
}
setInterval(atualizar,5000);
</script>
</body>
</html>
I tried using a way to scroll to the top and then to the end:
document.querySelectorAll('.iframe-container').forEach(e => e.scrollTop = 0)
document.querySelectorAll('.iframe-container').forEach(e => e.scrollTop = e.scrollHeight)
But it didn't work, the iframes weren't scrolled to the beginning as they should.
How could I solve this problem making the scroll-to-end-of-page event malleable regardless of the start position of iframes?
Expected Result:
Current Result:
You need to set the height of the iframe to the height of the content.
Currently, you are setting the height of each iframe to 200px. However, the height of the content varies for each individual source. If the height of the source of the iframe is less than 200px, you will "overscroll". In this case, you can to apply a specific height to each iframe.
document.querySelectorAll('.iframe-container').forEach(e => e.scrollTop = e.scrollHeight)
<html>
<head>
<style>
iframe {
width: 100%;
border: none;
}
.iframe-container {
height: 120px;
width: 700px;
overflow: auto;
overflow: hidden;
float: left;
}
</style>
</head>
<body style="background-color:black;">
<div class="grid games" id="jogos-sofascore">
<div id="select-box-5" style="width: 100%;">
<div class="iframe-container" >
<iframe id="iframe" src="https://www.sofascore.com/event/9985319/attack-momentum/embed" height="200"></iframe>
</div>
<div class="iframe-container">
<iframe id="iframe" src="https://www.sofascore.com/event/9985309/attack-momentum/embed" height="155"></iframe>
</div>
<div class="iframe-container">
<iframe id="iframe" src="https://www.sofascore.com/event/9992075/attack-momentum/embed" height="155"></iframe>
</div>
</div>
</div>
</body>
</html>
Note that you can get the height of the content of the iframe by going to the source of it and getting the body's offsetHeight (e.g, document.body.offsetHeight).
document.querySelectorAll('.iframe-container').forEach(e => e.scrollTop = e.scrollHeight)
<html>
<head>
<style>
iframe {
width: 100%;
border: none;
}
.iframe-container {
height: 120px;
width: 700px;
overflow: auto;
overflow: hidden;
float: left;
}
</style>
</head>
<body style="background-color:black;">
<div class="grid games" id="jogos-sofascore">
<div id="select-box-5" style="width: 100%;">
<div class="iframe-container" >
<iframe id="iframe" src="https://www.sofascore.com/event/9985319/attack-momentum/embed" height="200"></iframe>
</div>
<div class="iframe-container">
<iframe id="iframe" src="https://www.sofascore.com/event/9985309/attack-momentum/embed" height="155"></iframe>
</div>
<div class="iframe-container">
<iframe id="iframe" src="https://www.sofascore.com/event/9992075/attack-momentum/embed" height="155"></iframe>
</div>
</div>
</div>
</body>
</html>
document.querySelectorAll('.iframe-container').forEach(e => e.scrollTop = e.scrollHeight)
<html>
<head>
<style>
iframe {
width: 100%;
border: none;
}
.iframe-container {
height: 120px;
width: 700px;
overflow: auto;
overflow: hidden;
float: left;
}
</style>
</head>
<body style="background-color:black;">
<div class="grid games" id="jogos-sofascore">
<div id="select-box-5" style="width: 100%;">
<div class="iframe-container" >
<iframe id="iframe" src="https://www.sofascore.com/event/9985319/attack-momentum/embed" height="200"></iframe>
</div>
<div class="iframe-container">
<iframe id="iframe" src="https://www.sofascore.com/event/9985309/attack-momentum/embed" height="155"></iframe>
</div>
<div class="iframe-container">
<iframe id="iframe" src="https://www.sofascore.com/event/9992075/attack-momentum/embed" height="155"></iframe>
</div>
</div>
</div>
</body>
</html>
https://games.app.goo.gl/xBJcfuDt4gSMEDe96
I am trying to the div box with image move left to right,
I tried another script: http://jsfiddle.net/bala2024/MzHmN/
Here is the html code
<!DOCTYPE html>
<html>
<head></head>
<body style>
<div id="slideleft" class="slide">
<button>slide it</button>
<div class="inner">Slide to the left</div>
<div style="width:50px; height:50px">
<img src="sceen.jpg">
</div>
</div>
</body>
</html>
CSS
.slide {
position: relative;
background-color: gray;
height: 100px;
width: 500px;
overflow: hidden;
}
.slide .inner {
position: absolute;
left: -500px;
bottom: 0;
background-color:#e3e3e3;
height: 30px;
width: 500px;
}
JS
$(document).ready(function () {
$('#slideleft button').click(function () {
var $lefty = $(this).next();
$lefty.animate({
left: parseInt($lefty.css('left'), 10) == 0 ? -$lefty.outerWidth() : 0
});
});
});
You will need to apply width to main container. Please replace it with below line and check in your browser.
<div id="slideleft" class="slide" style="width:100px; margin:0 auto">
use margin for outer space and padding for inner space
try this
<!DOCTYPE html>
<html>
<head>
</head>
<body style>
<div id="slideleft" class="slide">
<button>slide it</button>
<div class="inner">Slide to the left</div>
<div style="width:50px; height:50px; margin-left: 100px;"><img src="sceen.jpg">
</div>
</div>
</body>
</html>
Click the following link to watch live demo... Click Here
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Animation test</title>
<style>
</style>
<script type="text/javascript">
$(document).ready(function() {
$("#b").animate({left: "+=500"}, 2000);
$("#b").animate({left: "-=300"}, 1000);
});
</script>
</head>
<body>
<div style="position:relative">
<div id="b" style="position:absolute;">B</div>
</div>
</body>
</html>
CSS:
div.inner{
background:black;
margin-left:0;
width:100px;
animation:sample 2s;
-webkit-animation:sample 2s;
}
keyframes sample{
from{margin-left:100%;}
to{margin-left:0%;}
}
#-webkit-keyframes sample{
from{margin-left:100%;}
to{margin-left:0%;}
}
fiddle: http://jsfiddle.net/apRMU/17/
this is my code.my image dimensions are 1024X768 but i m getting a right-left scroll bar.and when i scroll to right ,i get a black background cutt off from my total image.
Help me out plzz
body {
background-image: url('stareffect1.jpg');
}
h1 {
position: relative;
left: 480px;
}
form #Edit1 {
position: relative;
top: 58px;
left: 341px;
}
form #Edit2 {
position: relative;
top: 67px;
left: 341px;
}
<html>
<body>
<img src="banner.jpg" width="500" height="70" />
</head>
</head>
<hr/>
<br/>
<a href="forum.php">
<div style="position:absolute; left:347px; top:165px;">
<img src="images/forum.jpg" />
</div>
</a>
<a href="credits.php">
<div style="position:absolute; left:481px; top:165px;">
<img src="images/credits.jpg" />
</div>
</a>
<a href="rules.php">
<div style="position:absolute; left:615px; top:165px;">
<img src="images/rules.jpg" />
</div>
</a>
<a href="logout.php">
<div style="position:absolute; left:740px; top:165px;">
<img src="images/logout.jpg" />
</div>
</a>
<br/>
<br/>
<br/>
<div style="position:relative; left:339px; top:49px">
<img src="images/actor.jpg" width="250" height="300" />
</div>
<div style="position:absolute; left:600px; top:225px">
<img src="images/river.jpg" width="250" height="300" />
</div>
</body>
</html>
Chris is right your html is not well formatted. Try nesting the tags like below
<html>
<head>
<style type="text/css">
body
{
background-image:url('redbg.png');
}
h1
{
position: relative;
left: 480px;
}
form #Edit1
{
position:relative;
top:58px;
left: 341px;
}
form #Edit2
{
position:relative;
top:67px;
left:41px;
}
</style>
</head>
<body>
<img src="banner.jpg" width="500" height="70" />
<style type="text/css">
body {background-image:url('stareffect1.jpg');}
</style>
</head>
<style type="text/css">
h1
{
position: relative;
left: 480px;
}
form #Edit1 { position: relative;
top: 58px;
left: 341px;
}
form #Edit2 { position: relative;
top: 67px;
left: 341px;
}
</style>
<hr/>
<br/>
<div style="position:absolute; left:347px; top:165px;"><img src="images/forum.jpg"/></div>
<div style="position:absolute; left:481px; top:165px;"><img src="images/credits.jpg"/></div>
<div style="position:absolute; left:615px; top:165px;"><img src="images/rules.jpg"/></div>
<div style="position:absolute; left:740px; top:165px;"><img src="images/logout.jpg"/></div>
<br/>
<br/>
<br/>
<div style="position:relative; left:339px; top:49px"></div>
<div style="position:absolute; left:600px; top:225px">
<img src="images/river.jpg" width="250" height="300" />
</div>
</body>
</html>
GB
I created a "master page" in jsp using frameset, and I included the master page in my other jsps where i have a in the where the contents will be. How can I change the size of the whenever the window size changes?
Below is my sample code :
masterPage.jsp
<html>
<frameset style="border: 0;" rows="135,*,38" style="z-index:1" >
<frame id="headerFrame" noresize="noresize" name="ffwHeader" frameborder="0" scrolling="no" src="header.jsp" style="z-index:1" />
<frame name="ffwMenu" frameborder="0" scrolling="no" src="menu.jsp" style="z-index:3" />
<frame name="ffwFooter" noresize="noresize" frameborder="0" scrolling="no" src="footer.jsp" style="z-index:1" />
</frameset>
index.jsp
<html>
<head>
<title>Upload A Disposition Rule</title>
<style type="text/css">
html, body, div, iframe { margin:0; padding:0; height:100%; }
iframe { display:block; width:100%; border:none; }
</style>
</head>
<body >
<div id="bodydiv" align="center" style="position:fixed; top:135px;left:182px; z-index:2; bottom: 38px; height: 510px; width: 1080px; overflow: auto; ">
<!--contents-->
</div>
<iframe src="masterPage.jsp" name="masterPage" />
</body>
Thanks in advance.
Currently your bodydiv is defined as
<div id="bodydiv" align="center" style="position:fixed; top:135px;left:182px; z-index:2; bottom: 38px; height: 510px; width: 1080px; overflow: auto; ">
Since you specified in the comment to the first answer by #user8900 that you want the bodydiv to be resizable when the window size changes, it sounds like you want to alter the width style attribute on your div.
<div id="bodydiv" align="center" style="position:fixed; top:135px;left:182px; z-index:2; bottom: 38px; height: 510px; width: '100%'; overflow: auto; ">
At that point, however, I think you could probably just remove the width style attribute from the div altogether. Further, as a general coding style note, you should think about moving all of your CSS style definitions to a .css file (or at least the existing <style> head section.)
<head>
<title>Upload A Disposition Rule</title>
<style type="text/css">
html, body, div, iframe { margin:0; padding:0; height:100%; }
iframe { display:block; width:100%; border:none; }
#bodydiv { position:fixed; top:135px;left:182px; z-index:2; bottom: 38px; height: 510px; width: '100%'; overflow: auto; }
</style>
</head>
<body>
<div id="bodydiv" align="center">
<!--contents-->
</div>
(etc...)
</body>
If you want to change the size of the iframe relative to the 'window' size, try using percentage values - with the body width at 100% E.g.
<iframe src="masterPage.jsp" name="masterPage" style="width: 80%; height: 80%;" />
I'm trying to build a simple image slider for my webpage, and here's the code that I have come up with using jquery, css -
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta name="" content="">
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
*{
margin:0; padding:0;
}
#container{
position:absolute; left:100px; top:100px;
width:102px;height:102px;
border:1px solid red;
overflow:hidden; display:inline;
}
#container img{float:left;}
</style>
<script type="text/javascript">
$(document).ready(function(){
setInterval(slideImages, 5000);
function slideImages(){
$('#container img:first-child').clone().appendTo('#container');
$('#container img:first-child').remove();
}
});
</script>
</head>
<body>
<div id="container">
<img src="1.jpg" />
<img src="2.jpg" />
<img src="3.jpg" />
<img src="4.jpg" />
<img src="5.jpg" />
</div>
</body>
</html>
While the code works and displays the images, I would like to add some more effects to it by having the new image slide into the 'container' pane. Like sliding from right direction to the left, and then staying there for sometime and then the next image replaces the existin one by again sliding from right to left.
Please guide me as to how to get the sliding r-to-l effect. I know i can slide up/down using jquery.. but how to do it l-r or r-l?
Thanks!
Click here to view example I knocked up. You can easily change the code to work on a timed interval:
JS
$(document).ready(function(){
$('#rotator > a.arrow.left').click(function(e){
e.preventDefault;
var rotator = $('#rotator .images');
rotator.children('.imageHolder').first().animate({marginLeft:"-=310px"}, function(){
$(this).appendTo(rotator).removeAttr("style");
});
});
$('#rotator > a.arrow.right').click(function(e){
e.preventDefault;
var rotator = $('#rotator .images');
rotator.children('.imageHolder').last().prependTo(rotator).removeAttr("style").css("margin-left", "-310px").animate({marginLeft:"0"});
});
});
CSS
#rotator{width:310px; height:220px; position:relative; overflow:hidden; position:relative;}
#rotator .images{width:1000%; position:relative; z-index:1;}
#rotator a.arrow{width:18px; height:41px; display:block; z-index:2; text-indent:-50000em; position:absolute; top:89px; background:#FFF;}
#rotator a.arrow.left{left:0;}
#rotator a.arrow.right{right:0;}
#rotator .images .imageHolder{width:310px; float:left; height:220px; position:relative;}
#rotator .images .imageHolder span {width:290px; margin: 10px; color:#FFF; font-size:18px; position:absolute; top:0; left:0; z-index:4;}
#rotator .images .imageHolder img{width:310px; height:220px; position:absolute; display:block; top:0; left:0; z-index:3;}
HTML
<!DOCTYPE html>
<html>
<body>
<div id="rotator">
<div class="images">
<div class="imageHolder">
<span>Image Number 1</span>
<img src="http://www.random-images.com/image/obj21geo38pg1p5.jpg" alt="" />
</div>
<div class="imageHolder">
<span>Image Number 2</span>
<img src="http://www.jpl.nasa.gov/images/wise/20100217/pia12832-browse.jpg" alt="" />
</div>
<div class="imageHolder">
<span>Image Number 3</span>
<img src="http://www.boingboing.net/images/_images__wikipedia_commons_a_aa_Polarlicht_2.jpg" alt="" />
</div>
<div class="imageHolder">
<span>Image Number 4</span>
<img src="http://www.aviation-images.com/user/zooms/118/451nw/aviation-images.com21079968wm.jpg?d=1179938582" alt="" />
</div>
</div>
</div>
</body>
</html>
Will Slide works for you?
$("div").click(function () {
$(this).hide("slide", { direction: "left" }, 1000);
});