I have a set of vertical tabs about a quarter of the way down my page. They are all visible on page load from the top of the browser window. When you click on a tab, it scrolls down and puts the tab content at the top of the window. I know why it does this, is there anyway to override this behavior so that the tabs change content but the window does not scroll?
View 10 RepliesI have got tabs working great and have set up a rotate every 5 seconds but whenever it loads a new tab (either by clicking a link or rotating to it) it moves up to the top of the page as if it was following an anchor.
View 2 Replies View RelatedI'm building single page website with horizontal scrolling script and I want to add tabs (loading external html) to one section. I've managed to place them into a div inside this section but problem is that every time I click on any tab it scrolls horizontally to home page and returns back directly to that tab and not top of the section/page
[Code]...
What am i doing wrong? I'm trying to toggleclass on a link, with the href of the current anchor
var anchor=window.location.hash;
$('#nav a[href='.anchor.']').toggleClass('active');
I started with the simplest step - the hide() function:
$(document).ready(function(){
$("a#p").click(function(event){
$("#HiddenDiv").hide();
})
});
It worked fine as long as the href attribute of the anchor tag was '#'. Then I tried using href other than '#' and ran into a problem. I just changed the href to:
<a id="p" href="test.php">Click me</a><br />
<div id="HiddenDiv">Testing mate</div>
test.php is the page in which both these sections (html and jquery) are present, so like a postback to the same page.
This method didn't work and on clicking the anchor tag, the div stayed visible.
I then tried theevent.preventDefault(); method and that worked.
So I experimented more. I tried using the hide function on a dynamic link, something like test.php?a=1.
I ran into a problem again. The div remained visible on clicking that link.
At any rate, I am wanting to mod this jquery smooth scroll to anchor so that it fades in once in position. Farthest I've gotten has been that some how within the procedure, "onAfter().fadein" should be added. Nothing in that vain has worked. You can view the page I am working on here: [URL]
View 2 Replies View RelatedI want to add a small but informative weather widget to one of my web sites. Having searched around, most are either too big or too simple.
I did find "one" that I liked but it links to a lame page. I would rather have no link rather than the one provided. The widget I like is a simple javascript "include file" similar to this one:
[Code]...
I have to intercept the click on anchor's because they do reload the page.
The anchors does use the href attribute to do the reload/jump.
How can I get the event of this? How can I prevent this?
I'm using a script that has the back-end functionality mashed up so I can't change it. An image with a link around it hides behind this:
$RateUserThumbnailLink$ And i'd like to disable the link somehow as the owner wants money for the edit which is ridiculous. Can anyone figure out a way of disabling the link it generates?
I have a page with textarea where user can enter html code for link exchange
I need to verify whether the code entered contains url in anchor's href tag having same url as that of reciprocal link. how can i do this?
I'm working on a project where we're using JavaScript to let users swap styles on a page. To accomplish this, I'm calling the script via href="javascript:swapcss()" on the switch styles button.
Some pages on the site have anchor links. On those pages, if someone swaps styles without hitting any of the anchor links, all is well. But if someone hits an anchor link and then hits the swap button (at this point the URL is pageid.html#anchor), the page just reloads to their anhor point without swapping styles.
Does anyone have a workaround handy? I've tried several alternatives I've found online (href="#" onClick="action"; href="javascript void(0)" ). Nothing works for this case yet. Code:
I'm trying to setup a page that uses JavaScript in a text link to submit a form:
<a href="do.htm" onclick="javascript:document.forms.Q01.submit();">
I also have added a fallback page in the href (do.htm) in case users have JavaScript disabled. But the JavaScript doesn't seem to be working. When I click the link it always goes to the fallback page, and doesn't submit the form.
I've tried swaping the order in the anchor tag (JS first, href second):
<a onclick="javascript:document.forms.Q01.submit();" href="do.htm">
and the same thing happens.
If I remove the href value:
<a href="#" onclick="javascript:document.forms.Q01.submit();">
the JS does execute properly.
How can I get the JS to execute by default for browsers that support it, and the href be the backup for browsers that dont support it?
I have a page that is made to display several jpgs as if they were a pdf file. I have anchors(<a href='#1'></a>) before every new image. I have a display that stays at the top of the page showing your current page. Next to the display are buttons that allow you to click next page or last page.
It's easy to keep the display(page 1 of 12) up to date if the user only uses the next and last page buttons but I need to call javascript and update a variable any time they use the scroll bar and go past an anchor.
To make it a little harder, the 'pdf viewer' is it's own page and the scrollbar is on an iframe that's pulling in the viewer.
Right, so there are a bunch of links in this format: <a href="/profiles/########">username</a>
I'm using greasemonkey, and what I want to do is go through and get all of the /profiles/######## part of the anchor tag. I'm using Regex and I can't seem to get a match.This is what I have so far:
function ok() {
var names = document.getElementsByTagName('a');
var reg = new RegExp("WHAT GOES HERE?");[code]....
what is actually desired is I want there to be a way I can select these somehow as well..
I am looking for a generic javascript function to identify the form with in which a element exists, thus developer can avoid coding like document.forms[index].submit() - where they are sure, they want the form with in which this element exists is to be submitted. This way when forms are introduced at top level the code can remain unchanged, else every form introduce above in the DOM will result in increasing the index by one.
The code is given below. While doing so i am stuck with 2 problems
P1: In the code, you can see i am giving a explicit 'break' in the code. If i don't do so the code seems to be looping. Obviously i am missing some basic.
P2: I am able to pass 'this' for anchor element by name="xy"
<a href="#" name="xy"
in its onclick function by which, in the javascript function i move up the DOM.
While i am unable to do that on the anchor element given below since this function is now on the href attribute.
<a name="xy1" href="javascript:doFormSubmit(this);">Q test</a>
Hence the script fails. Code:
I want to be able to match all <a> tags on a Web page that are external links, which would be signified by the href attribute starting with "http://", obviously. Then I want to add an attribute to the matching tags.
I ran across this script that is supposed to do that:
<script type="text/javascript">
$(document).ready(function(){
$('a[href^=http://]').attr('target','_blank');
});
</script>
But it doesn't work. I don't understand regex very well yet, so I'm not sure if that part of it is right, but the jQuery syntax looks correct to my inexperienced eyes.
I know jQuery is working on the site already, the script is below the call the the jQuery library, and yes, I do have the script in the Head tag of the page...
I need to get the page to reload with the anchor in the link when it is clicked in a dropdown menu. For example if I am on 'www.domain.com/about/#2' and I then click on 'www.domain.com/about/#3' the url changes but the page doesn't reload so I need the page to reload, but keep the new anchor (#3).I gave the links with anchors a class of 'reload' and tried this:
$('a.reload').click(function() {
window.location.reload();
});
I'm having issues with jquery and the tabs I'm using. My tabs work but... I want some more functions and that seems to be a big problem for a Javascript and jquery newby.
My HTML:
Code:
<ul class="tabs">
<li>Tab1</li>
<li>Tab2</li>
[Code]....
I really don't know if this is correct but it works! What doesn't work is the active class. If you use one of the buttons in the first tab you go to the right tab but the tab itself has no class called active and that ruins the style.
2)
I also have one other question: lets say that all the above is my second page and I have my frontpage in which I also have buttons. I want somebody to use the button and end up in the third tab of page 2. My link is something like
Code:
page2.html#tab3
I read that using this should lead you the third tab but it's not working for me. You go to the first tab of page 2 instead.
I've been reading a LOT! Jquery for dummies, I googled, read the forum and other forums. I posted on a Dutch forum but no answer. I've added a lot of different code but it doesn't work.
I have nested tabs in jquery tabs which are pretty simple to do if we want static jquery tabsbut what if we want nested tabs that the remote page should decide what would be the tabs.or in other words i want nested tabs in a remote page (or ajaxified) For example i m calling this page(remote page) through tabs
<div id="container-2">
<ul>
<li><a href="#fragment-1a"><span>Section 1a</span></a></li>
[code]....
I am using jQuery tabs and when I have very long content within the tabs, my browsers scroll bar reflects the content in the tab with the most content.
Example, "Tab 1" & "Tab 3" has a very long scroll bar, even though it has no content (because of Tab 2) and you can scroll down through the empty space
[URL]
Is there a way I can hide the content in Tab 2 so that my browsers scroll bar displays correctly in relation to the content in the active tab?
I've been reading a bit about proper ways to use <a> tags to launch
javascript functions, but I'm still not clear on one issue.
I understand it is common to create a link in HTML such as
<a href="javascriptless.html">
then override the href in java by setting it to href='#', and setting
an onclick function. The problem I'm having is that when I click on the
# link, the browser scrolls to the top of the page. Is there a way to
get around this?
One workaround I found is to use a nonexistant anchor such as
href='#notonthepage'. Both Firefox and IE7 beta do not scroll in this
case. But it seems like a hack. Is there a better way to deal with
this?
jQuery - Scrolling browser Window. I have two demos of scrolling page content with jQuery.
This one - [url] is scrolling the contents inside a container and it works as I wanted on Mac/PC
Code:
I need the same effect as above but I need to scroll the whole browser window.
I have a demo here - [url]
Code:
Problem here is on the Mac the transition are jumpy and it seems to flash the first yellow div before sliding up or down. Testing on a PC it will slide down but won't slide up. How can I get the whole browser window to slide up and down with a smooth transition.
I'm using the following code (simplified version) to call a Json file, parse it and on each iteration, create a div with an ID of "tab". I'm using this with jQuery UI .tab() to create a listing with entries which have three tabs. Anyhow, the principle seems to work except that when I examine what's happening behind the scenes using Firefox console, I see that each href in the html code produced is causing the Json function to re-fire using the href as it's url target.
<!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" xml:lang="en" lang="en">
<head>
[Code].....
Consider following html code
<p id="oliver">
<a id="oliver1" href="/oliver1/">Oliver Twist 1</a>
<a id="oliver2" href="/oliver2/">Oliver Twist 2</a>
<a id="oliver3" href="/oliver3/">Oliver Twist 3</a>
<a id="oliver4" href="/oliver4/">Oliver Twist 4</a>
</p>
Applying JavaScript to above html as following:
[Code]...
Why are anchor nodes pointing to href and text nodes pointing to [object]? As anchor and text both are objects therefore all outputs from indices 0 to 7 should be [object].
im searching for a plugin/code example for text scrolling. I got some text in a <div> if text is longer than for example 300px it gets cut and is scrolling from start to end, stops for a second and then scrolls back, stops and all over, and if its not long enough than 300px then just displays normaly. Something similar to the Song name scrolling inin anyMP3 player.
View 2 Replies View RelatedI have a script that scans an HTML document for headers and special comment tags for the purpose of generating a left-floating/position-fixed DIV that contains the document's outline or "table of contents." Within the DIV are lists (UL element by default) whose items (LI elements) are jump-to links (A elements) to the points (headers, special points marked for inclusion in table of contents) in the document. The problem is this. I have typical HTML document with links that jump to points (usually headers) inside the document, as shown below:
Code:
<body>
<p>This is addressed <a href="#later-text">later</a> in this document
<h1><a id="later-text"></a>Header Text</h1>
<p>...
</body>
But my script, being a document outliner that finds headers in a document, inserts another anchor as a jump-to point just before the first occurrence of text in the header (inserted A element shown in red below). This somehow disables the document-coded jump anchor (shown in blue below). And it occurs in FF and IE, which suggests it is not a browser-specific issue. Why does it occur? Is there something in the HTML spec that states that two anchors to which a jump occurs are not allowed to be adjacent elements in the document?
Code:
<body>
<p>This is addressed <a href="#later-text">later</a> in this document
<h1><a id="later-text"></a><a id="jump-1"></a>Header Text</h1>
[code]....
To reproduce what I am seeing, search for the text "Why Is A Survey Done". The first occurrence is a within-document jump-to link, which should jump to a header below it. If the script execution to generate a document outline is disabled, the jump works. But if the script is executed and the document outline generated, the jump-to link does not work.