I have a certain asp.net page where I am loading the content into a using a javascript.
Basically it is like loading a content from a third party.
And I have an image which should be loaded after the javascript generates the content in
But currently what happens is the image is showing before the content is loaded into div, which is bit in appropriate. Could you please suggest me a method to do the other way around.
I have put a code sample with this.
In aspx page.
<body> <div id="bodyDiv" runat="server">
<script src="//platform.linkedin.com/in.js" type="text/javascript"></script>
<script type="IN/CompanyProfile" data-id="xxxxx" data-format="inline"></script>
<a id="closeLink" href="http://www.xyz.com" class="closedbutton" runat="server"> <img id="closeImg" runat="server" src="images/remove.png" /></a>
</div></body>
What method should I use to load the image after the content from javascript is loaded.
Thanks !
Your image is loading with your page. You could hide that image and make it visible after some delay after document is loaded. And as you have referenced script they will load along with your HTML and when DOM will load, So you could use setTimeout and set some delay to load your image. And load image after document is load see below example.
$(document).ready(function () {
window.setTimeout(function () {
// Your Image code goes here
// Set image display:block in this code block
// for example $('img').css('display','block');
}, 2000);
});
You could use a conditional script loader like http://yepnopejs.com/ and then use the following options after the third party scripts are loaded.
You can hide the link (using css display: none;) then show it using JavaScript at the end of your loaded scripts:
document.getElementById("closeLink").style.display="block";
Or you can dynamically add the link to the page after your scripts have ran using either .appendChild() or .innerHTML(). If using JQuery you can do the following:
$(body).append('<a id="closeLink" href="http://www.xyz.com" class="closedbutton"> <img id="closeImg" src="images/remove.png" /></a>');
I would also look to see if the 3rd Party script has a callback function you can hook into when its loaded.
Related
I have a situation. I am using web application of windows(ASP.NET). On page load when my web page appears, it has dynamically generated ImageButtons. I need to fid the X,Y or TOP,LEFT co-ordinates of each ImageButton control on the page WITHOUT CLICKING ON ANY OF THE ImageButtons.. I need to draw a line beetween some ImageButtons on the click of one ImageButton.
Try using some Javascript code or jQuery. Please find below jQuery code
Here i have used position() method which gives you left and top position of the element. You can change the selector based on your need.
Update: Assumed you have HTML like <div id='images-container'> .. all images here </div> and updated selector below for that with each() method
You can also use offset()
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$('#images-container img').each(funcion(){
var coordinates=$(this).position();
coordinates.left;// gives you x
coordinates.top;// gives you y
//save these values in some hidden field and access it in code behind if needed
});
});
</script>
Please refer this post for more information jQuery x y document coordinates of DOM object
I have a JavaScript code which links to survey poll page. When I am embedding the JavaScript code in normal aspx page (without master page), I am getting the survey normally without any issues, but when I am embedding the same code in page which uses master page, I am getting blank page.
This way doesn't work: http://gyazo.com/27f38b5b04897cf0b17747eab05cf746
This way works: http://gyazo.com/c69d3b95afe4a0070cd09834e479a97f
Update
Using <script src='<%=ResolveClientUrl("~/Survey/xlaabsolute.asp?p=1")%>' type="text/javascript" /> renders the poll correctly but the button for voting doesn't do any postback http://gyazo.com/b39fcaa8de3438c8c2a625e3816ba4be.
I can see the content http://gyazo.com/b39fcaa8de3438c8c2a625e3816ba4be
Chances are it's how the script is referenced.
You're using a relative position in your src attribute which could potentially change if it's not in a location that allows Survery/... to be found. Maybe change it to /Survey/... so it always locates the file based on the root path and not where the document currently resides?
You can also make your script tag runat="Server" and reference the script using traditional ASP relative links: src="~/Survey/..." so it resolves correctly.
The way to resolve the issue and make it work regardless of where the control is being used is to use ResolveClientUrl as so:
<script src='<%=ResolveClientUrl("~/Survey/your_script.js")%>' type="text/javascript" />
I am building a cms in C# (.NET) and all content is stored in the database. This includes on-page css and on-page js code. The issue I have is that the handler that loads the js script is processed before the page template so if the js includes any jquery object commands, they throw an error because jquery itself has not been loaded and initialized yet.
For example, my template has a line on the master page near the top like...
<script src="/scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
as you might expect. Then, further down I load page-specific js code like this:
<script type="text/javascript" src="/Handlers/ServeJsByID.ashx?pgsid=<%=pgsID %>&jsid=<%=jsID %>"></script>
where pgsID is the id of the current page and jsID is the id of the javascript record I want to load.
I assume this has something to do with the lifecycle of the .NET page but I have no idea how to force the js load through the handler to occur AFTER the page has already loaded and processed the jquery.js file.
I tried using Page.ClientScript.RegisterStartupScript in the code behind but still get 'Object Expected" errors.
How can I load javascript in code behind and have it processed AFTER the jquery file is loaded?
If you try this:
$.getScript("http://dev.jquery.com/view/trunk/plugins/color/jquery.color.js", function() {
$("#go").click(function(){
$(".block").animate( { backgroundColor: "pink" }, 1000)
.delay(500)
.animate( { backgroundColor: "blue" }, 1000);
});
});
http://api.jquery.com/jQuery.getScript/
Im trying to add a light box which automatically opens up when someone visits my homepage. something similar to
http://directorsof.com/
any idea on how I can do this.
You can use for example colorbox to get a lightbox that opens after the page is loaded.
Download colorbox from here: http://colorpowered.com/colorbox/latest, extract the file and modify the index.html file in the example1 folder.
Replace:
$("a[rel='example1']").colorbox();
with
$("a[rel='example1']").colorbox({open:true});
Open the index.html file in your browser to see the lightbox coming up directly.
are you using a master page?You need to place 2 divs in your file. One that has a fixed position or absolute and dimmer the background, and another div that displays the content.
Check this link out, it is a web messagebox but it will do what you want using a template approach.
http://www.snippetbank.net/detail/snippetdetail/9-aspcsharp/3-filemanipulation/404-Web-MessageBox.html
You can add the following to your home page
window.onload = function() {
//Open your lightbox here
};
Or you can use Jquery all together with something like...
$(function(){
$(body).load(function(){
// Open your lightbox here
});
});
both of the above will fire the lightbox once the page is loaded. Its probably better to use the jquery example as this will ensure that the DOM is ready.
well. The problem i'm facing is i have my own custom control and i do a query , get records and dynamically add html controls to the page based on the data.
Now there's the problem of adding some dynamic javascript
I do this with the help of literal controls.
<asp:Literal runat="server" ID="latEventToolTipJqueryScripts"></asp:Literal>
This works like a charm
<script language="javascript" type="text/javascript">
// <![CDATA[
Sys.Application.add_load(WireEvents_<%=this.ID%>); // fix wiring for .NET ajax updatepanel
$(WireEvents_<%=this.ID%>); // handle page load wiring
function WireEvents_<%=this.ID%>() {
<asp:Literal runat="server" ID="latEventToolTipJqueryScripts"></asp:Literal>
}
// ]]>
</script>
I add the literal text dynamically from code behind.
However, when placing the control in an updatepanel, the postbacks don't update the script.
EDIT: The Sys.Application.add_load rewires the necessary functions just fine with the updatepanel. The problem is that the script that needs to be in place of the literal, doesn't update when in an updatepanel.
I've tried the ClientScript.RegisterStartupScript but it has the same effect as with the literal control trick. Any help?
---------------------------SOLVED (tnx to Pranay Rana)----------------------------------
Got rid of the literal in the ascx side. as well as the Sys.Application.add_load
now it's only in the code behind. The thing that was throwing me off was the JQuery thing.
this.strBuilderJS.Append( "<script language='javascript' type='text/javascript'>" +
"$(WireEvents_" + this.ID + ");" +
"function WireEvents_" + this.ID + "(){"+
" alert('stuff');");
this.strBuilderJS.Append( "}</script>");
and then
ScriptManager.RegisterStartupScript(this, this.GetType(), "strBuilderJS", strBuilderJS.ToString(), false);
Make use of ScriptManager.RegisterStartupScript() to register your script...may resolve problem ...
Check this resolve your problem : Add JavaScript programmatically using RegisterStartupScript during an Asynchronous postback
I would recommend on a different approach. To create a dynamic javascript for any language. I would create a reference to a dynamic file. For this example I will use .NET
Create a test.aspx page and add this script:
<script type="text/javscript" src="js/foo.aspx"></script>
Make sure your page response with the right content type. So for this instance I would add this on page load code behind for your foo.aspx:
Response.ContentType = "application/javascript";
On the foo.aspx html view add your javascript code.
alert("<%=DateTime.Now%>");
Browse your test.aspx page and you should see an alert with the current date
You should be able to move forward from here. The goal is to separate the javascript file from the static page.
Happy Coding.
How to change text of ASP Button control on anchor tag click
We have an ASP Button below and we want to change text when WE click on anchor tag
<asp:Button ID="btn_Add" runat="server" CssClass="button2" onclick="btn_Add_Click"/>
We have following two anchor tags
Add New
Add New
Now we add following code in script tag
<script type="text/javascript" language="javascript">
function changeText1() {
document.getElementById("lbl_header").innerText = 'Add New Teacher';
document.getElementById("btn_Add").value = 'Add';
}
</script>
<script type="text/javascript" language="javascript">
function changeText2() {
document.getElementById("lbl_header").innerText = 'Delete Teacher';
document.getElementById("btn_Add").value = 'Delete';
}
</script>