I have a modal popup that contains accordion and each tab contains a form which is rendered using partial view.
The problem I have is that when I toggle, the accordion doesn't expand to full height (so that I can see all the form elements). Each accordion tab only extends like 20px.
How can I get it to auto extend height based on content?
#model Models.ContentModel.ProductContent
<div id="accordion" class="accord">
<h2>
Open New Product</h2>
<div>
#Html.Partial("../PartialViews/NewProduct", Model ?? new Models.ContentModel.ProductContent())
</div>
<h2>
Manage Product</h2>
<div>
#Html.Partial("../PARTIALVIEWS/EDITProduct", Model ?? new Models.ContentModel.ProductContent())
</div>
</div>
<script type="text/javascript">
$(function () {
$("#accordion").accordion({
autoHeight: true
});
});
</script>
had to use
autoHeight: false
i would think it should be autoheight set to true but jquery don't work that way.
<script type="text/javascript">
$(function () {
$("#accordion").accordion({
autoHeight:false
});
});
</script>
Related
I have a mvc 5 project using a database.
In my project I have a Blog-page. This page is loaded using a controller.
In the page I dynamically create a list of items (blogitems) using a simple '#foreach(var item in collection).
Each item has an id (off course), a title and a description.
#foreach (var item in Model.VmBlogItems)
{
<div class="allblogs">
<div class="blogtitle">
<h4>#item.Title</h4>
</div>
<div id="allblogcontent">
#item.Description
</div>
<a id="moreless" href="">Lees meer</a>
</div>
}
My question now is how I can create a button so that when clicked on it the description is hidden or shown.
I also wrote some jquery:
<script type="text/javascript">
//when ready
$(function () {
$('#allblogcontent').hide();
$('#moreless').click(function () {
$('#allblogcontent').toggle();
});
});
</script>
However when I try this, all my items show or hide the Description.
Does anybody know how I make sure that only the Description of the selected item is shown or hidden? I just spend 6 hours reading, trying and sadly enough failing to make it work. I could use some help.
First you modify the markup so each description tag has a unique id attached to it, and the corresponding button has a reference to that id
#{
int i=0;
}
#foreach (var item in Model.VmBlogItems)
{
i++;
<div class="allblogs">
<div class="blogtitle">
<h4>#item.Title</h4>
</div>
<div id="allblogcontent#i" class='someclass'>
#item.Description
</div>
<a id="moreless" href="" data-desc-id='allblogcontent#i'>Lees meer</a>
</div>
}
Your code can figure out which is which now.
<script type="text/javascript">
//when ready
$(function () {
$('.someclass').hide();
$('#moreless').click(function () {
$('#' + $(this).attr('data-desc-id')).toggle();
});
});
</script>
A footnote
This approach will make static references between the tags, so you can move the markup around if you like. The other two solutions shown here, so far, will break if you change the order of the tags.
Just change the below section from
$('#moreless').click(function () {
$('#allblogcontent').toggle();
});
to
$('#moreless').click(function () {
$(this).siblings('#allblogcontent').toggle();
});
I have a c# application using a repeater and jQuery to add a little pizzaz to my application. The first portion of the jQuery functions correctly as the content slides up and down to hide or show whatever ONE section had been clicked on, but the second portion changes all classes including the one inside the section clicked. Why is this?
Here is my repeater layout:
<ItemTemplate>
<div class="head"><span class="expand"> </span> <%#Eval("Job_Title") %></div>
<div class="row" style="margin:0px 0px 20px 50px; display: none;">
<div><%#Eval("Status") %></div>
<div><%#Eval("Department") %></div>
<div><%#Eval("Posting_Site") %></div>
<div><%#Eval("Job_Duties") %></div>
</div>
</ItemTemplate>
Here is my jQuery:
<script type="text/javascript">
$(function () {
$('.head').click(function () {
$(this).next('div.row').stop(true, true).slideToggle(400, function () {
$('.expand').toggleClass('collapse');
});
});
});
</script>
$('.expand') targets all elements with that class, if you just want to target the one inside the current .head you'd do
$(this).prev('.head').find('.expand').toggleClass('collapse')
or the opposite would be
var thisOne = $(this).prev('.head').find('.expand');
$('.expand').not(thisOne).toggleClass('collapse');
Your use of a class as your selector and then using next, means that you are iterating over each 'head' that contains 'div.row'.
You need to change it this:
$(function () {
$('.head').click(function () {
$('.head div.row').slideToggle(400, function () {
$('.expand').toggleClass('collapse');
});
});
});
I am currently having problem retaining the bootstrap tab after my fileupload postback.
The code is as follow
<script type="text/javascript">
$('#myTab a[href="#image"]').click(function (e) {
e.preventDefault();
$("#myTab").removeClass("active");
$(this).addClass('active');
$(this).tab('show');
})
$('#myTab a[href="#information"]').click(function (e) {
e.preventDefault();
$("#myTab").removeClass("active");
$(this).addClass('active');
$(this).tab('show');
})
$('#myTab a[href="#password"]').click(function (e) {
e.preventDefault();
$("#myTab").removeClass("active");
$(this).addClass('active');
$(this).tab('show');
})
$('#myTab a[href="#account"]').click(function (e) {
e.preventDefault();
$("#myTab").removeClass("active");
$(this).addClass('active');
$(this).tab('show');
})
</script>
Can anyone enlighten me on how to retain this bootstrap after postback?
Well, I had this issue already and I solved it this way:
Include a new HiddenField on your page and set its value to the first tab that need to be shown:
<asp:HiddenField ID="hidTAB" runat="server" Value="image" />
On every click function you defined to alternate the tabs, set the HiddenField value to the actual tab clicked.
document.getElementById('<%=hidTAB.ClientID %>').value = "image";
On your jQuery document.ready function, use the HiddenField value to alternate to the last tab opened before the Postback.
$(document).ready( function(){
var tab = document.getElementById('<%= hidTAB.ClientID%>').value;
$( '#myTab a[href="' + tab + '"]' ).tab( 'show' );
});
Here's the Bootstrap Tab Documentation and here's the jQuery Ready documentation
With reference to the above ideas here is how I did it (full code included)
In your HTML Page, in the < Head > section put
<script type="text/javascript">
$(document).ready(function () {
var tab = document.getElementById('<%= hidTAB.ClientID%>').value;
$('#myTabs a[href="' + tab + '"]').tab('show');
});
</script>
in the < body > section put a hiddenfield
<asp:HiddenField ID="hidTAB" runat="server" Value="#tab1" />
and also in the < body > section have the Bootstrap 3.0 related code
<ul class="nav nav-tabs" id="myTabs">
<li>Home page</li>
<li>another page</li>
</ul>
Do not set any tab to active (this is set by the initial Value="#tab1" of the Hiddenfield).
Then add a button to the tab2 DIV
like so:
<div class="tab-pane" id="tab2">
<asp:FileUpload ID="FileUpload2" runat="server" /> (note this example is for uploading a file)
<asp:Button ID="FileUploadButton" runat="server" Text="Upload File" onclick="FileUploadButton_Click" />
</div>
Lastly add your c# code behind to set the value of the hiddenfield
protected void FileUploadButton_Click(object sender, EventArgs e)
{
hidTAB.Value = "#tab2";
}
on posting back the JQuery will read the new value in the hiddenfield and show tab2 :)
Hope this helps someone.
Trev.
Please try this
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<div class="panel panel-default" style="width: 500px; padding: 10px; margin: 10px">
<div id="Tabs" role="tabpanel">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li><a href="#personal" aria-controls="personal" role="tab" data-toggle="tab">Personal
</a></li>
<li>Employment</li>
</ul>
<!-- Tab panes -->
<div class="tab-content" style="padding-top: 20px">
<div role="tabpanel" class="tab-pane active" id="personal">
This is Personal Information Tab
</div>
<div role="tabpanel" class="tab-pane" id="employment">
This is Employment Information Tab
</div>
</div>
</div>
<asp:Button ID="Button1" Text="Submit" runat="server" CssClass="btn btn-primary" />
<asp:HiddenField ID="TabName" runat="server" />
</div>
<script type="text/javascript">
$(function () {
var tabName = $("[id*=TabName]").val() != "" ? $("[id*=TabName]").val() : "personal";
$('#Tabs a[href="#' + tabName + '"]').tab('show');
$("#Tabs a").click(function () {
$("[id*=TabName]").val($(this).attr("href").replace("#", ""));
});
});
</script>
After quite a long time trying out the bootstrap tab.. i decided to change to jquery tab.
In the first place, jquery tab also give the same problem i encounter in this situation..
but after much effort in looking for solution and trying out codes after codes.
i managed to find a solution
I'm really thankful to the person who provide this solution.
In this solution, it uses sessionStorage (to me, its a new stuff that i never heard of)
& the codes are
$(document).ready(function () {
var currentTabIndex = "0";
$tab = $("#tabs").tabs({
activate : function (e, ui) {
currentTabIndex = ui.newTab.index().toString();
sessionStorage.setItem('tab-index', currentTabIndex);
}
});
if (sessionStorage.getItem('tab-index') != null) {
currentTabIndex = sessionStorage.getItem('tab-index');
console.log(currentTabIndex);
$tab.tabs('option', 'active', currentTabIndex);
}
$('#btn-sub').on('click', function () {
sessionStorage.setItem("tab-index", currentTabIndex);
//window.location = "/Home/Index/";
});
});
In the above answer : the document ready function must be modified as below
$(document).ready(function () {
var selectedTab = $("#<%=hidTAB.ClientID%>");
var tabId = selectedTab.val() != "" ? selectedTab.val() : "tab1";
$('#myTab a[href="#' + tabId + '"]').tab('show');
$("#myTab a").click(function () {
selectedTab.val($(this).attr("href").substring(1));
});
});
I am trying to show a loading div on button click, but it is not working at the moment.
Javascript :
<script type="text/javascript">
$(document).ready(function (e) {
$('#BtnSend').click(function () {
$('#<%= loading.ClientID %>').toggle("slow");
});
});
</script>
Div:
<div id="loading" class="Loading" runat="server" visible="false">
<div class="loadingImg">
<img src="../Images/loading.gif" alt="loading" />
</div>
</div>
button:
<asp:Button ID="BtnSend" runat="server" Text="SEND"
onclick="BtnSend_Click" CssClass="pressbutton2" Height="36px" ClientIDMode="Static" />
Also how can I call the same javascript code in the jsfiddle above within code (c#)?
You have to select jQuery version from left menu, jsFiddle does not support to interpret asp.net code and generate html as asp.net engine do.
Live Demo
$(document).ready(function (e) {
$('#BtnSend').click(function () {
$('#loading').slideToggle("slow");
});
});
If you are trying to do same in asp.net and your BtnSend is server control which does not have ClientIDMode set to static then you will need to use ClientID to bind event.
$(document).ready(function (e) {
$('#<%= BtnSend %>').click(function () {
$('#<%= loading.ClientID %>').slideToggle("slow");
});
});
The ClientID value is set to the value of the ID property. If the
control is a naming container, the control is used as the top of the
hierarchy of naming containers for any controls that it contains, Reference.
I am new to JQuery
This thread is a half-duplicate of my older thread
The main problem is that I want to create a box around the current item to which mouse is pointing, and when mouse leaves that item the box will disappear.
<script src="Scripts/jquery-1.10.1.min.js" type="text/javascript"></script>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
<div class="clickable" url="http://www.google.com">
Google
</div>
<div class="clickable" url="http://www.bing.com">
Bing
</div>
<script type="text/javascript">
$("div.clickable").mouseover(function () {
// $(this).css("outline-style", "solid");
// $(this).css("outline-color", "Navy");
// $(this).css("outline-width", "thin");
$("#div.clickable").each(function () { $(this).removeClass("Selected") });
$(this).addClass("Selected");
});
</script>
<script type="text/javascript">
$("div.clickable").click(
function () {
window.location = $(this).attr("url");
});
</script>
And Style would be
.clickable
{
cursor:pointer;
cursor: hand;
}
.Selected
{
outline-style:solid;
outline-color:Navy;
outline-width:thin;
}
Yet it is not working when mouse goes over the other item. it does not clear the outline of the previous item.
Just use CSS pseudo class :hover:
DEMO
.clickable:hover{outline:thin solid navy}
You can do this with pure css:
.clickable:hover{
outline-style:solid;
outline-color:Navy;
outline-width:thin;
}
.clickable
{
cursor:pointer;
outline-style:none;
outline-color:transaprent;
outline-width:none;
}
no js needed.