How to submit values to JavaScript using two pages..? - javascript

I am trying to submit values to JavaScript using two pages "index.php" and "fonts.html".
Here is the JavaScript code that I have used in index.php:
<script language=javascript>
var cp = new ColorPicker();
var fp = new FontPicker('window');
function pickFont(font) {
document.getElementById('fimg').src='http://example.com/im/font/' + font + '.png';
document.getElementById('fid').value=font;
}
if (document.getElementById('fid').value) {
pickfont(document.getElementById('fid').value);
}
</script>
The values should be submitted from "fonts.html" which has the code:
<body>
<p><form method=get action="/fonts.html" style="display:inline"><input type=submit name=cat value="Favorites"></form>
<div id="Favorites">
<img alt="Times-Roman " style="border: outset 1pt" border=1 vspace=1 hspace=1 src="http://www.example.com/im/font/Times-Roman.png">
<img alt="ariel " style="border: outset 1pt" border=1 vspace=1 hspace=1 src="http://www.example.com/im/font/font/ariel.png">
</div>
</body>
When user opens index.php they will get a link; when they click on the link they will be redirected to "fonts.html" where they gets an option to click on one of images "Times-Roman.png" and "ariel.png" .
Now what I am trying to do two things:
when the user clicks on "Times-Roman.png". '('fimg').src' should get the location of "Times-Roman.png"
and
('fid').value should hold the value "Times-Roman.ttf"
I know this can be implemented by adding JavaScript code in the second page "fonts.html" but not exactly getting the code. Your response much appreciated...

font value you are passing to pickfont needs to be a string, you are treating as variable

Related

simple slide show in JS- buttons are not working properly

I want to create a basic page in html that displays a single image.
I also added two buttons Previous and Next. These buttons should allow the user to move forward or backward. Have 6 images in total. When the user reaches the end (or beginning when clicking on the back button) of the slide show, the slide show should not wrap around to the beginning (or end).
button onclick function for both the cases is not working. Its only getting displayed the first image as what mentioned in the img src attribute.
This is what I have done so far. I put all the images into an array and try to travel the array forward and backward side based on the button click.
<body>
<img src="img1.jpg" id="demo" style="width:400px;height:600px"/img>
<br/>
<input type="button" onclick="preImage()" value="Previous
">
<input type="button" onclick = "nextImage()" value="Next
">
<script>
var slider_content = document.getElementById("demo");
var image = ['img1','img2','img3','img4','img5','img6'];
var i = image.length;
function nextImage(){
if(i<image.length){
i=i+1;
}else{
i=1;
}
slider_content.innerHTML="<img src="+image[i-1]+".jpg>";
}
function preImage(){
if(i<image.length+1 && i>1){
i=i-1;
}else{
i=image.length;
}
slide_content.innerHTML = "<img src="+image[i-1]+".jpg">
}
</script>
</body>
Create a wrapper div to your image and change the innerHTML of the div.
<div id="demo" style="width:400px;height:600px">
<img src="img1.jpg">
</div>
An error needs to be corrected in the preImage function:
slide_content.innerHTML = "<img src="+image[i-1]+".jpg">
to
slider_content.innerHTML = "<img src="+image[i-1]+".jpg>";
and also what Daniel said.

How can I insert a variable in iframe src to reach felixibilty for open the various sites? (by: html page and javascript )

I want my users to open their desired sites from my website, for this manner I need to insert a variable in src of iframe which change by user input strings.
Indeed I need a type of code like bellow:
<html>
<body>
<script type="text/javascript">
var userInput_stringVariable= "this part is user desired input string" ;
var adress= "https://en.wikipedia.org/wiki/" + userInput_stringVariable ;
</script>
<iframe src=adress width="100%" height="100%" frameborder="0"></iframe>
</body>
</html>
This code doesn't work, while I need a code like this to work with!
A textfield where user can enter whatever they would like to search on wikipedia or whatever website you want, a submit button which will call a function after it is clicked. answer.value will give the value of textfield and it's concatenated with website initial url.
HTML
<input type="text" name="inputField" id="answer" placeholder="Enter what you wanna search">
<button type="button" name="button" onclick="mySubmit()">Submit</button>
<iframe id="search" src="" width="100%" height="100%" frameborder="0"></iframe>
Script
<script>
function mySubmit() {
let getInput = answer.value;
var address;
address = "https://en.wikipedia.org/wiki/" + getInput;
document.getElementById('search').src = address;
}
</script>
Here is a function that will probably do what you want:
<script type="text/javascript">
function selectPage() {
var userImput_stringVariable = prompt("desired imput string");
if (userImput_stringVariable != null) {
document.getElementById("getPage").innerHTML =
"<iframe width='100%' height='100%' src='https://en.wikipedia.org/wiki/" + userImput_stringVariable + "'></iframe>";
}
}
</script>
Just add
<body onload="selectPage()">
somewhere in the body so the function runs when the page does.
It'll open a prompt, the user then has to enter the address.
Also you'll need this in the body too:
<p id="getPage"></p>
It creates a paragraph with the contents of the iframe within the fuction.

Adding HTML slideshow to multiple pages (without using frames)

I am new to the site (and coding) so please bear with me!
I am trying to add the following clickable slideshow to my site in a way that means I can change the images in one file (HTML or JS) and this be reflected on every page on which the slideshow is called:
<table border="0" cellpadding="0">
<td width="100%">
<img src="image1.bmp" width="200" height="200" name="photoslider"></td>
</tr>
<tr>
<td width="100%">
<form method="POST" name="rotater">
<div align="center">
<center><p>
<script language="JavaScript1.1">
var photos=new Array()
var text=new Array()
var which=0
var what=0
photos[0]="image1.bmp"
photos[1]="image2.bmp"
photos[2]="image3.bmp"
text[0]="Image One"
text[1]="Image Two"
text[2]="Image Three"
window.onload=new Function("document.rotater.description.value=text[0]")
function backward(){
if (which>0){
window.status=''
which--
document.images.photoslider.src=photos[which];
what--
document.rotater.description.value=text[what];
}
}
function forward(){
if (which<photos.length-1){
which++
document.images.photoslider.src=photos[which]
what++
document.rotater.description.value=text[what];
}
else window.status='End of gallery'
}
function type()
{
alert("This textbox will only display default comments")
}
</script>
<p><input type="text" name="description" style="width:200px" size="50">
<p><input type="button" value="<<Back" name="B2"
onClick="backward()"> <input type="button" value="Next>>" name="B1"
onClick="forward()"><br />
</p>
</center>
</div>
</form>
</td>
</tr>
Currently I have used:
<script type="text/javascript" src="images.js"></script>
in the relevant html div. to call a simple .js file which displays the images in one long list, e.g.
document.write('<p>Image One</p>')
document.write('<img src="image1small.png" alt=Image One; style=border-radius:25px>')
document.write('<p>Image Two</p>')
document.write('<img src="image2small.png" alt=Image Two; style=border-radius:25px>')
I have tried every way I can think of, and searched many posts on here to try and get the slideshow to display within the same div. I have copied the html code into the .js file and appended it with document.write on every line, I have tried / on every line, I have tried 'gettingdocument.getElementById', but nothing works!
The slideshow code itself is fine; if I put this directly onto each page then it works correctly, I just can't seem to 'link' to this code and have it run so anything appears.
Please provide the simplest possible solution for this, without any need to install jquery plugins, or use anything other than basic HTML and JS.
There were alot of small bugs, i fixed them for you. you didn't put a semicolon after your javascript statements, tey aren't neccesary but it's cleaner code, you didn't exit alot of html tags
<table border="0" cellpadding="0">
<tr>
<td width="100%">
<img src="image1.bmp" width="200" height="200" name="photoslider">
</td>
</tr>
<tr>
<td width="100%">
<form method="POST" name="rotater">
<div align="center">
<center>
<p>
<p id="description" style="width:200px" size="50"></p>
<p><a onClick="backward()"><img src="imageback.png" alt="back" />Back Image</a>
<p><a onClick="forward()"><img src="forward.png" alt="forward" />Forward Image</a>
</p>
</center>
</div>
</form>
</td>
</tr>
Javascript:
(function() {
var photos=[];
var text= [];
var which=0;
var what=0;
photos[0]="image1.bmp";
photos[1]="image2.bmp";
photos[2]="image3.bmp";
text[0]="Image One";
text[1]="Image Two";
text[2]="Image Three";
document.getElementById('description').innerHTML = text[0]
backward = function(){
if (which>0){
which--;
window.status='';
what--;
console.log(which);
document.images.photoslider.src=photos[which];
document.getElementById('description').innerHTML = text[what];
}
}
forward = function(){
if (which < (photos.length-1)){
which++;
console.log(which);
document.images.photoslider.src=photos[which];
what++;
document.getElementById('description').innerHTML = text[what];
}
else {
document.getElementById('description').innerHTML = 'End of gallery';
}
}
function type()
{
alert("This textbox will only display default comments")
}
})();
And last but not least i've created the fiddle to show you it's working:
http://jsfiddle.net/45nobcmm/24/
You can create a javascript file that search for an element and change the innerHTML of the element to the slideshow you want to show.
For example this could be the script:
var slideshow = document.getElementById('slideshow');
slideshow.innerHTML = 'Your slideshow html';
and your main html page should have a slideshow div.
but you need to know that it's not the best solution, you should learn PHP or another back-end language and than you could use include('page.html'); for example

HTML Not displaying when DIV's are a different order to Javascript

I have a AJAX timer That uses the GET command to retrieve a JSON encoded MySQL query via PHP...
The timer is working correctly & the information is also being retrieved...
To be able to store the results so that i can display them in DIV I have made a VAR called LIST and EVALUATED the xmlhttp.responseText
Then I have created a list of documentgetelementbyid to hold the results so they can be used in the DIV's around the site
Everything works perfectly if I display the data in order within HTML, but as soon as I attempt to display the data not to the order in my JavaScript file the display goes blank..
Im guessing that it is because of the way i am attempting to store the results within JavaScript..
How is it possible to store these results within JavaScript and then call them in HTML but not to the order they are within JavaScript..
I hope what I have explained makes sense, any advice would be greatly appreciated...
THE JAVASCRIPT CODE:
function getPlaylist()
{
var xmlhttp, timer;
if (window.XMLHttpRequest)
{
xmlhttp = new XMLHttpRequest();
}
else
{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function ()
{
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
var list = eval ('('+xmlhttp.responseText+')');
document.getElementById("list0.artist").innerHTML=list[0].artist;
document.getElementById("list0.title").innerHTML=list[0].title;
document.getElementById("list0.label").innerHTML=list[0].label;
document.getElementById("list0.albumyear").innerHTML=list[0].albumyear;
document.getElementById("list0.picture").innerHTML='<img src="/testsite/covers/' + list[0].picture + '" width="200" height="auto"/>';
document.getElementById("list1.artist").innerHTML=list[1].artist;
document.getElementById("list1.title").innerHTML=list[1].title;
document.getElementById("list1.label").innerHTML=list[1].label;
document.getElementById("list1.albumyear").innerHTML=list[1].albumyear;
document.getElementById("list1.picture").innerHTML='<img src="/testsite/covers/' + list[1].picture + '" width="150" height="auto"/>';
document.getElementById("list2.artist").innerHTML=list[2].artist;
document.getElementById("list2.title").innerHTML=list[2].title;
document.getElementById("list2.label").innerHTML=list[2].label;
document.getElementById("list2.albumyear").innerHTML=list[2].albumyear;
document.getElementById("list2.picture").innerHTML='<img src="/testsite/covers/' + list[2].picture + '" width="50" height="auto"/>';
document.getElementById("list3.artist").innerHTML=list[3].artist;
document.getElementById("list3.title").innerHTML=list[3].title;
document.getElementById("list3.label").innerHTML=list[3].label;
document.getElementById("list3.albumyear").innerHTML=list[3].albumyear;
document.getElementById("list3.picture").innerHTML='<img src="/testsite/covers/' + list[1].picture + '" width="50" height="auto"/>';
document.getElementById("list4.artist").innerHTML=list[4].artist;
document.getElementById("list4.title").innerHTML=list[4].title;
document.getElementById("list4.label").innerHTML=list[4].label;
document.getElementById("list4.albumyear").innerHTML=list[4].albumyear;
document.getElementById("list4.picture").innerHTML='<img src="/testsite/covers/' + list[4].picture + '" width="50" height="auto"/>';
}
};
xmlhttp.onerror = function()
{
clearTimeout(timer);
};
xmlhttp.open("GET", "playlist.php?t=" + Math.random(), true);
xmlhttp.send();
timer = setTimeout(getPlaylist, 1000);
}
THE HTML CODE:
(This works in the order below but if i were to change the first DIV to look for "list1.artist" instead of "list0.artist" the page will not display.)
<!DOCTYPE html>
<html>
<head>
<script src="/testsite/OneSecondPlaylist.js"></script>
</head>
<body onload="getPlaylist()">
<h1>Now Playing</h1>
<div id="list0.artist"></div>
<div id="list0.title"></div>
<div id="list0.label"></div>
<div id="list0.albumyear"></div>
<div id="list0.picture"></div>
<h2>Last Played</h2>
<div id="list1.artist"></div>
<div id="list1.title"></div>
<div id="list1.label"></div>
<div id="list1.albumyear"></div>
<div id="list1.picture"></div>
<h2>History</h2>
<div id="list2.artist"></div>
<div id="list2.title"></div>
<div id="list2.label"></div>
<div id="list2.albumyear"></div>
<div id="list2.picture"></div>
<div id="list3.artist"></div>
<div id="list3.title"></div>
<div id="list3.label"></div>
<div id="list3.albumyear"></div>
<div id="list3.picture"></div>
<div id="list4.artist"></div>
<div id="list4.title"></div>
<div id="list4.label"></div>
<div id="list4.albumyear"></div>
<div id="list4.picture"></div>
</body>
</html>
Sounds like you are doing something like this:
<h1>Now Playing</h1>
<div id="list1.artist"></div>
<div id="list1.title"></div>
<div id="list1.label"></div>
<div id="list1.albumyear"></div>
<div id="list1.picture"></div>
<h2>Last Played</h2>
<div id="list1.artist"></div>
<div id="list1.title"></div>
<div id="list1.label"></div>
<div id="list1.albumyear"></div>
<div id="list1.picture"></div>
?
If so, your screen is going blank because when you try to access the div with id="list1.artist", javascript finds two instances of the element with that id and throws an error. Because of this error, javascript aborts the remainder of the code where you are inserting the values into the divs using .innerHTML.
Open up your javascript console: right-click > Inspect Element > Console, and check to see whether you are getting a javascript error. This is likely your problem.
To answer your question about how to display the HTML in a different order...one implementation is to use knockout.js, which is an awesome data-binding library that makes doing things like this a snap (trust me, trust me, trust me). It'll take a little learning, but they have a great tutorial, and if you've never used it, it will successfully blow your mind :]
http://knockoutjs.com/
Good luck friendo.

use html5 output tag to display javascript variables?

Sorry if this is a silly question, but I've been trying to use AJAX to display my javascript variables in 'real time' with little luck. I'm definitely a beginner though so this could be the problem haha- When I see the AJAX code, it always seems to require an additional url that it refreshes, but I just want to refresh the javascript variables on click.
http://jsfiddle.net/bagelpirate/m9Pm2/
<script>
var one = 0;
var two = 0;
var three = 0;
</script>
<body>
<div id="div_1">
One: <script>document.write(one)</script> |
Two: <script>document.write(two)</script> |
Three: <script>document.write(three)</script>
</div>
<div id="div_2">
<img id="mine" src="https://si0.twimg.com/profile_images/3170725828/ac1d6621fc3c3ecaa541d8073d4421cc.jpeg" onclick="one++;" />
<img id="forest" src="http://blogs.dallasobserver.com/sportatorium/No.%202.png" onclick="two++;" />
<img id="farm" src="https://si0.twimg.com/profile_images/3732261215/bd041d1f0948b6ea0493f90507d67ef2.png" onclick="three++;" />
</div>
</body>
As you can see in the above code, when a user clicks one of the images, I want to increment the count and display it at the top of the page. I found the HTML5 output tag, and was wondering if it's possible to use this to display the javascript variable in real time? Everything I've read seems to imply it can't be done because the output tag only works on forms? Anyway, I figured it couldn't hurt to ask!
Thanks for your time!
You shouldn't use document.write to write to the DOM after it's finished loading. You have tagged your question with jQuery, so I'll assume you can use that to update things. Instead, update the DOM from within your script block. Here is an example that might help you get started.
http://jsfiddle.net/prxBb/
<script type="text/javascript">
$(function() {
var one = 0;
var two = 0;
var three = 0;
$('img#mine').click(function() {
one++;
$('span#one').html(one);
});
$('img#forest').click(function() {
two++;
$('span#two').html(two);
});
$('img#farm').click(function() {
three++;
$('span#three').html(three);
});
});
</script>
<body>
<div id="div_1">
One: <span id="one"></span> |
Two: <span id="two"></span> |
Three: <span id="three"></span>
</div>
<div id="div_2">
<img id="mine" src="https://si0.twimg.com/profile_images/3170725828/ac1d6621fc3c3ecaa541d8073d4421cc.jpeg" />
<img id="forest" src="http://blogs.dallasobserver.com/sportatorium/No.%202.png" />
<img id="farm" src="https://si0.twimg.com/profile_images/3732261215/bd041d1f0948b6ea0493f90507d67ef2.png" />
</div>
</body>
Maybe you should try putting all your variables inside a named object, iterating through it at predefined interval and displaying the values.
var varContainer = {
one:0,
two:0,
three:0
};
jQuery("#div_2 img").on('click',function(){
jQuery.each(varContainer,function(key,value){
//Add key + value to the DOM
if(jQuery("."+key+value).length<1)
jQuery("#div_2").append("<div class='"+key+value+"'></div>");
var newHtmlVal= "<p><span>Var name: "+key+"</span><br><span>Value: "+value+"</span>";
jQuery("."+key+value).html();
});
});
HTML
<div id="div_2">
</div>
Of course the script could be upgraded to look through each variable recursivley in case of nested objects/arrays...
Hope this helps!

Categories

Resources