I have a page which includes details of the registered users.
Every html table includes 80-90 users.
For every user there is a $username variable.
I normally show their pictures in a table like the code below.
print "<a href=\"small-avatar-$username.jpg\" target=\"_blank\">
<img src=\"big-avatar-$username.jpg\">
</a>";
But the user can open images in a new tab. I want to show big avatars easily.
My first choice was lightbox-jquery. But because i use twitter-bootstrap in my site, i decided to use default bootstrap and jquery features.
I saw that there is "bootstrap-modals". When user clicks link, i don't plan to show anything more than i big picture.
I tried this:
print "<a href=\"#$username" data-toggle=\"modal\" class=\"img-modal\" >
<img src=\"small-avatar-$username.jpg\" ></a>";
print '</td>';
.
print "<div id=\"$username\" class=\"modal\">";
<img src=\"big-avatar-$username.jpg\">
print "</div>";
.
<script type="text/javascript" id="js">
$('#username').modal();
</script>
I suppose putting $('#username').modal();
for every user to my page will make HTML file huge.
But then I tried class name of anchor like this: $('.img-modal').modal();
But this didn't work.
What would you recommend in this situation?
I would recommend you to use a HTML5 Custom Data Attributes in your <a> tag to identify the username and keep your img-modal class.
"<a href="#myModal" data-username='".$username."' class="img-modal">...
Trigger the call to modal on click on .img-modal (you don't need the data-toggle="modal")
$('.img-modal').click(function(event) {
You can get the value of the username by using
var username = $(this).attr('data-username')
Since you have the username you can replace the src property of your <img> tag in your unique modal with something like.
$("#img-in-modal").attr("src","big-avatar-" + username + ".jpg")
And open your modal
$('#myModal').modal('show')
And finally, make sure bootstrap-modal.js or boostrap.js is included.
Related
I am not sure why my text for the link is not visible on the page but, when I take my mouse to the area where I was expecting a link text then I am able to click that
blank area" and able to download correct file!
Here is the code structure:
<html>
<head>
some heading/styling link etc.
<body>
some code related to creating dropdown and populating it (form used)
<?php
if submit button is clicked then bunch of variables are populated and
user receives an email with result file. Ideally, I would like to be able
to display a result file link inside this php code.However, I don't know
if php allows to create a hyperlink. So, I was testing to create a link
outside php code. The php code does some python query.
exec("/path/to/python script that does query $var1 $var2 $var3 2>&1",
$output)
?>
<a href="/<?php echo $output[8] ?>"Link to query result</a>
</body>
</html>
So, the text "Link to query result" is nowhere visible but the link exists. What is happening here?
Anchor's opening tag misses '>'
Change
<a href="/<?php echo $output[8] ?>"Link to query result</a>
to
Link to query result
I am using this cool script http://qpoit.com/marcofolio_demo/apple_search/ however when I click on a search result, I want it to be added as html content to an id which I will use like . I know this is done with $("#displayContent").html(data); however I need the content of search result that I clicked on to be and not all the results found. Please help
The rpc.php-file of the search, contains the function, which generates the output of the search.
In line 29, change the content to a JavaScript-function, which does this work for you.
// Used in line 29 in rpc.php
echo '<a href="'.$result->url.'">';
// Change it to something like
echo '<a onclick="applyContent('.$result->url.')">'
After that, head back to the index.html (or the file in which you are using the apple-search), make sure jQuery is loaded and add something like this:
<script type="text/javascript">
// Use the same function name, as in the php-file
function applyContent (resultURL) {
// Use jQuerys get-function to get the content of the file you've found in the search
$.get(resultURL, function(data) {
// Change '#finalResult' to the css-selector, of the element, which should contain the result at the end
$('#finalResult').html(data);
});
}
</script>
Once you click on a search-result, it should make it the content of #finalResult, or whatever element you choose.
I have a Sharepoint 2010 site that has a manual in it, that I'd like to write with the RichHtmlField. I'd like every h1 heading to be enclosed by an anchor such that I get something like
<a name="_section_1"><h1>This is my heading for section 1</h1></a>
I'd like it such that a office user can do this simply enough. What's the easiest way to go about this? I tried using the ItemUpdated event receiver to modify the markup after the user updates it, but this seems like a pretty dodgy and problemmatic way of going about it. Could there be an easier way to do all of this? Perhaps by adding custom markup or style to the ribbon?
I'd recommend using javascript (jQuery) to alter the elements once the page has been rendered. It would look something like this (reference):
<script type="text/javascript">
$(document).ready(function(){
var counter = 1;
$(h1).wrap(function(){
var name = "_section_" + counter;
return "<a name='" + name + "' /a>"
});
});
</script>
Hi I have the following html inside one of my javascript files.
function addToInfoWindow(infoWindowContent)
{
infoWindowString = '<div id="infoWindowString">'+
'<img src="assets/images/rails.png">'+
'<h2>You Clicked:</h2>'+
'<p>'+infoWindowContent+'</p>'+
'<p>See more info</p>'+
'<p>see news</p>'+
'</div>';
infoWindow.setContent(infoWindowString);
}
The problem is I cannot get the image to show up in the info window.
I realize this \could be because rails has some sort of helper function to show images in its webpages. But I haven't been able to find how to call it or what it is. Can someone help please.
EDIT- Changed to following after the response below:
function addToInfoWindow(infoWindowContent)
{
infoWindowString = '<div class="infoWindowString">'+
'<img src="/Users/AM/Documents/RailsWS/cmdLineWS/Businesses/app/assets/images/rails.png">'+
'<h2>You Clicked:</h2>'+
'<p>'+infoWindowContent+'</p>'+
'<p>See Menus</p>'+
'<p>Upload a Menu</p>'+
'</div>';
infoWindow.setContent(infoWindowString);
}
But image still not showing up :(
If you're using the default setup with rails asset packaging it will append a timestamp onto asset filenames meaning just browsing to /assets/images/foo.jpg won't necessarily give you what you want.
The rails helper to get an image tag is just image_tag 'example.jpg'. OR if you just want the url, image_url 'foo.jpg'.
For any given image you want stored you could attach it to a data attribute, for instance in a view you could do:
<a id="image_link" href="#" data-image-url="<%= image_url 'foo.jpg' %>">Click to see image</a>
You can get that path anywhere in jQuery using
var imageUrl = $('a#image_link').data('image-url')
You are using a relative URL for your image (assets/images/rails.png), so the browser will try to load it from an address relative to the current page. For example, if the image is at
http://example.com/assets/images/rails.png
but you are currently at
http://example.com/something/somepage.html
the browser will try to load it from
http://example.com/something/assets/images/rails.png
and it will fail.
You should be using an absolute URL.
There is some HTML code which appears on the page as the result of AJAX request/response. This HTML contains GET requests to another php script. Links containing this requests are not working while "real" HTML (added on the page manually) works normally.
When I open the page source with Ctrl+U I see empty div's (but they actually have HTML retrieved via AJAX) and the full-fledged HTML code added manually. Can't figure out how can I make the AJAX-retrieved links working.
This is how I try to form the HTML code which must be added to the page as the result of AJAX response.
<?php
//some selections from the database...
//all subsequent varibles are the members of $row = mysql_fetch_array($query) array;
$html_to_be_inactive =
'<li id="productID_' . $productID . '">
<a href=work.php?action=deleteFromBasket&productID=' . $productID . ' onClick="return false;">
<img src="images/delete.png" id="deleteProductID_' . $productID . '">
</a> ' . $productName . '(' . $totalItems . ' items) - $' . ($totalItems * $productPrice) . '</li>';
echo $html_to_be_inactive;
?>
And that is it, result of 'echo' appears on the page after successful AJAX request as the simple HTML, and it does nothing when I click the link.
I do not perform DOM 'append' methods as I'm not familiar with DOM yet. I can see all the elements mentioned in $thml_to_be_inactive but the link seems to be really inactive. Also this HTML is absent in the "Ctrl+U" output, I can see it only when I select "Inspect element" in the browser.
The HTML which was added manually operates the same items as usual, but I need AJAX-retrieved HTML to be working as well.
I suspect I need to perform some 'append' method via JavaScript or jQuery, but I don't know how to do it in a proper way.
Thanks.
You need to put your href in quotes.
onClick="return false;" will override the default action (go to href) of your link. You need to bind an other event to the link, or just remove `return false'.
Your links use relative paths.
You're probably inserting the HTML into a page in a different directory, breaking the relative paths.
If so, you need to switch to absolute paths.