|
JavaScript - Position A Div Background Relative With Page Bg
I want to use a windows aero theme for each div on my page. I.e. the divs are transparent and have a blur effect to them. The only way I see to achieve this is to make the div background a blurred version of the page background and use javascript to change the div background position based on the divs position on the page.
I have used the demo found here as an example, but the problem with it is that the divs background position won't sync with the page background unless the user clicks on the div and moves it slightly. This isn't a problem if the divs starting position is top left, but if you want to have it start in the center of the page initially, the divs background position is top left. How could I modify this code to move the divs background to the correct position on page load? I do not want the user to be able to drag the divs. Code: $(document).ready(function () {
var dragging = true;
var startX, startY, posX, posY;
var window = $("#Panel1");
$("#header").mousedown(function (e) {
startX = e.clientX;
startY = e.clientY;
posX = window.offset().left;
posY = window.offset().top;
console.log("X: " + e.clientX + ", Y: " + e.clientY);
dragging = true;
});
$(document).mousemove(function (e) {
if (dragging) {
moveX = e.clientX - startX;
moveY = e.clientY - startY;
console.log("X: " + moveX + ", Y: " + moveY);
window.css({
left: posX + moveX,
top: posY + moveY,
"background-position": "-" + (posX + moveX) + "px -" + (posY + moveY) + "px"
});
}
}).mouseup(function () {
dragging = false;
});
});
Similar TutorialsI need to find the position of an element on the page relative to the browser window. Its part of a popup calendar script (and no, they don't want to change it so please don't suggest jQuery date-picker etc) The script uses these functions http://www.mattkruse.com/javascript/...on/source.html to find the position of the anchor to pop up the calendar next to it. Now the client wants to make the calendar fixed when the user scrolls so that it always stays on screen. The most graceful solution is using css position:fixed (I'm aware it doesn't work in IE6 - that's not a problem) I've been using the getAnchorWindowPosition function to get the coordinates but the numbers its giving are wrong (to different degrees depending on the browser) It was only 200px out in the Y axis in Firefox but in IE7&8 its off the screen. I've tried googling for an answer but I can't seem to find a workable solution, mostly I've been coming up with absolute position scripts or 'just use jquery' answers. So I've done a ton of research and tried every fix I could think of (jQuery fixes, htc behaviours, etc) and nothing has worked. It seems most of the fixes are built for just changing the background color. I just can't get it to work in IE6! Even if I just got the Javascript to change the state without rollovers (for IE6) that would be okay. The way it's setup is that there's an image in 3 states in it (inactive, rollover, active), setup on the y-axis. So when a user rolls over it shoves the background down 111px to show the rollover, etc. I know IE6 doesn't support hover on anything except anchors. This works in IE 7/8 FF 2/3 Safaris and most likely everything else: http://www.muchomungo.com/CrowdTwist..._template.html Relevant CSS Code: li {
list-style:none;
float:left;
}
ul {
list-style:none;
margin:0;
padding:0;
}
ul#toolbar a {
height: 111px;
display:block;
text-indent:-9999px;
font-size:0px;
line-height:0px;
outline: none;
}
#toolbar li.unselected:hover {
background-position:0px 222px;
}
#toolbar li.selected {
background-position: bottom;
height: 111px;
z-index: 10;
}
#toolbar li.unselected {
background-position: top;
margin-left:0px;
}
CSS file JS Code: var currentSection = 'dashboard';
var newpane = function(gotoLink){
if (currentSection == gotoLink) {
return;
}
lastSection = currentSection;
currentSection = gotoLink;
// Change the section highlight.
// Extract the root section name, and use that to change the background image to 'top', revealing the alt. state
document.getElementById(currentSection).className = "selected";
if (lastSection) {
document.getElementById(lastSection).className = "unselected";
}
}
Thanks for any help! Hi all, I tried to create a mouse over effect using jquery. When user hovers #box1_trigger link, the #service_box1 div should change it's background position. The code i created is the following it's not working for some reason. html: Code: <div class="service_box box1" id="service_box1">
<a href="#" id="box1_trigger">
<h3>bla bla</h3>
<p>bla bla bla bla bla</p>
</a>
</div>
javascript: Code: <script type="text/javascript">
$(document).ready(function() {
$("#box1_trigger").hover(
function() {
$("#service_box1").stop().animate({backgroundPosition:"(0 -250px)"}, "slow");
},
function() {
$("#service_box1").stop().animate({backgroundPosition: "0 0"}, "slow");
}
);
});
</script>
css: Code: #service_box1{
width:318px; height:282px;
float:left;
background:url(images/services_panel.png) 0 0 no-repeat;
}
a#box1_trigger{
width:100%; height:100%;
float:left;
display:block;
}
Could you help me fix this please?? Hi, I'm kinda hoping this is possible but haven't found any reference to it... I have a parent page that opens a popup on click that launches a sidebar navigation on the right of the screen and resizes the parent page. What I am wanting to do is create a second popup (approx 250px high) that opens below the navigation (which is only around 600px high) but I have noticed that even when you have no status bar in the popup windows, they can still end up overlapping because of additional tools or plugins that the viewer has in their browser. Is there any way to get the popups to butt up against each other instead of overlapping? More like a relative popup? Any assistance would be appreciated. :-) Hi I got this code for my coutdown: Code: <script language="JavaScript"> TargetDate = "12/31/2020 5:00 AM"; BackColor = "palegreen"; ForeColor = "navy"; CountActive = true; CountStepper = -1; LeadingZero = true; DisplayFormat = "%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds."; FinishMessage = "It is finally here!"; </script> <script language="JavaScript" src="http://scripts.hashemian.com/js/countdown.js"></script> But i don't know how to place it where I want on my html page Normaly I use the CSS value position:absolute Hi, nothing to serious, but definitely annoying. Every time i load my page, it loads to the halfway Y position down the page. I want to page to always load top every time it is refreshed or referenced to. You can see the problem here. Try and go to www.simeoncreative.com and click on any of the menu nav links. the page will load, but just halfway down the page. I tried both the Code: $(document).load().scrollTop(0); and Code: $(document).ready(function(){
$(this).scrollTop(0);
});
JS codes in the linked .js file. How can I fix this? Thanks in advance for any help. Hello, So I have two pieces of Javascript attached to my open/close text boxes. One for the visibility function: Code: <script type="text/javascript">
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
</script>
The other for changinging the image to reflect the text box's status (open of closed): Code: <script type="text/javascript">
var ImgPath='../images/portfolio/';
function changeImage (id) {
var tab = document.getElementById(id);
if (tab.src.match('open.png')) {
tab.src = ImgPath + 'close.png';
}
else {
tab.src = ImgPath + 'open.png';
}
}
</script>
The problem only shows further down the page, when I click to open a box it automatically goes back to the top of the page instead of staying at the user's current page position I would like it to stop changing the page position onclick. Any help would be much appreciated! I have a floating div that stays at the bottom of the browser window while the user scrolls down a long page. The div reads "scroll down for more". How can I determine the current position of the div in relation to the top of the page, not the top of the browser window. I need to determine this because I would like to hide the div when the user scrolls to the top of the last page. I have looked at offsetParent, offsetHeight, scrollHeight, etc. I have the code for everything except determining the position of the div, or the distance of the div from the top of the page. Code is triggered on the following page when mouse position leaves a profile link while logged in: http://www.veinsfetiche.com/forums/ Code: <script type="text/javascript">
// <![CDATA[
// show the popup
function show_popup(UserID) {
if(http_getuser) {
//get user data and show popup
sendRequest(UserID);
}
}
// hide the popup
function close_popup() {
document.getElementById('popup').style.display='none';
}
// Make the request
function createRequestObject() {
if(window.XMLHttpRequest){
ro = new XMLHttpRequest();
} else if(window.ActiveXObject) {
ro = new ActiveXObject("Msxml2.XMLHTTP");
if(!ro) {
ro = new ActiveXObject("Microsoft.XMLHTTP");
}
}
return ro;
}
//Create Request Variables
var http_getuser = createRequestObject();
//Send Request for user info
function sendRequest(UserID) {
var userinfo_url = '{AJAX_USERINFO_PATH}';
http_getuser.open('get', userinfo_url.replace('USERID', UserID));
http_getuser.onreadystatechange = handleResponse;
http_getuser.send(null);
}
// fill in the response
function handleResponse() {
if(http_getuser.readyState == 4 ){
var xmlDoc = http_getuser.responseXML;
if(xmlDoc.hasChildNodes()) {
document.getElementById('ajax_username').innerHTML = xmlDoc.getElementsByTagName('username')[0].firstChild.nodeValue;
document.getElementById('ajax_registert').innerHTML = xmlDoc.getElementsByTagName('regdate')[0].firstChild.nodeValue;
document.getElementById('ajax_posts').innerHTML = xmlDoc.getElementsByTagName('posts')[0].firstChild.nodeValue;
document.getElementById('ajax_website').innerHTML = xmlDoc.getElementsByTagName('website')[0].firstChild.nodeValue;
document.getElementById('ajax_from').innerHTML = xmlDoc.getElementsByTagName('from')[0].firstChild.nodeValue;
document.getElementById('ajax_last_visit').innerHTML = xmlDoc.getElementsByTagName('lastvisit')[0].firstChild.nodeValue;
document.getElementById('ajax_rank').innerHTML = xmlDoc.getElementsByTagName('rank')[0].firstChild.nodeValue;
document.getElementById('ajax_avatar').innerHTML = xmlDoc.getElementsByTagName('avatar')[0].firstChild.nodeValue; //document.getElementById('ajax_add').innerHTML = xmlDoc.getElementsByTagName('add')[0].firstChild.nodeValue;
//Apply style which makes profile info visible
document.getElementById('popup').style.display='block';
//Get height of popup
var getRefById = function() {return null;};
if(document.getElementById) {
getRefById = function(i) {return document.getElementById(i);};
} else if(document.all) {
getRefById = function(i) {return document.all[i] || null;};
}
var d = getRefById('popup'), h = '0px', o;
if(d) {
if((o = document.defaultView) && o.getComputedStyle) {
h = o.getComputedStyle(d, null).height;
} else if('number' == typeof d.offsetHeight) {
h = d.offsetHeight + 'px';
}
}
// 'h' should now contain the height of 'myDiv', or 0px
//alert(h);
//make room for popup
document.getElementById('test').style.height= h;
}
}
}
// set popup to mouse possition
function set_div_to_mouse(e) {
//Make x and y cord vars
var docX, docY;
//get page info
if(e) {
if(typeof(e.pageX) == 'number') { docX = e.pageX; docY = e.pageY;}
else {docX = e.clientX; docY = e.clientY;}
//vert
} else {
e = window.event;
docX = e.clientX; docY = e.clientY;
if(document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
docX += document.documentElement.scrollLeft; docY += document.documentElement.scrollTop;
}
else if(document.body && (document.body.scrollTop || document.body.scrollLeft)) {
docX += document.body.scrollLeft; docY += document.body.scrollTop;
}
}
//hor
if (docX > document.body.offsetWidth - 400) {
document.getElementById('popup').style.left = (docX - 350) + "px";
} else {
document.getElementById('popup').style.left = (docX - 5) + "px";
}
document.getElementById('popup').style.top = (docY + 30) + "px";
}
//document.onmousemove = set_div_to_mouse;
// ]]>
</script>
<div id="test">
<div class="forabg" id="popup" style="width: 90%;">
<div class="inner">
<span class="corners-top"><span></span></span>
<ul class="topiclist fullwidth">
<li class="header"><dl><dt>{L_READ_PROFILE}</dt></dl></li>
</ul>
<ul class="topiclist forums">
<li><dl>
<dd style="width:100%">
<table> <tr> <td><div id="ajax_avatar"></div></td> <td><strong>{L_USERNAME}:</strong> <span id="ajax_username"></span><br /> <strong>{L_TOTAL_POSTS}:</strong> <span id="ajax_posts"></span><br /> <strong>{L_SORT_RANK}:</strong> <span id="ajax_rank"></span><br /> <strong>{L_JOINED}:</strong> <span id="ajax_registert"></span><br /> <strong>{L_LAST_VISIT}:</strong> <span id="ajax_last_visit"></span><br /> <strong>{L_LOCATION}:</strong> <span id="ajax_from"></span><br /> <strong>{L_WEBSITE}:</strong> <span id="ajax_website"></span><br/> <span id="ajax_add"></span> </tr> </table>
<br/ style="clear: both;">
</dd>
</dl></li>
</ul>
<span class="corners-bottom"><span></span></span>
</div>
</div>
</div>
When my code hits line 80, the height of a div tag is increased to make room for expanding content, so that the new content does not overlap already existing content. When the div tag's height increases, this increases the overall page height. When the page height increases, then the scroll bar stays in the same place, but the page position changes in the browser. Is there anyway to prevent the viewer's position from changing when room is made for the expanding content? I'm new to javascript and am not sure why this works in firefox and not chrome. I am trying to create a script that keeps an object fixed horizontally while bing positioned absolute vertically. if I replace the toPP variable in document.getElementById('fire').style.top = toPP; with say '50px' it will move the element down 50 pxs, but how I have it currently it doesn't do anything in chrome Code: <script type="text/javascript" >
window.onscroll = function()
{
if( window.XMLHttpRequest ) {
var x = 0 -document.documentElement.scrollTop;
var toP = String(x);
var toPP = toP + "px";
document.getElementById('fire').style.position = 'fixed';
document.getElementById('fire').style.top = toPP;
}
}
</script>
I need to convert a position:fixed element to position:absolute when the user resize their browser window below 1000px. Right now it does nothing. The element always keeps the fixed positioning even after resizing the window. Here's what I have right now: Code: <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<base href="http://www.area51entertainment.co/" />
<title>Emoto <?php echo "$section"; ?></title>
<meta charset="UTF-8" />
<meta name="verify-v1" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content="Andrew McCarrick" />
<meta name="robots" content="index, follow" />
<style type="text/css">
body,html {
background: #FFFFFF; /* Old browsers */
color: #000000;
font-family: Verdana;
margin-right:auto;
margin-left:auto;
max-width:1000px;
padding: 0px;
margin-top: 0px;
margin-bottom: 0px;
}
</style>
<link rel="stylesheet" href="emoto/style.css" media="screen" />
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
<link rel="apple-touch-icon" href="http://www.area51entertainment.co/TouchIcon.png" />
<link rel="apple-touch-icon-precomposed" href="http://www.area51entertainment.co/TouchIcon.png" />
<link rel="image_src" href="./logo.png" />
<script language="javascript" src="emoto/float.js"></script>
</head>
<body>
<div class="wrapper">
<div id="header_float">
<div class="header_wrapper">
<div class="logo">
Picture
</div>
<div class="links">
Home | Settings | Notifications | Requests | Messages | Search Bar
</div>
<div class="links_right">
Profile Link/Sign-Out
</div>
</div>
</div>
<div class="content_wrapper">
Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2
Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2
Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2
Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 T
est2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2Test2Test2 Test2
</div>
</div>
</body>
</html>
style.css Code: a:link {color: #FFFFFF; text-decoration: none;}
a:visited {color: #FFFFFF; text-decoration: none;}
a:active {color: #FFFFFF; text-decoration: none;}
a:hover {color: #3399FF; text-decoration: none;}
.wrapper{
min-height: 2000px;
min-width: 1000px;
}
#header_float{
width: 100%;
min-width: 1000px;
height: 35px;
left:0;
right:0;
top:0;
position: fixed;
background: #49963A;
z-index: 1000;
}
.header_wrapper{
width: 1000px;
height: 35px;
margin-right:auto;
margin-left:auto;
padding: 0px;
margin-top: 0px;
margin-bottom: 0px;
color: #FFFFFF;
}
.logo{
float: left;
width: 150px;
height: 25px;
font-size: 26px;
position: relative;
top: -1px;
left: 8px;
}
.links{
float: left;
width: 670px;
height: 25px;
position: relative;
top: 7px;
}
.links_right{
float: right;
width: 180px;
height: 25px;
position: relative;
top: 7px;
}
.content_wrapper{
position: relative;
top: 35px;
width: 995px;
min-height: 450px;
}
img{
border: 0px;
}
float.js Code: if (screen.availWidth<=999)
document.getElementById('header_float').style.position = 'absolute';
else
document.getElementById('header_float').style.position = 'fixed';
I've tried the following: Code: <script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
if ( top.location.href!= window.location.href ) {
document.getElementById( 'bodybg' ).style.background='#12111C';
}
// ]]>
</script>
and Code: <script type="text/javascript" language="javascript" charset="utf-8">
// <![CDATA[
if ( top.location == location ) {
document.getElementById( 'bodybg' ).style.background='#12111C';
}
// ]]>
</script>
I've tested the if statement and the set background code, using a button. I'm guessing it fails since there is no background when the script runs. Any ideas? Hi, As you will see with the code below when the text ONE and TWO are clicked on it displays a background color. When ONE is activated TWO is off. When TWO is activated ONE is off. But when the page loads I want ONE to display the background color. When ONE displays the background color after the page has loaded, I want to click on TWO to display it's background color and ONE should turn off as it does now. I can't figure out how to activate the background color for ONE when the page loads. Then if it is activated when the page loads, how to turn off ONE and turn on TWO when clicked on and visa versa. Code: <!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=iso-8859-1" />
<title>Untitled Document</title>
<script language="javascript" type="text/javascript">
var btn = function () {
var active = null, bcolor = '#84DFC1';
if (this.attachEvent) this.attachEvent('onunload', function () {
active = null;
});
return function (element) {
if ((active != element) && element.style) {
if (active) active.style.backgroundColor = '';
element.style.backgroundColor = bcolor;
active = element;
}
};
}();
</script>
</head>
<body>
<div onclick="btn(this);">ONE </div>
<div onclick="btn(this);">TWO </div>
</body>
</html>
Hi, I created a simple menu: Code: <html>
<head>
<style type="text/css">
table {width:400px;height:35px;border-collapse:collapse;border:1px solid #000}
td {text-align:center;padding:3px;cursor:pointer;font:bold 12px Verdana;color:#FFFFFF;background-color:#555}
</style>
</head>
<body>
<table border="1" bordercolor="#000">
<tbody>
<tr>
<td onClick="parent.location='home.htm'" onMouseover="this.style.backgroundColor='#000'" onMouseout="this.style.backgroundColor='#555'">Home</td>
<td onClick="parent.location='news.htm'" onMouseover="this.style.backgroundColor='#000'" onMouseout="this.style.backgroundColor='#555'">News</td>
<td onClick="parent.location='articles.htm'" onMouseover="this.style.backgroundColor='#000'" onMouseout="this.style.backgroundColor='#555'">Articles</td>
</tr>
</tbody>
</table>
</body>
</html>
Was wondering if you knew of a way to keep the button on the mouse-over style for as long as a user is on the page they clicked. This would mean that if a user clicked on a page named 'News', the 'News' button would stay in the mous-over style to indicate which page they were on. Regards Rain Lover Hello, I'm a complete novice in anything javascript and I've bit off more than I can chew! This script Code: function fixmenu(whichmenu) {
var menu = whichmenu.find("a");
for(x = 0; x < menu.length; x++) {
var o = menu.get(x);
if(o.href.indexOf(".php") < 0) {
var i = o.href.lastIndexOf("/");
var nl = "http://domain.com/" + o.href.substring(i + 1);
o.href = nl;
}
}
}
function flinks() {
fixmenu(j$("#div1"));
fixmenu(j$("span#div2"));
fixmenu(j$("div.div3"));
}
if(location.href.indexOf("sub.") >= 0 || location.href.indexOf("SUB.") >= 0) {
j$(document).ready(flinks);
}
is not something I wrote, but something I am to make work, and I don't even know where to begin. I'm working on building a website on a custom CMS (I have no control over) and it uses relative urls (no control over that). The problem is we're integrating it with another system on subdomain. Not too sure if that makes sense. Anyways... what this is suppose to accomplish is when the website is at sub.domain.com it rewrites the relative urls in the 3 div containers to absolute urls, but ignore the links going to sub.domain.com already. In the menu (#div1) there are relative links (/page) and then there are links going to sub.domain.com/page. When we go to sub.domain.com it should rewrite the relative links (/page) to domain.com/page, but ignore sub.domain.com/page (absolute link). instead it is rewriting the entirety. Any idea as to how to make this work? Hey everyone Just throwing this out there, is it possible to have an image displayed within a canvas moves around relative to the mouse's position? For example, say I had a square canvas in the middle of the screen, and I had a small circle on that, could I have the circle position itself within the square canvas relative to the mouses position on the screen. So if my mouse was in the bottom left of the screen, the circle would be bottom left of the canvas? Thanks YD i wanted the absolute div to be within the relative and not relative to page. when i do this without the js it works fine so something in it is making this happen. is there any way around this PLEASE HELP and THANKS! Code: <div style="position:relative">
<script type="text/javascript">
if (ie4||DOM2)
document.write('<div style="position:relative"><div id="fscroller" style="position:absolute;top:0;left:0;border:0px solid black;width:'+fwidth+';height:'+fheight+'"></div></div>');
if (window.addEventListener)
window.addEventListener("load", changecontent, false)
else if (window.attachEvent)
window.attachEvent("onload", changecontent)
else if (document.getElementById)
window.onload=changecontent
</script>
</div>
Code: function changecontent(){
var index = Math.floor ( Math.random() * fcontent.length );
if (index>=fcontent.length)
index=0
if (DOM2){
document.getElementById("fscroller").style.color="rgb("+startcolor[0]+", "+startcolor[1]+", "+startcolor[2]+")"
document.getElementById("fscroller").innerHTML=begintag+fcontent[index]+closetag
if (fadelinks)
linkcolorchange(1);
colorfade(1, 15);
}
else if (ie4)
document.all.fscroller.innerHTML=begintag+fcontent[index]+closetag;
index++
}
Hi. Sort of new to Javascript. I am implementing a zoom in feature, but actually tricking the user as a full screen image is simply being stretched. I plan to apply it to several pages, and don't really fancy working out the pixels for each. I believe that if you simply put width: 150% height 150% it will change the image size relative to the browser. I don't want that, I want it relative to the original image size. Could I do sort of height*1.5 or something? How would I write that if so? Thanks! Code: <script>
$('#in').click(function() {
$('#drag img').animate({
width: '150%',
height: '150%',
}, 5000, function() {
// Animation complete.
});
});
</script>
What is "lb-position" and how is it used? It's used in a lightbox tutorial, and in looking for an explanation I've found it in a handful of places, but I don't know what it is or what it does. Thank you.
Hi, i am simply trying to alert the left position of a css layer. Javascript: Code: var Element = document.getElementById('box');
alert(Element.style.left);
CSS Code: #box {position:absolute;
left:150px;
top:150px;
background-color:blue;
height:100;
width:100;}
HTML Code: <div id="box"> </div> The problem is the alert is blank and i can't understand why. thanks |
|||||||