We Keep Coding

how to edit a url obtained from user input

I have a code that asks a user to input a URL and append it to a div using javascript and it works fine. what I was trying to add was editing the user entered URL, specifically change the width and height of the iframe entered by the user then appending it. My current code is attached below. Any help is appreciated. Thanks in advance.
function input() {
globalThis.urlInput = prompt("Enter embed URL:");
if ( urlInput == "") {
alert("No URL Inputted");
} else {
appendUrl();
}
}
function appendUrl(){
document.getElementById("add_to_me").innerHTML += urlInput;
document.getElementsByTagName('iframe').width= "300px";
document.getElementsByTagName('iframe').height= "300px";
}
<button onclick="input()">Input</button>
<div id="add_to_me"></div>

I think this is what you're trying to do;
function input() {
globalThis.urlInput="";
urlInput = prompt("Enter embed URL:");
if ( urlInput == "") {
alert("No URL Inputted");
} else {
appendUrl();
}
}
function appendUrl(){
var ifrm = document.createElement("iframe");
ifrm.setAttribute("src",urlInput );
ifrm.style.width = "300px";
ifrm.style.height = "300px";
ifrm.style.frameborder = "0";
ifrm.allowFullScreen = true;
document.body.appendChild(ifrm);
}
<button onclick="input()">Input</button>

Basically what I do is I create the iframes dynamically and prompt multiple times for url, width and height which I then set on the newly created iframe DOM-Element.
As far as I know it is generally considered bad practice to use global variables. So I edited your code to inject the user input from user function input() into
appendiFrame(input).
Here's my extended code (consider the comments):
function input() {
// create local variable
var input = { url: '', width: '0', height: '0'} // creates dictionary containing input
input.url = prompt("Enter embed URL:")
if ( input.url == "") { // test if url was given
alert("No URL Inputted")
return // return if empty
}
input.width = prompt("Enter width:")
input.height = prompt("Enter height:")
appendiFrame(input)
}
function appendiFrame(input){
iframe = document.createElement('iframe') // create iframe dynamically
iframe.src = input.url;
iframe.width= input.width
iframe.height= input.height
document.getElementById('add_to_me').appendChild(iframe)
}
<button onclick="input()">Input</button>
<div id="add_to_me"></div>
In order to test it you need to also enter the protocol (https) as part of the url. The site also must not send the X-Frame-Options: sameorigin HTTP-header as e.g. Google does or else your browser won't load the iframe.
You might also perform some checking whether the inputs entered are valid.

Using 'onclick' in html for a javascript function only working once

Very briefly, I'm trying to create a way to slide out a div and make it visible by clicking a button on the webpage. I have the css and the layout looking correct and the animation runs once but then doesn't work again.
this is the full js file
var button1Toggle;
var button2Toggle;
var button3Toggle;
button1Toggle = false;
function slideOutFunc() {
if (button1Toggle == false) {
document.getElementById('fade-in1').style.left = '0';
document.getElementById('fade-in1').style.opacity = '1';
button1Toggle = true;
} else {
document.getElementById('fade-in1').style.left = '-33vw';
document.getElementById('fade-in1').style.opacity = '0';
button1Toggle = true;
}
}
<button id="clickApply" class="applyButton" onclick="slideOutFunc()"><a>Apply</a></button>
this is the html portion that calls the function
Any help understanding why it only works once would be appreciated.

Both conditions in sildeOutFunc set buttonToggle to true

expandable list - change images displayed when expanded \ closed

I have a series of expandable drop-down tabs using the ToggleList javascript function below. When the tab is closed I would like to display expand.png and when it's open I would like to display close.png. Right now Any help would be appreciated.
The code below expands\minimizes the dropdown tabs, but is not switching the png files.
Full javascript + html:
<script type="text/javascript">
function ToggleList(IDS) {
HideRange('ulist','div',IDS); // not required unless using 'HideRange()' below
var CState = document.getElementById(IDS);
if (CState.style.display != "block") { CState.style.display = "block"; }
else { CState.style.display = "none"; }
// get a reference to the image contained in the <a> that was just clicked
var img = this.getElementsByTagName('img')[0];
// switch the graphic, if it's expand set it to collapse, otherwise expand
img.src = img.src == "expand.png" ? "minimize.png" : "expand.png";
}
function HideRange(sect,elTag,IDS) {
var ContentObj = document.getElementById(sect);
var AllContentDivs = ContentObj.getElementsByTagName(elTag);
}
</script>
<ul id="ulist">
<li><p><img src="expand.png"/> Subject</p></li>
<div id="expand0" class="divInfo">Text</div>
<li><p><img src="expand.png"/> Subject</p></li>
<div id="expand1" class="divInfo">Text</div>
<li><p><img src="expand.png"/> Subject</p></li>
<div id="expand3" class="divInfo">Text</div>
</ul>

Here's a simple way to implement that - comments in the code
function ToggleList(IDS) {
HideRange('ulist','div',IDS); // not required unless using 'HideRange()' below
var CState = document.getElementById(IDS);
if (CState.style.display != "block") { CState.style.display = "block"; }
else { CState.style.display = "none"; }
// get a reference to the image contained in the <a> that was just clicked
var img = this.getElementsByTagName('img')[0];
// switch the graphic, if it's expand set it to collapse, otherwise expand
img.src = img.src == "img/expand.png" ? "img/collapse.png" : "img/expand.png";
}

.clone().appendTo - Replace element styles not working?

I have individual three arrows. on click; I want the div below them (letsChat) to change styles and I want to clone and append relevant information in that div. I also want it to revert back to it's original state when it is clicked again or if orientation is changed to portrait.
document.querySelector('#compositionArrow').onclick = function(){
var letsChat = document.querySelector('.lets-chat');
var letsChatButton = document.querySelector('.lets-chat a');
var compositionArrow = document.querySelector('#compositionArrow')
var compositionText = document.querySelector('.composition-text');
if (letsChatButton.style.display='flex' && window.matchMedia("(orientation: landscape)").matches) {
compositionArrow.style.transform='rotate(180deg)';
//letsChat.appendChild(compositionText).cloneNode(true);
//compositionText.clone().appendTo.letsChat; return false;
document.querySelector('.composition-text').clone().appendTo(document.querySelector('.lets-chat'));
letsChat.style.background='#00BCD4';
letsChatButton.style.display='none';
}
else if (letsChatButton.style.display='none' || window.matchMedia("(orientation: portrait)").matches){
compositionArrow.style.transform='rotate(180deg)';
letsChat.style.background='#ff8f00';
letsChatButton.style.display='flex';
}
}
example can be found below: (you may have to play with window
artpenleystudios.com

Here's something that demonstrates part of what you asked. It doesn't take into account orientation change, but it handles the click part. As far as I know, there's no straightforward way to detect orientation change, but here's an article that talks about a few options. Another idea would be to use jQuery Mobile as it fires orientationchange events.
So after much back and forth and after looking at your site more closely, this is what I managed to cobble together.
jQuery('#compositionArrow').click(function() {
var $letsChat = jQuery('.lets-chat');
var letsChat = $letsChat[0];
var letsChatButton = $letsChat.find('a')[0];
// Remove old composition text if it exists.
$letsChat.find('.composition-text').remove();
if (letsChatButton.style.display !== 'none' && window.matchMedia("(orientation: landscape)").matches) {
this.style.transform = 'rotate(180deg)';
$letsChat.append(jQuery('.composition-text').clone());
letsChat.style.background = '#00BCD4';
letsChatButton.style.display = 'none';
}
else if (letsChatButton.style.display === 'none' || window.matchMedia("(orientation: portrait)").matches) {
this.style.transform = '';
letsChat.style.background = '#ff8f00';
letsChatButton.style.display = 'flex';
}
});
It works for me in FireFox on a downloaded version of your site.
Cheers!

Dashcode webapp flickers upon transition, only in iPhone Safari

I created a simple RSS web app using the template in Dashcode. Problem is, when choosing items in the list from the feed the transition flickers (even with the default settings). I am guessing its because of the images in the posts.
I tried disabling the transitions completely but even then I get a flickering when returning to the list. This problem does not appear to affect safari on OSX only on the iphone.
Here is the code that I think is responsible:
var topStories = parseInt(attributes.topStories, 30);
function load()
{
dashcode.setupParts();
// set today's date
var todaysDate = document.getElementById("todaysDate");
todaysDate.innerText = createDateStr(new Date()).toUpperCase();
setupFilters("headlineList");
// This message checks for common errors with the RSS feed or setup.
// The handler will hide the split view and display the error message.
handleCommonErrors(attributes.dataSource,
function(errorMessage) {
var stackLayout = document.getElementById("StackLayout")
if (stackLayout) {
stackLayout.style.display = 'none';
}
showError(errorMessage);
});
// get notifications from the stack layout when the transition ends
document.getElementById("StackLayout").object.endTransitionCallback = function(stackLayout, oldView, newView) {
// clear selection of lists when navigating to the first view
var firstView = stackLayout.getAllViews()[0];
if (newView == firstView) {
document.getElementById("headlineList").object.clearSelection(true);
}
}
}
function articleClicked(event)
{
document.getElementById("StackLayout").object.setCurrentView("articlePage", false, true);
}
function backToArticlesClicked(event)
{
document.getElementById("StackLayout").object.setCurrentView("frontPage", true);
}
function readMoreClicked(event)
{
var headlineList = dashcode.getDataSource('headlineList');
var secondHeadlines = dashcode.getDataSource("secondHeadlines");
var selectedItem = null;
if (headlineList.hasSelection()) {
selectedItem = headlineList.selectedObjects()[0];
} else if (secondHeadlines.hasSelection()) {
selectedItem = secondHeadlines.selectedObjects()[0];
}
if (selectedItem) {
var link = selectedItem.valueForKeyPath('link');
// If the link is an object, not a string, then this may be an ATOM feed, grab the actual
// href from the href attr
if (typeof(link) == 'object') {
link = selectedItem.valueForKeyPath('link.$href');
// If the link is an array (there is more then one link), just grab the first one
if (DC.typeOf(link) == 'array') {
link = link[0];
}
}
window.location = link;
}
}
var headlineListDataSource = {
// The List calls this method once for every row.
prepareRow: function(rowElement, rowIndex, templateElements) {
if (rowIndex >= topStories) {
templateElements['headlineDescription'].style.display = 'none';
templateElements['headlineTitle'].style.fontSize = '15px';
}
}
};

The following CSS rule fixed all of my "-webkit-transition" animation flickering issues on the iPad:
body {-webkit-transform:translate3d(0,0,0);}

I am not sure how well that applies to your problem but in general you should set the backface visibility to hidden if not needed. That will most likely kill all flickering on a page.
-webkit-backface-visibility: hidden;