why changing source of image , execute my inline javascript - javascript

Hi guys i just created a webpage , that use pagemethods
like this
function get_frame() {
//send a request to change image named "1.jpeg" in path of "src/frames/1.jpeg"
PageMethods.GrabFrame(imgw, imgh, t, f);
}
function t() {
//refresh image source to new image and set timer
document.getElementById('dImg').src = "src/frames/1.jpeg?" +
new Date().getTime();
setTimeout(function () { get_desktop(); }, Main.IMGrefresh.value);
}
function f() {
//do nothing
var x = 0;
}
And also used an inline javascript with jquery like this
<script>
$("#cover").mousemove(function (e) {
var parentOffset = $(this).parent().offset();
var relX = e.pageX - parentOffset.left;
var relY = e.pageY - parentOffset.top;
move_mouse(relX, relY);
});
</script>
And some asp.net clientside code like this
<div id="dDiv">
<img id="dImg" alt="" src="" />
<div id="cover">
</div>
</div>
That the inline javascript is at the end of that html code
So move_mouse() method must run only when user move his mouse, it moves correctly but it moves even when mouse didn't have movement when image refreshes, i mean when image refreshed by javascript, it runs move_mouse method, too.
Css for these elements
#cover {
position:absolute;
top:0px;
left:0px;
text-align:center;
background-color:Black;
height:200px;
width:300px;
border:0px none black;
margin:0px auto 0px auto;
filter: alpha(opacity=1);
-moz-opacity: 0.01;
-khtml-opacity: 0.01;
opacity: 0.01;
}
#dDiv {
position:relative;
text-align:center;
background-color:Black;
height:200px;
width:300px;
border:0px none black;
margin:0px auto 0px auto;
}
#dImg {
background-color:Black;
height:200px;
width:300px;
border:0px none black;
margin:0px 0px 0px 0px;
}
And also they are changing in javascript
function resize() {
imgh = Main.IMGheight.value;
imgw = Main.IMGwidth.value;
$("#dDiv").css("height", imgh);
$("#dDiv").css("width", imgw);
$("#dImg").css("height", imgh);
$("#dImg").css("width", imgw);
$("#cover").css("height", imgh);
$("#cover").css("width", imgw);
}

Ahh i just found it myself AGAIN , just move the mouse event to js function and put it in body onload , because inline javascript methods are saved in catch and this command => "new Date().getTime();" make it to refresh and get the new method , so this triggers the event .

Related

CSS transition doesn't work when javascript added properties continuous

Below is a simplified version of a problem I am having with my website.
function move(){
document.getElementById("box").style.transition = "0s";
document.getElementById("box").style.top = "100px";
document.getElementById("box").style.transition = "2s";
document.getElementById("box").style.top = "0px";
}
#box{
width:100px;
height:100px;
background:red;
position:relative;
top:0px;
}
<div id="box" onclick="move()"></div>
What I want it to do is make the box instantaneously jump downwards, and then slowly move back to its starting position. I have tested each of the four lines of code inside move() separately and they work perfect. I just can't get them to run in one go.
What am I doing wrong?
It seem the code needs to delay before assigning new property that cause browser can process the request. So you need to use setTimeout() to solving this problem.
function move(){
document.getElementById("box").style.transition = "0s";
document.getElementById("box").style.top = "100px";
setTimeout(function(){
document.getElementById("box").style.transition = "2s";
document.getElementById("box").style.top = "0px";
}, 10);
}
#box{
width:100px;
height:100px;
background:red;
position:relative;
top:0px;
}
<div id="box" onclick="move()"></div>
Instead of relying on transitions, it would be better to use #keyframes and animation, so that you don't have to use dirty tricks like changing the transition duration from 0 to actual value mid-animation to achieve the jump. Below is an example that utilizes the #keyframes css features:
function move(){
document.getElementById("box").style.animation = "movement 2s";
}
#box{
width:100px;
height:100px;
background:red;
position:relative;
top:0px;
}
#keyframes movement {
from {top: 100px;}
to {top: 0px;}
}
<div id="box" onclick="move()"></div>

HTML5 Drag and Drop with Coordinates

i'm new in Javascript and i got a task which i can't even solve..
I have to get a HTML 5 Drag and Drop, which can add Elements as much as i want, and if i want to edit one of the new elements or change the Position it has to be easy.
This is what it look like now:
http://picul.de/view/HRO
at the moment this don't work as i need..
who can help me?
var dragok = false;
var pos;
function allowDrop(e)
{
e.preventDefault();
}
function get_pos(e)
{
pos = [e.pageX , e.pageY];
}
function drag(e)
{
e.dataTransfer.setData("Text",e.target.id);
}
function drop(e)
{
e.preventDefault();
var canvas = document.getElementById("graphCanvas");
var ctx = canvas.getContext("2d");
var offset = e.dataTransfer.getData("text/plain").split(',');
var data=e.dataTransfer.getData("Text");
var img = canvas = document.getElementById(data);
var dx = pos[0] - img.offsetLeft;
var dy = pos[1] - img.offsetTop;
ctx.drawImage(document.getElementById(data), e.pageX - dx-170, e.pageY - dy-100);
}
function getCoordinates(e)
{
var canvas = document.getElementById("graphCanvas");
var ctx = canvas.getContext("2d");
x=ctx.clientX;
y=ctx.clientY;
document.getElementById("footerCoord").innerHTML="Coordinates: (" + x + "," + y + ")";
}
body {
background:#eee;
}
#DnDBox {
margin:0 auto;
margin-top:7vh;
width:80vw;
height:80vh;
padding:1vmax;
background:#f5f5f5;
/* Erstmal nur zur Übersicht */
border:1px solid #111;
}
#DnDBox #canvasBox {
border:1px solid #111;
}
#DnDBox .leftBox {
float:right;
width:25%;
height: 90%;
}
#DnDBox .leftBox select{
width:100%;
padding:5px;
margin-bottom:5px;
}
#DnDBox .leftBox .dragBox{
float:right;
width:100%;
height: 90%;
/* Erstmal nur zur Übersicht */
border:1px solid #111;
}
#DnDBox .leftBox .dragBox ul{
list-style-type: none;
margin: 0;
padding: 0;
}
#DnDBox .leftBox .dragBox ul > li{
float:left;
padding:20px;
text-align:center;
background:#eee;
}
#DnDBox .leftBox .dragBox ul > li:hover{
padding:20px;
text-align:center;
background:#ddd;
}
#DnDBox .leftBox img{
cursor:move;
}
#DnDBox .leftBox img:active{
cursor:move;
}
#DnDBox footer {
float:left;
margin-top:5px;
padding:5px;
width:100%;
border:1px solid #111;
}
<div id="DnDBox">
<canvas id="graphCanvas" onmousemove="getCoordinates(event)" ondrop="drop(event)" ondragover="allowDrop(event)" height=400 width=700 style="border:1px solid #000000;"></canvas>
<div class="leftBox">
<select name="plh1">
<option>Test</option>
<option>Test 1</option>
<option>Test 2</option>
<option>Test 3</option>
</select>
<select name="plh2"></select>
<div class="dragBox">
<ul>
<li><img id="img1" src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_circle_color-128.png" draggable="true" onmousedown="get_pos(event)" ondragstart="drag(event)"/></li>
<li><img id="img2" src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/twitter_circle_color-128.png" draggable="true" onmousedown="get_pos(event)" ondragstart="drag(event)"/></li>
<li><img id="img3" src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/linkedin_circle_color-128.png" draggable="true" onmousedown="get_pos(event)" ondragstart="drag(event)"/></li>
</ul>
</div>
</div>
<footer id="footerCoord">asd</footer>
</div>
greets,
daniel
You can't drag an image painted onto a canvas around without additional support - the painted image is just a set of pixels that are part of the canvas's image data.
You may be interested in a canvas library called Fabric.js (tag and homepage). I'm not "recommending" it as such - I haven't used it - but you can certainly drag canvas objects created by the library on the homepage.
A simpler solution might be to use JavaScript/HTML without the canvas. Replace the canvas with, say, a relative DIV element (so it can act as a container for absolutely positioned elements). Then dropping an image on the DIV creates a new Image object (say a clone of the image dragged) and absolutely positions it within the container according to where it was dropped. The new copy of the image can have it's own drag handlers to move it around the container and program options could be added to delete a (cloned) dropped image as necessary.
You could also calculate the position of the mouse relative to the image element when starting a drag operation. This would allow dropping it under the mouse in the same relative position to the mouse cursor as at the start of the drag operation. This question on retrieving the X Y position of an element may be of help. (At the moment the dropped image does not appear under the cursor.)
You need to keep track of the elements. The canvas is just a bitmap image with no understanding of what a circle or square is.
Ideas:
(1) Create a separate canvas with a transparent background for each shape that you make and overlay them. When clicking on or touching a point of the canvas repeatedly, cycle through the potential target elements below that event, highlighting them in some way. When the correct element is selected, define an event (a gesture) that will allow the user to select that target for editing. Stop the selection function and initiate the editing function.
(2) Forget the canvas thing, and do it all with SVG

JavaScript - Why is this code not working?

I am using JavaScript and CSS to try and make a masic messagebox using an iframe. What I would like to happen is the document to have an opacity of 0.4, and the message box to show. However, none of that happens. What should I do?
My JavaScript
function messageBox(text)
{
document.style.opacity = 0.4;
document.style.filter = 'alpha(opacity=40);';
var box = document.createElement('iframe');
box.setAttribute('id', 'msgBox');
}
My CSS
#msgBox
{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
height: 250px;
width: 350px;
background-color: #CCC;
margin: auto;
z-index:9999;
color:white;
box-shadow:1px 1px 1px 1px #444;
}
http://jsfiddle.net/a4m9d/
function messageBox(text){
document.body.style.opacity = 0.4;
document.body.style.filter = 'alpha(opacity="40");';
var box = document.createElement('iframe');
box.id='msgBox';
document.body.appendChild(box);
}
although I would recommend using a div instead of an iframe, for performance and flexibility
The document doesn't have a style property. Only elements have a style, and document is not an element.
You want to target the <body>, so try document.body instead.
function messageBox(text) {
document.body.style.opacity = 0.4;
document.body.style.filter = 'alpha(opacity="40");';
var box = document.createElement('iframe');
box.setAttribute('id', 'msgBox');
}
DEMO: http://jsfiddle.net/a4m9d/3/

Absolute Positioned img inside absolute div doesnt position as expected

I have the following html
<div class="banner_area_internal">
<div class="banner_wrapper_internal" id="overlay_field">
<img src="images/internal_banner_holder.png" />
<img class="internal_banner" src="images/about-banner.jpg" />
<div id="overlay">
<img class="internal_banner_overlay" src="images/about-banner_hover.jpg" />
</div>
</div>
</div>
css
.banner_area_internal {
margin-top:10px;
width:100%;
height:250px;}
.banner_wrapper_internal {
height:250px;
width:1000px;
margin:0 auto}
.banner_wrapper_internal p {
font-size:30px;
color:#ffffff;
font-weight:bold;
margin:0px 300px;
display:block}
.internal_banner {
position:relative;
top:-235px;
left:15px;
z-index:-2;
}
.internal_banner_overlay {
position:absolute;
top:-25px;
left:15px;
z-index:-2;
}
#overlay{
position:absolute;
overflow:hidden;
width:340px;
height:200px;
z-index:-1;
border:2px #aeaeae solid;
}
#overlay_field
{
position: relative;
width:1000px;
height:250px;
overflow:hidden;
}
and the following script as mentioned by #rkw
$(document).ready(function() {
$("#overlay_field").hover(function(){
$("#overlay").show(); //Show tooltip
}, function() {
$("#overlay").hide(); //Hide tooltip
})
$('#overlay_field').mousemove(function(e){
$("#overlay").css({left:e.pageX-360, top:e.pageY-280});
});
});
The Effect I'm trying to achieve here is:
An image appears in as a banner "internal_banner"
When the mouse hovers over this image(or rather "overlay_field") a small div appears which follows the mouse. Now the contents of the div is another image "internal_banner_overlay"
I want this image to be positioned exactly as "internal_banner", i.e stay in the same place so it appears like the mouse let's you see another underlying image. The problem is the image doesn't stay at one place, it positions within the div and moves with the mouse rather than the document even though it's position is set to absolute.
In simple words, when the mouse moves over the banner area, it should appear like the cursor changed to a small box that let's you see through the banner at another image.
Just add the temp banner in the upper div and change its opacity on mouseover and mouseout events.
<div class="banner_area_internal">
<div class="banner_wrapper_internal" id="overlay_field">
<img src="abcd.png" />
<img class="internal_banner permBanner" src="permBanner.png" />
<img alt="" src="tempBanner.jpg" id="temp" style="height: 250px; width: 1000px; opacity: 0; position: absolute">
</div>
</div>
JS:
$(document).ready(function() {
$("#overlay_field").hover(function(){
$("#overlay").show(); //Show tooltip
}, function() {
$("#overlay").hide(); //Hide tooltip
})
$('#overlay_field').mousemove(function(e){
var width = 250;
var height = 250;
var left = parseInt(e.pageX)-parseInt(pageXOffset);
var top = parseInt(e.pageY)-parseInt(pageYOffset);
var a = document.getElementById("temp");
a.style.opacity = 1;
a.style.left = "0px";
a.style.top = "0px";
a.style.clip = "rect("+top+","+(left+100)+","+(top+100)+","+left+")";
});
});
Style
.banner_area_internal {
margin-top:10px;
width:100%;
height:250px;}
.banner_wrapper_internal {
height:250px;
width:1000px;
margin:0 auto}
.banner_wrapper_internal p {
font-size:30px;
color:#ffffff;
font-weight:bold;
margin:0px 300px;
display:block;
}
.internal_banner {
position:relative;
top:-235px;
left:15px;
z-index:-2;
}
.internal_banner_overlay {
position:absolute;
top:-25px;
left:15px;
z-index:-2;
}
#overlay{
position:absolute;
overflow:hidden;
width:250px;
height:250px;
border:2px #0000bb solid;
}
#overlay_field
{
position: absolute;
width:1000px;
height:250px;
overflow:hidden;
}​
#temp{position:absolute;}
Alternate:
Or alternatively you can add and remove the temporary banner on the mouseover and mouseout events.

It won't hover or let me click on images in my gallery

Since I've added this cropping effect (http://jsfiddle.net/BPEhD/2/) to the images in my gallery, there is no hover state on the images and it won't let click on them either. The pointer cursor appears when I hover over them, but it won't bring up the panel when I click on it. How can I solve this?
HTML:
<div id="thumbsWrapper">
<div id="content">
<p class="crop">
<img src="image1.jpg" alt="image1.jpg"/></p>
<p class="crop">
<img src="image2.jpg" alt="image2.jpg"/></p>
<p class="crop">
<img src="image1.jpg" alt="image1.jpg"/></p>
<div class="placeholder"></div>
</div>
</div>
<div id="panel">
<div id="wrapper">
<a id="prev"></a>
<a id="next"></a>
</div>
</div>
CSS:
#thumbsWrapper{
position:relative;
height:100%;
width:100%;
left:0px;
right:0px;
}
#content{
position:relative;
height:100%;
width:100%;
left:0px;
display:none;
}
.crop{
float:left;
margin:.5em 10px .5em 0;
overflow:hidden; /* this is important */
position:relative; /* this is important too */
border:1px solid #ccc;
width:200px;
height:200px;
}
.crop img{
position:absolute;
top:-50px;
left:-50px;
}
#content img{
float:left;
margin:5px 0px 5px 5px;
cursor:pointer;
opacity:0.4;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=40);
}
#panel{
background-color:#ddd;
width:100%;
position:fixed;
bottom:0px;
left:0px;
right:0px;
height:0px;
text-align:center;
z-index:999;
}
#panel img{
cursor:pointer;
position:relative;
border:1px solid #000;
-moz-box-shadow:0px 0px 10px #111;
-webkit-box-shadow:0px 0px 10px #111;
box-shadow:0px 0px 10px #111;
display:none;
}
Relevant JS:
$(function() {
/* this is the index of the last clicked picture */
var current = -1;
/* number of pictures */
var totalpictures = $('#content img').size();
/* speed to animate the panel and the thumbs wrapper */
var speed = 500;
/* show the content */
$('#content').show();
/*
when the user resizes the browser window,
the size of the picture being viewed is recalculated;
*/
$(window).bind('resize', function() {
var $picture = $('#wrapper').find('img');
resize($picture);
});
/*
when hovering a thumb, animate it's opacity
for a cool effect;
when clicking on it, we load the corresponding large image;
the source of the large image is stored as
the "alt" attribute of the thumb image
*/
$('#content > img').hover(function () {
var $this = $(this);
$this.stop().animate({'opacity':'1.0'},200);
},function () {
var $this = $(this);
$this.stop().animate({'opacity':'0.4'},200);
}).bind('click',function(){
var $this = $(this);
/* shows the loading icon */
$('#loading').show();
$('<img alt="">').load(function(){
$('#loading').hide();
if($('#wrapper').find('img').length) return;
current = $this.index();
var $theImage = $(this);
/*
After it's loaded we hide the loading icon
and resize the image, given the window size;
then we append the image to the wrapper
*/
resize($theImage);
$('#wrapper').append($theImage);
/* make its opacity animate */
$theImage.fadeIn(800);
/* and finally slide up the panel */
$('#panel').animate({'height':'100%'},speed,function(){
/*
I think the problem is with the selector you're using to match your image tags. You're using the child selector which only selects direct children of the selected element (see documentation). Since (I'm guessing) you've added p tags around your images to apply the cropping effect, the selector is no longer returning the images.
Try updating your code as follows:
$('#content img').hover(function () {
var $this = $(this);
$this.stop().animate({'opacity':'1.0'},200);
}
Note that this will select all elements that are descendants of the content div (see documentation) so, depending on what you're doing, you may want to consider a more specific selector.
Just a friendly hint, but a fully functioning fiddle demonstrating the issue would make it easier to help.

Categories