I positioned a div to the footer of the page and want it to be made visible when the button is clicked. It doesn't seem to be working. What am i doing wrong? Code is below.
<script language="text/javascript">
function timedMsg()
{
var t=setTimeout('ff()',3000)
}
function ff(){
document.getElementById("dot").style.visibility="visible";
document.getElementById("dot").style.display="";
}
</script>
<div id="dot" style="position: absolute; bottom: 0; right: 0; margin-right:50px; background-color:blue; width:250px; text-align:center; display: none; visibility: hidden">Footer</div>
<form>
<input type="button" value="Display!" onclick="timedMsg()" />
</form>
Well, first of all to embed javascript into html page you should use the following syntax:
<scrpt type="text/javascript">/* code here */</script>
Note: type, not language!
Second, why do you use the t variable? What is it for?
So the working and more complete example would be:
<html>
<head>
<script type="text/javascript">
function timedMsg()
{
setTimeout('ff()',3000)
}
function ff()
{
document.getElementById("dot").style.visibility="visible";
document.getElementById("dot").style.display="";
}
</script>
</head>
<body>
<form>
<input type="button" value="Display!" onclick="timedMsg()" />
</form>
<div id="dot" style="position: absolute; bottom: 0; right: 0; margin-right:50px; background-color:blue; width:250px; text-align:center; display: block; visibility: hidden">Footer
</div>
</body>
</html>
Related
This question already has answers here:
Jquery not loading in head but loading on bottom of body tag
(5 answers)
Closed 7 years ago.
hello my javascript code is not working i included the css and the script in the code i don't have good experience in javascript maybe there is something missing i need some help here thanks in advance
<html>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type='text/javascript'>
$(function () {
"use strict";
$("button").click(function () {
$(".popup").fadeIn();
});
$("span").click(function () {
$(".popup").fadeOut()
});
});
</script>
<h1>Hello world ! </h1>
<button>click</button>
<div class="popup">
<div class="overlay"> sheko </div>
<div class="box">
<span>X</span>
<div>
</div>
</body>
<head>
<style>
.popup{
z-index: 999;
display: none;
}
.overlay{
width: 100%;
height: 100%;
background: rgba(0,0,0,.90);
position: absolute;
top: 0;
left: 0;
}
.box{
width: 250px;
height: 100px;
background: #FFF;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.box span{
float: right;
margin: 10px;
cursor: pointer;
}
</style>
</head>
</html>
its working already.
<html>
<head>
<style>
.popup{
z-index: 999;
display: none;
}
.overlay{
width: 100%;
height: 100%;
background: rgba(0,0,0,.90);
position: absolute;
top: 0;
left: 0;
}
.box{
width: 250px;
height: 100px;
background: #FFF;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.box span{
float: right;
margin: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type='text/javascript'>
$(function () {
"use strict";
$("button").click(function () {
$(".popup").fadeIn();
});
$("span").click(function () {
$(".popup").fadeOut()
});
});
</script>
<h1>Hello world ! </h1>
<button>click</button>
<div class="popup">
<div class="overlay"> sheko </div>
<div class="box">
<span>X</span>
<div>
</div>
</body>
</html>
The order of your HTML is totally incorrect, you have the <head></head> tag below the <body></body>.
Place the head tag above the body, just after the opening html tag then move your css and the link to jQuery in this section.
Finally it's better to add your JS at the very bottom of the page as the browser reads the dom from top to bottom, thus will increase the speed of the page load.
<html>
<head>
<style>
.popup{
z-index: 999;
display: none;
}
.overlay{
width: 100%;
height: 100%;
background: rgba(0,0,0,.90);
position: absolute;
top: 0;
left: 0;
}
.box{
width: 250px;
height: 100px;
background: #FFF;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.box span{
float: right;
margin: 10px;
cursor: pointer;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<h1>Hello world ! </h1>
<button>click</button>
<div class="popup">
<div class="overlay"> sheko </div>
<div class="box">
<span>X</span>
<div>
</div>
<script type='text/javascript'>
$(function() {
"use strict";
$("button").click(function () {
$(".popup").fadeIn();
});
$("span").click(function () {
$(".popup").fadeOut()
});
});
</script>
</body>
You have multiple errors.
First the css in <style></style> tag must be in your <head></head> of your page.
Best solution is using external css file and add him with a <link> in your <head>.
After that the <script> section is highly better on the bottom of your page because the browser compile in order of your code.
If you want add <script> before html add your script in this function :
$(document).ready(function(){
// Here
});
write the jS code in a .js file and use
<script src="foo/bar/yourScript.js"></script>
the style sheet in an .css and use a
<link rel="stylesheet" href="css/bar/yourStyle.css">
so the Script-tag is always at the Bottom of the body-element
the head is above the body and the link-tag inside the head
Here is suggestion that please maintain the flow of code.
write the css Style in head tag and jquery or JavaScript after body tag completed.
Here is jsfiddle link
https://jsfiddle.net/nbcakhzz/2/
Hope it will help you.
Here's a very simple jsFiddle:
function hideDiv2() {
$('.div2').hide();
}
function showDiv2() {
$('.div2').show();
}
.div1 {
height: 300px;
width: 20%;
background-color: red;
float: left;
}
.div2 {
height: 300px;
width: 20%;
background-color: green;
float: left
}
.div3 {
height: 300px;
width: 35%;
background-color: pink;
float: left
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
<br>
<div style="clear:both"></div>
<button type="button" onclick="hideDiv2()" name="hide">Hide div2</button>
<button type="button" name="show" onclick="showDiv2()">Show div2</button>
that creates 3 divs in HTML, and provides two buttons to hide and show the middle div. What I'd like to know is how I keep div3 from sliding over to the left when div2 is hidden. In other words I'd like div3 to remain in its original location regardless of whether div2 is hidden or visible. It is required, however, that the initial HTML page be displayed with all 3 divs visible as shown initially in the jsFiddle.
Instead of using .hide(), set opacity to 0, or set visibility to hidden
$('.div2').css('visibility', 'hidden');
Note: opacity won't work in IE < 9
By adding an external div you can achieve what you looking for.
Here is your code and jsFiddle
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
.div1 {
height:300px;
width:20%;
background-color: red;
float:left;
}
.div2 {
height:300px;
width:100%;
background-color: green;
float:left
}
.hideDiv {
height:300px;
width:20%;
float:left
}
.div3 {
height:300px;
width:35%;
background-color: pink;
float:left
}
</style>
<meta charset="ISO-8859-1">
<title>Test</title>
</head>
<body>
<div class="div1">div1</div>
<div class ="hideDiv"><div class="div2">div2</div></div>
<div class="div3">div3</div>
<br>
<div style="clear:both"></div>
<button type="button" onclick="hideDiv2()" name="hide">Hide div2</button>
<button type="button" name="show" onclick="showDiv2()" >Show div2</button>
</body>
<script>
function hideDiv2()
{
$('.div2').hide();
}
function showDiv2()
{
$('.div2').show();
}
</script>
</html>
I am trying to the div box with image move left to right,
I tried another script: http://jsfiddle.net/bala2024/MzHmN/
Here is the html code
<!DOCTYPE html>
<html>
<head></head>
<body style>
<div id="slideleft" class="slide">
<button>slide it</button>
<div class="inner">Slide to the left</div>
<div style="width:50px; height:50px">
<img src="sceen.jpg">
</div>
</div>
</body>
</html>
CSS
.slide {
position: relative;
background-color: gray;
height: 100px;
width: 500px;
overflow: hidden;
}
.slide .inner {
position: absolute;
left: -500px;
bottom: 0;
background-color:#e3e3e3;
height: 30px;
width: 500px;
}
JS
$(document).ready(function () {
$('#slideleft button').click(function () {
var $lefty = $(this).next();
$lefty.animate({
left: parseInt($lefty.css('left'), 10) == 0 ? -$lefty.outerWidth() : 0
});
});
});
You will need to apply width to main container. Please replace it with below line and check in your browser.
<div id="slideleft" class="slide" style="width:100px; margin:0 auto">
use margin for outer space and padding for inner space
try this
<!DOCTYPE html>
<html>
<head>
</head>
<body style>
<div id="slideleft" class="slide">
<button>slide it</button>
<div class="inner">Slide to the left</div>
<div style="width:50px; height:50px; margin-left: 100px;"><img src="sceen.jpg">
</div>
</div>
</body>
</html>
Click the following link to watch live demo... Click Here
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Animation test</title>
<style>
</style>
<script type="text/javascript">
$(document).ready(function() {
$("#b").animate({left: "+=500"}, 2000);
$("#b").animate({left: "-=300"}, 1000);
});
</script>
</head>
<body>
<div style="position:relative">
<div id="b" style="position:absolute;">B</div>
</div>
</body>
</html>
CSS:
div.inner{
background:black;
margin-left:0;
width:100px;
animation:sample 2s;
-webkit-animation:sample 2s;
}
keyframes sample{
from{margin-left:100%;}
to{margin-left:0%;}
}
#-webkit-keyframes sample{
from{margin-left:100%;}
to{margin-left:0%;}
}
fiddle: http://jsfiddle.net/apRMU/17/
I want to make a js to replace desire text within an iframe. Here is my code below:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.js" type="text/javascript"></script>
<style>
.header{
width:100%;
height:30px;
background:#f1f1f1;
position: fixed;
z-index: 100;
margin-top: -20px;
font-family:Calibri, Arial;
}
.urlBox{
margin-top: 4px;
vertical-align: middle;
width: 600px;
}
.btn{
margin-top: 4px;
vertical-align: middle;
}
#iframe1{
margin-top:20px;
}
#newifrm{
background-color: transparent;
border: 0px none transparent;
padding: 0px;
overflow: hidden;
margin-top: 20px;
}
.txt{
margin-top: 4px;
vertical-align: middle;
}
button{
margin-top: 4px;
vertical-align: middle;
height:24px;
width:33px;
}
</style>
<script>
function goAction(){
ifrm = document.createElement("iframe");
ifrm.setAttribute("src", document.getElementById("url1").value);
ifrm.style.width = 100+"%";
ifrm.style.height = 100+"%";
ifrm.frameBorder=0;
ifrm.id="newifrm";
document.getElementById("iframe1").appendChild(ifrm);
}
</script>
</head>
<body>
<div class="header">
<span><input id="url1" class="urlBox" type="text" value="http://anywebsitexyz.com"></span>
<span><input class ="btn" type="button" value="GO" onclick="goAction()"></span>
<span><label for="search"> Search for: </label><input name="search" id="search" class="txt"></span><span><label for="replace"> Replace with: </label><input name="replace1" id="replace1" class="txt"></span>
<span><input class ="btn" type="button" value="Replace" onclick=""></span>
</div>
<div id="content">
<div id="iframe1"></div>
</div>
</body>
</html>
I have tried lot of functions to get replaced value. I am able to replace any text of parent document but want to make a function that will work for iframe content.
You can find this example about how to modify an iframe content in jQuery Documentation:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<iframe src="http://api.jquery.com/" width="80%" height="600" id='frameDemo'></iframe>
<script>$("#frameDemo").contents().find("a").css("background-color","#BADA55");</script>
</body>
</html>
You should use .contents() function.
Although this works perfectly with an iframe calling an internal site, it won't work if you try to modify an external site. This is a security measure and there's no way to avoid it. You can read more about it here.
First of all, if you are changing the DOM, by all means use JQuery. From what I understood, you want to change the source of the iframe. So after a few changes of your code, this works:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<div class="header">
<span>
<input id="url1" class="urlBox" type="text" value="http://anywebsitexyz.com"></span>
<span>
<input id="go" class ="btn" type="button" value="GO"></span>
<span>
<label for="search">Search for:</label>
<input name="search" id="search" class="txt"></span>
<span>
<label for="replace">Replace with:</label>
<input name="replace1" id="replace1" class="txt"></span>
<span>
<input class ="btn" type="button" value="Replace" onclick=""></span>
</div>
<iframe src="http://anywebsitexyz.com" width="100%" height="600" id="newifrm"></iframe>
<script>
$(document).ready(function(){
$("#go").click(function(){
$("#newifrm").attr('src', $("#url1").val());
})
});
</script>
</body>
</html>
I am trying to make overlay over image while dragging but its also moving image when I move my textarea. So I want my edit area be transparent and overlay image. Please help
Here is what I have
<head>
<style>
.positionable {
width:100px; height:100px;
position:absolute;
}
.dragRegion {
background-color:#FFF; color:#000;
cursor:move;
top: -2px; left: -2px;
position: absolute;
font-size:14px; line-height:14px;
margin: -5px;
padding-left: 10px;
padding-top: 10px;
background-image:url('arrow_move.png');
background-repeat:no-repeat;
}
.editable {
width: 150px; height: 150px; padding: 0.5em;
position:relative;
}
</style>
</head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js" type="text/javascript"></script>
<div class="positionable">
<div class="dragRegion"/>
<textarea id="resizable" rows="5" cols="20"></textarea>
<img src="http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif" style="z-index: 100" />
<script type="text/javascript">
$('.positionable').draggable({handle: '.dragRegion'});
$('.editable').resizable();
</script>
</div>
Use z-index on the draggable object.
For example:
.dragRegion {
z-index:500
.... old css code
}
You set the code in your CSS