I have mixed content (images, text) in an overflow:none element. Now, I'd like to automatically scroll that content in x/y axis based on the location of the mouse pointer. Overflow:auto wouldn't be an option, as I wouldn't like to show/use the scrollbars in that element.
I've found a script which does something similar, but only with the background image. Is there a way to have a similar effect but with moving the whole content of the div? Thank you for your answers in advance!
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test jQuery Move Background with Mouse Move</title>
<link rev="made" href="mailto:covertlinks [ at ] gmail [ dot ] com" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="generator" content="NoteTab Pro 5.5" />
<meta name="author" content="Perry Wolf" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="jquery.1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var vH=$('#viewer').height();
var vW=$('#viewer').width();
var vT=$('#viewer').offset().top;
var vL=$('#viewer').offset().left;
$('#viewer').mousemove(function(e){
var ypos=e.pageY-vT;
var xpos=e.pageX-vL;
var y=Math.round(ypos/vW*100);
var x=Math.round(xpos/vH*100);
$('#test').val(x+' , '+y);
$('#viewer').css({backgroundPosition: x+'% '+y+'%'});
});
});
</script>
</head>
<body style="color:#FFFFFF;background:#102030;text-align:center;">
<h1 style="text-align:center;">Test Move Background on Mousemove:</h1>
<div id="viewer" style="border:solid 1px #FFFFFF;margin:50px auto 0px auto;width:400px;height:400px;background:url(ironhide1024x768.jpg) 0% 0% no-repeat;cursor:url(target_cursor.gif), crosshair;text-align:center;line-height:300px;">
</div>
<input type="text" id="test" size="30" style="display:block;margin:10px auto;width:150px;" />
</body>
</html>
This was a fun one! Change it so you move the scrollTop and scrollLeft instead of background position. Since you have a percentage you could calculate the of scrollTop and scrollLeft like so. Check out the fiddle.
$(document).ready(function(){
var viewer = $('#viewer'),
vH = viewer.height(),
vW = viewer.width(),
vT = viewer.offset().top,
vL = viewer.offset().left,
sTop = viewer.find(':first').height() + 18 - vH,
sLeft = viewer.find(':first').width() + 18 - vW;
// the sTop and sLeft could be calculated differently. In this case
// I am assuming that the viewer has a single child that is larger than itself.
// realistically this should check total possible scrollTop and scrollLeft
$('#viewer').mousemove(function(e){
var $this = $(this),
y = (e.pageY-vT)/vH,
x = (e.pageX-vL)/vW;
$this.scrollTop(Math.round(sTop * y))
.scrollLeft(Math.round(sLeft * x));
});
});
Related
I have in my HTML an image (id=”stone”) which I hide. From this image I make later several copies (id=”stone_xxx) in JS with cloneNode, put them in the DOM and remove the hidden-class. Everything works all right. I need the width initially at program start (before I make the first copy) so I take it from the hidden image (id=”stone”). But I always get the naturalHeight (90px) and not the actual height (45px).
I even tried it in the console to exclude that perhaps CSS is executed after JS but this didn`t change anything, so I had to use window.onload like in Get image width height javascript.
let stone = document.getElementById( "stone" );
let newStone = stone.cloneNode( false );
newStone.classList.remove( 'hidden' );
let i = 1;
newStone.id = "stone_" + i;
let el = document.getElementById( 'position_' + i);
el.prepend(newStone);
console.log(stone.naturalWidth); // => 272
console.log(stone.width); // => 272 Should be : 45
.hidden { display: none;}
.stone { width: 45px;}
<img id="stone" class="stone hidden" src=https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png />
<div id="position_1"></div>
I solved it: The browser doesn’t calculate the new dimensions of stone because of display none so the value of width isn´t recalculated. If I remove the class hidden everything is ok.
So I have 2 possibilities:
• Starting without class hidden and setting it afterwards.
• Get the width of one of the clones stones_xxx:
let newStone = document.getElementById( "stone_xxx" );
let width = newStone.width;
console.log(width); // => 45
Try this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<img id="image" src="http://www.fillmurray.com/200/200" alt="image" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
const width = $('#image').width();
console.log(width); // 200
</script>
</body>
</html>
I am using timepicker.js library to pick a time. On input click, timepicker should be shown next to input field. It works like expected if the input is in main view of document. If the input is situated lower (we need to scroll to see it) and we click it, the timepicker is shown more higher, in the main view page.
Expected behaviour:
Behaviour for inputs after scrolling lower:
I'd like to have timepicker next to input field in second case also, like in first case.
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<input type="text" id="time1" placeholder="Time" />
<div style="height: 70rem;"></div>
<input type="text" id="time2" placeholder="Time" value="18:00" />
<div style="height: 70rem;"></div>
</body>
<link
href="//cdn.jsdelivr.net/timepicker.js/latest/timepicker.min.css"
rel="stylesheet"
/>
<script src="//cdn.jsdelivr.net/timepicker.js/latest/timepicker.min.js"></script>
<script src="./index.js"></script>
</html>
index.js:
var time1 = document.getElementById("time1");
var time2 = document.getElementById("time2");
var timepicker = new TimePicker(["time1", "time2"], {
lang: "en"
});
timepicker.on("change", function(evt) {
var value = (evt.hour || "00") + ":" + (evt.minute || "00");
evt.element.value = value;
});
Looks like the style / css is setting position to absolute as opposed to relevant to the textbox control or area. I would load F12 dev tools and look into the CSS around the date picker to see if any classes or styles are being overwritten, namely around position values, or top / bottom etc...
Using SVG.js, I a have div that I placed in the svg as foreignobject. The div sizes nicely based on it innerHTML. I would like it be draggable. I added draggable() to the foreignobject, but it is not working properly: it does not retain the x,y dragged values.
Any ideas?
Below is an example of the problem.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>SVG.js - Draggable foreignobject </title>
<script type="text/javascript" src="//svgDiscovery.com/SVG.js/svg.js"></script>
<script type="text/javascript" src="//svgDiscovery.com/SVG.js/Plugins/svg.foreignobject.js"></script>
<script type="text/javascript" src="//svgDiscovery.com/SVG.js/Plugins/svg.draggable.js"></script>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width">
</head>
<body style='padding:10px;font-family:arial;'>
<center>
<h4>SVG.js - Draggable foreignobject </h4>
<table>
<tr>
<td>
<div id="svgDiv" style='background-color:lightgreen;width:400px;height:400px;'></div>
</td>
</tr></table>
<script id=myScript>
var mySVG = SVG('svgDiv').size(400, 400);
var fobj = mySVG.foreignObject().attr({id: 'fobj'})
fobj.move(30,30)
fobj.draggable()
var txt = "some text that is quite long. and it goes on and on. and it's pointless really. and the grammar is terrible. blah. blah. blah"
fobj.appendChild("div", {id: 'myDiv', innerHTML: txt})
myDiv.style.cursor = 'move'
myDiv.style.width = '200px'
myDiv.style.padding = '10px'
myDiv.style.background = 'white'
myDiv.style.height = myDiv.scollHeight+'px'
myDiv.style.border = "solid black 1px"
</script>
</body>
</html>
I'm trying to position an element relative to another using the jQuery offset() method and I am trying to figure out why the $(window).resize function is not working.
JSBIN:http://jsbin.com/lanako/7/edit?html,js,output
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<style>
div{
display:inline-block;
position:relative;
height:200px;
width:200px;
border:solid black;
}
#somepara{
border: solid blue;
position:relative;
left:20%;
}
</style>
<body>
<div id ="first"> FIRST</div>
<div id = 'somepara'> </div>
</body>
</html>
JavaScript:
var p = $( "#somepara" );
var pf = $('#first');
var offset = p.offset();
p.html( "left: " + offset.left);
function offcss(){
pf.css({'left': offset.left + 6 + "px"});
}
$(document).ready(function(){
offcss();
$(window).resize(function(){
offcss();
});
});
I am essentially grabbing the offset().left of the second element ('#somepara') and trying to set the css of ('#first') right 6 pixels from (#somepara).Note: (#somepara) is has a fluid measurement (%), so the left position changes.
The equation initially works, but I want to upon resizing the browser, for the equation pf.css(), which calculates the css left property of (#first) to execute. Unfortunately the $(window).resize function I have set is not working, and thus the left property of (#first) is unchanged. The end goal I want is regardless the browser size, the elements will be separated by 6 pixels (#first right 6 pixels from #somepara).
Any help would be greatly appreciated!
The position of #somepara changes when you resize, so you need to take the value of p.offset() every time you call the offcss() function (and not only on first load).
function offcss() {
pf.css({'left': p.offset().left + 6 + "px"});
}
Regarding the resize it seems like it does exactly what you want.
Check this example:
http://jsbin.com/dewazuyuqo/1/edit?html,js,output
I have been trying something like that:
laststmarker is a nokia.maps.map.StandardMarker
ncolor is a string= #0000FF
laststmarker.brush=ncolor;
laststmarker.brush="{color:'"+ncolor+"'}";
laststmarker.brush={color:ncolor};
and other things, how do i change the color without remove and add it again to the map?
The important thing to note here is that the brush is immutable - that means that you can't update the parameter directly - you need to use the setter e.g. marker.set("brush" , { color :"#FF0000"}); - this is usually followed by map.update(-1,0); in order to refresh the map.
The example below highlights a marker when the mouse pointer hovers over it. You need to use your own app id and token to get it to work.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="X-UA-Compatible" content="IE=7; IE=EmulateIE9" />
<base href="http://www.wrc.com/" />
<title>Highlighing a marker</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script language="javascript" src="http://api.maps.nokia.com/2.2.4/jsl.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<p> Place your pointer over the marker to highlight it.</p>
<div id="gmapcanvas" style="width:600px; height:600px;" > </div><br/><br/>
<script type="text/javascript">
// <![CDATA[
/////////////////////////////////////////////////////////////////////////////////////
// Don't forget to set your API credentials
//
// Replace with your appId and token which you can obtain when you
// register on http://api.developer.nokia.com/
//
nokia.Settings.set( "appId", "YOUR APP ID GOES HERE");
nokia.Settings.set( "authenticationToken", "YOUR AUTHENTICATION TOKEN GOES HERE");
/////////////////////////////////////////////////////////////////////////////////////
map = new nokia.maps.map.Display(document.getElementById('gmapcanvas'), {
'components': [
// Behavior collection
new nokia.maps.map.component.Behavior() ],
'zoomLevel': 5, // Zoom level for the map
'center': [41.0125,28.975833] // Center coordinates
});
// Remove zoom.MouseWheel behavior for better page scrolling experience
map.removeComponent(map.getComponentById("zoom.MouseWheel"));
var normalMarker = new nokia.maps.map.StandardMarker(new nokia.maps.geo.Coordinate(41.0125,28.975833), {brush: {color: "#FF0000"}});
normalMarker.addListener("mouseover" , function(evt) {
normalMarker.set("brush" , { color :"#0000FF"});
map.update(-1,0);
}, false);
normalMarker.addListener("mouseout" , function(evt) {
normalMarker.set("brush" , { color :"#FF0000"});
map.update(-1,0);
}, false);
map.objects.add(normalMarker);
// ]]>
</script>
</body>
</html>