I have a plugin that let you add text over an image. If you add the URL of the image into a field it loads the image on the left side and let you add some text over it..
what i really want is to display an image gallery so when i click over an image it will copy the source to into a field and loads the image automatically..
I'm getting the image source into input field when i click over the image with the script below but its not loading the image on the left side...
This is the plugin www.chistesdominicanos.com/editordememe ... if you click the image of the guy with the bottle at the bottom of the page it will copy the image source into the URL field but its not loading the image on the left... If you do it manually Copy/Paste the URL its going to work.. can you please tell me what im doing wrong?
<script type="text/javascript">
function clicked(address) {
document.getElementById('meme-image-url-0').value = address.src;
document.getElementById('meme-top-text-0').focus();
}
<form>
<label for="copy_img">Image</label>
<input type="text" name="meme-image-url-0" id="meme-image-url-0" />
</form>
<li><img src="http://www.iltlaugh.com/wp-content/uploads/2012/10/437273.jpg" onclick="clicked(this)"/></li>
</ul>
Related
I want to style my Image Field Button (Choose File) with CSS. Currently, its displaying in the default theme. I am using Bootstrap V5.0.1, Django V3.2.12, Python 3.7.6.
First, I tried to identify or add a class or id which I can add and style the button regularly but was unable to add as the button was added by Django Image Field. The Code in my forms.py is given below:
from django import forms
class ImageUploadForm(forms.Form):
image = forms.ImageField(label='')
Then I used the Hover functionality of the Chrome Developer Tools to identify any leads and found that the button and its area had 2 id's #file-upload-button and #id_image.
I tried to add CSS to the above-mentioned id's but did not get the result i desired. I want to style the Choose File Button Below also if possible can i add any bootstrap to the button, any help would be appreciated! Thanks.
HTML-Django Code
<div class="form-group text-center">
<form method="post" enctype="multipart/form-data">
{% csrf_token %}
{{ form }}
<br>
<button type="submit" id="btnUpload" class="btn btn-primary" style="margin-top:20px;">Upload</button>
</form>
</div>
i was having the same problem and came upon this article https://www.quirksmode.org/dom/inputfile.html
The ideia is to create a useless button and add style to it, then overlap both with the image field button on top, and then set the opacity of the image button to 0.
The image field button will still work, but you will only see the button with the style you add.
I have a site on Azure website. Sometime it takes several seconds when redirecting to the login page. And the screen shows a blank page and users are complaining. Is it a way to show some splash page while it's loading the login page?
You can make use of an animate gif saying loading or stuff like that. what you need to do is that place that Gif in a div. Hide the div initially and make it visible once you click the login button or link like this:
<script>
$('#loader').show();<--this makes the Gif visible while you are redirecting to login page-->
</script>
<html>
<body>
<div id="loader" style="display:none"><img src="~/Content/loading1.gif" /></div><--div with the hidden gif image-->
<div id="mainDiv"><--the div with you main content of the page-->
<--this can be a login button or action link-->
<input id="submit" type="submit" value="Save" formmethod="post" onclick="showGif()" />
<--rest of your code-->
</div>
</body>
</html>
<iframe id="myFrame" runat="server" name="main" width="100%" src="http://www.somewebpage.com/" />
This is simple iFrame I put on my webpage. After I click on couple of buttons on that website, iframe source remains the same. But I want to be able to retrieve the changed source every time I click on buttons, links etc...
How can I achieve this?
Edit: This is the screenshot of my work. When I click on "Git" button, webpage loads on the iFrame. However, when I surf on the website, I want textbox to be updated to the source of the iFrame.
Ok, here is an idea that I test it now and its work. You change the input box after the iframe loads using the onload event of the iframe
<script>
function HasChange(me)
{
document.getElementById("WhereIamId").value =
document.getElementById("WhatIShowID").src;
return false;
}
</script>
and the html
<input type="text" id="WhereIamId" value="" />
<iframe src="page1.aspx" onload="return HasChange(this);" id="WhatIShowID" ></iframe>
You can use also the document.getElementById("<%=myFrame.ClientID>") to get the rendered id. After your iframe loads you update the text box with the current url.
I have some bulk images inside DIV tag and If I click an image inside this DIV tag I need to display that Image in Image control.
Here is my response where I am displaying all the bulk images:
<script>
$('#showfilelist').append("<div id=" + file.id + " class='thumb'><a href='uploads/" + document.getElementById("currentDirectory").value + "/" + file.name + "' target='_blank' rel='gallery'><img src='uploads/" + document.getElementById("currentDirectory").value + "/" + file.name + "' width='50' height='50'/></a></div>");
</script>
Now If I click an image inside the above DIV the selected image should be displayed inside this Image control
<asp:Image ID="Image1" runat="server" BackColor="#0099CC" BorderStyle="None"
Height="624px" Width="500px" />
I guess you're creating a kind of Gallery application, or something like that, and AMAIK from your post, you want to show the large image, on click on its thumbnail.
Then my suggestion is to set the src attribute of the Image control at client-side, so that browser sends an HTTP GET request to get the image.
So, I recommend that you follow these steps:
For each thumbnail, add a custom attribute like data-large-image-url and set its value to the link to the large image of the thumbnail.
See what is the rendered result of ASP.NET's Image control and find it using jQuery (you can use ClientIDMode='Static' to be more productive)
On click of each thumbnail, simply set the src attribute of the value of large image to the data-large-image-url attribute.
$('#thumbnails').click(function(){
$('#large-image').attr('src', $(this).attr('data-large-image-url'));
});
If you are truly creating a gallery, don't reinvent the wheel and use a tried and true plug-in. I recommend Lightbox2.
I want to upload a file using asp.net so I do not want to post back the page while uploading . How can I do that and is there any way to do it using Ajax .
Make the file upload form target a hidden iframe.
<iframe name="UploadTarget" style="display:none"></iframe>
<form target="UploadTarget" action="postfile" method="post" enctype="multipart/form-data">
<input type="file" name="MyFile">
<input type="submit" name="submit" value="Send me a file">
</form>
The final trick is to add to your response page:
<script type="text/javascript">parent.somecallbackfunction("Here is some data")</script>
To let your parent page ( the one containing the hidden iframe) know that the the file upload has completed.
An iframe can be placed on your page and can contain an input element, type=file. You can manipulate and submit the iframe form via javascript. You can hide the iframe by setting its CSS style to display:none. This is generally known as the hidden iframe method.
Use something proven like SWFUpload and save yourself the time of writing your own client code.