i created dynamically a table with 3 rows not by using table tag, .... i need to find these rows in scripting...in button click, if any of these rows is empty then need to generate an alert message like enter current row..... how can i do this...
please suggest me...
I have created a very simplistic example. You can modify it to suite your situation.
<html>
<head>
<title></title>
<script type="text/javascript">
window.onload = function(){
var button = document.getElementById('row_check');
var tableDiv = document.getElementById('container');
var tableHTML = "<div id='mytable'><div id='row_one'>I am not empty</div><div id='row_two'></div><div id='row_three'></div></div>"
tableDiv.innerHTML = tableHTML;
button.onclick = function(){
if(document.getElementById('row_one').innerHTML == '') alert('Row 1 empty');
if(document.getElementById('row_two').innerHTML == '') alert('Row 2 empty');
if(document.getElementById('row_three').innerHTML == '') alert('Row 3 empty');
}
}
</script>
<style type="text/css">
#mytable {
width: 305px;
height: auto;
border: 1px solid black;
padding:5px;
margin-top:10px;
}
#mytable div{
width: 290px;
height: 100px;
margin:5px;
border: 1px solid red;
}
</style>
</head>
<body>
<input type="button" value="Check Rows" id="row_check"/>
<div id="container">
</div>
</body>
</html>
Related
I currenly utilize this function to randomly fetch an image
<script>
window.onload = choosePic;
var myPix = new Array(
"https://ry3yr.github.io/OSTR/Diarykeepers_Homepage/extrafiles/images/bgfiles/cool_stuff_anim.gif",
"https://ptgmedia.pearsoncmg.com/images/chap4_9780321996701/elementLinks/04fig15.jpg");
function choosePic() {
var randomNum = Math.floor(Math.random() * myPix.length);
document.getElementById("myPicture").src = myPix[randomNum];}
</script>
<style> body {background-image: url(myPicture);}</style>
<!--<img src="https://pt" width="305" height="312" id="myPicture">-->
However it won't load into the bg as part of the css.
Got it:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
#random{
width: 100%;
height: 100%;
//border: 1px solid black;
background-image: url('');
//background-position: center center;
//background-size: cover;
//background-repeat: no-repeat;}
</style>
<body>
<body onload="randombg()"><div id="random" ></div>
<script>
function randombg(){
var random= Math.floor(Math.random() * 6) + 0;
var bigSize = ["url('https://media1.giphy.com/media/l0HlVrqPItQH8D4iI/giphy.gif')",
"url('https://ry3yr.github.io/OSTR/Diarykeepers_Homepage/extrafiles/images/bgfiles/cool_stuff_anim.gif')",
"url('https://ry3yr.github.io/OSTR/Diarykeepers_Homepage/extrafiles/images/bgfiles/cool_stuff_anim.gif')",
"url('https://ry3yr.github.io/OSTR/Diarykeepers_Homepage/extrafiles/images/bgfiles/comments_anim.gif')",
"url('https://ry3yr.github.io/OSTR/Diarykeepers_Homepage/extrafiles/images/bgfiles/comments_anim.gif')",
"url('https://media1.giphy.com/media/l0HlVrqPItQH8D4iI/giphy.gif')"];
document.getElementById("random").style.backgroundImage=bigSize[random];}</script>
Option #2
<style>
.random_bg{
height: 100%;
width: 100%;
position: relative;}
</style>
<section><div class="rt-container">
<div class="col-rt-12">
<div class="Scriptcontent">
<div class="random_bg"></div>
</section>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js'></script>
<script>function pic() {var bgm = ['https://i.ibb.co/9mxH8pL/Castillo.gif',
'https://i.ibb.co/fkK7bK2/Elec-Tower.gif',
'https://i.ibb.co/SxXkFBg/Mayl-EXE2.gif',
'https://i.ibb.co/3C8pd4h/Standart-Comp-EXE3.gif',
'https://i.ibb.co/LJKnfhh/Scilab.gif'];
$('.random_bg').css({
'background' : 'url('+ bgm[Math.floor(Math.random()*3)] + ') repeat',
'background-position' : '100%',
'background-size' : 'repeat'});}pic();</script>
Option #3
<style type="text/css">
#banner {
height:100%;
background:transparent url(https://i.ibb.co/SxXkFBg/Mayl-EXE2.gif) repeat cover cover;
}
</style>
<script type="text/javascript">
if (document.getElementById) { window.onload = swap };
function swap() {
var numimages=7;
rndimg = new Array("https://i.ibb.co/SxXkFBg/Mayl-EXE2.gif", "https://i.ibb.co/SxXkFBg/Mayl-EXE2.gif", "https://i.ibb.co/fkK7bK2/Elec-Tower.gif", "https://i.ibb.co/SxXkFBg/Mayl-EXE2.gif", "https://i.ibb.co/fkK7bK2/Elec-Tower.gif", "https://i.ibb.co/SxXkFBg/Mayl-EXE2.gif", "https://i.ibb.co/SxXkFBg/Mayl-EXE2.gif");
x=(Math.floor(Math.random()*numimages));
randomimage=(rndimg[x]);
document.getElementById("banner").style.backgroundImage = "url("+ randomimage +")";
}
</script>
</head>
<body >
<div id="banner"></div>
</body>
I am very new to CSS.
I was working on this little chat site, but I noticed that the latest message was always missing. It seems my message box cuts off the last message but I can't fix it.
I tried changing the height value of the messages div but that didn't help.
So, this code gives you my HTML and the styling (in the <style> tag) but I really don't know what to do now. I don't want to resize the box or it'll look ugly.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="/socket.io/socket.io.js"></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font: 13px Helvetica, Arial;
}
form {
background: #000;
padding: 3px;
position: fixed;
bottom: 0;
width: 100%;
}
form input {
border: 0;
padding: 10px;
width: 90%;
margin-right: 0.5%;
}
form button {
width: 9%;
background: rgb(130, 224, 255);
border: none;
padding: 10px;
}
#messages {
list-style-type: none;
margin: 0;
padding: 0;
}
#messages div {
padding: 5px 10px;
}
#messages div:nth-child(odd) {
background: #eee;
}
</style>
</head>
<body>
<h1>Hi</h1>
<form id="msgForm" action="">
<input type="text" name="msg">
<button>Send</button>
</form>
<input type="text" name="enter" class="enter" value="" id="lolz"/>
<div id="messages">
</div>
<script defer>
const socket = io("localhost:3000")
const messages = document.getElementById('messages')
const msgForm = document.getElementById('msgForm')
const nick = document.getElementById('lolz')
socket.on('message', (nick, msg) => {
appendMessages(nick, msg)
})
socket.on('output-messages', data => {
console.log(data)
if (data.length) {
data.forEach(message => {
appendMessages(message.nick, message.msg)
})
}
})
msgForm.addEventListener('submit', e => {
e.preventDefault()
if (msgForm && msgForm.msg && msgForm.msg.value && nick && nick.value) {
socket.emit('chatmessage', nick.value, msgForm.msg.value)
}
msgForm.msg.value = ''
})
function appendMessages(nick, message) {
const html = `<div><strong>${nick}</strong>: ${message}</div>`
messages.innerHTML += html
}
</script>
</body>
</html>
Here, you can see what it looks like:
It's supposed to show this message:
"e: I hate this box!"
The problem is the position: fixed property for the form element.
Quoting from MDN
fixed
The element is removed from the normal document flow, and no space is created for the element in the page layout.
Basically it means that the element is in a different layer, so it will overlap the rest of the content on the page and can possibly hide elements under it.
What you want is position: sticky.
I suggest you to read more on the great MDN documentation site:
CSS: position
https://developer.mozilla.org/en-US/docs/Web/CSS/position
Sticky footers
https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_cookbook/Sticky_footers
The stacking context
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
Is there any simple way , on how i can drag an drop without coding in visual studio, while using Bootstrap and Asp.net in Visual Studio .
Drag and drop functionality can be implemented in HTML5 compliant browsers, it's important that you're aware of this.So if you have users who are using old browsers this functionality may not work.
Here's a simple example which let's user drag the red <div> and drop it in one of two destination <div> elements:
<head runat="server">
<title></title>
<script type="text/javascript">
function dragStart(e) {
e.dataTransfer.effectAllowed = "move";
e.dataTransfer.setData("Text", e.target.getAttribute("id"));
}
function dragOver(e) {
e.preventDefault();
e.stopPropagation();
}
function drop(e) {
e.stopPropagation();
e.preventDefault();
var data = e.dataTransfer.getData("Text");
e.target.appendChild(document.getElementById(data));
}
</script>
<style type="text/css">
#dropBox1,#dropBox2 {
width: 200px;
height: 200px;
border: 5px dashed gray;
background: lightyellow;
text-align: center;
margin: 20px 0;
color: orange;
}
#dragA {
width: 200px;
height: 200px;
background-color: #ff0000;
}
</style>
</head>
<body>
<div id="dropBox1" ondragover="dragOver(event);" ondrop="drop(event);">
<!--Dropped div can be inserted here-->
</div>
<div id="dropBox2" ondragover="dragOver(event);" ondrop="drop(event);">
<!--Dropped div can be inserted here-->
</div>
<div id="dragA" draggable="true" ondragstart="dragStart(event);">
</div>
</body>
I'm trying to modify an OpenLayers example to add my custom button but I can't click this button. I've tryied everything but it is as if the click event couldn't be attached to the button....Where is the problem? I'm getting mad. Any help will be appreciated! Here is my code (sorry to post a full example but I can't shorten it):
<html>
<head>
<title>OpenLayers Editing Toolbar Example</title>
<link rel="stylesheet" href="http://openlayers.org/dev/theme/default/style.css" type="text/css">
<link rel="stylesheet" href="http://openlayers.org/dev/examples/style.css" type="text/css">
<style type="text/css">
#btnHiLite {
top: 50%;
left: 3%;
height: 10px;
z-index: 3000;
background: url('http://s11.postimg.org/s3u0s4pjj/marker.png') no-repeat center;
padding: 5px 10px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: #9c494e;
font-size: 12px;
font-family: Georgia, serif;
text-decoration: none;
vertical-align: middle;
}
</style>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript">
var map, layer;
function rotate_image() {
alert("Button clicked!");
}
function init(){
var btnHiLite = new OpenLayers.Control.Button({
title: "click it to rotate image 90ยบ",
id: 'btnHiLite',
trigger: rotate_image,
type: OpenLayers.Control.TYPE_BUTTON
});
var graphic = new OpenLayers.Layer.Image(
'Document Page',
"http://www.hdwallpapersinn.com/wp-content/uploads/2013/03/landscape_7.jpg",
new OpenLayers.Bounds(-250, -100, 250, 100),
new OpenLayers.Size(250, 100)
);
map = new OpenLayers.Map( 'map', {
controls: [new OpenLayers.Control.PanZoom(), btnHiLite]
});
map.addLayers([graphic]);
map.zoomToMaxExtent();
}
</script>
</head>
<body onload="init()">
<h1 id="title">Editing Toolbar Example</h1>
<div id="tags">
digitizing, point, line, linestring, polygon, editing
</div>
<p id="shortdesc">
Demonstrate polygon, polyline and point creation and editing tools.
</p>
<div id="panel"></div>
<div id="map" class="smallmap"></div>
</body>
</html>
Ok...I answer my own question. I basically needed:
1.- Create a panel to add buttons in it
var panel = new OpenLayers.Control.Panel({defaultControl: btnHiLite});
2.- Add the button to the panel
panel.addControls([btnHiLite]);
3.- Add the panel to the map
map = new OpenLayers.Map( 'map', {
controls: [
new OpenLayers.Control.PanZoom(),
panel]
});
Here is the right code: jsfiddle.net/gilan/wR4Ee
I don't like the OpenLayer's own control framework. It's way much simpler to use your own, written in plain html and jquery.
For example: http://jsfiddle.net/wR4Ee/111/
<div id="map"></div>
<div id="panel"><button id="testButton" class="btn btn-primary">TEST BUTTON</button></div>
$('#testButton').click(function(){
console.log('click');
map.getView().setZoom(map.getView().getZoom()+1);
});
Is there a way to change color off a parent when an input gets focus
Check out the demo. I want the div to be red instead of blue when input has focus.
Demo
Here's a bit of a cheaty way of doing it using CSS only...
DEMO: http://jsfiddle.net/gvee/6fRUd/
HTML
<div>
<input type="text" />
</div>
CSS
div {
overflow: hidden;
background-color: blue;
}
div * {
position: relative;
z-index: 10;
}
div input[type=text]:focus {
background-color: red;
box-shadow: 0 0 10000px 10000px lime;
z-index: 5;
}
I think you can't do that in pure CSS, but you can use Javascript:
http://jsbin.com/uvon/1/edit?html,js,output
var input = document.getElementById('input');
var div = document.getElementById('div');
input.onfocus = function(){
input.style.backgroundColor = "red";
div.style.backgroundColor = "red";
}
input.onblur = function(){
input.style.backgroundColor = "white";
div.style.backgroundColor = "blue";
}
A jQuery approach would be using .parent()
<script>$("p").parent(".selected").css("background", "yellow");</script>
http://api.jquery.com/parent/
CSS Only Approach
Fiddle
http://jsfiddle.net/GT5sT/
CSS
input {
position: relative;
z-index: 2;
}
input:focus,
input:focus + div { background-color: red }
div {
position: relative;
background-color: blue;
}
div.background-hack {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
}
HTML
<div>
<input />
<div class="background-hack"></div>
</div>
You will have to use javascript.
Here is a short script using jquery.
$('#input').focus(function(){
$('#box').css('background-color','red');
});
This is assuming your input has an id of input and blue box has an id of box.
javascript also works here look at the code below,it is more flexible than just using css
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction(){
document.getElementById('box').style.background="red";
}
</script>
<title>JS Bin</title>
</head>
<body>
<div id="box" style="background-color:blue">
<input onfocus="myFunction()" />
</div>
</body>
</html>