We Keep Coding

Sticky Side Nav that Stops Sticking after a Certain Point

I was wonder how one would make a sticky side nav stop scrolling or stop sticking and lock into place after a certain point. The project page in question is located here:
http://www.tcdiggity.com/new-diggity-menu-22/
As you can see, the little nav with the navs on the left of the menu 'sticks' to the actual page. But if you keep scrolling down, it continues to stick. I was wondering if there would be a way to have it only scroll with the main menu page? I think i have it setup in it most basic form right now using the Fixed CSS tag. Any suggestions would be great! Thanks!

This should do what you want. You will have to find a value where you want it hidden after.
$(window).scroll( function() {
var valueOfScroll = $(document).scrollTop().valueOf();
if(valueOfScroll <= ???)
$('#sticker').show();
else
$('#sticker').hide();
});
From testing values on your site, it seems this works good, so it disappears before the end of your main content:
$(window).scroll( function() {
var valueOfScroll = $(document).scrollTop().valueOf();
if(valueOfScroll <= 10500)
$('#sticker').show();
else
$('#sticker').hide();
});
This is better for a fade effect:
var top = true;
var bottom = false;
$(window).scroll( function() {
var valueOfScroll = $(document).scrollTop().valueOf();
if(valueOfScroll <= 10500)
{
if(!top)
{
bottom = false;
top = true;
$('#sticker').fadeToggle(1000);
}
}
else
{
if(!bottom)
{
top = false;
bottom = true;
$('#sticker').fadeToggle(1000);
}
}
});
Hope this helps!
Also just as a side note, in your CSS I recommend adding margin-top:50px so you side bar doesn't go above that paper background you have for the main content. :)
.side-tabs {
margin-left: -135px;
margin-top: 50px;
position: fixed;
z-index: 1 !important;
}
Per your question in the comments:
$(window).scroll( function() {
var valueOfScroll = $(document).scrollTop().valueOf();
if(valueOfScroll <= 10500)
$('#sticker').css({ 'margin-left': "-135px" });
else
$('#sticker').css({ 'margin-left': "20px" });
if(valueOfScroll <= 10800)
$('#sticker').show();
else
$('#sticker').hide();
})
I would say that is "cleaner" because you don't need the second if statement, but looks fine to me.

Mega menu conversion to mobile dropdown

I have applied a mega menu in one of my websites i.e. http://www.risenotes.com but when I try to convert it into a single and shortened menu for mobile view, it does not work. I succeeded initially for mobile view but only either of the two views work. Can anyone guide about any javascript code for displaying mega menu as regular mobile menu.
I tried using the below javascript but it succeeded me in my work on mobile version only while regular website version failed. Also, please that I have installed a mobile menu on http://www.risequotes.com which works perfect. That website is built in wordpress while my mega menu site is a php based website. Is there a way to apply my wordpress menu style to my php site? I mean some script.
I have tried below script which worked for conversion into mobile menu (including icons) but I need a bit more sophisticated version.
<script type="text/javascript">
function responsiveMobileMenu() {
$('.rmm').each(function() {
$(this).children('ul').addClass('rmm-main-list'); // mark main menu list
var $style = $(this).attr('data-menu-style'); // get menu style
if ( typeof $style == 'undefined' || $style == false )
{
$(this).addClass('graphite'); // set graphite style if style is not defined
}
else {
$(this).addClass($style);
}
/* width of menu list (non-toggled) */
var $width = 0;
$(this).find('ul li').each(function() {
$width += $(this).outerWidth();
});
// if modern browser
if ($.support.leadingWhitespace) {
$(this).css('max-width' , $width*1.05+'px');
}
//
else {
$(this).css('width' , $width*1.05+'px');
}
});
}
function getMobileMenu() {
/* build toggled dropdown menu list */
$('.rmm').each(function() {
var menutitle = $(this).attr("data-menu-title");
if ( menutitle == "" ) {
menutitle = "Menu";
}
else if ( menutitle == undefined ) {
menutitle = "Menu";
}
var $menulist = $(this).children('.rmm-main-list').html();
var $menucontrols ="<div class='rmm-toggled-controls'><div class='rmm-toggled-title'>" + menutitle + "</div><div class='rmm-button'><span> </span><span> </span><span> </span></div></div>";
$(this).prepend("<div class='rmm-toggled rmm-closed'>"+$menucontrols+"<ul>"+$menulist+"</ul></div>");
});
}
function adaptMenu() {
/* toggle menu on resize */
$('.rmm').each(function() {
var $width = $(this).css('max-width');
$width = $width.replace('px', '');
if ( $(this).parent().width() < $width*1.05 ) {
$(this).children('.rmm-main-list').hide(0);
$(this).children('.rmm-toggled').show(0);
}
else {
$(this).children('.rmm-main-list').show(0);
$(this).children('.rmm-toggled').hide(0);
}
});
}
$(function() {
responsiveMobileMenu();
getMobileMenu();
adaptMenu();
/* slide down mobile menu on click */
$('.rmm-toggled, .rmm-toggled .rmm-button').click(function(){
if ( $(this).is(".rmm-closed")) {
$(this).find('ul').stop().show(300);
$(this).removeClass("rmm-closed");
}
else {
$(this).find('ul').stop().hide(300);
$(this).addClass("rmm-closed");
}
});
});
/* hide mobile menu on resize */
$(window).resize(function() {
adaptMenu();
});
</script>
My current use of CSS hides the menu for mobile view and displays only parent Lists.

Instead of using JavaScript, can you use CSS media queries?
/* Mobile styling goes here */
#media screen and (min-width: 500px) {
/* Desktop styling overrides go here */
}
Here's an example (I'm not going to copy what you did, but you should get the gist of it) http://jsfiddle.net/1gw19yqg/

Toggling text of "a href" based on screen width

Using jQuery/jQueryMobile, I have a link as follows:
<a href="index.html" id="HomeLink" data-role="button" data-mini="true" data-icon="home" data-iconpos="top" >Home</a>
I am trying to test various screen sizes, and if the screen width is less than 300px, I want to change:
data-iconpos="top"
to
data-iconpos="notext"
so I only get the icon. I have tried to do it with JavaScript:
var hl = document.querySelector('#HomeLink');
if ($(window).width() < 300) {
hl.setAttribute("data-iconpos", "notext");
} else {
hl.setAttribute("data-iconpos", "top");
}
But it won't work.
Question: can it be done in CSS instead.
If not: how can it be done in JavaScript?

You can't really set a data attribute with CSS as far as I know, but since you're already using jQuery, why not try it all the way :
$('#HomeLink').data('iconpos', ($(window).width() < 300 ? 'notext' : 'top') );
Remember to wrap that in document ready!

You can do this way altering your code:
var hl = $('#HomeLink');
if ($(window).width() < 300) {
hl.data("iconpos", "notext");
} else {
hl.data("iconpos", "top");
}
with .attr():
var hl = $('#HomeLink');
if ($(window).width() < 300) {
hl.attr("data-iconpos", "notext");
} else {
hl.data("data-iconpos", "top");
}

Try to wrap the code in window resize event, eg:
$(window).resize(function () {
check();
})
$(function () {
check();
})
function check() {
if ($(window).width() < 300) {
$('#HomeLink').attr('data-iconpos', 'notext');
} else {
$('#HomeLink').attr('data-iconpos', 'top');
}
}

I would like to suggest using a different approach.
The data-iconpos="top" looks a bit out of place to me here. I have a feeling (perhaps I'm wrong) that you're attempting to inline your styling into the HTML.
Why not try media queries?
#media screen and (max-width: 300px) {
#HomeLink {
/* styling for HomeLink when screen width is less than 300px */
}
}
This is a CSS-only solution. It works if the user decides to resize the screen after the page has loaded. Try resizing the "Result" frame in this jsfiddle and notice the color of the link changing.
Suggested reading:
http://alistapart.com/article/responsive-web-design
https://developer.mozilla.org/en-US/docs/CSS/Media_queries
And here are the docs on media queries: http://www.w3.org/TR/css3-mediaqueries/
Warning: mind ahem, IE below 9, ahem...

toggle body background

I hope someone can help me with this, I have this javascript code that toggles my body background
function changeDivImage() {
imgPath = document.body.style.backgroundImage;
if (imgPath == "url(images/bg.jpg)" || imgPath == "") {
document.body.style.backgroundImage = "url(images/bg_2.jpg)";
} else {
document.body.style.backgroundImage = "url(images/bg.jpg)";
}
}
I activate it with this link:
change
my problem is that it works fine in IE and firefox, but in chrome, the links work twice then stop working, it basically switches to bg_2.jpg then once clicked again switches back to bg.jpg then it never works again :/
also, is there an easier way to accomplish this? css only maybe? basically i have two body background pictures and i want to be able to click on the link to toggle 1, then click again to toggle 2 instead, then back to 1, etc...
lastly, how can i make the two backgrounds fade in and out? instead of just switch between the two?

Use CSS classes!
CSS Rules
body { background-image: url(images/bg.jpg); }
body.on { background-image: url(images/bg_2.jpg); }
JavaScript:
function changeDivImage() {
$("body").toggleClass("on");
}
If you want to fade, you will end up having to fade the entire page. Use can use jQuery's fadeIn and fadeOut.

Here is your solution:
(This also supports additional images).
var m = 0, imgs = ["images/bg.jpg", "images/bg_2.jpg"];
function changeDivImage()
{
document.body.style.backgroundImage = "url(" + imgs[m] + ")";
m = (m + 1) % imgs.length;
}
Here is the working code on jsFiddle.
Here is the jQuery version on jsFiddle.
UPDATE: CROSS-FADING Version
Here is the cross-fading jQuery version on jsFiddle.
You wouldn't want the whole page (with all elements) to fade in/out. Only the bg should fade. So, this version has a div to be used as the background container. Its z-depth is arranged so that it will keep itself the bottom-most element on the page; and switch between its two children to create the cross-fade effect.
HTML:
<div id="bg">
<div id="bg-top"></div>
<div id="bg-bottom"></div>
</div>
<a id="bg-changer" href="#">change</a>
CSS:
div#bg, div#bg-top, div#bg-bottom
{
display: block;
position: fixed;
width: 100%;
/*height: 500px;*/ /* height is set by javascript on every window resize */
overflow: hidden;
}
div#bg
{
z-index: -99;
}
Javascript (jQuery):
var m = 0,
/* Array of background images. You can add more to it. */
imgs = ["images/bg.jpg", "images/bg_2.jpg"];
/* Toggles the background images with cross-fade effect. */
function changeDivImage()
{
setBgHeight();
var imgTop = imgs[m];
m = (m + 1) % imgs.length;
var imgBottom = imgs[m];
$('div#bg')
.children('#bg-top').show()
.css('background-image', 'url(' + imgTop + ')')
.fadeOut('slow')
.end()
.children('#bg-bottom').hide()
.css('background-image', 'url(' + imgBottom + ')')
.fadeIn('slow');
}
/* Sets the background div height to (fit the) window height. */
function setBgHeight()
{
var h = $(window).height();
$('div#bg').height(h).children().height(h);
}
/* DOM ready event handler. */
$(document).ready(function(event)
{
$('a#bg-changer').click(function(event) { changeDivImage(); });
changeDivImage(); //fade in the first image when the DOM is ready.
});
/* Window resize event handler. */
$(window).resize(function(event)
{
setBgHeight(); //set the background height everytime.
});
This could be improved more but it should give you an idea.

There's a cleaner way to do this. As a demo, see:
<button id="toggle" type="button">Toggle Background Color</button>
var togglebg = (function(){
var bgs = ['black','blue','red','green'];
return function(){
document.body.style.backgroundColor = bgs[0];
bgs.push(bgs.shift());
}
})();
document.getElementById('toggle').onclick = togglebg;
http://jsfiddle.net/userdude/KYDKG/
Obviously, you would replace the Color with Image, but all this does is iterate through a list that's local to the togglebg function, always using the first available. This would also need to run window.onload, preferably as a window.addEventListener/window.attachEvent on the button or elements that will trigger it to run.
Or with jQuery (as I notice the tag now):
jQuery(document).ready(function ($) {
var togglebg = (function () {
var bgs = ['black', 'blue', 'red', 'green'];
return function () {
document.body.style.backgroundColor = bgs[0];
bgs.push(bgs.shift());
}
})();
$('#toggle').on('click', togglebg);
});
http://jsfiddle.net/userdude/KYDKG/1/
And here is a DummyImage version using real images:
jQuery(document).ready(function ($) {
var togglebg = (function () {
var bgs = [
'000/ffffff&text=Black and White',
'0000ff/ffffff&text=Blue and White',
'ffff00/000&text=Yellow and Black',
'ff0000/00ff00&text=Red and Green'
],
url = "url('http://dummyimage.com/600x400/{img}')";
return function () {
document.body.style.backgroundImage = url.replace('{img}', bgs[0]);
bgs.push(bgs.shift());
}
})();
$('#toggle').on('click', togglebg);
});
http://jsfiddle.net/userdude/KYDKG/2/

Javascript and shrinking a div section

I have a div section on my .ASPX form. The section just contains a load of links (standard
document.getElementById('Side1').style.display = 'none';
This worked great but was a bit abrupt for what I wanted, so I wrote the little routine below (with a little help from the internet) but although the DIV dection shrinks, and the content below scrolls up .. the links in the div section don't move, until the div section is made invisible .... is there a way round this, or am i going about this all wrong (ps my javascript is rubbish)
var originalSize =0;
var i = 0;
var ts;
function shrink() {
if (i != 28) {
document.getElementById('Side1').style.height = parseInt(document.getElementById('Side1').style.height) - 5 + 'px';
i++;
ts = setTimeout("shrink()", 10);
}
else {
document.getElementById('Side1').style.display = 'none';
i = 0;
clearTimeout(ts);
}
}

You probably just need to add this to your CSS:
#Side1 { overflow: hidden; }