Smart-Wizard does not load first step - javascript

So I am using smart-wizard https://github.com/mstratman/jQuery-Smart-Wizard.
I have included it in js-popup, so when I open the popup it does not show the first step. I need go to the second step and then go back to see the first step

I had the same problem, what I did was download the smartWizard css, the smart_wizard_all.ccs version and in the last line of the file add:
.tab-content {
height: auto! Important;
}
I hope it works for you. Sorry about my English I am using the google translator hahahaha,
Greetings,

i escape this case by "onmouseenter" after call show modal.
<div id="modal" onmouseenter="call_wizard()">
<div id="wizard" class="form_wizard wizard_horizontal">
<!-- step 1,2,3,4 -->
</div>
</div>
<!--$('#modal').modal('show');-->
<script>function call_wizard(){$('#wizard').smartWizard();}</script>

Not exactly a fix, but I found a workaround. Looks like the step-container initializes with height zero. Don't know why this happens, but we can override it in the css file. In the css file you are using to style your "Smart Form", look for a class called stepContainer.
.form_wizard .stepContainer {
display: block;
min-height:500px; // Add this line with your minimum height
position: relative;
margin: 0;
padding: 0;
border: 0 solid #CCC;
overflow-x: hidden; }
This should fix your problem until someone can explain why it happens in the first place.

I am getting the same kind of problem as element is previously hide and when I show that element then I am getting same problem so I tried this below code and its work for me
`$('[name = elementName ]').show(1000, function() {
$("#wizard").smartWizard("currentRefresh");
});`
Its actually load the fist step but it set its height to zero as its is previously hidden but after applying $("#wizard").smartWizard("currentRefresh"); it refresh the current step and set proper height.

Related

In getorgchart jquery plugin how to remove the getorgchart hyperlink present at the bottom of the screen

I am trying to use getorgchart jquery plugin. And I want to remove the 'GetOrgChart' hyprlink which is showing in the bottom of the screen. I have tried removing it from getorgchart.js file but it is still showing up. Is it part of the theme? How Can I stop showig it on my webpage???
Please help..
Try this, It worked for me.
Add following code in your html page.
$(document).ready(function(e) {
setInterval(function(){ $('a[title="GetOrgChart jquery plugin"]').hide(); }, 10);
});
Open file getorgchart.js and find eval(eval("String.fromCharCode(blah3x...)"))
and delete it or comment.
Try This,
In your orgchart.html page, paste this snippet
<div style="display: block; position: absolute; bottom: 15px; right: 0;z-index: 214748336480 !important; height: 25px; width: 100px; background: #333;"></div>
Change width, height and background to your liking. But make sure z-index is higher than what I have mentioned, this is the important point here. Hope this helps. Thank you.
In order to remove the getorgchart logo you need to buy a license http://www.getorgchart.com/Buy
I use the following to temporarily disable eval(), which GetOrgChart uses to keep the logo on display:
<script>__eval__ = eval; eval = function () { };</script>
<script src="getorgchart.js"></script>
<script>eval = __eval__;</script>

CSS Positioning a table and blocks

¡Hello! I designed a Budget Calculator and implemented it in Drupal 7. You can see the result here:
http://www.delengua.es/curso-espanol-espana/calculadora-de-precios
I'm sure it has a lot of errors. But the one i want to fix is related to the position of the blocks. You may see that if you click on some option in the optgroup called "Cursos" (or in another one), you'll se an information square sided to the right of the table (i mean the table that contains the form). Specifically, if you click on "Cursos específicos" and you select something in the new optgroup, you'll get two information blocks. As you can see if you inspect them, they're positioned like this:
display: none;
position: absolute;
right: 6.5%;
top: 12.5%;
margin: 15px 15px;
width: 220px;
height: auto;
padding: 10px 10px;
Though that looks as working fine, it changes the position in firefox, and i'm frightened that it will cause more trouble. So my question is... would it be any other way to position it in relation to the table? I mean, the 'y' position should be the same as the table, and the 'x', the same + some number of pixels. I think it can be done through two ways:
a) With JavaScript (i don't know how, but i guess i could learn googling it).
b) Just with html and css.
As i prefer this option, i've tried to group the table and the information labels in only one '<div>', to declare the labels as 'inline:block;', to float them to the right, but when i do one of those things, i cannot modify the "top" position property. I got that ideas from other threads in Stackoverflow, but i don't know what can i try else. So i'll really thank any help.
Making a parent container position: relative will make the position: absolute on these elements relative to that parent container. Also, top/bottom/left/right attributes only apply for position: fixed, position: relative, and position: absolute. Floated elements ignore them unless one of those positions is defined, in which case the float is ignored.
I've tried something close to what you've said in the question and it worked for me without any problems.
First of all, wrap your form and infos in one div, like this:
<div id="wrap">
<form id="calculadoracont" method="post" onclick="test()">
// Your form
</form>
<div class="informacion" id="infoespecificos">
// Your info
</div>
<div class="informacion2" id="infoliteratura">
// Your info
</div>
// Your other infos
</div>
And in your css, just float them to where you want:
form {
float: left;
}
.informacion, .informacion2 {
// Remove the position absolute
float: right;
}
That will give you the same layout without absolute positioning.
Give it a try and let me know if it helps!

jQuery in Sublime text? Code not working

I am wondering if you can help. I am previewing my code in a Firefox build system using Sublime text 3. The HTML and CSS are fine however my jQuery dosen't work despite being properly linked etc. Here is my code:
I just observed one thing, you are adding the class and removing it immediately on hover hence the div is unaffected
Try this code, if you are trying to add the class only on hover and remove it when not hovered
$('#manifesto').mouseover(function() {
$(this).addClass('manifestotitle');
}).mouseout(function(){
$(this).removeClass('manifestotitle');
});
For reference see the following jsfiddle:
http://jsfiddle.net/x3965auq/2/
Hope this helped
I see in your CSS that "manifestotitle" refers to an id (#manifestotitle) could you try converting it to a class?
EDIT: Ok, I think I got it. I downloaded your code and messed around a bit. This is what I changed to make it work:
Change your CDN for jquery to the official one:
"manifestotitle" should be a class as your javascript is using it as one. So you should make these changes. In your HTML:
<div class="manifestotitle">
And in your CSS file:
`.manifestotitle {`
Fix your selector in your js:
$('#manifesto').hover(function () {
That got it working for me, hope it helps!
Not an answer however need to show more code!
It seems I can't get .hover() and .mouseover() functions to work at all with my code...here is a simple example (using a class rather than an ID also):
HTML:
<div class="left"><b>Nick Reilly</b>
<P><b><i>(Holding Page)</i></b></P></div>
CSS:
.left {
color: #000000;
left: 50px;
position: fixed;
top: 40px;
font-size: 18px;
z-index: 100;
line-height: 15px;
}
jQuery:
$(document).ready(function(){
$("#left").mouseover(function(){
addClass('.red');
});
});
Surely this should simply change the text I have to red when the mouse is over it? When I preview it in both a Firefox and Chrome build nothing happens!
Thanks

Twitter Bootstrap's javascript Popover looking wrong

I'm trying to implement Bootstrap JS's Popover (this), and for some reason it's not showing up like it's supposed to.
This is what I'm getting
As you can see, the body of the Popover is shifted towards the left, and the border's kinda broken.
Here's my code
<a class="btn success" id="previewBeforeSubmit" href="#"
data-original-title="Test" data-content="Lorem Ipsum">Save Changes</a>
<script type="text/javascript">
$("#previewBeforeSubmit").popover({position: 10, placement: 'above'});
</script>
Any clue as to what's causing this?
Most likely a CSS conflict. Your existing css rules might be adding attributes to the ones of the popover. I would start with an inspection in FireBug and see what css rules are inherited from where.
I guess you are using their container example. If yes, you can fix this problem by comment out line margin: 0 -20px. It appears in the following block:
.content {
background-color: #fff;
padding: 20px;
margin: 0 -20px;
...
}
It's a margin thing, add
.popover .content {
margin: 0;
}
this should fix your problem.
The more universal fix is to add data-container='body' to the element to stop it from inheriting css rules from (and through) the element.

Making a DOS-style window in ASP.net

I'm trying emulate the MS-DOS command prompt on my website. I don't need to accept keystrokes, but I'd like to append data at the bottom and optionally scroll upwards.
At first I looked at the asp:TextBox and asp:Label, but the flicker of using postbacks seemed to be too much. I'm now considering DIV tags and Javascript where I simply update the InnerHTML property, but there too I get flicker, and have issues with scrolling.
What solution would you recommend in this situation? Essentially I'm trying to count to infinity, with a 1 sec delay, only need the most current 300 or so entries, with the most current entry at the bottom of the screen.
Is this even possible with JS/CSS?
Do you wish to make it a little more stylous ? :)
see this page...
http://www.klaus.dk/Some_unknown_page
or this one
http://www.harryovers.com/404.html?aspxerrorpath=/Account/LoginPartial
here is the javascript source code.
http://code.google.com/p/c64-404-page/
With a little change, you can append your text on this code :)
I just built something very similar using jQuery. You can use the append method to add content to the bottom of your DIV. You can then set the scrollTop attribute to keep things scrolled to the bottom as follows:
$("#someDiv").attr({ scrollTop: $("#someDiv").attr("scrollHeight") });
I think "DOS-style window" is a bit misleading considering all you want to do is append text to a div and make sure it stays scrolled to the bottom.
function addLine(text) {
var box = document.getElementById('DOSBox') //teehee
var line = document.createElement('p');
line.innerHTML = text;
box.appendChild(line);
box.scrollTop = box.scrollHeight;
}
And style it as such
#DOSBox {
overflow: auto;
display: block;
height: 400px; width: 500px; /* or whatever */
/* and if you want it to look DOS-like */
background: #000;
color: rgb(192, 192, 192);
font-family: fixedsys;
}
#DOSBox p {
margin: 0;
}

Categories