I was trying to make a red bar (created with a div and a red background-color) that can extend from 0 pixels in width to 200 pixels in width. My code works when I insert a window.alert(x.width) in the function myF(), but the code doesn't give me a transition when I don't put it in. Is it just a problem with the setTimeout()?
<!DOCTYPE html>
<html>
<head>
<script>
function myF(){
var x = document.getElementById("bar1").style;
if(parseInt(x.width)<200){
x.width = (parseInt(x.width)+1)+"px";
setTimeout(myF(),1);
}
}
</script>
</head>
<body onload="myF()">
<div id="bar1" style="width:0px; text-align:center; height:10px;background-color:red; font-size:10px; padding:0px; margin:0px;"></div>
</body>
</html>
you should do :
setTimeout(myF,1);
instead of :
setTimeout(myF(),1);
Related
I am trying to apply the fade effect to the javascsript background slideshow. When I changed the value, JS ignored it. I tried fadeIn and fadeOut. What is wrong with this code?
var bgimages=new Array()
bgimages[0]="tenis.jpg"
bgimages[1]="rtrr.jpg"
bgimages[2]="tenis.jpg"
//preload images
var pathToImg=new Array()
for (i=0;i<bgimages.length;i++) {
pathToImg[i]=new Image()
pathToImg[i].src=bgimages[i]
}
var inc=-1
function bgSlide() {
if (inc<bgimages.length-1)
inc++
else
inc=0
document.body.background=pathToImg[inc].src
}
if (document.all||document.getElementById)
window.onload=new Function('bgSlide(); setInterval("bgSlide()",3000),fade(2000)')
You can not fade background images. You can fade images in <img> tags.
Here is my jsFiddle DEMO.
Here is some sample code (including JQuery, CSS, and HTML):
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style>
img{
position:absolute;
top:0;
display:none;
width:auto;
height:100%;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
function fader() {
$("img").first().appendTo('#wrap').fadeOut(3000);
$("img").first().fadeIn(3000);
setTimeout(fader, 4200);
}
</script>
</head>
<body onLoad="fader();">
<div id="wrap">
<img src="http://stats.hashweb.org/static/img/jsfiddle-logo.png">
<img src="http://startbootstrap.com/templates/freelancer/img/profile.png">
<img src="http://www.silvercoinstoday.com//images/Silver-Element-Atomic-Structure.jpg">
</div>
</body>
</html>
While it is true that "you can not fade background images", you can fade-in and fade-out the DIVs whose background URLs are the images you want to fade.
The demo above from totallytotallyamazing, however, does not give the desired result where images should dissolve from one to the other, and not leave a blank screen in between.
I am trying to fit a canvas element into a table cell with no padding at all, i.e. I want no margins between my canvas and top/bottom of the cell. Therefore, I define row height as 20px and canvas height as 20px. I also use padding:0px styling. However, I get no padding only from top and left and I still do get padding at the bottom. In fact, it looks like the table cell gets taller in order to accommodate for the undesired margin. How can I resolve it?
Also, what is the difference between defining canvas width and height in HTML and CSS? Will one override the other?
Below is my HTML code.
Thanks.
<!doctype html>
<html lang="en">
<html>
<head>
<meta charset="utf-8">
<title>experiment</title>
<body>
<script>
$(function() {
var canvas = document.getElementById('my_canvas');
var ctx = canvas.getContext('2d');
ctx.fillRect(0,0,20,20);
$("#my_table > tbody > tr:eq(0) > td:eq(0)").append($("#my_canvas"));
})
</script>
</head>
<style media="screen" type="text/css">
.my_cell {height:20px; width:100px; padding:0}
.my_canvas {height:20px; width:20px}
</style>
<table id="my_table" border="1" cellspacing="0" cellpinserting="0">
<tbody>
<tr><td class="my_cell"></td></tr>
</tbody>
</table>
<canvas id="my_canvas" class="my_canvas" width="20" height="20"></canvas>
</body>
</html>
Try adding the following to the canvas's style:
display : block;
Demo: http://jsfiddle.net/S7YJu/
You can see why if you look at this: http://jsfiddle.net/S7YJu/1/ - by default the canvas displays inline which means it lines up in a way that leaves space for the bottom of letters like "y" or "p" to hang beneath...
Despite your question has been already answered i would like to point the following.
Canvas element are treated very like inline elements despite the seem to be block level elements, similar to how an image element is treated. To fix your problem you have to set the style rule display to block for canvas.
with the best of intentions i would like to give you some advice :
1 You omitted th opening body tag.
2 Is recomended to put script tags at bottom.
4 Use divs instead of table elements when possible.
5 You don't always use Jquery selectors...
i.e.
document.getElementById('my_canvas');
Copy ->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.my_cell {width:100px; }
.my_canvas {display: block;height:20px; width:20px; background-color: red}
</style>
</head>
<body>
<table id="my_table" border="1" cellspacing="0" cellpinserting="0" cellpadding="0">
<tbody>
<tr>
<td class="my_cell"></td>
</tr>
</tbody>
</table>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script>
$(document).ready(function () {
$(".my_cell").html('<canvas class="my_canvas" width="20" height="20"></canvas>');
});
var canvas = $('.my_canvas');
var ctx = canvas.getContext('2d');
ctx.fillRect(0,0,0,20,20);
</script>
</body>
</html>
I'm new to coding and hope someone could help me with my hopeless code skills. I'm trying to create a div that will animate on and off the screen on press a button. Here is what I've got so far.... it's probably stupidly wrong but I guess that's what this site is for.. here you go
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="test">Example Text</div>
<script>
function myFunction()
{
var position = test.position();
if("#test".position<0)
{
alert("hello");
$("#test").animate({
"left": 0
},1000);
}else{
$("#test").animate({
"left": -15
},1000);
});
}
</script>
</body>
</html>
This function is called when an image is clicked. My idea was to basically tell the div to animate onto the screen if it's position value is less than 0, which I think tells it that it's off the screen. If it doesn't detect it's value is offscreen, it means the div is onscreen at the moment and so it should animate away. I'd be very grateful of any help that anyone can provide. Thanks very much in advance!
Here you go.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="test">TESTTEST</div>
<input type="button" name="myButton" value="Click Me" onclick="myFunction()" />
<script>
function myFunction()
{
var divPosition = $("#test").offset();
if(divPosition.left < 0 )
{
$("#test").animate({
"left": 0
},1000);
}else{
$("#test").animate({
"left": -150
},1000);
};
}
</script>
</body>
</html>
And CSS:
#test{
background-color:white;
border:3px solid black;
font-size:30px;
position:absolute;
left:-20%;
top:10%;
}
Working Fiddle: http://jsfiddle.net/KeE4h/48/
I searched alot about this and tried some of my own but I can't seem to make it work.
What I'm trying to realize is a progress bar that adds 10 or subtracts 10 every time you press a button.
Example when you press the button UP you add 10 to the progress bar and when you press the button DOWN you remove 10 from the bar.
Whatelse I'd want to realize is a script that can "read" the status of the progressbar and with an if or else function display a text from a paragraph (If > 50 it'll fadeIn a text, else < 50 it'll fadeIn a different text)
Hope I explained myself well and hope anyone can help me. I'm still new in jQuery/JavaScript.
jQuery UI has a built-in progress bar that you can do what you want easily.
http://jqueryui.com/demos/progressbar/
Here's a simple implementation of what you're trying to do:
http://jsfiddle.net/makotosan/bW5Wd/3/
Here is a little example to get you started; there are a lot of capabilities to this script, don't be afraid to experiment a little bit:
<!doctype html>
<html lang="en" dir="ltr">
<head>
<title>Progress Bar</title>
<meta charset="utf-8" />
<style>
#progress {
position:relative;
width:25px;
height:100px;
border:2px solid #000;
background-color:#ccc;
}
#progress div {
position:absolute;
bottom:0;
height:0;
width:25px;
background-color:#f00;
}
span {
margin:10px auto;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function(){
// Define your variables
var interval=10;
var half=50;
var max=100;
var texts=['Less then 50...','More then 50!'];
var upButton=$('button[name="up"]');
var downButton=$('button[name="down"]');
var bar=$('#progress').find('div');
upButton.on('click',function(){
var height=bar.height();
if(height>=0 && height<max) {
var newHeight=parseFloat(height+interval,10);
bar.css('height',newHeight);
$('span').hide().text((newHeight<half) ? texts[0] : texts[1]).fadeIn();
}
});
downButton.on('click',function(){
var height=bar.height();
if(height>0 && height<=max) {
var newHeight=parseFloat(height-interval,10);
bar.css('height',newHeight);
$('span').hide().text((newHeight<half) ? texts[0] : texts[1]).fadeIn();
}
});
});
</script>
</head>
<body>
<h1>Progress Bar</h1>
<p>
<button name="up">Add</button> <button name="down">Remove</button>
</p>
<div id="progress">
<div> </div>
</div>
<span></span>
</body>
</html>
I have an openlayers map and I have positioned a div to sit inside/over the map component.
This works fine, however when dragging the map, if the mouse moves through/over the div the drag action is terminated.
How can I avoid the drag action from terminating?
thanks, p.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js"></script>
</head>
<body>
<div id="map" style="margin:0px; width:300px; height:200px;"></div>
<div id="overlay" style="position:absolute; width:100px; height:75px; border:1px solid red; background-color:white; z-index:5000; text-align:center;">I want to drag through this</div>
<script type="text/javascript">
// create map
var map = new OpenLayers.Map("map", {"maxResolution":0.703125});
map.addLayers([new OpenLayers.Layer.WMS("World Map", "http://labs.metacarta.com/wms-c/Basic.py?", {layers:"basic", format:"image/png"})]);
map.zoomToMaxExtent();
// put div over map
Position.clone($("map"), $("overlay"), {offsetLeft:100, offsetTop:62.5, setWidth:false, setHeight:false});
</script>
</body>
</html>
EDIT: solution using accepted answer:
<div class="mapDragThrough">some content which gets positioned over the map</div>
initialise: function()
{
this.map.events.register("movestart", this, this.applyDragThrough);
this.map.events.register("moveend", this, this.applyDragThrough);
},
applyDragThrough: function(event)
{
var elements = Element.select(document.body, ".mapDragThrough");
var value = this.map.dragging ? "none" : "auto";
elements.invoke("setStyle", {"pointerEvents":value});
},
You can set pointer-events css attributes of the overlay DIV to none.
This causes the element not to receive mouse events at all, allowing the map dragging to continue uninterrupted.
Here's a working example:
<html>
<head>
<script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js"></script>
</head>
<body>
<div id="map" style="margin:0px; width:300px; height:200px;"></div>
<div id="overlay" style="position:absolute; width:100px; height:75px; border:1px solid red; background-color:white; z-index:5000; text-align:center;">I want to drag through this</div>
<script type="text/javascript">
// create map
var map = new OpenLayers.Map("map", {"maxResolution":0.703125});
map.addLayers([new OpenLayers.Layer.WMS("World Map", "http://labs.metacarta.com/wms-c/Basic.py?", {layers:"basic", format:"image/png"})]);
map.zoomToMaxExtent();
// put div over map
Position.clone($("map"), $("overlay").setStyle({'pointerEvents': 'none'}), {offsetLeft:100, offsetTop:62.5, setWidth:false, setHeight:false});
</script>
</body>
</html>
A possible solution could be to listen to hover event with jQuery and activate/deactivate Navigation control(or you probably are using MouseDefaults which you shouldn't) accordingly. The code should look something like this:
var nav = map.getControlsByClass("OpenLayers.Control.Navigation")[0];
$("#your-overlay-div").hover(function(){
nav.deactivate();
},function(){
nav.activate();
});