Develop Reference

The opening and closing animation of the Sidr panel is not smooth and moving with jerks on smartphone

I am trying to use Sidr (berriart.com/sidr) slide panel and everything works but on smartphone the opening and closing animation is not smooth, moving with jerks. Is there a solution to make the animation smooth?
<div class="app">
<span id="menu-badge" class="dx-badge" style="display:none;"></span>
<div id="sidr">
<dx-list
#notificationsList
[dataSource]="menu.items"
[pullRefreshEnabled]="false"
(onItemClick)="menu.itemClick($event)">
<div *dxTemplate="let item of 'item'" class="slideout-menu">
<fa *ngIf="item.icon.indexOf('fa')==0" name="{{item.icon}}"></fa>
<i *ngIf="item.icon.indexOf('glyphicon')==0" class="{{item.icon}}"></i> {{item.text}}
</div>
</dx-list>
</div>
<dx-toolbar
*ngIf="authorized && loaded"
#appToolbar id="appToolbar"
[dataSource]="menu.toolbarItems"
(onInitialized)="onToolbarInitialized($event)">
<div *dxTemplate="let data of 'title'">
<div class="app-header">{{menu.appHeaderText}}</div>
</div>
</dx-toolbar>
<router-outlet *ngIf="authorized && loaded"></router-outlet>
</div>
and in .ts file:
$(document).ready(function() {
$('#simple-menu').sidr();
});

One possible issue could be that there are too many change detection cycles going on. A pc can handle this, a phone not so much. Try rewriting your app so it can work with the ChangeDetectionStrategy.OnPush.
Either way, it's worth running a profiler using the chrome devtools, while opening and closing. With a little digging, you can find out what part of code is using up the resources. It could as well be an *ngFor that needs a trackBy because it keeps creating elements.
This question cannot really be answered by just the code you gave, and needs proper investigation on your hand. On the other hand, to use jQuery in combination with Angular is frowned upon, but let's not open that can of worms :)

Overlay conflict with input field

Had a question. I'm trying to include a widget (which is contained in a div) for my landing page. Now, essentially what I am trying to do is when i hit the button is to fire the OverLayTwo BUT have it fall to the background, instead of the foreground. I tried the z-index method and it doesn't seem to help.
<div class="OverLay">
<div class="widgetContainer">
<li>This is a Div</li>
First Name: <input type="text" name="fname"></input>
</div>
<div class="OverLayTwo">
</div>
<button class="randomButton">Hello</button>
</div>
So essentially what I want is when User hits button, to have 'OverLayTwo' drop however have it fall to the BACKGROUND/backdrop behind the "widgetContainer" div. --
The reason is I want the user to be able to type into the input field(s), however, lately everything I have looked at or referenced is not solving the problem. Essentially just drops the overlay ontop/into the front of the widget - Not allowing the user to enter text into the appropriate input field.
Hope that made sense. The land of CSS is a true maze o.o ...Also, it should be noted I am using javascript and jQuery functionality.
Any tips and/or suggestions would be truly appreciated!
Thank you!

would be hard to make it fall in the background when it lives inside the first overlay.. try something like this..
<div class="OverLay" style="z-index:100">
<div class="widgetContainer">
<li>This is a Div</li>
First Name: <input type="text" name="fname"></input>
</div>
<button class="randomButton">Hello</button>
</div>
<div class="OverLayTwo" style="z-index:90">
</div>

Fading Images with links

I have this code for the header
<div id="header">
<IMG SRC="http://danithemes.fanscity.eu/shugar/wp-content/uploads/2014/11/header-principal.png">
</div>
And this code for the main menu
<div id="menu">
Link One,
Link Two,
Link Three
</div>
I want the header image to fade into another image through the main menu links. Is this possible? Thanks.

First of all most W3C folks will get mad at you for this line <div id="header">
Anything syntactically named with an id the same as a generic HTML object tag needs to just be that tag. Anything good enough to give an id of id='header' should probably just be a <header> tag.
Secondly, I am unsure what the question is asking fully so let's go with something not yet said. #Parody showed a fiddled way of having the images change on click. The part of your question that said I want the header image to fade into another image through the main menu links. Is this possible? is difficult to understand so I am going to assume that you want some kind of event to trigger the changing of the images? There are many ways to do this but the best of which (especially for beginning programmers) is to use Bootstrap version 3.0+ since it comes with HTML driven stuff that usually requires JavaScript/JQuery to accomplish.
If you don't want to use Bootstrap then that's fine here is an example of how to use a hover event to trigger the change using JQuery...
HTML
<div id="header">
<img src="http://danithemes.fanscity.eu/shugar/wp-content/uploads/2014/11/header-principal.png" />
</div>
<div id="menu">
Link One
Link Two
Link Three
</div>
JAVASCRIPT/JQUERY
$(".navLink").each(function() {
$(this).hover(function() {
$("#header img").css({"background-image":"url($(this).attr('data-image'))"});
});
});

Trouble with an onClick event

I'm building a gallery and osm of the items will have multiple views - similar to items found in an etsy gallery - and I'm trying to figure out whats going wrong. I started this a while ago and it worked but as I'm not a coder (exclusively) and just teaching myself, I can't tell what has changed or what I'm missing.
The goal is to have a large image and three thumbnails. When one of the three thumbnails is selected it will replace the large image with the corresponding image.
The code:
Here is what I have as my js function I am linking in:
<script type="text/javascript">
function altViews(next_img) {
document.getElementById("big").src = next_img;
}
</script>
*(Note, it is giving me an error on line 4 : document.getElementById("big").src = next_img;)*
Here is the code I used for the image and the thumbnails:
<div class="artwork">
<img id="big" src="../images/_101111-1.png"/>
<div class="gallery-thumbnails">
<img class="gallery-thumb" src="images/_101111-1.jpg" onclick="altViews('../images/_101111-1.jpg')">
<img class="gallery-thumb" src="images/_101111-3.jpg" onclick="altViews('../images/_101111-3.jpg')">
<img class="gallery-thumb" src="images/_101111-4.jpg" onclick="altViews('../images/_101111-4.png')">
</div>
<div class="rule">
</div>
</div>
If there are any details I've left out, please let me know. Also, I am a novice with js and php and teaching myself in my spare time so this might be a simple solution but I'm not familiar enough with it yet to figure it out.

You forgot to close the <img> tag adding a backslash to the end />
<img class="gallery-thumb" src="images/_101111-1.jpg" onclick="altViews('../images/_101111-1.jpg')"/>

Click through images

I would like to know the best way to add a next and back button to click through my images. The images currently scroll left & right when you roll over a hotspot.
I have tried adding anchors to images, which works but is a bit messy.
Here is my code:
<div class="scrollWrapper" >
<div class="scrollableArea" >
<div class="boxer">
<img src="img/apples" />
</div>
<div class="boxer">
<img src="img/apples" />
</div>
<div class="boxer">
<img src="img/apples" />
</div>
</div>
</div>

Easiest way is to use a plugin to handle your slideshow, I like Malsup's cycle plugin, here's an example of what you're trying to do: http://jquery.malsup.com/cycle/int2.html

Instead of using a plugin, read this: http://blog.wearelaunchbox.com/?p=1029
This is great tutorial on how to make your own slider that you're talking about with very little jQuery. Let me know if this helps.
EDIT: Here is a jsfiddle running the right function how you want it, reworked from the tutorial.. You can take this code and rewrite the same function to make it go the other way.
http://jsfiddle.net/Ug3fu/3/