I'm trying to create my own jsfiddle funcionality.
Three textboxes with some codes, but have no idea how to make (and remake) files with their contents.
Or, is there another way to play the code, without creating files ?
$('.button').on('click', function(){
// create demo.css, demo.html and demo.js
// open a new tab and play all the code
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea class='txthtml'>
<div class='parent'>
<div class='title'>lorem 01</div>
<div class='title'>lorem 02</div>
<div class='title'>lorem 03</div>
</div>
</textarea>
<textarea class='txtcss'>
.parent{
background:gold;
}
.title{
margin:5px 0;
backgorund:lightgreen;
}
</textarea>
<textarea class='txtjs'>
$('.title').on('click', function(){
console.log('clicked');
});
</textarea>
<br><br>
<button>CLICK</button>
create iframe and write the content to the iframe. jsFiddle Demo, not working here because not allowed to aceess iframe.
$('button').on('click', function() {
var addJquery = $('#addJqury').is(':checked')
var html = $('.txthtml').val(),
css = $('.txtcss').val(),
js = $('.txtjs').val(),
output = '<style>' + css + '</style>' +
html +
'<script>' + js + '<\/script>';
if (addJquery)
output = '<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"><\/script>' + output;
var iframe = window.results.document;
iframe.write(output);
iframe.close();
});
textarea{min-height:80px;min-width:200px}
iframe{width:100%;height:100%;display:block}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<textarea class="txthtml">
<div class='parent'>
<div class='title'>lorem 01</div>
<div class='title'>lorem 02</div>
<div class='title'>lorem 03</div>
</div>
</textarea>
<textarea class='txtcss'>
.parent{
background:gold;
}
.title{
margin:5px 0;
backgorund:lightgreen;
}
</textarea>
<textarea class='txtjs'>
$('.title').on('click', function(){
console.log('clicked: ' + $(this).html());
});
</textarea><br>
<input type="checkbox" id="addJqury" checked> Add Jquery?
<br><br>
<button>CLICK</button>
<hr>Results:
<hr>
<iframe name="results" src="about:blank"></iframe>
Below, you can find a very simple example that you want.
For render html into your view, you can juste get the value from your textarea and paste in into your content that when you want to do
const code = document.querySelector('.code');
const btn = document.querySelector('.btn');
const render = document.querySelector('.render');
btn.addEventListener('click', () => {
const getHTML = code.value;
render.innerHTML = getHTML;
})
.code {
width: 200px;
height: 200px;
}
<textarea class="code"></textarea>
<button class="btn">go</button>
<div class="render"></div>
Related
I have a pagaraph (p) appended to a div, that shows <textarea> value, and it works well.
The <textarea> supposed to be a part of a page that allows the users to add new lines to the text content, exactly like how we can type <br> for a new line in textarea.
But since they don't know how to do that I'm trying to make it easy for them by:
(typing plus sign twice ++ OR pressing Enter on the keyboard)
Both should add a <br> tag automatically while typing (onkeyup)...
var textarea = document.getElementById('textarea');
var textareaPreview = document.querySelector('.textarea-preview');
var currentText;
textarea.onkeyup = function(){
currentText = textarea.value;
var previewAsString = "<p class='p-preview'>" + currentText + "</p>"
textareaPreview.innerHTML = previewAsString;
};
textarea {
width: 300px;
height: 80px;
resize: vertical;
}
<div class="block">
<textarea id="textarea" placeholder="Type here.."></textarea>
</div>
<div class="block">
<div class="textarea-preview"></div>
</div>
It sounds like all you need is to replace ++ and newlines with <br>:
var textarea = document.getElementById('textarea');
var textareaPreview = document.querySelector('.textarea-preview');
var currentText;
textarea.onkeyup = function(){
currentText = textarea.value;
var previewAsString = "<p class='p-preview'>" + currentText.replace(/\+\+|\n/g, '<br>') + "</p>"
textareaPreview.innerHTML = previewAsString;
};
textarea {
width: 300px;
height: 80px;
resize: vertical;
}
<div class="block">
<textarea id="textarea" placeholder="Type here.."></textarea>
</div>
<div class="block">
<div class="textarea-preview"></div>
</div>
I need to make it so that the previous result is displayed when the user presses a num after pressing equals... how do I do it? And just fyi I am just helping my friend make the code for his calculator clean - his was very messy - if you want I can show you his code as well.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class='container'>
<div class='answer'>
<p class='returnAnswer'>Answer Will Come Here</p>
</div>
<div class='buttonDiv'>
<div class='button'>0</div>
<div class='button'>1</div>
<div class='button'>2</div>
<div class='button'>3</div>
<div class='button'>4</div>
<div class='button'>5</div>
<div class='button'>6</div>
<div class='button'>7</div>
<div class='button'>8</div>
<div class='button'>9</div>
<div class='equals'>=</div>
<div class='button'>c</div>
<div class='button'>+</div>
<div class='button'>-</div>
<div class='button'>x</div>
<div class='button'>÷</div>
<div class='button'>.</div>
<div class='button'>%</div>
</div>
</div>
</body>
</html>
<script type="application/javascript" src="/share.js"></script>
<script>
var eq = "";
var ans = eval(eq);
$('.button').click(function() {
eq += $(this).text();
$('.returnAnswer').text(eq);
});
$('.equals').click(function() {
$('.returnAnswer').text(ans);
});
</script>
This was a fun thing to do.... Here is what I have done to your code
Added some styles to the button (not important, but makes it easier to click)
Added a class named num to each number button, that will be used to reset the display if any button is clicked following '=' button.
Removed 'equals' class from '=' button and added it as an ID
Added code to clear the display when 'C' is clicked
Changed buttons 'x' to ' * ' and '÷' to '/' as otherwise eval function will not work
Changed back to 'x' and '÷', and added 2 lines inside equals.clicked to replace these with correct operators
Check the Code snippet
var eq = "";
var ans = eval(eq);
var equalsCliked = false;
$('.button').not("#equals, #cbutton").click(function () {
if ($(this).hasClass('num') && equalsCliked)
eq = "";
eq += $(this).text();
$('.returnAnswer').text(eq);
equalsCliked = false;
});
$('#equals').click(function () {
equalsCliked = true;
eq = eq.split("÷").join("/");
eq = eq.split("x").join("*");
ans = eval(eq);
eq = ans;
$('.returnAnswer').text(ans);
});
$('#cbutton').click(function () {
equalsCliked = false;
eq = "";
ans = eval(eq);
//eq = ans;
$('.returnAnswer').text("");
});
.button {
border: 1px solid gray;
padding: 8px;
margin: 3px 3px;
float: left;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class='container'>
<div class='answer'>
<p class='returnAnswer' style="width:330px; padding: 10px; min-height:20px; border: 1px solid gray; border-radius: 2px;">Answer Will Come Here</p>
</div>
<div class='buttonDiv' style="background-color:yellow; float:left; width: 330px;">
<div class='button num'>0</div>
<div class='button num'>1</div>
<div class='button num'>2</div>
<div class='button num'>3</div>
<div class='button num'>4</div>
<div class='button num'>5</div>
<div class='button num'>6</div>
<div class='button num'>7</div>
<div class='button num'>8</div>
<div class='button num'>9</div>
<div id="equals" class='button'>=</div>
<div id="cbutton" class='button'>C</div>
<div class='button'>+</div>
<div class='button'>-</div>
<div class='button'>x</div>
<div class='button'>÷</div>
<div class='button'>.</div>
<div class='button'>%</div>
</div>
</div>
</body>
Let's assume that I have this structure
<div class="firstDiv">
<div class="insideDiv"></div>
</div>
<div class="secondDiv"></div>
<div class="thirdDiv"></div>
How can I move the .insideDiv from the .firstDiv to the .thirdDiv but going through the .secondDiv ?
I need just a hint or an idea. Thank you!
In vanilla JS, it works like this:
var moveIt = function() {
var outerDiv = document.getElementsByClassName('insideDiv')[0].parentElement;
var innerDiv = document.getElementsByClassName('insideDiv')[0];
if (outerDiv.nextElementSibling != null) {
outerDiv.nextElementSibling.appendChild(outerDiv.removeChild(innerDiv));
}
}
.firstDiv {
background-color: yellow
}
.secondDiv {
background-color: lightblue
}
.thirdDiv {
background-color: lightpink
}
<div class="container">
<div class="firstDiv">first
<div class="insideDiv">inside div</div>
</div>
<div class="secondDiv">second</div>
<div class="thirdDiv">third</div>
</div>
<button type="button" onclick="moveIt()">Move it!</button>
OPTIONAL: wrap-around in else statement below, this needs a scope to operate in. (set by div-element of class 'container'), to be added to above if statement.
else { outerDiv.parentElement.firstElementChild.appendChild(outerDiv.removeChild(innerDiv));
}
You can see a working example here: codepen: move child-element to nextSibling
If you don't mind using jquery:
<div class="firstDiv">
<div class="insideDiv">InsideBaseball</div>
</div>
<div class="secondDiv">SecondBase</div>
<div class="thirdDiv">ThirdBase</div>
<button id="SwapButton"> Swap! </button>
<script>
document.getElementById("SwapButton").onclick = function () {
var content = $('.insideDiv').html();
var content2 = $('.thirdDiv').html();
$('.thirdDiv').replaceWith(content);
$('.insideDiv').replaceWith(content2);
};
</script>
I am trying to display an image using jquery.I have a function which has ID & PATH as a parameter.The ID indicates the section(Each section is a html page which gets loaded on user action),Also there is a text area where I am displaying the text file content.Now in a same way i want to display image ,I tried different methods but it didn't work out.Below is my Java Script file & HTML file
HTML File:
<html>
<body>
<div id="tab1" name="tab" style="cursor: pointer; cursor: hand; width:90px;float: left;height: 22px ; margin-top: 0px;
background-color:lightgrey;font-size: 13px;text-align: center;border-bottom: none;display: table-cell;" onClick="tabs(1)">
<div style="margin-top: 3px" >TAB1</div>
</div>
<div id="tab2" name="tab" style="cursor: pointer; cursor: hand; width:90px;background-color:lightgrey;float: left;height: 20px; margin-top: 2px; font-size: 12px;text-align: center" onClick="tabs(2)">
<div style="margin-top: 3px">TAB2</div>
</div>
<div style="width:auto;height: 22px; border-bottom-color: white;border-bottom-style: solid;border-bottom-width: 1px"></div>
<div name="tab_content" style="display: block; margin-left:20px;" >
<br></br>
<br></br>
<div id="legendReport">
Notes 1:
</div>
<textarea name="textArea1" rows="4" value="" cols="50"></textarea>
<br></br>
<br></br>
<div id="legendRough">
Notes 2:
</div>
<textarea id="roughNotes_textArea" name="textArea2" rows="4" cols="50"></textarea>
</div>
<div name="tab_content" class="tab_content" style="display: none;margin-left:20px;">
<br></br>
<br></br>
<textarea name="textArea3" rows="4" cols="50" ></textarea>
<br></br>
<br></br>
<textarea name="textArea4" rows="4" cols="50"></textarea>
<br></br>
<br></br>
<br></br>
<br></br>
<!-- Schematic of selected analysis Point -->
<img id="myImage" src="" style="width:304px;height:228px;"></img>
</div>
</body>
</html>
JavaScript File:
//Displays the file content in text area
function displayTextfileData(textFilePath,ID){
readTextFile(textFilePath);
alert(textFileContent);
var sectionDIV = "#section" + ID;
alert(sectionDIV)
$(sectionDIV).find("[name=textArea3]").val(textFileContent);
$(sectionDIV).find("[name=textArea4]").val(textFileContent);
}
//This function display the image
function displayImage(imageFilePath,ID){
var sectionDIV = "#section" + ID;
alert("displayImageforDropdown():"+imageFilePath);
//$(sectionDIV).find("myImage").src = imageFilePath;
$(sectionDIV).getElementById("myImage").src = imageFilePath;
//document.getElementById("myImage").src = imageFilePath
//alert("displayImageforDropdown(): Assigned result: "+(document.getElementByName("displayImage").src = imageFilePath));
}
Display text file content is working fine,But i want the same on Image
Replace
$(sectionDIV).getElementById("myImage").src = imageFilePath;
with
$(sectionDIV).find("img#myImage").attr("src", imageFilePath);;
Try the following
$(sectionDIV)[0].getElementById("myImage").attr("src", imageFilePath);
or
$(sectionDIV).find("#myImage").attr("src", imageFilePath);
Try
$(sectionDIV).find("#myImage").attr("src", imageFilePath);
Or if you want to use getElementById use $(sectionDIV)[0] to get the HTML DOM Object from the jQuery Object. Something like,
$(sectionDIV)[0].getElementById("myImage").src = imageFilePath;
You can set the 'src' attribute as following:
$(sectionDIV).find("#myImage").prop("src", imageFilePath);
function displayImage(imageFilePath, ID) {
var sectionDIV = "#section" + ID;
//Change this line.....
$("#myImage",$(sectionDIV))[0].src = imageFilePath;
}
I am right now trying to hide six divs while showing only one of the divs. I've tried JavaScript and in jQuery, but nothing seems to work! Click here to get to the website.
I would like to know if it has to do with my CSS, jQuery, or the HTML. Or is there an easier way of doing this?
HTML:
<div id="resourceLinks">
General Information<br />
Automatic 401(k)<br />
Consumer Fraud<br />
Direct Deposit<br />
Diversity<br />
Women<br />
Young Adults (20s - 40s)
</div>
<div id="resource1></div>
<div id="resource2></div>
<div id="resource3></div>
<div id="resource4></div>
<div id="resource5></div>
<div id="resource6></div>
<div id="resource7></div>
CSS:
#resource1, #resource2, #resource3, #resource4, #resource5, #resource6, #resource7 {
position: absolute;
margin-left: 400px;
margin-top: -10px;
width: 300px;
padding-bottom: 120px;
}
#resourceLinks {
position: fixed;
margin-left: -450px;
z-index: 3;
margin-top: 180px;
font-size: 16px;
}
jQuery:
$(document).ready(function(){
$('#resourceLinks a').click(function (selected) {
var getName = $(this).attr("id");
var projectImages = $(this).attr("name");
$(function() {
$(".resource").hide().removeClass("current");
$("#" + projectImages ).show("normal").addClass("current");
});
});
});
How about something like this one
<div id="resourceLinks">
General Information<br />
Automatic 401(k)<br />
Consumer Fraud<br />
Direct Deposit<br />
Diversity<br />
Women<br />
Young Adults (20s - 40s)
</div>
<div class="resource" id="resource1_info"></div>
<div class="resource" id="resource2_info"></div>
<div class="resource" id="resource3_info"></div>
<div class="resource" id="resource4_info"></div>
<div class="resource" id="resource5_info"></div>
<div class="resource" id="resource6_info"></div>
<div class="resource" id="resource7_info"></div>
$(document).ready(function(){
$("div.resource:gt(0)").hide(); // to hide all div except for the first one
$('#resourceLinks a').click(function(selected) {
var getID = $(this).attr("id");
var projectImages = $(this).attr("name");
$("div.resource").hide();
$("#" + getID + "_info" ).show();
});
});
I think you are trying to achieve the accordian effect.. Have a look here:
http://jquery.bassistance.de/accordion/demo/
Its and existing jQuery plugin.
Given:
<div id="resourceLinks">
General Information<br />
Automatic 401(k)<br />
Consumer Fraud<br />
Direct Deposit<br />
Diversity<br />
Women<br />
Young Adults (20s - 40s)
</div>
<div class="resource" id="resource1">1</div>
<div class="resource" id="resource2">2</div>
<div class="resource" id="resource3">3</div>
<div class="resource" id="resource4">4</div>
<div class="resource" id="resource5">5</div>
<div class="resource" id="resource6">6</div>
<div class="resource" id="resource7">7</div>
You can:
$(function() {
var $resLinks = $('#resourceLinks a'),
$res = $('.resource');
// Hide all but first
$res.not(':first').hide();
$resLinks.first().addClass('current');
$resLinks.click(function() {
var $elm = $(this),
childId = $elm.data('child');
// Hide all (only one is visible, though)
$res.hide();
// Reset and set .current class on links
$resLinks.removeClass('current');
$elm.addClass('current');
// Show related
$('#' + childId).show();
return false;
});
});
Update #1: Code is tested.
Update #2: Showing first on init.
Using classNames
<div id="resourceLinks">
General Information<br />
Automatic<br />
Consumer Fraud<br />
Direct Deposit<br />
Diversity<br />
Women<br />
Young
</div>
<div class="resources">
<div id="resource1" class="current"></div>
<div id="resource2"></div>
<div id="resource3"></div>
<div id="resource4"></div>
<div id="resource5"></div>
<div id="resource6"></div>
<div id="resource7"></div>
</div>
jQuery:
$(document).ready(function(){
$('#resourceLinks a').click(function() {
$('div.resources div').hide().removeClass('current');
$("#" + $(this).attr('className')).show().addClass('current');
});
});