I have a jquery cycle slideshow that slides through 3 big photos and is behind the rest of the content. Works fine but the problem is that if I resize the window to less than the width (1400) or height (900) of the photos the scrollbar appears. How to make the scroll disappear or how to make the images "act" like background-images... Sorry about the confusion, hope you can understand me.
HTML:
<div class="slideshow">
<img src="images/temp-bg.jpg" width="1400" height="900" />
<img src="images/temp-bg2.jpg" width="1400" height="900" />
<img src="images/temp-bg3.jpg" width="1400" height="900" />
</div>
CSS:
.slideshow {
position:absolute;
top:0;
left:0;
z-index:-999;
}
Thank you,
Cris
You should be able to set the height and width to 100% and set overflow:hidden
Related
I am now creating a website quite similar to this demo website which displays some image on a page and some effects will be shown when hovering on a particular image.
https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_templates_portfolio2&stacked=h
In this demo website, when we hover on the image, the opacity of the image will be changed from 0.5 to 1. However, in my website, all the images on the page will be covered by a black layer with opacity is 0.5. When hover mouse on a particular image, the black layer on that image will be disappeared. How can I create this kind of effect? Thank you very much!
In my code, I have something like this:
<div class="img-container">
<div style="float:left; background-image:url('img/a.jpg'); width: 100px;height: 100px;"></div>
<div style="float:left; background-image:url('img/b.jpg'); width: 100px;height: 100px;"></div>
</div>
I would like to add a black layer with 0.5 opacity on the images? How can I do that?
<style>
.image{
background-image:url(https://www.w3schools.com/w3images/natureboy.jpg);
background-size:cover;
width:200px;
height:200px;
cursor:pointer;
}
.blackLayer{
width:100%;
height:100%;
background-color:#000;
opacity:0.5;
}
.blackLayer:hover{
opacity:0;
}
</style>
<div class="image">
<div class="blackLayer"></div>
</div>
I have a webpage with a canvas for implementing graphics rendering, and would like to align some text and buttons to the left of it. My HTML code is as follows:
<body onload="webGLStart();">
<canvas id="canvas" style="border: none;" width="800" height="450" align="center"></canvas>
<div class="controls">
<h2>Controls</h2>
<button class="btn" onclick="initBuffers(1)">Man</button>
<br><br>Use the mouse to rotate the view.
</div>
</body>
So what I want to align to the left is everything in the 'controls' class. Currently it is being displayed below the canvas on a new line. I want it to be aligned to the left starting on the same line as the canvas, with the canvas remaining centered.
I am using a stylesheet and would like to know how to implement this using css.
My site can be seen here. It is the Controls section I want to move up towards the top of the page.
Any help would be much appreciated, thank you.
I would suggest you wrap it all in a wrapper div which is centered and has position relative. Then you can position the controls absolute like this:
<div class="wrapper" style="margin: 0 auto; width: 800px; position: relative;">
<canvas id="canvas" style="border: none;" width="800" height="450" align="center"></canvas>
<div class="controls" style="position: absolute; top:0; left:0;">
<h2>Controls</h2>
<button class="btn" onclick="initBuffers(1)">Man</button>
<br><br>Use the mouse to rotate the view.
</div>
</div>
Here is a makeshift answer. I would use bootstrap for positioning though.
You can use bootstrap.
JSFiddle
is that what you are looking for? use col-sm-{x/12} to size and resize your positions.
Obviously I am a novice coder :( This seems like it should be easy, but I can't figure it out.
CSS
div {
display: none;
}
BODY
<div id="div" style="width:100%;height:1750px;z-index:1;">
<iframe src="mypage.html" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" width="100%" height="1750px" ALIGN="left">
</iframe>
</div>
<iframe src="http://www.website.com" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" width="100%" height="1750px" ALIGN="left">
</iframe>
jQuery
$('#hover').mouseenter(function() {
$('#div').show();
}).click(function(e) {
e.preventDefault();
$('#div').hide();
});
This webpage code displays the clickable image "30x1800clear.gif" at the top of the page that opens the "mypage.html" iframe content on hover and closes the ifame content on clicking the image. Which is exactly what I want it to do.
I want the image to stay fixed at the top of the page on scroll. If I try to use ANY styling at all, or surround the code in a DIV with any position styling the image disappears completely.
Can someone show me how to make the image stay fixed at the top of the browser window on scrolling the page?
add position is fixed to image tag. like this
<img src="30x1800clear.gif" width="100%" height="20px" border="0" alt="" style="position: fixed;">
There are several issues here:
You have a div with id div. This is very confusing, so lets change the id to mydiv. In your css, you apply your display:none to div, so to all divs. I guess you want to apply it only to the div in question, so yo should change it to:
#mydiv {
display: none;
}
You're mixing inline style and separate file for the same element, so let's combine everything into the css file:
#mydiv {
width:100%;
height:1750px;
z-index:1;
}
And the first line of your html becomes:
<div id="mydiv">
Now, for the real question: You want to fix the position of the image to the top. Let's add this lines to the #mydiv css block:
position: fixed;
top: 4px; /* You can change this to any number of pixels you want, including 0 */
left: 4px; /* Same thing */
I have a Web Page with my index.html with something like this:
<img class="thumb" onclick="openPhoto(1);" src="img/images/campaign/1.jpg" width="710" height="533" alt="img"/>
What I need to do is to align an image at the bottom center of the screen, because when I open them, they actually appear in the top center of the screen.
just use css
.thumb
{
position:absolute;
bottom:0;
margin:auto;
width://your width accordingly;
}
This is a bit strange question but I am trying to use the cycle plugin to display only one image. That is just to use the various effects the plugin is providing. I have a row of images with certain text and each image/text will be hosted inside a div tag which will be enclosed by the cycle plugin. At certain times, different div tag will have some animation effect using the plugin's cycle function. I think I can add the same div tag to work around this but I am wondering if anyone knows how to do what I want to do.
If you're trying to cycle between DIVs that have the same image but different text then, yes, you can do that. Here's a basic example.
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
});
</script>
<style type="text/css">
.slideshow { position: relative }
.slideshow div { position: relative; }
.slideshow div span { position: absolute; top: 5px; left: 5px; }
</style>
<div class="slideshow">
<div>
<span>Here's some text!</span>
<img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" />
</div>
<div>
<span>Some more different text.</span>
<img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" />
</div>
<div>
<span>Even more different text.</span>
<img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" />
</div>
</div>