I'm adding some amount of div based on the xml list which contain some data and url
Currently trying to use onClick but it doesn't seems right on the js that loads the div part.
//retrieve each of the data field from ITEM
var url = item.find('url').text();
var image = item.find('project-img').text();
var title = item.find('id').text();
var desc = item.find('desc').text();
var html;
//Embed them into HTML code
html = '<div class="project"><img src="' + image + '" alt="' + title + '" />';
html += '<div class="info">';
html += '<div class="title">'+title+'</div>';
html += '<div role="button" class="launch" onclick="window.open('+url+',"mywindow");">Launch Website</div>';
html += '<div role="button" class="more">View More</div>';
html += '</div></div>';
I think it somehow get mess up on the adding 'url' part with ' or "
Or there would be a much easier way to call a link on such situation?
as per your requirement correct syntax would be
html += '<div role="button" class="launch" onclick="window.open(\''+url+'\',\'mywindow\');">Launch Website</div>';
I think you have an error (the only one i could spot), so try the following:
onclick="window.open('+url+',\'mywindow\');"
Related
I am dynamically creating Div Text in JS and was wondering how I access the various text upon click.
Here is what I have tried so far;
My Dynamically created div
function Message(Side, message) {
var divChat = '<div class="direct-chat-msg ' + Side + '">' +
'<div id="myDiv" class="direct-chat-text">' + message + '</div>' +
'<div id="accountMenu">' +
'<li onclick = "getMessage(' + message + ')" id="replyDiv">Reply</li>' +
'<li>Preferences</li>' +
'</ul>' +
'</div></div>';
$('#divChatWindow').append(divChat);
}
JS when the li is clicked on.
function getMessage(str) {
alert(str);
}
The error I am getting is:
Uncaught ReferenceError: *whaeverthemessageis* is not defined
at HTMLLIElement.onclick
What is the best solution to solve this problem?
Thanks =)
You have malformed html using single and double quotes. The message is being treated as a variable, not a string, hence the undefined error.
replace:
'<li onclick = "getMessage(' + message + ')" id="replyDiv">Reply</li>' +
with this:
'<li onclick = "getMessage(\'' + message + '\')" id="replyDiv">Reply</li>' +
I'm not exactly sure what the problem is, but here is a working Playcode
I have a written a javascript which will return the value in the variable, in the title property.
It is not returning the values with spaces, when i execute the below code it is returning the last value as 'ashok' instead of 'ashok sensiple'
var ltenantName = 'Sensiple,new-tenant-001,tenant-new,Tenant_1208,ashok sensiple';
var ltenantNameLength = '<div style="cursor:Pointer" title='
+ ltenantName
+'>'
+ ltenantName.split(',').length
+'</div>';
return ltenantNameLength;
HTML attribute values containing spaces must be quoted.
You are generating the title attribute without quotes around the value.
Your code:
var ltenantName = 'Sensiple,new-tenant-001,tenant-new,Tenant_1208,ashok sensiple';
var ltenantNameLength = '<div style="cursor:Pointer" title='
+ ltenantName
+'>'
+ ltenantName.split(',').length
+'</div>';
document.body.appendChild(document.createTextNode(ltenantNameLength));
As you can see sensiple is a new attribute and not part of the value of the title attribute.
Add quotes:
var ltenantName = 'Sensiple,new-tenant-001,tenant-new,Tenant_1208,ashok sensiple';
var ltenantNameLength = '<div style="cursor:Pointer" title="'
+ ltenantName
+'">'
+ ltenantName.split(',').length
+'</div>';
document.body.appendChild(document.createTextNode(ltenantNameLength));
Better yet, don't try to mash strings together in JS to make HTML:
var ltenantName = 'Sensiple,new-tenant-001,tenant-new,Tenant_1208,ashok sensiple';
var ltenantNameLength = document.createElement('div');
// This normally indicates a link. If you want a link, why not use <a>?
ltenantNameLength.style.cursor = "pointer";
ltenantNameLength.title = ltenantName;
ltenantNameLength.appendChild(
document.createTextNode(
ltenantName.split(',').length
)
);
document.body.appendChild(ltenantNameLength);
I'm using the z weatherfeed plugin.
It already pulls most of the data from yweather api but I need the latitude and longitude.
The plugin gets the data for each item element like this for example:
html += '<div class="weatherCountry">'+ feed.location.country +'</div>';
However, if I try this...
html += '<div class="latitude">' + feed.item.geo.lat + '</div>';
html += '<div class="longitude">' + feed.item.geo.long + '</div>';
...it doesn't get the data for these elements.
How should I go about accessing both the geo:lat and geo:long?
Here's a live example: http://jsbin.com/sibafeke/1/edit
The data for geo:lat and geo:long can be accessed this way:
html += '<div class="latitude">' + feed.item.lat + '</div>';
html += '<div class="longitude">' + feed.item.long + '</div>';
The foundation: I have a simple lightbox on my home page (code below). It works exactly as I want it to: when the trigger image is clicked, it grays out the rest of the page and adds HTML to create an iframe for the text-based page that I want to display.
The problem: I need to create a lightbox where the content is dynamically chosen depending on the image that is clicked. The URLs will correspond to each other -- for example, if the user clicks "/media/X.png," he/she will be presented with a lightbox containing the iframe of the page "/X.html."
How can I accomplish this? My first stab at it is below (after the original, static lightbox code). It's cobbled together from various things I've read online and other answers to similar questions on StackOverflow, but I'm super new to jQuery / basically known no Javascript and I suspect I'm misusing variable assignment and the "split" function.
Many thanks.
EDIT: Someone has helped me insert the variable into the HTML (below). However, I think I'm assigning the variables incorrectly (see the beginning of the second block of code). Here's what I'm trying to do with each variable:
1. pre_lightbox_trigger: grab the string "X.png" from the image that the user has clicked.
2. lightbox_trigger: grab "X" only (remove ".png").
3. lightbox_trigger_href: make X into "X.html", and make it a link.
Code:
Original, static lightbox:
$(document).ready(function($) {
$('.lightbox_trigger').click(function(e) {
e.preventDefault();
if ($('#lightbox').length > 0) {
$('#lightbox').show();
}
else {
var lightbox =
'<div id="lightbox">' +
'<div id="content">' +
'<iframe src="why.html" id="lightframe" frameborder="0" seamless>' +
'</iframe>' +
'</div>' +
'<p>Click outside to close</p>' +
'</div>';
$('body').append(lightbox);
}
$(document).on('click', '#lightbox', function() {
$('#lightbox').hide();
});
});
});
My attempt to create a dynamic link:
$(document).ready(function($) {
$('.lightbox_trigger').click(function(e) {
e.preventDefault();
var pre_lightbox_trigger = location.'.lightbox_trigger'.split('/').pop();
var lightbox_trigger = pre_lightbox_trigger.split('.').pop(1);
var lightbox_trigger_href = lightbox_trigger + ".html";
if ($('#lightbox').length > 0) {
$('#lightbox').show();
}
else {
var lightbox =
'<div id="lightbox">' +
'<div id="content">' +
'<iframe src=$lightbox_trigger_href id="lightframe" frameborder="0" seamless>' +
'</iframe>' +
'</div>' +
'<p>Click outside to close</p>' +
'</div>';
$('body').append(lightbox);
}
$(document).on('click', '#lightbox', function() {
$('#lightbox').hide();
});
});
});
EDIT #2: Currently my "static" version of the lightbox is only for "trigger_small.png." However, I want a lightbox to appear when other images are clicked as well (for example, "vio_mass.png"). See below for sample HTML:
<div id="trigger">
<a class="lightbox_trigger" href="media/trigger_small.png">
<img src="media/trigger_small.png">
</a>
</div>
<div class="cat" id="violence_cat">
<div class="cat_grid" id="vio_1">
</div>
<div class="cat_grid" id="vio_2">
<img src="media/vio_mass.png">
</div>
...etc.
Instead of
var lightbox =
'<div id="lightbox">' +
'<div id="content">' +
'<iframe src=$lightbox_trigger_href id="lightframe" frameborder="0" seamless>' +
'</iframe>' +
'</div>' +
'<p>Click outside to close</p>' +
'</div>';
You would do
var lightbox =
'<div id="lightbox">' +
'<div id="content">' +
'<iframe src=' + lightbox_trigger_href + ' id="lightframe" frameborder="0" seamless>' +
'</iframe>' +
'</div>' +
'<p>Click outside to close</p>' +
'</div>';
function deleteRecordDialog() {
var returnThis;
var numRecordss = recs.length;
var html = ""
/*html= html +'<div id="popupContainer" style="width:' + width + 'px; height: ' + height + '; display: block;">';
html= html + '<div id="popupInner">';
html= html + '<div id="popupFrame">';
html= html + '<div class="margin15px dialog-messages">';*/
html= html + '<table>';
html= html + '<tr>';
html= html + '<td class="warning-icon-cell"></td>';
html= html + '<td style="padding-left: 5px;">';
if (numAddresses == 1) {
html = html + '<p>You have chosen to delete a contact.</p>';
}
else {
html = html + '<p>You have chosen to delete ' + numAddresses + ' contact(s).</p>';
}
html= html + '<p>Are you sure you wish to proceed?</p>';
html= html + '</td>';
html= html + '</tr>';
html = html + '</table>';
if (numAddresses == 1) {
html = html + '<div class="add-postage-submit-buttons"><input type="button" value="Yes, Delete Contact" style="width: 160px; onclick="returnThis=true; CloseDialog();"/> <input type="button" value="Cancel" onclick="returnThis=false; CloseDialog();"/></div>';
}
else {
html = html + '<div class="add-postage-submit-buttons"><input type="submit" value="Yes, Delete Contact(s)" style="width: 160px; onclick="returnThis=true; CloseDialog();"/> <input type="button" value="Cancel" onclick="returnThis=false; CloseDialog();"/></div>';
}
html = html + '</div>';
html = html + '</div>';
html = html + '</div>';
html = html + '</div>';
OpenDialog(html, 350, 180, false, "Delete Contact")
return returnThis;
}
Now usually I'd use JQuery and set modal to true to enable the false/true to be assigned but I don't have the luxury of jquery with this. Is there a way to use this custom dialog?
Is there a way to do the following without JQuery?
$("#dialogInfo").dialog({
modal: true
});
The jQuery-ui-dialog just runs a bunch of JavaScript code behind the scenes to give the appearance of a dialog box.
You can accomplish much of the same functionality using CSS.
I'm not going to tell you exactly what to do here, but I'll point you in the general direction.
For starters, you can create a div that will contain your dialog box content. Give it id dialog.
Then, in CSS, give it position:fixed and display:none and z-index:9999 along with the width and height you desire. Knowing exactly what its size is, you can write JavaScript code to center it on the screen. When you want to display the dialog, set its display property to block. Also, be sure to give it a background color and a border. That will allow you to give part of your document the appearance of being like a dialog box.
If you want to have a 'mask' behind the dialog box so that the user can't click on anything else on the page, create another div with id mask. Give it these CSS properties: position:fixed, top:0px, left:0px,height:100%, width:100%, display:nonebackground-color:black,z-index:9998,opacity:0.8. When you want to display the dialog as modal, set this div'sdisplayproperty toblock` as well.
Finally, jQuery-ui-dialog also captures [Tab] key presses to keep the keyboard focus inside the modal dialog. Feel free to do this as well, if you like.
Happy Coding!