I am having problems with the fact that my javascript background is overtaking everything and not showing any html elements. I would like it so that my button and digits show up in front of the background.
Example :
Code
window.onload = function() {
var paper = new Raphael(200, 200, 600, 600);
var backGround = paper.rect(0, 0, 600, 600);
backGround.attr({
fill: "#ffb366"
});
}
<div class= "bot">
<input type="button" value="Start" onclick="start();"/>
<span id="timers">0</span>
</div>
Try to add
.bot {
position: relative;
z-index: 1;
top: 200px;
left: 200px;
}
Instead of putting your timer button inside bot class you can create a separate div and style it with the required margins. The html code looks like below:
<div class= "bot">
</div>
<div style="top:200px;left:200px;z-index:10;position:absolute;">
<input type="button" value="Start" onclick="start();"
style="z-index:10"/>
<span id="timers">0</span>
</div>
Here is the required CSS:-
.bot {
position: absolute;
top: 200px;
left: 200px;
z-index:1;
}
And try to write the javascript as below:-
window.onload = function() {
var element=document.getElementsByClassName('bot')[0];
var paper = new Raphael(element, 600, 600);
var backGround = paper.rect(0, 0, 600, 600);
backGround.attr({
fill: "#ffb366"
});
}
It looks like, z-index property does not work if the button is inside raphael class. Good luck.
Related
As I my code below
I click btn-01, bg-01 opactity from 0 to 1, and left from 0 to 300px (1200ms)
And then I click btn-02, bg-01 need to from opacity 0.3 to 1, and left from 150px to 450px (1200ms)
let bg = document.querySelector(".bg-01")
document.querySelector(".btn-01").addEventListener("click",function(){
bg.style.transitionDuration = "1200ms"
bg.style.left = "300px"
bg.style.opacity = "1"
})
document.querySelector(".btn-02").addEventListener("click",function(){
bg.style.transitionDuration = "0ms"
bg.style.left = "150px"
bg.style.opacity = "0.3"
// setTimeout(()=>{
bg.style.transitionDuration = "1200ms"
bg.style.left = "450px"
bg.style.opacity = "1"
// },10)
})
.bg-01 {
width: 100px;
height: 100px;
background-color: red;
position: relative;
}
<button type"button" class="btn-01">001</button>
<button type"button" class="btn-02">002</button>
<div class="bg-01" style="opacity:0; left:0;">
</div>
but It doesn't performance as I want.
In step 2, when click btn-02 ,bg-01 just move: left from 300px to 450px.
In my logic: Because of duration set "0ms",bg-01 suddenly go to the place left:150px (so as opacity)
and then duration set "1200ms",and then bg-01 go to the place left:450px
But it just move from 300px to 450px directly...
Why this happend???
I just solve this by add setTimeout.
Does it has any way to solve this problem?
I would like to scroll to the end of the container. The element is having new items added via ajax on click, so I am recalculating its height each time I click to load more. The page scrolls fine but I would like to also add the navigation height in order to have the exact pixels. It looks like it is not adding + 224 tho
Html
lorem
New items are added via a click and ajax.
Css
nav {
height: 90px;
}
#container {
margin-top: 104px;
margin-bottom: 120px;
}
Jquery
var page = $("html, body");
var pos = $("#container").height() + 224;
page.animate({scrollTop: pos}, 1000);
I think you want something like this no ?
var page = $("html, body");
console.log($("#t").height());
var pos = $("#t").height() - 500;
console.log(pos);
page.animate({scrollTop: pos}, 1000);
div{
height: 1000px;
width: 50px;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="t"></div>
you can use scrollIntoView for last added item
var j=0;
function Add(){
var item=null;
for(var i=0;i<20;i++){
j++
item= $('<div class="item">'+j+'</div>').appendTo("#container")
}
item[0].scrollIntoView()
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="button" onclick="Add()" Value="Add" />
<div id="container"></div>
Im having problem getting the original width and height of a div, without the style property that is generated with a code.
This is how I solved it
var currentWidth = $("#container").width();
var currentHeight = $("#container").height();
$("#container").removeAttr("style");
var containerWidth = $("#container").width();
var containerHeight = $("#container").height();
$("#container").css("width", currentWidth, "height", currentHeight);
$("#container").animate({
width: containerWidth,
height: containerHeight
}, "slow");
This is pretty bad coded and it wont animate the height. I guess there is a easier way to solve this.
Like for example, $("#container").width(ignoring style attr);
Edit, better explenation:
In my css file the original size of container is 500x500.
But then when you click on a link it changes to 800x800 (adding the attribute style), now when you click back I want it to change back to 500x500 but I want the code to find out the original size for easier changes.
The code that changes the #container:
$("#container").animate({
width: 1250,
height: 600
}, "slow");
Thanks in advance!
Updated:
Keep the original width and height as min-width and min-height i.e in your case:
min-width: 500px;
min-height: 500px;
and then do this using jQuery:
$("#container").animate({
width: "",
height: ""
}, "slow");
Working Fiddle
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="Scripts/jquery-1.8.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var curentDivWidth = 500;
var curentDivHeight = 500;
var clicked = false;
$("#ClickMe").click(function () {
if (!clicked) {
$("#container").animate({
width: 1250,
height: 600
}, "slow");
clicked = true; return;
}
$("#container").animate({
width: curentDivWidth,
height: curentDivHeight
}, "slow");
clicked = false;
});
});
</script>
<title>example</title>
</head>
<body>
<a href="javascript:void(0)" id="ClickMe" >click me </a>
<div id="container" style="border:1px solid black" >
the div
</div>
</body>
</html>
jsfiddle : http://jsfiddle.net/seekpunk/JhzAD/
I'm trying to do function to sliding new added content, using jQuery slide effect but I can't apply any solutions to put two divs in a single line. How to fix code below to slide from left to the right side by side? Maybe this code is completely to rebuild?
jsFiddle:
jsfiddle
JS:
$(function() {
$("#hello").html("Hello");
$('#edit').toggle(function() {
var newhtml = '<input type="text" id="hello_input" value="" />';
slideNewContent(newhtml);
}, function() {
var newhtml = $("#hello_input").val();
slideNewContent(newhtml);
});
});
function slideNewContent(c) {
$("#slideOut").empty();
$("#slideIn").children().clone().appendTo("#slideOut");
$("#slideIn").find("#hello").html(c);
var slideOut = $("#slideOut");
var slideIn = $("#slideIn");
slideOutIn(slideOut, slideIn);
}
function slideOutIn(outElement, inElement) {
var hideoptions = { "direction": "right", "mode": "hide" };
var showoptions = { "direction": "left", "mode": "show" };
$(outElement).effect("slide", hideoptions, 1000);
$(inElement).effect("slide", showoptions, 1000);
}
HTML:
<div class="span3">
<div id="slider">
<div id="slideIn" class="content">
<span>
<span id="hello"></span>
<button class="btn btn-mini" id="edit">Edit</button>
</span>
</div>
<div id="slideOut" class="content"></div>
</div>
</div>
CSS:
#slider {
/*float:left;*/
display: inline-block;
}
#slideIn {
width: 270px;
/*display: inline;*/
}
#slideOut {
width: 270px;
/*display: inline;*/
}
#hello_input {
width:160px;
}
Edit to this
$(outElement).effect("slide", hideoptions, 0);
$(inElement).effect("slide", showoptions, 0);
Trying to figure out how to switch from one to two images then back to one with an onlick.
So far I have below which works no problem for switching to one image and back to original image. Ultimately I'm trying to get the first onclick event to be two images vertically and then click again back to the first single image.
var play = false;
function toggle() {
var image = document.getElementById('image')
var scan = document.getElementById('scan');
play = !play;
if (play) {
image.src = "pause.png";image.width="182";image.height="182";image.border="0";
scan.play();
}
else {
image.src = "play.png";image.width="182";image.height="182";image.border="0";
scan.pause();
}
}
and in body:
<img onclick="toggle()" id="image" src="play.png" alt="image" width="182" height="182" style="margin:auto; position:absolute; top: 0; right: 0; bottom: 0; left: 0; border: 0;">
This should work fine except, take out the width, height and border from the javascript, they're not changing so why have it there and risk some browsers freaking out on them?
I just put this together real quick to test and it works a treat.. I've commented out scan.play and pause of course but I'm assuming you've checked the console in your browser to see if those are throwing any errors?
I took the <a> out and used style cursor=pointer instead for the click-able element as well.. either way works but this is neater and works from ie6 I think, ie7+ definately.
edit: removed source block didn't achieve goal of question
After discussion in comment there's heaps of ways to do it, and I'd probably use jQuery but since you're not here's one not
<!doctype html>
<html>
<head>
<script type="text/javascript">
var play = true;
function toggle() {
//var scan = document.getElementById('scan');
var playpause = document.getElementById('playpause');
var btnplay = playpause.getElementsByClassName('play');
var btnpause = playpause.getElementsByClassName('pause');
play = !play;
if (play) {
btnplay[0].className = 'btn play active';
btnpause[0].className = 'btn pause';
//scan.play();
}
else {
btnplay[0].className = 'btn play';
btnpause[0].className = 'btn pause active';
//scan.pause();
}
}
</script>
<style>
.btn {
width: 182px;
height: 182px;
cursor: pointer;
position: absolute;
visibility: hidden;
}
.btn.active { visibility: visible; }
.btn.play { background: url('play.png') no-repeat 0 0; }
.btn.pause {
background: url('pause.png') no-repeat 0 0;
padding: 182px 0 0 0;
}
</style>
</head>
<body>
<div id="playpause">
<div class="btn play active" onclick="toggle()">
</div>
<div class="btn pause" onclick="toggle()">
<img src="other.png" alt="other" />
</div>
</body>
</html>