I tried many different options, none works. The most close to what I want is this following code.
<div>
<header class="w3-container w3-blue">
<h1>My website</h1>
</header>
<input id="surname_input" type="text" class="w3-input" placeholder="Name (required)">
<br/>
<div class="w3-container" style="position: absolute; bottom: 43px; top: 117.4px; left: 0px; right: 0px; overflow-y: scroll;">
<ul id="messages" style="position: absolute; bottom: 0px; z-index: -1;">
</ul>
</div>
<br/>
</div>
<form id="chat_form" style="position: absolute; bottom: 0px; width: 100%">
<textarea id="chat_input"
class="w3-input"
autocomplete="off"
placeholder="Enter text here..."
onkeyup="auto_grow(this)"
style="border-top: 1px solid #808080; height: 43px; overflow-y: hidden;"></textarea>
I can get the scroll working if I change the position from absolute to relative of the <ul> but then it just does not work as expected (the messages spawning just on the top of the input).
I though I made it work but apparently there are issues every way...
Any ideas? Thanks!
here is the link below ... i think it will help you to create this kind of work:
Sample code of chat application
Related
I have a picture that should be at 100% of the pc screen, but when I use 100vh the elements start to adapt and the elements roll off.
Using height: 100% makes the image too big and doesn't look like it was originally.
Is it possible to somehow get the value 100vh once, and then it would be unchanged?
.main_page {
position: absolute;
width: 100%;
height: 100%;
background-color: black;
}
<div class="main_page">
<!-- Black wallpaper-->
<div class="black_opacity">
<!-- Main wallpaper -->
<div class="main_wallpaper">
<img src="https://cdn.discordapp.com/attachments/797132503546069002/1045624974016262234/2801907.jpg" alt="">
</div>
<!-- Main wallpaper end -->
</div>
<!-- Black wallpaper end-->
<!-- Book-->
<div class="book_cover">
<img src="https://cdn.discordapp.com/attachments/797132503546069002/1046492404011782164/20221127_144830.png" alt="">
</div>
<div class="book_info">
<h1> name... </h1>
<h2> description...</h2>
</div>
<div class="button_div">
<button class="book_buttons" id="Buy"> buy at 2.50$</button>
<button class="book_buttons" onclick="read_click()"> Read book</button>
</div>
</div>
I've tried to use javascript, but I didn't get any response from html. It didn't take a screen value.
First of all, the class name in HTML is written as main_wallpaper but in CSS it's .main_page so you need to rename one of them so they match. There are a few ways you can achieve full height and screen. I like one of CSS-Tricks version of how to do this.
In the HTML:
<div class="main_wallpaper">
<img class="main_img" src="https://cdn.discordapp.com/attachments/797132503546069002/1045624974016262234/2801907.jpg" alt="">
</div>
In CSS:
.main_wallpaper {
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
.main_img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
}
I'm currently facing an issue related to input values in code mirror (FYI: input is html code)
Any help much appreciated!!
This is what i was doing so far (but i need to insert values in each line of code mirror)
JavascriptExecutor js = (JavascriptExecutor)driver;
Js.executeScript("arguments[0].CodeMirror.setValue(\"" + value + "\");", driver.findElementBy(By.id("id")));
Page source code is:
<div class="CodeMirror cm-s-default">
<div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 5px; left: 35px;">
<textarea wrap="off" style="position: absolute; padding: 0px; width: 1px; height: 1em; outline: medium none;" autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0"></textarea>
</div>
<div class="CodeMirror-vscrollbar" cm-not-content="true" style="min-width: 18px;">
<div style="min-width: 1px; height: 0px;"></div>
</div>
<div class="CodeMirror-hscrollbar" cm-not-content="true" style="min-height: 18px;">
<div style="height: 100%; min-height: 1px; width: 0px;"></div>
</div>
<div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div>
<div class="CodeMirror-gutter-filler" cm-not-content="true"></div>
<div class="CodeMirror-scroll" tabindex="-1" draggable="true">
<div class="CodeMirror-sizer" style="margin-left: 30px; margin-bottom: 0px; border-right-width: 30px; min-height: 31px; min-width: 7px; padding-right: 0px; padding-bottom: 0px;">
<div style="position: relative; top: 0px;">
<div class="CodeMirror-lines">
<div style="position: relative; outline: medium none;">
<div class="CodeMirror-measure">
<span>
<span></span>
x
</span>
</div>
<div class="CodeMirror-measure"></div>
<div style="position: relative; z-index: 1;"></div>
<div class="CodeMirror-cursors">
<div class="CodeMirror-cursor" style="left: 4px; top: 0px; height: 22.85px;"> </div>
</div>
<div class="CodeMirror-code">
<div style="position: relative;">
<div class="CodeMirror-gutter-wrapper" style="left: -30px;">
<div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 21px;">1</div>
</div>
<pre class=" CodeMirror-line ">
<span>
<span cm-text=""></span>
</span>
</pre>
</div>
</div>
</div>
</div>
</div>
</div>
So the problem is how to input value in different lines in code mirror..
Your question is not very clear but I think what you are looking for is to insert text into different lines instead of all on one line. If that's the case, you need to insert \n in your string where you want carriage returns.
An example string would be string sample = "<html>\n <test>\n</html>" which should produce
<html>
<test>
</html>
I'm able to input code mirror with line breaks, by changing the input value to this..
<html>\\r<test>\\r</html>
NB
My Header:
<header>
<div style="float:left;margin-left:20px;">
<div style="float:left; margin-left:10px;margin-top:55px;background-color:#2BC3A7; height:3px; width:200px;"> </div>
<div style="clear:both;float:left;"></div>
<div style="float:left; margin-left:10px;margin-top:5px;font-family:DIN; font-size:12pt;color:#2BC3A7;">Services/Products</div>
</div>
</div>
</header>
I have 2 divs:
<div id="#content1">
<div id="divWelcome" style="margin-top:50px;">
<div id="headerimg" style="position: relative;">
<div style="position: absolute; bottom:255px; left: 20px; width: 550px; font-family:DIN; font-size:23pt; font-weight:600; color: white; letter-spacing:0.01em;">
We offer Cloud solutions for small businesses to help them manage their workflow requirements
</div>
<hr style="height:6px;position: absolute; bottom:210px; left: 20px; width: 490px;"/>
<div style="position: absolute; bottom:175px; left: 20px; width: 550px; font-family:DIN; font-size:14pt; font-weight:500; color: white; letter-spacing:0.01em;">
Our core sectors of expertise are professional services, data management and outsourcing.
</div>
</div>
<div id="divAboutContents" style="margin-top:50px; background-color:red;position: relative;display: none;">
</div>
</div>
</div>
So when the page loads the 1st div shows. The effect I want is when the user presses a button the divFirst gently fades away and the divSecond gently fades in. I have used this bit of jQuery but the affect does not look very pleasing.
<script type="text/javascript">
$(document).ready(function () {
$("#divAbout").click(function () {
$("#headerimg").fadeOut();
$("#divAboutContents").fadeIn();
});
});
</script>
What else can I try/read up on? Thanks
NB
This is part of my CSS
#content1 {
clear: both;
position: absolute;
}
Also I was fading the other one out. just forgot to put it in the question. The affect I get is 'clunky'
'Pleasing' is a very subjective term, however to improve it you could place both div elements within a parent container positioned absolutely so they overlap. You can then fadeToggle() between the two as needed. Something like this:
$('#container').click(function() {
$(this).find('div').fadeToggle();
})
#container > div {
position: absolute;
}
#divSecond {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="container">
<div id="divFirst">some content with images</div>
<div id="divSecond">different content with images</div>
</div>
Click the text to see the fade transition in action.
I'm having some problems with very simple Lightbox behaviour. I need to modify this script to allow users to click on the overlay to close the form and also having problems with it only sitting in the div and not overlaying the whole screen.
http://jsfiddle.net/techrevolt/jkJ7E/
I also want it to fade in when clicked. I have looked on the net but makes no sense to me - I am new to JS and Jquery so any pointers would be great.
CSS:
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:888888;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
float:left;
}
.white_content {
display: none;
position: absolute;
top: 0%;
left: 25%;
width: 50%;
height: 100%;
padding: 16px;
border: none;
background-color: white;
z-index:999999;
overflow: auto;
float:left;
}
.textright{float: right;}
JS:
$(".showpop").click(function(){
$("#light").show();
$("#fade").show();
});
$(".hidepop").click(function(){
$("#light").hide();
$("#fade").hide();
});
HTML:
<input type="submit" class="button" value="Arrange to see a demo" />
<div id="light" class="white_content">
X
<br />
<br />
<form method="post" action="#">
<div class="row half">
<div class="6u"><input type="text" name="name" placeholder="Name" /></div>
<div class="6u"><input type="text" name="email" placeholder="Email" /></div>
</div>
<div class="row half">
<div class="12u"><textarea name="message" placeholder="Message" rows="6"></textarea></div>
</div>
<div class="row">
<div class="12u">
<ul class="actions">
<li><input type="submit" class="button" value="Send Message" /></li>
</ul>
</div>
</div>
</form>
</div>
<div id="fade" class="black_overlay"></div>
Just extending the rest of the answers a bit
Use fadeIn() and fadeOut() inthis way to achieve the kind of effect you want both for 'close button' and for clicking on overlay
Check the FIDDLE
$(".showpop").click(function(){
$("#light").fadeIn();
$("#fade").fadeIn();
});
$(".hidepop").click(function(){
$("#light").fadeOut();
$("#fade").fadeOut();
});
$(".black_overlay").click(function() { $(this).fadeOut(); $("#light").fadeOut(); });
Use fadeOut and fadeIn. See the attached jsfiddle:
http://jsfiddle.net/R8ULU/
$(".showpop").click(function(){
$("#light").fadeIn();
$("#fade").fadeIn();
});
$(".hidepop").click(function(){
$("#light").fadeOut();
$("#fade").fadeOut();
});
Add this
$(".black_overlay").click(function() { $(this).hide(); $("#light").hide(); });
This will let you to close on click of overlay.
Add these lines at end
$('#fade').click(function(){
$(this).hide();
$("#light").hide();
});
updated fiddle
I have tried some usual document object commands like getElement by id/by tag/by name. They all give null, only bale to identify iframe id"my_dash" but can not access innerHTML. Either gives undefined or nothing in alert. I was trying to access the iframe "iframe_Content_portlet1" to change its src by making a javascript function to work on click link but was not working. Please suggest how to access it....
Given below is the code one finds in firebug.
*regarding context from my main code *
<tr>
<td colspan="10">
<!--this is the iframe accessible by main jsp-->**
<iframe id="my_dash" width="990px" height="935px" padding-left:="200px" src="http://172.31.144.171:8080/pentaho/content/dashboards?solution=airport&path=%2FMain&action_name=ATM-Dashboard.xdash">
<!--content inside the main iframe-->**
<html class=" ext-strict" xmlns:pho="http:/www.pentaho.com">
<head>
<body id="ext-gen6" class="pentaho-transparent ext-gecko ext-linux pentaho-page-background">
<div id="wrapper" class="wrapper">
<div id="dashboard-content">
<div id="titlebar" class="title" style="position: absolute; display: block; left: 0px; top: 0px; width: 990px; height: 23px;">
<h1 id="dashboard-title" class="pageTitle">New Dashboard</h1>
</div>
<div id="widget-area" class="widget-area" scrollexception="true" style="display: block; top: 29px; width: 990px; height: 906px; left: 0px; z-index: 30;">
<div id="widget-area-scroll-shim" style="width:100%;height:100%;"></div>
<div id="select-frame-left"></div>
<div id="select-frame-top"></div>
<div id="select-frame-bottom"></div>
<div id="select-frame-right"></div>
<div id="FilterPanel" class="povContainer" style="position: absolute; top: 0px; width: 100%; height: 100%; left: 0px; z-index: 30; display: none;" pho:panel="FilterPanel">
<div id="hbox1" style="position: absolute; top: 0px; width: 990px; height: 300px; left: 0px;">
<div id="Panel_1" class="widgetContainer" style="position: absolute; top: 5px; width: 567.044px; height: 290px; left: 5px; z-index: 30;" pho:panel="Panel_1">
<div class="widget">
<div id="wgtHead-Panel_1" class="wgtHead" ondblclick="pentahoDashboardController.panelTitleDoubleClick('Panel_1')" onclick="pentahoDashboardController.panelTitleClick('Panel_1', true);">
<div id="dataContainer-Panel_1" class="dataContainer" style="height: 265px;">
<div class="rightCorner">
<div class="wgtData">
<div id="content-area-Panel_1" class="panel-contentarea" onclick="pentahoDashboardController.panelTitleClick('Panel_1', false)" style="top: 23px; width: 567.044px; height: 265px; left: 0px;">
<!--this is the iframe I want to access in the same jsp(it is being accessed by another jsp, not included in the main jsp)-->**
<iframe frameborder="0" src="http://172.31.144.171:8080/pentaho/pentaho-solutions/airport/ATM/scorecard/common1.jsp?dashboard_id=1&portlet_id=1" border="0" style="width:100%;height:100%;border:0px">
<html>
<head>
<body>
<style type="text/css">
<div>
<!--this is the iframe I want to access in the same jsp(it is being accessed by another jsp, not included in the main jsp)-->
<iframe id="iframe_Content_Portlet1" width="100%" height="100%" style="overflow:hidden;"src="http://172.31.144.171:8080/pentaho/content/reporting/reportviewer/report.html?solution=airport&path=%2FATM%2Fscorecard&name=atm_scorecard.prpt&locale=en_US&username=joe&password=p##ssw0rd">
<html class="dj_gecko dj_contentbox" xmlns:pho="http:/www.pentaho.com">
<head>
<body class="tundra body pentaho-page-background">
</html>
</iframe>
</body>
</html>
</iframe>
</div>
</div>
</div>
</div>
<div id="wgtFooter-Panel_1" class="wgtFooter">
<div class="rightCorner"></div>
</div>
</div>
</div>
How are you trying to reach what's inside your frame?
Because something along the lines of frames["my_dash"].document.getElementById("XXXX") should work.
See https://developer.mozilla.org/en-US/docs/DOM/window.frames for a little doc on frames.