|
JavaScript - Element Scrolling With Page, Once Reached.
FYI http://www.hotscripts.com/forums/jav...croll-how.html
Hi there, and happy new year. I am looking for a javascript code with the effect used by Google in the following example; http://www.google.co.uk/search?q=che...ient=firefox-a ... whereby the map scrolls with the page once it has been reached by the top of the browser. If anyone could point me in the right direction I would be very grateful. Many Thanks, Patrick. Similar TutorialsIts about this: http://www.wduffy.co.uk/blog/keep-el...omment-page-1/ Everywhere is used for a whole div on some side and when its on the top of the page. But what if its in the middle..? Look here - http://phpbb.bg/viewtopic.php?f=14&p=1013#p1013 Scroll down and then up.Anyway to fix this? I have a script which allow a user to move users from one multiple selectbox to another and it works fine, but... I want to be able to restrict a user to only move x amount of users from one box to another. I want to create an alert when the user try to add a user to much... The javascript: Code: $().ready(function() {
$('#add').click(function() {
return !$('#box1 option:selected').remove().appendTo('#box2');
});
$('#remove').click(function() {
return !$('#box2 option:selected').remove().appendTo('#box1');
});
});
The HTML: Code: <table>
<tr>
<td valign="top"><select multiple id="box2" style="width:250px;height:200px;"></select></td>
<td width="100%" align="center"><a href="#" id="add">Add</a><br><a href="#" id="remove">Remove</a></td>
<td valign="top">
<select multiple id="box2" style="width:250px;height:200px;">
<option value="1">User 1</option>
<option value="2">User 2</option>
<option value="3">User 3</option>
<option value="4">User 4</option>
</select>
</td>
</tr>
</table>
Hope this makes sense... Thanks in advance... Hi Guys, I've written the below code which submits to a servlet, does a bit of processing and returns a JSON object. I'm reaching the servlet, but I never reach the alert("ready()") in the JavaScript. It looks as though the readyState never actually reaches state 4. Any ideas what is wrong ?? Thanks Code: function fetchhits() {
var httpRequest = null;
var url = "http://localhost:8080/Json/FetchTopHit?amount=1";
try {
httpRequest = new XMLHttpRequest(); /* e.g. Firefox */
} catch(e) {
try {
httpRequest = new ActiveXObject("Msxml2.XMLHTTP"); /* some versions IE */
} catch (e) {
try {
httpRequest = new ActiveXObject("Microsoft.XMLHTTP"); /* some versions IE */
} catch (E) {
httpRequest = false;
}
}
}
httpRequest.open("GET", url, true);
httpRequest.onreadystatechange = handler;
httpRequest.send(null);
}
function handler() {
alert("hander() start");
if (httpRequest.readyState == 4) {
alert("ready...");
if (httpRequest.status == 200) {
processJson (httpRequest.responseText);
}
}
}
function processJson(jsonObjectString) {
alert ("Process the Json Object");
}
Hello. My goal is to load the JS for a specific element before displaying that element. I integrated a third part script, and it works well. I set the timer he The JS is in my heading as <script type="text/javascript" src="countdownpro.js"></script> About mid-body I have: <span id="countdown1">2010-07-20 00:00:00 GMT+00:00</span> which allows for the setting of a target date to countdown to. When the page first loads it shows the above long format target time, until the js/meta tags kick in to modify it to just show the actual countdown as 00:00:00. I have attached countdownpro.js to this post. I tried shifting the function CD_Init() to the top of the script, and also appended it inline with the .html. I tried setting the big external script to "defer", but neither arrangement worked. I also tried placing the src file right at the top. I appreciate your help. Hi, I am new to javascript,this is my first time using it, I am wishing to have 2 buttons on my website, one that scrolls to the bottom of my page when clicked and then stops at the bottom and one that scrolls back up the page when clicked, but I want my viewers to be able to see this movement. I have some code (below) which works fine in firefox but it doesn't work in explorer, and I can't get this code to work moving upwards (after taking away the minus from -50). Can anybody please help me I have been battling for days trying to make it work although I am finding it hard to understand javascript being a first time user. I currently have this javascript : [CODE] <head> <script language="JavaScript"> function pageScrollup() { window.scrollBy(0,-50); // horizontal and vertical scroll increments if (window.pageYOffset) { scrolldelay = setTimeout('pageScrollup()',5); } } </script> </head> <body> <a href="JavaScriptageScrollup()">Back to Top</a> </body>[ICODE] Any help is greatly appreciated. OrangeAnt Hi, I have an .aspx page which the author claims to be an RSS feed (http://gcn.com/rss-feeds/state-local.aspx). It is simply a list of links with a description for each. I am trying to embed these links into an RSS feed on my own page. I am using code from http://www.mioplanet.com/rsc/newsticker_javascript.htm to create the scrolling ticker. Do I need to do something to convert the .aspx page to an RSS feed? Please help. Thanks. I am using the following code from this site... http://www.javascriptkit.com/script/...selector.shtml but for some reason if the page is long the whole page scrolls up so the top of the calendar is at the top of the browser, which actually hides the box that the date will end up in. can anyone see how I can alter the code so that the page does not scroll up, but have the calendar show just below the box that the date will go in and the page does not scroll? here is the full code that I am using to test this out with. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.ds_box {
background-color: #FFF;
border: 1px solid #000;
position: absolute;
z-index: 32767;
}
.ds_tbl {
background-color: #FFF;
}
.ds_head {
background-color: #333;
color: #FFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
text-align: center;
letter-spacing: 2px;
}
.ds_subhead {
background-color: #CCC;
color: #000;
font-size: 12px;
font-weight: bold;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
width: 32px;
}
.ds_cell {
background-color: #EEE;
color: #000;
font-size: 13px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
padding: 5px;
cursor: pointer;
}
.ds_cell:hover {
background-color: #F3F3F3;
} /* This hover code won't work for IE */
</style>
</head>
<body>
<table class="ds_box" cellpadding="0" cellspacing="0" id="ds_conclass" style="display: none;">
<tr><td id="ds_calclass">
</td></tr>
</table>
<script>
// <!-- <![CDATA[
// Project: Dynamic Date Selector (DtTvB) - 2006-03-16
// Script featured on JavaScript Kit- http://www.javascriptkit.com
// Code begin...
// Set the initial date.
var ds_i_date = new Date();
ds_c_month = ds_i_date.getMonth() + 1;
ds_c_year = ds_i_date.getFullYear();
// Get Element By Id
function ds_getel(id) {
return document.getElementById(id);
}
// Get the left and the top of the element.
function ds_getleft(el) {
var tmp = el.offsetLeft;
el = el.offsetParent
while(el) {
tmp += el.offsetLeft;
el = el.offsetParent;
}
return tmp;
}
function ds_gettop(el) {
var tmp = el.offsetTop;
el = el.offsetParent
while(el) {
tmp += el.offsetTop;
el = el.offsetParent;
}
return tmp;
}
// Output Element
var ds_oe = ds_getel('ds_calclass');
// Container
var ds_ce = ds_getel('ds_conclass');
// Output Buffering
var ds_ob = '';
function ds_ob_clean() {
ds_ob = '';
}
function ds_ob_flush() {
ds_oe.innerHTML = ds_ob;
ds_ob_clean();
}
function ds_echo(t) {
ds_ob += t;
}
var ds_element; // Text Element...
var ds_monthnames = [
'January', 'February', 'March', 'April', 'May', 'June',
'July', 'August', 'September', 'October', 'November', 'December'
]; // You can translate it for your language.
var ds_daynames = [
'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'
]; // You can translate it for your language.
// Calendar template
function ds_template_main_above(t) {
return '<table cellpadding="3" cellspacing="1" class="ds_tbl">'
+ '<tr>'
+ '<td class="ds_head" style="cursor: pointer" onclick="ds_py();"><<</td>'
+ '<td class="ds_head" style="cursor: pointer" onclick="ds_pm();"><</td>'
+ '<td class="ds_head" style="cursor: pointer" onclick="ds_hi();" colspan="3">[Close]</td>'
+ '<td class="ds_head" style="cursor: pointer" onclick="ds_nm();">></td>'
+ '<td class="ds_head" style="cursor: pointer" onclick="ds_ny();">>></td>'
+ '</tr>'
+ '<tr>'
+ '<td colspan="7" class="ds_head">' + t + '</td>'
+ '</tr>'
+ '<tr>';
}
function ds_template_day_row(t) {
return '<td class="ds_subhead">' + t + '</td>';
// Define width in CSS, XHTML 1.0 Strict doesn't have width property for it.
}
function ds_template_new_week() {
return '</tr><tr>';
}
function ds_template_blank_cell(colspan) {
return '<td colspan="' + colspan + '"></td>'
}
function ds_template_day(d, m, y) {
return '<td class="ds_cell" onclick="ds_onclick(' + d + ',' + m + ',' + y + ')">' + d + '</td>';
// Define width the day row.
}
function ds_template_main_below() {
return '</tr>'
+ '</table>';
}
// This one draws calendar...
function ds_draw_calendar(m, y) {
// First clean the output buffer.
ds_ob_clean();
// Here we go, do the header
ds_echo (ds_template_main_above(ds_monthnames[m - 1] + ' ' + y));
for (i = 0; i < 7; i ++) {
ds_echo (ds_template_day_row(ds_daynames[i]));
}
// Make a date object.
var ds_dc_date = new Date();
ds_dc_date.setMonth(m - 1);
ds_dc_date.setFullYear(y);
ds_dc_date.setDate(1);
if (m == 1 || m == 3 || m == 5 || m == 7 || m == 8 || m == 10 || m == 12) {
days = 31;
} else if (m == 4 || m == 6 || m == 9 || m == 11) {
days = 30;
} else {
days = (y % 4 == 0) ? 29 : 28;
}
var first_day = ds_dc_date.getDay();
var first_loop = 1;
// Start the first week
ds_echo (ds_template_new_week());
// If sunday is not the first day of the month, make a blank cell...
if (first_day != 0) {
ds_echo (ds_template_blank_cell(first_day));
}
var j = first_day;
for (i = 0; i < days; i ++) {
// Today is sunday, make a new week.
// If this sunday is the first day of the month,
// we've made a new row for you already.
if (j == 0 && !first_loop) {
// New week!!
ds_echo (ds_template_new_week());
}
// Make a row of that day!
ds_echo (ds_template_day(i + 1, m, y));
// This is not first loop anymore...
first_loop = 0;
// What is the next day?
j ++;
j %= 7;
}
// Do the footer
ds_echo (ds_template_main_below());
// And let's display..
ds_ob_flush();
// Scroll it into view.
ds_ce.scrollIntoView();
}
// A function to show the calendar.
// When user click on the date, it will set the content of t.
function ds_sh(t) {
// Set the element to set...
ds_element = t;
// Make a new date, and set the current month and year.
var ds_sh_date = new Date();
ds_c_month = ds_sh_date.getMonth() + 1;
ds_c_year = ds_sh_date.getFullYear();
// Draw the calendar
ds_draw_calendar(ds_c_month, ds_c_year);
// To change the position properly, we must show it first.
ds_ce.style.display = '';
// Move the calendar container!
the_left = ds_getleft(t);
the_top = ds_gettop(t) + t.offsetHeight;
ds_ce.style.left = the_left + 'px';
ds_ce.style.top = the_top + 'px';
// Scroll it into view.
ds_ce.scrollIntoView();
}
// Hide the calendar.
function ds_hi() {
ds_ce.style.display = 'none';
}
// Moves to the next month...
function ds_nm() {
// Increase the current month.
ds_c_month ++;
// We have passed December, let's go to the next year.
// Increase the current year, and set the current month to January.
if (ds_c_month > 12) {
ds_c_month = 1;
ds_c_year++;
}
// Redraw the calendar.
ds_draw_calendar(ds_c_month, ds_c_year);
}
// Moves to the previous month...
function ds_pm() {
ds_c_month = ds_c_month - 1; // Can't use dash-dash here, it will make the page invalid.
// We have passed January, let's go back to the previous year.
// Decrease the current year, and set the current month to December.
if (ds_c_month < 1) {
ds_c_month = 12;
ds_c_year = ds_c_year - 1; // Can't use dash-dash here, it will make the page invalid.
}
// Redraw the calendar.
ds_draw_calendar(ds_c_month, ds_c_year);
}
// Moves to the next year...
function ds_ny() {
// Increase the current year.
ds_c_year++;
// Redraw the calendar.
ds_draw_calendar(ds_c_month, ds_c_year);
}
// Moves to the previous year...
function ds_py() {
// Decrease the current year.
ds_c_year = ds_c_year - 1; // Can't use dash-dash here, it will make the page invalid.
// Redraw the calendar.
ds_draw_calendar(ds_c_month, ds_c_year);
}
// Format the date to output.
function ds_format_date(d, m, y) {
// 2 digits month.
m2 = '00' + m;
m2 = m2.substr(m2.length - 2);
// 2 digits day.
d2 = '00' + d;
d2 = d2.substr(d2.length - 2);
// YYYY-MM-DD
// return y + '-' + m2 + '-' + d2;
return d2 + '-' + m2 + '-' + y;
}
// When the user clicks the day.
function ds_onclick(d, m, y) {
// Hide the calendar.
ds_hi();
// Set the value of it, if we can.
if (typeof(ds_element.value) != 'undefined') {
ds_element.value = ds_format_date(d, m, y);
// Maybe we want to set the HTML in it.
} else if (typeof(ds_element.innerHTML) != 'undefined') {
ds_element.innerHTML = ds_format_date(d, m, y);
// I don't know how should we display it, just alert it to user.
} else {
alert (ds_format_date(d, m, y));
}
}
// And here is the end.
// ]]> -->
</script>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<form action="" method="post">
<div>
<b>Example Form</b><br/>
Please input a date: <input onclick="ds_sh(this);" name="date" readonly="readonly" style="cursor: text" /><br />
Please input another date: <input onclick="ds_sh(this);" name="date2" readonly="readonly" style="cursor: text" /><br />
<input type="submit" value="Submit" />
</div>
</form>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</body>
</html>
I'm attaching my php test file but this is a JS problem. When I scroll down in the web page and the meta refresh hits, in Windows Safari and IE6/7/8 browsers, the web page re-positions back to the top. In Opera and FF the page refreshes but it stays where it is. Can someone look at my test script and see why it is not working in IE and Win Safari? My goal is to have the web page not re-position to the top on the auto refresh. Thanks... How do i set a page element as a variable and change it? Ive googled the internet like crazy for an answer for this, but couldnt find it. Im trying to create an animation. My question is, how do i change the width of a div onclick? Essentially, I want it to add one percent of the value of the width of the div every one second.. PHP Code: <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Loading Bar</title> <script> var x = getElementById("loadbar").style.width; function load(){ setTimeout ( "progress()", 1000 ); } function progress(){ x++; } </script> </head> <body> <div id="load" style="border:thin solid #6699FF; width:300px; height:10px"> <div id="loadbar" style="background:#6699CC; width:0%; height:100%"> </div> </div> <a href="#" onclick="load()">Click to load</a> </body> Hi well my problem is.. how do i hide the popup list.. i would like to if the user click outside of that div element.. the popup div will hide.. but whenever i select the body or the id containing that popup div.. the whenever i click the down arrow button.. it shows the popup div.. but then closes again.. because of the selector hide on the container div.. http://development.andrewfopalan.com/devpage/test.html here's the test page.. when i click the down arrow.. it shoes the popup.. how to do if i want that any click outside that popup element.. i will call the hide/fadeout for the popup element.. please help.. tried various things.. just a shed of light will do.. thanks Does anyone know what's wrong with this code because when the page loads, the link is not being hidden Code: window.onload = setTarget;
function setTarget()
{
var theLinks = document.getElementsByTagName('a');
for(var i = 0; i < theLinks.length; i++)
{
if(theLinks[i].getAttribute('href') == '/subjects/new')
{
theLinks[i].style.display = "none";
}
}
}
Hello. I have a table with td elements containing numbers in one row and td elements containing textareas in the second row like this: http://motionsroom.com/example.html I want to find an easy way for the user to click, draw a rectangle around or whatever around any several numbers so that they they would be put in a single td element instead of two or three (so we would have: "49 and 12" as the new value) and then the textareas below would also merge. Ideally, I would like to have a rectangle like in RTS games but then I would settle on whatever is easy. Is there any way I could do that? Thanks! 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. I am trying to set up a script that looks in the code on one page, counts the number of instances of an element by ID, and then delivers that information back to another page in order to set the height for an area on that page. Context: I have a PHP page with an include statement and the included content is overflowing. Scrolls won't emerge (IMO) unless the container PHP page is told what is the height of the included content. I know almost nothing about javascript, so this is becoming a significant challenge. I cobbled together two scripts, just to get started: one that searches for occurrences of a word in a document, and another that converts that information into the height for the "div" tag in my PHP page. Obvious issues: 1) The first script will not search outside of the form for the word occurrence. I don't even want the count to be delivered in a form; I want it passed to the second script without any user involvement at all. 2) I am not sure how to set write the code so that it searches another document entirely. I bookmarked this site thinking that there might be some solutions in there. Code: <script language="Javascript">
function countInstances(string, word) {
var substrings = string.split("navpic3");
return substrings.length - 1;
}
</script>
<script type="text/javascript">
var thumbinstance=countInstances
var thumbheight=[(50*thumbinstance)+300]
function menuspace(images){
document.write("<div style="+'"'+"height: "+thumbheight+"px;"+'"'+">")
}
</script>
<script type="text/javascript">menuspace(255)</script>content</div>
<form>
<input type="label" name="string" value="navpic3 navpic3">
<input type="button" value="count instances" onClick="document.write(countInstances(string.value))">
</form>
Thanks in advance for any help. Elizabeth Hello, I am trying to copy data from one element to another on page load. Below is the scenario: I want to copy the below data within each element <h2>Product Name</h2> <div class="price">$9.99</div> To the different parts of this URL <a href="https://myaccount.foxycart.com/cart?name=PRODUCT NAME&price=PRICE" class="foxycart">Add to Cart</a> Thank you in advance for your help. Looking for a simple way to have a hidden element made visible when the page scrolls. The idea is to have a back arrow appear only when the page has been scrolled horizontally. trying something along these lines without success ... Code: <script type="text/javascript">
window.onscroll = function () {
if $("back").is(":hidden") {
$("back").show("slow");
}
}
</script>
The site is he www.milesjaffe.com. Thanks -- Hi. I am very new to javascript, so I might not even be wording my question right, but I am going to try and be as concise and specific as possible. I am using jquery on my website- the galleria plugin- to make a slideshow. you can see the completed show he http://www.pauljameswilliams.com/demo2a.html This slideshow will be one of three on my website. Each slide show will opperate the same exact way.I have built in tabbed navifation, and the slideshows will all be accessable under the "portfolio" tab by clicking on their corresponding links. check out the site he http://www.pauljameswilliams.com/portfolio.html As it is I have one slideshow up, although not yet connected to the corresponding link, but the images won't load. My guess is that because the div tag is hidden that the contents don't load propperly and I need the contents to load when the corresponding div tag that it is contained in becomes visible but I don't know how to do that. this is the javascript that I have written to show/hide the <div> tags where the content will live. Three slide shows will live in content_2 and show/hide when the corresponding button is pressed. Code: function tabSwitch(new_tab, new_content) {
document.getElementById('content_1').style.display = 'none';
document.getElementById('content_2').style.display = 'none';
document.getElementById('content_3').style.display = 'none';
document.getElementById('content_4').style.display = 'none';
document.getElementById(new_content).style.display = 'block';
document.getElementById('btn_1').className = '';
document.getElementById('btn_2').className = '';
document.getElementById('btn_3').className = '';
document.getElementById('btn_4').className = '';
document.getElementById(new_tab).className = 'current';
}
thank you- I am really stuck. i promise, i am actually learning javascript, I'm not just trying to get other people to do my work for me. I've been handed an html document that contains a centered, scrollable <iframe> element with a static height and width. This iframe element displays a simple html document that houses the 'terms of service' text. Their goal is to have it to where the <a href> link at the bottom that is shown to the user as 'next' is disabled until the user scrolls to the bottom of the terms of agreement box. The clickable link could be a button, image or text (no preference). They have to have it this way for legal reasons and radio buttons or checkboxes will not suffice unfortunately. Question: What is the best way to go about doing this that seems to be cross-browser friendly (especially IE7). I offer $10 via paypal for well commented method/script. |
|||||||