We Keep Coding

Smart-Wizard does not load first step

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.

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>

Scroll not working on Android Chrome only

For some reason scroll doesn't work on Android Devices in Chrome browser only.
You can see the site at Peshkuiarte.com/mobile
I have tried:
$(document).ready(function() {
$('body').css('touch-action', 'auto');
});
I can't seem to figure it out ... Any help would be greatly appreciated

By scroll do you mean dragging the page with your finger on mobile?
You've set -webkit-user-drag: none; as an inline style for body, which might be the cause.
It's a Webkit-specific property:
CSS property: -webkit-user-drag
Description
Specifies that an entire element should be draggable instead of its contents.
Syntax
-webkit-user-drag: auto | element | none;
Values
auto The default dragging behavior is used.
element The entire element is draggable instead of its contents.
none The element cannot be dragged at all.
It's supported by Chrome 1-17 and Safari 3-5.1: http://www.browsersupport.net/CSS/-webkit-user-drag

we had same problem on Chrome 40.0... and we fixed with css only solution. Maybe it is not clean but works for us:
#media screen and (max-width: 1024px) {
html, body {
z-index: 0 !important;
overflow: scroll !important;
}
}

In my case, I have found touch-action: none added on body element.
Removing it enabled scrolling in android chrome.
Summary
The touch-action CSS property specifies whether, and in
what ways, a given region can be manipulated by the user (for
instance, by panning or zooming).
Source: https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action
Hope it helps people dealing with legacy code :)

e.preventDefault
function handlerSwipe(e){
e.preventDefault();
if(handlerTouch){
if(e.changedTouches[0].clientX>=110)
toggle.checked=true;
else toggle.checked=false;
}
return false;
}
window.addEventListener("touchmove", handlerSwipe, false);
This was the code i used for creating a swipeable navigation drawer because of this scrolling was not working .Just removing the e.preventDefault(); from the above code solved my problem

I am not really sure about the question, you say "scroll" but the accepted answer is talking about "drag". So I am going to give you what I think you are asking (not being able to scroll within an area on a mobile).
The simplest solution is a CSS one rather than a JS one. If you have an area on your page that you need to scroll, for example a code block on a tech blog you can set position relative on the area and have overflow-x set to auto. On the body you will need to have it not move when you touch the screen.
pre {
white-space: pre-wrap;
overflow-y: auto;
position: relative;
}
html,body{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
You can see this solution working on my blog if you look at the code snippet sections and try and scroll on them via chrome mobile.(http://fullstack.life/mapping_arrays.html)

pointer-events
I came across another issue today and I'm going to leave this here for reference. If the element with the overflow-y: scroll; either sets its pointer-events: none; or inherits it, then it won't work either. On this layer, pointer events need to be re-enabled with:
pointer-events: auto;

Here is the fix for this issue that worked for me.
When you call the niceScroll function $("body").niceScroll(); in your javascript class, it appears to add an inline style of: overflow-y: visible on your body element (because it is inline, it overrides any previous overflow: hidden that you may have written in your css file.
Simply add overflow: hidden ! important in the css of your body element.
Also, make sure that your html element has style of
overflow: hidden;
touch-action: none;

Reason for a mysterious padding breaking my design?

I have been trying to wrap my head around this issue for the past few hours but with no success. If you look at this page.
On the left side, where its titled "Latest Tweets", there is a mysterious left-padding to the list of tweets. I can assure you that I have not added any styling to it to have that padding... not to my knowledge anyway.
For a past few hours ago, before I made major changes around the page, it looked perfect. Here is a screenshot of how it should be aligned.
Its 11.15pm, I'm tired and I want to watch Game of Thrones. Can someone kindly assist me in solving this issue so that I can call it a night?

You have margin-left: 15px; on .projects li.
That is what causes the move to the right...
Perhaps you added it for the list of videos, but it is affecting the list of the tweets since both are under the projects element.
Add .projects .sidebar_left li{margin-left:0} to fix it..
Update
or better yet, since you already have a rule for them #twitter_update_list li add the margin-left:0 to that.

Gaby beat me to posting the answer, but you could have found it yourself inspecting the elements using Google Chrome for example - you can click an element and it tells you what style the element has, like this:
.projects li {
width: 202px;
display: block;
float: left;
margin-right: 15px;
margin-left: 15px;
margin-bottom: 40px;
}
Better yet, you appear to be able to test style changes LIVE. Pretty cool, actually.

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.