Develop Reference

Angular-Scroll: same as example, but not working (Plunker)

I'm trying to use Angular-Scroll (https://github.com/oblador/angular-scroll) to simply scroll to an <a> link on the same page, but do it nicely and smoothly. When I couldn't get it to work, I made a super simple setup in Plunker.
Plunker: https://plnkr.co/edit/w1GBTAjxtHL3H4LAuHoO
If you download the zip of the GitHub, there's an example I'm trying to do in the folder location angular-scroll-master/example/container.html. There's really nothing complex, the angular script is basically just finding the container id for the directive to use.
I cannot figure out why my page will not scroll.
HTML
<div class="medium-6 columns" du-scroll-container="container">
Link
</div>
<div id="container" class="medium-6 columns" du-scroll-container="">
<div id="junk">LINK JUNK HERE YAY!!</div>
</div>
</div>
JS
angular.module('scrollDemo', ['duScroll']).
controller('myCtrl', function($scope) {
var container = angular.element(document.getElementById('container'));
});

I edited your plunker and it seems to be working now. Here is the link.
The problem was that the container div is not the scrollable container that would be the body element to make it work as the scrollable element you can set the max-height of the container so that it will become the scrollable element or remove the du-scroll-container="container" atribute so that it will use the body as the scrollable element.

How change background image for each Dojo mobile View?

Is it possible to change the background image for each view using Dojo Mobile ?
For instance :
<div id="view1" data-dojo-type="dojox/mobile/View">
<h1 data-dojo-type="dojox/mobile/Heading">View 1</h1>
<ul data-dojo-type="dojox/mobile/RoundRectList">
<li data-dojo-type="dojox/mobile/ListItem"
data-dojo-props='icon:"images/i-icon-1.png",
moveTo:"view2",
transition:"slide"'>Go To View 2</li>
</ul>
</div>
<div id="view2" data-dojo-type="dojox/mobile/View">
<h1 data-dojo-type="dojox/mobile/Heading"
data-dojo-props='back:"View 1",
moveTo:"view1"'>View 2</h1>
</div>
Example here : http://dojotoolkit.org/reference-guide/1.10/dojox/mobile/View.html
If I put something like
style="background-image: url(../images/test-background.png) in the div section of view1, only the div will be backgrounded by the image whereas I want the whole body to be backgrounded. If I background the body with the image, the image is splitted in other views(since the views are in the same body) whereas I just want the view1 to be backgrounded by the image.
Any advice?
Thanks in advance

You can style the background of a mobile view using regular CSS.
See the example image below; it shows this demo with the Buttons view selected, styled with a purple background using the Developer Tools. If your background styles are not properly being applied to the view as a whole, please post your code or a snippet of your code that demonstrates the problem, as I suspect your styles are being applied incorrectly.

First answer works but not for the whole view, just for the div:
What works is :
<div style="background:yellow;min-height:100%" id="view0" data-dojo-type="dojox/mobile/View">
//whatever you want
</div>
What is important is min-height:100%
Without it :
With it :

Why are Divs Getting Width of 0px on jQuery.show() with jQueryEasyUI

I have a parent div that is initially hidden. Inside the div I have an easyui accordion div. When I called the show() method on the parent div, the easyui div displays with a width of 0px. If the div isn't initally hidden, it calculates a width fine.
Does anyone know the proper way to initially hide a div and then when showing it calculate the proper width?
<div id='masterDiv' style='display:none;'>
<div class="easyui-accordion" style='height:475px;' data-options="border:false" >
<div title="Overview" class='accordionPanel' data-options="iconCls:'icon-no'" style="overflow:auto;padding:10px;">
<h3 style="color:#0099FF;">Accordion for jQuery</h3>
<p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p>
</div>
<div title="Checklist" class='accordionPanel' data-options="iconCls:'icon-no'" style="overflow:auto;padding:10px;">
<h3 style="color:#0099FF;">Accordion for jQuery</h3>
<p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p>
</div>
</div>
</div>
<script type='text/javascript'>
$(document).ready(function(){
$('#masterDiv').show();
});
</script>

hey i ran into the exact same problem for the exact same reason as the comment you made. I ended up doing the display:none then manually added each css change that was made. First i made the masterDiv into a class
$('.masterDiv').css("display", "block");
$('.masterDiv' .accordian).css('width', '300px);
accordian being whatever the class easyUI set to a width of 0px. It ended up being a lot of css code but it works until Jquery EasyUI can come up with something.

Why you are hiding the div, if it has to be shown after pageload ?
Did you try
document.getElementById("masterDiv").style.display="block";

Changing div content on page load

I'm looking for a solution, in which div content changes on page load, randomly. Much like a JavaScript image on page load. I have made further notes in the code below.
I could do a randomize the content like images with JavaScript on page load, but here it's divs and I'm not sure how to change content inside them.
<div class="row BSlots">
<div class="Grid_4 fl">
/* This would be the code which would change */
/* For example once it would be <div class="hello"><p>Hi</p></div> and the other <iframe="Link"/> */
</div>
<div class="Grid_4 fr">
<script>Widget2(); /* Don't mind this, loading an actual JS image randomizer here */</script>
</div>
</div>
Can this be achieved without using JS? If not, I'd appreciate a basic example which I could fiddle with :)

Yes it could be achieved without Javascript. It depends on which serverside-technology you use. You could create a template and insert serverside ransom image-tags.
It is possible too, to do it via javascript.
If you want to use jQuery, you could do something like:
$(function(){
$(".Grid_4 fl").html(generateRandomImageHtml());
});

Stacked jQuery UI accordions not resizing

Be gentle I am new to this web dev game. I'm just trying to learn.
CODE:
<h4>Monday</h4>
<div id="first_accordian">
<h5>First Section</h5>
<div>
Some stuff.
</div>
<h5>Second Section</h5>
<div>
Some stuff.
</div>
</div>
<h4>Tuesday</h4>
<div id="second_accordian">
<h5>First Section</h5>
<div>
Some stuff.
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("[id$=_accordian]").accordion({ collapsible: true, active: false });
});
</script>
Obviously this is just a simplification of a partial view I have in and ASP.NET MVC3 app. But I am using jQuery UI and the accordion widget, so you will need to reference those for the code above to work.
QUESTION:
I have an issue here that when I expand an accordion element it will overlay any HTML underneath it. The behaviour I want is that I have a set of stacked accordions that all shift up or down when any element is selected in any of the accordions.
Does anyone know how I can do this with stacked accordions? Or thinking laterally. Is there any way I can add static headers that aren't accordion elements inline to the accordion (show above as the headers above each accordion; Monday, Tuesday)?
Is there are resizing event of something I should bind to? I'm at a loss as to where to start, any pointers welcome!
EDIT: Have just copied my own code into a file to check and experiment... and it works exactly how I need it to. But it doesn't in my app. So I'm guessing this must be down to something else going on outside of my code.
So... New question: What could stop something from resizing and creating this overlay problem?