Develop Reference

jQueryMobile - Scroll to a position onLoad

In jQueryMobile, on the page load, I would like to scroll to a given position. I know how to do it in classic jQuery, but in jQueryMobile there is an auto scroll top on the page load.
I tried to do :
$( document ).ready(function() {
$.mobile.silentScroll(1000);
});
That doesn't work. My page stay blocked to the top of the page.
While if i click on a link with onclick="$.mobile.silentScroll(1000);" that works perfectly !
I just would like to scroll to a yPosition on the page load :) !
=======EDIT============
After suggestions of White Raven and Omar I've tried to do this :
$( document ).delegate("#pagePkmn", "pageinit", function() {
$.mobile.silentScroll(1000);
});
OR this :
$(document).one("pagecontainershow", function () {
$.mobile.silentScroll(1000);
});
But still no effect ...
Thanks for your attention.

Using $(document).ready() is a bad idea:
http://view.jquerymobile.com/1.3.1/dist/demos/faq/dom-ready-not-working.html
It is recommended to use pageinit
=== EDIT ===
You can always use the ghetto way:
setTimeout(function(){$.mobile.silentScroll(1000);}, 1000); // scroll after 1 second

Use pagecontainershow as it triggers after page is shown and JQM performes a default scroll to page's top.
$(document).one("pagecontainershow", function () {
/* scroll */
});

Codrops Horizontal Slide Out Menu - Show submenu on page load

I'm working on a project based on one of the Codrops blueprints: http://l3s11023.zeus03.de/test/
I want to have the first submenu 'Lovely Spirits' already open when the page loads. I tried to do this with jQuery $( document ).ready(function() and a trigger event but without success.
Any help would be greatly appreciated. thanks.

Here is a fiddle with a part of your code and an example how you could trigger the click in
$(document).ready(function(){});
Make sure you include jQuery
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
$(document).ready(function(){
$('.cbp-hsmenu').children('li').children('a').on('click',function(){
$(this).next('ul').css('display','block');
});
/* HERE IS the interesting part*/
/* Trigger click on that function opening your sub-nav */
$('#gesu').trigger('click');
});
http://jsfiddle.net/Zms3T/
(Your question is not good. Next time please try to show only that part of code which is needed)
UPDATE THE ANSWER AFTER LOTS of trying on your site
The Code above was just an example of how you could try it. I was sure you trigger the function to open that navigation. However, replace the document ready with this: That will do what you where looking for.
$(document).ready(function(){
var elemHeight = $('.cbp-hsmenu li:first-child ul').height()
$('.cbp-hsmenubg').css('height', elemHeight+'px');
$('.cbp-hsmenu li:first-child').addClass('cbp-hsitem-open');
});

Using jQuery mCustomScrollbar and links to anchor

I'm using jQuery mCustomScrollbar script to scroll the content element in one column with id="scroll_box". I also have couple of images (in other column) who has anchor links to elements in "scroll_box". The links has that syntax: http://www.example.com/index.php?id=17#c33.
I'm using that script for moving after click to anchor:
function scrollTo(hash) {
location.hash = "#" + hash;
}
That piece of code working fine but only when I disable mCustomScrollbar script - so I don't have "good looking" and working scroller. When it's turned on the scroller looks and working ok, but anchor links didn't work...
My mCustomScrollbar code:
(function($){
$(window).load(function(){
$("#scroll_box").mCustomScrollbar({
callbacks:{
onScroll:function(){
onScrollCallback();
},
onTotalScroll:function(){
onTotalScrollCallback();
},
onTotalScrollOffset:40,
onTotalScrollBack:function(){
onTotalScrollBackCallback();
},
onTotalScrollBackOffset:20
}
});
});
})(jQuery);
Is it possible to conect that two script into one working?

Actually the plugin have a lot of crazy issues! that make me drop it!; i just customize my self scroll bar and delete this plugin from my project for same reason.
But i fixed the scroll to anchor by using this solution:
$(document).ready(function() {
$("a").click(function() {
if($(this).attr('href') == "#top"){
//this bit is for wordpress, where top is default: .entry-title
var elID=".entry-title";
$(".jsoverflow").mCustomScrollbar("scrollTo",elID);
}else{
if ($(this).attr('href').indexOf("#") >= 0){
//this bit is for any other anchor
$(".jsoverflow").mCustomScrollbar("scrollTo",$(this).attr('href'));
}
}
});
});
It's worked for me 100% and i get it from Get-Hub.

trying to use .load() to pull in multiple link from a slider

I'm really new to jquery and I'm trying to learn new things with coding. I have a slider working on 5 topics that slide left to right. For each of the 5 items in that slider there is a link to a different web page internally,that i want to bring in content using the .load() method into a blank div.
Other than the pictures not working and the slider part not scrolling, here is what I'm trying to do.
Any help would be grateful, in pointing me into the right direction. Code is here
<script>
$(document).ready(function() {
$("#te").click(function(evt) {
$('#news').empty().load('ppv_ons.html #ppv');
evt.preventDefault();
}); // end click
}); // end ready
</script>

I made HTML this:
<div class="link" id="te">Find out more</div>
Into
<div class="link"><a id="te" href="ppv_wm.html" target="blank">Find out more</a></div>
And updated the jQuery to look like this:
$(document).ready(function() {
$("#te").click(function(evt) {
evt.preventDefault();
$('#news').empty().load('ppv_ons.html #ppv');
});
}); // end ready
JSFIDDLE: http://jsfiddle.net/6cuam/8/

you can get your content like
$(document).ready(function() {
$("#te").click(function(evt) {
$('#news').empty();
$('#news').load($('#ppv').html());
evt.preventDefault();
});
});

Hover div jquery

Here is my script :
<body>
<div id ="mainCategory" class='fade'>
Category</div>
<div id="divSubCategory">
Category1
<br />
Category2
</div>
<script type="text/javascript">
$("div").hover(
function () {
$(this).append($("#divSubCategory").html());
},
function () {
$("#divSubCategory").remove();
}
);
$("#divSubCategory.fade").hover(function () { $(this).fadeOut(100); $(this).fadeIn(500); });
</script>
</body>
I want to show and hide divSubCategory on mainCategory hover. But it doesn't work. What should I add?

$(document).ready(function(){
$('#mainCategory').bind('mouseenter', function() {
$('#divSubCategory').fadeIn();
});
$('#mainCategory').bind('mouseleave', function() {
$('#divSubCategory').fadeOut();
});
});

Ok dude the problem is that you're using .html(). This copies the inner html (not the outer <div id="divSubCategory"></div> bit too... just the bit in the middle.
Because of this, when you do $('#divSubCategory').remove() its removing the actual div in the HTML, not the HTML you've moved into the div above.
Assuming you have display: none on #divSubCategory you will see the text from that div get appended to the first div, then when you mouse-out it will not go away (although the second (hidden) div will get deleted).
Anyway the way around this is to use clone(). I'll do a fiddle for you:
http://jsfiddle.net/fZZu5/1/
I also fixed your fades for you.
EDIT: This moves the div#divSubCategory into the div#mainCategory before showing it and then removes it completely from there when you mouse-out - this is what I assumed you wanted to do from your code. Nicks just shows and hides it where it is. Depending on what you want, both these answers are correct. :)

This is the 100% working with your requirement:
Check this: http://jsfiddle.net/ZWqnk/8/

Wrap your code inside the document.ready() function
$(document).ready(function(){
// Your code here
});