I need to insert a image to be zoom in and out but some website told me that it is suppose to be use with path="image url". The image didn't appear so i want to use background-image: url("image url"). So how do i put it in to allow image to show?
<style type="text/css">
#html{
height:100%;
}
#body{
height:100%;
margin:0px;
padding:0px;
}
#hr{
border:0;
width:50%;
}
</style>
<body>
<div id="outerDiv0">
<div id="outerDiv" style="position:relative;height:99%;width:100%;border:1px solid black;overflow:hidden;">
<div style="position: absolute; top: 10px; left: 10px; z-index: 1">
<img src="zoomin_off.gif"
onclick="ZoomIn()" alt="zoomin"/>
</div>
<div style="position: absolute; top: 10px; left: 90px; z-index: 1">
<img src="zoomout_off.gif"
onclick="ZoomOut()" alt="zoomout"/>
</div>
<div id="Nav" style="display:none;position: absolute; top: 70px; left: 20px; z-index: 1"><div><img src="prev.gif" alt="prev"/></div>
<div style="position: absolute; top: 0px; left: 79px;"><img src="next.gif" alt="next"/></div></div>
<div id="imageTiles" style="position:relative;top:0;left:0;z-index:0;width:100%;"></div>
<div id="imageLabels" style="position:relative;top:0;left:0;z-index:1;width:900000px;height:900000px;"></div>
</div>
<div id="overlay"><div id="theScale"></div><div id="theInfo">
</div>
<div id="Thumb0"><div id="Thumb"></div><div id="Thumb2"></div></div>
</div>
<div id="wheelMode">Mouse Wheel:<input type="radio" onclick="wheelMode1()" /> Zoom<input type="radio" onclick="wheelMode2()" /> Next/Prev</div>
<div id="coords" style="position:absolute;top:2px;right:10px;z-index:10;"></div>
</div>
Without any example code we can only guess. Maybe your div did not have any dimensions. Try adding width and height with css to your div:
<div style="width:300px;height:300px;background:url('http://webpage/path/to/image.jpg')"></div>
Can you try this,
CSS:
.Bg{
width:300px;
height:300px;
background-image:url('imagepath');
}
HTML:
<div class='Bg'></div>
Its hard to understand what exactly you want to do,however if you want to add background image to div you can do it as follows
<div class="show">
some text
</div>
in CSS
.show
{
background-image:url('paper.gif');
//other css properties of div
}
ref
Related
I need to make animation when I hover img tag to show text under him (must be animate showing text, slowly) but that is not all It must also move other content down when text show and to return when text is gone (when is not hover). Very Important showing text must be animate and going back.
I don't care if it works with jq or css or both just need work. I am a beginner so maybe it is obviously I just don't see it.
HTML:
<div class="first-block"></div>
<div class="secend-block">
<div class="box">
<img src="/Test/beach.jpg" alt="beach" width="200px" height="200px">
<p>asdasdasssssssssssssssssssssss
asdddddddddddddddddddddd
asdaaaadsssssssssssadsadsdasd
adsssssssssssssssssadsadsadsa
</p>
</div>
</div>
<div class="third-block">
<h1>some content</h1>
<h1>some content</h1>
<h1>some content</h1>
<h1>some content</h1>
</div>
CSS:
.first-block{
width: 99%;
height: 100px;
background: #f10000;
}
.secend-block{
width: 99%;
height: auto;
background: #ffffff;
}
.secend-block .box{
width: 200px;
padding-top: 10px;
margin: 0px auto;
}
.secend-block .box p{
display: none;
}
.third-block{
width: 99%;
height: auto;
background: #4400ff;
}
Use .class:hover
Basically, when .image is hovered, we want to change the styles of .text. The CSS query .image:hover + .text selects the .text the element where there is an image that is being hovered right before it.
.image {
width: 250px;
}
.text {
max-height: 0px;
overflow: hidden;
transition: max-height 1s;
}
.image:hover + .text {
max-height: 32px;
}
<div class="wrapper">
<img class="image" src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg" />
<p class="text">This is some text</p>
</div>
<div class="wrapper">
<img class="image" src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg" />
<p class="text">This is some text</p>
</div>
I've built a quick block which allows someone to zoom in on an image and then drag (pan and zoom).
To do this, I have used panzoom:
jQuery(document).ready(function( $ ) {
$("#panzoom").panzoom({
$zoomRange: $(".zoom-range"),
$reset: $(".reset"),
contain: 'invert',
});
});
.wrap{
position: relative;
background: black;
padding: 60px 20px;
height: 600px;
}
.wrap .padding, section{
height: 100%;
}
.wrap .buttons {
position: absolute;
z-index:1;
top: 0;
right:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.panzoom/2.0.6/jquery.panzoom.min.js"></script>
<div class="wrap">
<div class="padding">
<section>
<div id="panzoom" style="text-align: center">
<img src="https://i.imgur.com/KhWo66L.png" width="100%">
</div>
</section>
<section class="buttons">
<button class="reset">Reset</button>
<input type="range" class="zoom-range">
</section>
</div>
</div>
The above works fine on desktop. But on mobile, since the user users the screen to scroll, when trying to drag the image across, it "stutters".
Difficult to explain, best demo'd on an actual device.
Any ideas on what the issue is here?
Use this library instead, it's more stable
// just grab a DOM element
const element = document.querySelector('.wrap');
// And pass it to panzoom
panzoom(element);
.wrap{
position: relative;
background: black;
padding: 60px 20px;
height: 600px;
}
.wrap .padding, section{
height: 100%;
}
.wrap .buttons {
position: absolute;
z-index:1;
top: 0;
right:0;
}
<script src='https://unpkg.com/panzoom#8.7.3/dist/panzoom.min.js'></script>
<div class="wrap">
<div class="padding">
<section>
<div id="panzoom" style="text-align: center">
<img src="https://i.imgur.com/KhWo66L.png" width="100%">
</div>
</section>
<section class="buttons">
<button class="reset">Reset</button>
<input type="range" class="zoom-range">
</section>
</div>
</div>
So I'm pretty new to JavaScript and HTML, and I was wondering how I can make a menu which allows you to make specific content in div(s) visible based on which button(picture1-12) was clicked. I think it should be possible to make one div which can output String linked to that specific button. I hope I'm clear enough. Is there anyone who could help me?
body{
background-color: #A50000;
}
#Container{
width: 90%;
margin: 0 auto;
}
.CenterImage{
text-align: center;
}
.Menu{
float: left;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Test_Site</title>
</head>
<body>
<div ID="Container">
<div class="CenterImage">
<img src="images\HeaderImage.jpg" alt="HeaderImage" width="100%">
</div>
<div class="Menu">
<img src="images/Buttons/Picture1.png" alt="Button_1" style="position: absolute; top: 210px;"/>
<img src="images/Buttons/Picture2.png" alt="Button_2" style="position: absolute; top: 320px;"/>
<img src="images/Buttons/Picture3.png" alt="Button_3" style="position: absolute; top: 430px;"/>
<img src="images/Buttons/Picture4.png" alt="Button_4" style="position: absolute; top: 540px;"/>
<img src="images/Buttons/Picture5.png" alt="Button_5" style="position: absolute; top: 650px;"/>
<img src="images/Buttons/Picture6.png" alt="Button_6" style="position: absolute; top: 760px;"/>
<img src="images/Buttons/Picture7.png" alt="Button_7" style="position: absolute; top: 870px;"/>
<img src="images/Buttons/Picture8.png" alt="Button_8" style="position: absolute; top: 980px;"/>
<img src="images/Buttons/Picture9.png" alt="Button_9" style="position: absolute; top: 1090px;"/>
<img src="images/Buttons/Picture10.png" alt="Button_10" style="position: absolute; top: 1200px;"/>
<img src="images/Buttons/Picture11.png" alt="Button_11" style="position: absolute; top: 1310px;"/>
<img src="images/Buttons/Picture12.png" alt="Button_12" style="position: absolute; top: 1420px;"/>
</div>
</div>
</div>
</body>
</html>
You need to change the ids and styles according to your situation. I think this is the one you looking for.
<div style='display:none' id='Button_1'>button1 content</div>
<div style='display:none' id='Button_12'>button12content</div>
<script type='text/javascript'>
$(function() {
$('.Menu img').click(function() {
if ($(this).attr("alt") == 'Button_1')
$('#greenbox').html($('#Button_1'.html()));
});
});
</script>
creating a basic HTML page, should show a logo as the banner, with a hyperlink on the bottom right of the logo.
Then an iframe as the page.
Storing the image and the iframe inside 2 seperate divs, then put that inside a div.
Problem is when I try to add the time, it loads it below the image, and the iframe sits ontop of that blocking it out. Have tried Z Index and messing about with divs...any ideas?
<!DOCTYPE html>
<head>
<title>Interactive Map - Meath Field Names Project</title>
<style>
*{margin:0;padding:0}
html, body
{
height:100%;
width:100%;
overflow:hidden;
background-color:#E0DEDF;
}
iframe
{
height:100%;
width:100%
}
.content
{
width: 100%;
height:90%
}
.logoheader
{
width: 100%;
height: 10%;
}
.fullPage
{
height:100%;
width: 100%;
}
.hlink
{
z-index: 1;
color:#ACD0D4;
font-size:26px;
font-family:verdana
}
</style>
</head>
<body>
<div class="fullPage">
<div class="logoheader">
<img src="images/banner.png" alt="IMAGES" width="100%" />
<a class="hlink" href="http://www.google.com/">Help Page</a>
</div>
<div class="content">
<iframe class="wrapper"//linktoIFrame</iframe>
</div>
</div>
</body>
</html>
The following two solutions seem to work:
Negative margin-top with float right on the link
Adding a wrapper with position relative and absolutely positioning the link;
a.hlink {
position: relative;
margin-top: -1.5em;
float: right;
z-index: 5;
}
#wrapper {
position; relative;
}
#wrapper .otherlink{
position: absolute;
bottom: 3px;
right: 3px;
}
<img src="images/banner.png" alt="IMAGES" width="100%" height="75" />
<a class="hlink" href="http://www.google.com/">Help Page</a>
<p>more content</p><hr/>
<div id="wrapper" style="position:relative">
<img src="images/banner.png" alt="IMAGES" width="100%" height="75" />
<a class="hlink" href="http://www.google.com/">Help Page</a>
</div>
I am working on asp.net page. In master page I have a div like this:
<body id="page1" >
<form id="form2" runat="server">
<div id="content">
<!-- this is popup light grey show -->
<div class="darkenBg" id="popupBackground" style="display:none;"></div>
<!-- content -->
<div class="greenBox2 popUpWin" id="companySigninPopup" style="display:none;">
<div class="topWrap">
<!-- popup window -->
</div>
<div class="botWrap">
<div class="corner-bottom-left"> </div>
<div class="border-bottom"> </div>
<div class="corner-bottom-right"> </div>
</div>
</div>
</div>
</div>
</div>
I am showing it like this:
function ShowHomePagePopup(popupId) {
$("#" + popupId).show();
$("#popupBackground").show();
$('#popupBackground').height(800);
$("#page1").addClass('hideScrollbars');
}
css is like this:
html, body {
height:100%;
margin:0px;
}
.darkenBg { /*added this div after body*/
background: url(/images/blackBg.png);
position:absolute;
z-index:30;
width:100%;
height:100%;
bottom:0px;
}
.popUpWin {
position:absolute;
z-index:31;
width:500px;
left:50%;
margin:200px 0 0 -250px
}
.hideScrollbars {
overflow: hidden;
}
#content {
background:url(/images/bg.gif) top left repeat-x #fff;
overflow:hidden;
padding-bottom:20px;
}
When the popup appears, it is centered horizontally, but vertically at the top, so it is at top mid of the screen.
The overlay, light grey background, means popupBackground is only 10% of the height of screen although width is 100%. How can I make it 100% high ?
This is a good way to make a popup only with CSS:
The HTML code:
<div class="container-popup">
<div class="popup"></div>
</div>
The CSS code:
.container-popup {
position: relative;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,.8);
}
.popup {
width: 50%;
height: 50%;
background: #1abcb9;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
Check this Fiddle.
There is an example to simplest overlay popup
LINK
$(document).ready(function(){
$(".container-popup, #close").click(function(){
$('.popup').hide(); $('.container-popup').hide();
});
});
Place the Popup Window inside the overlay-div!
<body id="page1" style="height: 100%;">
<form id="form2" runat="server" style="min-height: 100%;">
<div id="content">
..
content
...
</div>
</div>
<div class="darkenBg" id="popupBackground" style="display:none;">
<div class="greenBox2 popUpWin" id="companySigninPopup" style="display:none;">
<div class="topWrap">
popup window
</div>
<div class="botWrap">
<div class="corner-bottom-left"> </div>
<div class="border-bottom"> </div>
<div class="corner-bottom-right"> </div>
</div>
</div>
</div>
</form>
</div>