Since jQuery Steps plugin does not support using your own html markup I need to tweak the plugin to at least support using tags on the 2nd level. The current structure it expects look like this:
<div class="wizard">
<h2>Title 1</h2>
<section>Content</section>
<h2>Title 2</h2>
<section>Content</section>
</div>
But I need to group steps together using different form tags like this:
<div class="wizard">
<form name="one">
<h2>Title</h2>
<section>Content</section>
<h2>Title</h2>
<section>Content</section>
</form>
<form name="two">
<h2>Title</h2>
<section>Content</section>
</form>
</div>
Since Steps uses ".children()" its limited to the immediate child elements. I tried changing children() to find() but that broke it severely. This wizard does everything I need but I need it to support custom markup.
I have already tweaked it to support Twitter Bootstrap but not being able to add additional markup inside the wizard makes everything really challenging.
Any ideas or suggestions would be greatly appreciated.
Related
I have been struggling for some time on how to use shapes in Semantic UI.
I have been trying an example from their site http://semantic-ui.com/modules/shape.html#/definition but the animations are not working properly for me.
HTML CODE :
<div class="ui cube shape">
<div class="sides">
<div class="active side">
<div class="content">
<div class="center">
1
</div>
</div>
</div>
<div class="side">
<div class="content">
<div class="center">
2
</div>
</div>
</div>
</div>
</div>
JAVASCRIPT:
$('#btn').click(function(){
$('.shape').shape('flip up');
});
It's just a JQuery version problem:
This fiddle works.
This one doesn't.
So check the JQuery version you're using, it seems that the version should be upper than 1.8.
Semantic UI and Bootstrap will not play nice together when it comes to Shapes. You will have to manually remove the following CSS in Bootstrap to make it work:
.hidden {
display: none !important;
}
If having a .hidden class is crucial to your operation, rename it instead of removing it. Although I'm not familiar enough with Boostrap's inner workings to know if there are any internal dependencies on that class.
I have 2 forms. One is a regular form (TestForm) and the other is inside a foundation tab.
Page 1:
<div class="columns small-8">
<form name="testForm">
</form>
</div>
<div class="row">
<div class="section-container tabs" data-section="tabs">
<section class="section active">
<p class="title">Gegevens</p>
<div class="content" data-slug="data">
<div ng-include src="'partials/user/UserData.html'"></div>
</div>
</section>
</div>
</div>
UserData.html (the tab):
<form name="debugForm"></form>
So the problem is below that I can't reach my debugForm. Does anyone know how to reach the form? (need to set validity)
Also when I trie to reach by going via the child scope:
$scope.$$childHead.debugForm
doesn't work.
The problem is that you can't access child scopes from a parent scope in angular.
I temporarily "solved" it by just not using the include and instead just put the html in there.
Still open for better suggestions though..
Try src="partials/user/UserData.html" (whithout ' )
I'm trying to include what should be a simple JQuery snippet into a friend's portfolio website to replace:
<div class="content one">
<h3>Content Title</h3>
<p>Body text.</p>
</div>
With:
<div class="content two">
<h3>Content Title</h3>
<p>Body text.</p>
</div>
When hovering on a separate div class of:
<div class="item two"><!--content two icon-->
<img src="" alt="" />
</div>
I have these separate classes of <div class="item"> that have icons in them. I want to be able to hover over the icon's class and replace the <div class="content"> class with another one that corresponds to the <div class="item"> icon.
For the JQ, I'm using the following:
<script type="text/javascript">
$('.item two').hover(function(){
$('.content one').replaceWith($('.content two'));
});
</script>
I have each content class (except .content one) as display: none; I think I need to throw in a .show(); event inside of the replaceWith(); function, but even if I remove display: none; on the classes, nothing replaces itself with the class I'm trying to replace.
I'm still relatively new to JQuery and JavaScript as a whole, so it's probably something stupid simple that I'm not doing right. Forgive me if I didn't include enough information to help you figure out the issue. Thanks for the help!
You have two classes on the same element in both cases, so your selectors should be:
.item.one
.item.two
.content.two
.content.two
try this:
$('.item.two').hover(function(){
$('.content.one').replaceWith($('.content.two'));
});
Why the tabs are not shown with AngularJS tabbale directive.
http://plnkr.co/edit/yu0Bh0?p=preview
This is optional part of angularJS, which is used everywhere in the docs (here)
The source of the directive is here.
I don't see any special css in the doc site.
EDIT:
the markup of the plunkr (above) was copied from the doc link given above.
But, when tried with the markup on Angular main page (angularjs.org), it works.
Not sure how it works at doc site.
The working markup has data-toggle attributes, and url fragments to tab pane.
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="">index.html</li>
<li class="">project.js</li>
<li class="">list.html</li>
<li class="active">detail.html</li>
<li class="">mongolab.js</li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="project-html">
<h1>project</h1>
</div>
<div class="tab-pane" id="project-js">
<h1>project js</h1>
</div>
<div class="tab-pane" id="list-html">
<h1>project html</h1>
</div>
<div class="tab-pane active" id="detail-html">
</div>
<div class="tab-pane" id="mongolab-js">
</div>
</div>
</div>
There has to be some functionality / code written somewhere that makes the tabs work. Currently, what you have there is just the html and css ( which provides the structure and the styling ) and the behaviour part is missing ( the JS part ).
In angular, this behaviour is custom written and is provided the directive. In bootstap, you need to include the js file ( bootstrap.js ? ). Then there are two ways of making this work. Either include the data-* elements as specified in the docs in their appropriate places or on document ready call something like
$(".tabbable").tabs();
in your JS code somewhere. This is the behavioural pieces that is missing from your plunker.
I'm using dynaTrace to profile my application in Internet Explorer.
One of the most expensive calls is the following:
$("div.containerClass:has(div.containerHeader)")
I scoped the selector as follows, which offered a little improvement:
$("div.containerClass:has(div.containerHeader)", "#section-wrapper")
How can I improve the performance further?
NOTE: I CANNOT change the HTML markup, only the JavaScript.
I'm using jQuery 1.4.2.
UDPATE
Here is sample HTML... note that in my actual application, the HTML is dynamic and the actual markup will vary:
<div id="section-wrapper">
<div class="somethingelse">
<div class="somethingelse2">
<div class="containerClass">
<div class="containerHeader">
<h2>content region 1</h2>
</div>
</div>
<div class="containerClass">
<div>
<h2>content region 2</h2>
</div>
</div>
<div class="containerClass">
<div class="containerHeader">
<h2>content region3 </h2>
</div>
</div>
<div class="containerClass">
<div class="containerHeader">
<h2>content region 4</h2>
</div>
</div>
</div>
</div>
You should use a single selector, like this:
$("#section-wrapper div.containerClass:has(div.containerHeader)")
Otherwise you're firing up multiple jQuery objects just to perform a find. You'll have to test, but depending on the DOM you're working against, this can be much faster (especially in jQuery 1.4.3+):
$("#section-wrapper div.containerHeader").closest("div.containerClass")
While it would be silly if this is indeed faster, have you tried:
$("div.containerClass > div.containerHeader").parents('div.containerClass')
on edit: Added parent selector.