I've been using this code snippet to add in a vertical dot nav to a one page site, which smooth scrolls to a section when one of the links are clicked, and keeps a highlight on the active section. I did a lot of tweaking to the css to make it look how I wanted, and then replaced the sections.
So this is my code in a jsfiddle, and the main issue I am having is the active class not changing properly, and making the side nav bar mess up. I've posted the JS below.
$(document).ready(function(){
$('.awesome-tooltip').tooltip({
placement: 'left'
});
$(window).bind('scroll',function(e){
dotnavigation();
});
function dotnavigation(){
var numSections = $('section').length;
$('#side-nav li a').removeClass('active').parent('li').removeClass('active');
$('section').each(function(i,item){
var ele = $(item), nextTop;
console.log(ele.next().html());
if (typeof ele.next().offset() != "undefined") {
nextTop = ele.next().offset().top;
}
else {
nextTop = $(document).height();
}
if (ele.offset() !== null) {
thisTop = ele.offset().top - ((nextTop - ele.offset().top) / numSections);
}
else {
thisTop = 0;
}
var docTop = $(document).scrollTop();
if(docTop >= thisTop && (docTop < nextTop)){
$('#side-nav li').eq(i).addClass('active');
}
});
}
/* get clicks working */
$('#side-nav li').click(function(){
var id = $(this).find('a').attr("href"),
posi,
ele,
padding = 0;
ele = $(id);
posi = ($(ele).offset()||0).top - padding;
$('html, body').animate({scrollTop:posi}, 'slow');
return false;
});
It works fairly well on the jsfiddle, but I am putting this code into squarespace, and on there it ends up like this where all of the buttons highlight when you try to change active classes.
I have tried to isolate the bug by going through the html, css, and the js, but I don't have enough knowledge of JS to be able to edit the script to fix it.
I would really appreciate any help. Thanks in advance.
EDIT: Link to broken squarespace
In the code snippet, the sample page is designed with continuous sections, so the method ele.next() will return next sections. In your squarespace page, the sections is not continuous, so method ele.next() will return empty and the code is not working.
Your could try to modify function dotnavigation like this
function dotnavigation(){
var numSections = $('section').length;
$('#side-nav li a').removeClass('active').parent('li').removeClass('active');
var sections = $('section');
var i = 0;
for (i = 0; i < sections.length; i++) {
var ele = $(sections[i]), nextTop;
//console.log(ele.next().html());
if (i < sections.length - 1) {
nextTop = $(sections[i + 1]).offset().top;
}
else {
nextTop = $(document).height();
}
if (ele.offset() !== null) {
thisTop = ele.offset().top - ((nextTop - ele.offset().top) / numSections);
}
else {
thisTop = 0;
}
var docTop = $(document).scrollTop();
console.log(thisTop);
if(docTop >= thisTop && (docTop < nextTop)){
$('#side-nav li').eq(i).addClass('active');
}
}
}
I've updated your code sample here.
I have a big issue with JavaScript pop up modal windows displaying a YouTube iframe video! I've been spending already a week or even more to find a solution to this problem, on the internet but it seems that there are not many resources or answers and/or solutions to this problem I have, so I thought I should ask for your help on this.
=========================================================================
THE PROBLEM:
OK, I have an image on my offline website that when you click on it, it fires a pop up modal window in the browser, with a iframe YouTube video clip and when you click on it the YouTube video it plays as it should be. So far so good, all works fine until you close the window (by clicking anywhere outside of the video or on the X button, as usual!), however, the problem is that even the video closes, the sound still continues playing in the background as if the video is still there, even though the video is not as its been closed successfully.
By the way, this issue happens on all browsers.
This is the code, the same code you can find on the jsfiddle link below:
<!-- Button that triggers the popup -->
<button id="my-button"> Play video </button>
<!-- Element to pop up -->
<div id="element_to_pop_up">
<a class="b-close"> x <a/>
<iframe width="450" height="315" src="https://www.youtube.com/embed/Ev4zBCBEELQ" frameborder="0" allowfullscreen></iframe>
</div><!-- end of element_to_pup_up id -->
=========================================================================
#element_to_pop_up {
background-color:#fff;
border-radius:15px;
color:#000;
display:none;
padding:20px;
min-width:400px;
min-height: 180px;
}
.b-close {
cursor:pointer;
position:absolute;
right:10px;
top:5px;
}
=========================================================================
// Semicolon (;) to ensure closing of earlier scripting
// Encapsulation
// $ is assigned to jQuery
;
(function ($) {
// DOM Ready
$(function () {
// Binding a click event
// From jQuery v.1.7.0 use .on() instead of .bind()
$('#my-button').bind('click', function (e) {
// Prevents the default action to be triggered.
e.preventDefault();
// Triggering bPopup when click event is fired
$('#element_to_pop_up').bPopup();
});
});
})(jQuery);
(function (b) {
b.fn.bPopup = function (z, F) {
function K() {
a.contentContainer = b(a.contentContainer || c);
switch (a.content) {
case "iframe":
var h = b('<iframe class="b-iframe" ' + a.iframeAttr + "></iframe>");
h.appendTo(a.contentContainer);
r = c.outerHeight(!0);
s = c.outerWidth(!0);
A();
h.attr("src", a.loadUrl);
k(a.loadCallback);
break;
case "image":
A();
b("<img />").load(function () {
k(a.loadCallback);
G(b(this))
}).attr("src", a.loadUrl).hide().appendTo(a.contentContainer);
break;
default:
A(), b('<div class="b-ajax-wrapper"></div>').load(a.loadUrl, a.loadData, function () {
k(a.loadCallback);
G(b(this))
}).hide().appendTo(a.contentContainer)
}
}
function A() {
a.modal && b('<div class="b-modal ' + e + '"></div>').css({
backgroundColor: a.modalColor,
position: "fixed",
top: 0,
right: 0,
bottom: 0,
left: 0,
opacity: 0,
zIndex: a.zIndex + t
}).appendTo(a.appendTo).fadeTo(a.speed, a.opacity);
D();
c.data("bPopup", a).data("id", e).css({
left: "slideIn" == a.transition || "slideBack" == a.transition ? "slideBack" == a.transition ? g.scrollLeft() + u : -1 * (v + s) : l(!(!a.follow[0] && m || f)),
position: a.positionStyle || "absolute",
top: "slideDown" == a.transition || "slideUp" == a.transition ? "slideUp" == a.transition ? g.scrollTop() + w : x + -1 * r : n(!(!a.follow[1] && p || f)),
"z-index": a.zIndex + t + 1
}).each(function () {
a.appending && b(this).appendTo(a.appendTo)
});
H(!0)
}
function q() {
a.modal && b(".b-modal." + c.data("id")).fadeTo(a.speed, 0, function () {
b(this).remove()
});
a.scrollBar || b("html").css("overflow", "auto");
b(".b-modal." + e).unbind("click");
g.unbind("keydown." + e);
d.unbind("." + e).data("bPopup", 0 < d.data("bPopup") - 1 ? d.data("bPopup") - 1 : null);
c.undelegate(".bClose, ." + a.closeClass, "click." + e, q).data("bPopup", null);
H();
return !1
}
function G(h) {
var b = h.width(),
e = h.height(),
d = {};
a.contentContainer.css({
height: e,
width: b
});
e >= c.height() && (d.height = c.height());
b >= c.width() && (d.width = c.width());
r = c.outerHeight(!0);
s = c.outerWidth(!0);
D();
a.contentContainer.css({
height: "auto",
width: "auto"
});
d.left = l(!(!a.follow[0] && m || f));
d.top = n(!(!a.follow[1] && p || f));
c.animate(d, 250, function () {
h.show();
B = E()
})
}
function L() {
d.data("bPopup", t);
c.delegate(".bClose, ." + a.closeClass, "click." + e, q);
a.modalClose && b(".b-modal." + e).css("cursor", "pointer").bind("click", q);
M || !a.follow[0] && !a.follow[1] || d.bind("scroll." + e, function () {
B && c.dequeue().animate({
left: a.follow[0] ? l(!f) : "auto",
top: a.follow[1] ? n(!f) : "auto"
}, a.followSpeed, a.followEasing)
}).bind("resize." + e, function () {
w = y.innerHeight || d.height();
u = y.innerWidth || d.width();
if (B = E()) clearTimeout(I), I = setTimeout(function () {
D();
c.dequeue().each(function () {
f ? b(this).css({
left: v,
top: x
}) : b(this).animate({
left: a.follow[0] ? l(!0) : "auto",
top: a.follow[1] ? n(!0) : "auto"
}, a.followSpeed, a.followEasing)
})
}, 50)
});
a.escClose && g.bind("keydown." + e, function (a) {
27 == a.which && q()
})
}
function H(b) {
function d(e) {
c.css({
display: "block",
opacity: 1
}).animate(e, a.speed, a.easing, function () {
J(b)
})
}
switch (b ? a.transition : a.transitionClose || a.transition) {
case "slideIn":
d({
left: b ? l(!(!a.follow[0] && m || f)) : g.scrollLeft() - (s || c.outerWidth(!0)) - C
});
break;
case "slideBack":
d({
left: b ? l(!(!a.follow[0] && m || f)) : g.scrollLeft() + u + C
});
break;
case "slideDown":
d({
top: b ? n(!(!a.follow[1] && p || f)) : g.scrollTop() - (r || c.outerHeight(!0)) - C
});
break;
case "slideUp":
d({
top: b ? n(!(!a.follow[1] && p || f)) : g.scrollTop() + w + C
});
break;
default:
c.stop().fadeTo(a.speed, b ? 1 : 0, function () {
J(b)
})
}
}
function J(b) {
b ? (L(), k(F), a.autoClose && setTimeout(q, a.autoClose)) : (c.hide(), k(a.onClose), a.loadUrl && (a.contentContainer.empty(), c.css({
height: "auto",
width: "auto"
})))
}
function l(a) {
return a ? v + g.scrollLeft() : v
}
function n(a) {
return a ? x + g.scrollTop() : x
}
function k(a) {
b.isFunction(a) && a.call(c)
}
function D() {
x = p ? a.position[1] : Math.max(0, (w - c.outerHeight(!0)) / 2 - a.amsl);
v = m ? a.position[0] : (u - c.outerWidth(!0)) / 2;
B = E()
}
function E() {
return w > c.outerHeight(!0) && u > c.outerWidth(!0)
}
b.isFunction(z) && (F = z, z = null);
var a = b.extend({}, b.fn.bPopup.defaults, z);
a.scrollBar || b("html").css("overflow", "hidden");
var c = this,
g = b(document),
y = window,
d = b(y),
w = y.innerHeight || d.height(),
u = y.innerWidth || d.width(),
M = /OS 6(_\d)+/i.test(navigator.userAgent),
C = 200,
t = 0,
e, B, p, m, f, x, v, r, s, I;
c.close = function () {
a = this.data("bPopup");
e = "__b-popup" + d.data("bPopup") + "__";
q()
};
return c.each(function () {
b(this).data("bPopup") || (k(a.onOpen), t = (d.data("bPopup") || 0) + 1, e = "__b-popup" + t + "__", p = "auto" !== a.position[1], m = "auto" !== a.position[0], f = "fixed" === a.positionStyle, r = c.outerHeight(!0), s = c.outerWidth(!0), a.loadUrl ? K() : A())
})
};
b.fn.bPopup.defaults = {
amsl: 50,
appending: !0,
appendTo: "body",
autoClose: !1,
closeClass: "b-close",
content: "ajax",
contentContainer: !1,
easing: "swing",
escClose: !0,
follow: [!0, !0],
followEasing: "swing",
followSpeed: 500,
iframeAttr: 'scrolling="no" frameborder="0"',
loadCallback: !1,
loadData: !1,
loadUrl: !1,
modal: !0,
modalClose: !0,
modalColor: "#000",
onClose: !1,
onOpen: !1,
opacity: 0.7,
position: ["auto", "auto"],
positionStyle: "absolute",
scrollBar: !0,
speed: 250,
transition: "fadeIn",
transitionClose: !1,
zIndex: 9997
}
})(jQuery);
=========================================================================
Here I've created a JSFiddle link for all the code that is needed: https://jsfiddle.net/24A9b/13617/
obviously this modal is loading the video playing it, then when it's closed it's just being hidden, it's still in the DOM. You need to find a way of destroying this code that is brought into the DOM. You could use something like jQuery remove.
I had the same problem. Here's how I got around it:
https://jsfiddle.net/24A9b/14789/
HTML:
<!-- Button that triggers the popup -->
<button id="my-button"> Play video </button>
<!-- Element to pop up -->
<div id="element_to_pop_up" data-iframe-code="<iframe width='450' height='315' src='https://www.youtube.com/embed/Ev4zBCBEELQ' frameborder='0' allowfullscreen></iframe>">
<a class="b-close"> x <a/>
</div><!-- end of element_to_pop_up id -->
What I changed:
I took the iFrame code out of the DOM, and put it somewhere that it can be reused as often as we'd like. A data attribute probably isn't the best place to put it, but I was short on time and ideas. Comment if you can think of something better.
JS (Just the bPopup bit):
// Triggering bPopup when click event is fired
$('#element_to_pop_up').bPopup({
onOpen: function(){
$(this).append( $( $(this).data('iframe-code') ) );
},
onClose:function(){
$(this).find('iframe').remove();
}
});
What I changed:
Added an onOpen event to bPopup. When the popup opens, the iframe code gets added to the #element_to_pop_up div.
Added an onClose event, When the popup is closed, the iframe is deleted. Because it can't play in the background if it doesn't exist anymore.
You are writing a very big JS Code which I am not able to understand, just use this JSFiddle: http://jsfiddle.net/v95eg4h1/
I am using jQuery Library(1.11.0)
$(function(){
$("#showPopup").click(function(e){
e.stopPropagation();
$(".bg").toggle();
$(".popup").toggle();
});
$(".close").click(function() {
$('.modal').hide();
$("#arsha_video").attr('src','');
var video = $("#player").attr("src");
$("#player").attr("src","");
$("#player").attr("src",video);
});
$("body").click(function(){
$(".bg").toggle();
$(".popup").hide();
var video = $("#player").attr("src");
$("#player").attr("src","");
$("#player").attr("src",video);
});
});
.popup{
background-color:#E6E9F2;
position:absolute;
min-height:auto;
width:auto;
border: solid 2px #B9EAF0;
z-index: 1002;
}
.bg {
background-color:#111;
opacity: 0.65;
position:absolute;
z-index: 1000;
top:0px;
left:0px;
width:100%;
min-height:100%;
overflow:auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
CLICK
<div class="bg" style="display:none"></div>
<div class="popup" style="display:none">
<a class=".close"> x <a/>
<iframe id="player" width="560" height="315" src="https://www.youtube.com/embed/Ev4zBCBEELQ" frameborder="0" allowfullscreen></iframe>
</div>
if you didn't mind to change the approach then you can try colorbox. it is very good with popup with responsive design and easy to implement.
youtubevideo in iframe
I am a newbie to Titanium. I am creating a picker in Titanium which loads a set of records from my local sqlite database.
Whenever I scroll the picker, for the first time there seems to be a small lag in scrolling. That is, when user scrolls the picker, there is a lag for few seconds and then users are allowed to scroll records continuously. This lags happens only for the first time.
Can anyone please guide me how to fix this scroll lag.
My code is as follows:
function CREATEPICKER(rows, x, y, width, sel, initialValue) {
var picker = Ti.UI.createPicker({left: x, height: Ti.App.pickerHeight, top: y, plat: '', width : width});
var data =[];
var v, selectedrow;
data[0]=Ti.UI.createPickerRow({title: initialValue, font:{fontSize: 48} });
var j = 1;
while (rows.isValidRow())
{
v = rows.fieldByName('id');
if((v != null) && (v != '') && (v != 'NULL')) {
if(v == sel) selectedrow = j;
data[j]=Ti.UI.createPickerRow({title: v, fontSize: 48 });
j++;
}
rows.next();
}
if(selectedrow > 0) picker.setSelectedRow(0,selectedrow);
picker.selectionIndicator = true;
picker.add(data);
return(picker);
}
Can someone please guide me.
Thank You.
Try doing this, when adding items to your data array:
data[j] = Ti.UI.createPickerRow( {
title : j++,
font : {
fontSize : 48
}
} );
I have a custom menu in jQuery that apparently doesn't work with IE 8 & 9. It's supposed to open multilevel menus with the hover() method, but it's only working o IE untill the first level from the root.
Code :
$('ul#leftmenu li').hover(function() {
if ($(this).hasClass('top'))
return false;
var p = $(this).parent().get(0);
var o = $(this).offset();
var t;
var l;
if (leftmenu_level >= 1)
{
t = 0;
l = 210;
}
else
{
leftmenu.top = o.top;
leftmenu.left = o.left;
t = o.top;
l = o.left + 210;
}
$(this).find('ul:first').css({
position : 'absolute',
top : t,
left : l
}).show();
$(this).find('a:first').css('color', '#5a3512');
leftmenu_level++;
return true;
}, function() {
if ($(this).hasClass('top'))
return false;
$(this).find('a:first').css('color', '#777777');
leftmenu_level--;
$(this).find('ul:first').hide();
return true;
}
);
Live example (left menu) :
http://lrp-workwear.com/
Any tips?
Try applying position:relative to your anchor tags, this seems to force the width & height of the anchor tags correctly and triggers a hover over the entire element and not just the text as it currently seems to be doing.
Hope this helps
This is my first time using JQuery in any of my projects.
I have implemented the superfish menu.
On some of my pages I have a horizontal scroll. I would like to make the menu float on the center of the page as the page is scrolled.
Also I need to make sure that the submenu on the far right hand side of the menu does not open up off the page. When I hover on the right most element it opens up half off the page.
Any ideas on how to fix these two things?
I'm perfectly willing to use a different Jquery menu if there is a better one that has these features built in...
Thanks!
javascrupt call in my page:
$(document).ready(function () {
$("ul.sf-menu").supersubs({
minWidth: 12, // minimum width of sub-menus in em units
maxWidth: 27, // maximum width of sub-menus in em units
extraWidth: 1 // extra width can ensure lines don't sometimes turn over
// due to slight rounding differences and font-family
}).superfish({ animation: { opacity: 'show', height: 'show' }, autoArrows: false }); // call supersubs first, then superfish, so that subs are
// not display:none when measuring. Call before initialising
// containing tabs for same reason.
I can post any more code that is needed, but there is quite a lot of code in the superfish files so i'm not sure what I should post.
I found this script and it works well, however when I scroll right the horizonal menu starts to stack so the menu items are side by side rather then vertical. I want to modify this to keep the menu horizonal...
<script type="text/javascript"><!--
var floatingMenuId = 'floatdiv';
var floatingMenu =
{
targetX: -1000,
targetY: 10,
hasInner: typeof (window.innerWidth) == 'number',
hasElement: document.documentElement
&& document.documentElement.clientWidth,
menu:
document.getElementById
? document.getElementById(floatingMenuId)
: document.all
? document.all[floatingMenuId]
: document.layers[floatingMenuId]
};
floatingMenu.move = function () {
if (document.layers) {
floatingMenu.menu.left = floatingMenu.nextX;
floatingMenu.menu.top = floatingMenu.nextY;
}
else {
floatingMenu.menu.style.left = floatingMenu.nextX + 'px';
floatingMenu.menu.style.top = floatingMenu.nextY + 'px';
}
}
floatingMenu.computeShifts = function () {
var de = document.documentElement;
floatingMenu.shiftX =
floatingMenu.hasInner
? pageXOffset
: floatingMenu.hasElement
? de.scrollLeft
: document.body.scrollLeft;
if (floatingMenu.targetX < 0) {
if (floatingMenu.hasElement && floatingMenu.hasInner) {
// Handle Opera 8 problems
floatingMenu.shiftX +=
de.clientWidth > window.innerWidth
? window.innerWidth
: de.clientWidth
}
else {
floatingMenu.shiftX +=
floatingMenu.hasElement
? de.clientWidth
: floatingMenu.hasInner
? window.innerWidth
: document.body.clientWidth;
}
}
floatingMenu.shiftY =
floatingMenu.hasInner
? pageYOffset
: floatingMenu.hasElement
? de.scrollTop
: document.body.scrollTop;
if (floatingMenu.targetY < 0) {
if (floatingMenu.hasElement && floatingMenu.hasInner) {
// Handle Opera 8 problems
floatingMenu.shiftY +=
de.clientHeight > window.innerHeight
? window.innerHeight
: de.clientHeight
}
else {
floatingMenu.shiftY +=
floatingMenu.hasElement
? document.documentElement.clientHeight
: floatingMenu.hasInner
? window.innerHeight
: document.body.clientHeight;
}
}
}
floatingMenu.doFloat = function () {
var stepX, stepY;
floatingMenu.computeShifts();
stepX = (floatingMenu.shiftX +
floatingMenu.targetX - floatingMenu.nextX) * .07;
if (Math.abs(stepX) < .5) {
stepX = floatingMenu.shiftX +
floatingMenu.targetX - floatingMenu.nextX;
}
stepY = (floatingMenu.shiftY +
floatingMenu.targetY - floatingMenu.nextY) * .07;
if (Math.abs(stepY) < .5) {
stepY = floatingMenu.shiftY +
floatingMenu.targetY - floatingMenu.nextY;
}
if (Math.abs(stepX) > 0 ||
Math.abs(stepY) > 0) {
floatingMenu.nextX += stepX;
floatingMenu.nextY += stepY;
floatingMenu.move();
}
setTimeout('floatingMenu.doFloat()', 20);
};
// addEvent designed by Aaron Moore
floatingMenu.addEvent = function (element, listener, handler) {
if (typeof element[listener] != 'function' ||
typeof element[listener + '_num'] == 'undefined') {
element[listener + '_num'] = 0;
if (typeof element[listener] == 'function') {
element[listener + 0] = element[listener];
element[listener + '_num']++;
}
element[listener] = function (e) {
var r = true;
e = (e) ? e : window.event;
for (var i = element[listener + '_num'] - 1; i >= 0; i--) {
if (element[listener + i](e) == false)
r = false;
}
return r;
}
}
//if handler is not already stored, assign it
for (var i = 0; i < element[listener + '_num']; i++)
if (element[listener + i] == handler)
return;
element[listener + element[listener + '_num']] = handler;
element[listener + '_num']++;
};
floatingMenu.init = function () {
floatingMenu.initSecondary();
floatingMenu.doFloat();
};
// Some browsers init scrollbars only after
// full document load.
floatingMenu.initSecondary = function () {
floatingMenu.computeShifts();
floatingMenu.nextX = floatingMenu.shiftX +
floatingMenu.targetX;
floatingMenu.nextY = floatingMenu.shiftY +
floatingMenu.targetY;
floatingMenu.move();
}
if (document.layers)
floatingMenu.addEvent(window, 'onload', floatingMenu.init);
else {
floatingMenu.init();
floatingMenu.addEvent(window, 'onload',
floatingMenu.initSecondary);
}
</script>
I'm not sure on how you mean centering, but if you mean horizontally centered:
Could you separate the main page (that horizontally overflows) and the menu into separate div's? e.g.
<div id="menu"><center><ul class="sf-menu">...</ul></center></div>
<div id="mainpage" style="overflow:auto;">Contents goes here</div>
(the <center> tag might have to be <div style="width:X;margin:0 auto;"> depending on how superfish works)
On the menu going over the page, sorry I'll have to defer to someone more knowable to answer that.