I am currently developing a website using ASP.NET and C#. In this website I display 2 sets of Image Banners, the first one is filled with my C# code and stays still (does not change).
<div class="divArticleCar">
<div id="OwlDemo" class="owl-carousel owl-theme" style="padding:25px;" runat="server">
</div>
<div class="customNavigation ">
<a class="btn prev "><span class="glyphicon glyphicon-menu-left"></span><br/></a>
<a class="btn next "><span class="glyphicon glyphicon-menu-right"></span><br/></a>
</div>
</div>
The second uses a connection to an external API from an image Database. I have a text input and a button so when user searches for a key word, the second banner updates with new images. I'm using AJAX <asp:UpdatePanel> tag to update the image result.
<asp:UpdatePanel runat="server" id="UpdatePanel2" updatemode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger controlid="btnSearchImage" EventName="ServerClick" />
</Triggers>
<ContentTemplate>
<div class="divArticleCar">
<div id="OwlDemo2" class="owl-carousel owl-theme" style="padding:25px;" runat="server">
</div>
<div class="customNavigation CN2">
<a class="btn prev2 ">
<span class="glyphicon glyphicon-menu-left"></span> <br>
</a>
<a class="btn next2 ">
<span class="glyphicon glyphicon-menu-right"></span> <br>
</a>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
The problem is when the Images in the ContentTemplate are updated. They are just not shown, the banner disappears. I have checked my background code, C# is getting the API results and it is adding the new images, they are just not visible. The Banners are managed with 2 Javascript files.
First: carrusel.js
Second: owlCarousel.js
Does someone know why the images are disappearing??
Every javascript function that is called when the page is done loading needs to be triggered again when you use an UpdatePanel.
So lets say you have something like this somewhere to build the carousel:
$(document).ready(function () {
buildCarousel();
});
You need to add some code to make sure buildCarousel() is triggered again after partial postback.
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function () {
buildCarousel();
});
Related
I have a sidebar panel with an image and a button.
<div class="glyphRow" id="gly_Job" runat="server">
<span class="glyphicon glyphicon-comment glyphiconSideMenu"></span>
<asp:Button ID="btnJob" runat="server" Text="Job"
CssClass="btn btn-primary" OnClick="btnJob_Click" />
</div>
I want to make the button size to 100% so that I can click anywhere on the panel item but in order to do that I have to move the image inside button. How can I do that?
something like that ?
<div class="glyphRow" id="gly_Job" runat="server">
<button ID="btnJob" runat="server" Text="Job"
CssClass="btn btn-primary" OnClick="btnJob_Click">
<span class="glyphicon glyphicon-comment glyphiconSideMenu"></span>
</button>
</div>
asp:button is not standard HTML, it is an ASP.net Webforms control, that renders HTML.
If you really want to keep using asp:button use the following javascript to add a click event to the div
document.getElementById("gly_job").addEventListener(function(){
//Find the button and click it
this.querySelector(".btn.btn-primary").click();
});
For added user friendliness add the following CSS to indicate the whole div is clickable
#gly_job {cursor: pointer;}
Note: code untested and may need syntax error fixes
i was having a problem in searching for some example for make a page dynamic or adjustable on front end can any one help me in this please
for eg on front end a client wants to adjust the links from one place to another or can chage backgrounds looks like fonts + background color + placement of divs etc can any one help me in doing so or can anyone help me with example on internet which solves my problem i will be thankfull to you.......
little code
<body style="background-color:whitesmoke;">
<form id="form1" runat="server">
<div id="div1">
<div id="div1.1">
<asp:Button ID="Button1" runat="server" Text="Button" />
</div>
<div id="div1.2">
<asp:Button ID="Button2" runat="server" Text="Button" />
</div>
<div id="1.3">
<asp:LinkButton ID="LinkButton2" runat="server">LinkButton</asp:LinkButton>
</div>
<div id="1.4">
<asp:LinkButton ID="LinkButton1" runat="server">LinkButton</asp:LinkButton>
</div>
</div>
</form>
here i am handling a major div div1 and child divs div1.1,div1.2,div1.3,div1.4 and i want to change place of these child divs
I'm trying on mail client tutorial on learn.knockoutjs.com. I want to add a "back button" in mail detail block. But that button is auto triggered.
my codes
<div class="viewMail" data-bind="with: chosenMailData">
<button data-bind="click: alert('derp')">derp</button>
<div class="mailInfo">
<h1 data-bind="text: subject"></h1>
<p><label>From</label>: <span data-bind="text: from"></span></p>
<p><label>To</label>: <span data-bind="text: to"></span></p>
<p><label>Date</label>: <span data-bind="text: date"></span></p>
</div>
<p class="message" data-bind="html: messageContent" />
</div>
when i set chosenMailData viewMail div is show. But same time browser alert "derp". I want to when i click button, browser alert at that time. what is wrong?
The alert code will be executed when the with binding renders the content.
Either wrap it in a function or move it to a function in the view model
<button data-bind="click: function() { alert('derp'); }">derp</button>
I am using the addThis widget to display Facebook, Twitter, Google, Blogger, Wordpress logos on my site.
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=xa-1324kj34h243kjh2"></script>
I would like to know of a way that I can capture when someone clicks one of the buttons for Google Analytics tracking reasons. I have attempted to add an onClick to an anchor, but this does not fire - presumably because the markup is re-written by the included JavaScript.
This is my code:
<div class="addthis_toolbox addthis_default_style">
<div class="share-icons" id="share-icons">
<span id="share-title">Share</span>
<span class="spacer"></span>
<a class="addthis_button_email left" title="Email" onClick="_gaq.push(['_trackSocial', 'addThis', 'email']);"> </a>
<a class="addthis_button_facebook left" title="Facebook"> </a>
<a class="addthis_button_twitter left last" title="Twitter"> </a>
<a class="addthis_button_google left" title="Google">
<img src="images/google.gif" alt="G" />
</a>
<a class="addthis_button_blogger left" title="Blogger"> </a>
<a class="addthis_button_digg left last" title="Wordpress"> </a>
</div>
</div>
I am using the addthis_config to report GA activity at the moment, but I wish to report to two profiles, so I am looking for a way of capturing the click as that seems like the best way around the problem.
Make sure you have that div appended on the DOM to ensure you could use events. Otherwise check liveQuery.
I haven't used addThis widget but I would try with jQuery using class name:
$.('.addthis_button_email').click(function(){
//Count it...
});
Or using a custom method in every button:
<div class="addthis_toolbox addthis_default_style">
<div class="share-icons" id="share-icons">
<span id="share-title">Share</span>
<span class="spacer"></span>
<a class="addthis_button_email left" title="Email" onClick="notifyGA(information....)"> </a>
I'm working with a website built in .net,
I have a very simple popup box (thickbox) which works fine up until my developer puts the .net contact form within the popup.
The problem is that the form no longer shows up inside the thickbox, has anybody experience this before?
Its not like its even calling data from elsewhere, all the content is on the page in a hidden div that when requested the javascript shows the popup.
My popup window looks like the following...
<div id="hidForm">
<asp:Panel ID="PL_Im_Popup" runat="server" >
.net stuff here doesnt load!
</asp:Panel>
The stuff outside of the .net panel works fine
</div>
My entire code is...
<div id="hidForm">
<asp:Panel ID="PL_Im_Popup" runat="server" >
<h3>Our Discreet Service</h3>
<p>To request a phone call from a Correlate Search Consultant simply fill out the form below. Discretion is of upmost importance to our Consultants.</p>
<ul id="hidFormLab">
<li><span class="formLabel">Your Name <span class="asterisk">*</span></span><asp:TextBox ID="TB_Name" runat="server" CssClass="formet"></asp:TextBox></li>
<li><span class="formLabel">Your Job Title <span class="asterisk">*</span></span><asp:TextBox ID="TB_JobTitle" runat="server" CssClass="formet"></asp:TextBox></li>
<li><span class="formLabel">Your Email <span class="asterisk">*</span></span><asp:TextBox ID="TB_Email" runat="server" CssClass="formet"></asp:TextBox></li>
<li><span class="formLabel">Your Telephone Number <span class="asterisk">*</span></span><asp:TextBox ID="TB_PhoneNo" runat="server" CssClass="formet"></asp:TextBox></li>
<li><span class="formLabel">Upload your CV</span><asp:FileUpload ID="FileUpload1" runat="server" CssClass="upcv" /></li>
<li><span class="formLabel">What day would you prefer to be contacted on</span><asp:DropDownList ID="DDL_ContactDay" runat="server" CssClass="ddown">
<asp:ListItem>Monday</asp:ListItem>
<asp:ListItem>Tuesday</asp:ListItem>
<asp:ListItem>Wednesday</asp:ListItem>
<asp:ListItem>Thursday</asp:ListItem>
<asp:ListItem>Friday</asp:ListItem>
</asp:DropDownList></li>
<li><span class="formLabel">If you would prefer to be contacted at a specific time,please let us know</span><asp:DropDownList
ID="DDL_Time" runat="server" CssClass="ddown">
<asp:ListItem>Morning</asp:ListItem>
<asp:ListItem>Afternoon</asp:ListItem>
<asp:ListItem>Evening</asp:ListItem>
</asp:DropDownList></li>
<li><asp:ImageButton ID="IB_Submit" runat="server" CssClass="submitformbtn"
ImageUrl="~/_includes/images/buttons/submit.jpg" onclick="IB_Submit_Click" /></li>
</ul>
</asp:Panel>
</div>
I needed <form runat="server"> for this to work, Thanks #David