Develop Reference

Toggling visibility of icon when window is resized

Problem
I have a dropdown menu that toggles between a hamburger menu and a cross icon when the navigation opens and closes. However, if a user opens the menu, then resizes the window and the window width is still less than 768px (still open), it shows both the icons stacked on top of each other when it only should show the cross.
On a side note, I'm looking to just simplify the complexity of this Javascript snippet. I'm not sure that adding and removing a class of is-visible was the correct/best approach.
JSFiddle: https://jsfiddle.net/bdmebsu8/
scripts.js
$(function(){
// Window size
if ($(window).width() <= 768) {
$(".icon-cross").hide();
$(".icon-menu").addClass("is-visible");
$(".icon-menu").show();
} else {
$(".icon-menu").hide();
$(".icon-menu").removeClass("is-visible");
}
$(window).resize(function(){
var w = $(this).innerWidth();
if (w > 768) {
$(".nav__list--dropdown").hide();
$(".icon-cross").hide();
$(".icon-menu").hide();
$(".icon-cross").removeClass("is-visible");
$(".icon-menu").removeClass("is-visible");
} else {
$(".icon-cross").hide();
$(".icon-menu").show();
$(".icon-menu").addClass("is-visible");
}
});
// Dropdown menu
$(".nav__menu").on("click", function(){
$(".is-hidden").slideToggle("slow");
var menuVisible = $(".icon-menu").hasClass("is-visible")
if (menuVisible) {
$(".icon-menu").removeClass("is-visible");
$(".icon-menu").hide();
$(".icon-cross").addClass("is-visible");
$(".icon-cross").show();
} else {
$(".icon-cross").removeClass("is-visible");
$(".icon-cross").hide();
$(".icon-menu").addClass("is-visible");
$(".icon-menu").show();
}
});
});
index.html
<div class="dropdown">
<ul class="nav__list--dropdown is-hidden">
<li class="item--services--dropdown">Services</li>
<li class="item--projects--dropdown">Projects</li>
<li class="item--teaching--dropdown">Teaching</li>
<li class="item--blog--dropdown">Blog</li>
<li class="item--contact--dropdown">Contact</li>
</ul>
</div>
<div class="nav__menu">
<img src="src/img/sm-menu.png" class="icon-menu" alt="Open Menu">
<img src="src/img/cross-dark.png" class="icon-cross" alt="Close Menu">
</div>

What you could do to simplify your script:
$(function(){
function updateMenu(){
// all logic in here for checking width and show/hide/set classes
}
updateMenu(); // runs on doc ready
$(window).on("resize", updateMenu);
}

Enable button when scroll bootstrap modal to bottom

I want to force the user to read all the agreement inside the modal. The idea is simple, if they don't scroll to the last line of the text. The button still disable. But the button is not enable. This is my code:
Javascript:
$('#agreement').scroll(function () {
if ($(this).scrollTop() == $(this)[0].scrollHeight - $(this).height()) {
$('#closeBtn').removeAttr('disabled');
}
});
As for the clearer picture. I put the code in js here : http://jsfiddle.net/h3WDq/1129/
This is an update version from #BG101. The button enable when I scroll to the bottom but it keeps enable even the modal button is click again. http://jsfiddle.net/h3WDq/1132/

your modal-body need the scroll event, and you need a small change to the if:-
$('.modal-body').scroll(function () {
if ($('#agreement').height() == ($(this).scrollTop() + $(this).height())) {
$('#closeBtn').removeAttr('disabled');
}
});
working snippet below (updated to toggle on/off)
$('.modal-body').scroll(function() {
var disable = $('#agreement').height() != ($(this).scrollTop() + $(this).height());
$('#closeBtn').prop('disabled', disable);
});
.btn-group {
z-index: 1051;
}
.modal-body {
height: 300px;
overflow: auto
}
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<div class="container">
<h3>User Agreement</h3>
<!-- Button to trigger modal -->
<div>
Launch Modal
</div>
<!-- Modal -->
<div id="myModal1" class="modal hide" tabindex="-1" role="dialog">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>User Agreement</h3>
</div>
<div class="modal-body">
<div id="agreement" style="height:1000px;">
A very long agreement
</div>
</div>
<div class="modal-footer">
<button id="closeBtn" class="btn btn-primary" data-dismiss="modal" aria-hidden="true" disabled>I Accept</button>
</div>
</div>
</div>

#terms-page - is the ID of the particular div
You can try the following:
$("#terms-page").scroll(function () {
var ele = document.getElementById('terms-page');
if (ele.scrollHeight - ele.scrollTop === ele.clientHeight)
{
$('#closeBtn').removeAttr('disabled');
}
});

Why not put a hidden element at the bottom of the agreement and detect when the offset of that element is scrolled to the top?
$('#agreement').scroll(function () {
var target = $("#target").offset().top;
if ($(this).scrollTop() >= target) {
$('#closeBtn').removeAttr('disabled');
}
});

Remove Height from div and paste the below code and it will work super
$('.modal-body').scroll(function() {
var height = $('#agreement').height();
console.log(height);
var scroll = $(this).scrollTop() + $(this).height();
console.log(scroll);
if (height>scroll) {
$('#closeBtn').prop('disabled', true);
} else {
$('#closeBtn').prop('disabled', false);
}
});

Sticky Nav 'bounces' in internet explorer

I am developing a website that has a navigation bar about 600 pixels from the top of the screen. When the user scrolls past the nav bar, I have a javascript function that changes the class to make the position:fixed. It works well in all browsers except in Internet explorer. In IE it bounces each time the user scrolls.
Nav Bar
<div class="w-container navbox">
<a class="w-nav-brand moblielogo" href="#homeScroll"><img class="w-hidden-main w-hidden-large" src="images/logo_2015.png" alt="moblie nav Logo"/>
</a>
<nav class="w-nav-menu w-clearfix" role="navigation">
<a class="w-nav-link leftnavlink moblienavlink" href="#homeScroll">Home</a>
<a class="w-nav-link leftnavlink moblienavlink" href="#companieScroll">Companies</a>
<a class="w-nav-link leftnavlink moblienavlink" href="#contactScroll">Contact</a>
</nav>
<div class="w-nav-button">
<div class="w-icon-nav-menu"></div>
</div>
</div>
</div>
Javascript
$(document).on('scroll', function () {
if ($(window).scrollTop() > 805) {
$('.navbar').addClass('stickynav');
}
else {
$('.navbar').removeClass('stickynav');
}
});
</script>
CSS
.stickynav {
position:fixed;
top:0;
}
What I think is going wrong is that IE is removing and adding this class each time this function is called. But I'm not sure how to test this or fix it.
Made a simplified version on jsfiddle
LINK

jQuery add class on hover on certain width if bootstrap dropdown is showing

I am using bootstrap with dropdown. My anchor has a background color on hover. But when the dropdown is showing i want the parent containing the dropdown to lose the background color.
My HTML is:
<nav class="navbar navbar-default av-nav" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav nav nav-tabs">
<li class="lia li1">Home</li>
<li class="dropdown li2"><a class="dropdown-toggle" data-toggle="dropdown">About</a><span class="nav-arrow"></span>
<div class="dropdown-menu">
<ul>
<li>Drop 1</li>
<li>Drop 2</li>
<li>Drop 3</li>
</ul>
</div>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav>
My attempt at this:
$( document ).ready(function() {
var section = $('.av-nav .nav li a:hover');
var width = section.width();
if (width < 768)
section.addClass('nobg');
});
The CSS:
.nobg {background: none!important;}
What am I doing wrong that my code is not working?

You may use these events provided by bootstrap for dropdowns :
show.bs.dropdown : This event fires immediately when the show instance method is called.
shown.bs.dropdown : This event is fired when the dropdown has been made visible to the user (will wait for CSS transitions, to complete).
hide.bs.dropdown : This event is fired immediately when the hide instance method has been called.
hidden.bs.dropdown : This event is fired when the dropdown has finished being hidden from the user (will wait for CSS transitions, to complete).
Usage :
$('.dropdown').on('show.bs.dropdown', function () {
// do something…
// In your case
var section = $('.av-nav .nav li a:hover');
var width = section.width();
if (width < 768){
section.addClass('nobg');}
})
$('.dropdown').on('hide.bs.dropdown', function () {
// do something…
// In your case
var section = $('.av-nav .nav li a:hover');
var width = section.width();
if (width < 768){
section.removeClass('nobg');}
})
I guess this will work, you might need to do some changes though.

you also need to check when window size is resize. can you plz try this code.
$( document ).ready(function() {
var section = $('.av-nav .nav li a:hover');
var width = section.width();
if (width < 768){
section.addClass('nobg');
}
$(window).resize(function(){
// on window resize call function to check window width.
var section = $('.av-nav .nav li a:hover');
var width = section.width();
if (width < 768){
section.addClass('nobg');
}
});
});

Use media queries:
#media screen and (max-width:767px){
.nobg:focus {background: none!important;}
}
Add the class to your anchor tag.
<a class="nobg"...

Pseudo-selectors a:hover should not work in Jquery selector.
First solution is to use hover or on('hover') to trigger the event.
Second one is to use css #media with max-width 768.

You are missing $, add this and try
$( document ).ready(function() {
var section = $('.av-nav .nav li a:hover');
var width = section.width();
if (width < 768)
$(section).addClass('nobg');
});

Bootstrap carousel no reacting when responsive

I have a carousel set up with a small box inside it to display some text that the user can fill out. This box can be toggled on and off where it slides up and down as required.
However, in mobile devices, this box no longer appears. I've checked the element and I can see that it is firing, but nothing is appearing in my browser. Could someone take a fresh look over my code to see if I forgetting something?
I won't post the whole carousel code, just the affect area.
Carousel affect area:
<div class="container-fluid slider np">
<div class="row clearfix">
<div class="col-md-12 column">
<div id="carousel-733617" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
#foreach (var slide in Model.Content.GetPropertyValue<ArchetypeModel>("carousel"))
{
var imageMedia = Umbraco.Media(slide.GetValue("slideImage")).GetCropUrl("CarouselSlide");
var slideHeading = slide.GetValue("heading");
var slideText = slide.GetValue("text");
string relatedLinksRaw = slide.GetValue("relatedLink");
dynamic relatedLinks = null;
if (!string.IsNullOrEmpty(relatedLinksRaw))
{
relatedLinks = Json.Decode(relatedLinksRaw);
}
if (slideCount == 0)
{
slideClass = "item active";
}
else
{
slideClass = "item";
}
<div class="#slideClass" #*role="option" aria-selected="true" tabindex="0"*#>
<img alt="" src="#imageMedia" />
<div class="carousel-caption" style="z-index:20;">
<div class="buttonslide">
<a href="#" class="btn btn-xs btn-default pull-right openclose">
<i class="glyphicon glyphicon-chevron-down"></i> Close</a>
</div>
<div class="slidecontent">
<h2>#slideHeading</h2>
<p>
#slideText
<br />
#if (relatedLinks != null)
{
foreach (var relatedLink in relatedLinks)
{
if (relatedLink.newWindow == true)
{
#relatedLink.caption
}
else
{
#relatedLink.caption
}
}
}
</p>
</div>
</div>
</div>
slideCount++;
}
My Javascript that controls the box opening and closing:
$('.openclose').click(function(e) {
if ($('.slidecontent').is(":visible")){
$('.openclose').html('<i class="glyphicon glyphicon-chevron-up"></i> Show More');
}
else{
$('.openclose').html('<i class="glyphicon glyphicon-chevron-down"></i> Close');
}
$('.slidecontent').toggle('slow');
e.preventDefault();
});
Above is a quick MS Paint of the issue.
When I shrink down my browser, the carousel (the black box) resizes as per the responsive design. When it reaches a certain width, the green box automatically toggles off and disappears a bar with a button for Open / Close.
When the carousel is full size, the green box works just fine. It is when the black box is shrunk that the green box no longer appears. When I inspect the element, I can see my code is firing off something, however, the green box is not visible on my screen.

You can add media queries in javascript too.
You just need to change the 500px to whatever you want and add the code into the if you want to use.
// media query event handler
if (matchMedia) {
var mq = window.matchMedia("(min-width: 500px)");
mq.addListener(WidthChange);
WidthChange(mq);
}
// media query change
function WidthChange(mq) {
if (mq.matches) {
// window width is at least 500px
}
else {
// window width is less than 500px
}
}
}
Hope this helps, you can read more about it here.

I believe that the code in your CSS #media property is playing a role here. Check and confirm.
You can manually define how each screen may look. For example:
#media screen and (max-width: 300px) {
body {
background-color: lightblue;
}
}
This will change the screen color if screen size is less than 300.