Develop Reference

Need jquery to activate a click through by clicking on a different div

I was hoping someone could help...I'm new to Jquery ....all I want to achieve is a click through on a hyperlinked image but this occurs when a completely separate div on another part of the page is clicked on rather than the hyperlinked image I just mentioned. .......the hyperlinked image needs to be invisible also. In case anyone is wondering why I need this ....it's because I want my own custom button rather than the standard one that comes with a CMS that I'm using and it can't be changed....it's basically a work around the owners of the system suggest.
Here's what I thought would work
<style>
#my-custom-button{
margin: 0 auto;
width: 200px
}
#the-standard-button{
display : none
}
</style>
<div id="my-custom-button">
<img src="../images/order-now.png">
</div>
<div id="the-standard-button">
<?php
proprietary PHP here that renders the standard button
?>
</div>
<script type="text/javascript">
<!--
$(function(){
$("#my-custom-button").click(function(){
$("#the-standard-button").click();
});
});
-->
</script>

The whole
<?php propiertary blah blah ?>
makes it hard to decipher but my guess is that the handler is being generated for whatever is being created by php, i.e. the php generates
<button id="phpButton">
blah
</button>
and then a handler like
$("#phpButton").click(....)
Notice that the handler is NOT on "#the-standard-button". So, you need make sure that you are using the correct selector when calling the click() in $("#my-custom-button").click(...)
Check out this jsFiddle. Notice which secondary click event is fired.

I'm not sure I understand your question perfectly, if what you want is that when You click on one button it will act as though the other was clicked.
Here is a solution that will work IF the default button is also an anchor tag (<a>)
HTML:
<div id="newButton">
<img src="/theimage.jpg"/>
</div>
<div id="oldDiv">
<img src"oldImage.png"/>
</div>
JQuery:
jQuery(document).ready(function($){
$("#oldDiv").hide();
$("#newDiv > a").click(function(){
window.location = $("#oldDiv>a").attr("href");
});
});

Chain of selectors

Basically, I have to change a part of the page using jquery, but given the format of the page, I'm extremely confused as to what the chain of selectors has to be.
<span class="foo1">
<span class="intro"><span class="bar">data I need to change</span></1>
<span>...</span>
<div class="body">This is the only place I can write code on the page</div>
</span>
How can I change the data I need to change in using jquery? I don't have server access, obviously.
The code MUST start with $(this), because that 1 in foo is always a random number, and I can't guess it. The code must work for all posts, based on the post the code is in.
If I could use normal nesting, I would.The code must look something like
$(this).sibling('.intro').child('.bar').text('bar');

WORKING FIDDLE--CHAIN of Selectors
For nesting purpose,this is how you select:
$('.foo1 > .intro > .bar').text("text to be changed");
The above code indicates that bar is inside intro and intro is inside foo1.
Incase,if you still have doubts,Refer this->Nested selectors
As others have suggested,
$('.foo1 .intro .bar').html("text to be changed");
this is also a perfect way to approach nesting.

Well from the small snippet of markup you've given, you can do it like this:
$(".bar").text("Whatever you want it to say instead");
But if there are other elements that match .bar you will need to be more specific:
// All of these would select that element
$(".intro .bar")
$(".foo1 .intro .bar")
$(".intro > .bar")
$(".intro:first-child .bar")
If you need to select it relative to the .body element:
// All of these would work
$(".body").siblings(".intro").find(".bar")
$(".body").parent().find(".bar")
I think you get the point... we can't give you a proper answer unless you expand your question.

If I understand the question.
You can only add code in <div class="body">. But you want change the text inside .bar
<span class="foo1">
<span class="intro"><span class="bar">data I need to change</span></span>
<span>...</span>
<div class="body">
This is the only place I can write code on the page
<script type="text/javascript">
$('.foo1 .intro .bar').html('Changed!');
</script>
</div>
</span>
You could do also simply $('.bar').html('Changed') but if you have multiple span.bar that's more safe.

http://jsfiddle.net/u4djZ/1
$('.foo1>.intro>.bar').text('Data Changed!');
As MESSIAH pointed out, you should use the CSS child selector.

here:
<span class="foo1">
<span class="intro"><span class="bar">data I need to change</span></1>
<span>...</span>
<div class="body">
<script>
$(document).ready(function() { // you need this to make sure document is loaded
$('.foo1 .intro .bar').html("new text");
});
</script>
</div>
</span>
you need to wrap your js code in
$(document).ready(function() { /* your code here */ });
or - if jquery library is loaded at the bottom of the page:
window.onload = function () { /* your code here */ };
to make sure jquery and DOM elements are in place before you try to access them.

You can use -
$(document).ready(function() {
$('.foo1 .intro .bar').html("new text");
});
Referance

the correct answer for my question ended up being
<script class="12345">
$('.12345').parents('.foo').find('.intro>.bar').text('whatever');
</script>
thanks for all your help :)

Is my text indexed by Google?

I am making a HTML page, with JavaScript. In the HTML is the first content of a div, but when the user clicks a button, the text changes.
The text in the div is actual content, and needs to be findable by Google. The text is now stored in a simple variable in the JavaScript file.
Questions:
- Is that text indexed?
- Are there any better ways to store the text?

You can keep the text in a div and then change the visibility to hidden
<div id="content" style="visibility: hidden;">
Div content
</div>
Then in javascript,
document.getElementById("content").style.visibility="visible";
should make the document visible. Since the text will be there in the source for the page, it will be indexed by google, but will be displayed only when you run that line of javascript.

Storing the text in js variables is generally not a good idea.
You can put this text in a hidden div instead, like this:
<div id="target">
super-text
...
</div>
<div id="second">
super-mega-text
...
</div>
<button onclick="replace_text();">
<script type="text/javascript">
function replace_text() {
var target = document.getElementById('target');
var second = document.getElementById('second');
target.innerHTML = second.innerHTML;
}
</script>
In that case your second text will be indexed by Google.
Of course you better use any js framework like jQuery or Mootools.
Mootools example:
<div id="target">
super-text
...
</div>
<div id="second">
super-mega-text
...
</div>
<button id="button">
<script type="text/javascript">
window.addEvent('domready', function(){
$('button').addEvent('click', function(){
$('target').set('html', $('second').get('html'));
});
});
</script>

Javascript is not searched, see googles answer:
http://www.google.com/support/customsearch/bin/answer.py?answer=72366

I found a good article about hide/display content only with CSS. It's working without Javascript: http://www.devinrolsen.com/css-hide-and-display-content/

show() div problem

I am an absolute beginner in this field. I have written the following code but it's not working. Can someone explain where is the error?
<script type="text/javascript">
$("button").click(function(){
$("div").show("slow");
});
</script>
<button>show</button>
<div style="min-height:300px; min-width:400px; border:10px solid grey; display:none;"></div>
this is a link

You execute the jQuery before the button is there. So at the point jQuery is executed, the button is not existent.
The solution is to use $(document).ready(...).
All elements on a page (HTML) are parsed to the DOM of that page. The DOM is a hierarchical collection of all elements. You can select elements out of it using jQuery.
However, obviously the DOM needs to be fully there before you can select the elements. In your case, you first select the button, and create it afterwards. That does not work. At the time of the selector the button does not exist yet.
Using jQuery's $(document).ready(), you can defer the function containing selectors until the DOM is fully loaded and parsed - at which time the selector works because the elements are there.
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function(){
$("div").show("slow");
});
});
</script>
<button>show</button>
<div style= "min-height:300px; min-width:400px; border:10px solid grey; display:none;"></div>
this is a link

You may be trying to listen for the click event before the button exists. Try waiting for the page contents to load:
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function(){
$("div").show("slow");
});
});
</script>
<button>show</button>
<div style= "min-height:300px; min-width:400px; border:10px solid grey; display:none;"></div>
this is a link

As you can see from the fiddle here http://jsfiddle.net/bQUFE/ your code works (the div is shown when you click)
If you don't have this result always check:
1)that you loaded jquery before your script
2)Always use $(document).ready() like this:
$(document).ready(function(){
$("button").click(function(){
$("div").show("slow");
});
});

the javascript is executed before the document has loaded, so the click-handler can't be attached to the button. to avoid this, wrap your code into a domready-function like this:
$(document).ready(function() {
$("button").click(function(){
$("div").show("slow");
});
}

It probably is working but as your <div></div> is empty you might notice it.
Also make sure you only run your JQuery script AFTER the div has been added to your HTML.
May I also suggest to use better identifiers, because you might eventually have many div's and buttons on your page.
Example:
<button id="btn1">Click me</button>
<div id="hidden_div" style="display: none">
Hello there!
</div>
<script type="text/javascript">
$('button#btn1').click(function() {
$('div#hidden_div').show('slow');
});
</script>

You code runs before the button is created so it cannot bind the event.
So you need to put your code in the document.ready event. In jQuery this is handled by $(document).ready(handler) or $(handler).
Documentation at http://api.jquery.com/ready/
Fix to your code to make it work
$(function(){
$("button").click(function(){
$("div").show("slow");
});
});
demo at http://jsfiddle.net/gaby/vkrzt/

you need to give your elements "id"
so:
<button id="mybutton"></button>
and
<div id="mydiv"></div>
Then you'll use $("#mybutton") or $("#mydiv") to call these

How to load another div while facebox pop up is still open?

I just figured out how to use Facebox. I can open hidden divs in Facebox but how do I get it to dump the current div and load another one without closing the pop-up? I want the Facebox pop-up to load another div (while dumping the previous one) if the user clicks on a link inside the pop-up. I already tried something like this:
<script type="text/javascript">
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox({})
})
</script>
Div1
<div id="div1" style="display:none;">
Load the other div
</div>
<div id="div2" style="display:none;">
<p>Other div</p>
</div>
I somehow knew it wasn't this simple. I already tried searching the net for answers but no dice. Is this even possible? I'm a complete noob when it comes to Javascript so please bear with me.

I found the answer already. Apparently, you need to bind it to a mouseclick event and perform recursion. Here's how I did it:
<script type="text/javascript">
function find_hidden(){
$('.infinite')
.unbind('click')
.bind('click', function() {
var glink = $(this).attr('href');
jQuery.facebox({div: glink});
find_hidden();
});
}
</script>
I found the answer here.

From skimming through the source, I think you can just pass a string, like this:
$.facebox('<div>test</div>');

Try this:
jQuery("#facebox_overlay").click();jQuery.facebox({ div: '#your-new-div-id' });