Develop Reference

contentEditable attr set to true makes links in content unclickable

I have a div with output content that sometimes outputs links.
But when this output div has the contentEditable attribute set to true if makes the links unclickable.
What's odd is you can still hover over it and before trying to click it it still looks and behaves like a link. (Blue in color, underlined, hover changes the color of blue, etc.)
But when you go to click it it doesn't take you to the link. I can right click and say open or open in a new window and it works fine.
Is there a way to make it clickable again so the user doesn't have to right click it all the time?
<div contentEditable='true'>
Some content with link: <a href='https://google.com' target='_blank'>Google</a>
</div>
Here is a JSFiddle example: https://jsfiddle.net/ce13w610/
I still need the content to remain editable, but it would be nice to have the links working intuitively again.
Edit: put additional solution as an answer, not an edit. :)

you have to make the link uneditable:
<div class='content-output' contentEditable='true'>
My content and link here: <a contentEditable='false' href='https://www.youtube.com/watch?v=dQw4w9WgXcQ' target='_blank'>Some video</a>
</div>
https://jsfiddle.net/ce13w610/1/

Here's an another one may be overkill though:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="content" contentEditable="true">
Click Me!
</div>
<script>
$('#content a').mouseenter(function() {
console.log("Works");
$('#content').attr("contentEditable", "false");
});
$('#content a').mouseleave(function() {
$('#content').attr("contentEditable", "true");
});
</script>
https://jsfiddle.net/9dk4sgkk/

Additional solution:
I went and used jQuery to make all tags in the output div to have the attribute contentEditable = false.
$("#content-output a[href]").attr('contentEditable', 'false');

Removing DIV Element before adding it

I want to display an transparent DIV that contains some route information. This DIV should get displayed whenever the user clicks a "show route button". The DIV is adding just fine, butwhen the user clicks this button again (on another marker) another DIV shows up.
This is my code so far which works, up untill the removal. I feel it has something to do with a) the selector not matching, but when I inspect the DOM in Firebug, there clearly is a DIV with that id
function displayRouteInfo(duration, distance){
removeInfoWindow(function(){
// TODO: remove overlay again
routeInfoWindow = jQuery('<div id="routeInfoWindow" style="color:white;"> <p><span style="margin:10px;"> Routeinformation <span style="margin:10px;"> Dauer: '
+duration+'<span style="margin:10px;"> Entfernung: '+distance+'</p> </span></div>');
routeInfoWindow.appendTo(document.body);
}
);
}
function removeInfoWindow(callback){
$('routeInfoWindow').remove();
callback.call();
}
Thanks for any input and advice to solve this.

Your selector is not correct, you have missed the # for ID selector.
$('#routeInfoWindow').remove();

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) Find and Replace specific text

I've got the following HTML code, which essentially pertains to a post where I announce something in just a few lines, end it with "[...]", and add a "Read more" link-button at the bottom. When this button is clicked, additional content that's hidden will fadeIn as the button disappears, leaving visible the introductory text and the one that was hidden -- simple enough. Now, I've already written the code for this, but the complication comes when I try to also remove that "[...]" (from the post where the click button happened) that I included in the sneak peek. Here's the HTML:
<div class="entry">
<p>Welcome. Talk about something briefly and click below for more. [...]</p>
<div class="slide-content">
<p>Hidden content.</p>
</div>
<span id="revealer" class="button">Read more</span>
</div>
Classes "entry" and "button" belong to my CSS file, while "slide-content" belongs to my .js file to control the fadeIn effect. The ID "revealer" also belongs to the .js file for the same purpose. This HTML is wrapped in a div tag with a class of "box". This is the format that each post follows, exactly the same format with the same HTML elements -- every time an announcement needs to be made, it's just a matter of putting the content between the paragraph tags and publish. Here is where my problem comes in, since I can't find a way to remove the "[...]" only in the post where the button has been clicked. I tried doing the following but it resulted in the deletion of all "[...]" throughout multiple posts:
$('.entry p').each(function() {
var textReplace = $(this).text();
$(this).text(textReplace.replace('[...]', ''));
});
Summary:
I need to remove the "[...]" text only from the post where the user has clicked on (the "Read more" button). The idea is to have this removed while at the same time the hidden content fades in.
I've been able to accomplish the above but for all instances of "[...]". I need to sophisticate my selection by modifying my jQuery code or the HTML.
Option 3 is to get rid of this "[...]", but I would like to leave it there to let the user know she has more content to read, and I would like to have that "Read more" button in all posts for consistency.
~Thanks in advance!

First, you mention you have multiple of these. In that case, this:
<span id="revealer" class="button">Read more</span>
will not work. id attribute has to be unique per document, i.e. you can have at most one element with the specific id value.
If you make your HTML (for each of the blocks) like this:
<div class="entry">
<p>Welcome. Talk about something briefly and click below for more. [...]</p>
<div class="slide-content">
<p>Hidden content.</p>
</div>
<span class="revealer button">Read more</span>
</div>
and your JS like this:
function replace(fromp) {
var textReplace = fromp.text();
fromp.text(textReplace.replace('[...]', ''));
}
$('.revealer').click(function() {
var fromp = $(this).siblings().eq(0);
replace(fromp);
});
it will work properly. Working example:
http://jsfiddle.net/G4t7Q/
Hope this helps.

When you run your page initialization script, you could use jquery to select all of the posts and all of the remove buttons and link them up via their click event. I've created a JSFiddle example, but here's the jist of it:
var removers = $(".remover")
var posts = $(".post")
for (var i = 0; i < removers.length; i++) {
$(removers[i]).click( { post: posts[i] },
function(event) {
var textReplace = $(event.data.post).text()
$(event.data.post).text(textReplace.replace('[...]', ''))
}
)
}​
This is a simplified example; it assumes the posts and buttons are sorted in the markup.

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>