jmc92 Posted April 19, 2011 Share Posted April 19, 2011 Ok so I found this script here-http://www.javascriptkit.com/script/script2/xeye.shtmlIts the only type of script like it that's cross compatible to my needsI have this imageAnd I want this image to slide around inside of it (left and right only) as the mouse moves aroundNeed help accomplishing that Link to comment Share on other sites More sharing options...
jmc92 Posted April 19, 2011 Author Share Posted April 19, 2011 I also have this script </head><script>function mouseXY(e){// so that it'll work in DOM compliant browsers as well as IEe = (e) ? e : window.event; var Y = e.clientX;var X = e.clientY;document.getElementById("movingDiv").style.left=Y;}window.onload=mouseY;</script></head><body onmousemove="mouseXY(event);"><table border="2" bordercolor="blue" cellpadding="2" cellspacing="1" width="405px" overflow="visible"><tr><td width="135"><div id="movingDiv" style="top=20;left=200;position:absolute;border-color:#000000;border:groove;width:250px;height:96px;background-color:#CCCCCC" onClick="java script:this.style.display='none';"></div></td></tr></table></body> that's closer to doing what I was talking aboutBut I would like to make it so I could constrain the area that the div is allowed to move in and have the mouse pointer be able to move over the center of the div instead of always staying to the left of it Link to comment Share on other sites More sharing options...
jmc92 Posted April 25, 2011 Author Share Posted April 25, 2011 Anyone? Link to comment Share on other sites More sharing options...
dsonesuk Posted April 25, 2011 Share Posted April 25, 2011 If you want the slider image to move as the mouse moves outside the slidebar area, that is more complicated to set up, if you just want the slider to move as the mouse moves within the slidebar area then will this do? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script><script type="text/javascript">/*<![CDATA[*//*---->*/$(document).ready(function() { var outerwidth=parseInt($("#slider_wrapper").css("width")); var sliderwidth=parseInt($("#slider").css("width")); var centerpos=(outerwidth-sliderwidth)/2; $("#slider").css("left", centerpos+"px"); $("a#left").mouseover(function () { $("#slider").stop().animate({ left: (0)+"px"}, 500); }); $("a#right").mouseover(function () { $("#slider").stop().animate({ left: ((outerwidth-sliderwidth)-2)+"px"}, 500); }); });/*--*//*]]>*/</script><style type="text/css">#slider_wrapper{background:url(62slidecontainer.png) no-repeat 0 0; width:188px; height:28px;overflow:hidden; position:relative;}#slider{background:url(65slider.png) no-repeat 0 0; width:96px; height:25px; top:1px; position:relative;}#slider_wrapper a {position:absolute; height:100%; width:50%; color:#CCC; text-decoration:none;}#slider_wrapper a#left{ left:0; top:0;}#slider_wrapper a#right{ right:0; top:0; text-align:right;}</style></head><body><div id="slider_wrapper"><div id="slider"></div><a id="left" href="java script:void(0);"></a><a id="right" href="java script:void(0);"></a></div></body></html> Link to comment Share on other sites More sharing options...
jmc92 Posted April 26, 2011 Author Share Posted April 26, 2011 That's pretty much perfect, but do you know a way to make that work in Netscape-4 and IE-5?Those are the target browsers Link to comment Share on other sites More sharing options...
thescientist Posted April 26, 2011 Share Posted April 26, 2011 yikes... where are those browsers still being used? Link to comment Share on other sites More sharing options...
justsomeguy Posted April 26, 2011 Share Posted April 26, 2011 Seriously? Your target browsers are Netscape 4, which is both one of the most buggy browsers and also no longer even available, and a version of Internet Explorer that was bundled with Windows 98 SE? Just out of curiosity, why are those your target browsers?I would be pretty shocked if dsonesuk, or anyone else, can get things like this working in Netscape 4 and IE 5. Getting those two browsers to agree on anything is a minor miracle. That code uses jQuery, if you check the browser compatibility page for jQuery you'll see that the minimum version of IE is 6, and the word "Netscape" doesn't even appear on the page:http://docs.jquery.com/Browser_compatibility Link to comment Share on other sites More sharing options...
jmc92 Posted April 26, 2011 Author Share Posted April 26, 2011 Ok well things that work on IE5 seems to work on NS4And NS4 is almost the exact clone of the browser used by the psp go called netfrontOld post of the original netfront > http://gear.ign.com/articles/638/638179p1.htmlSo coding for it is always a challenge and can be interesting at times Link to comment Share on other sites More sharing options...
justsomeguy Posted April 26, 2011 Share Posted April 26, 2011 Ok well things that work on IE5 seems to work on NS4Guess how I can tell you weren't writing Javascript and CSS in 1999.So are you trying to design a site for Netscape 4, or are you trying to design a site for Netfront? I wouldn't expect to design a site for a 12-year old browser whose parent company went bankrupt, and expect that site to work in a browser specifically made for modern mobile devices. It sounds like you're looking for an SDK or emulator.http://www.google.com/search?hl=en&cli...tfront+browser+ Link to comment Share on other sites More sharing options...
jmc92 Posted April 26, 2011 Author Share Posted April 26, 2011 Someone asked if I could create a "cool iris" (simulator)And I told them that it would be hard but I would try to at least make a concept GUIIts really just a fancy web page I'm creating Link to comment Share on other sites More sharing options...
jmc92 Posted April 26, 2011 Author Share Posted April 26, 2011 Also, the to examples I posted above with the eyes and the moving div both work on the target browserI would just like to limit the movement area of the second one I posted Link to comment Share on other sites More sharing options...
dsonesuk Posted April 27, 2011 Share Posted April 27, 2011 heres the non jquery version, the lowest IE version i could test it on was IE5.5(IE Tester) , and it worked in that version. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*/ function getStyleValue(el, property){ var cs, val = false; if (window.getComputedStyle) { cs = getComputedStyle(el, null); val = cs.getPropertyValue(property); } else if (el.currentStyle) { property = hyphen2camel(property); val = el.currentStyle[property]; } return val; } function hyphen2camel (str) { return str.replace(/\-(.)/g, function (m, c) { return c.toUpperCase(); } );} var outerwidth=""; var sliderwidth=""; var centerpos=""; var increment_value=4; function moveleft(){currentposX=parseInt(getStyleValue(document.getElementById("slider"), "left"));i=currentposX;i=i+increment_value;if(i<=((outerwidth-sliderwidth)-2)){document.getElementById("slider").style.left=i+"px";t = setTimeout("moveleft()",1);}else{document.getElementById("slider").style.left=((outerwidth-sliderwidth)-2)+"px";clearTimeout(t);}} function moveright(){currentposX=parseInt(getStyleValue(document.getElementById("slider"), "left"));i=currentposX;i=i-increment_value;if(i>=0){document.getElementById("slider").style.left=i+"px";t = setTimeout("moveright()",1);}else{document.getElementById("slider").style.left="0px";clearTimeout(t);}} window.onload=function(){outerwidth=parseInt(getStyleValue(document.getElementById("slider_wrapper"), "width"));sliderwidth=parseInt(getStyleValue(document.getElementById("slider"), "width"));centerpos=(outerwidth-sliderwidth)/2;document.getElementById("slider").style.left=centerpos+"px"; document.getElementById("right").onmouseover=function(){moveleft();} document.getElementById("left").onmouseover=function(){moveright();} } /*--*//*]]>*/</script><style type="text/css">#slider_wrapper{background:url(62slidecontainer.png) no-repeat 0 0; width:188px; height:28px;overflow:hidden; position:relative;}#slider{background:url(65slider.png) no-repeat 0 0; width:96px; height:25px; top:1px; position:relative;}#slider_wrapper a {position:absolute; height:100%; width:50%; color:#CCC; text-decoration:none;}#slider_wrapper a#left{ left:0; top:0;}#slider_wrapper a#right{ right:0; top:0; text-align:right;}</style></head><body><div id="slider_wrapper"><div id="slider"></div><a id="left" href="java script:void(0);"></a><a id="right" href="java script:void(0);"></a></div></body></html> Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.