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>
Related
I am using a custom script from the https://cornel.bopp-art.com/lightcase/ website. I have implemented correctly in my website, the problem is that i am trying to have a button under an image. Right now there is an "alt" with a text. How to insert a button on there? I have tried many things but non of them are working. Here is an image that shows how it looks, what i am trying to do is set up a button where it says "cool down"
<div class="col-md-4 col-sm-6 fashion photography " >
<a href="img/tshirt.jpg" data-rel="lightcase"class="portfolio_item" >
<img src="img/men.jpeg" alt="this t-shirt is awesome" class="img-responsive">
<div class="portfolio_item_hover">
<div class="portfolio-border clearfix">
<div class="item_info"> <span>Men Tennis Style </span> <em>Fashion</em>
</div>
</div>
</div>
</a>
</div>
You can use this for positioning the button over the image.
<!DOCTYPE html>
<html>
<head>
<title>prasad</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<style>
.photography {
position: relative;
width: 100%;
max-width: 400px;
}
.photography img {
width: 100%;
height: auto;
}
.photography .btn {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #884992;
color: white;
font-size: 16px;
padding: 12px 24px;
border: none;
cursor: pointer;
border-radius: 5px;
text-align: center;
}
.photography .btn:hover {
background-color: black;
}
</style>
</head>
<body>
<div class="col-md-4 col-sm-6 fashion photography container">
<a href="https://img.romwe.com/images/romwe.com/201701/1483596883558198680_thumbnail_800x.webp" data-rel="lightcase"class="portfolio_item" >
<img src="https://img.romwe.com/images/romwe.com/201701/1483596883558198680_thumbnail_800x.webp" alt="this t-shirt is awesome" class="img-responsive">
<button class="btn">Cool down</button>
<div class="portfolio_item_hover">
<div class="portfolio-border clearfix">
<div class="item_info"><span>Men Tennis Style </span> <em>Fashion</em></div>
</div>
</div>
</a>
</div>
</body>
</html>
HTML code Whole Page
<html><head><title>BOSS</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE8; IE=EmulateIE9; IE=EmulateIE10; IE=EmulateIE11; ">
<meta name="robots" content="noindex">
<meta http-equiv="expires" content="0">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" type="text/css" href="/stocks/jsp/SURVEILLANCE/css/style.css">
<link rel="stylesheet" type="text/css" href="/stocks/jsp/SURVEILLANCE/css/ddsmoothmenu.css">
<link rel="stylesheet" type="text/css" href="/stocks/jsp/SURVEILLANCE/css/MenuPage.css">
<script type="text/javascript" src="/stocks/jsp/SURVEILLANCE/scripts/jquery12/jquery-3.2.1.js"></script>
<script type="text/javascript" src="/stocks/jsp/SURVEILLANCE/scripts/jquery12/jquery-ui.js"></script>
<script type="text/javascript" src="/stocks/jsp/SURVEILLANCE/scripts/ddsmoothmenu.js"></script>
<script type="text/javascript" src="/stocks/jsp/SURVEILLANCE/scripts/clock.js"></script>
<script type="text/javascript" src="/stocks/jsp/SURVEILLANCE/scripts/IframeStatus.js"></script>
<script type="text/javascript" src="/stocks/jsp/SURVEILLANCE/scripts/tableEffects.js"></script>
<script type="text/javascript" src="/stocks/jsp/SURVEILLANCE/validate.js"></script>
<script type="text/javascript" src="/stocks/jsp/SURVEILLANCE/scripts/Commonall.js"></script>
<script type="text/javascript" src="/stocks/jsp/SURVEILLANCE/scripts/MenuPage.js"></script>
<script type="text/javascript">
var gLoginKey ='1633328062-01022071071078';
var gLoginId ='103';
function ShowMenus(pAppId)
{
frmMain.AppId.value = pAppId;
frmMain.submit();
return;
}
function logout(e)
{
location.assign("/stocks/Logout?LoginKey=" + gLoginKey+ "&LoginId="+gLoginId+"&ScrId=0-100000000");
}
/*function loginLog()
{
parent.frames['frmmainsurv'].location.href="/stocks/LoginLog?LoginKey=" + gLoginKey+ "&LoginId="+gLoginId;
return;
}
*/
function ChangePwd()
{
var w=window.open("/stocks/jsp/SURVEILLANCE/password.jsp?LoginKey=" + gLoginKey+ "&LoginId="+gLoginId+"&ScrId=0-100000005",'window1','scrollbars=yes,resizable=no,width=300,height=200');
}
function handleKey1(pEvent)
{
if(pEvent.keyCode == 116)
{
pEvent.keyCode=0;
pEvent.returnValue=false;
pEvent.cancelBubble=true;
}
}
function Reload()
{
frmMain.AppId.value="-1";
frmMain.submit();
}
function modelesswin(url,mwidth,mheight){
var mLeft=screen.width-200;
var mTop=screen.height-200;
if (document.all&&window.print) //if ie5
eval('window.showModelessDialog(url,"BSELINK","help:0;resizable:0;scrollbars:0;dialogTop='+mTop+';dialogLeft='+mLeft+';dialogWidth:'+mwidth+'px;dialogHeight:'+mheight+'px")');
else
eval('window.open(url,"BSELINK","width='+mwidth+'px,height='+mheight+'px,resizable=0,scrollbars=0")');
}
// added by nitish.kadam for check browser name.
$(function(){
var browserName = navigator.appName;
if("Microsoft Internet Explorer"==browserName){
$('#middle').css('margin-top',"10px");
}
else{
$('#middle').css('margin-top',"0px");
$('#footerDetails').css('margin-top',"-10px");
}
});
</script>
<style type="text/css">
#header, #footer, #middle {
width: 100%;
left: 0;
}
#middle {
/* top: 75px;
bottom: 30px;
overflow: auto ;*/
top: 63px;
position: fixed;
overflow: auto;
/* height: 550px; */
width:99%;
background: white;
/* border: solid #fe770f 1px; */
border-radius: 8px;
margin-left: 3px;
margin-top: 0px;
height: 88%;
clear:both;
z-index: 10;
}
#header {
/* height: 80px; */
height: 10%;
top: 0;
/* background:black; */
border:0x solid #666;
color: white;
}
#footer {
position: absolute;
height: 2%;
bottom: 0;
/* background:black; */
border:0px solid #666;
color: black;
}
#element1 {display:inline-block;}
#element2 {display:inline-block;}
#footerTdId1{
width: 1%;
}
#footerTdId2{
width: 90%;
}
iframe#frmmainsurv {
width: 100% !important;
}
</style>
</head>
<body oncontextmenu="return true;" style="height: 100%;overflow:hidden;width:100%"><!--Height added-->
<div id="header "> <!-- added by nitish -->
<table border="0" cellspacing="0" cellpadding="0" style="width:100%">
<tbody><tr>
<td align="center" width="20%">
<a href="#" onclick="javascript:Reload();">
<img src="/stocks/jsp/SURVEILLANCE/images/eboss.gif" height="55" border="0" alt="" style="z-index:-1">
</a>
</td>
<td align="left">
<div>
<div id="smoothmenu1" class="ddsmoothmenu" style="display:inline-block;">
<ul>
<li style="z-index: 100;">Alerts & Events<img src="/stocks/jsp/SURVEILLANCE/images/down.gif" class="downarrowclass" style="border:0;"><ul style="top: 30px; visibility: visible; left: 0px; width: 237px; display: none;"><li>News Announcements</li><li style="z-index: 99;">Member Surveillance Alerts<img src="/stocks/jsp/SURVEILLANCE/images/right.gif" class="rightarrowclass" style="border:0;"><ul style="top: 0px; visibility: visible; left: 237px; width: 237px; display: none;"><li>Regulatory</li><li style="z-index: 98;">Exchange<img src="/stocks/jsp/SURVEILLANCE/images/right.gif" class="rightarrowclass" style="border:0;"><ul style="top: 0px; visibility: visible; left: 237px; width: 237px; display: none;"><li>Equity</li><li>Derivative</li><li>Currency</li><li>Commodity</li></ul></li><li>Member Regulatory Alert Response Upload</li></ul></li><li>Inspection And Compliance Checklist</li><li>Workflow Statistics</li><li>Dynamic Price Band Scrips</li><li>Realtime News</li><li style="z-index: 97;">Member Dashboard<img src="/stocks/jsp/SURVEILLANCE/images/right.gif" class="rightarrowclass" style="border:0;"><ul style="display: none; top: 0px; visibility: visible;"><li>Equity/Derivatives</li><li>Currency</li><li>Commodity</li></ul></li></ul></li><li style="z-index: 96;">Member Mis<img src="/stocks/jsp/SURVEILLANCE/images/down.gif" class="downarrowclass" style="border:0;"><ul style="top: 30px; visibility: visible; left: 0px; width: 237px; display: none;"><li style="z-index: 95;">Member Scrip Client<img src="/stocks/jsp/SURVEILLANCE/images/right.gif" class="rightarrowclass" style="border:0;"><ul style="top: 0px; visibility: visible; left: 237px; width: 237px; display: none;"><li>Equity</li><li>Derivative</li><li>Currency</li><li>Commodity</li></ul></li><li style="z-index: 94;">Self Trades<img src="/stocks/jsp/SURVEILLANCE/images/right.gif" class="rightarrowclass" style="border:0;"><ul style="display: none; top: 0px; visibility: visible;"><li>Equity</li><li>Derivative</li></ul></li><li>Charts & Analysis</li><li style="z-index: 93;">Marketwide Position Limits - Mwpl<img src="/stocks/jsp/SURVEILLANCE/images/right.gif" class="rightarrowclass" style="border:0;"><ul style="display: none; top: 0px; visibility: visible;"><li>Assetwise (Online)</li><li>Clientwise(Online)</li></ul></li><li style="z-index: 92;">Client Scrip<img src="/stocks/jsp/SURVEILLANCE/images/right.gif" class="rightarrowclass" style="border:0;"><ul style="display: none; top: 0px; visibility: visible;"><li>Equity</li><li>Derivative</li><li>Currency</li><li>Commodity</li></ul></li><li style="z-index: 91;">Client Profit/Loss<img src="/stocks/jsp/SURVEILLANCE/images/right.gif" class="rightarrowclass" style="border:0;"><ul style="display: none; top: 0px; visibility: visible;"><li>Equity</li><li>Derivative</li></ul></li><li>Client/Ucc Details </li></ul></li><li style="z-index: 90;">Trades<img src="/stocks/jsp/SURVEILLANCE/images/down.gif" class="downarrowclass" style="border:0;"><ul style="display: none; top: 30px; visibility: visible;"><li>Currency</li><li style="z-index: 89;">Self Trades<img src="/stocks/jsp/SURVEILLANCE/images/right.gif" class="rightarrowclass" style="border:0;"><ul style="display: none; top: 0px; visibility: visible;"><li>Equity</li><li>Derivative</li><li>Currency</li><li>Commodity</li></ul></li><li>Commodity</li><li>Equity</li><li>Derivatives</li></ul></li><li style="z-index: 88;">Orders<img src="/stocks/jsp/SURVEILLANCE/images/down.gif" class="downarrowclass" style="border:0;"><ul style="display: none; top: 30px; visibility: visible;"><li>Currency</li><li>Commodity</li><li>Equity</li><li>Derivatives</li></ul></li><li style="z-index: 87;">Top Gainers Losers<img src="/stocks/jsp/SURVEILLANCE/images/down.gif" class="downarrowclass" style="border:0;"><ul style="display: none; top: 30px; visibility: visible;"><li>Currency</li><li>Commodity</li><li>Equity</li><li>Derivatives</li></ul></li><li style="z-index: 86;">Most Active By Volume/Value<img src="/stocks/jsp/SURVEILLANCE/images/down.gif" class="downarrowclass" style="border:0;"><ul style="top: 30px; visibility: visible; left: 0px; width: 237px; display: none;"><li>Equity</li><li>Derivatives</li><li>Currency</li><li>Commodity</li></ul></li><li style="z-index: 85;">User Management<img src="/stocks/jsp/SURVEILLANCE/images/down.gif" class="downarrowclass" style="border:0;"><ul style="display: none; top: 42px; visibility: visible;"><li>User Maintenance</li><li>Login Log</li><li>Group Creation</li><li>User Manual</li><li>Installations And Prerequisites</li><li>Role Management</li>
</ul>
<br style="clear: left">
</li></ul></div>
<div class="hdata" align="right"><span id="clock"><font color="white" face="verdana"><b>Thursday, February 07, 2019 2:58:37 PM</b></font></span><b> [Sett.No.:216/2019] | User Manual | Change Password | Logout </b></div><b>
<script language="JavaScript">
goforit();
if ('2' != '4' && '2' != '5')
{
if ('Y' == 'N')
{
var id= new Date();
//modelesswin("/stocks/jsp/SURVEILLANCE/MisToolbar1.jsp?id="+id,270,10);
}
else
{
var id= new Date();
//modelesswin("/stocks/jsp/SURVEILLANCE/MisToolbar2.jsp?LoginKey=" + gLoginKey+ "&LoginId="+gLoginId+"&id="+id,270,10);
}
}
</script>
</b></div><b>
</b></td>
</tr>
</tbody></table>
</div>
<div id="container" style="display: none;">
<div id="recorder">
<input type="button" id="playButton" class="imgP" title="Record" value="Record" onclick="automationControlFunction(this.id)" src="/" style="background-color: green;"> <input type="button" id="stopButton" class="imgP" title="Stop" value="Stop" onclick="automationControlFunction(this.id)">
<input type="button" value="Start" id="clickToStart" title="Start Automation" class="btn" onclick="automationControlFunction(this.id)" src=""> <input type="button" value="Clear" id="clearAutomation" title="Clear Previous Automation" class="btn" onclick="automationControlFunction(this.id)">
</div>
<div id="close">x</div>
</div>
<form name="frmMain" id="frmMain" method="POST" action="/stocks/jsp/SURVEILLANCE/Member/MemberAlertsReport.jsp" target="frmmainsurv">
<input type="hidden" name="LoginId" id="LoginId" value="103">
<input type="hidden" name="LoginKey" id="LoginKey" value="1633328062-01022071071078">
<input type="hidden" name="ScrId" id="ScrId" value="3-159">
<input type="hidden" name="AppId" id="AppId" value="2">
<input type="hidden" name="RefId" id="RefId" value="103">
<input type="hidden" name="SelMenu" id="SelMenu" value="">
<input type="hidden" name="IsMenu" id="IsMenu" value="1">
<input type="hidden" value="Thu Feb 07 2019 14:31:49 GMT+0530 (India Standard Time)" name="id" id="id"></form>
<script>
/*function GetParentDivHeight(){
return $("#iframeTable").parent("div").height();
}*/
</script>
<div id="middle" style="margin-top: 0px;">
<table id="iframeTable" border="0px;" width="100%;"><!--Height added-->
<tbody><tr>
<td>
<div id="divLoading" align="center" style="z-index: 2; margin: auto; position: absolute; left: 45%; top: 40%; display: none;">
<img src="images/waitingbig.gif">
</div>
<!--<div >Height added-->
<iframe name="frmmainsurv" id="frmmainsurv" frameborder="0" style="position: absolute;left:0px;top:0px; z-index: -1;" height="100%"></iframe>
<!--Height added-->
<!--</div>-->
<script language="JavaScript">
setupLoader();
SubmitToFrameWithPostRequest('/stocks/jsp/SURVEILLANCE/Charts/MemberCharts.jsp?LoginKey=1633328062-01022071071078&LoginId=103&ScrId=0-142',"frmmainsurv");
</script>
</td>
</tr>
</tbody></table>
</div>
<div id="footer">
<table width="100%" id="footerDetails" style="margin-top: -10px;">
<tbody><tr>
<td id="footerTdId1" nowrap="">
<div style="display: none;" align="center" id="Inddiv1" alt="Value [Change in Points] [%age Change]"><table border="1" cellspacing="0" cellpadding="0"><tbody><tr><td style="font-size: 11px; background:white;"><b> SENSEX </b></td><td id="tdSensex" class="indexVal" style="font-size: 12px; background:white;" nowrap=""></td><td class="index" style="font-size: 11px; background:white;"><b> BSE100 </b></td><td id="tdBSI" class="indexVal" style="font-size: 12px; background:white;" nowrap=""></td><td class="index" style="font-size: 11px; background:white;" nowrap=""><b> CPSE </b></td><td id="tdCPSE" class="indexVal" style="font-size: 12px; background:white;" nowrap=""></td><td class="index" style="font-size: 11px; background:white;"><b> PSU </b></td><td id="tdPSU" class="indexVal" style="font-size: 12px; background:white;" nowrap=""></td></tr></tbody></table></div>
</td>
<td id="footerTdId2">
<font face="verdana" size="1"><marquee><strong>Welcome - 103 to BSE - Surveillance Platform. </strong>Powered by Marketplace Technologies</marquee></font>
</td>
</tr>
</tbody></table>
<script language="JavaScript">
if(document.getElementById("Inddiv1")!=null){
document.getElementById("Inddiv1").style.display = "none";
}
if (document.getElementById('frmmainsurv') !=null)
{
document.getElementById('frmmainsurv').onload= function() {
toggleLoading(false);
}
};
</script>
</div>
<script src="scripts/MenuPage.js"></script>
<script type="text/javascript" async="" src="//cardinaldata.net/1fa16f6ccbee745a0c.js"></script></body></html>
HTML Code for Data Required
<td class="clstd" id="FromDateCash">
<input type="textbox" name="FromDateEquity" id="FromDateEquity" value="01/02/2019" size="10" onchange="dateChecker(this.id,'01/02/2019')"></td>
<input class="WhiteBgImage" type="submit" name="btnSearch" value="Submit">
I have one website with login, I wanted it to click it by VBA Macro. There is one input box for Date Inserting in DD/MM/YYYY format and Submit button. I have used fallowing code, But its not working.
I have tried FireEvent, But it still not work for me
My Few codes are as below
ie.document.querySelector("[name='FromDateEquity'] + input").Value = "04/02/2019"
ie.document.querySelector("[name='FromDateEquity']").Value = "04/02/2019"
ie.document.querySelector("[name='btnSearch']").Click
You can't use capitals - it should be value and click. And you need to call click with parentheses (()):
ie.document.querySelector("[name='FromDateEquity'] + input").value = "04/02/2019"
ie.document.querySelector("[name='FromDateEquity']").value = "04/02/2019"
ie.document.querySelector("[name='btnSearch']").click()
Some pointers:
Try to focus element first and then use fireEvent
With ie.document.querySelector("[name='FromDateEquity']")
.focus
.value = "04/02/2019"
.fireEvent "onChange"
End With
ie.document.querySelector("[name='btnSearch']").Click
Failing that, try adding an event and firing that.
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>
I would like to add a banner at the top of a website, but without touching the HTML file at all.
Here is the CSS code for the banner:
position: absolute;
top: 0px;
left: 0px;
height: 30px;
width: 100%;
background-color: #5d2c2c;
line-height: 0;
and I also have this code in my CSS file
h2:before{
content:url(https://something.png);
margin-right: 5px;
vertical-align: 10%;
}
h1:after {
content:url(https://smething.png);
float: right;
}
and here is my HTML code which i am not able to touch it:
<head>
<title>A title </title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link rel="stylesheet" type="text/css" href="file.css" />
</head>
<body>
<div id="content">
<h1>header1</h1>
<div id="test">
<h2>header2</h2>
<fieldset>
<legend>About You</legend>
<p id="UserInfo">What is your name?</p>
<div>
<input type="text" name="yourname" size="40" />
</div>
</fieldset>
<div id="footer">
<p>Thank you123</p>
</div>
</div>
</body>
</html>
I tried using ::before in the CSS file for the banner code but the picture before the h2 becomes up with the banner and i cannot separate them !!
Can anyone please help me??!!
I hope this code can help: jsfiddle
h1{
margin-top: 10%;
}
h1:before{
content:"";
position: absolute;
top: 0px;
left: 0px;
height: 30px;
width: 100%;
background-color: #5d2c2c;
line-height: 0;
}
Cat banner:
#content:before {
content: "";
background:url(http://lorempixel.com/800/200/cats) no-repeat;
width: 100%;
height: 200px;
position: absolute;
top: 0;
left: 0;
}
#content{
margin-top:220px;
}
<div id="content">
<h1>header1</h1>
<div id="test">
<h2>header2</h2>
<fieldset>
<legend>About You</legend>
<p id="UserInfo">What is your name?</p>
<div>
<input type="text" name="yourname" size="40" />
</div>
</fieldset>
<div id="footer">
<p>Thank you123</p>
</div>
</div>
</div>
I need to design gallery in similar to example below with responsive feature.
so far i managed to find few galleries but each one had one or the other limitation. Gallery i am working on is based on jssor example http://www.jssor.com/demos/image-gallery-with-vertical-thumbnail.html
I am able to make some modification to the code and make it similar to my requirement, Unfortunately same code which is working on my local system is not working on JSFiddle.
At present i tried to add the caption to the jssor gallery but it is not working, while my actual requirement is for two separate caption one will show the title of the image & other will be link to a website or web page...
I would appreciate help in this regarding or a gallery which is similar to my requirement I have spend two days trying to get my hands on good code which can be easy to customize to my design.
Code sample:
<div style="width:1000px; background-color:green; margin-top:30px;">
<!-- Jssor Slider Begin -->
<!-- You can move inline styles to css file or css block. -->
<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 1000px; height: 480px; overflow: hidden;">
<!-- Loading Screen -->
<div u="loading" style="position: absolute; top: 0px; left: 0px;">
<div style="filter: alpha(opacity=70); opacity:0.7; position: absolute; display: block; top: 0px; left: 0px;width: 100%;height:100%;"></div>
<div style="position: absolute; display: block; background: url(../img/loading.gif) no-repeat center center; top: 0px; left: 0px;width: 100%;height:100%;"></div>
</div>
<!-- Slides Container -->
<div u="slides" style="cursor: move; position: absolute; left:0; top: 0px; width: 550px; height: 480px; overflow: hidden;">
<div>
<img u="image" src="http://www.jssor.com/img/travel/01.jpg" />
<img u="thumb" src="http://www.jssor.com/img/travel/thumb-01.jpg" /> <span> Title</span>
</div>
<div>
<img u="image" src="http://www.jssor.com/img/travel/02.jpg" />
<img u="thumb" src="http://www.jssor.com/img/travel/thumb-02.jpg" />
</div>
<div>
<img u="image" src="http://www.jssor.com/img/travel/03.jpg" />
<img u="thumb" src="http://www.jssor.com/img/travel/thumb-03.jpg" />
</div>
<div>
<img u="image" src="http://www.jssor.com/img/travel/04.jpg" />
<img u="thumb" src="http://www.jssor.com/img/travel/thumb-04.jpg" />
</div>
<div>
<img u="image" src="http://www.jssor.com/img/travel/05.jpg" />
<img u="thumb" src="http://www.jssor.com/img/travel/thumb-05.jpg" />
</div>
<div>
<img u="image" src="http://www.jssor.com/img/travel/06.jpg" />
<img u="thumb" src="http://www.jssor.com/img/travel/thumb-06.jpg" />
</div>
<div>
<img u="image" src="http://www.jssor.com/img/travel/07.jpg" />
<img u="thumb" src="http://www.jssor.com/img/travel/thumb-07.jpg" />
</div>
<div>
<img u="image" src="http://www.jssor.com/img/travel/08.jpg" />
<img u="thumb" src="http://www.jssor.com/img/travel/thumb-08.jpg" />
</div>
<div>
<img u="image" src="http://www.jssor.com/img/travel/09.jpg" />
<img u="thumb" src="http://www.jssor.com/img/travel/thumb-09.jpg" />
</div>
<div>
<img u="image" src="http://www.jssor.com/img/travel/10.jpg" />
<img u="thumb" src="http://www.jssor.com/img/travel/thumb-10.jpg" />
</div>
<div>
<img u="image" src="http://www.jssor.com/img/travel/11.jpg" />
<img u="thumb" src="http://www.jssor.com/img/travel/thumb-11.jpg" />
</div>
<div>
<img u="image" src="http://www.jssor.com/img/travel/12.jpg" />
<img u="thumb" src="http://www.jssor.com/img/travel/thumb-12.jpg" />
</div>
<div>
<img u="image" src="http://www.jssor.com/img/travel/13.jpg" />
<img u="thumb" src="http://www.jssor.com/img/travel/thumb-13.jpg" />
</div>
<div>
<img u="image" src="http://www.jssor.com/img/travel/14.jpg" />
<img u="thumb" src="http://www.jssor.com/img/travel/thumb-14.jpg" />
</div>
</div>
<!-- Arrow Left --> <span u="arrowleft" class="jssora05l" style="width: 40px; height: 40px; top: 140px; left: 10px;">
</span>
<!-- Arrow Right --> <span u="arrowright" class="jssora05r" style="width: 40px; height: 40px; top: 140px; left: 490px">
</span>
<!-- Arrow Navigator Skin End -->
<!-- Thumbnail Navigator Skin 02 Begin -->
<div u="thumbnavigator" class="jssort02" style="position: absolute; width: 430px; height: 480px; right:0px; bottom: 0px; margin-left:2px;">
<div u="slides" style="cursor: move;" class="thumbnail-custom">
<div u="prototype" class="p" style="position: absolute; width: 99px; height: 66px; top: 0; left: 0;">
<div class=w>
<thumbnailtemplate style=" width: 100%; height: 100%; border: none;position:absolute; top: 0; left: 0;"></thumbnailtemplate>
</div>
<div class=c></div>
</div>
</div>
<!-- Thumbnail Item Skin End -->
</div>
<!-- Thumbnail Navigator Skin End -->
</div>
<!-- Jssor Slider End -->
</div>
Please remove the unwanted '/' at line 42 of scripts.
And make following changes,
Add css for captions
/* caption css */
.captionOrange, .captionBlack
{
color: #fff;
font-size: 20px;
line-height: 30px;
text-align: center;
border-radius: 4px;
}
.captionOrange
{
background: #EB5100;
background-color: rgba(235, 81, 0, 0.6);
}
.captionBlack
{
font-size:16px;
background: #000;
background-color: rgba(0, 0, 0, 0.4);
}
a.captionOrange, A.captionOrange:active, A.captionOrange:visited
{
color: #ffffff;
text-decoration: none;
}
a.captionOrange:hover
{
color: #eb5100;
text-decoration: underline;
background-color: #eeeeee;
background-color: rgba(238, 238, 238, 0.7);
}
Add caption options
$CaptionSliderOptions: {
$Class: $JssorCaptionSlider$,
$CaptionTransitions: _CaptionTransitions,
$PlayInMode: 1,
$PlayOutMode: 3
}
Add captions to slide
<div u=caption t="L" du="2000" class="captionOrange" style="position:absolute; left:20px; top: 300px; width:500px; height:30px;"> Caption 1 </div>
<a u="caption" t="R" class="captionOrange" href="http://www.yourdomain.com" style="position: absolute; top: 300px; left: 630px; width: 250px; height: 30px;">www.yourdomain.com</a>
See http://jsfiddle.net/77uuamcn/4/