We Keep Coding

Javascript functions trigger in Google inspects feature, but not otherwise

//Overlay mobile menu open
$('#burger-icon').on('click', function(e) {
e.stopPropagation();
document.getElementById('fp-menu').style.height = "100%";
let overlay_content = document.getElementsByClassName("overlay-content")[0];
let pipe = overlay_content.querySelector(".pipe");
let contact = document.querySelector("#sidebar-leftButton");
let case_studies = document.querySelector("#sidebar-rightButton");
if (screen.width < 1000) {
let overlay_contentA = document.querySelectorAll(".overlay a");
for (i = 0; i < overlay_contentA.length; i++) {
overlay_contentA[i].style.color = "white";
}
//changes the social icons to white if in mobile view.
document.getElementById('instagram').src = "instagram_white.svg";
document.getElementById('linkedin').src = "linkedin_white.svg";
document.getElementById('twitter').src = "twitter_white.svg";
//gets rid of the pipe in menu that is visible for the desktop version
//removes sidetabs while in overlay menu
pipe.style.display = "none";
contact.style.display = "none";
case_studies.style.display = "none";
//changes how the elements are displayed when overlay is triggered
$('#fp-menu .news').removeClass("col-sm-2");
$('#fp-menu .portfolio').removeClass("col-sm-3");
$('#fp-menu #social').removeClass("col-sm-6");
}
});
function closeOverlayMenu() { //closes the overlay mobile menu
// e.stopPropagation();
$('#fp-menu').animateCss('slideUp');
$('#fp-menu').css('height', 0);
let overlay_content = document.getElementsByClassName("overlay-content")[0];
let pipe = overlay_content.querySelector(".pipe");
let contact = document.querySelector("#sidebar-leftButton");
let case_studies = document.querySelector("#sidebar-rightButton");
let overlay_contentA = document.querySelectorAll(".overlay a");
for (i = 0; i < overlay_contentA.length; i++) {
overlay_contentA[i].style.color = "black";
}
//changes icons to black on slide up of overlay
document.getElementById('instagram').src = "instagram.svg";
document.getElementById('linkedin').src = "linkedin.svg";
document.getElementById('twitter').src = "twitter.svg";
//restores elements of the original homepage that were hidden for overlay
pipe.style.display = "block";
contact.style.display = "block";
case_studies.style.display = "block";
$('#fp-menu .news').addClass("col-sm-2");
$('#fp-menu .portfolio').addClass("col-sm-3");
$('#fp-menu #social').addClass("col-sm-6");
};
document.getElementsByTagName('body')[0].onresize = function() {
closeOverlayMenu();
};
//overlay mobile menu close
$('#closebtn').on('click', function(e) {
e.stopPropagation();
$('#fp-menu').animateCss('slideUp');
$('#fp-menu').css('height', 0);
//if overlay mobile menu is down, close it by clicking the X
if (screen.width < 1000) {
closeOverlayMenu();
console.log(document.querySelectorAll("#social"));
}
});
//overlay menu styling
.overlay {
height: 0;
width: 100%;
position: fixed;
z-index: 999;
top: 0;
left: 0;
background-color: #000000;
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 5%;
width: 100%;
text-align: center !important;
margin-top: 90px;
.row{
padding: 50px 30px 50px 30px;
.column{
float: left;
width: 33.33%;
padding: 0 5px 0 5px;
}
}
img {
width: 50px;
}
div {
padding: 30px 0 30px 0;
}
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #FFFFFF;
}
.overlay a:hover, .overlay a:focus {
color: #f1f1f1;
}
#closebtn {
display:block;
position: relative;
top: 5px;
right: 20px;
font-size: 60px;
}
#social{
position: relative;
top: 10px;
a {
padding: 5% 5% 5% 5%;
}
}
#fp-menu{
display: block;
color: $menu_black;
}
.pipe{
display: block;
transition: 0.4s;
}
<div id="fp-menu" class="overlay">
<div id="closebtn" style="color: white;">X</div>
<div class="column overlay-content">
<!-- <div class="column"> -->
<div class="col-sm-2 news">
NEWS
</div>
<div class="col-sm-1 pipe">
|
</div>
<div class="col-sm-3 portfolio">
PORTFOLIO
</div>
<div id="social" class="col-sm-6">
<img id="instagram" src='instagram.svg' />
<img id="linkedin" src='linkedin.svg' />
<img id="twitter" src='twitter.svg' />
</div>
</div>
</div>
So the weirdest thing, I've got 1 function that is to trigger under 2 conditions: when the window is resized and when the exit button is clicked.
This relates to an overlay menu that's actually intended for mobile users.
The functions work as they are supposed to, in both cases, when I have the inspection console open in chrome. However, when I close this and return to the normal browser window, the functions cease to execute.
On the mobile it is fine. I have only encountered this problem on the desktop/laptop (as I tried it on different desktops [iMacs] and 2 laptops [Macbooks, but the type of hardware I don't think matters]).
Currently the icons in the "#social" div are not being changed to white, which is what I expect to happen when opened, and when closed, they return to black. They are staying black throughout the execution.
Has anyone ever experienced this before? This is related to a Wordpress platform site. Totally custom built, no themes.
Please let me know if this description helps. If any code is needed, please let me know.
Ps: I thought it was a caching problem, on the terminals or on the server, and I cleared the cache on both but the issue still persists.
function closeOverlayMenu(){//closes the overlay mobile menu
$('#fp-menu').animateCss('slideUp');
$('#fp-menu').css('height', 0);
let overlay_content = document.getElementsByClassName("overlay-content")[0];
let pipe = overlay_content.querySelector(".pipe");
let contact = document.querySelector("#sidebar-leftButton");
let case_studies = document.querySelector("#sidebar-rightButton");
let overlay_contentA = document.querySelectorAll(".overlay a");
for (i = 0; i < overlay_contentA.length; i++) {
overlay_contentA[i].style.color = "black";
}
//changes icons to black on slide up of overlay
document.getElementById('instagram').src="https://s3-eu-west-1.amazonaws.com/mvt-hosted-images/instagram.svg";
document.getElementById('linkedin').src="https://s3-eu-west-1.amazonaws.com/mvt-hosted-images/linkedin.svg";
document.getElementById('twitter').src="https://s3-eu-west-1.amazonaws.com/mvt-hosted-images/twitter.svg";
//restores elements of the original homepage that were hidden for overlay
pipe.style.display="block";
contact.style.display="block";
case_studies.style.display="block";
$('#fp-menu .news').addClass("col-sm-2");
$('#fp-menu .portfolio').addClass("col-sm-3");
$('#fp-menu #social').addClass("col-sm-6");
};
I would expect that the function would trigger without the dev console being active. Please let me know if any further description or information would help.

How to make this bootstrap nav submenu always open?

I have a code to make bs nav, but I don't understand how to make submenu always open without clicking menu name.
This is the code:
http://jsfiddle.net/6hrmodok/2/
and please answer this question with the new code.

To make the submenu always open in bootstrap navbar, you just need to add a class "open" like this <li class="dropdown open"> this will make your bootstrap's navbar submenu always open and it will toggle also.

.gw-nav-list>li.always-active>a,
.gw-nav-list>li.always-active>a:hover,
.gw-nav-list>li.always-active>a:focus,
.gw-nav-list>li.always-active>a:active {
background-color: #fff;
color: #2574A9;
font-weight: bold;
font-size: 13px;
}
.gw-nav-list>li.always-active:before {
display: inline-block;
content: "";
position: absolute;
left: 0px;
top: -1px;
bottom: 0;
z-index: 1;
border: 2px solid #2574A9;
border-width: 0 0 0 5px;
}
.always-active .gw-submenu,
.gw-nav-list>li.always-active .gw-submenu {
display:block;
}
And for JavaScript;
$('.gw-nav > li:not(.always-active) > a').click(function () {
....
Updated fiddle

you can open the submenu on page load with simple jquery code as below in your script file.
var pageload = function()
{
$(".gw-nav > li").each(function ()
{
var checkElement = $(this);
var ulDom = checkElement.find('.gw-submenu')[0];
if (ulDom != undefined) {
checkElement.addClass('active');
checkElement.find('ul').slideDown(300);
return;
}
});
}();
check the fiddler here.
http://jsfiddle.net/o1jw4txg/

Javascript modal window requires scroll down to see

Am currently working with the Soundcloud API to pull images and track links for songs. Am currently showing track info through a modal window upon clicking the album image. However, for the songs on the bottom of the screen, the modal window only appears at the top of the screen, requiring a user to scroll up to see the track info. Probably has something to do with the css positioning but removing position:absolute only puts the modal window at the bottom of all the album images, requiring a scroll down. How can I make it so that a user's click on an image will open and start the modal window right where they currently are, without scrolling? Javascript / jquery /css answers all welcomed.
My CSS:
#modal {
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.2);
position: absolute;
top: 0;
left: 0;
}
#trackinfo {
width:380px;
height: 180px;
padding: 20px;
margin-right: auto;
margin-left: auto;
margin-top: 100px;
box-shadow: 10px 10px 5px;
border-radius: 15px;
text-align: center;
background: #c4e5c1;
font-family: Rockwell, "Courier Bold", Courier, Georgia, Times, "Times New Roman", serif;
}
.hidden {
display:none;
}
My Javascript for show and hide modal:
function doSearch() {
var searchTerm = document.getElementById('search').value;
// Search soundcloud for artists
SC.get('/tracks', { q: searchTerm}, function(tracks) {
for(track in tracks) {
var img = document.createElement('img');
img.setAttribute("src", (tracks[track]["artwork_url"]));
var title = tracks[track].title.replace("'", "\\\'").replace("\"", "\\\"");
linky = document.createElement('a');
linky.setAttribute("href", (tracks[track].permalink_url));
console.log(linky);
img.setAttribute("onclick", "showTrackInfo('" + title + "\\n"+ tracks[track].uri + " " + "\\n\\n(click to close) " + "')");
console.log(img);
if (tracks[track]["artwork_url"] == null) {
console.log(""); }
else {
var Catalog = document.getElementById('catalog');
Catalog.appendChild(img);
$('div#catalog').append('<img src="http://i.imgur.com/rGdvfl7.png">');
}
}
});
};
function showTrackInfo(track) {
var trackInfoElement = document.getElementById("trackinfo");
trackInfoElement.appendChild(document.createTextNode(track));
var modal = document.getElementById("modal");
modal.setAttribute("class", "");
}
function hidemodal() {
var trackInfoElement = document.getElementById("trackinfo");
trackInfoElement.childNodes;
while ( trackInfoElement.firstChild ) trackInfoElement.removeChild( trackInfoElement.firstChild );
var modal = document.getElementById("modal");
modal.setAttribute("class", "hidden");
}
The functions all work well, I just need to know how to position the modal box upon click so that the user doesn't need to scroll to see the trackinfo. Any help much appreciated.

Try position: fixed; on the dialog box, should make it fill the page no matter where they are on it

javascript chatbox / messenger script

I'm trying to write a facebook like chatbox, but i've encountered a small problem.
I'm using the following code (it's only test code, so it's not really clean):
css code:
#messenger {
position: fixed;
bottom: 0px;
right: 10px;
width: 200px;
height: 300px;
z-index: 4;
background-color: #ECECEC;
border: 1px solid #000;
}
#messenger.p {
text-align: right;
}
#contacts {
margin: 5px 5px 5px 5px;
}
#chatspace {
position: fixed;
bottom: 0px;
right: 240px;
height: 20px;
left: 20px;
background-color: #ECECEC;
border: 1px solid #000;
z-index: 4;
}
.chatbox {
position: absolute;
bottom: 0px;
width: 200px;
height: 200px;
z-index: 4;
background-color: #ECECEC;
border: 1px solid #000;
}
html/javascript code:
<script type="text/javascript">
var i = 0;
function oc_chatbox() {
if (i == 0) {
document.getElementById('contacts').style.visibility = 'hidden';
document.getElementById('messenger').style.height = '20px';
i = 1;
}
else {
document.getElementById('contacts').style.visibility = 'visible';
document.getElementById('messenger').style.height = '300px';
i = 0;
}
}
function new_chat(userid) {
var new_right;
new_right = document.getElementById('messenger').style.right;
//alert('old value: '+ new_right);
new_right += 20;
//alert('New value of right: '+ new_right);
document.getElementById('chatspace').innerHTML = '<div id="'+userid+'" class="chatbox" style="right: '+new_right+'px;"></div>';
//document.write('<div id="'+userid+'" class="chatbox" style="right: '+new_right+'px;"></div>');
}
</script>
<div id="chatspace"></div>
<div id="messenger">
<p>Collapse</p>
<div id="contacts">
<ul>
<li>contact A</li>
</ul>
</div>
</div>
the problem is, that when I try to add new chats to the chatbar, i can't seem the place them next to each other.
anyone who can help ?
EDIT:
so i changed to javascript code to:
var last = null;
function new_chat(userid) {
if(userid==null)
userid = "user666";
var new_right;
var margin = 10;
var messenger = window.last==null?document.getElementById('messenger'):window.last; //Take the messenger or the last added chat
new_right = document.body.clientWidth-messenger.offsetLeft; //Compute the window size
console.log(new_right); //Log the number
new_right += margin; //keep spaces between divs
var newChat = document.createElement("div"); //DOM create DIV
newChat.id = userid;
newChat.className = "chatbox shadow";
newChat.style.right = new_right+"px";
newChat.innerHTML = '<p>'+userid+'</p><p><textarea></textarea></p>';
window.last = newChat; //Remember whichever is last
document.body.appendChild(newChat);
}
and now it works, thanks !

You cannot get an element right offset using its style, unlest the style is set and valid. Instead you must get element.offsetLeft and size of window area and do this:
new_right = windowSize()[0]-messenger.offsetLeft;
Where window size is this function.
Here is my, working, version of your function:
var last = null;
function new_chat(userid) {
if(userid==null)
userid = "user666";
var new_right;
var margin = 20;
var messenger = window.last==null?document.getElementById('messenger'):window.last; //Take the messenger or the last added chat
new_right = windowSize()[0]-messenger.offsetLeft; //Compute the window size
console.log(new_right); //Log the number
new_right += margin; //keep spaces between divs
var newChat = document.createElement("div"); //DOM create DIV
newChat.id = userid;
newChat.className = "chatbox";
newChat.style.right = new_right+"px";
window.last = newChat; //Remember whichever is last
document.body.appendChild(newChat);
}
You may get errors if console is not defined in your brouwser. But in such case you should take a better browser. Normally, the if(console!=null) is put in code.
And here is the link.

You should try adding a float style.
.chatbox {
float: right;
}
Add that to your chatbox styles. You may need to mess around a bit to make sure the float doesn't mess with your other elements. You may need a better container for them.
If you want to get really fun, you can add .draggable() from jQuery, and you can have them snap to your chat bar. You can then change the order of your chats.

Javascript drag and drop on leave doesn't work correctly

I am trying to implement a drag and drop image upload similar functionality to imgur.com.
You drag an image from your desktop and a big overlay div with the word 'upload' appears as you drag over your document.
My problem is that when I drag over the actual word 'upload' inside an h1 tag the screen flickers. This is happening because I have an event for dragleave to remove the overlay div with the upload h1 tag however I don't know how to fix it.
You can see the problem in action here: JS Fiddle, just drag any image from your desktop to the document and hover over the word 'upload' you'll see what I'm talking about. Any help would be appreciated.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Drag and Drop</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
</head>
<body>
<div id="upload-global-drop-overlay" style="display: none;"><h1>upload</h1></div>
</body>
</html>​
Javascript code:
$(document).on('dragover', function () {
$('#upload-global-drop-overlay').css({'display': 'block'});
});
$('#upload-global-drop-overlay').on('dragleave', function () {
$('#upload-global-drop-overlay').css({'display': 'none'});
});
$(document).on('drop', function (e) {
$('#upload-global-drop-overlay').css({'display': 'none'});
e.preventDefault();
});
​

Hey hopefully you found an answer to this, if not here is a little example that looks like imgur in my oppinion, using your code.
jsFiddle: http://jsfiddle.net/JUBwS/74/
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Drag and Drop</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
</head>
<body>
<div id="upload-global-drop-overlay" style="display: none;"><h1>upload</h1></div>
</body>
</html>​
CSS:
#upload-global-drop-overlay {
background: none repeat scroll 0 0 #424242;
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
opacity: .8;
filter: alpha(opacity=80);
-moz-opacity: .8;
z-index: 10001;
display: none;
}
#upload-global-drop-overlay h1 {
font-size: 72pt;
display: block;
position: absolute;
line-height: 50px;
top: 50%;
left: 50%;
margin: -82px 0 0 -180px;
text-shadow: 3px 3px 4px black;
color: white;
z-index: -1;
}​
Javascript:
var isDragging = null;
$(document).on('dragover', function () {
if(isDragging==null)
doDrag();
isDragging = true;
});
$(document).on('drop', function (e) {
e.preventDefault();
isDragging = false;
});
$(document).on('dragleave', function (e) {
isDragging = false;
});
var timerId=0;
function doDrag()
{
timerId = setInterval(function()
{
if(isDragging)
$('#upload-global-drop-overlay').fadeIn(500);
else
{
$('#upload-global-drop-overlay').fadeOut(500);
isDragging = null;
clearInterval(timerId);
}
},200);
}​
This sample uses timers, but it is active only when something is being dragged into the form. I am certainly going to use this in the future.

I actually found another solution, I think it's a bit simpler because it doesn't use setInterval. And I've implemented the actual drag and drop functionality for anyone interested.
The whole working example with drag and drop functionality is available below.
jsFiddle - Demo: http://jsfiddle.net/6SV9P/1/
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Drag and Drop</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
</head>
<body>
<div id="upload-global-drop-overlay" style="display: none;"><h1>upload</h1</div>
<div id="image"></div>
</body>
</html>​
CSS:
#upload-global-drop-overlay {
background: none repeat scroll 0 0 #424242;
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
opacity: .8;
filter: alpha(opacity=80);
-moz-opacity: .8;
z-index: 10001;
display: none;
}
#upload-global-drop-overlay h1 {
font-size: 72pt;
display: block;
position: absolute;
line-height: 50px;
top: 50%;
left: 50%;
margin: -82px 0 0 -180px;
text-shadow: 3px 3px 4px black;
color: white;
z-index: -1;
}​
JS:
var dragDropFromDesktop = (function ($) {
$(document).on('dragenter', function () {
$('#upload-global-drop-overlay').fadeIn(200)
});
$('#upload-global-drop-overlay').on('dragleave', function (e) {
if (e.originalEvent.pageX < 10 || e.originalEvent.pageY < 10 || $(window).width() - e.originalEvent.pageX < 10 || $(window).height - e.originalEvent.pageY < 10) {
$("#upload-global-drop-overlay").fadeOut(200);
}
});
$('#upload-global-drop-overlay').on('dragover', function (e) {
e.stopPropagation();
e.preventDefault();
});
// Handle dropped image file - only Firefox and Google Chrome
$('#upload-global-drop-overlay').on('drop', function (e) {
$('#upload-global-drop-overlay').fadeOut(200);
var files = e.originalEvent.dataTransfer.files;
if (files === undefined) {
alert('Your browser does not support file Drag and Drop!')
} else {
var file = files[0];
if (typeof FileReader !== "undefined" && file.type.indexOf("image") != -1) {
var reader = new FileReader();
reader.onload = function (evt) {
var img = new Image();
img.src = evt.target.result;
$('#image').html('<img src="' + img.src + '">');
};
reader.readAsDataURL(file);
}
}
e.preventDefault();
e.stopPropagation();
});
})(jQuery);​