sorry for my English and code, I am the beginner in JS.
wanna do a simple page with 2 iframes
all functions, that I wrote works, but order of calling functions matters and I don't know why...
func_Search_1(search_text);
func_Search_2(search_text);
But 2nd one doesn't work, If I write:
func_Search_2(search_text);
func_Search_1(search_text);
then 1st on won't work...
I'm truly stuck :(
My code is:
<body>
<input type="text" id="txt_search" name="txt_search">
<button onclick="func_Search()">Search</button>
<script>
const iframe_1 = document.createElement("iframe");
iframe_1.src = "https://slovniky.lingea.cz/anglicko-cesky/";
iframe_1.setAttribute("width", window.innerWidth);
iframe_1.setAttribute("height", window.innerHeight/2);
iframe_1.style.top = "42px";
iframe_1.style.left = "0px";
iframe_1.frameBorder = "no";
iframe_1.scrolling = "yes";
iframe_1.style.position = "relative";
iframe_1.style.zIndex = "1000";
iframe_1.id = "iframe_1";
document.body.appendChild(iframe_1);
const iframe_2 = document.createElement("iframe");
iframe_2.src = "https://prirucka.ujc.cas.cz/";
iframe_2.setAttribute("width", window.innerWidth);
iframe_2.setAttribute("height", window.innerHeight/2);
iframe_2.style.top = "0px";
iframe_2.style.left = "0px";
iframe_2.frameBorder = "no";
iframe_2.scrolling = "yes";
iframe_2.style.position = "relative";
iframe_2.style.zIndex = "1000";
iframe_2.id = "iframe_2";
document.body.appendChild(iframe_2);
function func_Search (){
search_text = document.getElementById('txt_search').value;
func_Search_1(search_text);
func_Search_2(search_text);
}
function func_Search_1 (search_text){
const iframe_1 = document.getElementById("iframe_1");
iframe_1.src = "https://slovniky.lingea.cz/anglicko-cesky/"+search_text;
iframe_1.location.reload();
}
function func_Search_2 (search_text){
const iframe_2 = document.getElementById("iframe_2");
iframe_2.src = "https://prirucka.ujc.cas.cz/?slovo="+search_text;
iframe_2.location.reload();
}
</script>
</body>
iframe_2.location.reload(); and iframe_1.location.reload(); are not functions, you can remove them.
Look at the browser console to debug you errors :)
Related
I'm have been trying to get a single article on my website and have it swtich to another article on interval. I'm using flask to scrape the arcile title,image and text from 3 different source. Then I render a template with those elements in a list.
See code:
#app.route('/test')
def hello_world():
offshorenergyfeed = feedparser.parse('https://feeds.feedburner.com/OffshoreEnergyToday?format=xml')
offshorewindfeed = feedparser.parse('http://feeds.feedburner.com/OffshoreWindNews?format=xml')
rechargefeed = feedparser.parse('http://www.rechargenews.com/rss/')
feedlinks = [offshorenergyfeed.entries[0]['link'],offshorewindfeed.entries[0]['link'],rechargefeed.entries[0]['link']]
artikel_tekst = []
artikel_titel = []
artikel_image = []
for link in feedlinks:
artikel = Article(link)
artikel.download()
artikel.parse()
artikel_tekst.append(artikel.text)
artikel_titel.append(artikel.title)
artikel_image.append(artikel.top_image)
return render_template('graph.html',
artikel_tekst = artikel_tekst,
artikel_titel = artikel_titel,
artikel_image = artikel_image,
)
Now I want to I want to display 1 article at the time and swtich it to another with an interval(lets say 5 minutes). For some reason I can only get it to work with the title switch. Text and Image won't switch with the given code:
<div id=newsarticle_container>
<h1 id='titel'>{{artikel_titel[0]}}</h1>
<img id=plaatje src="{{artikel_image[0]}}">
<div id='tekst'>{{artikel_tekst[0]}}</div>
</div>
<script>
var titles = ["{{artikel_titel[0]}}", "{{artikel_titel[1]}}", "{{artikel_titel[2]}}"];
var images = ["{{artikel_image[0]}}", "{{artikel_image[1]}}", "{{artikel_image[2]}}"];
var text = ["{{artikel_tekst[0]}}", "{{artikel_tekst[1]}}", "{{artikel_tekst[2]}}"];
var counter = 0;
var elem1 = document.getElementById("titel");
var elem2 = document.getElementById("plaatje");
var elem3 = document.getElementById("plaatje");
var inst = setInterval(change, 2000);
function change() {
elem1.innerHTML = titles[counter];
elem2.innerHTML = images[counter];
elem3.innerHTML = text[counter];
counter++;
if (counter >= titles.length) {
counter = 0;
}
}
</script>
Can someone please help me out. I have been struggeling on this for a long time. I think i'm close to the solution but maybe it's needs to be way different. Let me know.
Thanks in advance!
you have
<h1 id='titel'>{{artikel_titel[0]}}</h1>
<img id=plaatje src="{{artikel_image[0]}}">
<div id='tekst'>{{artikel_tekst[0]}}</div>
which should be
<h1 id='titel'>{{artikel_titel[0]}}</h1>
<img id='plaatje' src="{{artikel_image[0]}}">
<div id='tekst'>{{artikel_tekst[0]}}</div>
later in your code you have
var elem1 = document.getElementById("titel");
var elem2 = document.getElementById("plaatje");
var elem3 = document.getElementById("plaatje");
which should be changed to
var elem1 = document.getElementById("titel");
var elem2 = document.getElementById("plaatje");
var elem3 = document.getElementById("text");
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="box">
<button id="start" type="button" onclick="myStart()" > Start</button>
<script>
function myStart() {
document.getElementById("start").style.display="none";
var rosso = casuale(0,1);
if (rosso==0) {
var imgtest1= document.createElement("input");
imgtest1.src="http://www.w3schools.com/tags/logo_w3s.gif";
imgtest1.type="image";
imgtest1.style.height="50px";
imgtest1.style.width="50px";
imgtest1.style.position="absolute";
imgtest1.style.top="300px";
imgtest1.style.left="0px";
imgtest1.onclick= function() { document.getElementById("box").removeChild(imgtest1)
}
document.getElementById("box").appendChild(imgtest1);
}
else {
var imgtest1= document.createElement("input");
imgtest1.src="https://s3.amazonaws.com/impressivewebs/2014-02/w3schools-logo.jpg";
imgtest1.type="image";
imgtest1.style.height="50px";
imgtest1.style.width="50px";
imgtest1.style.position="absolute";
imgtest1.style.top="300px";
imgtest1.style.left="0px";
imgtest1.onclick= function() { document.getElementById("box").removeChild(imgtest1)}
document.getElementById("box").appendChild(imgtest1);
}
}
function casuale(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
</script>
</div>
</body>
I have a little problem with this code:
var rosso = casuale(0, 3)
if (rosso == 0) {
var imgtest1 = document.createElement("input");
imgtest1.src = "graphic/badtarget.png";
imgtest1.type = "image";
imgtest1.style.height = "50px";
imgtest1.style.width = "50px";
imgtest1.style.position = "absolute";
imgtest1.style.top = "300px";
imgtest1.style.left = "0px";
imgtest1.onclick = function() {
error++;
checkerror();
}
document.getElementById("box").appendChild(imgtest1);
} else {
var imgtest1 = document.createElement("input");
imgtest1.src = "graphic/goodtarget.png";
imgtest1.type = "image";
imgtest1.style.height = "50px";
imgtest1.style.width = "50px";
imgtest1.style.position = "absolute";
imgtest1.style.top = "300px";
imgtest1.style.left = "0px";
imgtest1.onclick = function() {
point++;
document.getElementById("box").removeChild(imgtest1);
if (point == maxp) {
livello2(7);
cleartarget();
}
}
document.getElementById("box").appendChild(imgtest1);
}
wheni try to remove the child "imgtest1" with the goodtarget.png image i have no problems, instead when i want to remove the child with the badtarget.png image the button stay here and there is no way to remove it. Why this happens? there is a way to solve this? if needed i can post other lines of code.
Thanks
Edit: Sorry for wasting your time, in the snippet the code works as intended (both the green and the blue images can disappear) but in my program can not.
the lines of code that i use for the remove child is a function that should be called at the end of a level:
var myNode = document.getElementById("box");
while (myNode.firstChild) {
myNode.removeChild(myNode.firstChild);
}
this function cant remove the objects created with the "imgtest1.src = "graphic/badtarget.png";"
Thanks for your time
Ok so we have a simple user info editing page.I want to create a toggle button which swaps profile picture border-radius from 0 to 25 and backwards.But the 2nd part doesnt work.I created if to check if the boarder radius is 25 already so it will make it 0, but it does not work.Here is my code
<!DOCTYPE html>
<html>
<head>
</head>
<body onload="buildImage();">
<div class="contents" id="content"></div>
<button onclick="changeImage()">NextImage</button>
<button onclick="changeShape()">ChangeShape</button>
<button onclick="uploadImage()">Upload Image</button>
</body>
<script>
var images = [ 'profile1.png', 'profile2.png','profile3.png'];
var index = 0;
var array_length = 3;
function buildImage() {
var img = document.createElement('img')
img.src = images[index];
document.getElementById('content').appendChild(img);
}
function changeImage(){
var img = document.getElementById('content').getElementsByTagName('img')[0]
index++;
index = index % array_length;
img.src = images[index];
}
function changeShape(){
var shape = document.getElementById('content').getElementsByTagName('img')[0].style.borderRadius = "25px";
if(shape.style.borderRadius == 25){
var shape2 = document.getElementById('content').getElementsByTagName('img')[0].style.borderRadius = "0px";
}
}
function uploadImage() {
images.push("profile4.png");
array_length++;
}
</script>
</html>
Any ideas why it doesnt work?
You are uselessly assigning variables in your function by the looks of it.
There is no need to declare shape2. Just declare shape once and then use that to check. Also make sure to check shape.style.borderRadius against a string like "25px" as that will be returned.
Try something like this:
function changeShape(){
var shape = document.getElementById('content').getElementsByTagName('img')[0];
if(shape.style.borderRadius == "25px"){
shape.style.borderRadius = "0px";
}else{
shape.style.borderRadius = "25px";
}
}
Ok i'll try very hard to explain exactly what I'm trying to accomplish.
I know that if I want a div to stay at the bottom of a page I can simply do this..
<div id="foo" style="position: fixed; bottom: 0: width: 100%">
blah text
</div>
But I don't want this to always be at the bottom of the page..
I have code like this..
<html>
<head>
<script type="text/javascript">
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';"
else
e.style.display = 'block';
}
</script>
</head>
<body>
<div id="firstDiv" style="display: block;">
......
</div>
<div id="secondDiv" style="display: none;">
......
</div>
<div id="thirdDiv" style="display: none;">
......
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
..repeated 20 times or w/e..
</body>
</html>
I want to do something like http://www.snyderplace.com/demos/collapsible.html
BUT i really don't want to use someone elses library if at all possible... I'm open to using jQuery etc, just don't want to use someone elses library if all possible unless its very bare bones and not a FULL library.
I only know how to hide and show the current ones HTML. I know i would prolly have to do something like..
if (e.id = "firstDiv") {
secondDiv.style.display = 'none';
thirdDiv.style.display = 'none';
} elseif { ....
....
}
Ok so what I want to be able to do is if i have a TON of data inside the [firstDiv] and its so much data that the page has a scroll bar and the [secondDiv] and [thirdDiv] would normally pushed all the way down the page... I want [secondDiv] and [thirdDiv] to stack ontop of eachother and always at the bottom of the page...
But then if I click on [secondDiv] then the [firstDiv] contents will obviously disappear, but I want [firstDiv] to stay at top of page no matter what, then [secondDiv] to be right under neath it which will then show its HTML while [thirdDiv] will still stay static at the bottom of the page....
Then if I was to click on [thirdDiv] then it would just then be [firstDiv] [secondDiv] and [thirdDiv] stacked in order at the very top while now of course showing the HTML of the [thirdDiv]...
LOOOONG explaination later i'm wanting to do a Collapseable system that hides the other divs content while keeping them in order HOWEVER the twist is that the divs below the [firstDiv] always still show up at the bottom of the page no matter what.
Hopefully this makes sense!
I ended up solving and having to do this myself. My answer is TERRIBLY UGLY, but it does work... I would love if anyone could help re-write it so its not so ugly I would greatly appreciate it...
I ended up having to create a Header to act as the (Accordion Header) then a div below it that acted as the div that held the results of the HTML/Content..
Then each Accordion Header I just set onclick="toggle_visibility('firstDivHeader');" or whatever the header that was clicked and then it did the following..
http://jsfiddle.net/t8Le7qqv/ - I wanted to add finished result incase anyone wanted to know how to do this.
<script type="text/javascript">
function toggle_visibility(id) {
if (id == 'firstDivHeader')
{
document.getElementById('firstDivResults').style.display = 'block';
document.getElementById('firstDivHeader').style.top = '0';
document.getElementById('firstDivHeader').style.position = 'fixed';
document.getElementById('secondDivResults').style.display = 'none';
document.getElementById('secondDivHeader').style.top = '';
document.getElementById('secondDivHeader').style.bottom = '82px';
document.getElementById('secondDivHeader').style.position = 'fixed';
document.getElementById('thirdDivResults').style.display = 'none';
document.getElementById('thirdDivHeader').style.top = '';
document.getElementById('thirdDivHeader').style.bottom = '41px';
document.getElementById('thirdDivHeader').style.position = 'fixed';
document.getElementById('forthDivResults').style.display = 'none';
document.getElementById('forthDivHeader').style.top = '';
document.getElementById('forthDivHeader').style.bottom = '0px';
document.getElementById('forthDivHeader').style.position = 'fixed';
} else if (id == 'secondDivHeader')
{
document.getElementById('firstDivResults').style.display = 'none';
document.getElementById('firstDivHeader').style.top = '0';
document.getElementById('firstDivHeader').style.position = 'fixed';
document.getElementById('secondDivResults').style.display = 'block';
document.getElementById('secondDivHeader').style.top = '41px';
document.getElementById('secondDivHeader').style.bottom = '';
document.getElementById('secondDivHeader').style.position = 'fixed';
document.getElementById('thirdDivResults').style.display = 'none';
document.getElementById('thirdDivHeader').style.top = '';
document.getElementById('thirdDivHeader').style.bottom = '41px';
document.getElementById('thirdDivHeader').style.position = 'fixed';
document.getElementById('forthDivResults').style.display = 'none';
document.getElementById('forthDivHeader').style.top = '';
document.getElementById('forthDivHeader').style.bottom = '0px';
document.getElementById('forthDivHeader').style.position = 'fixed';
} else if (id == 'thirdDivHeader')
{
document.getElementById('firstDivResults').style.display = 'none';
document.getElementById('firstDivHeader').style.bottom = '0';
document.getElementById('firstDivHeader').style.position = 'fixed';
document.getElementById('secondDivResults').style.display = 'none';
document.getElementById('secondDivHeader').style.top = '41px';
document.getElementById('secondDivHeader').style.bottom = '';
document.getElementById('secondDivHeader').style.position = 'fixed';
document.getElementById('thirdDivResults').style.display = 'block';
document.getElementById('thirdDivHeader').style.top = '82px';
document.getElementById('thirdDivHeader').style.bottom = '0';
document.getElementById('thirdDivHeader').style.position = 'fixed';
document.getElementById('forthDivResults').style.display = 'none';
document.getElementById('forthDivHeader').style.top = '';
document.getElementById('forthDivHeader').style.bottom = '0px';
document.getElementById('forthDivHeader').style.position = 'fixed';
} else if (id == 'forthDivHeader')
{
document.getElementById('firstDivResults').style.display = 'none';
document.getElementById('firstDivHeader').style.top = '0';
document.getElementById('firstDivHeader').style.bottom = '';
document.getElementById('firstDivHeader').style.position = 'fixed';
document.getElementById('secondDivResults').style.display = 'none';
document.getElementById('secondDivHeader').style.top = '41px';
document.getElementById('secondDivHeader').style.bottom = '';
document.getElementById('secondDivHeader').style.position = 'fixed';
document.getElementById('thirdDivResults').style.display = 'none';
document.getElementById('thirdDivHeader').style.top = '82px';
document.getElementById('thirdDivHeader').style.bottom = '';
document.getElementById('thirdDivHeader').style.position = 'fixed';
document.getElementById('forthDivResults').style.display = 'block';
document.getElementById('forthDivHeader').style.top = '123px';
document.getElementById('forthDivHeader').style.bottom = '';
document.getElementById('forthDivHeader').style.position = 'fixed';
}
}
</script>
Thanks for the design pattern. It really helped me when I was looking to build something similar to what you had done. Here's my version as per your re-write request :) Things to note: I'm using jQuery selectors rather the the javascript ones you used, my divs are named differently and my row height is different, but you'll get the idea.
function toggle_visibility(id) {
// Setup the accordion divs
var sectionHeaderIds = ["#sectionOneHeader", "#sectionTwoHeader", "#sectionThreeHeader",
"#sectionFourHeader", "#sectionFiveHeader", "#sectionSixHeader"];
var sectionDetails = ["#sectionOneDetail", "#sectionTwoDetail", "#sectionThreeDetail",
"#sectionFourDetail", "#sectionFiveDetail", "#sectionSixDetail"];
var rowHeight = 30;
var chosenSectionId = 0;
var numSections = sectionHeaderIds.length;
// Get the index of the selected section
for (var i = 0; i < numSections; i++) {
if (sectionDetails[i] == id) {
chosenSectionId = i;
}
}
// Loop through the divs
for (var i = 0; i < numSections; i++) {
var sectionHeader = $(sectionHeaderIds[i]);
var sectionDetail = $(sectionDetails[i]);
sectionHeader.css('position','fixed');
if (sectionDetails[i] == id) {
sectionDetail.css('display', 'block');
} else {
sectionDetail.css('display', 'none');
}
sectionHeader.css('top',(i <= chosenSectionId) ? i * rowHeight : '');
sectionHeader.css('bottom',(i > chosenSectionId) ? (numSections - i - 1) * rowHeight : '');
}
}
I was trying to add a text popup box on my page, and this code helped me but I need to add a close icon (which is an image in my code)..
but it doesn't work :/
here is my code:
function show_hide_box(an, width, height, borderStyle) {
if (navigator.userAgent.indexOf("MSIE") != -1) {
var browserIsIE = true;
} else { browserIsIE = false; }
var href = an.href;
var boxdiv = document.getElementById(href);
if (boxdiv != null) {
if (boxdiv.style.display=='none') {
move_box(an, boxdiv);
boxdiv.style.display='block';
} else
boxdiv.style.display='none';
return false;
}
boxdiv = document.createElement('div');
boxdiv.setAttribute('id', href);
boxdiv.style.display = 'block';
boxdiv.style.position = 'absolute';
boxdiv.style.width = width + 'px';
boxdiv.style.height = height + 'px';
boxdiv.style.border = borderStyle;
boxdiv.style.backgroundColor = '#FFF';
var inClosebox = document.createElement("div");
inClosebox.setAttribute('id', 'Close');
inClosebox.style.position = 'absolute';
if (browserIsIE) {
inClosebox.style.left = '-1px';
inClosebox.style.top = '0px';
} else {
inClosebox.style.left = '-15px';
inClosebox.style.top = '-15px';
}
inClosebox.style.visibility = 'hidden';
var inImage2 = document.createElement("img");
inImage2.onclick = function () { this.document.close(); };
inImage2.setAttribute('src', '../../Images/closebox.png');
inImage2.setAttribute('width', '30');
inImage2.setAttribute('height', '30');
inImage2.setAttribute('border', '0');
inImage2.style.cursor = 'pointer';
inClosebox.appendChild(inImage2);
var contents = document.createElement('iframe');
contents.scrolling = 'yes';
contents.frameBorder = '0';
contents.style.width = width + 'px';
contents.style.height = height + 'px';
contents.src = href;
boxdiv.appendChild(contents);
boxdiv.appendChild(inClosebox);
document.body.appendChild(boxdiv);
move_box(an, boxdiv);
return false;
}
can any help me please?
That should mean that the path of src is wrong. ie, ../../Images/closebox.png
Add this to your code and see whether this works
inImage2.setAttribute('alt', 'Close');
Even if this doesn't work, it shows you that something else is wrong with the code.
Its a very good practice to add alt attribute to img tag always.
Update:
I just saw this inClosebox.style.visibility = 'hidden';
You are appending img to that and so how are you gonna possibly make it visible when the parent is hidden?
Beats me. Or do you have extra code? If no, please remove that line and try.