I was looking at the javascript picture control on google search page and I was wondering how I could replicate it. I can see it blows up a picture on the hoverover but I cant find the code they are using in html.
Can some one help me.
I just responded to a similar question # Jquery Image popout on hover -- my answer was a CSS3 example.
Also, see http://jsfiddle.net/Kai/x4Frn/
Look at the source:
<div id="hplogo-..." style="background-color: rgb(153, 77, 51); position: absolute; width: 201px; height: 121px; left: -28px; top: 31px; z-index: 17;">
<div style="overflow: hidden; top: 6px; left: 6px; position: absolute; height: 109px; width: 189px; ">
<a href="/search?q=...">
<img src="/logos/..." border="0" style="position: absolute; left: -1px; top: -110px; ">
</a>
</div>
</div>
The first <div> positions the image and adds a background color. The second <div> hides the overflow to avoid that the image get's out of the box and is placed 6 pixels from the first div, which creates a border. On top of that, the image is placed, and because it is a sprite, it has some offset.
Hovering the first div will change the width and height of the first two divs and will reposition the first div.
Related
This question already has answers here:
How to overlay one div over another div
(9 answers)
Closed last year.
I am trying to do something like overlaying two divs over a main div, by using position absolute and top properties of CSS. But I don't know the correct way of doing this for responsive view.
Video SDK will inject the video stream in the main div. But that is having some kind of black background on it, which I want to remove. As I can't able to find any other way the last option I can think of is to manually hide the black portion at the top and bottom by using div and CSS.
Snapshot- here the entire view is a single div and I want to remove the black background at top and bottom of the video card
I want it to be like this -
I have put two divs one on top and another on the bottom and given them the background of gray!
But I don't think it's the way to do it.
How can I make it work so it won't break even after resizing the size of the browser!
Code -
<div id="root" style="position: relative; display: block; max-width: 100%; text-align: center; margin-top: 10%; height: 80vh; margin-right: auto; margin-left:auto">
<!-- Video SDK will inject the video stream here -->
</div>
<div id="hide_top" style="position: absolute;height: 12vh;width: 76vw;background: gray;top: 20%;"></div>
<div id="hide_bottom" style="position:absolute;height: 15vh;width: 76vw;background: gray;top: 54%;"></div>
You can use the CSS position property in combination with the z-index property to overlay an individual div over another div element. The z-index property determines the stacking order for positioned elements (i.e. elements whose position value is one of absolute, fixed, or relative).
Let's try out the following example to understand how it works:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Overlaying One DIV over Another DIV</title>
<style>
.container {
width: 200px;
height: 200px;
position: relative;
margin: 20px;
}
.box {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0.8; /* for demo purpose */
}
.stack-top {
z-index: 9;
margin: 20px; /* for demo purpose */
}
</style>
</head>
<body>
<div class="container">
<div class="box" style="background: red;"></div>
<div class="box stack-top" style="background: blue;"></div>
</div>
</body>
</html>
Okay..... So here is a list of things to know:
First, I am using fabric.js (I didn't include it in the tags because it's not the central focus of the problem), which means that when I create a new instance of a fabric.js canvas, it creates 2 canvas elements (.lower-canvas) and (.upper-canvas), which by interacting with it, I've come to find out that they are absolutely positioned, so long story short (with a huge run on) I can't change the fact there are 2 canvases and I can't change to a different library.
Second, I am using bootstrap to keep the UI looking slick. Right now it's structure looks like
<div class="row">
<div class="col" id="canvas_container">
<canvas id="canvas">
</canvas>
</div>
</div>
<div class="row">
<div class="col">
<br>
</div>
</div>
<div class="row">
<div class="col">
---some buttons---
</div>
</div>
So when the page is generated, it changes from the previous code block to
<div class="row">
<div class="col" id="canvas_container">
<div class="canvas-container">
<canvas id="canvas" class="lower-canvas">
</canvas>
<canvas class="upper-canvas">
</canvas>
</div>
</div>
</div>
<div class="row">
<div class="col">
<br>
</div>
</div>
<div class="row">
<div class="col">
---some buttons---
</div>
</div>
which changes the previous canvas to 2 different canvases with different classes but keeps the id of the initial canvas on one of the canvases, and creates a div with class "canvas-container" to encapsulate both canvases.
Third, the canvases will have dynamic sizes. The user will select which size canvas they want to use to interact with the fabric canvas.
Fourth, I have looked at various links on stackoverflow to try, and some have come really close, but still no cigar. The one I am thinking of specifically is here if you'd like to check it out.
Fifth, there shouldn't be any additional css affecting any of the elements apart from bootstrap - with the exception of the canvas elements to affect their size (measured currently in % but may change to vw or vh).
---The Problem Statement---
Just to restate the problem, I am trying to center both canvases that have absolute positions. I think this might be best accomplished if I can center just the .canvas-container, since both canvases are encapsulated in it and since they have absolute positioning. Any thoughts on this?
Let me know if there is anything else I can do to clear up anything I may not have touched on.
Thank you in advance.
--edit--
Just to give a little more context, the light blue boxes will always be the canvas element that needs to be centered.
Here is an update regarding one of the proposed solutions from #SoluableNonagon (it is the post that has a parent and 3 children that are vertically, horizontally, and "both" aligned), so you can see what is going on... for reference, the gray bar at the bottom is horizontally aligned.
The green box is the #canvas_container element which shares the class col.
The light blue box is made up of both canvases.
Moving the css "up" on level to where the child becomes the parent and the new parent's contents becomes the child results in this
#Gagandeep Sangh 's solution without making proper changes to affect the one specific element.
After making the changes to affect the 1 element, the result is like so
Generally, when an element is position: absolute the parent is position: relative.
Then, the absolute element is left: 50%; transform: translateX(-50%); for horizontal centering. For vertical centering top: 50%; transform: translateY(-50%);
.parent {
position: relative;
height: 200px; // needs height/width cause 'absolute' child takes no space
width: 200px;
border: 1px solid red;
}
.child-1 {
position: absolute;
height: 50px;
width: 50px;
border: 1px solid blue;
left: 50%;
transform: translateX(-50%);
}
.child-2 {
position: absolute;
height: 50px;
width: 50px;
border: 1px solid orange;
top: 50%;
transform: translateY(-50%);
}
.child-3 {
position: absolute;
height: 50px;
width: 50px;
border: 1px solid green;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class='parent'>
<div class='child-1'>horizontal</div>
<div class='child-2'>vertical</div>
<div class='child-3'>both</div>
<div>
The <div class="canvas-container"> can be centered respective to its parent <div class="col"> using position:absolute; and setting the col div to position:relative; but here comes a new issue that after setting the <div class="canvas-container"> as absolute it will flow out of its parent div and the height of parent div will collapse as it doesn't have any other content in it, than you need to add some height to that div also, so basically you can try this
.col{
min-height:500px;
position:relative;
}
.canvas-container{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
Hope it works.
I am trying to use jScrollPane to scroll through my gallery that is inside of an iframe. I am using the jQuery code for iframe scrolling from the official example.
Using this code doesn't work for my images (it just hides the original browser scrollbars, doesn't throw any errors and refuses to scroll), but it works perfectly if I replace my images with multiple paragraphs so they overflow (just like in the example).
EDIT: I forgot to mention that images scroll perfectly using the default browser scrollbar.
EDIT #2: Made a JSFiddle.
Here's how my gallery is structured:
...
</head>
<body>
<div id="content"> // Used the same way as in the example, works with text
<div class="gallery">
<div class='picture'>
<img class='pin' src='something'/>
<div class='wrapper'>
<img class='thumbnail' src='something'/>
<img class='border' src='something' />
</div>
</div>
<div class='picture'>
...
</div>
</div>
</div>
...
And here's the CSS for gallery and pictures:
.gallery {
position: relative;
width: 98%;
}
.picture {
float: left;
position: relative;
display: list-item;
list-style-type: none;
width: 11%;
}
.picture .pin {
position: absolute;
left: 48%;
width: 13%;
}
.picture .thumbnail {
position: absolute;
width: 89%;
margin-top: 19%;
}
.picture .border {
position: absolute;
width: 100%;
}
I ignored margins and some other irrelevant stuff, but you get the idea.
The jQuery code is exactly the same as presented in the example.
I think the problem is that images are loaded after scrollbar is initialized, and scrollbar does not detect container size changes by default. If you read documentation carefully, you can see next:
Demo showing how autoReinitialise can also be used so that content
with images in it displays correctly in jScrollPane
So, try autoReinitialise option. If it won't help - update your question with example of your iframe on jsFiddle.net
Solved it!
Apparently, the script didn't like the absolute position of my .picture .pin. Changing it to relative and restyling a bit solved my issue.
Updated JSFiddle
I have a popup with a yes or no question (radiobuttons) in it. I want to force the users of my site to select either one of the options before closing the popup, but i am not able to do so. I can simple close the popup using the 'RED' cross button on the popup.
Can anyone tell me how can i stop the users from navigating from this page? Is there a way to display a alert message and ask them to choose an option?
I am using C#.net, asp.net and JavaScript.
There is no 100% way to hold the user of your site... You could show a selfmade popup something like this
#popupBox {
position: fixed;
width: 100%;
height: 100%;
background: rgba(0,0,0,.4);
}
#popup {
position: absolute;
width: 300px;
height: 200px;
left: 50%,
margin-left: -130px;
top: 50%;
margin-top: -100px;
}
<div id='popupBox'>
<div id='popup'>
<button type='input' value='yes'>
<button type='input' value='no'>
</div>
</div>
After the insert of your popup ho have to reload the needed javascript for handel the click to one of this buttons...
<div id="content">
<div id="header">
</div>
<div id="main-content">
</div>
</div>
html, body{height:100%;margin: 0px; padding: 0px; background-color: black;}
div#content{width:600px; margin: 0 auto; height:100%;}
div#header{width:600px; height:200px;}
div#main-content{width:600px; height:100%; background-color: white;}
As you can see, adding a header pushes everything down. I want main-content to extend to the end of the browser.
I think i worked around this issue before by creating a header with an image similar to my background in order to fake the appearance, however my background i'll be using is much too complicated.
Are there any methods to do this? possibly a working javascript fix?
You can make your main-content div positioned absolutely and then specify its top and bottom attributes. I've setup a jsfiddle here: http://jsfiddle.net/wrn8Y/1/
div#main-content{
position: absolute;
top: 200px;
width:600px;
bottom: 0px;
background-color: white;
}
Note that the top attribute is set to the bottom of your header, and the bottom is set to zero to hit the bottom of the page. If you wanted to have a footer you could change the bottom attribute to accommodate the footer.
Also you can do this with javascript, I generally use JQuery so here is some JQuery code that gets it done:
$('div#main-content').height($(document).height() - $('div#header').height());
This javascript (Jquery) will work with relatively positioned divs and the only css you would need to change is to remove the "height: 100%" on the "div#main-content" style.