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>
Related
I'm trying to shuffle (on button click) multiple cards that are in the same container, using only javascript. They basically need to change position every time I click the button.
My idea was to make a function that would on click set their position to absolute, with top and left 0,so they would all overlap. I've managed to do that, but I'm not sure how to proceed and what to do next.
Maybe this isn't even a good way to do it. So if there is simpler solution, feel free to share it with me.
I started learning javascript couple of months ago, so my knowledge is still pretty basic.
Any help is welcome
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/CSS" href="memory.css" />
</head>
<body>
<div class="card-container">
<div class="first-card card" data-value="1">
<div class="front">
front
</div>
<div class="back">
back
</div>
</div>
<div class="second-card card" data-value="2">
<div class="front">
front
</div>
<div class="back">
back
</div>
</div>
<div class="third-card card" data-value="3">
<div class="front">
front
</div>
<div class="back">
back
</div>
</div>
<div class="fourth-card card" data-value="4">
<div class="front">
front
</div>
<div class="back">
back
</div>
</div>
<div class="first-card card" data-value="1">
<div class="front">
front
</div>
<div class="back">
back
</div>
</div>
<div class="second-card card" data-value="2">
<div class="front">
front
</div>
<div class="back">
back
</div>
</div>
<div class="third-card card" data-value="3">
<div class="front">
front
</div>
<div class="back">
back
</div>
</div>
<div class="fourth-card card" data-value="4">
<div class="front">
front
</div>
<div class="back">
back
</div>
</div>
</div>
<div class="button-container">
<div>
<button class="flip-all-cards">FLIP ALL</button>
</div>
<div>
<button class="position-button">SHUFFLE CARDS</button>
</div>
</div>
<script src="memory.js"></script>
</body>
</html>
javascript
document.querySelectorAll(".first-card").forEach(container => {
container.addEventListener('click',flipCard)
})
document.querySelectorAll(".second-card").forEach(container => {
container.addEventListener('click',flipCard)
})
document.querySelectorAll(".third-card").forEach(container => {
container.addEventListener('click',flipCard)
})
function flipCard(card){
card.currentTarget.classList.toggle("flip")
}
/*-------------------------------------------------------------------------------*/
document.querySelector(".flip-all-cards").addEventListener("click",function(){
document.querySelectorAll(".card").forEach(container => {
container.classList.toggle("flip")
})
})
document.querySelector(".position-button").addEventListener("click",function(){
document.querySelectorAll('.card').forEach(card => {
card.style.position = "absolute"
card.style.top = "0"
card.style.left = "0"
})
})
css
*,
*::before,
*::after {
box-sizing: border-box;
}
body{
padding: 100px;
}
.card-container{
display: grid;
grid-template-columns: auto auto auto;
padding: 10px;
position: relative;
height: 700px;
}
.first-card, .second-card, .third-card, .fourth-card{
width: 100px;
height: 150px;
border: 3px solid black;
border-radius: 10px;
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
margin: 10px;
}
.flip{
transform: rotateY(180deg);
}
/*
.test-div:hover {
transform: rotateY(180deg);
}*/
.front, .back{
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.front{
z-index: 2;
transform: rotateY(0deg);
}
.back{
transform: rotateY(180deg);
}
.first-card .front{
background: lightblue;
width: 100%;
height: 100%;
}
.second-card .front{
background: red;
width: 100%;
height: 100%;
}
.third-card .front{
background:lime;
width: 100%;
height: 100%;
}
.fourth-card .front{
background:yellow;
width: 100%;
height: 100%;
}
.first-card .back,.second-card .back, .third-card .back, .fourth-card .back{
background: black;
width: 100%;
height: 100%;
}
This is the code I have so far
Instead of trying to rearrange the cards in the DOM, you may consider writing an array in your JS with all the possible colors, then changing the front color of each div with a color from that array.
You can then use a shuffle function like the one here to rearrange the order of the colors in the array.
So a buddy of mine encountered an issue, the website displays properly when on a screen that's 1440px by 1024px, however on a smaller screen you have to scroll to see further down. We've both been searching and can't figure it out, now it could be the fact that it's made primarily from pngs that the scaling doesn't work properly or it could also be that we're both idiots and it's actually very simple, whichever the case we can't figure it out So hopefully someone can. Overflow-y:hidden will not fix the problem as that would only prevent scrolling and the content of the page stays as is. We've also tried getting JS to detect the window size and it also doesn't seem to work.
Here it is at 100% zoom on a 1366px by 768px screen
https://imgur.com/LN6YJUJ
This is what he wants it to look like without the scrolling of course (This is at 65% zoom same screen)
https://imgur.com/97vjDs0
Here's the CSS and HTML (it won't run due to missing files but I assume the issue would be in these)
html{
height: 100%;
}
body{
background: url("../img/background.png") no-repeat center center fixed;
background-size: cover;
}
.margin-15{
margin-top: 7%;
}
.container-fluid{
height: 100vh;
min-height: 100%;
min-width: 100%;
}
.Rectangle{
width: 168px;
height: 44px;
margin-top: 3%;
border-radius: 18px;
background-color: #292929;
left: 43%;
top: 28.3%;
}
.Rectangle p{
text-align: center;
padding-right: 10%;
padding-top: 6%;
width: 185.2px;
height: 34.3px;
font-family: Roboto;
font-size: 18px;
font-weight: bold;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: normal;
color: #ffffff;
}
.Rectangle p span{
color: #a3e8f5;
}
.navBar1 img{
max-width: 40%;
padding-top: 2%;
object-fit: contain;
}
/**.col-xs-3 .atomix{
padding-top: 4%;
}
.col-xs-3 .Rectangle{
margin-top: 20%;
}
.col-xs-3 .navBar1{
margin-top: 10%;
padding-bottom: 20%;
}
.col-xs-3 .atomix{
margin-top: 2%;
}
.col-xs-3 .forums{
margin-top: -5%;
}
.col-xs-3 .discord{
margin-top: 4%;
} **/
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Home | Lectric</title>
<link rel="stylesheet" href="css\bootstrap.min.css">
<link rel="stylesheet" href="css\master.css">
<script src="https://cdn.jsdelivr.net/gh/leonardosnt/mc-player-counter#1.1.1/dist/mc-player-counter.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<div class="container-fluid mt-5">
<div class="row">
<div class="col-lg-12 col-md-12 col-xs-3 margin-3">
<div class="atomix">
<img src="img\atomix.png" alt="Atomix" class="img-responsive mx-auto d-block"/>
</div>
<div class="col-lg-12 col-md-12 col-xs-3">
<div class="Rectangle playersOnline mx-auto d-block">
<p><span data-playercounter-ip="atomixprison.net">0</span> online</p>
</div>
</div>
</div>
</div>
<div class="col-lg-12 col-md-12 col-xs-3">
<div class="navBar1">
<img src="img/NavBar1.png" class="img-responsive mx-auto d-block" alt="navbar"/>
</div>
</div>
<div class="row margin-4 margin-15">
<div class="col-lg-5 col-md-5 mb-0">
<div class="webStore">
<img src="img/webstore.png" alt="webstore" class="mx-auto d-block img-responsive">
</div>
</div>
<div class="col-lg-2 mt-xl-5 col-md-5 mb-md-0">
<div class="forums">
<img src="img/forums.png" alt="forums" class="mx-auto d-block img-responsive">
</div>
</div>
<div class="col-lg-5 col-md-5 mb-0">
<div class="discord">
<img src="img/discord.png" alt="discord" class="mx-auto d-block img-responsive">
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js\bootstrap.min.js"></script>
<script type="text/javascript">
$('#body').css('min-height', '100%');
</script>
</body>
</html>
SO, i'm 100% certain that it has a scroll on my screen because of the odd sizing HOW ever the issue was resolved, it turns out the person who was receiving the website didn't have their zoom set to 100% so it looked weird for them..... sigh... some people....
I am creating testimonial slider using html CSS and jquery like this one
I tried using html css bellow is code and screenshot
HTML code :-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/testo.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Quicksand" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body class="testo-body">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 client">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<h3>Complex Roy</h3>
<h5>Web Designer</h5>
<h6>Logictrix technologies is a good company. it's give batter products and services.Logictrix technologies is a good comp. it's give batter products and services.Logictrix technologies is a good company. it's give batter products and services. Logictrix technologies is a good company. it's give batter products and services.</h6>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="big-cir">
<center><img class="img-responsive img-circle" id="profile-image" height="250" width="250" src="image/client-1.png"></center>
</div>
</div>
</div>
</div>
</body>
</html>
CSS :-
.testo-body{
background-color:white;
}
.out-cir{
margin-top:-23%;
}
.profile{
margin-top:-20.5%;
margin-left:-31%;
}
.client{
background-color:#161e43;
color:white;
margin-top:20%;
}
.blue1{
}
.big-cir{
background-color:none;
height:300px;
width:300px;
border-radius:50%;
position:relative;
border-color:rgb(167,183,254);
border-style:solid;
border-width:2px;
margin-top:-23%;
}
.img-circle {
border-radius: 50%;
margin-top:7%;
}
Screenshot Using HTML :-
Now how I can put circle on outer circle line and make them animate ?
any suggestion or code will help me a lot
You can create small circle on outer big circle using before and after property in css. I have tried this. I am able to create two circle's. hope this helps you to get right way... (I will update if I able to create third one or multiple)
HTML Code:
<div class="testo-body">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 client">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<h3>Complex Roy</h3>
<h5>Web Designer</h5>
<h6>Logictrix technologies is a good company. it's give batter products and services.Logictrix technologies is a good comp. it's give batter products and services.Logictrix technologies is a good company. it's give batter products and services. Logictrix technologies is a good company. it's give batter products and services.</h6>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 client-image">
<center><img class="img-responsive img-circle" id="profile-image" height="250" width="250" src="http://placehold.it/500x500"></center>
<div class="big-cir">
<div class="small-cir"></div>
<div class="small-cir2"></div>
<div class="small-cir3"></div>
</div>
</div>
</div>
</div>
CSS Code:
.testo-body {
background-color: white;
}
.out-cir {
margin-top: -23%;
}
.profile {
margin-top: -20.5%;
margin-left: -31%;
}
.client {
background-color: #161e43;
color: white;
margin-top: 10%;
}
.blue1 {}
.big-cir {
height: 300px;
width: 300px;
border-radius: 50%;
position: relative;
border-color: rgb(167, 183, 254);
border-style: solid;
border-width: 2px;
animation: dotmove cubic-bezier(1,0,0,1) 2s infinite;
}
.big-cir > .small-cir {
background-color: #000;
border-radius: 50%;
position: absolute;
border-color: rgb(167, 183, 254);
border-style: solid;
border-width: 2px;
padding: 5px;
content: "";
left: 90px; // you may need to change this
}
.big-cir > .small-cir2 {
background-color: #000;
border-radius: 50%;
position: absolute;
border-color: rgb(167, 183, 254);
border-style: solid;
border-width: 2px;
padding: 5px;
content: "";
left: 290px;
top: 130px;
}
.big-cir > .small-cir3 {
background-color: #000;
border-radius: 50%;
position: absolute;
border-color: rgb(167, 183, 254);
border-style: solid;
border-width: 2px;
padding: 5px;
content: "";
left: 150px;
top: 290px;
}
.img-circle {
margin: 25px;
position: absolute;
}
.client-image {
margin-top: -230px;
margin-left: 10px;
}
#keyframes dotmove {
from {
transform: rotate(90deg);
}
to {
transform: rotate(0deg);
}
}
fiddle: https://jsfiddle.net/rahul8590/k0y00Lqc/10/
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I got a fiddle http://jsfiddle.net/HEue6/1/ that looks good for a start and now I want it to look and feel more like Office 365. I think the font in Office 365 is Segoe UI Semilight but I'm not sure. In the meantime we've used the Google font Raleway but another font that was mentioned is also called Futura. Now I would like to add the effect that also Office 365 has, that a grey rectangular box marks the selected area.
Can you help me? Do you think that the correct font is chosen or can it get more similar to Office 365? How should I add the grey rectangle for a chosen element?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>-Register</title>
<script src="/scripts/jquery/jquery-1.9.1.js" type="text/javascript"></script>
<script src="/scripts/application.js" type="text/javascript"></script>
<link href="/css/style.css" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Raleway:400,200" rel="stylesheet" type="text/css">
</head>
<body>
<div id="header">
<div id="header-title">Account Administration</div>
</div>
<hr />
<div id="navigation-bar">
<div id="navigation-content">
<!-- SINGLE BUTTON MODULE --> <a href="/admin/adduser">
<div class="navigation-button">
<div class="navigation-header">Add new account</div>
<div class="navigation-desc">Add new user account</div>
</div></a>
<!-- SINGLE BUTTON MODULE -->
<a href="/admin/search"><div class="navigation-button">
<div class="navigation-header">Search account</div>
<div class="navigation-desc">Search and manage accounts</div>
</div></a>
<!-- SINGLE BUTTON MODULE -->
<a href="/admin/export"><div class="navigation-button">
<div class="navigation-header">Export</div>
<div class="navigation-desc">Export to Excel and other formats</div>
</div></a>
<!-- SINGLE BUTTON MODULE -->
<form id="inputForm" role="form" class="marg-left" action="/admin/import" method="post" enctype="multipart/form-data">
<input id="upload" name="file" type="file" onchange="this.form.submit();"/><a href="" id="upload_link"><div class="navigation-button">
<div class="navigation-header">Import</div>
<div class="navigation-desc">Import from tab-separated files on disk</div>
</div> </a>
</form>
<!-- SINGLE BUTTON MODULE -->
<a href="/admin/setup"> <div class="navigation-button">
<div class="navigation-header">Setup</div>
<div class="navigation-desc">Setup global parameters</div>
</div></a>
<!-- SINGLE BUTTON MODULE -->
<a href="j_spring_security_logout"><div class="navigation-button" id="logga">
<div class="navigation-header">Logout</div>
<div class="navigation-desc">Exit account administration</div>
</div></a>
</div>
</div>
</div>
</body>
</html>
Its a very quick and dirty implementation, but change your CSS to:
FIDDLE
body {
font-family:'Raleway', sans-serif;
}
#header {
width: 100%;
position: fixed;
height: 45px;
border-bottom: solid 2px #0072c9;
background-color: #FFFFFF;
z-index: 30;
}
#header-title {
left: 250px;
font-size: 22px;
bottom: 7px;
color: #0072c9;
font-weight: 400;
position: absolute;
}
#navigation-bar {
width: 230px;
height: 100%;
box-shadow: 0 0 8px 6px rgba(0, 0, 0, 0.2);
z-index: 20;
position: absolute;
}
#navigation-content {
width: 100%;
height: auto;
position: absolute;
top: 47px;
}
.navigation-button {
position: relative;
width: 100%;
height: 80px;
margin: 15px 0px;
}
.navigation-header {
position: absolute;
top: 15px;
left: 10px;
color: #0072c9;
font-size: 25px;
}
.navigation-desc {
position: absolute;
bottom: 15px;
left: 10px;
font-size: 12px;
color: #0072c9;
}
#logout {
border-top: solid 2px #0072c9;
}
#navigation-content a:hover div.navigation-button {
background:lightgrey;
}
#navigation-content a:hover div.navigation-button:before {
content:' ';
display:block;
position:absolute;
right:-20px;
top:15px;
height:30px;
width:30px;
background:white;
-webkit-transform-origin: 5px 25px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
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>