I am wondering if anyone out there would be willing to tell me how I could use the html form text box I have on my apache server to open a web address entered into my text box on my html object below it. I have a problem with iframes on my server so i'd rather use an object. Any help would be wonderful!
Thanks Carl.
You can use the following:
Whenever you have text in your input field, have a button to submit and call the function that will load html data into your div that I called includeContent for the purpose of this example.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function() {
$("#includeContent").load("b.html");
});
</script>
</head>
<body>
<div id="includeContent"></div>
</body>
</html>
Related
I just wanted to know how I can create a button that can take a person to multiple websites in a random order when it is clicked each time. I plan on using this button for a toolbar that I'm planning to create, and the outline that is provided for the HTML component looks like this:
<html>
<head>
<!--
Uncomment out the below script reference as needed. For more information on using the API, please consult http://www.conduit.com/Developers/overview.aspx
<script language="JavaScript" src="http://api.conduit.com/BrowserCompApi.js"></script>
-->
<style type= "text/css">
<!--
BODY {margin-left:0; margin-right:0; margin-top:0; margin-bottom:0;
width:100%;height:100%;overflow:hidden;background-color:threedface;}
-->
</style>
</head>
<body>
<!-- ENTER YOUR HTML HERE -->
</body>
</html>
Is there any way that I can do this by using this outline? Thanks in advance.
As suggested by others, simply make a button click call a function that picks a random site from an array. Here is an explanation on how to pick a random element from a Javascript array.
Example implementation:
<script type="text/javascript">
var websites = ["http://google.com", "http://reddit.com", "http://stackoverflow.com"];
function randomWebsite() {
var website = websites[Math.floor(Math.random()*websites.length)];
window.location = website;
}
</script>
<button type="button" onclick="randomWebsite();">Random website</button>
I'm not going to write the script for you but you'd want to use javascript to do this. Use the random function and assign your website urls to an appropriate number.
Example:
if you had three total websites then you'd do the random function and assign 0-.33 website 1, .34 - .66 website2, and .67 - 1 website 3.
You need Javascript for that.
You can have a list of websites.
You can get the website you will go to, when the button is clicked, by using the random function in javascript.
Here is the example when using an array, Getting a random value from a JavaScript array
Hope it helps.
We shouldn't give you any code, as you didn't provide anything. But your algorithm should follow what I mentioned.
I think you need javascript to do this,
Take a look on this page maybe this can help you
http://ozirock.hubpages.com/hub/How-to-make-a-Random-Page-button-for-your-website
I will be using shopify's system so i am restricted to how and which pages i can edit.
I have one page that is an app but i want that page, on loading, to show a popup disclaimer before they can see the page.
I am told that i can't edit the app page itself but i can add javascript code in the common site footer to check current url and if it equals this certain page, then create a popup.
I have created a page that holds the disclaimer information so i would like the popup window to load this pages' content.
I believe i can load the content using this div tag
div id="popupinfo" pages.disclaimer.content div
I do not know how to add the if statement to check if current url = site.com app.html then div id="popupinfo" pages.disclamier.content div
This site uses their own language called Liquid, hence the double brackets..but any code to pull the content of an html page would work i am sure.
Can i please have some assistance in how i am to
check current page
if page = xxx
best way to create a popup window where the user has to click as yes or ok button
then display the regular page
Thanks in advance!
Brocour
It's only possible to open a pop-up window upon a user-action, for example a 'click' action.
if( document.URL === "myPage.html" ){
// Disclaimer alert
if (confirm('Do you agree to this Disclaimer?')){
// Redirect
window.location = "myNewPage.html";
} else {
// Do nothing
}
}
Try something like this:
<html>
<head>
</head>
<script type="text/javascript">
function poponload()
{
popupwindow=window.open("","mywindow","location=1,status=1,scrollbars=1,width=100,height=100");
popupwindow.moveTo(0, 0);
}
</script>
<body onload="javascript: poponload()">
This is the page
</body>
</html>
You could use the code in this example i made.
$(document).ready(function(){
$('#open_popup').click(function(){
popupwindow=window.open("http://google.com","mywindow","location=1,status=1,scrollbars=1,width=600,height=500");
})
})
I am newbie as far as developing chrome extension is concerned.
I am testing an extension. In this i have a background page and options page. In options page i am storing user entered password in local storage which i want to retrieve in the background page that is on click of browser icon.
My options page is :
<html>
<head>
<title>Options for Password</title>
<script>
function savePassword()
{
window.localStorage.setItem('password', txtPassword.value);
}
</script>
</head>
<body >
<h1>Enter Password</h1>
<input type='password' name='txtPassword' id='txtPassword'/>
<br />
<button onclick='savePassword();'>Save</button>
<br />
</body>
</html>
And my background page is:
<html>
<head>
<script>
// Called when the user clicks on the browser action.
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(null, {code:"alert('password from tab:'+window.localStorage.getItem('password'));getfeedback_dialog_submitButton.setAttribute('onclick', 'if(gettext.value==\'"+window.localStorage.getItem(password)'+"\'){document.body.removeChild(getfeedbackcontainer);document.body.removeChild(getfeedbackoverlay);}');"});
});
</script>
</head>
</html>
When i save password through options page and then i click on browser action then i am getting the alert password from tab:null.
I am confused how to retrieve the value stored in the local storage?
Your code gets the localStorage value from the page where the browser action is clicked, where it is null. Change your quotes to get it at the background page:
chrome.tabs.executeScript(null, {code:"alert('password from tab:"+window.localStorage.getItem('password')+"');"});
Note that this may allow for code injection.
EDIT: Do this, it should work as long as your variables are defined properly and window.localStorage.getItem('password') is expected to be a string:
chrome.tabs.executeScript(null, {code:"alert('password from tab:"+window.localStorage.getItem('password')+"');"
+"getfeedback_dialog_submitButton.addEventListener('click', function(event){if(gettext.value=='"+window.localStorage.getItem('password')+"')"
+"{document.body.removeChild(getfeedbackcontainer);document.body.removeChild(getfeedbackoverlay);}},false);"});
I split your code into multiple lines for readability.
I'm exploring HTML5 and Processing.js.
When the user clicks on an image on my webpage, I'd like to call a function in the Processing.js code. Just calling the function in onclick, as illustrated in this simple example, isn't working:
<html>
<head>
<script language="javascript" src="processing.init.js"></script>
<script language="javascript" src="processing.js"></script>
</head>
<body>
<script type="application/processing">
void restart()
{ /* does something */ }
</script><canvas>
You'll need a browser that supports HTML5 to see this content.
</canvas><br/><br/>
<img src="restart-image.png" onclick="restart()">
</body>
</html>
Any thoughts on how I can call a method in the Processing.js script when an image is clicked? (Maybe I'm making a basic HTML mistake by using img onclick?)
This should work, enclose you image inside the anchor tag <a> image </a>
Use href tag to call the function.
image source
I would start by pulling the javascript for the onclick out of the img tag.
In a separate javascript file you can have:
document.getElementById('restartimage').onclick = function() { Processing.setup(); }
Obviously I put an id attribute on your img tag.
The setup function I noticed on this page:
http://processingjs.org/
The basic idea is that by pulling the onclick into a javascript file it will be easier to code what it should do.
you need to change the script-type to text/javascript or application/javascript first.
then place 'function' before 'restart()' function reducing 'void'.
i have used firefox 3.0.14 on ubuntu 9.04.
You can call processing functions using the Processing js object's getInstanceById function.
For example here is a function:
$(window).resize(function(){
var p=Processing.getInstanceById('processing_canvas_id');
p.resize($("#main").width(),$("#main").height());
});
Where resize is my processing function inside the processing file associated with processing_canvas_id.
I am trying to throw together a website using Ajax for the first time, to finally get with the times and figure it out. So far it is nothing but HTML pages and a bit of JS. Using some basic AJAX script I found online, I have the main index.htm which has a title, navigation, and content divs. The Ajax calls grab other content includes (which are just files with text content for the most part) to throw into the content div. For the most part it works, except for when I am trying to add the Google Directions gadget. When I add the script code it gives me to a file and call that file, there is no noticeable output.
Any suggestions on what I am doing wrong or what I'm missing?
If I am understanding you correctly this is an unnecessary use of AJAX. From what it seems like you want to do is load JavaScript via a JavaScript call. This can be accomplished using either method described here. Example:
<script type="text/javascript">
function dhtmlLoadScript(url)
{
var e = document.createElement("script");
e.src = url;
e.type="text/javascript";
document.getElementsByTagName("head")[0].appendChild(e);
}
onload = function()
{
dhtmlLoadScript("dhtml_way.js");
}
</script>
If the above link does not help or I am misunderstanding your question please provide further clarification or some sort of code example.
Following up on your comment
Here is a work around for your gadget, the below code would be on your main page (the one that is initially loaded). Here is my test HTML page:
<html>
<head>
<script type="text/javascript">
var gadget;
function getGadgetAndMove(node)
{
gadget = document.getElementsByTagName("table")[0];
node.appendChild(gadget);
gadget.style.visibility = "visible";
gadget.style.display = "inline-block";
}
</script>
<style>
.ig_reset, .ig_tbl_line { visibility:hidden;}
</style>
</head>
<body>
<div onclick="getGadgetAndMove(this);">Test</div>
</body>
<script src="http://www.gmodules.com/ig/ifr?url=http://hosting.gmodules.com/ig/gadgets/file/114281111391296844949/driving-directions.xml&up_fromLocation=&up_myLocations=1600%20Amphitheatre%20Pkway%2C%20Mountain%20View%2C%20CA&synd=open&w=320&h=55&title=Directions+by+Google+Maps&brand=light&lang=en&country=US&border=%23ffffff%7C3px%2C1px+solid+%23999999&output=js"></script>
</html>
If you need further explanation please let me know.
I believe I know what you want to accomplish, because I ran into the same problem. And I found a solution. So I would say that no it is not an improper use of ajax, because you could run into this in some circumstances.
Put the directions gadget not directly in the page content that is being loaded via ajax, but in a separate file such as "directionsgadget.html" (insert the script tag for the gadget in this file).
Then use an iframe with src="/path/to/directionsgadget.html" in your ajax loaded content.
The gadget should get loaded this way.
If you want the gadget centered within the iframe, you can wrap the script tag in directionsgadget.html in a div with a set width and style="margin:0px auto". That will center the gadget.
Here is an example:
Your main page is "index.html", and contains a div that will contain ajax loaded content:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
$(document).ready(function(){
$.ajax({
url: 'ajaxcontent.html',
success: function(returndata){ $('#ajaxcontent').html(returndata); }
});
});
</script>
</head>
<body>
<div id="ajaxcontent"></div>
</body>
</html>
Then you have a file with the content that is to be loaded via ajax, and this has among other things a google gadget. Were not going to put the gadget directly here, but were going to put it in a separate file and point to it with an iframe. Let's call this first file ajaxcontent.html, as indicated in the ajax call in the head section of the first file:
<span>Here is some content that will be loaded onto the main page via ajax.</span><br />
<span>Among other things, there is a google directions gadget that will be loaded.</span>
<div id="getdirections" style="margin:0px auto;">
<iframe style="width:365px;height:216px;" src="directions.html"></iframe>
</div>
Now we will put the script for the google gadget itself in a separate file "directions.html" (as indicated in the src of the iframe above), and in order for the rendered gadget to be centered we are going to wrap the script tag within a div just so:
<div style="width:336px;height:116px;margin:0px auto;">
<script type="text/javascript" src="http://www.gmodules.com/ig/ifr?url=http://hosting.gmodules.com/ig/gadgets/file/114281111391296844949/driving-directions.xml&up_fromLocation=&up_myLocations=_a_bunch_of_information_with_personal_list_of_locations_&synd=open&w=320&h=55&title=Street+directions+by+Google+Maps&brand=light&lang=it&country=ALL&border=http%3A%2F%2Fwww.gmodules.com%2Fig%2Fimages%2F&output=js"></script>
</div>
I hope this example was clear enough!