Develop Reference

jQuery swap and hide div content based on click

Firstly there are 101 questions similar to this one, however still unable to answer this question.
I am creating a similar interface to youtube, with video thumbnails on the right side and a pain playing pane.
My loop for displaying thumbnail images is as follows:
<?php function getVimeoThumb($id) {
$data = file_get_contents("http://vimeo.com/api/v2/video/$id.json");
$data = json_decode($data);
return $data[0]->thumbnail_medium;
} ?>
<div id="thumb">
<img src="<?php echo getVimeoThumb($id);?>" alt="">
<h4><?php the_sub_field('child_title'); ?></h4>
</div>
My main feature video is displayed as follows:
<div id="feature">
<h4 id="mainTitle"><?php the_sub_field('video_title'); ?></h4>
<iframe src="https://player.vimeo.com/video/<?php the_sub_field('video_id')?>" width="500" height="282"></iframe>
</div> <!-- end of feature Container -->
The initial load will be conducted by PHP, however the DOM manipulation should be achieved by javascript.
Questions
How can I swap just the ID and text between these two divs.
I would also like to hide the thumbnail that has been clicked as it is shown in the feature frame.
Many thanks

On your thumb, you could put the id on a rel on your div so you can retrieve it easily via jQuery:
`<div id="thumb" rel="your_id">...</div>`
And a $('#thumb').attr('rel') to get it.
Then you can create a JavaScript function that gives you the full URL from the ID and update your iframe src via $('#feature iframe').attr('src','your_url')

How to change the display property in a css class using js when user clicks a button

I'm building a webapp that I plan on converting to a smartphone app using Phone Gap Build. I've never done this before so may not be describing my problem clearly but here goes.
I started using the jquery mobile sample in Dreamweaver, this has multiple pages in a single html file. What I'd like to do is have a series of English phrases on each page, each English phrase will be followed by the formal Spanish translation and then the informal Spanish translation. At the top of the page the user will have three buttons saying "Formal", "Informal" and "Formal & Informal". The user will always see the English phrases followed by the Formal, Informal or Formal & Informal Spanish depending on which buttons they pressed/ tapped.
The home page can be seen here http://www.pslt.biz/mobileApp/LE4/index3.html then click "Age, Weight & Height" and you'll see that clicking the Formal/ Informal buttons has no effect on the Spanish underneath the first phrase "How old are you".
If it helps here's the Formal button which should set the CSS class ".formal" to Display:Block and the ".informal" class to Display:None
Display Formal
The CSS classes are defined externally as follows:
.formal { display:block;
}
.informal {display:block;
}
And the Spanish phrases are defined in divs as follows:
<div class="formal"> <!-- Start Formal -->
<div style="float:left">
<a href="#" onclick="playSound('Sounds/testaycaramba.mp3');">
<img src="images/audio-75.gif" alt="" width="25" height="25" /></a>
</div>
<div style="float:left">
Cuántos años tiene?
</div>
</div> <!-- End Formal -->
<div class="informal"> <!-- Start informal -->
<div style="clear:left">
<div style="float:left">
<a href="#" onclick="playSound('Sounds/testaycaramba.mp3');">
<img src="images/audio-75.gif" alt="" width="25" height="25" /></a>
</div>
<div>
Cuántos años tienes?
</div>
</div>
</div> <!-- End informal -->
If anyone could point me in the right direction I'd really appreciate it, I thought it would be simple to do but I must be missing something blindingly obvious.

You can use jQuery:
<a href="#"
onclick="$('.formal').css('display', 'block'); $('.informal').css('display', 'none');">Display Formal</a>
The problem is your divs have classes "formal" and "informal", not ids and you are selecting by ID.
Another option:
Display Formal

Use getElementsByClassName() instead of getElementById().
You have selector by class name, not by id Or replace class="informal" and class="formal" with id="informa1" etc.

The solution from MiFeet worked perfectly. I used
Display Formal
For some reason I was unable to show that as the answer, I received an error when I clicked on the checkbox, I hope this helps someone else.
Tony Babb

JS code:
button.onclick=function(){
element=document.getElementsByClassName("formal")[0];
element.className="informal";
}

if you have class="informal" then replace it with class="informal1" and try this
Display Formal
function change(){
$('#remove').removeClass('informal');
$("#remove").addClass("informal1");
}

HTML5/jQuery - Page Scroll to Input Value

I have a image document reader and in the header is an input[number] field. The idea is that the user can type which page (image) they'd like to see and the page will smoothly scroll down to the appropriate div.
Here's my code:
<div class="score-header">
<section class="nav">
<input type="number" id="page" />
</section>
</div>
The document's pages are displayed in their own divs, like so:
<div class="page-one">
<img src="page1.jpg" alt="" />
</div>
<div class="page-two">
<img src="page1.jpg" alt="" />
</div>
Is there a way that when the user inserts the number and clicks enter or a button, that the webpage will scroll down the the document's corresponding page.
N.B. The header sticks to the top of the webpage at all times via jQuery

something like this?
$(document).ready(function(){
$('#page').change(function() {
$("page-div").eq($("#page").val()-1);
//this selector takes the input value and subtracts 1 because the count starts in 0 so it will select the corect div ....
//i do not know how to scroll down.... i tryed this but did not work.... you need scroll to the possition of the selected div
$("#page-one").animate({scrollTop: $("#page-one").offset().top});
});
});
​
http://jsfiddle.net/ukjvS/13/
http://jsfiddle.net/ukjvS/13/show
(read the comments)
If possible answer my question :)
HTML & CSS blogger side menu?

Javascript on Multiple DIVs

I am using a Wordpress Theme (Incipiens) that has a show/hide Javascript to show a map on the contact page http://demo.themedev.me/wordpress_themes/incipiens/contact-us/
I want to use this function on a page multiple times to show/hide galleries.
<div class="map">
<div class="map_top">
<hr class="toolbox toolbox1">
</div>
<hr class="vertical_sep0">
<a class="show_map" href="javascript:void(0)"></a>
<div class="map_container"><div class="thismap"><iframe>........</iframe></div>
</div>
I have this working but the call to the js opens all divs. I therefore put a unique div id round each gallery and slightly changed the javscript...
<div class="map">
<div class="map_top">
<hr class="toolbox toolbox1">
</div>
<hr class="vertical_sep0">
<div id="silestone">
<div class="map_container">
[show_gallery width="124" height="124" galleryid="527"][/show_gallery]
</div>
</div>
</div>
It works but very oddly, sometimes the right one opens, sometimes the wrong one...not sure what i'm doing wrong, should I just have one javascript call that contains the ID's to all divs? If so how do I do this?

Since you have not shown the actual script you use for toggling, I assume you mean something like this (taken from the page) -
function (){
$(this).toggleClass('hide_map');
$('.map_container').slideToggle(400);
}
I would change that to -
function unhide(id){
$(this).toggleClass('hide_map');
$('#' + id).find('.map_container').slideToggle(400);
}
Does that work?

problem with using javascript to load Quicktime into div from link

I have a left <div> (id = 'videopane') and a right <div> containing a clickable list of items.
I am trying program this: You click on one of the items in the right <div>, it loads the Quicktime movie into the left <div>.
I am using the JQuery media plugin to generate all of the embed code. and it works if I simply input the code <a class="media" href="anthony-mandler/music-video/Rihanna_Only_Girl_Web.mov"></a> into the left <div>.
It does not work when I try to apply this code to one of the items in the list in the right <div>, although the code seems fine to me:
<a href="#" onclick="document.getElementById('videopane').innerHTML='<a class="media" href="anthony-mandler/music-video/Rihanna_Only_Girl_Web.mov"></a>'">
Any insight into what I am doing wrong?

The jQuery plugin you are using is taking the movie source from the href of the link. So you would do it link this.
<a title="movie title" class="media" href="anthony-mandler/music-video/Rihanna_Only_Girl_Web.mov" />
This will generate when clicked.
<div class="media">
<object codebase="http://www.apple.com/qtactivex/qtplugin.cab"
classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B">
<param name="src" value="anthony-mandler/music-video/Rihanna_Only_Girl_Web.mov">
<embed src="sample.mov"
pluginspage="http://www.apple.com/quicktime/download/"></embed>
</object>
<div>My Quicktime Movie</div>
</div>
Make sure to add this after you include jQuery and the plugin.
$('.media').media();

html that is generated on the fly will not work, right away,
make sure that when you add the anchor tag to run the plug in function:
<a href="#" id='rihana' >Rihana</a>
Javascript
var movie = document.getElementById('rihana');
movie.onclick = function () {
document.getElementById('videopane').innerHTML= '<a title="movie title" class="media" href="anthony-mandler/music-video/Rihanna_Only_Girl_Web.mov" />'
// then run the plugin function.
$('.media').media();