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>
Related
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
This has been asked several times across the internet; however, I can't get a solution that works for me. I need to maintain the ability to have vertical scrolling but hide the scrollbar from view at all times in the y direction.
I need my #content-main div to scroll independently from every other div. This works as is; however, I have a scrollbar I need to get rid of but I don't know how or why it is so difficult to do.
My code is set up like so:
<body>
<div id="ipad">
<div id="sidebar-main">
<div id="logo-main">Title</div>
<div class="sidebar-option"></div>
<div class="sidebar-option"></div>
<div class="sidebar-option"></div>
<div class="sidebar-option"></div>
<div class="sidebar-option"></div>
<div class="sidebar-option"></div>
<div class="sidebar-option"></div>
<div class="sidebar-option"></div>
</div>
<div id="content-main">
<div id="search-main">
<div id="category-search">
<i id="hamburger-icon" class="fa fa-bars"></i>
<input type="text" placeholder="auto loans" />
<i id="search-icon" class="fa fa-search"></i>
</div>
</div>
<div id="page-content">
<img id="home-img" src="home-page.png" /> /* temp */
</div>
</div>
</div>
</body>
And the CSS relevant for what I'm trying to do:
* {
font-family: 'Open Sans', sans-serif;
margin: 0;
}
html, body {
margin: 10px;
padding: 0;
background: #ccc;
overflow: hidden;
}
#ipad {
padding: 0;
margin: 0;
width: 768px;
height: 1024px;
background: #fff;
overflow: hidden;
}
#content-main {
width: 600px;
height: 100%;
float: right;
overflow: auto;
}
I've seen this "solution" but it does not work for me: http://jsfiddle.net/5GCsJ/954/
And I've seen this but these did not work when applied to my #content-main div: http://blogs.msdn.com/b/kurlak/archive/2013/11/03/hiding-vertical-scrollbars-with-pure-css-in-chrome-ie-6-firefox-opera-and-safari.aspx
Any help would be greatly appreciated.
I have given CSS for two div separately #content-main div to scroll independently from every other div. And Should Close the DIV of #ipad div before start of #content-main div. here is the code of what you want.
<body>
<div id="ipad">
<div id="sidebar-main">
<div id="logo-main">Title</div>
<div class="sidebar-option"></div>
<div class="sidebar-option"></div>
<div class="sidebar-option"></div>
<div class="sidebar-option"></div>
<div class="sidebar-option"></div>
<div class="sidebar-option"></div>
<div class="sidebar-option"></div>
<div class="sidebar-option"></div>
</div>
</div>
<div id="content-main">
<div id="search-main">
<div id="category-search">
<i id="hamburger-icon" class="fa fa-bars"></i>
<input type="text" placeholder="auto loans" />
<i id="search-icon" class="fa fa-search"></i>
</div>
</div>
<div id="page-content">
<img id="home-img" src="home-page.png" /> /* temp */
</div>
</div>
<style>
*{margin:0;}
#ipad{
height: 300px;
width: 100%;
border: 1px solid green;
overflow: hidden;
}
#sidebar-main{
width: 100%;
height: 99%;
border: 1px solid blue;
overflow: auto;
padding-right: 15px;
}
#content-main{
width: 100%;
height: 100px;
border: 1px solid blue;
overflow: auto;
padding-right: 15px;
}
html, body{
height: 99%;
border: 1px solid red;
overflow:hidden;
}
</style>
I have situation where i have to delete all element(.bxwrapper) except last bxwrapper which is containing ul li from the html for this i have written jquery code which is not working properly please suggest.?
<div class="row" id="customBx">
<div class="bx-wrapper" style="max-width: 100%;">
<div class="bx-viewport" style="width: 100%; overflow: hidden; position: relative; height: 336px;">
<div class="bx-wrapper" style="max-width: 100%;">
<div class="bx-viewport" style="width: 100%; overflow: hidden; position: relative; height: 335px;">
<div class="bx-wrapper" style="max-width: 100%;">
<div class="bx-viewport" style="width: 100%; overflow: hidden; position: relative; height: 333px;">
<div class="bx-wrapper" style="max-width: 100%;">
<div class="bx-viewport" style="width: 100%; overflow: hidden; position: relative; height: 331px;">
<ul class="bxslider">
<li class="edSel edBxSlider editBxSlider edRemove" style="float: left; list-style: none; position: relative; width: 990px;"></li>
<li class="edSel edBxSlider editBxSlider edRemove" style="float: left; list-style: none; position: relative; width: 990px;"></li>
</ul>
</div>
<div class="bx-controls bx-has-controls-direction">
<div class="bx-controls-direction">
<a class="bx-prev" href="">Prev</a><a class="bx-next" href="">Next</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$('.bx-wrapper:not(:last-child)').remove();
</script>
You can use detach() so try this:
var $lastChild = $('.bx-wrapper').last().detach();
$('#customBx').html($lastChild);
Or Simply
$('#customBx').html($('.bx-wrapper').last());
You should first clone it then remove them.
var list = $('ul.bxslider').clone(true, true);
$('.bx-wrapper').remove();
Then append the cloned element to body or some other element.
$('#customBx').html('<div class="bx-viewport" style="width: 100%; overflow: hidden; position: relative; height: 331px;"></div>').find('.bx-viewport').append( + list + );
You also try with this:
var $lastChildren = $('ul.bxslider').parent().parent('.bx-wrapper').html();
$('#customBx').html($lastChildren);
but use into below jquery portion
$(document).ready(function(){
// Above code
})
I have similar case like facebook wall.
In place of post in my case user enters URL.
Initially it looks like this:
I have text box for this in place of text area.
Now when user takes cursor it changes to :
Problem with me is how I expand textbox and show button like share in facebook when user takes cursor into textbox.
More when user increase the content into textarea it, downside div which contains button automatically move down.
In my case when user enters url , I show url preview below text box. preview size varies. So how can i create similar case show that button below it automatically move downward.
MY initial view:
When user enter cursor into Text box it changes to:
I have manually place buttons at some distance. I want them to automatically repositioned as per preview size.
when user enters url it looks like this:
I want to show buttons just below textbox like facebook does. When url entered as per preview size the buttons should move downward.
Any idea how can I achieve this?
Buttons are css button, placed into div. Working in PHP.
Source code:
http://codetidy.com/6983/
<html>
<head>
<html xmlns:fb="http://ogp.me/ns/fb#">
<meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
<meta content="utf-8" http-equiv="encoding" />
<link href="content/rateit.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<link href="content/bigstars.css" rel="stylesheet" type="text/css">
<style>
//css for button
label {
color: #B90000; /* makes the text-black */
}
label2 {
color: #3b5999; /* makes the text-black */
}
</style>
<link rel="stylesheet" class="cssStatics" type="text/css" href="css/stylesheet.css" />
<link rel="stylesheet" class="cssButtons" type="text/css" href="css/linkPreview.css" />
<script type="text/javascript" src="js/jquery.js" ></script>
<script type="text/javascript" src="js/linkPreview.js" ></script>
<script>
$(document).ready(function() {
$('.linkPreview').linkPreview();
// setting max number of images $('.linkPreview').linkPreview({imageQuantity: "put here the number"});
// e.g. $('.linkPreview').linkPreview({imageQuantity: 15});
});
</script>
</head>
<body style="height: 560px">
<div>
<img alt="" src= "3.png" style="top: 15px; right: 689px; position: absolute; height: 91px; width: 417px"/>
</div>
<div >
<div style="top: 20; left:20"> <img id="i1" src=""> </img>
</div>
<div class="rateit bigstars" id="rateit99" style="z-index: 1; display:none; left: 45px; top: 45px;" data-rateit-starwidth="32" data-rateit-starheight="32">
<label color="red" style="z-index: 1; left: 600px; top: 180px;" onclick="alert($('#rateit99').rateit('value'))">
<b>
Rate Me
</b>
</label>
</div>
<form action="data.php" method="POST" onsubmit="showUser(this, event)">
<!-- <div style="z-index: 1; left: 420px; top: 40px; position: absolute; margin-top: 0px">
<label><b>Enter URL:</b></label><br/>
</div> -->
<div style=" width: 15%; margin: auto; margin-top: -10px; text-decoration: none; text-shadow: 0 1px 0 #fff; padding: 10px 20px; text-align: justify; ">
<div class="linkPreview" style="z-index: 2;">
<div id="previewLoading"></div>
<div style="float: left;">
<div style="left: 420px; top: 40px; position: absolute; margin-top: 0px">
<input type="text" id="text" name="sent" contenteditable="true" style=" text-align: left; height: 30px; width:512px; " placeholder="Enter URL ..."/></input>
<div id="postPreview" style="display:none"></div>
</div>
<div style="clear: both"></div>
</div>
<div style="left: 420px; top: 70px; position: absolute; margin-top: 0px">
<div id="preview">
<div id="previewImages">
<div id="previewImage"><img src="img/loader.gif" style="margin-left: 43%; margin-top: 39%;" ></img>
</div>
<input type="hidden" id="photoNumber" value="0" />
</div>
<div id="previewContent">
<div id="closePreview" title="Remove" ></div>
<div id="previewTitle"></div>
<div id="previewUrl"></div>
<div id="previewDescription"></div>
<div id="hiddenDescription"></div>
<div id="previewButtons" >
<div id="previewPreviousImg" class="buttonLeftDeactive" ></div><div id="previewNextImg" class="buttonRightDeactive" ></div>
<div class="photoNumbers" ></div>
<div class="chooseThumbnail">
Choose a thumbnail
</div>
</div>
<input type="checkbox" id="noThumb" class="noThumbCb" />
<div class="nT" >
<span id="noThumbDiv" >No thumbnail</span>
</div>
</div>
<div style="clear: both"></div>
</div>
</div>
<div style="clear: both"></div>
<div class="previewPostedList"></div>
</div>
</div>
<div style="z-index: 1; left: 420px; top: 280px; position: absolute; margin-top: 0px" onclick="myFunction(document.getElementById('text').value)" >
<button onclick="show2(); myfunc();" id="b1" >
Get Sentiment
</button>
</div>
<div id="d1" height="40" width="60" name="sent2" style=" border:1px solid black; z-index: 1; left: 950px; top:80px; position: absolute; margin-top: 0px" placeholder="Preview title" >
</div>
<div id="d2" height="40" style="border:1px solid black; z-index: 1; left: 950px; top:100px; position: absolute; margin-top: 0px; min-width:60; overflow:auto" placeholder="Preview Url">
</div>
<div id="d3" height="80" border="1" style="border:1px solid black; z-index: 1; left: 950px; top:140px; position: absolute; margin-top: 0px" placeholder="Preview Desciption">
</div>
</form>
<div style="z-index: 1; left: 720px; top:280px; position: absolute; margin-top: 0px">
<button onclick="makeAjaxCall(); return false;" value="View Graph" >
View Graph
</button>
</div>
</div>
<h4>
<div id="txtHint" align="justify" style="z-index: 1; display:none; color:#C7F0FF; left: 35px; top: 260px; padding: 20px; position: absolute; border:1px; margin-top: 0px; width:300px;height:350px;overflow:auto; -webkit-border-radius: 12px; -moz-border-radius: 7px; border-radius:7px; background: -webkit-gradient(linear, left top, left bottom,color-stop(100%, #F70247), color-stop(150%, white), color-stop(100%, #D7E9F5)); background: -moz-linear-gradient(top, #F70247 0%, #F70247 10%, #F70247 130%); ">
</div>
</h4>
<script src="content/jquery.rateit.js" type="text/javascript"></script>
</body>
</html>
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.