Basically I'm going to be loop[ing through data in my script, which will loop through a div such as:
Code:
<div class="showOne" style="position:relative;">
<div class="showOneText">
[code].....
im new to jquery and still learning, i want to ask how can i apply animate effects in a div class, i have a class made for my content and im trying to apply opacity to my div using jquery, but i guess im not able to apply it to a div class, ive done the same thing with a div ID its working fine for my header. here is my code
<div class="mydiv" style="border-color:#FFF; border-style: solid;">
<p>some text</p>
</div>
I'm attempting to print a column of links received via AJAX request with an accompanying simple hover effect, however I can not get the hover effect to apply to the dynamic content. I've tried a few different ways of accomplishing this, none of which have worked so far. The most recent is posted below.
The call to imgUpdate.php in the following code snip returns content like:
<a class='storyImage' href='http://link.com/dev/?p=50'><img src='http://link.com/img1.JPG'/></a><br />
<a class='storyImage' href='http://link.com/dev/?p=47'><img src='http://link.com/img2.JPG'/></a><br />
[Code].....
I'm looking for some javascript to work with wordpress (jQuery preferrably) that will show/hide multiple divs on one click.
I had one working but it was kinda janky because it was causing me to have two divs with the same ID on one page. No good.
Since I updated to wp2.8.3 prior to launch, it's not working. So I've decided to just try and do it right.
Here's a page: [URL]
So, what I want to happen: On page load, the first tab: "general" and it's corresponding div beneath should be showing. And the first image should be showing. The other content divs and images should be hidden. I've given the text content divs a dashed border to show their borders. When a visitor clicks "dine at home" the general div and image hide, the second content div shows, as does the second image (it's currently the identical image, but the client may change later.) Etc.
I'll be using this function on a few other pages as well.
how to adjust this javascript to work on two different IDs at once?
current code:
Code:
<script type="text/javascript" charset="utf-8">
$(function () {
var tabContainers = $('div.imgswap > div');
[Code]....
I'm a bit of a newbie with javascript and have been somewhat thrown in at the deep end at work. I have been asked to add a filtered list to an index that current exists on a page. I found a suitable code (quoted below) but it seems to conflict with the existing code. As far as I can work out, it is because of the line "arr_nodes = document.getElementsByTagName('div')" which, using my very basic knowledge, appears to affect all existing <div>s in the page, not just the ones I've quoted below.
Basically, Is there any way to make that line ignore all the divs that were originally in the code & just refer to the divs called "text1", "text2", "text3", "text4", "text5", "text6" and "text7"?
[Code]...
I'm trying to get something to work that sounds simple and it worked great until I had a second item to apply it to. This works fine, with one div. When you hover over the link with the class 1slide, it loads the div with the class panel1. The problem is I can't get it to work if I use a second function for .2slide to load the div .panel2.
<script type="text/javascript">
jQuery().ready(function(){
jQuery(".1slide").hover(function(){
jQuery(".panel1").slideToggle("slow");
});});
</script>
I've tried multiple variations, including 2 <script> tags with the classes swapped, and combining as shown below
<script type="text/javascript">
jQuery().ready(function(){
jQuery(".1slide").hover(function(){
jQuery(".panel1").slideToggle("slow");
});
jQuery(".2slide").hover(function(){
jQuery(".panel2").slideToggle("slow");
});
});
</script>
I think I'm combining these wrong but I've tried multiple different ways. They're classes now but were ID's, and that didn't work either. Figures, I was hesitant about posting hours ago because I knew it might be something simple.. I almost solved everything with this:
<script type="text/javascript">
jQuery().ready(function(){
jQuery(".1slide").hover(function(){
jQuery(".panel1").slideToggle("slow");
jQuery(".2slide").hover(function(){
jQuery(".panel2").slideToggle("slow");
jQuery(".3slide").hover(function(){
jQuery(".panel3").slideToggle("slow");
})})})})
</script>
All 4 div's .panel1, .panel2, .panel3 are set to display:none. The only issue now is panel3 is twitchy. I have a feeling it's yet again just a closing bracket issue. Am I writing this correctly? semi-colons anywhere, mess the entire thing up. I am using FireFox 3.5 for reference.
I've used a function to out put two lists, - loco numbers and loco names - which I want to display side by side on a page, either in two adjacent divs or in a two-column table so that viewers can straight away reference the numbers with the associated names.
I can output it as a document.write - but that just results in one continuous list of numbers and then names. explain how to output the two lists in two separate divs.
How would I seperate a text string such that it would appear on seperate lines ie. Initial Input: StrMsg = "This is an example of a string that will appear on seperate lines" "Hoping that this fully works, there will be no errors and all will be well" "This is the last line of text."
[Code]..
I am using javascript to switch between a series of divs, on clicking a navigation tab the divs display property is set to 'block' and all other divs have their display property set to 'none'. That works fine, the problem I have is when I redirect to another page (e.g. a PHP script) on return to the index the divs have reset and only the default div is shown, rather than the div that was showing when the user left the page. The solution, as I see it, is two stages: Write a function to display the relevant div based on the variable passed to it, then work out how to pass this variable around various pages (post/get). I am very inexperienced with javascript and it drives me mad that the script literally does nothing rather than throwing up an error (as in PHP) but this is what I have so far in terms of a function:
[Code]...
I have been trying to do some tooltips for a website and desperately wanted to learn something new and do that with jQuery.However, every time a mouse hovers over a tooltip, all hidden divs are shown, not just the one that supposed to. Here's my html:
Code HTML4Strict:
<div class="tip">
<a href="#"></a>[code].....
I am putting the following source anchor code but cannot get the expected results in Internet Explorer.
<a href="#selected"><button type="button" id="button" value="button">Content</button></a>
Destination anchor code:
<span style="position:absolute;"><a name="selected" id="selected"></a></span>
I use a subroutine to popup windows in my sebsite. It looks like this :
function poplink(filename)
{
filestring = filename + "htm"
LinkWindow = window.open(filestring,'LinkWindow','');
}
Filename is just the extensionless web page name e.g. "Addresses"
Problem is of course every window popped up will replace the previously
popped up window and in the case of a popped up window popping up a window
the new window will just replace the calling window.
(Please, no lectures on popping up windows, I need to in my particular case
and here I'm just stripping it down to the bare problem for claritie and
simplicities s sake)
I'd be happy if I could create a new window handle each time so that all my
popup windows will be unique. If it could be the filename that would be fine
e.g. instead of the window handle variable being "LinkWindow" it would be
"Addresses". Is there some way of making the variable I assign the new
window to a variable? All I can come up with is somehow having LinkWindow an
array of window handles and just keep incrementing it e.g.
LinkWindow[100]; // 100 is more than enough windows for a typical session
LinkWindowCount = 0;
function poplink(filename)
{
filestring = filename + "htm"
LinkWindow[LinkWindowCount] = window.open(filestring,'LinkWindow','');
if (LinkWindowCount < 99)
LinkWindowCount++;
else
LinkWindowCount = 0;
}
What would be the correct syntax for creating LinkWindow as an array or is
there a better way of accomplishing the same thing?
I use named anchors to take users to specific parts of a long page. But I
want to add some processing and do some things with my nav bar when users go
to certain sections delineated by named anchors. I understand that the
anchors array creates an element for each anchor in the page when the page
is loaded, but how do I identify which anchor is currently being viewed?
Here's some pseudo code:
if (document.anchors.name == "section_B") {
then do this or that
}
But what do I test to determine the current anchor name?
What about using id's instead of names? Can the anchors array return
anchors created with id's as well as names? Would this be of any benefit?
When are named elements written with script accessible to script?
<html><head><script type="text/javascript">
function ready() {
alert( document.getElementsByName("div").length );
}
</script></head>
<body onload="ready()">
<script type="text/javascript">
document.open();
document.writeln( "<div name="div"></div>" );
document.close();
</script>
</body></html>
IOW, why are there 0 elements named div at the time the <body>
element's onload handler is invoked? When can I retrieve this named
div from the document hierarchy?
This exercise is necessary since code I have written using the DOM
(that works) has to run on God-forsaken browsers such as IE 5.1 for
Mac whose support for the DOM is spotty at best.
The problem goes like this:
For each element in the currently loaded markup page that has an 'id'
attribute, elements can be accessed like-
var elem = document.getElementById("foo"); - ("foo" is the 'id')
now i want to implement a shorthand method which can give me the
element just by this:
var elem = document.foo; -("foo" is the 'id');
For this , i will have to add properties to the global "document"
object for each element in the currently loaded page that has an
attribute. These properties should be added when a page is loaded , and
should be removed when a page is unloaded..
How can i dynamically add and remove property to an object.
How come none of these work :
document.getElementByID("repondant(1)").value;
document.forms.ajouterunelement.repondant(1).value;
how can i get the value of a field that is named repondant(1)?
As title says I need to create variable named with value of other variable! So is that possible?
What exactly I need is something like this:
for(var i=0; i<11; i++){
var Img[i] = ""
}
I have a little problem that doesn't seem to be working. I'm trying to access a variable using its string name which is passed when the function is called Code: ie:
function a(varName, other crap...) {
document.getElementById("sometag").innerHTML = ['varName'].somevalue;
}
// I would call this function like so...
a("temp1", othercrap...);
The variable temp1 is set in another script file. I don't specifically know which variable I will be passing to the function a(), all I have is its string representation. I can access the values of temp1 if I specifically call it but I can't seem to figure out how to call it dynamically.
The problem I'm facing is I have a form which isn't name (and no I can't name it either ). And I want to fill in the value of one of the text inputs.
View 23 Replies View RelatedI'm trying to import some xml code and append it to some dom element, using this...
[code]
$.ajax({
type: "GET",
url: "resources/xml/sites.xml",
dataType: "xml",
[Code].....
the correct code ( <a id....></a> ) is appended in body (checked with firefox and chrome js console), but the css style associated to it is not applied at all... it's not even shown as a link...
moreover, the alert method returns 0, so I cannot even search by its id or class...
I used the .clone() method because chrome shows an error without it.
$(".change_page").click(function(e){
e.preventDefault();
do_stuff();
});
I noticed when I click one of these links, there is an ever so slight lag on all browsers. Maybe less than half a second, but it'snoticeable.
Now, when I remove e.preventDefault() and use return false instead, everything runs a lot smoother.
Im trying to get a sliding down div, that pushes another div furtherdown as it slides. I created the following code. However, the 2nd div doesnt appear at all. What is the proper way to say only the div with class "x" should be affected? The basic tutorial doesnt really cover this.[code]
View 1 Replies View RelatedI have found the following code posted by fellow user called Thalantyr in 2006, which randomly changes the colour of buttons and images. It basic but works fine as is.I would like to apply the random function to change the background image of a <div>. The div already has an id with css properties attached. Is there away to apply the function using a class? I have tried changing the 'var eles=document.getElementsByTagName('*')||document.all;' section but it stops working. Code below.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>[code]............
try to do that every char that i type in a input-type there will be a alert,but it doesnt do that, when the page loads it pop ups one time an alert and it doesnt pop up more alerts when i type something in the input-typehere is my code
<script type="text/javascript">
function init()
{
[code]....
I have a page which i am setting up for my local football team, and the javascript part of the page which is a 'news' rotator which i need to ammend. at the moment the tabs on the right of the 'news' rotator are linked to a certain page but nothing happens when you click on them? and i dont know enough javascript to ammend my code to make it so that it send the user to the linked page
[Code]...
I have the following pieces of jquery code.
$(function () {
$('select[id$=lstOwnership]').bind("change keyup", function () {
if ($(this).val() == 2) {
[code]....
Based on this logic, I'd like to show/hide the ID tag based on the values of a drop down list and another textbox. They both work fine but the problem I'm having is that each can cancel out the other. For example, if the 'txtPercentOther' textbox value is 3 and the drop down item has a value of 2, the ID tag is shown which is fine. But if I were to change the drop down list value to something else, it'll hide the ID tag, even though the other text box still has a value of 3 which means the ID tag should remain shown. I'm wondering if I maybe need to name my function so I can call the other in each.