jquery string concatenation in selector - javascript

i want to concat some string(id) with parent id...
so i'v tried this-------------->
$(' #cate_id2 > ul > li:has(ul) ').hover(function () {
$('#cate_id2 > ul' + this + ' > ul').stop().slideDown('fast');
},
want to concat #cate_id2 > ul with this and than append > ul ....
string should becomes after execute '#cate_id2 > ul' + li:has(ul) + ' > ul'
i mean li:has(ul) will replaced by with its value.......

Try it like this
$(' #cate_id2 > ul > li:has(ul) ').hover(function () {
$(this).children('ul').stop().slideDown('fast');
}

Related

jquery .top is not working

I'm getting error from using top property in my jquery code. The code is about navigation dots on my slider. This is the link to my page: http://54.169.61.153/teavana
Below is my code. I'm getting error in the console saying that:
Uncaught TypeError: Cannot read property 'top' of undefined
$(document).ready(function () {
var one = $("#slider").offset();
var two = $("#tabsDiv").offset();
var three = $("#teaWare").offset();
var four = $("#videoo").offset();
$(window).scroll(function () {
var screenPosition = $(document).scrollTop();
if (screenPosition < one.top) {
$(".teavanamenu li a").removeClass("active");
$(".teavanamenu li a.menu1").addClass("active");
}
if (screenPosition >= two.top) {
$(".teavanamenu li a").removeClass("active");
$(".teavanamenu li a.menu2").addClass("active");
}
if (screenPosition >= three.top) {
$(".teavanamenu li a").removeClass("active");
$(".teavanamenu li a.menu3").addClass("active");
}
if (screenPosition >= four.top) {
$(".teavanamenu li a").removeClass("active");
$(".teavanamenu li a.menu4").addClass("active");
}
});
$(window).scroll();
$(".one, .two").click(function () { $(window).scroll(); });
});
I'm not sure why it can't read the property top. Any help?

Repeat jquery statement using while loop

I am new to JavaScript/jQuery. I have a script file linked to a page. I am trying to repeat a simple jQuery statement using while loop in the file. Below are the codes sample. How can I repeat them in while loop?
The codes:
e(".rwpt_testimonials .rwpt_quotes ul li:nth-child(1)").addClass("quote_1");
e(".rwpt_testimonials .rwpt_quotes ul li:nth-child(2)").addClass("quote_2");
e(".rwpt_testimonials .rwpt_quotes ul li:nth-child(3)").addClass("quote_3");
e(".rwpt_testimonials .rwpt_quotes ul li:nth-child(4)").addClass("quote_4");
e(".rwpt_testimonials .rwpt_quotes ul li:nth-child(5)").addClass("quote_5");
e(".rwpt_testimonials .rwpt_quotes ul li:nth-child(6)").addClass("quote_6");
e(".rwpt_testimonials .rwpt_quotes ul li:nth-child(7)").addClass("quote_7");
e(".rwpt_testimonials .rwpt_quotes ul li:nth-child(8)").addClass("quote_8");
e(".rwpt_testimonials .rwpt_quotes ul li:nth-child(9)").addClass("quote_9");
e(".rwpt_testimonials .rwpt_quotes ul li:nth-child(10)").addClass("quote_10");
I am trying but not working:
var i = 0;
while( i < 10 ) {
return 'e(".rwpt_testimonials .rwpt_photos ul li:nth-child(' + i + ')").addClass("quote_' + i + '");';
i++;
}
You can use the jQuery method .each() to iterate through each list item.
JS (jQuery):
$('.rwpt_testimonials .rwpt_quotes ul li').each(function(i) {
$(this).addClass('quote_'+(i+1));
});
Here's a fiddle.
return is only used in functions to return a value. Here you can just straight up execute e:
var i = 0;
while( i < 10 ) {
e(".rwpt_testimonials .rwpt_photos ul li:nth-child(" + i + ")").addClass("quote_" + i);
i++;
}
However, a for loop (instead of while) is generally used when you know how many times you're going to be looping:
for(var i = 0; i < 10; ++i) {
e(".rwpt_testimonials .rwpt_photos ul li:nth-child(" + i + ")").addClass("quote_" + i);
}
You may want to rethink about what you're doing though, for the sake of efficiency and maintainability.

Disable jQuery function on window size

I have some jQuery that needs to activate depending on the window size.
The current code I have does trigger correctly when the page is loaded, but if I resize the window the jQuery does not enable or disable according to the size of the screen
$(document).ready(function() {
var width = $(window).width();
if ((width < 980)) {
$( '.navigation > ul > li > a' ).click(function() {
if($(this).next('ul').is(':visible')){
$(this).next("ul").slideUp(400);
} else {
$( '.navigation > ul > li > ul' ).slideUp(400);
$(this).next("ul").slideToggle(400);
}
});
$( '.navigation > ul > li > ul > li > a' ).click(function() {
if($(this).next("ul").is(":visible")){
$(this).next("ul").slideUp(400);
} else {
$( '.navigation > ul > li > ul > li > ul' ).slideUp(400);
$(this).next("ul").slideToggle(400);
}
});
$( '.menu-link' ).click(function() {
if($(this).next("div").is(':visible')){
$(this).next("div").slideUp(400);
} else {
$( '.navigation' ).slideUp(400);
$(this).next('div').slideToggle(400);
}
});
}
});
Effectively what I need is for the jQuery to trigger under a screen size of 980px and disable over that figure.
As an extra googly I need to make sure that any expanded elements are able to close or are closed when the page size exceeds 980px as over this size the usual CSS media queries take effect on hover.
An earlier version of my code was able to take into account of a dynamic window size, but left the expanded items open and unable to close since the jQuery no longer functioned.
In case it helps here's a fiddle
You need to use window.onresize method.
EDITED CODE
// flag to check that events doesn't bind twice
var isNavigationEventsEnable = false;
// enable events
var enableNavigationEvents = function () {
$(".navigation > ul > li > a").on('click.screen-lt-980', function () {
if ($(this).next("ul").is(":visible")) {
$(this).next("ul").slideUp(400);
} else {
$(".navigation > ul > li > ul").slideUp(400);
$(this).next("ul").slideToggle(400);
}
});
$(".navigation > ul > li > ul > li > a").on('click.screen-lt-980', function () {
if ($(this).next("ul").is(":visible")) {
$(this).next("ul").slideUp(400);
} else {
$(".navigation > ul > li > ul > li > ul").slideUp(400);
$(this).next("ul").slideToggle(400);
}
});
$(".menu-link").on('click.screen-lt-980', function () {
if ($(this).next("div").is(":visible")) {
$(this).next("div").slideUp(400);
} else {
$(".navigation").slideUp(400);
$(this).next("div").slideToggle(400);
}
});
}
// disable events
var disableNavigatioEvents = function () {
$(".navigation > ul > li > a").off('click.screen-lt-980');
$(".navigation > ul > li > ul > li > a").off('click.screen-lt-980');
$(".menu-link").off('click.screen-lt-980');
}
// call this method on window resize
var redesignScreen = function () {
//function (e) { // comment this line
var width = $(window).width();
if ((width < 980)) {
if (!isNavigationEventsEnable) {
isNavigationEventsEnable = true;
enableNavigationEvents();
}
} else {
isNavigationEventsEnable = false;
disableNavigatioEvents();
}
//} // comment this line
}
$(document).ready(function () {
// attach onresize function
window.onresize = redesignScreen;
// calling redesignScreen initially
redesignScreen();
});
JSFiddle: http://jsfiddle.net/hEtTg/2/
WITH FORCE CLOSE
// flag to check on that events doesn't bind twice
var isNavigationEventsEnable = false;
// enable events
var enableNavigationEvents = function () {
$(".navigation > ul > li > a").on('click.screen-lt-980', function (e, data) {
data = (typeof data == 'undefined') ? {} : data;
if ($(this).next("ul").is(":visible") || data.forceClose) {
$(this).next("ul").slideUp(400);
} else {
$(".navigation > ul > li > ul").slideUp(400);
$(this).next("ul").slideToggle(400);
}
});
$(".navigation > ul > li > ul > li > a").on('click.screen-lt-980', function (e, data) {
data = (typeof data == 'undefined') ? {} : data;
if ($(this).next("ul").is(":visible") || data.forceClose) {
$(this).next("ul").slideUp(400);
} else {
$(".navigation > ul > li > ul > li > ul").slideUp(400);
$(this).next("ul").slideToggle(400);
}
});
$(".menu-link").on('click.screen-lt-980', function (e, data) {
data = (typeof data == 'undefined') ? {} : data;
if ($(this).next("div").is(":visible") || data.forceClose) {
$(this).next("div").slideUp(400);
} else {
$(".navigation").slideUp(400);
$(this).next("div").slideToggle(400);
}
});
}
// disable events
var disableNavigatioEvents = function () {
$(".navigation > ul > li > a").trigger('click', [{
forceClose: true
}]);
$(".navigation > ul > li > ul > li > a").trigger('click', [{
forceClose: true
}]);
$(".menu-link").trigger('click', [{
forceClose: true
}]);
$(".navigation > ul > li > a").off('click.screen-lt-980');
$(".navigation > ul > li > ul > li > a").off('click.screen-lt-980');
$(".menu-link").off('click.screen-lt-980');
}
// call this method on window resize
var redesignScreen = function () {
// function (e) { // comment this line
var width = $(window).width();
if ((width < 980)) {
if (!isNavigationEventsEnable) {
isNavigationEventsEnable = true;
enableNavigationEvents();
}
} else {
isNavigationEventsEnable = false;
disableNavigatioEvents();
}
// } // comment this line
}
$(document).ready(function () {
// attach onresize function
window.onresize = redesignScreen;
// calling redesignScreen initially
redesignScreen();
});
JSFiddle:http://jsfiddle.net/hEtTg/3/
Hopes it helps.

# tag pages.js problems

I am a newbie and I can't figure out how to get rid of "#!/". I did not create this code each time I open a page it comes up like this:
site/index.html#!/
site/index.html#!/page_home
site/index.html#!/page_portfolio
pages.js:
$(window).load(function() {
var act='';
$('#content > ul > li').css({position:'absolute', display:'none'});
$('#content > ul > li').find('.box1').css({height:'0'})
$('#menu > li > a span').css({opacity:'0'})
$('#menu > li > a').hover(function(){
$(this).find(' > span').stop().animate({opacity:'1'},600);
}, function(){
if (!$(this).hasClass('active')) {
$(this).find(' > span').stop().animate({opacity:'0'},600);
}
})
$('#menu > li').each(function(num){
$(this).data({num:num})
})
$('#content > ul > li').each(function(num){
$(this).data({num:num})
})
if (location.hash.slice(0,3)=='#!/') {
page=location.hash.slice(3);
open_page('#'+page);
fl=false;
}
if ((location.hash=='#')||(location.hash=='')) {
open_page('');
fl=true;
$('#content').stop().animate({height:'668'})
}
$('a').click(function(){
if ($(this).attr('href').slice(0,3)=='#!/') {
page=$(this).attr('href').slice(3);
open_page('#'+page);
return false;
}
if ($(this).attr('data-type')=='close') {
close_page()
}
})
function open_page(page){
location.hash='#!/'+page.slice(1);
$('#menu a').removeClass('active').find(' > span').stop().animate({opacity:'0'},600);
Cufon.replace('#menu a', { fontFamily: 'Ubuntu', hover:true });
num=$(page).data('num');
$('#menu > li').each(function(){
if ($(this).data('num')==num) {
$(this).find('> a').addClass('active').find('> span').stop().animate({opacity:'1'},600);
Cufon.replace('#menu a', { fontFamily: 'Ubuntu', hover:true });
}
})
fl=false;
$('#content').stop().animate({height:'868'})
if (act!='') {
$(act).find('.box1').stop().animate({height:'0'},700,'easeOutCirc', function(){
$(act).css({display:'none'});
$(page).css({display:'block'}).find('.box1').stop().animate({height:'100%'},700, 'easeOutCirc', function(){
act=page;
});
})
} else {
$(page).css({display:'block'}).find('.box1').stop().animate({height:'100%'},700, 'easeOutCirc', function(){
act=page;
});
}
}
function close_page(page){
$('#menu a').removeClass('active').find(' > span').stop().animate({opacity:'0'},600);
Cufon.replace('#menu a', { fontFamily: 'Ubuntu', hover:true });
location.hash='#';
$(act).find('.box1').stop().animate({height:'0'},700,'easeOutCirc', function(){
$(act).css({display:'none'});
act='';
fl=true;
$('#content').stop().animate({height:'668'})
});
return false;
}
})

Add class to child that fits url

I've made a one page layout website, where the menu doesn't show the active/current link, when users come from Google or bookmarked it.
I've made a script that works fine, but as you see.... it look horribly. How can I do this smart??
//Set .active to current page link
if (location.href.indexOf("#2") != -1) {
$("#menu li:nth-child(1) a ").addClass("active");
}
if (location.href.indexOf("#3") != -1) {
$("#menu li:nth-child(2) a ").addClass("active");
}
if (location.href.indexOf("#4") != -1) {
$("#menu li:nth-child(3) a ").addClass("active");
}
if (location.href.indexOf("#5") != -1) {
$("#menu li:nth-child(4) a ").addClass("active");
}
if (location.href.indexOf("#6") != -1) {
$("#menu li:nth-child(5) a ").addClass("active");
}
Thank you in advance...
How about something like:
$("#menu li:nth-child(" + ( location.hash.slice(1) - 1 ) + ") a ").addClass("active");
var m = location.href.match(/#(\d+)/);
if (m) {
var index = parseInt(m[1]) - 1;
if (index >= 1)
$("#menu li:nth-child("+index+") a ").addClass("active");
}

Categories

Resources