Develop Reference

Change HTML Structure of the "jQuery Steps" plugin

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.

Replacement for toggle() multiple div sets

I've been working on this for a while and thought I'd like to get some expert advice.
I have 4 divs on a page labelled sun-sun3. When each of the divs is clicked a corresponding div (suninfo-suninfo3) will appear and when clicked again will disappear. While one of the info divs is open the others will always be closed.
Here is the html
<div class="dot sun">
</div>
<div class="info suninfo">Some Content</div>
<div class="dot sun1">
</div>
<div class="info suninfo1">Some Content</div>
<div class="dot sun2">
</div>
<div class="info suninfo2">Some Content</div>
<div class="dot sun3">
</div>
<div class="info suninfo3">Some Content</div>
The CSS is styled so that the sun divs use pulse which works fine and the suninfo divs appear in various locations around the page. All works perfectly.
The following Javascript also works fine, however it is using toggle() which I would like to replace. My code is also quite long.
$(document).ready(function(){
$(".sun").click(function(){
$(".suninfo").toggle();
$(".suninfo1,.suninfo2,.suninfo3").hide();
});
$(".sun1").click(function(){
$(".suninfo1").toggle();
$(".suninfo,.suninfo2,.suninfo3").hide();
});
$(".sun2").click(function(){
$(".suninfo2").toggle();
$(".suninfo,.suninfo1,.suninfo3").hide();
});
$(".sun3").click(function(){
$(".suninfo3").toggle();
$(".suninfo,.suninfo1,.suninfo2").hide();
});
});
As you can see, there isn't much to it and it does work, but I'd rather not use toggle()
Cheers

I would suggest leveraging jQueryUI for this -- as it provides this functionality out of the box.
http://jqueryui.com/accordion/
In addition it will not require you to modify your script if you decide to later add divs for sun4, sun5, and/or sun6, etc.

You can use start with jquery selector in this case but need to rename 'suninfo' class name because 'sun' and 'suninfo' class names starts with 'sun' word, so it will be difficult to use start with jquery selector. Also selector class name should be first while writing in div
like if we are using $("[class^='suninfo']") then suninfo should be first call in <div class="suninfo info">.
Please see below jquery
$(document).ready(function(){
$("[class^='sun']").click(function(){
var nextElement = $(this).next();
$(nextElement).toggle();
$("[class^='infoSun']").not($(nextElement)).hide();
});
here rename your suninfo class to infoSun and call it at first place like below
<div class="dot sun">
</div>
<div class="infoSun info">Some Content</div>
<div class="dot sun1">
</div>
<div class="infoSun1 info">Some Content</div>
<div class="dot sun2">
</div>
<div class="infoSun2 info">Some Content</div>
<div class="dot sun3">
</div>
<div class="infoSun3 info">Some Content</div>
Please see this for more information on start with selector in JQuery

To make it more simple according to you structure:
$(".dot").each(function(){
$(this).click(function(){
$(this).next().toggle();
$(".info").not($(this.next())).hide();
})
})
Why don`t you like toggle?
To manually control it you can:
$(element).hide('slide',{direction:'left'},1500) //([animation, params, time])
$(element).show('slide')
if using jQuery

Using shapes in Semantic UI (CSS Framework)

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.

Form not found in foundation tab (using ng-include)

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 ' )

replaceWith(); JQuery function

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'));
});