Develop Reference

Automatic up-scrolling on mobile website experience

Whenever this site is viewed on a mobile device, it has unstable scrolling. Whenever the users try to enter their details in the contact form the site automatically scrolls upwards.
Scrolling downwards is also quite difficult with this automatic upscrolling.
I thought that the yellow "back to the top" button may have been causing the issue, so I deleted the code for that button to try and see if that was the cause- but it was not the case.
I don't exactly know what else that could be causing this issue...
Code for the "back to the top" button:
<div id="hs-back-top" class="animated bounceInRight">
<i class="fa fa-angle-up">
::before == $0
</i>
</div>

The page will scroll up to the top regardless of if the details have been added into the form that was created to enquire -
I wouldn't be able to say more without seeing all the code but what I can theorise is happening is:
When the code has completed running a function is being triggered that sends the page to the top:
This might be if the onclick function that the to top element is being triggered -
I had a issue like his before and had to pass the onClick or EventListener('click', function(){
})
to return a function that would take the page back to the top -
Sorry that's not more help but I can't make more comment on what is provided,
Hope this helps,
W

How do I fire a modal for the next step in my introjs?

So IntroJS works off of the data-intro and data-step attributes.
So for instance my logo looks like this:
<h1 id="logo" data-step="1" data-intro="Welcome to MyApp, where you can start creating an album for generations! Let us help you get started.">
But for step 3 it is on an element that when pressed, the next step should be on the modal that would appear if the element in Step 3 was pressed.
I have this as my Step 4 which doesn't work:
<div class="popup" id="add-images-step-1" data-step="4" data-intro="GETS TO UPLOADING">
Right now, when you reach Step 3 and press next, it gives you an empty white box that is off-screen.
How do I get it to focus on that modal?

We can monitor changing of steps in introJs with method onchange() (monitor steps on onchange event). On entering step 4 we should show the modal, and on entering all other steps we should hide it (cause user can use non-linear navigation and e.g. can go from step 4 to step 1). Also we should hide modal on oncomplete and exit events.
startIntroButton.on('click', function() {
var introJsStarted = introJs().start();
// hiding modal on 'oncomplete' and 'exit' events
introJsStarted
.oncomplete(function() { $('#add-images-popup').hide();
}).onexit(function(){ $('#add-images-popup').hide();
}).onchange(function(targetElement) {
// and show modal on Step 4
if($(targetElement).attr("data-step") == 4) {
$('#add-images-popup').show();
}
// don't forget to hide modal on other steps
if($(targetElement).attr("data-step") != 4) {
$('#add-images-popup').hide();
}
});
});
You should place Step 4's data- attributes on the part of the modal which is actually for displaying popup window and not for hiding content of the page otherwise introJs would highlight all the window of your browser.
<div id="add-images-popup" class="modal" data-backdrop="static">
<div class="modal-dialog">
<div class="modal-content" data-step="4" data-intro="GETS TO UPLOADING">
<div class="modal-header">...
Intro of popup window would look this way:
Here is working fiddle

angular trustAsHtml not reinserting content

I have 2 divs on a page. When user clicks button1 an iframe is loaded into div1 and the same is true for button2 and div2. The iframes are loaded through ajax and get trusted through the $sce.trustAsHtml. the html itself looks like this:
<div ng-bind-html="video.trustediframe"></div>
This will be the result:
<div ng-bind-html="video.trustediframe"><iframe id="iframe1"></iframe></div>
Everything works and I can see the video, but when the user clicks button2 I would like to close the feed to the first video and remove the iframe so I do angular.element('#iframe1').remove(). Now once the user clicks on button1 again the iframe wont get loaded do the DOM again although the div with the ng-bind-html="video.trustediframe" is still in place.
I've tried reassigning the video.trustediframe variable(which is a function as $sce.trustAsHtml returns a function) and then doing $scope.$apply but that didn't help reinserting the iframe. Are there any other approaches can I use to get this behaviour right?

I was able to get the desired behaviour by keeping track of the currently active player.
So with <div ng-if="video.isPlaying" ng-bind-html="video.trustediframe"> </div> I have only one active player per page and whenever the user switches between different tabs the previous player gets removed from dom.

Fancybox open with autplay via secondary link

I am using the free "Fancybox for Wordpress" Plugin to open a Couple of images with a nice lightbox.
Now I have a huge title image saying "show diashow" and all pictures of the gallery underneath as single pics. Clicking the single images opens them how it is supposed to be, beeing able to navigation left/right.
The problem now is, if I click the huge title image, it should open the first image of the gallery + set it to autoplay. How can I achieve this?
I tried it with this, but it didnt work out:
HTML
<a id="diashow" href="/wp-content/gallery/galerie/1457454_10152045202815199_1685986480_n.jpg" rel="fancybox"><img src="/wp-content/themes/kt2014/images/diashow.jpg" alt="Diashow starten" /></a>
JS
$(document).ready(function() {
/// START DIASHOW AUTPLAY ON CLICK
jQuery('#diashow').click(function(evt) {
jQuery("a.fancybox").fancybox.open();
jQuery.fancybox.play();
});
});
Thanks for every help on this!

Bootstrap Responsive Navbar for Phones and other devices

This is the website I am working on.
http://ankursinha.net/TestSite/index.php
It's stacking up properly, it's responsive, everything is fine apart from the following.
When I visit this site from my phone or tablet, the navbar shows 3 lines, I click that and all the links show up, and then when I click the "LOGIN", it drops down and shows me Faculty Log In and Student Log In, but when I click one of these, it toggles and closes the dropdown thing.
I know this is happening due to:
data-toggle="collapse" data-target=".nav-collapse"
But how do I fix this and make it like a proper link to navigate through the site on smartphones and tablets? All the browsers had the same problem!
I checked with Responsinator and the same problem occurs there also.
Thank You

Fixed by adding (replace) this piece of code on bootstrap-dropdown.js (at the end of the script) :
$(function () {
$('html').on('click.dropdown.data-api', clearMenus)
$('body').on('click.dropdown touchstart.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
.on('click.dropdown.data-api touchstart.dropdown.data-api' , toggle, Dropdown.prototype.toggle)
.on('keydown.dropdown.data-api touchstart.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown)
})
Basically stops the touch event on a dropdown from bubbling to the next element, which would be the HTML tag and has the clearMenus function.