I have an accordion control in ASP 3.5, with multiple accordion panes. For the sake of simplicity, I will only focus on one pane as the problem is pane specific. Using JQuery, I created a draggable function and applied it to my .drag CSS class. On Page_Load, I create a bunch of image objects and assign that class to them, in addition to an image. Once I load the page, I can drag all the images around as intended. What I can't do, however, is drag those images outside of the accordion panel they were created in! Is there a way around that? I tried using this, but to no avail:
<script type="text/javascript">
$(function () {
$(".drag").draggable({ containment: 'document' });
});
</script>
Is there something in the actual aspx page that I should be focusing on? I'm adding the images to a panel in my accordion pane, and it looks like this:
<ajaxToolkit:AccordionPane id="AccordionPane1" runat="server">
<Header> Chassis</Header>
<Content>
<asp:Panel ID="ChassisPanel" runat="server">
</asp:Panel>
</Content>
</ajaxToolkit:AccordionPane>
I appreciate any guidance!
Have you tested this in multiple browsers? Sounds to me like an issue I had with IE. Perhaps adding a large Z-Index value to your .drag class in CSS would help.
All I had to do was add the clone helper, then anything I drag is able escape its parent container. This is how I updated my drag line and now it works:
$('.drag').draggable({ revert: true,helper: 'clone' });}
Now for the life I me I can't figure out the droppable bit :)
Related
I am beginner of cordova learning project and creating a sample application using eclipse. Using CSS file I am able to change image, height, width, margin and padding around it.
Now, to show Labels, Buttons and Radio button, listview how to add such UI components and where to add in index.html or css and handling a click event of button?
You could add any HTML component in the body tag.
<body>
//your code for various elements goes here.
</body>
But, if you want to add these components in real time use the innerHTML property (javascript) and allocate an event listener to that component.
HTML-
<label id="alpha1" onclick="fx()">Placeholder</label>
JS-
document.getElementById('alpha1').innerHTML="Content"
function fx (){
alert('Label Clicked');
}
I needed to set the padding for text box controls in my ASP.NET web forms application because the were rendering inconsistently with Dropdownlist controls on the browser. The Dropdownlists had some padding between the text and the border and the Textboxes did not have any.
Visual Studio does not provide a direct padding property for controls so trying to set/change padding for controls like Textboxes and Dropdownlists can be very frustrating. After a lot of searching without any getting any useful solutions i was able to do it. See Answer below.
I strongly recommended you learn some CSS, so that you would not depend solely on the web controls provided by visual studio. As in your case, just put "cssclass='somestyle'" into your textbox control and that is:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style>
.padding {
padding:.5em;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox runat="server" ID="txtDemo" CssClass="padding"></asp:TextBox>
</div>
</form>
</body>
</html>
The answer lies in the CssClass Attribute of the control which go like Auto-Style1, Auto-Style2, etc.
If you have Dreamweaver installed you can open your .aspx web-form and select and edit the the CssClass Rules. (Select the Css tab on the properties tab below the page in Dreamweaver) Here you can set padding Rule (See 'Box option' in the Css Rule Definions - Uncheck 'Same for all' to set different Left, Top, Bottom, Right padding values) Save and the go back to Visual studio load the saved page and set that CssClass property of the control to the edited CssClass. (Do not set the CssClass for the control in Dreamweaver - you are likely to get errors when you run your application) I only edited the padding rule so i do not know the effect of editing other CssClass rules.
It Worked! I have 5px padding for my Textboxes and they are now consistent with Dropdownlist padding (Chrome browser). They look lovely!
Hope this helps Someone.
I've been reading threads (specifically this one: iFrame inside Jquery accordion) and still not finding (or not understanding) how to get the Spotify playlist I have hidden in a closed accordion section to fully load on page load.
Many solutions have been offered that I've tried, so far, nothing has done the trick (probably due to my JS noobness). I'd appreciate any insight. Please do be specific about where to put what as I'm very new at Javascript.
JS:
<script>
$(function() {
$( "#accordion" ).accordion({
collapsible: true,
autoHeight: false,
alwaysOpen: false,
active: true
});
});
</script>
Relevant HTML:
<h3 id="bubble">The Bubble Creatures</h3>
<section id="bubble">
<div id="bubble-story"><p>Blah blah</p></div>
<iframe id="spotify" src="https://embed.spotify.com/?uri=spotify:user:seedpodpub:playlist:4MsCt5Fkg5G99Tb5VFqzQ4" width="300" height="380" frameborder="0" allowtransparency="true"></iframe>
</section>
Thank you again!
o.
UPDATED WITH MORE INFO:
Essentially, I want to do this:
If the section style is "#section1 {display:none;}" then do nothing.
If the section style is "#section1 {display:block;}" then trigger the div #spotify to load.
This should overcome the half-loading issue I'm seeing with the hidden iframe (I hope)? I'm looking at this post: Event detect when css property changed using Jquery, again, failing to implement the suggested solution.
It seems like you have found your way out of this but for others I suggested a rather easy solution for this.
I was trying to load my Google map api into an iframe which was inside the jQuery Accordion.
The problem is if you load the accordion as closed, the iframe never loads so if you try to open the accordion you wont see anything in it.
The solution is that to load the accordion as open or active first (active: '0') and then use this code to close your accordion as soon as the page gets loaded:
$("#accordion-map").accordion(
{
active: 'none'
}
);
So what happens is that when you declare your accordion its open and the above code close it right after ;) so you never see it open.
Worked for me just fine in both Chrome and FireFox.
I am using CalendarExtender control which is assign text box,CalendarExtender fine below the text box for all,but my problem is I have a text box bottom of the page,so need to scroll down and select the text box.
Here is my problem when I scroll and select the text box my calendar is showing some where above screen,not at all correct position.
I change the resolution to avoid scrolling, than it is fine. But my page need compulsory scrolling.
Please any one give me the solution
This is only happens in google chrome.
I found this solution:
Create a new Div with its position set to relative (style="position:relative;")
The Div must contain the textbox and the extender
hope this work for you
Set PopupPosition Property of CalendarExtender for set the position of CalendarExtender.
You Can select Popup Position any of following for CalendarExtender.
PopupPosition=” BottomLeft”
PopupPosition=” BottomRight”
PopupPosition=” Left”
PopupPosition=” Right”
PopupPosition=” TopLeft”
PopupPosition=” TopRight”
I made a function to avoid this, just add:
<script type="text/javascript" language="javascript">
function onCalendarShown(calendar) {
var top = $("#" + calendar._element.id).offset().top + $("#" + calendar._element.id).height() + 5;
$("#" + calendar._container.id).css({ 'top': (top + 'px') });
}
</script>
and add the property OnClientShown="onCalendarShown" in your CalendarExtender.
There is a PopupPosition property which Indicates where the calendar popup should appear at the BottomLeft(default), BottomRight, TopLeft, TopRight, Left or Right of the TextBox. Assign your textbox TopLeft or TopRight position.
<ajaxToolkit:Calendar runat="server"
TargetControlID="Date1"
CssClass="ClassName"
Format="MMMM d, yyyy"
PopupButtonID="Image1" PopupPosition="Give your desired position" />
Probably a little late for the original poster but the following has two suggestions, the latter of which worked for me:
Calendar Extender Problem
Since this is an old post, I thought my solution to the same issue might be relevant to others.
We where using an outdated version: 3.0.xxx
We had to upgrade to latest version: 4.1.xxx
Above versions is the AjaxControlToolkit dll version - not the version you see on NuGet, today the NuGet package ("Ajax Control Toolkit") will be something like 7.xxx.
FYI - My research: I've been using the samples of latest AjaxControlToolkit version to verify if my bug was solved if I upgraded (since I knew exactly how to reproduce my position-issue). At least one of the two sites below should work:
http://www.asp.net/ajaxlibrary/ajaxcontroltoolkitsamplesite/ (official - slower)
http://www.ajaxcontroltoolkit.com/ (independent - faster)
Simply put the following code into your page
<style type="text/css" rel="stylesheet">
.ajax__calendar {
position : absolute;
}
</style>
The best way to solve this issue is just add an ajax assembly to your page, on the top:
<%# Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="ajaxToolkit" %>
And don't forget to add the tagprefix on the calender extender as "ajaxToolkit". If it's something else:
ex:
<ajaxToolkit:CalendarExtender ID="txtPostingDate_CalendarExtender"
runat="server" Enabled="True" TargetControlID="txtPostingDate"
Format="MM/dd/yyyy">
</ajaxToolkit:CalendarExtender>
I have an image that I will use as the button. I need some code that will make the page scroll smoothly down 400px every time the image is clicked.
I think JQuery or Javascript would do the trick, I am not really sure because I do not know them.
It would be even better in fact, if instead of button, I could just have a keyboard shortcut. Just like Google on Google+, "J" and "K" are used to move up and down the posts. This is exactly what I am trying to achieve. Every post in my site will be the same height so that might make it easier to code.
Just bind an animate function to the click event of your image or button and let it animate the scrollTop property with 400.
For example, place this button on your page:
<input type="button" value="Scroll" id="scroll" />
And use this piece of JavaScript:
$('#scroll').click(function() {
$('body').animate({scrollTop: +400}, 1000);
})
Just make sure jQuery is loaded and it will work.
Load jQuery by adding this just before the body end tag:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
And the best way to include the JavaScript snippet is to place the following between the script rule above and the body end tag.
<script type="text/javascript">
$(document).ready(function() {
$('#scroll').click(function() {
$('body').animate({scrollTop: +400}, 1000);
})
});
</script>