Develop Reference

How to create a Back button which will land at the specific text/link clicked on to view an image

What I am trying to do:
I have mutiple anchor links within text, each of which refers to and connects to a specific image (on the same page).
After the user views that image, I would like them to hit a 'Back' button, which will bring them back to the text where they clicked on the link, to continue reading from where they left off.
(I have created the button in the html, with an 'id' of 'backButton').
Note: I am new to JS and jQuery, and perhaps my inability to find a plugin or explanation of how to do this has something to do with a failure to do a search with a clear and concise explanation in a search box.
(It seems to me that this would be a fairly commonly used feature)
This is where I currently stand with my attempts to use jquery for this:
$(function(){
$('a').click(function(){
$(this).attr('id', 'backToLink').addClass('que');
$('#backButton').attr('href', '#backToLink');
});
});
(I will try to explain my reason for why I did each step so that someone might tell me why it is wrong):
$('a').click(function(){
For each anchor, when it is clicked on, do this function,
$(this)
Refer to the anchor link that was clicked,
.attr('id', 'backLink')
Give this anchor the 'id' of backToLink,
.addClass('que');
Add the class of que, which is set in my CSS file to give padding-top so that the text will be visible below the fixed-position header,
$('#backButton').attr('href', '#backToLink');
Set the #backButton href to go back to the original link in the text, which should now be #backToLink.
Note: I suspect it will be necessary to turn off that id of #backToLink after it is used,
so that the next time it is used it will not conflict with the first.

I think the issue here is if you want to use anchor navigation then you dont need to use html button. Just simply use anchors. Here is a simple example of what you want to achieve. You can add in logic to make it dynamic according to your needs or keep it like this with adding the number of links manually. Hope this helps.
P.S. css classes are used just to add spacing to demonstrate the scrolling.
function scrollToAnchor(aid){
var aTag = $("a[name='"+ aid +"']");
$('html,body').animate({scrollTop: aTag.offset().top},'slow');
}
$("a").click(function() {
scrollToAnchor($(this).attr('href').slice(1));
});
#container{
height:2800px;
}
#block1{
background-color:black;
width:100px;
height:100px;
margin-top:1000px;
display:inline-block;
}
#block2{
background-color:black;
width:100px;
height:100px;
margin-top:600px;
display:inline-block;
}
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<div id="container">
Link to Block 1
<br><br>
Link to Block 2
<br>
<div id="block1"></div>
Back to Link 1
<br>
<div id="block2"></div>
Back to Link 2
</div>

Setting focus to a div after show

Im trying to get focus to hidden div that shows up after the .show() function is called on it. Iv tried a couple things including show().focus() or splitting it up into
$(".messageDisplayArea").show();
$("#message_display_area").focus();
the div shows up, but the page does not shift focus to it.
<script>
function showMessage(id, row) {
selectRow(row);
$(".messageDisplayArea").show();
$("#message_display_area").focus();
}
</script>
<div class="messageDisplayArea" id="message_display_area" style="display: none;">
<p> Test Test Test </p>
</div>
what am I missing? the page that this is in is decently large and the div appears at the bottom of the page. I want the browser to jump down and put the new div in focus

Replace this line:
$("#message_display_area").focus();
with this line:
window.location.hash = "message_display_area";

As far as you've given us code, what you have should work, as in this fiddle.
http://jsfiddle.net/SuERE/
http://jsfiddle.net/SuERE/1/
HTML:
<button type="button">Show and Focus</button>
<div style='height:700px'></div>
<input type="text" id="input" style='display:none;'/>
Javascript:
$("button").on("click",function(){
$("#input").show();
$("#input").focus();
});

Focus does't imply that your page is scrolled to the element and is actually often used for form controls to gain the cursor.
What you need is actually a scrollToElement() function that calculates the page offset of your newly created div and scrolls the page to that position, a good one is described here : jQuery scroll to element

Another thing you could do is add the tabindex attribute to the div element. This will enable the focus method to execute and find it and automatically move to it.
<div id="message-display-area" tabindex=1000>...</div>
JSFiddle to show it working.

jQuery append to element

What I want to do is, to create a button and this button is pressed, it will change the theme color on my jQuery mobile test site.
So say that my html parent div looks like this
<div id="firstPage" data-role="page">
I want it so that on click, that it appends data-theme="theme letter here"
to the div so that it ends up like this <div id="firstPage" data-role="page" data-theme="theme letter here">
OR
If I start the div like this <div id="firstPage" data-role="page" data-theme="theme letter here"> That on the buttons click, that it changes that data-theme attribute to another letter
so something for example, like this
$('#themeBtn').click(function(){
$('#firstPage').setAttribute("data-role","ANOTHER theme letter");
});
or
$('#themeBtn').click(function(){
$('#firstPage').append("data-role","a");
});
or something like this. How can I properly go about this?
Thanks in advanced.
EDIT* based on the responses, ive tried**
/////////////TESTING THEME BUTTON (check STACK OVERFLOW for answer)
$('#themeBtn').click(function(){
//$('#firstPage').jqmData("role","a");
//$('#firstPage').attr("data-theme","a");
//$('#firstPage').jqmData("theme","a");
$('#firstPage').data('theme','a');
});
To make sure that the button is firing off, i commented all those lines out and did a simple
$('#themeBtn').click(function(){
alert("foo");
});
and sure enough it fired the alert on button click so im positive its working.(the button i mean).
I added a jsFiddle so you can see it in action(of not working lol)
http://jsfiddle.net/somdow/yRmKd/1/
if you un-comment the alert, itll fire off, when you uncomment the other lines(based on responses) it doesn't update.

Just use: $('#firstPage').data('theme', 'ANOTHER theme letter');

You can do something like this to set the attribute:
$('#themeBtn').on('click', function() {
$('#firstPage').attr("data-theme", "new Theme");
});

You can use jqmData method:
$('#firstPage').jqmData('role', 'a');
docs
When working with jQuery Mobile, jqmData and jqmRemoveData should be
used in place of jQuery core's data and removeData methods (note that
this includes $.fn.data, $.fn.removeData, and the $.data,
$.removeData, and $.hasData utilities), as they automatically
incorporate getting and setting of namespaced data attributes (even if
no namespace is currently in use).

have you tried?
$('#themeBtn').click(function(){
$('#firstPage').attr("data-role","ANOTHER theme letter");
});
This should update the data-role

jquery remove() not removing

I have the following code that allows me to implement the shareThis functionality. What I am trying to do is when a the close button of the share this overlay is clicked I trying to remove the shareThis functionality that comes with the .share-span and then re-initialise it, however remove() does not seem to remove .span-share from the DOM.
<script type="text/javascript">
function getShareData() {
jQuery(".suit-gallery-btn").each(function(index){
jQuery(this).children().remove('span');
jQuery(this).append("<span class='share-span'></span>"); // ShareThis button will be inserted in this span, which we are appending to each <div class="suit-gallery-btn">
var suitLink = jQuery(this).find('a'); // the "click more information" link. you will need the href and title from this element.
console.log(suitLink);
stWidget.addEntry({
"service":"email",
"element": jQuery(this).find('.share-span')[0],
"title":suitLink.attr('title'),
"type":"large",
"text":suitLink.attr('title'),
"image": suitLink.attr('href'),
"summary":suitLink.attr('title'),
"onhover": false
});
});
}
jQuery(document).ready(function() {
getShareData();
jQuery("#closeX, #greyScreen, .stCloseNew2, .close, .close2").live("click", function(){
getShareData();
});
});
<div id="suit-gallery">
<img src="../images/galleries/business/DSC_0055_sm.jpg" alt="Stylish button 3 business suit, beige lightweight high twist cool wool Holland & Sherry" width="164" height="247" />
<div class="suit-gallery-btn">
Click for more information
</div>
</div>

change this line:
jQuery(this).children().remove('span');
to:
jQuery(this).children('span.share-span').remove();
See this in action here: http://jsfiddle.net/MarkSchultheiss/CUrXF/ where I slightly changed it to show the original span, then the removing when the function is called.

You've misunderstood the semantics of remove.
You call remove on the object that needs to be removed, not off the parent object you want to remove it from.
Something like:
jQuery('span.share-span', jQuery(this)).remove();

From what I can see, there is no span in the original code.
It looks like you are trying to remove() the span before you have appended it?

Link changing class of parent <div>, content of two <iframe> elements

Interesting (and rather complex) issue here...
What I have is a page with two iframes and a set of links at the top, each contained inside a div with an image background. What I want is for the contents of both iframes to change (to two separate html documents) when the link is clicked, and for the background image of the link's parent div to also change. I also, however, want the parent div to automatically change back to the original class when a different link is clicked (i.e. I have two classes, 'active' and 'waiting'. When a link is clicked (and its contents subsequently displayed in the iframes) I want it to switch to class 'active'. At all other times, though, (including after a different link might be clicked and become active) I want it to go back to using the 'waiting' class.)
Here's my current code / markup:
Javascript:
function changeFrame(link) {
$('#first iframe').src=link.href;
$('#second iframe').src= (Here would be the second link, not sure how to define that)
link.ParentNode.addclass("activebutton");
HTML:
<div class="waitingbutton">
<a href="yes.html" (Somewhere here would be the second link for the second iframe) class="waitingbutton" onclick="changeFrame(this);
return false;">Button Text</a>
</div>
(After this come four more divs, each identical bar Button Text and links)
As I suspect you can tell, I'm really just guessing here. Still not hugely familiar with Javascript, hoping someone can help me out.

You seem to be using jQuery.
Here's an ugly way to do it; but it works:
Button Text
And your JavaScript:
function changeFrame(link) {
$('#first iframe').attr("src", $(link).attr('href'));
$('#second iframe').attr("src", $(link).attr('secondary-href'));
return false;
}
Note that it'd be more idiomatic jQuery to do this without any onClick handlers, but simply initialise it all in your <head>/<script> from the beginning:
<script type="text/javascript">
$(function() {
$("a.iframe-link").click(function(event) {
$("#first iframe").attr("src", $(link).attr("href"));
$("#second iframe").attr("src", $(link).attr("secondary-href"));
// Whatever used to be the activebutton, make it 'waitingbutton', and remove
// the 'activebutton' class.
$(".activebutton").
addClass("waitingbutton").
removeClass("activebutton");
// Remove .waitingbutton from this, add .activebutton.
$(this).removeClass("waitingbutton").addClass("activebutton");
// Don't allow the link's default action (to follow the href in the normal
// way).
event.preventDefault();
});
});
</script>
Then later:
<a class="iframe-link waitingbutton" href="yes.html" second-href="whatever.html">Hello!</a>