I have the feeling I'm going around this totally the wrong way; here is the fiddle: http://jsfiddle.net/qhuprcLz/
What I'm trying to do is whenever I hover a main menu option, I want to grab the data-type set on that menu and set class on the main and then when I hover on the sub menu any of the menu items to get the data-background attr and set the background image on the container.
I loaded the site and menu into the jsfiddle so you can get a better understanding of what I mean.
JS:
// tablet and desktop only
if (window.matchMedia('(min-width: 960px)').matches) {
// menu background
$('.menu-menu ul li.cm-menu-item-responsive').on("mouseover", function () {
var menuType = $(this).attr("data-type");
var menuBackground = $(menuType + " .ty-menu__submenu-list li").attr("data-background");
console.log("menu type:"+menuType);
console.log("menu background:"+menuBackground);
$(this).find("div.ty-menu__submenu").addClass(menuType);
$(this).find("div.ty-menu__submenu").css('background-image', 'url(menu-' + menuBackground + '.png)');
});
}
Solution i came up with is as follows:
// menu background
$('.menu-menu ul li.cm-menu-item-responsive').on("mouseover", function () {
var menuType = $(this).attr("data-type");
$(this).find("div.ty-menu__submenu").addClass(menuType);
});
$('.ty-menu__submenu-list li').on("mouseover", function () {
var menuBackground = $(this).attr("data-background");
//console.log(menuBackground);
$("div.ty-menu__submenu.ty-menu__submenu-to-right").addClass(menuBackground);
});
Related
I have some Bootstrap vertical tabs that I'm struggling with what I felt like would be a simple operation.
Goal:
On the click of Tab, I want to smooth-scroll to the corresponding pane.
What's Actually Happening:
On click of the tab, the browser animates to the tab, not the tab pane. I've tried passing in the paneId instead of the ID, but that doesn't work at all. Any idea where I'm going wrong?
Codepen:
Here's a Codepen: Codepen!
jQuery:
$("#tabs .nav-link").click(function (e) { //on click of nav tav, perform this:
var id = $(e.target).prop("id"); //Grab ID of .nav-link clicked
var paneId = id.replace("tab", "pane"); //Replace "tab" with "pane" and assign new var
function navigateToElement(id) {
$("html, body").animate(
{
scrollTop: $("#" + id).offset().top
},
300
);
}
navigateToElement(id); //Tried with "paneId" instead of "id" to scroll to the pane, but doesn't work
});
Any idea where I'm going wrong?
This line:
var paneId = id.replace("tab", "pane"); //Replace "tab" with "pane" and assign new var
Is creating a variable like: v-pills-profile-pane and there isn't a div on the page with that id. I did see a div with id="v-pills-profile". Change that last line to this and it should work:
var paneId = id.replace("-tab", "");
I just realized that it doesn't matter what pane I scroll to, as bootstrap will display the panes under #panes. As long as I can scroll to that, I'm good. This code worked:
$("#tabs .nav-link").click(function (e) {
var target = $("#panes");
$([document.documentElement, document.body]).animate(
{
scrollTop: $(target).offset().top - 20, // added a bit of offset
},
350
);
});
I hope you have a good day :)
I am working on a plugin currently. I would like to loop through all the articles: on click => open a popp-up, when the pop-up closes => show this content ... My code only works for the first article. Sorry if that seems trivial to you, if you have links or tutorials to advise me, I am interested :)
Thank you !
function socialLocker() {
let sl = document.querySelector(".ws-sl-container");
let slc = document.querySelector(".ws-sl-content");
document.querySelectorAll(".ws-sl-box-for-social-medias a").forEach(function(ele) {
ele.onclick = function(e) {
var web_window = window.open(this.href, 'Share Link', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600,top=' + (screen.height/2 - 300) + ',left=' + (screen.width/2 - 300));
var check_window_close = setInterval(function() {
if (web_window.closed) {
clearInterval(check_window_close);
sl.style.display = "none";
slc.style.display = "block";
}
}, 1000);
e.preventDefault();
};
});
};
It seems to be a problem with selecting the elements in the document.
You can use next selector: https://api.jquery.com/next/ instead of selecting all and looping with foreach. With next, you will get the closest element.
Suppose all the posts in your list have a button with the class trigger and when clicked it shows a popup with the class of popup.
<script>
jQuery(document).ready(function(){
jQuery(".popup").hide(); /* hide all popups */
jQuery(".trigger").click(function(){ /* when button is clicked */
jQuery(this).next(".popup").slideToggle(); /* toggle the closest popup */
});
});
</script>
This way the click / action (you want to have it when closed) on (this) element will affect nearest element.
Im a little bit stumped on this for a number of reasons, sometimes it works, sometimes it does not. When you narrow the view port to less than 945px the subnav elements should toggle but sometimes they do not. I am also getting some unexpected results.
I have a codepen here
https://codepen.io/robbiemcmullen/pen/BqdRpN
my code is as follows:-
//toggle for subnavs
$(document).ready(function(){
//only toggle if window size is less than 945px
$(window).resize(function(){
var submenu = $('.nav-wrapper');
if (window.innerWidth < 945) {
$(document).on('click','nav ul li',function() {
$(submenu).toggle();
});
}
});
var listItem = $('.navigation-toggles__list-item');
//hide mega menu when settings activated
$(listItem).mouseleave(function(){
$(userMenu).hide();
});
var userIcon = $('.navigation-user-icon'),
userMenu = $('.dashboard-user-menu');
//toggle dashboard menu
$(userIcon).click(function(e) {
e.preventDefault();
$(userMenu).toggle();
});
});
can anybody tell me where I am going wrong?
I'm doing a mobile App with jQuery mobile 1.4.3. I'm trying to build a navigation bar that changes dynamically, If the user has logged in the navigation bar will show 4 options, if not it will show 3 options. The problems:
Once I click the bar some times it turns all blue.
I'm sure I'm not using the correct code.
The navigation bar disappears for some time when I click in a button.
The blue click highlight is not persistent for the page click.
What I need is a fixed navigation bar that smoothly changes pages when clicked :)
http://jsfiddle.net/claire89/toxtcbhe/14/
var statusLogin = null;
$(document).on('pagecontainershow', function (e, ui) {
var myNavbar = null;
if (statusLogin == null) {
myNavbar = $('<div data-role="footer" data-id="footer" data-position="fixed"><div data-role="navbar"><ul><li>Menu</li><li>Sugestions</li><li>History</li><li>Settings</li></ul></div></div>');
$('.ui-content').append(myNavbar).trigger('create');
} else {
myNavbar = $('<div data-role="footer" data-id="footer" data-position="fixed"><div data-role="navbar"><ul><li>Menu</li><li>History</li><li>Settings</li></ul></div></div>').appendTo('.ui-content');
$('.content').append(myNavbar).trigger('create');
}
$("[data-role='navbar']").navbar();
$("[data-role='header'], [data-role='footer']").toolbar();
var activePage = $.mobile.pageContainer.pagecontainer("getActivePage");
var activePageId = activePage[0].id;
switch (activePageId) {
case 'listMenuPage':
alert("listMenuPage");
break;
case 'sugestionsPage':
alert("sugestionsPage");
break;
case 'settingsPage':
alert("settingsPage");
break;
case 'historyPage':
alert("historyPage");
break;
default:
}
});
footer div should be a direct child of page div, you should not place it inside content div. Moreover, you need to .remove() footer or navbar once you leave a page before you inject a new one. Otherwise, you will end up adding duplicating both footer and navbar in same page whenever the same page is shown.
Another note, when you inject toolbar dynamically, you need to reset the height of active page $.mobile.resetActivePageHeight() as toolbars adds padding to page, if height isn't reset, the page will scroll.
For better results, use pagecontainerbeforeshow to inject footer and navbar, and pagecontainerhide to remove them.
var statusLogin = null;
$(document).on('pagecontainerbeforeshow', function (e, ui) {
/* ui.toPage was introduced in 1.4.3
* can be used instead of "getActivePage"
* on pagecontainer events
*/
var activePage = $(ui.toPage),
activePageId = activePage[0].id,
myNavbar = "";
if (statusLogin == null) {
myNavbar = $('<tags></tags>');
activePage.append(myNavbar);
} else {
myNavbar = $('<tags></tags>');
activePage.append(myNavbar);
}
/* create footer and navbar
* add active class to button based on page's ID
*/
$("[data-role='footer']")
.toolbar()
.find("a[href=#" + activePageId + "]")
.addClass("ui-btn-active");
/* reset height of active page */
$.mobile.resetActivePageHeight();
}).on("pagecontainerhide", function (e, ui) {
/* remove footer once page is hidden */
$(".ui-footer", ui.prevPage).remove();
});
Demo
Building an App for a publication. For the table of contents I have a simple dropdown, that initially hides the unordered list with the sections, and on 'tap' the corresponding ul will display. Im using iScroll and when an ul is shown the scrolling is broke and has the bounce effect, which doesn't allow you to scroll down or up. I'm using jqt.bars.js also, which pulls in iScroll and init it. I understand iScroll has the refresh method which gets the new height of the container, allowing you to scroll correctly. I can't get it to work right.
Here is my jQuery/JS
var myScroll;
function createIScroll(){
myScroll = new iScroll('div#chapters div.sections-contents');
console.log('createIScroll');
}
function iScrollRefresh(){
setTimeout(function(){
myScroll.refresh();
}, 300);
console.log('refresh iScroll');
}
//CHAPTERS DROPDOWN
$(function() {
var chapter = $('ul#nav a.chapter-title');
var sections = $('ul#nav li ul');
sections.hide();
chapter.addClass('chapter-active');
$(chapter).on('tap', function() {
sections.slideUp();
chapter.removeClass('chapter-highlighted').addClass('chapter-active');
if( !$(this).next().is(":visible") ){
$(this).removeClass('chapter-active').addClass('chapter-highlighted');
$(this).next().slideDown(200);
console.log("slidedown");
iScrollRefresh();
}
});
Add refresh to the callback of slideDown:
$(this).next().slideDown(200, function() {
iScrollRefresh();
});