OK guys... I'm missing something so basic here that it hurts to even ask. Trying to write a basic function that will pop up a window. The author can pass in 3 variables... an ID, a height, and a width. My javascript function looks like this:
function mypopup(pid,h,w)
{
mywindow = window.open('http://www.test.com?pid=" + pid + "', 'mywindow','toolbar=no,location=no,menubar=no,width=" + w + ",height=" + h + ",resizable=no,scrollbars=no')
}
On the HTML file, this is the structure of my links:
text
Can't get it to work... I know I'm missing something easy, can someone help?
call like that : syntax error
function mypopup(pid, h, w) {
mywindow = window.open('http://www.test.com?pid=' + pid , 'mywindow', 'toolbar=no,location=no,menubar=no,width=' + w + ',height=' + h + ',resizable=no,scrollbars=no');
}
<a href="#" onclick='mypopup("K1i2phr4eVEf4BexlfBgym_WM6Ig7U9a","436","503")'>text</a>
text
mywindow = window.open('http://www.test.com?pid=' + pid, 'mywindow','toolbar=no,location=no,menubar=no,width="' + w + '",height="' + h + '", resizable=no,scrollbars=no')
Try these:
text
Related
I am building a Twitter like site that is fed random tweets that I want to export to the website in a particular manner. I have most of my requirements met up to this point, the only issue I am having is turning the jQuery text of a Twitter user and handle it into a link that can be clicked.
My code snippet below exhibits my work so far:
<script>
$(document).ready(function(){
var $body = $('.middle');
$body.html();
var index = streams.home.length - 1;
var newTweets = function(index){
while(index >= 0){
var tweet = streams.home[index];
var $tweet = $('<div class=tweetBox></div>');
$tweet.text('#' + tweet.user + ': ' + tweet.message + tweet.created_at);
$tweet.appendTo($body);
index -= 1;
}
}
newTweets(index);
$('button').on('click', function(){
index = streams.home.length - 1;
newTweets(index);
});
});
</script>
The line that is giving the issue is $tweet.text('#' + tweet.user + ': ' + tweet.message + tweet.created_at);
I want to take tweet.user and convert it into a click-able link. Any suggestions on ways to attack this would be very much appreciated.
You have to use the HTML function of jQuery. http://api.jquery.com/html/
like this:
var link = $('<a>', {text: tweet.user, href: '#'}).prop('outerHTML');
$tweet.html('#' + link + ': ' + tweet.message + tweet.created_at);
it will do the work.
If I understand correctly, then this is what you want
var link = $('<a>', {text: tweet.user, href: '#'}).prop('outerHTML');
$tweet.html('#' + link + ': ' + tweet.message + tweet.created_at);
I have written JavaScript outside the <body> end tag. Firebug is unable to detect the JavaScript and I am unable to detect the JavaScript error.
Here is my code:
</body>
<script type="text/javascript">
function displayIFrameContent()
{
var iFrame = document.getElementById("link");
var if1= "<iframe src='http://leadmarket.hol.es/forms/solar-power.php?adv_id=" + <?php echo($fetch_users_data['id']); ?>;
var if2= "<iframe src='http://leadmarket.hol.es/forms/kitchen-installation.php?adv_id=" + <?php echo($fetch_users_data['id']); ?>;
var if3= "<iframe src='http://leadmarket.hol.es/forms/conservatory.php?adv_id=" + <?php echo($fetch_users_data['id']);; ?>;
var host = document.getElementById("host");
var subId = document.getElementById("subid");
var errorClass = "box form-validation-error border-width-2";
if(host.value == "")
changeClass("host", errorClass);
if(host.value != "")
{
var iFrameEnd = " width='280' height='330' frameborder='0' scrolling='no'></iframe>";
var leadTypeSelect = document.getElementById("leadType");
var leadTypeValue = leadTypeSelect.options[leadTypeSelect.selectedIndex].value;
iFrame.value = "";
if(leadTypeValue == 1)
iFrame.value = if1 + "&" + "sub_id=" + subId.value + "&source=" + host.value + "'" + iFrameEnd;
if(leadTypeValue == 2)
iFrame.value = if2 + "&" + "sub_id=" + subId.value + "&source=" + host.value + "'" + iFrameEnd;
if(leadTypeValue == 3)
iFrame.value = if3 + "&" + "sub_id=" + subId.value + "&source=" + host.value + "'" + iFrameEnd;
}
}
function changeClass(id, classname)
{
document.getElementById(id).setAttribute("class", classname);
}
</script>
</html>
Your help will be appreciated. Thanks in advance!
The code above contains PHP tags, which cause some syntax errors. In this case the Script panel just shows a message "No Javascript on this page". You should make sure they are interpreted by PHP before they are output to the browser.
Also JavaScript syntax errors are listed within the Console Panel. Make sure you have the option Show JavaScript Errors checked to see them.
Furthermore there's a detailed description about script debugging available within the Firebug wiki.
Sebastian
I have to open a window when a button is clicked, as a modal dialog using JavaScript.
I have used window.open, but it shows me two instances, the parent page and the pop-up page.
When the pop-up page is open, then do not allow the user to click on the parent page.
function openWindow() {
var w = 950;
var h = 350;
var t = 0;
var l = 0;
var scrollbars = 1;
var modal = 'yes';
var reportWindow = window.open("Search.aspx" + '', '', "width=" + w + ",height=" + h + ",left=" + l + ",top=" + t + ',scrollbars=' + scrollbars + 'modal' + modal);
reportWindow.focus();
}
Your code line,
reportWindow = window.open("Search.aspx" + '', '', "width=" + w + ",height=" + h + ",left=" + l + ",top=" + t + ',scrollbars=' + scrollbars + 'modal' + modal);
is missing an '=' symbol after modal. It should be,
reportWindow = window.open("Search.aspx" + '', '', "width=" + w + ",height=" + h + ",left=" + l + ",top=" + t + ',scrollbars=' + scrollbars + 'modal=' + modal);
To open window as dialog box,
<html>
<body>
<script language="JavaScript">
function openWindow() {
if (window.showModalDialog) {
window.showModalDialog("http://example.com","name",
"dialogWidth:255px;dialogHeight:250px");
} else {
window.open('http://example.com','name',
'height=255,width=250,toolbar=no,directories=no,status=no, linemenubar=no,scrollbars=no,resizable=no ,modal=yes');
}
}
</script>
<button onclick="openWindow();">Open window</button>
</body>
</html>
If the above code is not working, please use jQuery modal dialog. You can load any urls to dialog using an iframe.
"window.open" will not work. This command always just opens a popup wich is not "always" on top of its parent.
2 Options:
If you just want to let the user enter a search string you could use
prompt("Please enter a search string:", "");
If you have a complexe search form, you have to create a modal dialog for your own.
There are frameworks which provide this functionality (google for "jQuery") or you create it for your own. Should not be hard, tell me if you need some help!
I've stepped into a new position and am tasked with cleaning up pre-existing code. I will be posting a Javascript function for building hotel reservations by using a base URL and then carrying over variables to the other site.
More clearly, this function allows your to access Site A and search for hotel reservations on Site B. The function makes this even clearer.
function buildReservationURL(){
var site = "http://ach.travel.yahoo.net/hotel/HotelCobrand.do?smls=Y&Service=YHOE&.intl=us&.resform=YahooHotelsCity&";
<!-- Variables Are Defined Here from Form Values //-->
var finishedURL = site + "city=" + cityname + "&state=" + statename + "&dateLeavingDay=" + inDay + "&dateReturningDay=" + outDay + "&adults=" + adults + "&source=YX&distance=&hotelChain=&searchMode=city&cityCountryCode=us&&dateLeavingMonth=" + inMonth + "&dateReturningMonth=" + outMonth;
NewWindow(finishedURL,'Yahoo Travel','780','580','yes','no','1');
}
However, I am receiving an error in IE that gives zero information. The error occurs prior to a window being created so I feel the error would reside somewhere in the function where it is created and the URL is built. This does work fine in FireFox. Any ideas?
Could it be you're using a version of IE that doesn't support spaces in the window name? ("Yahoo Travel" in your example.)
Use IE8's debugger and use "break on error." If it doesn't break in IE8, turn on compatibility view. That uses the IE7 javascript engine while still giving you IE8 debugging facilities.
function NewWindow(mypage,myname,w,h,scroll, menu, res) {
var winl = (screen.width - w) / 2;
var wint = (screen.height - h) / 2;
winprops = 'height=' + h + ',width=' + w + ',top=' + wint + ',left=' + winl + ',scrollbars=' + scroll +
', resizable=' + res + ', location=no, directories=no, status=yes, menubar=' + menu;
win = window.open(mypage,myname,winprops);
if(parseInt(navigator.appVersion) > 3){
win.window.focus();
}
}
I am appending p tags to a div as I process a json request and would liek to style it according to what is in the request.
$(document).ready(function() {
function populatePage() {
var numberOfEntries = 0;
var total = 0;
var retrieveVal = "http://www.reddit.com/" + $("#addressBox").val() + ".json";
$("#redditbox").children().remove();
$.getJSON(retrieveVal, function (json) {
$.each(json.data.children, function () {
title = this.data.title;
url = this.data.url;
ups = this.data.ups;
downs = this.data.downs;
total += (ups - downs);
numberOfEntries += 1;
$("#redditbox").append("<p>" + ups + ":" + downs + " " + title + "<p>");
$("#redditbox :last-child").css('font-size', ups%20); //This is the line in question
});
$("#titlebox h1").append(total/numberOfEntries);
});
}
populatePage()
$(".button").click(function() {
populatePage();
});
});
Unfortunately things are not quite working out as planned. The styling at the line in question is applying to every child of the div, not just the one that happens to be appended at the time, so they all end up the same size, not sized dependent on their numbers.
how can I apply a style to the p tags as they are appended ot the div?
Edit: Thanks Fortes and Veggerby both worked, but i went with Fortes in the end because I did.
You can use JQuery's appendTo instead of append. For your example:
$("<p>" + ups + ":" + downs + " " + title + "<p>")
.css('font-size', ups%20)
.appendTo('#redditbox');
Here are the docs for appendTo: http://docs.jquery.com/Manipulation/appendTo
Replace:
$("#redditbox").append("<p>" + ups + ":" + downs + " " + title + "<p>");
with
var p = $("<p>" + ups + ":" + downs + " " + title + "<p>");
$("p", p).css('font-size', ups%20)
$("#redditbox").append(p);
Can probably be condensed even further.
Edit:
Condensed like:
$("#redditbox").append(
$("<p></p>").css('font-size', ups%20).append(ups + ":" + downs + " " + title + "")
);
Certain browsers/versions do not support the :last-child CSS selector. In that case they often ignore it and return all elements matching the remainder of the selector. This is possibly what you are seeing.
As usual IE is one such browser.
veggerby's approach should help you get around the need to use :last-child.