I've a webforms ASP.NET application with a master page and a child page.
Inside child page i've some div like:
<html>
<div>
....
<div id="MYDIV">
<textarea> .... </textarea>
</div>
</div>
I want to add a function to make my div containing textarea full browser size .
I've tried adding an image with an onClick function:
<img src="images/full-screen.png" height="16px" onclick="document.getElementById('divEditorReferto').style.height = '100vh'; document.getElementById('divEditorReferto').style.width = '100vh';" />
But it not works.
Second question: how to reverse the full screen function and make div with the old parameters (normal size) ?
Thanks
Add a on click event that toggles a class .e.g. class="example". Then style elements accordingly.
#MYDIV.example {
display: block;
position: absolute;
height: 100%;
width: 100%;
}
Simple vanilljs to toggle class
var el = document.querySelector('.toggleFull');
var content = document.querySelector('.textAreaWrapper');
el.onclick = function() {
content.classList.toggle('full');
}
css with the normal and the fullscreen version of the textarea and the positioning of the toggle button (.toggleFull)
.textAreaWrapper {
width:200px;
border:1px solid red;
position:relative;
}
.textAreaWrapper.full {
position:absolute;
height:100vh;
width:100%;
top:0;
left:0;
display:flex;
}
.textAreaWrapper .textAreaInner {
flex-grow:1;
}
.textAreaWrapper.full .textAreaInner {
height:100vh!important;
border:1px solid blue;
}
.toggleFull{
position:absolute;
bottom:0;
right:0;
}
Here a working fiddle:
https://codepen.io/anon/pen/pMEXLR?editors=1111
Related
I am making a image gallery in my project using html css. In it I am displaying images from blob and I want to show a default image so that if due to any reason my image do not load user will see the default thumbnails and same in the case of image not available on blob.
I tried:
<div>
<img src="#Model.ComponentData.imagePath" onclick="OpenBookRead(#Model.ComponentData.Id)" class="actualImage"/>
<img src="#Model.ComponentData.imagePath" onclick="OpenBookRead(#Model.ComponentData.Id)" class="defaultImage"/>
</div>
<style>
.actualImage{
position:absolute;
height:150px;
width:100px;
}
.defaultImage{
height:150px;
width:100px;
}
</style>
Please try with below code
Your HTML
<div>
<img src="#Model.ComponentData.imagePath" onclick="OpenBookRead(#Model.ComponentData.Id)" class="actualImage"/>
<img src="#Model.ComponentData.imagePath" onclick="OpenBookRead(#Model.ComponentData.Id)" class="defaultImage"/>
</div>
Please add css property "opacity" to your style
<style>
.actualImage {
opacity: 0;
position:absolute;
height:150px;
width:100px;
}
.actualImage.show-actual-image {
opacity: 1;
}
.defaultImage {
height:150px;
width:100px;
}
</style>
Add following script to manage opacity based on your actual image availability
<script>
$(".actualImage")
.on('load', function() { $(this).addClass("show-actual-image");})
.on('error', function() { $(this).removeClass("show-actual- image");});
</script>
I think this will help you....
You can use following code also...
It works fine
HTML
<div class="Landscape" style="position: relative;">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ_Tm3R3OxcWhSFwaLNhG0iQUq2RqT3pnTEgSN3u1YDc44lMRWlFA" class="actualImage" />
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTCb5jUiDyPAQM2DmOn9V37FJwHUkaeCTTIsorbI-tKegIDHb-qZQ" class="defaultImage" />
CSS
.landscape {
position: relative;
height: 130px;
width: 198px;
}
.actualImage,
.defaultImage{
position: absolute;
left: 0;
top: 0;
width: 100%;
z-index: 1;
}
.actualImage {
opacity: 0;
}
.actualImage.show-actual-image {
opacity: 1;
z-index: 999;
}
Javascript
var imgElement = document.getElementsByClassName("actualImage")[0];
if (imgElement.complete) {
alert("hi");
imgElement.className += " show-actual-image";
}
You can use an object tag to put your image source link. Afterwards place an img tag inside that object (this img will act as a thumbmail if the source image in the object does not load)
Here is a snippet where the object tag has a valid image source
object,object *{
width:500px;
height:500px;
}
<object data="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTCb5jUiDyPAQM2DmOn9V37FJwHUkaeCTTIsorbI-tKegIDHb-qZQ" >
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ_Tm3R3OxcWhSFwaLNhG0iQUq2RqT3pnTEgSN3u1YDc44lMRWlFA"/>
</object>
Below is another snippet where the object tag has an invalid image source (it will fall back to the img thumbail)
object,object *{
width:500px;
height:500px;
}
<object data="" onclick="alert()">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ_Tm3R3OxcWhSFwaLNhG0iQUq2RqT3pnTEgSN3u1YDc44lMRWlFA"/>
</object>
My goal is to overlay a transparent button on a div. When a user clicks the button, the underlying div should change color. I tried using z-index, but the button is not clickable. Are there any additional CSS properties I could try that would help me achieve the desired functionality?
CSS:
#container{
height:200px;
width:200px;
position:relative;
z-index:auto;
}
#MyHiddenButton{
float:left;
height:100px;
width:200px;
z-index:2;
background-color:transparent;
position: absolute;
top: 0;
outline: none;
border: none;
}
#myContent{
position:absolute;
float:left;
height:200px;
width:200px;
background-color:lightslategrey;
z-index:1;
}
HTML:
<div id="container">
<div id="myContent" runat="server"></div>
<asp:Button ID="MyHiddenButton" runat="server" OnClick="MyHiddenButton_Click" />
</div>
C# Code:
protected void MyHiddenButton_Click(object sender, EventArgs e)
{
myContent.Style.Add("background-color", "red");
}
If you're not opposed to using JQuery, you can just skip the hidden button and make the div clickable
$('#myContent').click(function(){
$('#myContent').css('background-color','red');
});
JSFiddle
I'm trying to have the links for AgentSheets, Gimp, and InkScape to show when the link for Portfolio is hovered. I've achieved that, but whenever the mouse is moved from portfolio, to click one of the links, they disappear because Portfolio isn't being hovered over anymore. Anyone have any advice? Thanks!
CSS:
#portfolio:hover + #portfolio2 {
display:block;
}
#portfolio2 {
display:none;
}
#portfolio {
width:70px;
display:inline;
}
HTML:
<div id="portfolio">Portfoliodiv>
<div id="portfolio2">
Agentsheets
Gimp
InkScape
</div>
</div>
To have this effect work the portfolio2 div should be inside the main div
HTML
<div id="portfolio">Portfolio
<div id="portfolio2">
Agentsheets
Gimp
InkScape
</div>
</div>
CSS
Then the CSS becomes
#portfolio:hover #portfolio2 {
display:block;
}
#portfolio2 {
display:none;
}
#portfolio {
display: inline-block;
border:1px solid red;
}
Note: this will cause the parent div to change in size which may not be what you need.
JSfiddle Demo
I see that you used display: inline on the #portifolio div so the links would be sided. But that actually keeps your hovering to work well.
You can use white-space: nowrap instead, so the <a> links would remain inline. Also, remove the css + selector, because it is not for this scenario.
So your css code would be:
#portfolio:hover #portfolio2 {
display:block;
}
#portfolio2 {
display:none;
white-space: nowrap;
}
#portfolio {
width:70px;
}
Also, you have to correct the html:
<div id="portfolio">Portfolio
<div id="portfolio2">
Agentsheets
Gimp
InkScape
</div>
</div>
Here's a fiddle: http://jsfiddle.net/G3S82/
A similar solution. Again, you must put the hidden DIV inside the visible one. And use this CSS, which maintains the desired (fixed) width of your elements:
#portfolio {
width:70px;
background: green;
}
#portfolio2 {
display:none;
width: 200px;
background: lightblue;
}
#portfolio:hover > #portfolio2 {
display:block;
}
http://jsfiddle.net/sLLQA/1/
1.Your closing div after Portfolio < /a> is not closing properly.
2.You have to remove the second closing div at the end of the script.
I made a header navigation and it's halfway down the page. When you scroll, and it's on the top of the page I want it to stick, if you know what I mean.
I hope someone can tell me how I get this done. Demo JsFiddle
HTML
<header>menu</header>
CSS
body, html {
height: 2000px;
}
header {
position: absolute;
top: 300px;
background-color: black;
color: white;
width: 100%;
}
You are going to need some JavaScript.
Demo JsFiddle
HTML
<header>
<div class="logo">AWESOME HEADER!</div>
<div class="menu">Menu goes here - home - links - blah blah</div>
</header>
<div class="content">
<!-- your stuff -->
</div>
CSS
* { margin:0; padding:0; }
.logo {
font-size:40px;
font-weight:bold;
color:#a00;
font-style:italic;
}
.menu {
background:#a00;
color:#fff;
height:30px;
line-height:30px;
letter-spacing:1px;
width:100%;
}
.content { margin-top:10px; }
/* the trick */
.menu-padding { padding-top:40px; }
.sticky {
position:fixed;
top:0;
}
Javascript (JQuery)
$(document).ready(function () {
var menu = document.querySelector('.menu');
var origOffsetY = menu.offsetTop;
function scroll() {
if ($(window).scrollTop() >= origOffsetY) {
$('.menu').addClass('sticky');
$('.content').addClass('menu-padding');
} else {
$('.menu').removeClass('sticky');
$('.content').removeClass('menu-padding');
}
}
document.onscroll = scroll;
});
Take a look at this tutorial. It explains how to do it using either CSS or jQuery depending on what you want.
http://www.hongkiat.com/blog/css-sticky-position/
Strange issue here which I can't see the problem with! I'm setting the width of the entire element using the class sale_container. But it's width is not changing at all!
See JSFiddle Demo
CSS:
/*Sale styles*/
.add_sales input {
background:none;
border:none;
color:#FFF;
}
.sales_toolbar input {
width:30px;
}
.sale_container {
width:500px;
border:2px solid #FFF;
}
.sale_image {
height:200px;
width:200px;
background-size:cover;
border-radius:10px;
}
.sale_image_container {
border:solid #000 1px;
float:left;
border-radius:10px;
background-color:#353535;
}
.sale_image_container p {
margin:10px;
}
.sales_toolbar {
float:right;
}
HTML:
<form class="add_sales" name="add_sales" action="php/process_sales.php" method="post">
<div class="sale_container">
<div class="sale_image_container">
<div style="background-image:url(data/images/20140121/0/image8.jpg)" class="sale_image"></div>
<p>KR</p>
</div>
<div class="sales_toolbar">
<input type="text" readonly value="KRR" id="50_selected" /> <!-- Selected -->
</div>
</div>
</form>
It seems to be working on the JSFiddle, but when I preview it in Chrome, it looks like this:
It's possible that additional styles are being included from an alternate CSS source. Have you tried using Inspect Element to view the div, and see if it has any unexpected styles being applied? Chrome natively has the feature built-in if you right-click any element.
Glad to help.
Set position to absolute of sale_container to change width.
.sale_container{
width: 300px;
position: absolute;
border: 2px solid #E97676;
}
Use firebug (http://getfirebug.com/) to inspect html element and css attributes.