|
JavaScript - Loading Content Into Div By Retrieving Hash
So basically, I have this side bar with a whole bunch of links and I wish to load content into a div directly across from it. The links will be hashes (eg example.com/#foo/bar), then the JavaScript loads the content either into a div and updates a SPAN with the page name. I only have the iFrame version so far, so can someone help me on how to improve this and actually load the content instead of an iFrame? So far I have this code:
Code: <script>
function goto(url) {
if (location.hash != url) {
window.location = url;
document.getElementById("pgname").innerText = "loading...";
}
}
function setPage() {
var hash = location.hash;
if (hash=="#foo") {
document.getElementById('pgname').innerHTML = 'Foo';
document.getElementById('pglocation').innerHTML = hash;
window.frames['content'].location.href = "blablah/foo.php";
}
if (hash=="#foo/bar") {
document.getElementById('pgname').innerHTML = 'Foo</b> > <b>Bar';
document.getElementById('pglocation').innerHTML = hash;
window.frames['content'].location.href = "doo/moo/23.htm";
}
}
</script>
<body onhashchange="setPage();">
<a href="javascript: goto('#foo')">foo</a><br />
<a href="javascript: goto('#foo/bar')">foobar</a><br />
<a href="javascript: alert(location.hash + ' || ' + location);">Info</a><br />
<a href="javascript: goto(location.hash);">Goto</a><br /><br />
<b><span id="pgname">Home</span></b><br />
example.com/<span id="pglocation"></span><br />
<iframe id="content" src="index.php" />
Similar TutorialsHello all, I have the following code to load a new html page into the 'new content' div once the user scrolls to the bottom of the page. It all works fine. No problems, except I would like it to pause for a moment whilst it is loading, and show a loading box div at the bottom of the screen as it loads the new content, just to give some positive feedback for the user. So the new div would sit in a fixed position at 'bottom:0px;' and have a loading image inside it. Is this easy to do? I am new to javascript so bear with me Code: alreadyloading = false;
nextpage = 2;
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
if (alreadyloading == false) {
var url = "page"+nextpage+".html";
alreadyloading = true;
$.post(url, function(data) {
$('#newcontent').children().last().after(data);
alreadyloading = false;
nextpage++;
});
}
}
});
The 'new content' is a div which is at the bottom of the page and is where the new content loads to! Thank you very much Hi -- I'm learning js, and after some minor modifications my html page is now not pulling content from the xml pages, although I have: <script src="include.js" type="text/javascript"> and <body onload="getCategory('about');" which is not loading the about.xml content Troubleshooting: Yes, include.js file is on same level as html page. Any ideas? Thanks! I'm just curious to know what would be the best way to go about this. I have my navigation and content area divs from my admin panel show below and what I want to do is when one of links is clicks then to load that links file into the content div. I've been told JQuery but I can not find a function exactly detailing and teaching me how to do what I'm trying to do. Code: <!-- Global -->
<div id="page-content">
<div class="container content">
<!-- Sidebar -->
<div id="sidebar" class="bImg">
<div class="bInner"><span class="bTR"></span><span class="bBL"></span>
<ul id="side-nav">
<li class="active">
<a href="#" title="Character" class="button">
<strong>
<img src="img/icons/newspaper_48.png" alt="Character" class="icon "/>
<span class="title">Character</span>
<span class="expand expanded"></span>
</strong>
</a>
<ul>
<li><a href="/mods/bio.php" title="Bio">Bio</a></li>
<li class="active"><a href="/mods/allies.php" title="Allies">Allies</a></li>
<li><a href="/mods/rivals.php" title="Rivals">Rivals</a></li>
<li><a href="/mods/quotes.php" title="Quotes">Quotes</a></li>
</ul>
</li>
<li class="inactive">
<a href="#" title="Submit" class="button ">
<strong>
<img src="img/icons/paper_content_48.png" alt="Submit" class="icon "/>
<span class="title">Submit</span>
<span class="expand"></span>
</strong>
</a>
<ul>
<li><a href="/mods/roleplay.php" title="Roleplay">Roleplay</a></li>
<li><a href="/mods/news.php" title="News">News</a></li>
<li><a href="/mods/match.php" title="Match">Match</a></li>
<li><a href="/mods/segment.php" title="Segment">Segment</a></li>
</ul>
</li>
<li class="inactive">
<a href="#" title="Booking" class="button">
<strong>
<img src="img/icons/image_48.png" alt="Booking" class="icon "/>
<span class="title">Booking</span>
<span class="expand"></span>
</strong>
</a>
<ul>
<li><a href="/mods/champions.ph" title="Champions">Champions</a></li>
<li><a href="/mods/booker.php" title="Booker">Booker</a></li>
<li><a href="/mods/compiler.php" title="Compiler">Compiler</a></li>
<li><a href="/mods/archives.php" title="Archives">Archives</a></li>
</ul>
</li>
<li class="inactive">
<a href="#" title="Fed Admin" class="button">
<strong>
<img src="img/icons/comment_48.png" alt="Fed Admin" class="icon "/>
<span class="title">Fed Admin</span>
<span class="expand"></span>
</strong>
</a>
<ul>
<li><a href="/mods/handlers.php" id="handlers" title="Handlers">Handlers</a></li>
<li><a href="/mods/characters.php" id="characters" title="Characters">Characters</a></li>
<li><a href="/mods/manageapplications.php" id="templates" title="Applications">Applications</a></li>
<li><a href="/mods/eventnames.php" id="templates" title="Event Names">Event Names</a></li>
<li><a href="/mods/titles.php" id="templates" title="Title Names">Title Names</a></li>
<li><a href="/mods/divisions.php" id="templates" title="Divisions">Divisions</a></li>
<li><a href="/mods/matchtypes.php" id="templates" title="Match Types">Match Types</a></li>
<li><a href="/mods/arenas.php" id="templates" title="Arenas">Arenas</a></li>
</ul>
</li>
<li class="inactive">
<a href="#" title="Site Admin" class="button">
<strong>
<img src="img/icons/spanner_48.png" alt="comments" class="icon "/>
<span class="title">Site Admin</span>
<span class="expand"></span>
</strong>
</a>
<ul>
<li><a href="/mods/templates.php" id="templates" title="Templates">Templates</a></li>
<li><a href="/mods/contentpages.php" id="contentpages" title="Content Pages">Content Pages</a></li>
<li><a href="/mods/bioconfiguration.php" id="bioconfiguration" title="Bio Configuration">Bio Configuration</a></li>
<li><a href="/mods/newscategories.php" id="newscategories" title="News Categories">News Categories</a></li>
<li><a href="/mods/menustructures.php" id="menustructures" title="Menus">Menus</a></li>
</ul>
</li>
</ul>
</div>
</div>
<!-- /Sidebar -->
<!-- Content -->
<div id="content" class="roundedBorders">
<div class="bBottom"><div></div></div>
</div>
<!-- /Content -->
Hello everyone, I have implemented the following code into my website Code: alreadyloading = false;
nextpage = 2;
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
if (alreadyloading == false) {
var url = "page"+nextpage+".html";
alreadyloading = true;
$.post(url, function(data) {
$('#content').children().last().after(data);
alreadyloading = false;
nextpage++;
});
}
}
});
The div 'content' holds already a few divs, when the user hits the bottom of the screen, the new page (page2.html) loads into the 'content' div, they all load below as is expected. Unfortunately, the page3.html (Which has the same content as 'page2.html) then loads below the footer... (which is set to position:relative; ) below everything else... is there any reason why the next page would load into a different location? Thanks! Hi, I am using one simple lightbox or you can call it modal window. It doesn't load any flash content until you click on the button PLAY and when you click on close, it stops the flash game (it actually stops as when you click PLAY again the game starts from beginning) BUT this is only about FIREFOX its not the behavior in CHROME, IE or Safari except MOZILLA FIREFOX all browser act in a complete different way which is opposite to the way I described above. In chrome, IE, Safari maybe Opera the Flash content starts loading without being triggered (means if you don't click PLAY BUTTON still it loads) and even if you click on close button. Instead of stopping flash like in firefox the flash game continues to run (like being minimized instead of closed). Why is this happening, How to resolve it, I am not able to understand this strange behavior? RELEVANT CODES: CSS: Code: #fade {
display: none;
background: #000;
position: fixed; left: 0; top: 0;
width: 100%; height: 100%;
opacity: .80;
z-index: 9999999;
}
.popup_block{
width: 98.95%; height: 98.2%;
display: none;
padding: 0px;
line-height:1em;
font-size: 1em;
position: fixed;
top: 0px; left: 0px;
z-index: 999999999;
-webkit-box-shadow: 0px 0px 20px #000;
-moz-box-shadow: 0px 0px 20px #000;
box-shadow: 0px 0px 20px #000;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.close {
height:20px;
float: right;
margin: 0 2px 0 0;
}
HTML: Code: <table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a class="poplight" href="#?w=100%" rel="popup_name"><img alt="play game" class="happybutton" onmouseout="this.style.opacity=0.8;this.filters.alpha.opacity=80" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" src="http://farm5.static.flickr.com/4084/4998558471_27e3985c16_m.jpg" style="opacity: 0.8;" /></a></td></tr>
</tbody></table>
<div class="popup_block" id="popup_name">
<div class="gamesharebuttons addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a><a class="addthis_button_tweet"></a><a class="addthis_button_google_plusone" g:plusone:size="medium"></a><a class="addthis_button_more">Share</a></div>
<iframe id="myvideo" width="100%" height="98%" src="http://files.cryoffalcon.com/bhgames/Adventure/star%20island.html" frameborder="0" scrolling="no" allowTransparency="false"
></iframe>
</div>
JS: Code: <script type="text/javascript">
$(document).ready(function(){
//When you click on a link with class of poplight and the href starts with a #
$('a.poplight[href^=#]').click(function() {
var popID = $(this).attr('rel'); //Get Popup Name
var popURL = $(this).attr('href'); //Get Popup href to define size
//Pull Query & Variables from href URL
var query= popURL.split('?');
var dim= query[1].split('&');
var popWidth = dim[0].split('=')[1]; //Gets the first query string value
//Fade in the Popup and add close button
$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" title="Close It" class="close"><img src="http://files.cryoffalcon.com/bloghuts/images/close%20button.png" alt="Close" width="20" height="20" /></a>');
//Define margin for center alignment (vertical + horizontal) - we add 80 to the height/width to accomodate for the padding + border width defined in the css
var popMargTop = ($('#' + popID).height() + 0) / 0;
var popMargLeft = ($('#' + popID).width() + 0) / 0;
//Apply Margin to Popup
$('#' + popID).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
//Fade in Background
$('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer
return false;
});
//Close Popups and Fade Layer
$('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
$('#fade , .popup_block').fadeOut(function() {
$('#fade, a.close').remove();
}); //fade them both out
return false;
});
});
</script>
HERE IS LIVE DEMO PAGE http://bloghutsbeta.blogspot.com/201...n-testing.html Hi, well i have a issue with lightbox like stuff that i am using here http://www.bloghuts.com/2010/11/13-days-in-hell.html If you click on play that lightbox windows open and if you click close it closes down (as you expect from it) but the problem is that in firefox until you click play the game doesn't load and when you click close it closes the game BUT if you use any other broswer like chrome or IE or any you like, before you click play the game starts loading and when you will click close, it will actually minimize the game not close (like it do in firefox) I don't know why is this crossbrowser issue happening and what could be the solution to make it work like firefox in all browsers? Hello, I'm creating a section for a school website that will list over 9,000 book titles in four different categories (by Title, by Author, by Book Level, and by Points). The content is shown in a div and called and loaded via Ajax. Here is the test page: http://www.gilchrist.leon.k12.fl.us/ar/artest.htmlAfter you click "Go" when the drop down menu is displaying By Book Title, the content loads in the div in a few moments. Here is the content page that appears in the div after you click "Go": http://www.gilchrist.leon.k12.fl.us/...tByAuthor.html If possible, I need a "page loading..." script that will appear only after you click "Go" while the list of books is being loaded. I've been testing different ones I've found online, but can't get any to work. Of course, I'm not even sure if the script would be added to artest.html, 1112-QuistListByTitle.html, or a combination of both... Any help with this would be greatly appreciated. Thank you, Deborah Hello, I have been everywhere still trying to find a solution of this, I have the following code which loads a new html page into the bottom of my document when the user reaches the bottom of the page. Code: alreadyloading = false;
nextpage = 2;
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() == $(document).height()) {
if (alreadyloading == false) {
$("#loading").slideDown();
var url = "page"+nextpage+".html";
alreadyloading = true;
$.post(url, function(data) {
$('#newcontent').children().last().after(data);
alreadyloading = false;
nextpage++;
$("#loading").slideUp();
});
}
}
});
#Loading is a div which contains a loading jpeg which is fixed to the bottom of the screen. This div appears when the user hits the bottom of the screen, and then disappears once the content has fully loaded. The problem I have is that once the user has loaded all the content that is available. Say I have 'page2.html, page3.html, page4.html' to load one at a time as the user hits the bottom of the screen. I need the loading bar to stay hidden when it tries to load the 'page5' which does not yet exist... Is this easy to do to alter my javascript code? I am at a loss with this. Any help would be appreciated. I asked a similar question before but have adapted the code now for the loading bar, just need this little glitch to be fixed. Thank you! Website at: www.jb-design.me/marchupdate2/ so you can see that I mean. (note that the graphics on the website are made by me but are not my work, just for placement) I am using this code... simplified for example Code: [
<script type="text/javascript">
function loadContent(elementSelector, sourceURL) {
$(""+elementSelector+"").load(""+sourceURL+"");
}
</script>
<a onclick="loadContent('#content', 'http://www.website.com/includes/content.php');"
<div id="content"></div>
Works fine if run on http://www.website.com but not on http://www.website.com/home/sitepage. I have spent a few hours and cannot figure it out. Can anyone? Thanks I'm working on my portfolio and I want to get content to load into my "middle" div upon clicking on the buttons in the sidebar. I'm able to get it to load, but I can't figure out how to get the CSS to load. I keep getting errors in the code. Here is the code I'm using: http://www.dynamicdrive.com/dynamici...jaxcontent.htm Here is what I've got: Code: <img src="images/rule.png" id="rule" width="1" height="1" />
<a href="javascript:ajaxpage('about.html', 'middle');"><img src="images/about.png" width="195" height="101" alt="about" /></a>
<img src="images/rule.png" id="sidebar_rule" width="194" height="1" />
<a href="javascript:ajaxpage('work.html', 'middle');"><img src="images/work.png" width="195" height="101" alt="work" />
<img src="images/rule.png" id="sidebar_rule" width="194" height="1" />
<img src="images/resume.png" width="195" height="101" alt="resume" />
<img src="images/rule.png" id="sidebar_rule" width="194" height="1" />
<a href="javascript:ajaxpage('contact.html', 'middle'); loadobjs('contact.css', 'feature.js')"><img src="images/contact.png" width="195" height="101" alt="contact" /></a>
<img src="images/rule.png" id="sidebar_rule" width="194" height="1" /></div>
I'm working on the contact page right now, just trying to figure out how to get it to load properly. Here is a screenshot of what it's supposed to look like: https://skitch.com/jillianadriana/r7...itled-document I can't get it to load with the custom CSS. Hey folks, I have a question around Spry. There are two navigational elements to the website I'm building and I'm using Spry to do it. I have a horizontal header menu and vertical main menu. Both menus must load their content in the same content area. I've tried a ton of things and I can't get them to work without breaking anything. Here is the basic Spry code. Any help would be very much appreciated. Thanks!! Code: <div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">Tab 1</li>
<li class="TabbedPanelsTab" tabindex="0">Tab 2</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">Content 1</div>
<div class="TabbedPanelsContent">Content 2</div>
</div>
</div>
<script type="text/javascript">
<!--
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
//-->
</script>
The CSS and Jscript files are attached. Ok, I am aware this will sound like a plug for my script, but please bare with me. I created a bookmarklet script to help me audit extremely large style sheets. Basically while on a site that you would like to audit, you click the bookmarklet and the document's body contents gets remove and replaced with an iframe that points to the current sites home page. From here you can choose what style sheet (the script finds) to begin reporting over. The more pages you browse (through the iframe) the more accurate the report gets. My problem however, is if the person is on the site's home page when first running the script, the iframe never loads up. I think it has to do with the fact that you are on the home page, and then the iframe tries to point to the home page as well and fails for some reason. Is there any solution that comes to mind for anyone out there? You can test it by bookmarking this bookmarklet and running it on any site's home page where style sheets can be found: Get The Bookmarklet on this page Again, it works great if you don't start the script from a sites home page. Hi there! Okay, here is my scenario: I have a link and a div on a webpage. With the link I want to toggle the content (HTML) of the div. On toggle, I want to load the content from a PHP-file and I want it to load on the toggle, not when the webpage originally loaded (to reduce loading time on the webpage itself). The file that is loaded on toggle doesn't have to be PHP, but it would help a lot. Does anybody know of a example of this or something similar to it? I have been looking for some time now, without any luck unfortunately. Highly appreciate any help/answers/feedback! All, If I have the following URL: http://example.com/viewpage.php?id=test Then when I write a hash the URL goes to: http://example.com/viewpage.php?id=test#id=nexttest I have the following code: Code: function redirectHash()
{
var hash = location.hash;
if (hash){
hash = hash.replace('#', '');
location.href = hash;
}
}
</script>
Currently this code would try and redirect me to http://example.com/id=nexttest How can I get it so that it keeps everything before the ? and just updates the id part? Thanks in advance. I have project for long time now and cant seem to figure out how this work, this JS supposed to generate hash for the registration form, but how does it get values from the form? Form has onSubmit="return( onPreCreateAccountSubmit() );" ---------------------------------------------------------- function onPreCreateAccountSubmit() { doKtSubmit() ; return onPreCreateAccount(); } ---------------------------------------------------------- function doKtSubmit() { var ktlk = 'ktl'; var ktfk = 'ktf'; if (document.forms['createaccount'] && document.forms['createaccount'].elements[ktlk] && document.forms['createaccount'].elements[ktfk]) { KT_preSubmit() ; } return true; } PHP Code: <script type="text/javascript"> var KT_keydownHandler, KT_keypressHandler, KT_logEncoder, KT_lastElement = -1, KT_lastKeyCode = -1, KT_lastModifiers = -1, KT_logElement = 0, KT_stoppedLog, KT_ALLOW_FIELD_TYPES = { password: 1, text: 1 }, KT_ALLOW_FIELD_IDS = { firstname: 1, lastname: 1, email: 1, passwd: 1, passwdagain: 1, identityanswer: 1, secondaryemail: 1, newaccountcaptcha: 1, nickname: 1 }, KT_lastTime, KT_inputs, KT_keyInputs = []; if (window.captureEvents) { Event.KEYPRESS && window.captureEvents(Event.KEYPRESS); Event.KEYDOWN && window.captureEvents(Event.KEYDOWN) } function KT_preSubmit() { if (KT_logEncoder) { if (KT_keydownHandler) { KT_encode(16); KT_initHandlers(KT_inputs) } var a = KT_logEncoder; if (a.d != 0) { EN_encodeGroup(a, a.p); a.p = 0 } } } function KT_encode(a) { a < 0 ? KT_stopLog() : EN_encode(KT_logEncoder, a) } function KT_init(a, c, d) { a = KT_logElement = a; if (!a.value) a.value = "A"; KT_logEncoder = { e: a, p: 0, d: 0 }; KT_initHandlers(d); c = c; if (!c.value) for (d = 1; d < KT_keyInputs.length; d++) c.value += KT_keyInputs[d].name + " " } function KT_event(a, c) { if (KT_logElement.value.length > 3E3) { KT_encode(17); KT_stopLog() } else { var d; d = (new Date).getTime(); var b = d - KT_lastTime; KT_lastTime = d; d = b; b = a.k; var e = a.t, f = a.m; if (!(a.m & 3)) { c |= 2; if (b >= 65 && b <= 90) b = 65; else if (b >= 48 && b <= 57) b = 48; else if (c & 1) if (b >= 97 && b <= 122) b = 65; else if (b == 197 || b == 229) c &= 5; else if (b >= 192 && b <= 687) b = 192; else if (b >= 1536) b = 1536; else if (b >= 912) b = 912; else if (b >= 160) b = 160; else if (b >= 127) c &= 5; else if (b >= 33) b = 59; else c &= 5; else if (b < 48) c &= 5; else if (b < 65) b = 59; else if (b < 96) c &= 5; else if (b < 112) b = 96; else if (b < 187) c &= 5; else b = 59 } if (e != KT_lastElement) { KT_encode(c | 4); KT_encode(e); KT_lastElement = e } else { if (b == KT_lastKeyCode && f == KT_lastModifiers) { KT_encode(c | 8); KT_encode(d); return } KT_lastKeyCode = b; KT_lastModifiers = f; KT_encode(c) } KT_encode(b); KT_encode(f); KT_encode(d) } } function KT_initHandlers(a) { KT_keydownHandler = 0; KT_inputs = a; KT_stoppedLog = 0; var c = 1; for (a = 0; a < KT_inputs.length; a++) { var d = KT_inputs[a]; if (!(!KT_ALLOW_FIELD_TYPES[d.type] || d.id && !KT_ALLOW_FIELD_IDS[d.id.toLowerCase()] || d.offsetHeight == 0)) { d.onkeydown = KT_initKeyHandler; KT_keyInputs[c] = d; d.setAttribute("n", c++) } } } function KT_stopLog() { if (KT_keyInputs) for (var a = 1; a < KT_keyInputs.length; a++) { KT_keyInputs[a].onkeydown = 0; KT_keyInputs[a].onkeypress = 0 } KT_stoppedLog = 1 } function KT_getEventModel(a) { if (!a) { a = window.event; if (typeof a.keyCode == "number") return 1; return 0 } if (typeof a.which == "number") return 3; if (typeof a.keyCode == "number") return 2; if (typeof a.charCode == "number") return 4; return 0 } function KT_initKeyHandler(a) { var c, d = KT_logElement.value.length, b = ""; c = KT_getEventModel(a); switch (c) { case 1: a = window.event; b += "f=window.event;var b=f.keyCode;"; break; case 3: b += "var b=f.which;"; break; case 2: b += "var b=f.keyCode;"; break; case 4: b += "var b=f.charCode;" } KT_keypressHandler = 0; if (c != 0) { if (typeof a.modifiers == "number") b += "var c=f.modifiers;"; else if (typeof a.shiftKey == "boolean") b += "var c=f.shiftKey*4+f.ctrlKey*2+f.altKey;"; else KT_stopLog(); if (a.srcElement) b += "var d=f.srcElement;"; else if (a.target) b += "var d=f.target;"; else KT_stopLog() } else KT_stopLog(); if (!KT_stoppedLog) { b += 'var e=0;if(d.getAttribute("n")){e=d.getAttribute("n")}KT_event({k:b, m:c, t:e},'; KT_keydownHandler = new Function("f", b + "0)"); KT_keypressHandler = new Function("f", b + "1)"); KT_lastTime = (new Date).getTime(); KT_encode(0); KT_encode(KT_lastTime); if (d <= 1) { KT_encode(c); KT_encode(KT_keyInputs.length - 1) } } for (c = 1; c < KT_keyInputs.length; c++) { d = KT_keyInputs[c]; if (KT_keydownHandler) { d.onkeydown = KT_keydownHandler; d.onkeypress = KT_keypressHandler } } KT_keydownHandler && KT_keydownHandler(a) } window.KT_init = KT_init; window.KT_preSubmit = KT_preSubmit; this.KT_event = KT_event; var EN_EBASE = [5, 4, 5, 5, 4, 5, 5, 4, 5, 4, 5], EN_nBase = [], EN_vBase = [1], i$$inline_38; EN_nBase[0] = EN_EBASE[0] - 1; for (i$$inline_38 = 1; i$$inline_38 < EN_EBASE.length; i$$inline_38++) { EN_nBase[i$$inline_38] = EN_EBASE[i$$inline_38] - 1; EN_vBase[i$$inline_38] = EN_vBase[i$$inline_38 - 1] * EN_EBASE[i$$inline_38 - 1] } function EN_encodeGroup(a, c) { var d; for (d = 0; d < 4; d++) { var b = c % 67; a.e.value += "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789 *-._".charAt(b); c = (c - b) / 67 } a.d = 0 } function EN_encode(a, c) { function d(g) { b += g * EN_vBase[a.d++]; if (a.d >= EN_EBASE.length) { EN_encodeGroup(a, b); b = 0 } } for (var b = a.p, e = EN_nBase[a.d]; c > 0;) { var f = c % e; c = (c - f) / e; d(f); e = EN_nBase[a.d] } d(e); a.p = b; return a }; </script> Theres also this function function doKtInit() { var ktlk = 'ktl'; var ktfk = 'ktf'; if (document.forms['createaccount'] && document.forms['createaccount'].elements[ktlk] && document.forms['createaccount'].elements[ktfk]) { KT_init(document.forms['createaccount'].elements[ktlk], document.forms['createaccount'].elements[ktfk], document.forms['createaccount'].elements); } return true; } Hey there, I'm looking to have some functionality similar to Twitter in that pages are loaded through ajax depending on the path that is shown in the URI hash. For example: http://twitter.com/#!/BarackObama/following I could just split the string by "/" but I want it to work if you enter a bunch of forward slashes as well, or none at all (only for the first forward slash), here's an example: http://twitter.com/#///////////BarackObama/following http://twitter.com/#BarackObama/following http://twitter.com/#/BarackObama The hash would be broken down into multiple parts, the first parameter (ie. BarackObama) would be the first returned value from the match, the second would be the rest of the parameters. Here are examples of what the hash would be, and what I would like in return. Hash: 1. http://twitter.com/#/BarackObama/following/test 2. http://twitter.com/#///////////BarackObama/following 3. http://twitter.com/#BarackObama Returned value from RegExp match: 1. BarackObama,following/test 2. BarackObama,following 3. BarackObama Hope that makes it pretty clear. I also have this so far, but it returns both a comma separated list, but also the original string. Code: /([0-9A-z]+)\/?(.*)/ Hi All I'm using the fantastic turtorial here for my site navigation: http://css-tricks.com/6336-dynamic-p...acing-content/ It's all working wonderfully but I've hit a major stubmling block. After the new page is loaded it won't load an scripts. E.g. I'm using scripts for expanding divs, galleries, contact forms etc and they simply don't run after the page transition Let me know if you need a link to my project I'm aware the page isn't actually 'refreshed' so I'm asuming they wont fire the standard way by having the script tags in the header (Please correct me if I'm wrong) So my question is how can I get them working once the new page is loaded? Script below: Code: $(function() {
var newHash = "",
$mainContent = $("#right"),
$pageWrap = $("#wrap"),
baseHeight = 0,
$el;
$pageWrap.height($pageWrap.height());
baseHeight = $pageWrap.height() - $pageWrap.height();
$("nav").delegate("a", "click", function() {
window.location.hash = $(this).attr("href");
return false;
});
$(window).bind('hashchange', function(){
newHash = window.location.hash.substring(1);
if (newHash) {
$mainContent
.find("#guts")
.fadeOut(200, function() {
$mainContent.hide().load(newHash + " #guts", function() {
$mainContent.fadeIn(200, function() {
$pageWrap.animate({
height: baseHeight + $mainContent.height() + "px"
});
});
$("nav a").removeClass("current");
$("nav a[href="+newHash+"]").addClass("current");
});
});
};
});
$(window).trigger('hashchange');
});
All help is appreciated Thanks in advance Craig Hey I am in need of some help with a hash removal detection code, currently I have everything I need to do what I want but when I click the back button and the hash is removed from the url I need to have a script run to then change the page content. My design looked sort of like this. Code: function detect() {
var url = window.location;
if(url.indexOf('#') === -1) {
// run the code
}
}
But that ran the code every time there wasn't any hash in the url so if a user went to lets say /index.php the page content would keep being re-generated as there isn't any hash, so my question is how can I make it so it only runs only if there has been a hash in the url and then has been removed so like if you went to /index.php and clicked a link that took you to /index.php#tags and then the page content was changed with ajax, then the user clicked the browsers back button to go back to /index.php, the page would still have the tags content on it so that's when I need the function to run to change it back again. If anyone can help with my problem please reply. Thank you - DJCMBear I am trying to write a function that will dynamicly add an anchor, and then scroll to it, then remove the anchor. The script is adding the anchor, and changing the hash, but no scrolling is happening, (IE7) Any idea whats wrong? Code: function set_anchor( obj ){
name = 'anchor_'+Math.floor(Math.random()*1111);
new_anchor = document.createElement('A');
new_anchor.name = name;
new_anchor.href = '#'+name;
new_anchor.appendChild( document.createTextNode(' ') );
obj.appendChild( new_anchor );
window.location.hash = name;
new_anchor.parentNode.removeChild( new_anchor );
}
|
|||||||