Develop Reference

Jquery toggle through random div

I am new to jquery and am trying to code this for a class. I want to program a button that shows a random div paragraph that will disappear and be replaced by another when you click the button again.I am using three buttons to show things. Each button has four divs with the same class name and each has one paragraph in it. I tried using this code but it will show one paragraph and then add another under it. Another issue I'm having is that the button doesn't always work when I click it.The fourth button is for the user to input something that will be appended to each paragraph.
JQUERY
$(document).ready(function(){
$("#first").click(function(){
var random = Math.floor(Math.random()*5);
$(".firstin").eq(random).toggle();
});
$("#second").click(function() {
var random = Math.floor(Math.random()*5);
$(".secondin").eq(random).toggle();
});
$("#third").click(function(){
var random = Math.floor(Math.random()*5);
$(".thirdin").eq(random).toggle();
});
$("#button2").click(function(){
var place= $("#in").val();
if (place.length > 0){
$("div").append("<p> text" +place+ "</p>");
$("#in").val('');
}
});
});
HTML
<div class ="firstin">
<p>
text
<br>
text
</p>
</div>
</div><div class ="secondin">
<p>
text
<br>
text
</p>
</div><div class ="thirdin">
<p>
text
<br>
text
</p>
</div>
<button id = "first">Category1</button>
<button id = "second">category2</button>
<button id = "third">category3</button>
<input type = "text" id = "in" placeholder = "Text">
<button id = "button2">Text</button>
CSS
.first{ display:none;
}
</style>

Instead of this:
$("div").append("<p> text" +place+ "</p>");
append() adds whatever you have passed to it at the end of the element.
Use
$("div").html("<p> text" +place+ "</p>");
html() replaces the content inside

Horizontal text scrolling with JavaScript function?

I currently have a text box with some default text in it. When a button is clicked, the text is changed. Is it possible to have the new text scrolling? I've looked at marquee but it seems it doesn't have good rep, and I'm not sure how to incorporate it with JavaScript. Here's the coding I have:
HTML text box:
<tr>
<td colspan="4" class="message">
<p class="displaymessage">
<marquee behavior="scroll" direction="left">innterHTML Page</marquee>
</p>
</td>
</tr>
(this currently scrolls the default text)
HTML Button:
<input type="button" value="1" class="button" onClick="changeText1()">
Javascript:
function changeText1() {
var paragraph = document.getElementsByClassName('displaymessage');
var changeText = paragraph[0].innerHTML = "New text";
}
Any suggestions? Thanks

I don't understand what you want to do. But if you want to add new text and want to scroll it left as your previous text is scrolling i.e ** innterHTML Page** then you can use the following code in javascript:-
function changeText1() {
var paragraph = document.getElementsByClassName('displaymessage');
var changeText = paragraph[0].innerHTML = '<marquee behavior="scroll" direction="left">New text Here</marquee>';
}
It will work Fine. If you have any questions you can comment :)

JavaScript - change value of button when text is selected within a DIV (and combine it in one simple function)

I have two simple JavaScript functions: getSelectedText() and doSomethingWithSelectedText() that I found in a different example.
Now I've adjusted it more to my needs: http://jsfiddle.net/83T7U/.
The example currently works but not the way it should. Currently, when text is selected, there is an alert(), but instead the text on button should change from Reply to Quote.
So, instead:
alert("Text selected - it should change "Reply" to "Quote" text button ONLY if text was selected within one of these DIVs and text should change only in the div within which the text was selected.");
It should be like document.getElementsByTagName("button") or similar.
My goal is to:
Change the value of the button from Reply to Quote as soon as text from a particular div is selected. When the text is de-selected, then button should change back to Reply.
Make sure the Reply<>Quote change applies only when text is selected within one of these DIVS (and not in other parts of the page).
Minimize the functions - I think instead of the two functions one is enough because I don't want to know the value of selection - I just want to check if there is something (ie. at least one character) selected/highlighted.
The JavaScript should work correctly with all the major browsers.
Please note I cannot use jQuery here. Thank you!
HTML:
<div id="first" style="background:yellow">DIV1: First some test text for you to select
<br>
<button>Reply</button>
</div>
<br>
<div id="second" style="background:green">DIV2: Second some test text for you to select
<br>
<button>Reply</button>
</div>
<br>
<div id="third" style="background:lightblue">DIV3: Third some test text for you to select
<br>
<button>Reply</button>
</div>
<br>
<i>(there could be more similar divs on a page)</i>
JavaScript:
function getSelectedText() {
var text = "";
if (typeof window.getSelection != "undefined") {
text = window.getSelection().toString();
} else if (typeof document.selection != "undefined" && document.selection.type == "Text") {
text = document.selection.createRange().text;
}
return text;
}
function doSomethingWithSelectedText() {
var selectedText = getSelectedText();
if (selectedText) {
alert("Text selected - it should change Reply to Quote text button ONLY if text was selected within one of these DIVs and text should change only in the div within which the text was selected.");
}
}
document.onmouseup = doSomethingWithSelectedText;
document.onkeyup = doSomethingWithSelectedText;

Look at this fiddle
with following html (yours with additional class for divs):
<div id="first" class="specialDiv" style="background:yellow">DIV1: First some test text for you to select
<br>
<button>Reply</button>
</div>
<br>
<div id="second" class="specialDiv" style="background:green">DIV2: Second some test text for you to select
<br>
<button>Reply</button>
</div>
<br>
<div id="third" class="specialDiv" style="background:lightblue">DIV3: Third some test text for you to select
<br>
<button>Reply</button>
</div>
<br>
<i>(there could be more similar divs on a page)</i>
and the javascript:
function doSomethingWithSelectedText() {
//relabel quoteButton to standard-label
var buttons = document.getElementsByClassName('quoteButton');
if(buttons.length){
var button = buttons[0];
button.innerHTML = 'Reply';
var classArr = button.className.split(' ');
classArr.splice(classArr.indexOf('quoteButton'), 1);
button.className = classArr.join(' ');
}
//check if new quoteButton should be labeled
if (window.getSelection && window.getSelection().toString()) {
if(window.getSelection().anchorNode.parentNode && window.getSelection().anchorNode.parentNode.className && window.getSelection().anchorNode.parentNode.className.split(' ').indexOf('specialDiv') > -1){
var button = window.getSelection().anchorNode.parentNode.getElementsByTagName('button')[0];
button.innerHTML = 'Quote';
button.className += ' quoteButton';
}
}
}
document.onmouseup = doSomethingWithSelectedText;
document.onkeyup = doSomethingWithSelectedText;
In this article is mentioned to get the element that is selected by window.getSelection().anchorNode.parentNode. So I simply let check if the selected element has the newly added class 'specialDiv'. If it has search for the button and relabel it. Additonaly add a class to the button to be able to find relabeled buttons again. At any selection let the button be reset to the standard label, before maybe relabeling other buttons.
EDIT :
It's a little sad but there's one way the solution above wont work: Selecting text and then clicking into it. Thats the only way that at the timepoint of mouseup-event the old selectedText is still set (and will be unset immediatly after mouseup-event).
To fix this use onclick instead of onmouseup
Look at this fiddle... it uses onclick instead of of keyup since click will be triggered at a timepoint at that the new selection has been set in any case

Try following example. I hope it will help you. To try following example just copy following code and pest it in blank notepad and save it with .html extension and run it in any browser.
<html>
<head>
<style>
.head {
border:1px solid #666;
background-color:#f0f0f0;
padding:3px;
cursor:pointer;
}
.content {
border:1px solid #666;
background-color:#fff;
height:100px;
padding:3px;
}
</style>
<script type="text/javascript">
function getSelectedText(i) {
var pi = document.getElementById("pi").value;
var str = window.getSelection();
if(str!="") {
if(pi=="") {
document.getElementById("btn"+i).value="Quote";
}
else {
document.getElementById("btn"+i).value="Quote";
document.getElementById("btn"+pi).value="Reply";
}
}
else {
document.getElementById("btn"+i).value="Reply";
document.getElementById("btn"+pi).value="Reply";
}
document.getElementById("pi").value = i;
}
</script>
</head>
<body>
<div>
<div id="head1" class="head">Head 1</div>
<div id="content1" class="content" onMouseUp="getSelectedText('1')">Content 1 Div. Select text in this div.</div>
<input type="button" id="btn1" value="Reply" />
<div id="content2" class="content" onMouseUp="getSelectedText('2')">Content 2 Div. Select text in this div.</div>
<input type="button" id="btn2" value="Reply" />
</div>
<input type="hidden" id="pi" name="pi" value="" />
</body>
</html>

Flip text input fields between elements, including user-created value attribute

Hi I'm trying to flip the input fields between two div elements. However, if a user enters text into the fields, the text disappears after the flip happens. Is there a way to make sure this value attribute is flipped too? Thanks.
Javascript:
function Flip ()
{
var oldslave = $('div.slave').html();
var oldmaster = $('div.master').html();
$('div.slave').html(oldmaster);
$('div.master').html(oldslave);
}
HTML:
<div class="master">
<input type="text" name="master" id="master" size="42">
</div>
<input type="button" id="button1" onclick="Flip()" value="Flip">
<div class="slave">
<input type="text" name="slave" id="slave" size="42" class="slavefield">
</div>

You can use clone method like this:
function Flip() {
var oldslave = $('div.slave input').clone();
var oldmaster = $('div.master input').clone();
$('div.slave').html(oldmaster);
$('div.master').html(oldslave);
}
http://jsfiddle.net/MaESg/
There is also another variant to achieve the same without using clone:
function Flip() {
$('.master').find('input').appendTo('.slave').prev().appendTo('.master');
}
This one is preferable because appending (moving) nodes much more effective than recreating.
http://jsfiddle.net/MaESg/1/

Get the value of an input field within multiple divs when clicking a submit button

How would I go about correctly writing this so that the var input is the value of the content input field within the .overlay div when the submit button is pressed? Keep in mind that there's several .overlay divs, so it needs to be that separate div.
I know how to make it work assuming only 1 div exists, but this isn't the case. My jQuery is as follows:
$('.button').click(function() {
var input = $(this).parents('.overlay')$(input[name=content]).val();
});
My HTML structure (assume this div is duplicated several times on the page):
<div class="overlay">
<input name="content" value="value">
<input type="submit" class="button" value="submit">
</div>

$('.button').click(function() {
var input = $(this).parent().find("input[name='content']").val();
});
should work.
Or, if you can rely on that exact structure:
$('.button').click(function() {
var input = $(this).prev().val();
});

like this
$('.button').click(function() {
var input_val = $(this).parent().find('input:first').val();
alert(input_val)
});
here is ia working demo