I have a script that slideshows 5 images. Below the images is a numbered list; 1-5. I'd like to set the style of the number buttons based on the image being displayed as the images scroll from one to the next. Code:
View 3 RepliesI've been using this javascript (menu.js) for a drop down navigation menu for my site. Everything works well on it but in multiple browsers I get this error occurring on line 7 and 16 which is the d.className = "menuHover"; and d.className = "menuNormal";
[Code]...
Is there a way to access the value assigned to onmousedown for an
object? I've been searching online but can only seem to find how it is
assigned via html. What I need to do is access the value (the script
string) in javascript.
For example, I'd like to try to do something like this:
function virtualClick(objectName) {
eval(document.getElementById(objectName).onmousedo wn);
}
I am of course not explaining the full problem in detail, but would
appreciate any input on how to access the onmousedown value (or to know
if it even exists as a property).
The code works as expected in Chrome, but not in IE and FF. In IE the error is "Object doesn't support this action" and in FF "setting a property that has only a getter". In Chrome there is no error in the console. There are three javascript <script>...</script>s that exist to display a <td> row in a table with a particular graphic depending on the screen width. The odd thing is that in both IE and FF (and of course Chrome), the first two scripts display perfectly well. Why does the third <script> produce an error? It has exactly the same form as the two before it.
I can only guess it has something to do with where it occurs :confused: Googling the FF error, it has something to do with trying to set a read-only property, but then why do the first two <scripts> work? They are no different (at least I can't see a difference.)
[Code]...
Trying to add a new property to a non-jQuery object from inside each loop doesn't appear to work:
var arguments=new Object();
arguments['ticket']=ticket;
arguments['email']=email;
arguments['module']=module;
arguments['epoch']=new Date().getTime();
var total=0;
$('select.category').each(function(){
var name=$(this).attr('id');
var option=$(this).find('option:selected').val();
total+=parseInt(option);
arguments[name]=option;
});
The 'total' variable works as expected. The the 'arguments' variable doesn't. Almost like
a variable scope issue or something. If I put some extra debug code to print out all the
property/value pairs, outside each loop I only see original four, and inside each loop only
the new one just set and none of the original four.?
I am currently encountering a problem with setting "display" property from "none" to "block":
Browsers will refresh itself when the display property is changed; this causes the element to display then suddenly disappear after the page reload. Do you guys have an idea what I can do to avoid it?
I tried using jquery's show command, css command with setting display to block, and pure javascript method like document.getElementById("theId").style.display="block".
What happens if you do this?
function Person() {}
Person.prototype = 7;
var ted = new Person();
Also what happens if you set Person.prototype to an array or function?
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 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.
Having a little bit of trouble with a site I'm currently working on I'm using some AJAX for the instant g-mail/facebook style navigation, you know the kind, with no refreshes, etc. Problem is, to allow for back/forward and bookmarks, I currently use a URL that looks like:[URL].. This is fine, not a problem... The issue comes into play when I want to open up the news.html page, from my home.html page, and have it open to news item #6 (for example).
I can't add a #, because one is already being used to reference the anchor for the content div. Has anyone run into a similar problem before? If so, how did you resolve it? Can some jQuery be used to find the location of the news item div in question, on load, and scroll to it like that?
I have written a script that highlights a table row when the appropriate checkbox is checked. Using element.style is a bit messy and doesn't really fulfil my needs..
I want to just be able to use className, but when I uncheck a row I am having difficulty restoring the original (when the page loaded)className, I need to do this because the rows have different styles Is their any other way to access the original className of an element?
I create an xml file in a text editor:
<?xml version="1.0" encoding="utf-8"?>
<elts>
<elt id="1" class="c1">content1</elt>
<elt id="2" class="c1">content2</elt>
</elts>
Then I load the file via xmlHttpRequest into xmlData variable.
Why does xmlData.getElementById(Ƈ') return null and
xmlData.firstChild.childNodes[0].className returns null also?
I was just battling a small dHTML quirk where I was attempting to set
the className attribute of option elements, but it didn't seem to be
updating. I did some testing with other elements and came to find the
problem was not in my code at all, but rather in my logic...
I had a dehighlightAll(selectBox) function in my code library and
decided to use this to reset all the options to white backgrounds.
This worked fine with my previous method where I explicitly set the
style.background attribute of the options. But when I wanted to use
className instead, everything mysteriously stopped working. I thought
there must be something wrong with className and started
investigating....
I eventually came to the realization that if you explicitly set a style
element, it won't be overridden by the className. This was an
oversight on my part and thought that it might be useful to post about
it, because it could be easy to miss and I haven't seen any posts about
it.
It really comes down to the CSS order of precedence ... that is the
style field modifies the inline style of the object, while the
className references a class ... and as CSS precedence dictates, inline
styles override all others. So this is a word to the wise to be
careful if you're ever mixing className and style elements...
I have an menu [unsorted list (ul)] with month named li. This li have also an anchor nested with a class with the month name
<ul>
<li><a>Test</a>
<ul>
<li><a class="januar">Januar </a></li>
[Code]....
I'm new to Jquery and I was wondering if this feature exists anywhere. the animate() function where instead of parameters you pass in a classname and it reads the parameters from available css definitions. I am trying to keep my css specifics out of my javascript files.
View 2 Replies View RelatedI'm trying to update a part of my page depending on the option selected from a drop down menu. A few of the options can trigger this event. So to do this i've given those options a class name, that i can check against when they're selected. eg...
Code:
So if 'test2' or 'test4' are selected it will check if the class name is present then do the rest. But I cant get the class name from JQuery. I've tried..
Code:
I am working on a AJAX autocomplete script and the autocomplete is working, but I would like to add some more functionality to by adding navigation through the list with the UP and DOWN arrow keys. I seem to have the javascript working where when I press down one of the arrow keys it seems to change the className, but it immediately will change the className back to the original className.
Code:
document.onkeypress = KeyCheck;
var HighlightSelection = -1;
function KeyCheck(e){
[code]....
I know that the function "setHighlightSelection" is very basic, but it's being used for testing purposes.
I am working on a AJAX autocomplete script and the autocomplete is working, but I would like to add some more functionality to by adding navigation through the list with the UP and DOWN arrow keys. I seem to have the javascript working where when I press down one of the arrow keys it seems to change the className, but it immediately will change the className back to the original className.Would anybody be able to tell me why this is happening?
Code:
document.onkeypress = KeyCheck;
var HighlightSelection = -1;
[code]....
I have a website with a list of products and I'm trying to apply a different classname to each product image to show a different picture frame around each one. Let's say I'll have 8 different frames.
Example:
<div class="frame1">...</div>
<div class="frame2">...</div>
<div class="frame3">...</div>
etc...
but when I'm up to 8 I want to start from 1 again if there are more than 8 products available.
How do I go about doing this? I tried something with a for loop but it was giving each product all the classes (class="frame1 frame2 frame3 frame4..."
I want to get all element which have the classname 'blaat'. So i tried using 'each()', but for some reason it isn't working...
This is the code i have:
jQuery.each ( 'li.blaat', function(){
alert('aaa');
});
I only have 2 elements with the classname 'blaat', but it gives me 9 times an alert message... Am i using the function wrong here??
I'm usingjEditable to make an editble select to update my database. I have an lot of selects to create but I don't want to expand the code that much.This is my existing code to save changes to my database with an select with jEditable [code]What I want to achieve is to rename the class to editable_ select |select_ bet_ termijn and use this class at 2 positions in the jEditable code:
- editable_selec = name of class
- select_bet_termijn = name of data (= array)
How can I split the class name using the | seperator and insert the new varibales [0] / [1] in the code?
I'm trying to change the classname of all of the tabs with a function.
Here's the code:
Code:
The script doesn't work at all.
When using instead of this line (to change style of element)
document.getElementById('ImgId'').style.visibility = "visible";
one would use (to change class of element)
Does className change the class="imgHidden" into "makeImgVisible" here?
document.getElementById('ImgId').className = "makeImgVisible";
.imgHidden {visibility:hidden;}
.makeImgVisible {visibility:visible;}
<img src="myImg.jpg" alt="" id="ImgId" class="imgHidden" width="200" height="200">
I am using some code I found on the internet to make all my external links in a new window. Also, I want to make these links gray. I think I once heard you coulden't change link colors at all once a page was loaded, but I may be wrong. In any case, it won't work.
Here is my code:
Now I find I can't make them open in a new window either.
I need to select all the divs having the classname starting as msg_body. actually the classname is msg_body_3. The last part of the class name of each div will vary as it is an id. How can i slideup all these divs, class name starting with msg_body using jquery.
View 3 Replies View RelatedI've just recently become enlightened by jQuery and would like to add it to my site, but I'm having a little trouble. I made this basic function:
function showPanel(id) {
var panel = $(".further_info." + id + "");
panel.slideToggle();
$(this).toggleClass("minus");
$(this).toggleClass("plus");
}
To give an example of its use:
<a class="panel_control plus" onclick="showPanel(0);"></a> <div class="further_info 0"></div>
The panel is displayed correctly, but the classname of the link isn't toggled between "plus" and "minus."