I have a page I've set up using twitter bootstrap, I have a layout like so:
<div class="container">
<div class="row">
<div id="col-1" class="col-xs-4"></div>
<div id="col-2" class="col-xs-8"></div>
</div>
</div>
and what I'd like to do is animate a change in width. What I had originally tried to do was animate a class change with jquery ui like so:
$(".btn").click(function() {
$("#col-1").switchClass("col-xs-4", "col-xs-1", 300);
$("#col-1").switchClass("col-xs-8", "col-xs-12", 300);
});
but this didn't work, any idea on how do to do this?
Reply to
is it possible to make it animate to col-xs-0 – loriensleafs Dec 18
'13 at 15:01
Instead of creating a col-xs-0 and changing the class as beneath as suggested by Bass Jobsen
$("#col-1").switchClass("col-xs-8", "col-xs-0", 300);
You could just do the following
$("#col-1").hide(300);
Both will work but it's cleaner this way
I don't find a reason why your code shouldn't work, see also: http://bootply.com/101242
In your code you use $("#col-1").switchClass("col-xs-8", "col-xs-12", 300); this has col-1 in stead of col-2 as selector. col-1 doesn't have a col-xs-8 class, so can't switch this.
Related
It is possible to achieved something like this given code?
<div layout="column">
<div>This is affected by layout column</div>
<div>how to exempt this one from layout column?</div>
<div>This is affected by layout column</div>
</div>
Im using angular-material
In my mvc app I a have made one footer and embedded it like this
<div class="off-canvas-wrap" data-offcanvas>
<div class="inner-wrap">
#Html.Action("Menu", "Site")
<aside class="main-section">
#RenderBody()
</aside>
#RenderPage("~/Views/Shared/DisplayTemplates/_footer.cshtml")
</div>
</div>
This code lies in my _layout.cshtml file, what I am trying to do here is to hide the footer on a certain page. Is it even possible to hide the footer on a particular page?
Looking forward for suggestions.
Add css to that page.cshtml that you want to hide the footer at.
footer {
visibility: collapse;
}
Yes, you can do that several ways, the first one using C# in Razor:
#if (myCondition)
{
#RenderPage(...);
}
or you can have JavaScript with jQuery do it:
<script>
$(function() {
if (myConditionInJavaScript) {
$("#myfooter").hide();
}
});
</script>
The JavaScript code above will be executed automatically once the entire page is loaded, thanks to the $(function() { ... }) jQuery functionality.
If you want to hide a footer for example from your layout, you can do like this:
In _layout:
#if (IsSectionDefined("hidefooter"))
{
#RenderSection("hidefooter", false)
}
else // Just regular footer from layout
{
<footer class="footer top30">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<p>Copyright © ABC</p>
</div>
</div>
</div>
</footer>
}
In chtml file:
#section hidefooter {}
You have multiple options
User jquery code to hide the footer div on that particular page.
use $('#footerId').hide(); on that particular page.
Use can set a viewbag on particular actionresult and check on the layout page that viewbag is set than hide otherwise keep as it is.
ex.
#if(Viewbag.ShowFooter!="False")
{
#RenderPage("~/Views/Shared/DisplayTemplates/_footer.cshtml")
}
Since your condition will be in the page being rendered and not the layout you will either have to keep some global function which can be called after the page is loaded.
Something like
window.myfunction =function() {
if (myConditionInJavaScript) {
$("#myfooter").hide();
}
}
and call this function in your child page. by window.myfunction();
Also you can use Viewbag but you need to set the value of the ViewBag in each view when it is being rendered or updated.
Most efficent way according to me would be maintaining two separate layouts if you have just one section that has to be hidden. Because whichever way you choose at every page load the condition will be fired which may result in a degraded performance.
I'm trying to create a 4-pane layout using the jQuery-Layout plugin.
Really basic stuff:
The layout (note that I use iframes):
<iframe class="ui-layout-center">Outer Center</iframe>
<iframe class="ui-layout-east">Outer East</iframe>
<div class="ui-layout-west ">
<iframe class="ui-layout-south">Middle South</iframe>
<div class="ui-layout-center ">
<iframe class="ui-layout-center">Inner Center</iframe>
</div>
</div>
The initialization:
$(document).ready(function () {
$('body').layout({
west__childOptions: {
center__childOptions: {
}
}
});
});
Here's a fiddle.
Updated, simpler fiddle.
All is well until I try to resize the panes. It kinda works, but is very rough. When dragging the pane resizer handles it looks like they lose contact with the mouse pointer and stop resizing.
If the panes are simple divs, everything works, but not if the panes are iframes (which is what I need).
Any idea on how I could debug this?
I have found the answer here
Basically, you need to mask each panel (and its parents, in case of nested panels) that contains an iframe.
Like this:
$('body').layout({
center__maskContents: true,
west__maskContents: true
});
Here's the working demo of the fiddle from the question: click
can you please tell me how to how header label left side with button on right side .
i found like this
<div data-role="header">
Cancel
<h1>Edit Contact</h1>
Save
But i need like this
My case label on left side and button on right side
You can do like that, DEMO http://jsfiddle.net/yeyene/5kfnT/3/
JQM DOC: http://view.jquerymobile.com/1.3.1/dist/demos/widgets/headers/
Custom header configurations
If you need to create a header that doesn't follow the default configuration, simply wrap your custom styled markup in any container, such as div. The plugin won't apply the automatic button logic to the wrapped content inside the header container so you can write custom styles for laying out the content in your header.
It's also possible to create custom bars without using the header data-role at all. For example, start with any container and add the ui-bar class to apply standard bar padding and add the ui-bar-b class to assign the bar swatch styles from your theme. (The "b" can be any swatch letter.)
<div data-role="header" data-position="fixed">
<div class="ui-block-a"><h3>Header</h3></div>
<div class="ui-block-b"> </div>
<div class="ui-block-c"> </div>
<div class="ui-block-d">
A
B
C
</div>
</div>
You can do it this way, override ui-title and ui-btn-right styles. However, for the second button, give it a custom class in order not to override both button with ui-btn-right. I used custom class .second for the second button.
Demo
CSS - I used .ui-header in order not to change footer style.
.ui-header .ui-title {
margin-left: 2px !important;
text-align: left !important;
width: 150px !important;
}
.second.ui-btn-right {
right: 80px !important
}
HTML
<div data-role="header">
Cancel
<h1>Edit Contact</h1>
Save
</div>
I was seeing a strange phenomena when using Scriptaculous BlindDown and SlideDown effects, where they would smoothly slide, and then at the very end, they would jump an additional amount, maybe 10% of the slide distance.
I already saw the note on the BlindDown page that you have to be sure not to use padding, which I'd already done.
I was still thinking that this must be my mistake somehow, when I noticed that I see the exact same thing happening on their demo page for Toggle when clicking on either the Blind or Slide demos:
http://wiki.github.com/madrobby/scriptaculous/effect-toggle
Firefox 3.6.7, Chrome 6, and Internet Explorer 8 all display this effect on my computer.
So I was thinking about just writing it off and either living with it or cutting the effect out, when I noticed that the page for BlindDown does not display this effect:
http://wiki.github.com/madrobby/scriptaculous/effect-blinddown
So there must be a way to make this work. On my page, the jump is occurring whether I directly use BlindDown/Slide or whether I use Toggle.
Has anyone out there used these and managed to do so without this problem? Any ideas on what the secret is?
It's usually due to margin or padding.
The element you're blind-downing mustn't have any margin or padding, or should have margin:0.1% so that contained margins don't collapse through the bounds of the element either. If you do this it'll be smooth as silk.
also - ensure you've set overflow:hidden
Enjoy.
(the other place it'll fall down is if you don't define height. If you do this little incantation before you animate it'll get and set you height without bothering anything else.
elem.setStyle({position:'absolute',visiblity:'invisible'});
elem.setStyle({'height':elem.getDimensions().height+'px'});
elem.setStyle({position:'relative',visibility:'visible'}); //or position:'static'
In my experience, the jumping is just a performance issue, which is effected by the system specs, browser, and complexity of the html content you are toggling. Some browsers like safari and chrome have a pretty good javascript engine making them more efficient.
I see this is happening for you even when using chrome though? Is the html content particularly complex, or your computer overloaded with applications running?
There is definitely a little very well known secret... Have you tried wrapping your content in an extra div container? You should consider this best practice and almost a requirement specifically when using Scriptaculous effects.
For example... Say you want to slideDown or Toggle a login form - and you have::
<div id="login-panel">
<input type="text" name="username" />
<button type="submit" name="send">Login</button>
</div>
All you have to do is add an extra inner div tag::
<div id="login-panel">
<div><!-- extra div here -->
<input type="text" name="username" />
<button type="submit" name="send">Login</button>
</div><!-- close it here -->
</div>
Now when you do something like Effect.toggle("login-panel", 'slide'); the transition should be much smoother and less jumpy. It may seem a little sloppy but it almost always helps. Hope this helps you!!
Keep in mind that when Scriptaculous begins an animation, the container that is being modified will be absolutely positioned and then a record of the height will be taken, similar to what danielsherson mentions. If however the container does not exist within a relatively positioned parent container, then the dimensions of the animating container may change quite drastically. The easiest way to test this is to modify your container using firebug to set the position to absolute. What happens? Did the height change? For the best results, there should be no change in the dimensions of your animating container when switching to absolute positioning. What happens to the rest of your document, such as content moving underneath, will not matter.
The padding/margin issue is a tricky one too since there really isn't a way to prevent the margins from overlapping and creating issues. Best way I found to address this is to set your animating container to float and then use the clearfix hack on a parent container to make sure nothing overlaps.
<body style="margin: 0 auto; width: 300px; position: relative; background: black;">
<div class="parent nonanimating clearfix">
<div class="animating" style="float: left; width: 100%; background: white;">
<div class="apply-your-margins-and-padding-here">
...content...
</div>
</div>
</div>
<div class="parent nonanimating clearfix">
<div class="animating" style="float: left; width: 100%; background: white;">
<div class="apply-your-margins-and-padding-here">
...content...
</div>
</div>
</div>
</body>
Note that the classes are not functional and just for reference to my comments with the exception of clearfix, which is the float clear hack. The backgrounds and widths are only specified to give a better example of what is happening. Add whatever animation you'd like to $$('.animating')
I use this one (there are many), all though it is old and I don't even design for many of the browsers this hack supports..
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
height: 0;
}
.clearfix {
display: inline-block;
}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
I don't think it's a performance issue at all. I'm having the same issue. The ONLY way I've been able to make it not jump is to define a height for the div I'm sliding. I realize that this is NOT a good solution but it's the only one I've been able to find. I've also tried adding the additional div and it had no effect on how the Effect.toggle slide worked.
If anyone else has any more info on this, I'm all ears.
To prevent a Scriptaculous effect from jumping or jerking, remove the 'style' attribute from the element which you are applying the Effect to.
This:
<div id="mydiv" style="padding:10px;margin:10px;">
<button onClick="new Effect.BlindUp('mydiv');" />
</div>
Becomes:
<div id="mydiv">
<button onClick="new Effect.BlindUp('mydiv');" />
</div>
The styling can be placed in a enclosed div like this:
<div id="mydiv">
<div style="padding:10px;margin:10px;">
<button onClick="new Effect.BlindUp('mydiv');" />
</div>
</div>
The problem is caused by Scriptaculous reapplying the element's (mydiv) inline style declarations after the effect has been performed.
I have found success with using position: relative; on the block element using the slide/blind animation. Make sure padding/margins are placed on the child elements and not the slide block element.